/* Faith Labs
   ---------------------------------------------------------------------------
   The visual world is laboratory signage: bolted equipment placards, safety
   color coding, engraved stencil labels, hazard banding. See DESIGN.md for the
   direction contract. The rules that matter most while editing this file:

     - Rules and borders are always ink, always 2px or 3px. Never grey.
     - Elevation is a hard offset ink block. Never a soft shadow.
     - Color is coded. Green means go, blue means notice, red means stopped,
       orange means the kids' zone, yellow means look here.
     - No gradients except the hazard stripes and the screw heads.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* Coded palette. Every pairing below is AA at body size; see DESIGN.md. */
  --ink: #14140F;
  --caution: #F2B705;   /* attention        · ink on it, 10.2:1 */
  --go: #0E6E36;        /* go, register     · white on it, 6.4:1 */
  --notice: #0B5FA5;    /* notice, handouts · white on it, 6.6:1 */
  --danger: #C1272D;    /* stopped, closed  · white on it, 5.8:1 */
  --warn: #E2601A;      /* the kids' zone   · ink on it, 5.2:1 */
  --panel: #FFFFFF;
  --bone: #F3F0E7;

  /* Secondary text is the ground's own hue darkened, never grey. */
  --ink-soft: #4A4A3C;
  --on-caution-soft: #5C4703;
  --on-ink-soft: #C9C7B4;

  --edge: 3px;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --maxw: 1120px;
  --gut: clamp(1.1rem, 4vw, 2.5rem);

  --snap: 180ms cubic-bezier(.2, .9, .3, 1);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1.0625rem, .4vw + 1rem, 1.1875rem);
  font-weight: 420;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; }

/* The logo and badge are traced outlines that still carry their intrinsic
   width and height attributes. Without this they lay out at 512px tall inside
   whatever box they are given. The pictograms in .ic are sized deliberately and
   are left alone. */
.head__logo svg,
.foot__logo svg,
.hero__badge svg { display: block; width: 100%; height: auto; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

button { font: inherit; color: inherit; }

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

/* On ink and on the safety colors a black outline disappears. */
.rail :focus-visible,
.sign--go:focus-visible,
.sign--notice:focus-visible,
.sign--danger:focus-visible,
.on-ink :focus-visible {
  outline-color: var(--caution);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--caution);
  color: var(--ink);
  padding: .75rem 1.25rem;
  border: var(--edge) solid var(--ink);
  font-weight: 700;
}
.skip:focus { left: .5rem; top: .5rem; }

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

/* --------------------------------------------------------------------------
   Type roles
   -------------------------------------------------------------------------- */

/* WIDTH IS THE POINT. Every display setting on this site runs CONDENSED, not
   expanded. Two reasons, and they agree:
     1. The GOD IS series posters are set in a bold condensed gothic. A parent
        who saw the poster on Wednesday should meet the same voice on Thursday.
     2. Real signage is condensed. DIN, Highway Gothic and every enamel plate
        squeeze the letters, because a narrow face fits more words on a fixed
        plate. Expanded type is a screen habit, not a signage one.
   Condensing also buys size: the attribute word is now far larger than it was
   at 125% width and still fits "SOVEREIGN" on a 375px phone. */

/* The engraved plate label. This is the site's primary labelling device: it
   names a thing on a rail, never floats as decoration over a section. */
.stencil {
  font-weight: 700;
  font-stretch: 66%;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .75rem;
  line-height: 1.2;
}
.stencil--lg { font-size: .875rem; }

/* A stencil label with a pictogram in it. Buttons get this spacing from .sign's
   own flex gap; a bare paragraph has nothing, so the icon ends up welded to the
   first letter. */
.label-ic { display: flex; align-items: center; gap: .45rem; }

.display {
  font-weight: 900;
  font-stretch: 84%;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .96;
  text-wrap: balance;
}

.lead {
  font-weight: 500;
  font-size: clamp(1.15rem, .55vw + 1rem, 1.35rem);
  line-height: 1.45;
  max-width: 46ch;
}

.prose { max-width: 68ch; }
.prose p + p { margin-top: 1em; }

.data { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.field { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.field--caution { background: var(--caution); }
.field--bone { background: var(--bone); }
.field--panel { background: var(--panel); }
.field--ink { background: var(--ink); color: var(--panel); }

.stack > * + * { margin-top: var(--s, 1.5rem); }

/* --------------------------------------------------------------------------
   Pictograms
   -------------------------------------------------------------------------- */

.ic {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  flex: none;
  vertical-align: -.18em;
}
.ic--lg { width: 2.5rem; height: 2.5rem; }

/* --------------------------------------------------------------------------
   Rail — a solid ink bar carrying stencil labels and a code.
   -------------------------------------------------------------------------- */

.rail {
  background: var(--ink);
  color: var(--panel);
}

.rail__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem clamp(.9rem, 3vw, 2rem);
  min-height: 2.75rem;
  padding-block: .55rem;
}

/* Pipe separators between standing facts, the way a placard sets them. */
.rail__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem clamp(.75rem, 2.5vw, 1.5rem);
}
.rail__facts li {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.rail__facts li + li {
  border-left: 2px solid var(--on-ink-soft);
  padding-left: clamp(.75rem, 2.5vw, 1.5rem);
}

/* Stacked on a phone, so the separators would sit as stray ticks down the left
   edge instead of between the facts. */
@media (max-width: 47rem) {
  .rail__facts { flex-direction: column; align-items: flex-start; }
  .rail__facts li + li { border-left: 0; padding-left: 0; }
}
.rail__facts a { text-decoration-thickness: 2px; text-underline-offset: .25em; }

/* --------------------------------------------------------------------------
   Plate — the base container. Bolted at four corners, hard ink shadow.
   -------------------------------------------------------------------------- */

/* A plate is always a light surface, so it sets its own ink rather than
   inheriting whatever the field around it uses. Without this, a plate dropped
   into .field--ink renders white text on white. */
.plate {
  position: relative;
  background: var(--panel);
  color: var(--ink);
  border: var(--edge) solid var(--ink);
  border-radius: 3px;
  box-shadow: var(--shadow);
}

/* Screw heads, bolted through the plate's face. They live on the body rather
   than the plate so a plate with a header rail still shows all four: on the
   rail they would be black on black. */
.plate__body { position: relative; }
.plate__body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 10px 10px, var(--ink) 0 3.5px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 10px) 10px, var(--ink) 0 3.5px, transparent 3.6px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--ink) 0 3.5px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--ink) 0 3.5px, transparent 3.6px);
}

.plate--bone { background: var(--bone); }
.plate--flat { box-shadow: none; }

/* A plate's own header rail, flush inside the top edge. */
.plate__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem 1rem;
  background: var(--ink);
  color: var(--panel);
  padding: .6rem clamp(1rem, 3vw, 1.5rem);
}
.plate__rail--caution { background: var(--caution); color: var(--ink); }
.plate__rail--go { background: var(--go); color: var(--panel); }
.plate__rail--notice { background: var(--notice); color: var(--panel); }
.plate__rail--warn { background: var(--warn); color: var(--ink); }
.plate__rail--danger { background: var(--danger); color: var(--panel); }

.plate__body { padding: clamp(1.35rem, 4vw, 2.5rem); }

/* --------------------------------------------------------------------------
   Photo — a photograph mounted like everything else on this board: ink border,
   hard shadow, and a stencil label bar naming what you are looking at.

   These are real nights at Faith Labs. They are the proof the rest of the page
   is claiming, so they are never decoration behind text and never a washed-out
   background; they sit as objects, at full contrast, captioned.
   -------------------------------------------------------------------------- */

.photo {
  position: relative;
  margin: 0;
  background: var(--ink);
  border: var(--edge) solid var(--ink);
  border-radius: 3px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo--tall { aspect-ratio: 3 / 4; }
.photo--wide { aspect-ratio: 16 / 9; }

/* A tall photo would otherwise run most of a phone screen on its own. */
@media (max-width: 59.99rem) {
  .photo--tall { aspect-ratio: 4 / 3; }
}

.photo__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .2rem 1rem;
  padding: .55rem clamp(.75rem, 2vw, 1.15rem);
  background: var(--ink);
  color: var(--panel);
}
.photo__cap span:last-child:not(:only-child) { color: var(--on-ink-soft); }

/* A row of photos. One per row on a phone, otherwise as many as fit. The
   breakpoint is low on purpose: full-width photos stacked three deep is a lot
   of scrolling for what is a single glance's worth of information. */
.photos { display: grid; gap: 1.25rem; }
@media (min-width: 34rem) {
  .photos { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

/* --------------------------------------------------------------------------
   Sign button — chunky, coded, presses into its own shadow.
   -------------------------------------------------------------------------- */

.sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: .8rem 1.35rem;
  background: var(--panel);
  color: var(--ink);
  border: var(--edge) solid var(--ink);
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  font-stretch: 78%;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .9375rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 60ms linear, box-shadow 60ms linear;
}
.sign:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--ink); }
.sign:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }

.sign--go { background: var(--go); color: var(--panel); }
.sign--notice { background: var(--notice); color: var(--panel); }
.sign--warn { background: var(--warn); color: var(--ink); }
.sign--danger { background: var(--danger); color: var(--panel); }
.sign--caution { background: var(--caution); color: var(--ink); }
.sign--block { display: flex; width: 100%; }
.sign--sm { min-height: 44px; padding: .55rem 1rem; font-size: .8125rem; }

.sign[aria-disabled="true"],
.sign:disabled {
  background: var(--bone);
  color: var(--ink-soft);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.signs {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

/* --------------------------------------------------------------------------
   Hazard band — divider, and the frame for anything stopped.
   -------------------------------------------------------------------------- */

.hazard {
  height: 18px;
  background-image: repeating-linear-gradient(
    45deg, var(--ink) 0 14px, var(--caution) 14px 28px
  );
  background-size: 39.6px 39.6px;
  animation: march 3s linear infinite;
}
.hazard--danger {
  background-image: repeating-linear-gradient(
    45deg, var(--ink) 0 14px, var(--danger) 14px 28px
  );
}
.hazard--tall { height: 26px; }

@keyframes march { to { background-position: 39.6px 0; } }

/* --------------------------------------------------------------------------
   Station tag — a week number set as an equipment asset tag.
   -------------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  padding: .4rem .5rem .5rem;
  background: var(--ink);
  color: var(--panel);
  border-radius: 3px;
  line-height: 1;
}
.tag__n { font-weight: 900; font-stretch: 100%; font-size: 1.75rem; }
.tag__of { font-size: .625rem; letter-spacing: .14em; font-weight: 700; margin-top: .25rem; color: var(--on-ink-soft); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.head { position: relative; z-index: 5; }

.head__bar {
  background: var(--ink);
  color: var(--panel);
}
.head__bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
  padding-block: .6rem;
}

.head__logo {
  display: block;
  color: var(--panel);
  text-decoration: none;
  line-height: 0;
}
.head__logo svg { width: clamp(124px, 26vw, 168px); }

/* No hamburger. Four short labels fit on a phone, and a sign board does not
   hide its own directory behind a button. */
/* Bone rather than white, so the strip reads as its own band between the ink
   bar above it and whatever the page starts with below. */
.head__nav { background: var(--bone); border-bottom: var(--edge) solid var(--ink); }
.head__nav ul {
  display: flex;
  align-items: stretch;
}
.head__nav li { flex: 1 1 auto; display: flex; }
.head__nav li + li { border-left: 2px solid var(--ink); }
.head__nav a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .85rem .35rem;
  text-align: center;
  text-decoration: none;
  transition: background var(--snap), color var(--snap);
}
.head__nav a:hover { background: var(--panel); }

/* The current page is lit, not blacked out. An ink fill here sat directly under
   the ink bar above and the two merged into one black mass, which cost the
   strip its shape and stopped the active item reading as a button at all.
   Safety yellow separates from both neighbours, and the inset bar underneath is
   the "you are here" marker. */
.head__nav a[aria-current="page"] {
  background: var(--caution);
  color: var(--ink);
  font-weight: 800;
  box-shadow: inset 0 -5px 0 var(--ink);
}

/* Announcement strip. Only rendered when the lab is not running. */
.notice-strip {
  background: var(--danger);
  color: var(--panel);
  text-align: center;
  padding: .6rem var(--gut);
}

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

/* The top of every page is the lab itself, with the placard bolted over it.
   Safety yellow stays as the background colour underneath: it is what shows
   while the image loads, and what shows if it never does. */
.hero {
  background-color: var(--caution);
  /* One size for every screen. The source is only 1294px wide, so `cover` on a
     tall phone hero was upscaling a small file into a blur. At 51KB for the
     AVIF it costs nothing to always serve the large one and stay sharp. */
  background-image: url("assets/backdrop-1900.webp");
  background-image: image-set(
    url("assets/backdrop-1900.avif") type("image/avif"),
    url("assets/backdrop-1900.webp") type("image/webp")
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Deeper than a normal field on purpose: the placard has to sit ON the lab
     with the bench visible around it, not cover it like wallpaper. */
  padding-block: clamp(3rem, 9vw, 6rem);
}

.hero__plate { max-width: 58rem; }

.hero__grid {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.5rem);
}
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

/* The floor is set by what fits: above ~2.1rem the headline breaks to five
   ragged lines on a 375px screen and pushes the register button under the fold. */
.hero h1 {
  font-size: clamp(2.1rem, 6.5vw, 4rem);
  max-width: 15ch;
}

.hero__badge { width: clamp(88px, 12vw, 132px); color: var(--ink); }
@media (max-width: 59.99rem) { .hero__badge { display: none; } }

/* The photograph directly under the facts rail on the home page. Ink ground so
   the rail above it and the week below read as one dark block with a window cut
   into it. */
/* Sets its own light ink. This band held nothing but photographs at first, so
   it never needed a text colour; the moment a heading went in it inherited the
   body's near-black and vanished against the near-black ground. */
.proof {
  background: var(--ink);
  color: var(--panel);
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}


/* --------------------------------------------------------------------------
   Now running — the week itself, the site's one monumental moment.
   -------------------------------------------------------------------------- */

.now { background: var(--ink); color: var(--panel); }

.now__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.now__series { color: var(--caution); }

.now__word {
  display: block;
  font-weight: 900;
  font-stretch: 70%;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .84;
  font-size: clamp(3.5rem, 15vw, 7.5rem);
  color: var(--caution);
  margin-top: .35rem;
}
.now__is {
  display: block;
  color: var(--panel);
  font-weight: 900;
  font-stretch: 84%;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(1rem, 3vw, 1.5rem);
  line-height: 1;
}

.now__title {
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--panel);
  margin-top: .9rem;
}
.now__meta { color: var(--on-ink-soft); margin-top: .4rem; }
.now__idea { color: var(--panel); max-width: 52ch; margin-top: 1.25rem; }

.now__tag { background: var(--caution); color: var(--ink); }
.now__tag .tag__of { color: var(--on-caution-soft); }

/* --------------------------------------------------------------------------
   Handout list — the paper, treated as the product it is.
   -------------------------------------------------------------------------- */

.paper { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .paper { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }

.paper__item { display: flex; flex-direction: column; }
.paper__item .plate__body { display: flex; flex-direction: column; flex: 1; gap: .75rem; }
.paper__note { color: var(--ink-soft); font-size: .9375rem; flex: 1; }
.paper__kind { display: flex; align-items: center; gap: .55rem; }

/* --------------------------------------------------------------------------
   Song player — a transport bar, drawn like the rest of the panel hardware.
   The native <audio> is what ships; player.js swaps in this UI.
   -------------------------------------------------------------------------- */

.player audio { width: 100%; }

.player__ui {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1rem;
  background: var(--bone);
  border: 2px solid var(--ink);
  border-radius: 3px;
}

.player__play { flex: none; min-height: 46px; padding: .5rem .95rem; }
.player__time { flex: none; font-size: .875rem; font-variant-numeric: tabular-nums; }

/* A milled track with a square slug riding in it. */
/* 26px tall so the draggable area clears the 24px target minimum, even though
   the track it draws is only 8px. */
.player__scrub {
  flex: 1;
  min-width: 0;
  height: 26px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.player__scrub::-webkit-slider-runnable-track {
  height: 8px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 2px;
}
.player__scrub::-moz-range-track {
  height: 8px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 2px;
}
.player__scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 22px;
  margin-top: -5px;
  background: var(--warn);
  border: 2px solid var(--ink);
  border-radius: 2px;
}
.player__scrub::-moz-range-thumb {
  width: 14px;
  height: 22px;
  background: var(--warn);
  border: 2px solid var(--ink);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Embed — a third-party player mounted in a plate. Same rules as .wordvideo:
   the rail carries the label above it, never a caption below, because the
   player puts its own controls along the bottom edge.
   -------------------------------------------------------------------------- */

.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   Word of the week — the video reveal beside the word itself.
   -------------------------------------------------------------------------- */

.wordgrid { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 52rem) {
  .wordgrid { grid-template-columns: 1.35fr 1fr; }
}
.wordvideo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

/* --------------------------------------------------------------------------
   Kids' zone — orange, and the only place on the site that shouts.
   -------------------------------------------------------------------------- */

.kids { background: var(--warn); color: var(--ink); }
.kids__grid {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2rem);
  align-items: center;
}
@media (min-width: 52rem) { .kids__grid { grid-template-columns: 1fr auto; } }

.kids h2 { font-size: clamp(1.85rem, 5vw, 3rem); }

/* --------------------------------------------------------------------------
   Run of night — a timetable, set as one.
   -------------------------------------------------------------------------- */

.runsheet { border-top: var(--edge) solid var(--ink); }
.runsheet li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: .35rem 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 2px solid var(--ink);
}
@media (min-width: 40rem) {
  .runsheet li { grid-template-columns: 7rem minmax(0, 14rem) 1fr; align-items: baseline; }
}
.runsheet__at { font-weight: 900; font-stretch: 100%; font-size: 1.25rem; }
.runsheet__what { font-weight: 700; text-transform: uppercase; font-stretch: 82%; letter-spacing: .05em; }
.runsheet__detail { color: var(--ink-soft); grid-column: 2 / -1; }
@media (min-width: 40rem) { .runsheet__detail { grid-column: auto; } }

/* --------------------------------------------------------------------------
   Pillars — three, so they get the plate treatment, not a card grid.
   -------------------------------------------------------------------------- */

.pillars { display: grid; gap: 1.5rem; }
@media (min-width: 50rem) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillars h3 { font-size: 1.35rem; margin-top: .75rem; }
.pillars p { margin-top: .5rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: var(--edge) solid var(--ink); }
.faq details { border-bottom: 2px solid var(--ink); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  cursor: pointer;
  font-weight: 700;
  font-stretch: 88%;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform var(--snap); }
.faq details[open] summary .ic { transform: rotate(90deg); }
.faq__a { padding-bottom: 1.15rem; color: var(--ink-soft); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Quiz
   -------------------------------------------------------------------------- */

.quiz__progress {
  display: flex;
  gap: 6px;
  margin-bottom: 1.25rem;
}
.quiz__pip {
  flex: 1;
  height: 12px;
  border: 2px solid var(--ink);
  background: var(--panel);
  border-radius: 2px;
}
.quiz__pip[data-state="right"] { background: var(--go); }
.quiz__pip[data-state="wrong"] { background: var(--danger); }
.quiz__pip[data-state="now"] { background: var(--caution); }

.quiz__q { font-size: clamp(1.3rem, 3.2vw, 1.75rem); font-weight: 700; font-stretch: 92%; max-width: 30ch; }

.quiz__options { display: grid; gap: .75rem; margin-top: 1.5rem; }

.opt {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  padding: .95rem 1.1rem;
  text-align: left;
  background: var(--panel);
  border: var(--edge) solid var(--ink);
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 60ms linear, box-shadow 60ms linear, background var(--snap);
}
.opt:hover:not([disabled]) { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--ink); background: var(--bone); }
.opt__key {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: var(--ink); color: var(--panel);
  border-radius: 2px;
  font-weight: 900;
  font-size: .9375rem;
}
.opt[data-state="right"] { background: var(--go); color: var(--panel); }
.opt[data-state="right"] .opt__key { background: var(--panel); color: var(--go); }
.opt[data-state="wrong"] { background: var(--danger); color: var(--panel); }
.opt[data-state="wrong"] .opt__key { background: var(--panel); color: var(--danger); }
.opt[disabled] { cursor: default; box-shadow: var(--shadow-sm); transform: none; }
.opt[disabled]:not([data-state]) { opacity: .5; }

.quiz__why {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  background: var(--bone);
  border: 2px solid var(--ink);
  border-radius: 3px;
}

.reveal__word {
  font-weight: 900;
  font-stretch: 70%;
  text-transform: uppercase;
  font-size: clamp(3.25rem, 14vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.01em;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: .4rem; }
@media (min-width: 40rem) { .form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }

.form label { font-weight: 700; font-stretch: 78%; text-transform: uppercase; letter-spacing: .1em; font-size: .8125rem; }

.form input, .form textarea {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: var(--edge) solid var(--ink);
  border-radius: 3px;
  padding: .75rem .9rem;
  width: 100%;
}
.form input::placeholder, .form textarea::placeholder { color: var(--ink-soft); }
.form textarea { min-height: 8rem; resize: vertical; }

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

.foot { background: var(--ink); color: var(--panel); padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.foot__grid { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .foot__grid { grid-template-columns: 1fr auto; align-items: start; } }
.foot__logo { width: 190px; color: var(--panel); }
/* Plain footer links go white on the ink ground. A sign button must be excluded
   or this rule beats .sign's own colour and paints white text on a white
   button, which is exactly what it did. */
.foot a:not(.sign) { color: var(--panel); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.foot__meta { color: var(--on-ink-soft); font-size: .9375rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }

/* Stencil labels are 12px tall, which is not a tap target. Give the footer
   links real height without changing how they read. */
.foot__links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.foot address a { display: inline-block; padding-block: .5rem; }

/* --------------------------------------------------------------------------
   Motion — one authored moment. Plates snap into place on arrival, and they
   are fully visible before the script ever runs.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js .snap-in {
    opacity: 0;
    transform: translateY(10px) scale(.985);
  }
  .js .snap-in.is-set {
    opacity: 1;
    transform: none;
    transition: opacity 180ms linear, transform var(--snap);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hazard { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .head__nav, .hazard, .sign, .foot { display: none; }
  body { background: #fff; }
  .plate { box-shadow: none; }
}