/* ==========================================================================
   Rap & Rhapsody — section layouts
   Every scroll effect below has a real static fallback under
   prefers-reduced-motion: the content is never hidden, only un-animated.
   ========================================================================== */

/* --- Images --------------------------------------------------------------- */

.byq-pic { display: block; position: relative; }

.byq-pic__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--ink-raised);
}

/* Mono opens, colour breaks out.
   Everything above section 02 is desaturated: the box, the classical
   assumption. The dive in section 02 is where colour arrives, and it never
   leaves. This is art direction carrying the argument, not decoration. */
.byq-hero .byq-pic__img,
.byq-premise .byq-pic__img { filter: grayscale(1) contrast(1.05); }


/* --- Nav ------------------------------------------------------------------ */

.byq-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--gutter);
  background: transparent;
  border-bottom: var(--hairline) solid transparent;
  transition: background var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
}

.byq-nav[data-stuck] {
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--seam);
}

.byq-nav__mark {
  font-stretch: var(--wdth-display);
  font-weight: 900;
  font-size: var(--step-1);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-right: auto;
}

.byq-nav__mark-line { display: block; }

.byq-nav__links {
  display: flex;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ash);
}

.byq-nav__links a { transition: color var(--dur-fast) var(--ease-out); }
.byq-nav__links a:hover { color: var(--lavender); }

@media (max-width: 62rem) {
  .byq-nav__links { display: none; }
}

@media (max-width: 30rem) {
  .byq-nav__cta { padding-inline: var(--s-4); }
}


/* --- 00 Hero -------------------------------------------------------------- */

.byq-hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--s-10) + var(--s-8)) var(--section-pad);
}

.byq-hero__inner { width: min(100% - (var(--gutter) * 2), var(--container-wide)); }

.byq-hero__eyebrow { margin-bottom: var(--s-5); }

.byq-hero__title { margin-bottom: var(--s-6); }
.byq-hero__title-line { display: block; }

/* The ampersand is the one place the brand gets to be expressive. */
.byq-hero__title-line:first-child { color: var(--paper); }
/* Guarded: without text-stroke support a transparent fill would render the
   word invisible, so the outline treatment only applies where it can work. */
.byq-hero__title-line:last-child { color: var(--lavender); }

@supports (-webkit-text-stroke: 1px black) {
  .byq-hero__title-line:last-child {
    color: transparent;
    -webkit-text-stroke: clamp(1px, 0.18vw, 3px) var(--lavender);
  }
}

.byq-hero__lede { margin-bottom: var(--s-8); color: var(--ash); }

.byq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

/* Phones: the two CTAs stack as equal, full-width buttons. */
@media (max-width: 42rem) {
  .byq-hero__actions { flex-direction: column; }
  .byq-hero__actions .byq-btn { width: 100%; justify-content: center; }
}


/* --- Video slot ------------------------------------------------------------
   Aspect ratio is fixed at 16:9 so swapping the montage for the real embed
   causes zero reflow. */

.byq-video { margin: 0; }

.byq-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-raised);
  border: var(--hairline) solid var(--seam);
}

.byq-video__montage { position: absolute; inset: 0; }

.byq-video__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}

.byq-video__slide--on { opacity: 1; }

.byq-video__slide .byq-pic__img { width: 100%; height: 100%; }

.byq-video__play {
  position: absolute;
  left: var(--s-5);
  bottom: var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: var(--s-2) var(--s-5) var(--s-2) var(--s-2);
  border: var(--hairline) solid var(--lavender);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  backdrop-filter: blur(8px);
  color: var(--paper);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.byq-video__play:hover { background: var(--ink); }

.byq-video__play-ring {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--ink);
}

.byq-video__play-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* The film's description across the full width of the frame, credits
   beneath in a 2 x 2 grid. Desaturated like the rest of the hero. */
.byq-video__caption {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-5);
}

.byq-video__story { color: var(--fg-muted); text-wrap: pretty; }
.byq-video__story p + p { margin-top: var(--s-3); }

.byq-video__credits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-6);
  margin: 0;
}

/* Names sit on a shared baseline across each row, even when a long label
   wraps to two lines on a phone. */
.byq-video__credits div {
  display: flex;
  flex-direction: column;
  padding-top: var(--s-3);
  border-top: var(--hairline) solid var(--rule);
}
.byq-video__credits dt { margin-bottom: var(--s-1); }
.byq-video__credits dd { margin: auto 0 0; }


/* --- 01 Premise ------------------------------------------------------------ */

.byq-premise { padding-block: var(--s-10); }

.byq-premise__statement {
  font-stretch: 85%;
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.24;
  letter-spacing: -0.012em;
  max-width: 24ch;
  margin-top: var(--s-6);
  text-wrap: balance;
}

.byq-premise__statement em {
  font-style: normal;
  color: var(--lavender);
}

/* Word-level blur reveal. Words are set faint and out of focus, and scroll
   scrubs them sharp. JS splits the text into .byq-word spans. */
.byq-word {
  display: inline-block;
  filter: blur(6px);
  opacity: 0.22;
  will-change: filter, opacity;
}


/* --- 02 The Box  ★ -------------------------------------------------------- */

.byq-box { position: relative; background: var(--ink); padding-top: var(--s-9); }

.byq-box__leadin {
  margin: 0 auto var(--s-5);
  text-align: center;
  width: min(100% - (var(--gutter) * 2), 40ch);
  color: var(--ash);
}

/* Static by default: the photograph and its caption are simply visible, and
   the knockout plate does not exist. main.js sets [data-animated] on <html>
   to opt into the dive. With scripting off the section still reads. */
.byq-box__runway { position: relative; height: auto; }

.byq-box__stage {
  position: relative;
  height: 80svh;
  overflow: hidden;
  background: var(--ink);
}

/* Runway height sets how long the dive lasts. Load-bearing — see the BYQ
   motion spec; 380vh is the value the effect is tuned for. */
[data-animated] .byq-box__runway { height: 380vh; }
[data-animated] .byq-box__stage { height: 100svh; }

.byq-box__photo,
.byq-box__porthole {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.byq-box__photo { z-index: 1; }
.byq-box__photo .byq-pic__img { transform-origin: 50% 50%; will-change: transform; }

.byq-box__plate {
  /* The plate must match the page canvas exactly or the knockout illusion
     breaks. currentColor keeps it tied to the token, not a copied hex. */
  color: var(--ink);
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
}

.byq-box__porthole {
  display: none;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

[data-animated] .byq-box__plate,
[data-animated] .byq-box__porthole { display: block; }

/* Expanded, not condensed. Two reasons: the O's counter becomes nearly
   circular so the aperture reads as a real opening, and the zoom needed to
   fly through it drops well inside the safe range. The word also simply
   looks more like a box. These exact values are what tools measured the
   dive geometry against -- see GLYPH in main.js. */
.byq-box__glyphs {
  font-family: var(--font-sans);
  font-stretch: var(--wdth-box);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-anchor: middle;
}

.byq-box__meter { visibility: hidden; pointer-events: none; }

/* The landing photograph is bright and busy exactly where the caption sits,
   so the quote needs its own ground. Fades in with the caption rather than
   darkening the image during the dive. */
.byq-box__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top,
    var(--ink) 0%,
    color-mix(in srgb, var(--ink) 72%, transparent) 42%,
    transparent 100%);
}

[data-animated] .byq-box__scrim { opacity: 0; }

.byq-box__caption {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.5rem, 5vw, 3.5rem);
  z-index: 4;
  margin: 0;
  max-width: 46ch;
  will-change: transform, opacity;
}

.byq-box__caption blockquote {
  font-stretch: 90%;
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.35;
  margin-bottom: var(--s-3);
  text-wrap: pretty;
}

.byq-box__caption blockquote::before { content: '“'; color: var(--lavender); }
.byq-box__caption blockquote::after  { content: '”'; color: var(--lavender); }


/* --- 03 The day / sticky media swap --------------------------------------- */

.byq-day__head { max-width: var(--measure); margin-bottom: var(--s-9); }
.byq-day__head .byq-h2 { margin-block: var(--s-4) var(--s-5); }

.byq-swap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}

.byq-swap__list { display: grid; gap: var(--s-2); }

.byq-swap__trigger {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s-5) 0;
  background: none;
  border: 0;
  border-top: var(--hairline) solid var(--rule);
  color: inherit;
  cursor: pointer;
  transition: opacity var(--dur-mid) var(--ease-out);
}

/* Dimming the inactive steps only makes sense while the sticky frame is
   actually tracking them. Without motion, every step reads at full strength. */
[data-animated] .byq-swap__item:not([data-active]) .byq-swap__trigger { opacity: 0.38; }

.byq-swap__index { display: block; margin-bottom: var(--s-3); }
.byq-swap__item[data-active] .byq-swap__index { color: var(--lavender); }

.byq-swap__title { display: block; margin-bottom: var(--s-3); }

.byq-swap__body {
  display: block;
  max-width: 46ch;
  color: var(--fg-muted);
}

.byq-swap__media {
  position: sticky;
  top: calc(50svh - 28svh);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-raised);
  border: var(--hairline) solid var(--rule);
}

.byq-swap__frame {
  position: absolute;
  inset: 0;
  transition: clip-path var(--dur-slow) var(--ease-out);
}

[data-animated] .byq-swap__frame { clip-path: inset(0 0 100% 0); }
[data-animated] .byq-swap__frame--on { clip-path: inset(0 0 0 0); }
.byq-swap__frame .byq-pic__img { width: 100%; height: 100%; }

@media (max-width: 60rem) {
  .byq-swap { grid-template-columns: minmax(0, 1fr); }
  /* Below the breakpoint the sticky frame stops earning its complexity:
     each step shows its own image inline instead. */
  .byq-swap__media { display: none; }
}


/* --- 04 Voices ------------------------------------------------------------ */

.byq-voices__head { margin-bottom: var(--s-9); }
.byq-voices__head .byq-h2 { margin-top: var(--s-4); }

.byq-voices__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7);
}

.byq-quote {
  margin: 0;
  padding-top: var(--s-5);
  border-top: var(--hairline) solid var(--rule);
}

.byq-quote blockquote {
  font-stretch: 88%;
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.34;
  letter-spacing: -0.008em;
  margin-bottom: var(--s-4);
  text-wrap: pretty;
}

.byq-quote blockquote::before {
  content: '“';
  color: var(--lavender);
}

.byq-quote blockquote::after {
  content: '”';
  color: var(--lavender);
}

/* Two quotes are set larger — the ones that carry the emotional and the
   institutional argument respectively. */
.byq-quote--lead blockquote {
  font-size: var(--step-2);
  font-stretch: 80%;
  font-weight: 600;
  line-height: 1.2;
}

.byq-quote--wide { grid-column: span 2; }

@media (max-width: 62rem) {
  .byq-voices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 42rem) {
  .byq-voices__grid { grid-template-columns: minmax(0, 1fr); }
  .byq-quote--wide { grid-column: auto; }
}


/* --- 05 Contact sheet ----------------------------------------------------- */

.byq-sheet { padding-block: var(--section-pad) 0; }

.byq-sheet__head { margin-bottom: var(--s-8); }
.byq-sheet__head .byq-h2 { margin-top: var(--s-4); }

.byq-sheet__rail { overflow: hidden; }

.byq-sheet__track {
  display: flex;
  gap: 0;
  will-change: transform;
}

/* Julia Krantz's contact sheet: zero gutters, hairline seams, tiny mono
   captions. The photographs supply every bit of colour on the page. */
.byq-sheet__tile {
  position: relative;
  flex: 0 0 auto;
  width: clamp(16rem, 27vw, 30rem);
  aspect-ratio: 4 / 5;
  border-left: var(--hairline) solid var(--seam);
  overflow: hidden;
}

.byq-sheet__tile:last-child { border-right: var(--hairline) solid var(--seam); }

.byq-sheet__tile .byq-pic,
.byq-sheet__tile .byq-pic__img { width: 100%; height: 100%; }

.byq-sheet__tile .byq-pic__img {
  transition: filter var(--dur-slow) var(--ease-out);
}

.byq-sheet__tile:hover .byq-pic__img { filter: brightness(0.82); }

.byq-sheet__cap {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  color: var(--paper);
  mix-blend-mode: difference;
}

/* Without JS, or with reduced motion, the rail is an ordinary swipeable
   scroller rather than a pinned horizontal animation. */
.byq-sheet__rail:not([data-pinned]) {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.byq-sheet__rail:not([data-pinned]) .byq-sheet__tile { scroll-snap-align: start; }


/* --- 06 Why --------------------------------------------------------------- */

.byq-why__head { margin-bottom: var(--s-9); }
.byq-why__head .byq-h2 { margin-top: var(--s-4); }

.byq-why__col-title { margin-bottom: var(--s-6); }

.byq-list { display: grid; gap: var(--s-5); }

.byq-list li {
  padding-top: var(--s-4);
  border-top: var(--hairline) solid var(--rule);
  text-wrap: pretty;
}

.byq-list strong {
  display: block;
  font-stretch: 95%;
  font-weight: 700;
  margin-bottom: var(--s-2);
}

.byq-list li { color: var(--fg-muted); }
.byq-list strong { color: var(--fg); }

/* The objection-killer. Set in plum on the paper band so it reads as a spec
   card a director can point at, not another paragraph. */
.byq-logistics {
  margin-top: var(--s-9);
  padding: var(--s-7);
  background: var(--bg);
  color: var(--fg);
}

.byq-logistics__title { margin-bottom: var(--s-5); color: var(--fg-accent); }

.byq-logistics__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  font-stretch: 90%;
  font-weight: 500;
  font-size: var(--step-1);
  counter-reset: need;
}

.byq-logistics__list li {
  counter-increment: need;
  padding-top: var(--s-4);
  border-top: var(--hairline) solid var(--rule);
  text-wrap: pretty;
}

/* Three numerals make "that's the whole list" legible at a glance. */
.byq-logistics__list li::before {
  content: counter(need, decimal-leading-zero);
  display: block;
  margin-bottom: var(--s-4);
  font-stretch: var(--wdth-display);
  font-weight: 900;
  font-size: var(--step-4);
  line-height: 1;
  color: var(--fg-accent);
}

.byq-logistics__note { margin-top: var(--s-6); }

@media (max-width: 52rem) {
  .byq-logistics__list { grid-template-columns: minmax(0, 1fr); }
  .byq-logistics { padding: var(--s-5); }
}


/* --- 07 Artist ------------------------------------------------------------ */

.byq-artist__inner { align-items: center; }

.byq-artist__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: var(--hairline) solid var(--rule);
}

.byq-artist__media .byq-pic,
.byq-artist__media .byq-pic__img { width: 100%; height: 100%; }


/* --- 08 Future ------------------------------------------------------------ */

.byq-future__title { margin-block: var(--s-4) var(--s-5); }
.byq-future__lede { margin-bottom: var(--s-8); }

.byq-future__list { display: grid; gap: var(--s-5); }

.byq-future__list li {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--hairline) solid var(--rule);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.byq-future__note { margin-top: var(--s-8); }

@media (max-width: 42rem) {
  .byq-future__list li { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}


/* --- 08 Questions -------------------------------------------------------- */
/* Ported from BYQ `kelvin-faq-1`: heading left, hairline-ruled list right,
   a + that turns to an x when open. Native <details>, so no script needed. */

.byq-faq__inner { align-items: start; }
.byq-faq__head .byq-h2 { margin-top: var(--s-4); }
.byq-faq__head .byq-lede { margin-top: var(--s-5); }

.byq-faq__list { border-top: var(--hairline) solid var(--rule); }
.byq-faq__item { border-bottom: var(--hairline) solid var(--rule); }

.byq-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-5);
  padding-block: var(--s-5);
  list-style: none;
  cursor: pointer;
  font-stretch: 90%;
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.3;
  text-wrap: pretty;
  transition: color var(--dur-fast) var(--ease-out);
}

.byq-faq__q::-webkit-details-marker { display: none; }
.byq-faq__q:hover { color: var(--fg-accent); }

.byq-faq__q::after {
  content: '+';
  flex: none;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--fg-accent);
  transition: transform var(--dur-fast) var(--ease-out);
}

.byq-faq__item[open] .byq-faq__q::after { transform: rotate(45deg); }

.byq-faq__a {
  max-width: var(--measure);
  padding-bottom: var(--s-5);
  color: var(--fg-muted);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .byq-faq__q,
  .byq-faq__q::after { transition: none; }
}


/* --- 09 Book -------------------------------------------------------------- */

.byq-book__title { margin-block: var(--s-4) var(--s-9); }

.byq-book__doors { align-items: start; }

.byq-door {
  padding-top: var(--s-5);
  border-top: var(--hairline) solid var(--rule);
}

.byq-door__title { margin-bottom: var(--s-4); }
.byq-door .byq-prose { margin-bottom: var(--s-6); color: var(--fg-muted); }

.byq-book__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: var(--hairline) solid var(--rule);
  font-style: normal;
}


/* --- One-pager gate ------------------------------------------------------ */
/* A <dialog> in the top layer. It sits outside every band, so it reads the
   root (ink) assignments: the same dark surface and lavender accents as the
   page around the booking doors. Flat, square, hairline-edged. */

.byq-gate {
  width: min(100% - (var(--gutter) * 2), 34rem);
  max-height: calc(100svh - (var(--gutter) * 2));
  margin: auto;
  padding: 0;
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  overflow: auto;
}

.byq-gate::backdrop {
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(6px);
}

html:has(.byq-gate[open]) { overflow: hidden; }

.byq-gate__panel { padding: var(--s-7); }

.byq-gate__title { margin-block: var(--s-4) var(--s-4); }
.byq-gate__note { max-width: var(--measure); text-wrap: pretty; }

.byq-gate__label { display: block; margin-top: var(--s-6); margin-bottom: var(--s-3); }

.byq-gate__input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  font-size: var(--step-0);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.byq-gate__input:hover,
.byq-gate__input:focus { border-color: var(--fg-muted); }
.byq-gate__input[aria-invalid="true"] { border-color: var(--fg-accent); }

.byq-gate__status {
  min-height: 1.5em;
  margin-top: var(--s-3);
  font-size: var(--step--1);
  color: var(--fg-accent);
}

.byq-gate__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.byq-gate__done .byq-gate__actions { margin-top: var(--s-6); }

/* Off-screen rather than display:none, which some bots know to skip. */
.byq-gate__trap {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 30rem) {
  .byq-gate__panel { padding: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .byq-gate__input { transition: none; }
}


/* --- Privacy page -------------------------------------------------------- */
/* A dark title band like the rest of the site, then plain reading on paper:
   one column at prose measure, hairline-free, lavender square bullets as on
   the one-pager. */

/* Clears the fixed nav, like the hero does. */
.byq-legal__intro { padding-top: calc(var(--s-10) + var(--s-6)); }
.byq-legal__title { margin-block: var(--s-4) var(--s-5); }
.byq-legal__updated { margin-top: var(--s-6); }

.byq-legal__body > * { max-width: var(--measure); }
.byq-legal__body p { text-wrap: pretty; }
.byq-legal__body h2 { margin-top: var(--s-8); margin-bottom: var(--s-4); }
.byq-legal__body h2:first-child { margin-top: 0; }
.byq-legal__body p + p,
.byq-legal__body p + ul { margin-top: var(--s-4); }

.byq-legal__body ul { display: grid; gap: var(--s-4); }
.byq-legal__body li {
  position: relative;
  padding-left: var(--s-5);
  text-wrap: pretty;
}
.byq-legal__body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: var(--s-2);
  height: var(--s-2);
  background: var(--fg-accent);
}


/* --- Footer --------------------------------------------------------------- */

.byq-footer { padding-block: var(--s-7); border-top: var(--hairline) solid var(--seam); }

.byq-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.byq-footer__links { display: flex; gap: var(--s-6); }


/* --- Reduced motion: real static fallbacks --------------------------------
   Content is never hidden. Each effect resolves to a readable resting state. */

@media (prefers-reduced-motion: reduce) {

  /* Premise: words already sharp. */
  .byq-word { filter: none; opacity: 1; }

  /* Box and Day already rest in their static states -- main.js never sets
     [data-animated] under reduced motion. Only the stacked gallery needs
     restating, since its sticky frame is a layout choice rather than motion. */
  .byq-swap__media {
    position: static;
    aspect-ratio: auto;
    overflow: visible;
    border: 0;
    display: grid;
    gap: var(--s-4);
  }
  .byq-swap__frame {
    position: static;
    clip-path: none;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: var(--hairline) solid var(--rule);
  }

  /* Rail: plain horizontal scroller. */
  .byq-video__slide { transition: none; }
}


/* --- Video lightbox -------------------------------------------------------
   Created by main.js only when HERO_VIDEO.src is configured. */

.byq-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100svh;
  max-height: 100svh;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--paper);
}

.byq-lightbox::backdrop { background: rgba(11, 10, 13, 0.92); }

.byq-lightbox__frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

/* Sized by whichever is tighter, width or height, so a 16:9 film never
   runs off a short screen (a phone turned sideways). */
.byq-lightbox__media {
  width: min(100%, 100rem, calc((100svh - var(--gutter) * 2) * 16 / 9));
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  background: #000;
}

.byq-lightbox__close {
  position: absolute;
  top: var(--s-5);
  right: var(--gutter);
  z-index: 1;
  min-height: 44px;
  padding: var(--s-2) var(--s-5);
  background: transparent;
  border: var(--hairline) solid var(--lavender);
  border-radius: var(--radius-pill);
  color: var(--lavender);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.byq-lightbox__close-icon { display: none; }

/* Small screens: Close becomes a round x, still a 44px tap target. */
@media (max-width: 48rem), (orientation: landscape) and (max-height: 32rem) {
  .byq-lightbox__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    letter-spacing: 0;
  }
  .byq-lightbox__close-label { display: none; }
  .byq-lightbox__close-icon { display: block; font-size: var(--step-1); line-height: 1; }
}

/* Phone in landscape: give the film nearly the full height, and move Close
   into the side margin that a 16:9 frame leaves on a wide, short screen. */
@media (orientation: landscape) and (max-height: 32rem) {
  /* Side padding leaves a clear lane for the 44px x on either side. */
  .byq-lightbox__frame { padding: var(--s-4) calc(44px + var(--s-3) * 2); }
  .byq-lightbox__media { width: min(100%, calc((100svh - var(--s-4) * 2) * 16 / 9)); }
  .byq-lightbox__close { top: var(--s-3); right: var(--s-3); }
}

/* Play button when no film is configured yet — reads as informational,
   not as a broken control. */
.byq-video__play[aria-disabled='true'] { cursor: default; opacity: 0.75; }


/* Resting states are the CSS default throughout this file; [data-animated]
   opts into motion. Nothing further is needed for the scriptless case. */