/* Reserved, direction A: Aperture.
   The evening is glimpsed, not shown whole. Warm near-black ground, one amber,
   a light display serif for statements, a plain sans for reading.
   Governing device: the reservation. The page is one held reservation filling
   in as it scrolls — two availabilities overlap, one request is held, the
   plan is set, the day runs morning to checked-in — and the waitlist is the
   reservation card itself, the one lit surface on the dark table.
   Every section shares one frame and one axis: a text column, then a fixed
   gutter, then the slit-width column on the right. */

@font-face { font-family: "Reserved Display"; src: url("fonts/NotoSerifDisplay-Light.woff2") format("woff2"), url("fonts/NotoSerifDisplay-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Reserved Display"; src: url("fonts/NotoSerifDisplay-Regular.woff2") format("woff2"), url("fonts/NotoSerifDisplay-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Reserved Sans"; src: url("fonts/NotoSans-Regular.woff2") format("woff2"), url("fonts/NotoSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Reserved Sans"; src: url("fonts/NotoSans-SemiBold.woff2") format("woff2"), url("fonts/NotoSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --night: #080706;
  --night-lift: #0f0d0b;
  --ink: #f3efe8;          /* 17.6:1 on night */
  --ink-soft: #cfc7bc;     /* 12:1 on night */
  --ink-quiet: #a39a8e;    /* 7.2:1 on night */
  --line: #2b2620;         /* hairlines, decorative */
  --control: #7a7167;      /* field borders, 4.2:1 on night */
  --amber: #e9a85b;        /* 9.9:1 on night */
  --amber-hi: #f3bf7e;
  --amber-lo: #d39345;

  /* The reservation card: the lit register, reached only at the act of
     joining. Derived from the same warm family, read in daylight. */
  --paper: #efe7d8;
  --paper-lift: #f7f2e7;
  --paper-ink: #171310;        /* 15.0:1 on paper */
  --paper-soft: #4d463c;       /* 7.6:1 on paper */
  --paper-line: #d8cdb8;       /* hairlines on paper, decorative */
  --paper-control: #877c6e;    /* field boundaries on paper, 3.3:1 */
  --amber-deep: #96600f;       /* marks on paper, 4.3:1 */
  --band-lift: #15120f;         /* How it works: a lifted band */
  --band-deep: #030202;         /* Safety: the deepest black */
  --track: #6b6353;            /* availability spans in the overlap drawing */

  --serif: "Reserved Display", Georgia, serif;
  --sans: "Reserved Sans", system-ui, sans-serif;

  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --text-col: 40rem;
  --slit-col: clamp(12rem, 20vw, 18.5rem);
  --gap: clamp(1.75rem, 4vw, 4rem);
  --section: clamp(4rem, 10vw, 8rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Same noise at a fixed low alpha, tiled as the page ground (no fixed overlay). */
  --grain-ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--grain-ground) var(--night);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  caret-color: var(--amber);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--amber); color: var(--night); }

html { scrollbar-color: #38302a var(--night); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--night); }
::-webkit-scrollbar-thumb { background: #38302a; border: 2px solid var(--night); border-radius: 5px; }

p, h1, h2, ol, figure { margin: 0; }
p, li, summary { text-wrap: pretty; }

a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }

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

[hidden] { display: none !important; }

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

/* The frame: one centred measure for every band of the page. */
.frame {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- Bar ---------- */

.bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1rem;
}

.wordmark {
  display: inline-block;
  /* A taller tap target than the 25px text box, without moving the bar:
     the padding is cancelled by the matching negative margin. */
  padding-block: .6rem;
  margin-block: -.6rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: .16em;
  color: var(--ink);
  text-decoration: none;
}

.eyebrow {
  font-size: .875rem;
  color: var(--ink-soft);
  letter-spacing: .02em;
}

/* ---------- Aperture ---------- */

.aperture {
  position: relative;
  overflow: hidden;
  background: var(--night-lift);
}

.aperture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aperture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--grain);
  opacity: .2;
  mix-blend-mode: overlay;
}

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

.hero {
  display: grid;
  padding-block: .25rem var(--section);
}

/* Mobile: the text comes first, the photograph below it, in a 4:3 frame
   that keeps the whole held table (glasses to chairs). */
.aperture--hero {
  order: 2;
  aspect-ratio: 4 / 3;
  margin-top: 2rem;
  box-shadow: 0 1.25rem 2.5rem -1.75rem rgba(233, 168, 91, .45);
}

.aperture--hero img { object-position: 50% 85%; }


.hero__copy {
  display: grid;
  gap: 1rem;
  align-content: start;
}

h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 10.5vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.02em;
  max-width: 11ch;
  text-wrap: balance;
  margin-bottom: .75rem;
}

.lede {
  max-width: 31rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.hero__action {
  display: grid;
  justify-items: start;
  gap: .6rem;
  margin-top: .25rem;
}

.hero__free {
  margin-top: .6rem;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--ink-soft);
}


/* ---------- Action ---------- */

.action {
  display: inline-block;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 2px;
  background: var(--amber);
  color: var(--night);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease-out, transform .1s ease-out;
}

.action:hover { background: var(--amber-hi); }
.action:active { background: var(--amber-lo); transform: translateY(1px); }

/* ---------- Title cards: the sections below the hero ---------- */

.card {
  display: grid;
  gap: 1.75rem;
  padding-block: var(--section);
  border-top: 1px solid var(--line);
}

.card__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 4vw + 1rem, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}

.card__statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.6vw + 1.1rem, 2.125rem);
  line-height: 1.22;
  color: var(--ink);
  padding-top: 1.25rem;
  border-top: 1px solid var(--amber);
  max-width: 24rem;
}

/* How it works: the mechanism drawn before it is read.
   Two availability tracks run the measure; where the spans share time,
   the held segment is amber. Decorative — the steps say it in words. */

.overlap {
  display: grid;
  gap: .65rem;
  padding-block: .25rem .5rem;
}

.overlap__row {
  display: grid;
  gap: .25rem;
}

.overlap__label {
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.overlap__track {
  position: relative;
  height: .4rem;
  border-bottom: 1px solid var(--line);
}

.overlap__span {
  position: absolute;
  bottom: 0;
  height: .4rem;
  background: var(--track);
}

.overlap__span--a { left: 6%; width: 52%; }
.overlap__span--b { left: 42%; width: 48%; }

.overlap__meet {
  position: relative;
  height: .4rem;
}

.overlap__held {
  position: absolute;
  left: 42%;
  width: 16%;
  height: .4rem;
  background: var(--amber);
}

/* Register changes down the scroll: How it works sits on a lifted band,
   Price on the page ground, Safety on the deepest black, the card on paper.
   The band paints edge to edge; the content stays on the shared frame. */
.card--how,
.card--safety {
  border-top: 0;
  clip-path: inset(0 -100vmax);
}

.card--how { background: var(--band-lift); box-shadow: 0 0 0 100vmax var(--band-lift); }
.card--safety { background: var(--band-deep); box-shadow: 0 0 0 100vmax var(--band-deep); }

/* The three steps as ledger entries: numeral at data scale, then the entry. */

.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 2rem;
  counter-reset: step;
}

.step {
  counter-increment: step;
  display: grid;
  gap: .75rem;
  align-content: start;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.step::before {
  content: counter(step);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--amber);
}

.step__text { color: var(--ink); }

.step__benefit {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3125rem;
  line-height: 1.35;
  color: var(--ink);
}

/* The day of the date: the approved sentences paced as a sequence on a rail.
   The rail runs dot to dot and ends at the last dot; the light warms beat to
   beat and the cancelled branch stays unlit. Three frames stand beside the
   list at equal height and gap (mobile: a row of three below it). */

.dayof {
  display: grid;
  gap: 1.5rem;
}

.dayof__beats {
  --beat-gap: 1.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--beat-gap);
  align-content: space-between;
}

.dayof__beat {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-soft);
}

.dayof__beat::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  border: 1px solid var(--amber);
  background: var(--band-lift);
}

/* The rail: from each dot to the next; none after the last. */
.dayof__beat:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .21rem;
  top: calc(.5em + .45rem);
  height: calc(100% + var(--beat-gap) - .45rem);
  width: 1px;
  background: var(--line);
}

.dayof__beat:nth-child(2)::before { background: rgba(233, 168, 91, .45); }

.dayof__beat:nth-child(3)::before {
  border-color: var(--ink-quiet);
  background: var(--band-lift);
}

.dayof__beat:nth-child(4)::before { background: var(--amber); }

.dayof__frames {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.aperture--dayof { height: 7rem; }

.aperture--morning img { object-position: 58% 50%; }
.aperture--way img { object-position: 50% 42%; }
.aperture--arrived img { object-position: 50% 52%; }

.how__action,
.safety__action { justify-self: start; }

/* Price: a ledger. Each sentence an entry; the price at data scale. */

.ledger {
  display: grid;
}

.ledger__row {
  padding-block: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  max-width: 38rem;
}

.ledger__row:first-child { border-top: 0; padding-top: 0; }

.ledger__row--anchor { color: var(--ink-quiet); }

.ledger__row--figure {
  padding-block: 1.4rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2vw + 1.15rem, 2rem);
  line-height: 1.15;
  color: var(--ink);
}

.figure {
  font-size: clamp(3.75rem, 9vw, 6rem);
  line-height: .95;
  letter-spacing: -.015em;
  font-feature-settings: "lnum" 1, "tnum" 1;
  white-space: nowrap;
}

/* Safety: the measures as ledger rows, the limit stated under them. */

.measures {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  max-width: 38rem;
}

.measures__row {
  position: relative;
  padding: .95rem 0 .95rem 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.measures__row:first-child { border-top: 0; padding-top: 0; }

.measures__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55em;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--amber);
}

.measures__row:first-child::before { top: .62em; }

.card--safety .card__statement {
  font-size: clamp(1.35rem, 1vw + 1.05rem, 1.75rem);
  max-width: 38rem;
}

/* The limit carries the same size and colour as the sentence before it. */
.card__statement-limit { color: inherit; }

/* ---------- Waitlist: the reservation card ----------
   The one lit surface on the page. Joining is the act the whole dark
   page has been setting out; it happens on paper, in daylight. */

.card--waitlist:focus { outline: none; }

.reservation {
  --card-pad: clamp(1.25rem, 4vw, 2.75rem);
  color-scheme: light;
  background: var(--paper);
  color: var(--paper-ink);
  padding: var(--card-pad);
  display: grid;
  gap: 1.75rem;
}

.reservation :focus-visible { outline-color: var(--paper-ink); }

.reservation__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--paper-ink);
}

.waitlist__main { display: grid; }

/* Frames fitted to the portrait sources (the sources are 1:2; the
   subjects need 50-67% of their height, so the shared crop is square).
   Price and Safety: the square crop and its object-positions are set
   here once. Below 48rem fix pass 4 makes each a band bled to the
   screen's edges under its title (see the max-width block below);
   from 48rem each stands as a slit in the axis column. The card's own
   aperture is the exception since fix pass 2: a band bled to the
   card's edges (below). */
.aperture--price,
.aperture--safety {
  width: min(100%, 18rem);
}

.aperture--price,
.aperture--safety {
  aspect-ratio: 1 / 1;
  box-shadow: 0 1.25rem 2.5rem -1.75rem rgba(233, 168, 91, .4);
}

.aperture--price img { object-position: 50% 57%; }
.aperture--safety img { object-position: 50% 54%; }

/* Fix pass 2 (owner finding, 2026-11-06): the card's lantern is part of
   the card's architecture, not a rectangle placed on its paper mat.
   On a phone it closes the card as a band bled to the card's left,
   right and bottom edges — the paper ends, the photograph ends the
   card. The grid gap above it stays as the one paper interval between
   the terms line and the photograph's hard top edge. The crop keeps
   the lantern whole (it stands at 39–72% of the source's height). */
.aperture--close {
  aspect-ratio: 5 / 4;
  margin-inline: calc(-1 * var(--card-pad));
  margin-bottom: calc(-1 * var(--card-pad));
}

.aperture--close img { object-position: 50% 58%; }

.form {
  display: grid;
  gap: 2.25rem;
}

.form__fields {
  display: grid;
  gap: 1.5rem;
}

.field {
  display: grid;
  gap: .5rem;
  align-content: start;
}

.field label {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.field__optional {
  font-weight: 400;
  color: var(--ink-quiet);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  margin: 0;
  padding: .85rem .9rem;
  border: 1px solid var(--control);
  border-radius: 2px;
  background: var(--night-lift);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: border-color .16s ease-out;
}

.field textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23e9a85b' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 9px;
  cursor: pointer;
}

.field select:invalid { color: var(--ink-quiet); }

.field option {
  background: var(--night-lift);
  color: var(--ink);
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-soft); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--amber);
  outline-offset: 2px;
}

.field [aria-invalid="true"] {
  border-color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--amber);
}

.field__error {
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--ink);
  padding-left: .75rem;
  border-left: 1px solid var(--amber);
}

.form__submit {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.action--submit { width: 100%; padding-block: 1.05rem; position: relative; overflow: hidden; }
.action--submit[disabled] { opacity: .75; cursor: wait; }

/* Score-fix (polish/harden): the in-flight state, visible without
   words. While the store is in flight the button is disabled and
   drawn light pulses on it — a state signal for an indeterminate
   wait. script.js also sets aria-busy for assistive technology.
   Fix pass 2 (polish): the light no longer crosses the label (a pale
   segment at the button's centre washed over its own text and broke
   its contrast mid-pulse). It now runs along the button's bottom
   edge only — the same lit foot rule the reservation card itself
   carries — so the label keeps its full contrast throughout the
   pulse. Under reduced motion the rule stands still: the state
   still reads, nothing moves. */
.action--submit[disabled]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(247, 242, 231, .65);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .action--submit[disabled]::after {
    animation: submit-pulse .8s ease-in-out infinite alternate;
  }
}

@keyframes submit-pulse {
  from { opacity: .25; }
  to { opacity: .9; }
}

.form__terms {
  max-width: 34rem;
  font-size: .9375rem;
  color: var(--ink-soft);
}

.confirmation {
  padding: 2rem 0 0;
  border-top: 1px solid var(--amber);
  animation: arrive .7s var(--ease-out) both;
}

.confirmation:focus { outline: none; }
.confirmation:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }

.confirmation__message {
  max-width: 22ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3vw + 1rem, 3rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(.75rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .confirmation { animation: none; }
}

/* The card's fields are ledger lines, written on paper. */

.reservation .field label { color: var(--paper-ink); }

.reservation .field__optional { color: var(--paper-soft); }

.reservation .field input,
.reservation .field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--paper-control);
  border-radius: 0;
  color: var(--paper-ink);
  caret-color: var(--amber-deep);
  padding: .7rem .1rem;
}

.reservation .field textarea {
  background: var(--paper-lift);
  border: 1px solid var(--paper-control);
  border-radius: 0;
  color: var(--paper-ink);
  caret-color: var(--amber-deep);
  /* Score-fix (polish): an explicit 4.5rem box (~2 lines; the rows=3
     default measured 101px and the old min-height was 5.5rem), still
     vertically resizable. See the field--wide note below. */
  height: 4.5rem;
  min-height: 3.75rem;
}

/* Score-fix (polish): form weight. The one optional field carried the
   same weight as the four required ones and its box was the largest
   demand before the submit. It now stands apart as the secondary
   entry: a hairline and interval above it, its label in regular
   Paper Soft (7.6:1) instead of SemiBold Paper Ink, and a shallower
   box (above). Every word, field and behaviour is unchanged; the
   required path reads first. */
.reservation .field--wide {
  margin-top: .25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--paper-line);
}

.reservation .field--wide label {
  font-weight: 400;
  color: var(--paper-soft);
}

.reservation .field select {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2396600f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .15rem center;
  background-size: 14px 9px;
}

.reservation .field select:invalid { color: var(--paper-soft); }

.reservation .field option {
  background: var(--paper-lift);
  color: var(--paper-ink);
}

.reservation .field input:hover,
.reservation .field select:hover { border-bottom-color: var(--paper-ink); }

.reservation .field textarea:hover { border-color: var(--paper-ink); }

.reservation .field input:focus-visible,
.reservation .field select:focus-visible,
.reservation .field textarea:focus-visible { border-color: var(--amber-deep); }

.reservation .field [aria-invalid="true"] {
  border-color: var(--amber-deep);
  box-shadow: inset 0 -2px 0 var(--amber-deep);
}

.reservation .field textarea[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--amber-deep);
}

.reservation .field__error {
  color: var(--paper-ink);
  font-weight: 600;
  border-left-color: var(--amber-deep);
}

.reservation .form__terms { color: var(--paper-soft); }

.reservation .confirmation { border-top-color: var(--amber-deep); }

.reservation .confirmation__message { color: var(--paper-ink); }

.reservation .confirmation:focus-visible { outline-color: var(--paper-ink); }

.reservation ::selection { background: var(--amber-deep); color: var(--paper-lift); }

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

.faq {
  max-width: 44rem;
  border-bottom: 1px solid var(--line);
}

.faq details { border-top: 1px solid var(--line); }

.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.0625rem, .4vw + 1rem, 1.1875rem);
  line-height: 1.4;
  color: var(--ink);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: .25rem;
  top: 50%;
  width: .875rem;
  height: 1px;
  background: var(--amber);
  transition: transform .22s var(--ease-out);
}

.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }

.faq summary:hover { color: var(--amber-hi); }

.faq details > p {
  max-width: 38rem;
  padding: 0 2.5rem 1.5rem 0;
  color: var(--ink-soft);
}

/* ---------- Colophon ---------- */

.colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  /* Reconcile (Mode 3 end card): the closing wordmark gets its own
     black beat — a full title-card interval above it, not a footer strip. */
  padding-block: clamp(5rem, 12vw, 9rem) clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--line);
}

/* Reconcile (Mode 3): the footer wordmark at end-card scale, carrying
   the same amber slit as the header wordmark (experience.css, addendum B).
   Typesetting only — the word itself is unchanged. */
.wordmark--end {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  letter-spacing: .08em;
  line-height: 1.05;
}

.wordmark--end::after {
  content: "";
  display: inline-block;
  width: .07em;
  height: .72em;
  margin-left: .24em;
  background: var(--amber);
  vertical-align: baseline;
}

.colophon__note {
  font-size: .9375rem;
  color: var(--ink-soft);
}

.colophon__age {
  font-family: var(--serif);
  font-size: 1.4em;
  line-height: 1;
  color: var(--ink);
}

/* Score-fix (adapt, 2026-11-06 critique P1): mobile length. Feed
   traffic gets the same page with its dead intervals tightened below
   48rem only — section padding 4rem -> 2.75rem, the card/steps/day-of
   gaps a step tighter, the Price and Safety square slits 18rem ->
   15rem (same 1:1 crop, smaller on the page), the card's closing
   slit 15rem -> 12rem wide, and the end card's interval shortened.
   Desktop rhythm (incl. the 1.3x title-card beat) is untouched.
   Measured before at 390x844: 7,064px document height. */
@media (max-width: 47.999rem) {
  .card {
    padding-block: 2.75rem;
    gap: 1.5rem;
  }

  .steps { gap: 1.5rem; }

  .dayof { gap: 1.25rem; }
  .dayof__beats { --beat-gap: 1.15rem; }

  /* Fix pass 4 (owner finding, 2026-11-06): the Price and Safety
     photographs no longer stand as 15rem square slits inside the
     frame, floating in black beside dead space. Below 48rem each
     is the section's opening figure: a band bled to the screen's
     left and right edges (the frame's own --pad taken back on both
     sides), directly under its title at the card's held 1.5rem gap,
     the section's text following under it at the same gap. The
     frame keeps the established 1:1 crop and object-positions
     (Price 50% 57%, Safety 50% 54%): one shared square frame, set
     by the taller subject — Safety's doorway unit (transom to door
     foot, lamps either side) spans ~50% of its portrait source, so
     any wider (more landscape) band crops the transom or the door
     foot; Price's flame-to-card-foot (~38%) sits whole inside the
     same square with its dark room around it. The desktop slits in the axis column
     (min-width: 48rem below) are untouched. The thread rail and
     its station label pass over the band's left edge in the frame
     gutter, on the label's night backing strip, as they do over
     every other full-width element on the page. The slit's amber
     drop shadow goes with the slit: a surface bled to the screen's
     edges is attached to the architecture and casts nothing (the
     hero aperture's mobile precedent). Closing-critique P3 of this
     pass, fixed in-pass. */
  .aperture--price,
  .aperture--safety {
    width: auto;
    margin-inline: calc(-1 * var(--pad));
    box-shadow: none;
  }

  /* Fix pass 2: the card's closing slit is no longer a 12rem rectangle;
     it bleeds to the card's edges as the foot band above. */

  .colophon { padding-block: 3.5rem 2.5rem; }
}

/* ---------- Two fields per row from small tablets ---------- */

@media (min-width: 40rem) {
  .form__fields {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 1.75rem;
  }

  .field--wide { grid-column: 1 / -1; }

  .action--submit { width: auto; padding-inline: 1.75rem; }
}

/* ---------- Tablet and up: the axis ----------
   Column one is the text column; column two is the slit's width.
   The slit's left edge is the axis that every section shares. */

@media (min-width: 48rem) {
  /* Reconcile (Mode 2 title cards): on desktop each section title gets
     a longer held breath above it than below, so the title lands as a
     card, not mid-flow. Mobile keeps the single interval — feed
     traffic does not get a longer page. The Price slit's bleed margin
     below tracks the same 1.3 factor. */
  .card { padding-block: calc(var(--section) * 1.3) var(--section); }

  .bar { padding-block: 1.4rem; }

  .hero,
  .card {
    grid-template-columns: minmax(0, var(--text-col)) var(--slit-col);
    column-gap: var(--gap);
    justify-content: center;
  }

  .bar,
  .colophon {
    max-width: calc(var(--text-col) + var(--gap) + var(--slit-col) + 2 * var(--pad));
  }

  .hero {
    align-content: start;
    padding-block: clamp(2rem, 7vh, 4.5rem) var(--section);
  }

  .hero__copy {
    grid-column: 1;
    grid-row: 1;
    gap: 1.25rem;
  }

  .aperture--hero {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    aspect-ratio: auto;
    height: auto;
    margin: 0;
    align-self: stretch;
    box-shadow: 1rem 0 2rem -1rem rgba(233, 168, 91, .35);
  }

  .aperture--hero img { object-position: 50% 70%; }

  h1 {
    font-size: clamp(3.4rem, 7.4vw, 6rem);
    line-height: .98;
  }

  .lede {
    margin-top: .35rem;
    max-width: 30rem;
    font-size: clamp(1rem, .3vw + .9rem, 1.125rem);
    line-height: 1.6;
  }

  /* M1 sits outside the span-defining row, so the slit ends exactly
     at the button's bottom (finish-review finding, BUILD-NOTE-2.md). */
  .hero__free {
    grid-column: 1;
    grid-row: 2;
    margin-top: .75rem;
  }


  /* Sections: heading spans the measure; each section's own device
     takes the columns it needs below it. */
  .card { row-gap: 2.5rem; }
  .card__title { grid-column: 1 / -1; }
  .card__statement { grid-column: 2; align-self: start; }

  .overlap { grid-column: 1 / -1; }

  /* Score-fix (layout): label column 11rem -> 9rem and the column gap
     var(--gap) -> 1.5rem, so each label's text stands ~58px from its
     track at 1440, not ~124px. The axis margin in experience.css
     tracks the same sum. */
  .overlap__row {
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: center;
    column-gap: 1.5rem;
  }

  .steps {
    grid-column: 1 / -1;
    gap: 0;
  }

  .step {
    grid-template-columns: 6rem minmax(0, 1fr) minmax(0, var(--slit-col));
    column-gap: var(--gap);
    padding-block: 1.5rem;
  }

  .step::before {
    grid-column: 1;
    font-size: 4.5rem;
  }

  .step__text { grid-column: 2; }

  /* The benefit stands in the axis column, where the slit would be. */
  .step__benefit {
    grid-column: 3;
    padding-top: .35rem;
  }

  /* Day-of shares the steps' column system: the list starts in the step-text
     column, the frames stand in the axis column. */
  .dayof {
    grid-column: 1 / -1;
    grid-template-columns: 6rem minmax(0, 1fr) minmax(0, var(--slit-col));
    column-gap: var(--gap);
    align-items: stretch;
  }

  .dayof__beats { grid-column: 2; max-width: 34rem; }

  .dayof__frames {
    grid-column: 3;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: .75rem;
  }

  .aperture--dayof { height: auto; min-height: 5.5rem; }

  .how__action { grid-column: 1; }

  .ledger { grid-column: 1; grid-row: 2; }

  .measures { grid-column: 1; grid-row: 2; }

  .card--safety .card__statement { grid-column: 1; grid-row: 3; }

  .safety__action { grid-column: 1; grid-row: 4; }

  /* Safety: a contained tall slit beside the measures, the statement and the
     action. Price: its own layout — the slit bleeds off the right edge and
     runs the section's full height. */
  .aperture--safety {
    grid-column: 2;
    grid-row: 2 / span 3;
    width: auto;
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
    box-shadow: 1rem 0 2rem -1rem rgba(233, 168, 91, .35);
  }

  .aperture--safety img { object-position: 50% 50%; }

  .card--price { position: relative; }
  .card--price .card__title { grid-column: 1; }

  .aperture--price {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: auto;
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
    margin-block: calc(-1.3 * var(--section)) calc(-1 * var(--section));
    margin-inline: 0 calc(-1 * ((100vw - min(100vw, 72rem)) / 2 + var(--pad)));
    box-shadow: 1rem 0 2rem -1rem rgba(233, 168, 91, .35);
  }

  .aperture--price img { object-position: 50% 57%; }

  /* The card spans the measure; inside it, the form takes the writing
     column and the slit stands in the card on its paper mat. */
  .reservation {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) var(--slit-col);
    grid-template-rows: auto 1fr;
    column-gap: var(--gap);
    align-items: start;
  }

  .reservation__title { grid-column: 1; }

  .waitlist__main { grid-column: 1; }

  /* Fix pass 2: the photograph is the card's right panel, bled to its
     top, right and bottom edges. Its hard left edge stands on the slit
     axis (the card's own gutter), so the card is two materials side by
     side — paper to write on, the night photograph beside it — with no
     paper mat framing the image. The panel's ratio lands near the
     source's own 1:2, so the lantern stands nearly whole. */
  .aperture--close {
    order: 0;
    grid-column: 2;
    grid-row: 1 / -1;
    width: auto;
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
    min-height: 0;
    margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0;
  }

  .aperture--close img { object-position: 50% 56%; }

  .faq { grid-column: 1 / -1; }
}