/* ============================================================
   uzomadunkwu.com
   One stylesheet, one small script, no framework and no motion
   library.

   Inside pages are white: the artwork is drawn on white paper,
   so on a dark page every sheet becomes a slab that needs a
   frame to survive, and on a white page it just sits there.

   The landing is the exception — one sheet, edge to edge, and
   the page takes that sheet's grey so nothing shows around it.
   ============================================================ */

:root {
  --paper: #ffffff;
  --ink: #111111;
  --dim: #8a8a8a;
  --rule: #e6e6e6;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --gap: clamp(3rem, 9vw, 8rem);

  --font-display: "Clash Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Satoshi", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  /* short pages — contact especially — would otherwise leave the footer
     stranded halfway up with white underneath it */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body > main { flex: 1 0 auto; }

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 10;
  transition: top 0.2s;
}
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------- header ---- */

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: var(--gutter) var(--gutter) 0;
}

.head__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.head {
  /* sticky so it is always reachable; above the fixed landing artwork,
     without which the hero image swallows every tap on the header and
     the menu never opens */
  position: sticky;
  top: 0;
  z-index: 55;
  background: var(--paper);
}

.head__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
}

.head__nav > a,
.drop__label { color: var(--dim); }
.head__nav > a:hover,
.head__nav a[aria-current] { color: var(--ink); }

/* dropdowns: hover or focus opens the panel */
.drop { position: relative; }
.drop__label { cursor: default; }

/* the mielgo plus — categories are marked, not announced */
.drop__label::after {
  content: "+";
  margin-left: 0.4em;
  font-weight: 400;
}

.drop__panel {
  position: absolute;
  top: 100%;
  left: 0;
  display: grid;
  gap: 0.5rem;
  min-width: 11rem;
  padding: 0.9rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.25rem);
  transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s ease;
}

.drop.is-open .drop__panel,
.drop:hover .drop__panel,
.drop:focus-within .drop__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.drop__panel a {
  color: var(--dim);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.drop__panel a:hover,
.drop__panel a[aria-current] { color: var(--ink); }

/* ---------------------------------------------------------- intro ----- */

.intro {
  padding: var(--gap) var(--gutter) 0;
  display: grid;
  gap: 1.25rem;
  max-width: 60rem;
}

.intro__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.intro__line { max-width: 46ch; color: var(--dim); }


/* ---------------------------------------------------------- text ------ */

.text {
  padding: var(--gap) var(--gutter);
  display: grid;
  gap: 1.25rem;
  max-width: 42rem;
}

.text h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.text p em { font-style: italic; }

/* ---------------------------------------------------------- footer ---- */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: var(--gap);
  padding: 2rem var(--gutter);
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
}

.foot__mail {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 2.2vw, 1.375rem);
}

.foot__mail:hover { text-decoration: underline; text-underline-offset: 0.15em; }

.foot__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.foot__links a { display: inline-flex; align-items: center; color: var(--dim); transition: color 0.2s ease; }
.foot__links a svg { display: block; width: 1.5rem; height: 1.5rem; }
.foot__links .social--instagram:hover { color: #e4405f; }
.foot__links .social--linkedin:hover { color: #0a66c2; }
.foot__links .social--youtube:hover { color: #ff0000; }
.foot__links .social--x:hover { color: #111; }

.foot__clients { width: 100%; color: var(--dim); font-size: 0.8125rem; }

/* ---------------------------------------------------------- landing -- */

/* The landing is the sheet and nothing else: full bleed, no margin, no
   paper showing anywhere. Both hero files have the sheet's own edges
   dragged outward to make them window-shaped (tools/prep_hero_landing.py),
   so `cover` eats that padding instead of the artwork and there is no
   join to find. The tall file is the left column only — Shakoo and the
   Eyes of Wakanda logo — because a 1.97 landscape on a phone can only
   ever be a slice of itself. */

body.is-hero {
  height: 100dvh;
  overflow: hidden;
  /* the sheet's own grey, so there is nothing to see before it loads */
  background: #6c6c6c;
}

.hero { position: fixed; inset: 0; z-index: 0; }

.hero picture { display: contents; }

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  animation: hero-in 0.9s ease both;
}

/* upright — a phone narrower than the tall file, or a tablet stood up on
   the wide one. Either way the frame is held left so the Eyes of Wakanda
   logo stays in it and the trim comes off the far edge. */
@media (max-aspect-ratio: 1/1) {
  .hero__img { object-position: 0% 50%; }
}

@keyframes hero-in { from { opacity: 0; } to { opacity: 1; } }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the opening line ---- */

/* The tagline stays put in the middle of the sheet and fades in once.
   Nothing is laid over the artwork to carry it — no veil, no panel, no
   shading. The type carries its own edge instead, a soft dark halo on
   the glyphs themselves, which is enough over the sheet's mid grey and
   over the figures alike. It is a link to the about page, and it
   brightens under the cursor to say so. */

.titlecard {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  /* clear of the header and clear of the bar, and centred in what is
     left — which on this sheet is the band across the figures' bodies,
     below the faces and above the artist's notes */
  padding: 7rem var(--gutter) 6rem;
  text-align: center;
  pointer-events: none;
}

.titlecard__line {
  pointer-events: auto;
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  /* Off the smaller axis, so it grows and shrinks with the artwork
     behind it rather than running off a short window. The third term
     caps it so the award line always fits across in one piece — it is
     that line's own width in ems. */
  font-size: clamp(1.25rem, min(7.2vw, 12vh, (100vw - 2 * var(--gutter)) / 14.3), 5.5rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: #fff;
  opacity: 0.5;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 40px rgba(0, 0, 0, 0.5);
  /* backwards, not both: a filled animation beats a :hover rule in the
     cascade, so forwards-filling this would pin the opacity at rest and
     the hover would never take */
  animation: line-in 1.4s ease 0.35s backwards;
  transition: opacity 0.25s ease, text-shadow 0.25s ease;
}

/* the award line stays whole; the rest wraps under it */
.titlecard__lead { display: block; white-space: nowrap; }

.titlecard__line:hover,
.titlecard__line:focus-visible {
  opacity: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 40px rgba(0, 0, 0, 0.5),
               0 0 34px rgba(255, 255, 255, 0.45);
}

@keyframes line-in { from { opacity: 0; } to { opacity: 0.5; } }

/* the build credit, in the empty run of the sheet's own bar */
.credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 0 var(--gutter) clamp(0.75rem, 2vh, 1.5rem);
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: #fff;
  opacity: 0.55;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  transition: opacity 0.25s ease;
}

.credit a { text-decoration: none; }
.credit a:hover,
.credit a:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; }

.credit:hover,
.credit:focus-within { opacity: 1; }

/* ---- the header stands on the artwork, in white ---- */

.head--over {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: clamp(1rem, 2.4vw, 1.75rem) var(--gutter);
  background: none;
  color: #fff;
}

/* No scrim. White on the sheet's grey measures 5.2:1, which clears AA on
   its own, and any gradient laid over the top of the drawing shows up as
   a band. The shadow below is only there for the few places where the
   artwork itself runs light behind the type. */

.head--over .head__name { color: #fff; }

.head--over .head__nav > a,
.head--over .drop__label { color: rgba(255, 255, 255, 0.82); }

.head--over .head__name,
.head--over .head__nav > a,
.head--over .drop__label { text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5); }

.head--over .head__nav > a:hover,
.head--over .drop__label:hover { color: #fff; }

.head--over .drop__panel {
  background: rgba(17, 17, 17, 0.88);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
}

.head--over .drop__panel a { color: rgba(255, 255, 255, 0.78); }
.head--over .drop__panel a:hover { color: #fff; }

.head--over .nav-burger span { background: #fff; }

/* the black focus ring disappears against the artwork */
.head--over :focus-visible { outline-color: #fff; }

@media (max-width: 640px) {
  .head--over .head__nav {
    background: rgba(17, 17, 17, 0.9);
    border-color: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
  }

  .head--over .drop__panel {
    background: none;
    border: 0;
    backdrop-filter: none;
  }
}

/* ---------------------------------------------------------- about ---- */

/* The title, then the award in his hand beside the writing, the pair of
   them centred on the page. Narrow screens stack it instead.

   The paragraphs keep their ragged right edge — it is the column that is
   centred, not the sentences inside it. */

/* align-content: start — main is a stretched flex item, and without it
   the grid would spread its rows down the spare height */
.mid { display: grid; justify-items: center; align-content: start; }

.mid .intro {
  justify-items: center;
  text-align: center;
  max-width: none;
}

.pair { width: 100%; display: grid; justify-items: center; }

/* the footer already carries a --gap above it; a second one below the
   last paragraph opens a hole */
.mid .text {
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.award {
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 0;
}

.award img {
  width: auto;
  height: auto;
  max-width: min(78vw, 26rem);
  max-height: 62vh;
}

/* wide enough for both columns to keep a readable measure */
@media (min-width: 1100px) {
  .pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2.5rem, 4.5vw, 5rem);
    padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 0;
  }

  .pair .award { flex: 0 1 24rem; padding: 0; }

  .pair .award img { max-width: 100%; max-height: 70vh; }

  .pair .text {
    flex: 0 1 40rem;
    margin: 0;
    padding: 0;
  }
}

/* ---------------------------------------------------------- deck ------ */

/* No scrolling on the work. One sheet fills the window and the controls
   under it step through the rest. Without JavaScript the deck shows the
   first sheet and nothing moves, so the controls stay hidden until the
   script claims them. */

body.is-deck { height: 100dvh; overflow: hidden; }

/* the page cannot scroll, so every pixel the header takes is a pixel off
   the artwork */
body.is-deck .head { padding: clamp(0.9rem, 2vw, 1.5rem) var(--gutter); }

body.is-deck > main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.deck {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.5rem, 1.2vw, 0.75rem);
  padding: 0 var(--gutter) clamp(0.6rem, 1.6vw, 1rem);
}

.deck__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 2.4vw, 1.75rem);
  letter-spacing: -0.01em;
}

.deck__stage { position: relative; min-height: 0; }

.slide {
  position: absolute;
  inset: 0;
  display: none;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.55rem;
  justify-items: center;
}

.deck:not(.is-live) .slide:first-of-type,
.deck.is-live .slide.is-on { display: grid; }

.slide__frame { position: relative; width: 100%; min-height: 0; }

/* sized to the artwork rather than stretched to the frame: a video
   hangs its controls off its own bottom edge, so a full-height element
   would leave them floating below the picture */
.slide__frame img,
.slide__frame video {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.slide figcaption { font-size: 0.8125rem; color: var(--dim); }

/* on the sheet, not under it: the arrows ride the edges of the stage and
   the marks sit along its foot */
.deck__bar {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.25rem 0.25rem;
  pointer-events: none;
}

.deck.is-live .deck__bar { display: flex; }

.deck__bar > * { pointer-events: auto; }

.deck__btn,
.deck__meta {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(6px);
}

/* the sheet's own title travels with the marks, so nothing sits on the
   artwork except this one pill */
.deck__meta {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.5rem 0.9rem;
  border-radius: 1.25rem;
}

.deck__cap {
  font-size: 0.75rem;
  color: var(--dim);
  text-align: center;
  max-width: 26ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck.is-live .slide figcaption { display: none; }

.deck__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.deck__btn:hover { border-color: var(--ink); background: #fafafa; }

.deck__btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.deck__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  max-width: 32rem;
}

.deck__dot {
  width: 1.25rem;
  height: 3px;
  padding: 0;
  border: 0;
  background: var(--rule);
  cursor: pointer;
  transition: background 0.2s;
}

.deck__dot:hover { background: #c4c4c4; }
.deck__dot[aria-current="true"] { background: var(--ink); }

@media (max-width: 640px) {
  .deck__dot { width: 0.75rem; }

  /* a board is a thin strip on a phone; the controls have to suit it */
  .view--board .deck__btn { width: 2rem; height: 2rem; }
  .view--board .deck__btn svg { width: 0.875rem; height: 0.875rem; }
  .view--board .view__bar { gap: 0.4rem; padding: 0.35rem 0.4rem; }
}

/* ---------------------------------------------------------- show ------ */

/* The storyboard pages hold two kinds of thing: a board to page through
   and an animatic on YouTube. A tab for each, one on screen at a time,
   nothing scrolling.

   The boards are the PDFs the client sent, rendered a page at a time by
   tools/prep_boards.py. Serving pages rather than the file means there
   is no 74 MB download to offer, and a reader waits for one page rather
   than the whole board. */

.show {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.5rem, 1.2vw, 0.75rem);
  padding: 0 var(--gutter) clamp(0.6rem, 1.6vw, 1rem);
}

.show__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.show__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 2.4vw, 1.75rem);
  letter-spacing: -0.01em;
}

.show__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.show__tab {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--dim);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.show__tab:hover { border-color: var(--ink); color: var(--ink); }

.show__tab[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.view {
  grid-row: 2;
  grid-column: 1;
  min-height: 0;
  display: none;
  grid-template-rows: minmax(0, 1fr);
  gap: 0.4rem;
}

.view.is-on { display: grid; }

.view__frame { position: relative; min-height: 0; }

/* Every board page is the same shape, so the frame can be held to it and
   becomes the artwork's own box — which is what lets the controls sit on
   the board rather than somewhere underneath it. The width is capped
   against the window height less the chrome above, a little conservative
   so the board never overruns its row. */
.view--board .view__frame {
  width: min(100%, calc((100dvh - 12.5rem) * 1552 / 735));
  margin-inline: auto;
  /* centre rather than stretch, so the frame's height is the board's
     height and the controls land on it and not below it */
  align-self: center;
}

.view--board .view__page {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}

.view__page {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  /* the board is to be read here, not collected: there is no file to
     take, and the page itself does not invite saving */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* The player keeps 16:9 and centres in whatever room is left. An iframe
   has no object-fit, so the width is capped against the window height
   less the chrome above it — a little conservative, which costs a few
   pixels and guarantees the player never overflows its frame. */
.view__film {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100%, calc((100dvh - 13.5rem) * 16 / 9));
  max-height: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.view__film iframe { width: 100%; height: 100%; border: 0; display: block; }

/* on the board, not under it */
.view--board .view__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
}

/* the boards are line on white, so the controls carry their own ground */
.view--board .deck__btn,
.view--board .view__scrub {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(6px);
}

.view--board .deck__btn { border-color: rgba(17, 17, 17, 0.25); }
.view--board .deck__btn:hover { border-color: var(--ink); background: #fff; }

.view__scrub {
  width: 100%;
  accent-color: var(--ink);
  cursor: pointer;
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
}

/* ---------------------------------------------------------- contact -- */

/* A dedicated page and nothing more: the address, and the four accounts
   the brief lists. No form — there is no host behind this site to
   receive one, and a form that quietly drops what people write is worse
   than an address they can copy. */

.reach {
  display: grid;
  justify-items: center;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) 0;
  text-align: center;
}

.reach__mail {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.reach__mail:hover { text-decoration: underline; text-underline-offset: 0.15em; }

.reach__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.5rem;
  font-size: 0.875rem;
}

.reach__social a { display: inline-flex; align-items: center; color: var(--dim); transition: color 0.2s ease; }
.reach__social a svg { display: block; width: 1.5rem; height: 1.5rem; }
.reach__social .social--instagram:hover { color: #e4405f; }
.reach__social .social--linkedin:hover { color: #0a66c2; }
.reach__social .social--youtube:hover { color: #ff0000; }
.reach__social .social--x:hover { color: #111; }

/* ---- upright screens: sit the controls against the work ---- */

/* A board is twice as wide as it is tall. On a phone it fills the width
   and leaves most of the column empty, which pushes the scrub — and a
   deck's caption — a long way from the thing it belongs to. So on those
   screens the artwork sizes itself and the pair centres together. */

@media (max-aspect-ratio: 1/1) {
  .view--board { align-content: center; }

  .deck.is-live .slide.is-on {
    align-content: center;
    grid-template-rows: auto auto;
  }

  .slide__frame { position: static; }

  .slide__frame img {
    position: static;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    margin-inline: auto;
  }
}

/* ---------------------------------------------------------- burger --- */

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.nav-burger {
  display: none;
  gap: 0.35rem;
  width: 2.25rem;
  padding: 0.55rem 0;
  cursor: pointer;
}

.nav-burger span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform 0.25s ease;
}

@media (max-width: 640px) {
  .nav-burger { display: grid; position: relative; z-index: 51; }

  #nav-toggle:checked ~ .nav-burger span:first-child {
    transform: translateY(0.2275rem) rotate(45deg);
  }

  #nav-toggle:checked ~ .nav-burger span:last-child {
    transform: translateY(-0.2275rem) rotate(-45deg);
  }

  /* compact panel under the header, top-right — not a takeover */
  .head__nav {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: var(--gutter);
    z-index: 50;
    display: grid;
    justify-items: start;
    gap: 0.85rem;
    min-width: 15rem;
    padding: 1.1rem 1.25rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s ease;
  }

  .head.is-open .head__nav,
  .head:has(#nav-toggle:checked) .head__nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* sub-links sit under their labels, always visible in the panel */
  .drop__label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }

  .drop__label::after { display: none; }

  .drop__panel {
    position: static;
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.45rem 0 0 1rem;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ---------------------------------------------------------- motion --- */

@media (prefers-reduced-motion: reduce) {
  .wall__tile img,
  .wall__cap { transition: none; }
  .lb { transition: none; }
  .hero__img { animation: none; }
  .titlecard__line { animation-duration: 0.01ms; }
}