/* ===================================================================
   HERO AWARD — WBDS Agency Design Awards 2025/26, Bronze.
   Sits in the white half of the hero fold, bottom-right, on the same
   baseline as the scroll mouse: the headline keeps the left, the award
   answers it from the right. The full announcement opens in a dialog.
   Same tokens as the rest of the page: paper, ink, one yellow accent.
=================================================================== */

.hero-award{
  /* Same grid as the text it answers: the right edge on the nav's right
     edge (var(--pad), mirroring the headline's left edge), the bottom on
     the standfirst's bottom (the hero-content's own bottom padding). */
  position:absolute; right:var(--pad); bottom:clamp(5rem,10vh,8rem); z-index:3;
  width:clamp(270px, 24vw, 350px);
  opacity:0; transform:translateY(14px);
  animation:award-in .9s var(--ease) .55s forwards;
}
@keyframes award-in{ to{ opacity:1; transform:translateY(0); } }

.hero-award-badge{ width:100%; height:auto; }

.hero-award-meta{
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.55rem;
}
.hero-award-k{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; color:var(--ink-2); }
.hero-award-k b{ white-space:nowrap; }
.hero-award-k b{ font-weight:500; color:var(--ink); }
.hero-award-line{ font-size:1rem; line-height:1.4; color:var(--ink); }
.hero-award-line em{ font-style:normal; box-shadow:inset 0 -0.45em var(--accent); }
.hero-award-line a em{ transition:box-shadow .3s var(--ease); }
.hero-award-line a:hover em, .hero-award-line a:focus-visible em{ box-shadow:inset 0 -1.2em var(--accent); }

.hero-award-more{
  align-self:flex-start; display:inline-flex; align-items:center; gap:.5rem; margin-top:.2rem;
  background:none; border:none; border-bottom:2px solid var(--ink); padding:0 0 .3rem;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; color:var(--ink);
}
.hero-award-more span{ display:inline-block; transition:transform .3s var(--ease); }
.hero-award-more:focus-visible, .hero-award-line a:focus-visible, .award-note-close:focus-visible, .award-note-link:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.hero-award-more:focus:not(:focus-visible){ outline:none; }
.hero-award-more:hover span, .hero-award-more:focus-visible span{ transform:translateX(4px); }

/* ---------------- the announcement ---------------- */
.award-note{
  margin:auto; padding:0; border:none;
  width:min(620px, calc(100vw - 2rem)); max-height:calc(100svh - 2rem);
  background:var(--paper); color:var(--ink);
  font-family:var(--font-display);
}
.award-note::backdrop{ background:rgba(17,17,17,.62); backdrop-filter:blur(2px); }
.award-note[open]{ animation:note-in .45s var(--ease); }
@keyframes note-in{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

.award-note-inner{ position:relative; padding:clamp(1.6rem,4.5vw,3.2rem); }
.award-note-close{
  position:absolute; top:clamp(1rem,2.4vw,1.4rem); right:clamp(1rem,2.4vw,1.4rem);
  background:none; border:none; padding:.2rem 0;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; color:var(--ink-2);
}
.award-note-close:hover{ color:var(--ink); }

.award-note-badge{ width:min(100%, 420px); height:auto; margin-top:1.4rem; }
.award-note-k{ display:block; margin-top:1.8rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--ink-2); }

/* the seam — a horizontal bar, positive rotation, so it always reads "\" */
.award-note-seam{ width:56px; height:3px; background:var(--ink); transform:rotate(24deg); transform-origin:left center; margin:1.4rem 0 1.6rem .2rem; }

.award-note-lead{ font-size:clamp(1.2rem,2.2vw,1.5rem); font-weight:500; line-height:1.42; letter-spacing:-.005em; }
.award-note-lead em{ font-style:normal; box-shadow:inset 0 -0.45em var(--accent); }
.award-note-body{ margin-top:1rem; font-size:1.05rem; line-height:1.6; color:var(--ink-2); }
.award-note-sign{ margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:500; }
.award-note-link{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.6rem;
  padding:1rem 1.6rem; border:1px solid var(--ink); color:var(--ink);
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.award-note-link:hover, .award-note-link:focus-visible{ background:var(--ink); color:var(--paper); }
.award-note-link span{ display:inline-block; transition:transform .3s var(--ease); }
.award-note-link:hover span{ transform:translateX(4px); }

/* ---------------- tablet / phone ----------------
   The hero stacks at 900px: the award joins the text column, above the
   eyebrow, as a compact row — badge left, facts right. */
@media (max-width:1100px) and (min-width:901px){
  .hero-award{ width:260px; }
}
/* Short laptop screens: the fold's diagonal comes down to meet the card,
   so the card sheds its sentence (it is in the note) and tightens up. */
@media (min-width:901px) and (max-height:760px){
  .hero-award-line{ display:none; }
  .hero-award-meta{ margin-top:.75rem; padding-top:.75rem; gap:.5rem; }
}
@media (max-width:900px){
  .hero-award{
    position:relative; right:auto; bottom:auto; width:100%; max-width:420px;
    display:grid; grid-template-columns:minmax(0,1fr); margin-bottom:1.8rem;
  }
  .hero-award-badge{ width:min(100%, 250px); }
  .hero-award-meta{ margin-top:.8rem; padding-top:.8rem; gap:.45rem; }
  .hero-award-line{ font-size:.95rem; }
}
@media (max-width:430px){
  .hero-award{ margin-bottom:1.3rem; }
  .award-note-link{ width:100%; justify-content:center; }
  .hero-award-badge{ width:210px; }
  .hero-award-line{ display:none; }
}
@media (max-height:620px) and (max-width:900px){
  .hero-award-k, .hero-award-line{ display:none; }
  .hero-award-meta{ border-top:none; margin-top:.5rem; padding-top:0; }
  .hero-award-badge{ width:180px; }
}

@media (prefers-reduced-motion:reduce){
  .hero-award{ animation:none; opacity:1; transform:none; }
  .award-note[open]{ animation:none; }
}