/* Stonecrop FarmPosition 7 of 10, romantic cinematic.
   Visual thesis: warm lime wash, late light, one continuous place held under grain. */

/* ---------- tokens ---------- */
:root {
  --ink: #17120E;
  --dusk: #211A15;
  --bark: #2A2219;
  --paper: #F6F1E8;
  --linen: #EDE5D7;
  --cream: #F4ECDE;
  --muted-d: #C8BAA9;
  --muted-l: #645A51;
  --amber: #9E4F1C;
  --amber-lt: #E8A34F;
  --moss: #34412D;
  --rule: #DCD2C1;
  --rule-d: #3B3129;

  /* the chapter's own light. site.js interpolates these across the four
     chapters so the overlay sits IN the frame's colour instead of on top of
     it. Defaults are chapter 00, so the page is correct before JS speaks. */
  --ch-veil: 29 18 8;          /* the veil and scrim base, as an rgb triplet */
  --ch-accent: 240 196 138;    /* eyebrow, rule, the fact numerals           */
  --panel-soft: #D8CCBC;       /* secondary copy, bright enough for AA on a
                                  translucent scrim over a bright chapter    */

  --bar: 56px;
  --gutter: 20px;
  --maxw: 1180px;
  --r: 2px;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: 0.8125rem;
  --step-0: clamp(1rem, 0.965rem + 0.18vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.06rem + 0.44vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
  --step-3: clamp(1.95rem, 1.5rem + 2.2vw, 3.25rem);
  --step-4: clamp(2.5rem, 1.6rem + 4.4vw, 5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
}

@media (min-width: 900px) {
  :root { --bar: 66px; --gutter: 32px; }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--bark);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.62;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 1px;
}

.on-dark :focus-visible,
.bar :focus-visible,
.panel :focus-visible { outline-color: var(--amber-lt); }

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

.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted-l);
  margin: 0 0 0.9em;
}

.on-dark .eyebrow, .panel .eyebrow { color: var(--amber-lt); }

.lede { font-size: var(--step-1); line-height: 1.45; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 18px;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 0.95em 1.35em;
  border: 1px solid transparent;
  border-radius: var(--r);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.btn--primary { background: var(--ink); color: var(--cream); }
.btn--primary:hover { background: var(--amber); }

.btn--amber { background: var(--amber-lt); color: var(--ink); }
.btn--amber:hover { background: var(--cream); }

.btn--ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
  opacity: 0.85;
}
.btn--ghost:hover { opacity: 1; background: rgba(244, 236, 222, 0.1); }

.btn--sm { padding: 0.72em 1.05em; font-size: 0.8125rem; }

.btn .arw { transition: transform 0.35s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* ---------- header bar ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--bar);
  background: var(--ink);
  color: var(--cream);
  border-bottom: 1px solid var(--rule-d);
}

.bar__in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mark {
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
}
.mark b { font-weight: 400; }
.mark i { font-style: italic; color: var(--amber-lt); }

.bar nav { display: none; }

@media (min-width: 900px) {
  .bar nav { display: flex; gap: 28px; margin-left: auto; margin-right: 26px; }
  .bar nav a {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--muted-d);
    padding: 7px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
  }
  .bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--cream); border-color: var(--amber-lt); }
  .mark { font-size: 1.32rem; }
}

/* ---------- the stage ---------- */
.spine { position: relative; }

.stage {
  position: relative;
  z-index: 0;
  height: 62svh;
  min-height: 380px;
  overflow: hidden;
  background: #8FA6C0;
}

.stage__still { position: absolute; inset: 0; }
.stage__still svg { width: 100%; height: 100%; }

.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.webgl .stage__canvas { opacity: 1; }

.stage__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(130% 92% at 50% 40%, rgba(23, 18, 14, 0) 58%, rgba(23, 18, 14, 0.2) 100%);
}

/* In cinema the veil earns its keep: it grades the edge the copy sits on, in
   the chapter's own colour, and fades to nothing well before the subject. It
   is a gradient, never a slab, so the estate reads straight through it. */
.cinema .stage__veil {
  background:
    linear-gradient(to top,
      rgb(var(--ch-veil) / 0.5) 0%,
      rgb(var(--ch-veil) / 0.28) 15%,
      rgb(var(--ch-veil) / 0) 44%),
    radial-gradient(132% 94% at 50% 38%,
      rgb(var(--ch-veil) / 0) 56%,
      rgb(var(--ch-veil) / 0.24) 100%);
}

/* the column under the copy, masked so it dies away going up the frame */
.cinema .stage__veil::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgb(var(--ch-veil) / 0.5) 0%,
    rgb(var(--ch-veil) / 0.34) 22%,
    rgb(var(--ch-veil) / 0) 50%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 44%, rgba(0, 0, 0, 0) 84%);
  mask-image: linear-gradient(to top, #000 0%, #000 44%, rgba(0, 0, 0, 0) 84%);
}

.stage__note {
  position: absolute;
  right: var(--gutter);
  bottom: 12px;
  margin: 0;
  padding: 6px 10px;
  background: rgb(var(--ch-veil) / 0.82);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--panel-soft);
}

/* cinema mode: the stage becomes the spine the chapters ride over */
.cinema .stage {
  position: sticky;
  top: var(--bar);
  height: calc(100svh - var(--bar));
}
.cinema .chapters { position: relative; margin-top: calc(-100svh + var(--bar)); }

/* ---------- chapters ---------- */
.chapters { position: relative; z-index: 1; }

.chapter {
  position: relative;
  padding: 56px 0 64px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.chapter:first-child { border-top: 0; }

.cinema .chapter {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 0 0 7vh;
  border-top: 0;
  background: transparent;
}

.cinema .chapter--hero { align-items: flex-end; }

.panel { max-width: 34rem; }

.cinema .panel {
  max-width: 27rem;
  color: var(--cream);
  padding: 20px 22px 22px;
  border-left: 2px solid rgb(var(--ch-accent) / 0.85);
  border-radius: 0 var(--r) var(--r) 0;
  /* fallback for engines with no backdrop filter: the scrim alone must carry
     the contrast, so it is heavier here and lighter in the @supports block */
  background: rgb(var(--ch-veil) / 0.8);
  box-shadow:
    inset 0 0 0 1px rgb(var(--ch-accent) / 0.1),
    0 18px 48px -34px rgba(8, 5, 3, 0.9);
}

/* Where the engine can filter its backdrop, the card stops being a lid. The
   brightness term is what holds AA over a bright chapter: it scales the frame
   down proportionally instead of burying it under more opacity, so the estate
   still reads through the glass on the dark chapters. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cinema .panel {
    background: rgb(var(--ch-veil) / 0.46);
    -webkit-backdrop-filter: blur(9px) saturate(1.06) brightness(0.48);
    backdrop-filter: blur(9px) saturate(1.06) brightness(0.48);
  }

  /* On a touch device the canvas under this card repaints every frame, and the
     blur pass would be repeated with it. The brightness term is what holds the
     contrast, so drop only the blur and keep the frame rate. */
  @media (pointer: coarse) {
    .cinema .panel {
      -webkit-backdrop-filter: saturate(1.06) brightness(0.48);
      backdrop-filter: saturate(1.06) brightness(0.48);
    }
  }
}

.cinema .panel h1, .cinema .panel h2 { color: var(--cream); }
/* the hero title is capped in cinema: at the display size it ran the card the
   full height of the frame, which is the thing we are here to stop */
.cinema .panel h1 { font-size: clamp(1.95rem, 1.35rem + 2.1vw, 3.3rem); }
.cinema .panel .eyebrow { color: rgb(var(--ch-accent)); }
.cinema .panel .caption { color: var(--panel-soft); }

/* the hero carries facts and two buttons, so on a wide frame it is allowed to
   be wider. Wider is how it stays short: the title wraps to two lines instead
   of four, and the card ends well clear of the top of the picture. */
@media (min-aspect-ratio: 11/10) and (min-width: 1000px) {
  .cinema .chapter--hero .panel { max-width: 38rem; }
}

.panel h2 { margin-bottom: 0.5em; }
.panel p { max-width: 36ch; }
.cinema .panel p { max-width: 38ch; }

.caption {
  display: block;
  margin-top: 1.1em;
  padding-top: 0.9em;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--muted-l);
}
.cinema .caption { border-color: rgb(var(--ch-accent) / 0.24); }

@media (min-width: 900px) {
  .cinema .panel { padding: 24px 26px 26px; }
  .chapter { padding: 88px 0 96px; }
}

/* the frame is landscape: the copy is a card in one corner and the rest of
   the estate is left alone. The same query scene.js reads, so the lift and
   the layout can never disagree about what shape the stage is. */
@media (min-aspect-ratio: 11/10) {
  .cinema .chapter { padding-bottom: 6vh; }
}

/* a short landscape frame, the case that used to get a portrait lift it was
   never built for. There is little height to give away here, so the card
   tightens rather than climbing the picture. */
@media (min-aspect-ratio: 11/10) and (max-height: 660px) {
  .cinema .panel { padding: 14px 16px 16px; max-width: 24rem; }
  /* the hero has the most to say and the least room to say it in. Two columns
     turn a tall card that swallows the barn into a shallow band under it. */
  .cinema .chapter--hero .panel {
    max-width: min(42rem, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
    grid-template-areas:
      "eyebrow eyebrow"
      "title   facts"
      "sub     actions";
  }
  .cinema .chapter--hero .panel > .eyebrow { grid-area: eyebrow; margin-bottom: 0.5em; }
  .cinema .chapter--hero .panel > h1 { grid-area: title; }
  .cinema .chapter--hero .panel > .hero__sub { grid-area: sub; margin-top: 0.55em; }
  .cinema .chapter--hero .panel > .facts { grid-area: facts; margin: 0 0 0.6em; }
  .cinema .chapter--hero .panel > .actions { grid-area: actions; align-self: end; }
  .cinema .panel h1 { font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.15rem); }
  .cinema .panel h2 { font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem); }
  .cinema .hero__sub { font-size: 0.9375rem; line-height: 1.38; }
  .cinema .fact b { font-size: 1.15rem; }
  .cinema .fact span { font-size: 0.5625rem; letter-spacing: 0.05em; }
  /* three facts on one row: wrapping them is what made this card tall */
  .cinema .fact { min-width: 0; padding: 0.5em 0.5em 0.55em 0; }
  .cinema .fact + .fact { padding-left: 0.5em; }
  .cinema .facts { margin: 0.85em 0 0.9em; }
  /* both buttons on one line, so the band keeps to three shallow rows */
  .cinema .chapter--hero .actions .btn { padding: 0.72em 0.95em; font-size: 0.8125rem; }
  .cinema .cue { display: none; }
  .cinema .panel .still { display: none; }
  .cinema .stage__note { display: none; }
  .cinema .chapter { padding-bottom: 4vh; }
}

/* ---------- hero block ---------- */
.hero__sub { margin-top: 0.9em; font-size: var(--step-1); line-height: 1.4; }
.cinema .hero__sub { color: var(--cream); }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 1.4em 0 1.5em;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cinema .facts { border-color: rgb(var(--ch-accent) / 0.24); margin: 1.1em 0 1.2em; }

.fact {
  flex: 1 1 0;
  min-width: 96px;
  padding: 0.85em 0.9em 0.9em 0;
}
.fact + .fact { padding-left: 0.9em; border-left: 1px solid var(--rule); }
.cinema .fact + .fact { border-color: rgb(var(--ch-accent) / 0.24); }

.fact b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 5.4vw, 1.95rem);
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.cinema .fact b { color: rgb(var(--ch-accent)); font-size: clamp(1.35rem, 4.6vw, 1.7rem); }
.cinema .fact { padding: 0.7em 0.8em 0.72em 0; }

.fact span {
  display: block;
  margin-top: 0.45em;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-l);
  line-height: 1.35;
}
.cinema .fact span { color: var(--panel-soft); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.cue {
  margin-top: 1.5em;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-l);
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.cinema .cue { color: var(--panel-soft); margin-top: 0.95em; }
.cue::after {
  content: "";
  width: 44px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* a tall frame: the copy takes the bottom band and scene.js lifts the subject
   above it. The veil follows the same edge, so nothing floats. */
@media (max-aspect-ratio: 11/10) {
  .cinema .panel, .cinema .chapter--hero .panel { max-width: 34rem; }
  .cinema .stage__veil::before {
    background: linear-gradient(to right,
      rgb(var(--ch-veil) / 0.34) 0%,
      rgb(var(--ch-veil) / 0.26) 46%,
      rgb(var(--ch-veil) / 0.12) 100%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 34%, rgba(0, 0, 0, 0) 70%);
    mask-image: linear-gradient(to top, #000 0%, #000 34%, rgba(0, 0, 0, 0) 70%);
  }
}

@media (max-width: 620px) {
  /* the drawn scene is authored wide: on a phone, push in on the horizon */
  .stage__still svg { transform: scale(1.5); transform-origin: 52% 64%; }
  .cinema .panel { padding: 18px 16px 20px; border-left-width: 2px; }
  .cinema .chapter { padding-bottom: 4vh; }
  .facts { margin: 1.15em 0 1.2em; }
  .fact { padding: 0.7em 0.7em 0.75em 0; min-width: 84px; }
  .fact + .fact { padding-left: 0.7em; }
  .fact span { font-size: 0.625rem; letter-spacing: 0.07em; }
  .hero__sub { font-size: 1.0625rem; }
  .cue { display: none; }
  .stage__note { display: none; }
  .chapter--hero .btn--ghost { display: none; }
  .cinema .panel .still { aspect-ratio: 16 / 5; }
  .cinema .panel .still__label { max-width: 32ch; }
  .btn { padding: 0.85em 1.1em; }
}

/* ---------- chapter rail ---------- */
.rail { display: none; }

@media (min-width: 1080px) {
  .cinema .rail {
    display: block;
    position: fixed;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    transition: opacity 0.45s var(--ease);
  }
  .cinema .rail.is-off { opacity: 0; pointer-events: none; }
  .rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; justify-items: end; }
  .rail a {
    display: grid;
    grid-template-columns: 22px auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgb(var(--ch-veil) / 0.74);
    -webkit-backdrop-filter: blur(6px) brightness(0.5);
    backdrop-filter: blur(6px) brightness(0.5);
    text-decoration: none;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--panel-soft);
    transition: color 0.4s var(--ease), background-color 0.4s var(--ease);
  }
  .rail a::before {
    content: "";
    height: 1px;
    background: currentColor;
    opacity: 0.55;
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
    transform-origin: left;
  }
  .rail a:hover, .rail li[data-on="true"] a { color: rgb(var(--ch-accent)); }
  .rail li[data-on="true"] a::before { opacity: 1; transform: scaleX(1.5); }
}

/* ---------- generic sections ---------- */
.band { padding: 64px 0; }
.band--linen { background: var(--linen); }
.band--ink { background: var(--ink); color: var(--cream); }
.band--ink h2 { color: var(--cream); }

@media (min-width: 900px) { .band { padding: 104px 0; } }

.band__head { max-width: 40rem; margin-bottom: 40px; }
.band__head p { color: var(--muted-l); max-width: 46ch; }
.band--ink .band__head p { color: var(--muted-d); }

/* ---------- numbers ---------- */
.numbers { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.band--ink .numbers { border-color: var(--rule-d); }

.num {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.band--ink .num { border-color: var(--rule-d); }

.num dt {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-l);
}
.band--ink .num dt { color: var(--muted-d); }

.num dd { margin: 0; }
.num dd b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.05;
  letter-spacing: -0.015em;
  display: block;
  font-variant-numeric: tabular-nums;
}
.band--ink .num dd b { color: var(--amber-lt); }
.num dd small { display: block; margin-top: 4px; font-size: 0.875rem; color: var(--muted-l); }
.band--ink .num dd small { color: var(--muted-d); }

@media (min-width: 760px) {
  .num { grid-template-columns: 15rem 1fr; gap: 24px; align-items: baseline; padding: 26px 0; }
  .num dt { padding-top: 0.55em; }
}

/* in the narrow aside the label stays above the number */
.aside .num { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
.aside .num dt { padding-top: 0; }
.aside .num dd small { max-width: none; }

.footnote {
  margin-top: 28px;
  font-size: 0.9375rem;
  color: var(--muted-l);
  max-width: 52ch;
}
.band--ink .footnote { color: var(--muted-d); }

/* ---------- image direction placeholders ---------- */
.stills { display: grid; gap: 18px; }
@media (min-width: 760px) {
  .stills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  /* the portrait sets the row height; the 3:2 stills fill it instead of widening past their column */
  .stills > .still:not(.still--portrait) { aspect-ratio: auto; }
}

.still {
  position: relative;
  background:
    linear-gradient(135deg, rgba(158, 79, 28, 0.07), rgba(52, 65, 45, 0.07)),
    var(--linen);
  border: 1px solid var(--rule);
  display: flex;
  align-items: flex-end;
  padding: 14px;
  aspect-ratio: 3 / 2;
}
.still--portrait { aspect-ratio: 4 / 5; }
.band--linen .still { background: linear-gradient(135deg, rgba(158, 79, 28, 0.07), rgba(52, 65, 45, 0.07)), var(--paper); }

.still::before, .still::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--amber);
  opacity: 0.55;
}
.still::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.still::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.still__label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-l);
  line-height: 1.6;
  margin: 0;
  max-width: 24ch;
}
.still__label i { font-style: normal; color: var(--amber); display: block; }

/* placeholder tucked into a chapter panel */
.panel .still { margin-top: 1.4em; aspect-ratio: 16 / 7; }
.cinema .panel .still {
  background: rgba(244, 236, 222, 0.06);
  border-color: rgb(var(--ch-accent) / 0.22);
  aspect-ratio: 16 / 5;
  margin-top: 1.1em;
}
.cinema .panel .still__label { color: var(--panel-soft); }
.cinema .panel .still__label i { color: rgb(var(--ch-accent)); }
.cinema .panel .still::before, .cinema .panel .still::after { border-color: rgb(var(--ch-accent) / 0.8); }

/* ---------- closing ---------- */
.close { display: grid; gap: 28px; }
@media (min-width: 900px) { .close { grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: end; } }

.promise {
  border-left: 2px solid var(--amber-lt);
  padding-left: 18px;
}
.promise b { font-family: var(--serif); font-weight: 400; font-size: var(--step-2); display: block; line-height: 1.1; }
.promise span { display: block; margin-top: 8px; color: var(--muted-d); font-size: 0.9375rem; }

/* ---------- footer ---------- */
.foot {
  background: var(--ink);
  color: var(--muted-d);
  border-top: 1px solid var(--rule-d);
  padding: 34px 0 40px;
  font-size: 0.875rem;
}
.foot__in { display: grid; gap: 20px; }
.foot a { display: inline-block; padding: 5px 0; text-decoration: none; color: var(--muted-d); border-bottom: 1px solid transparent; }
.foot a:hover { color: var(--cream); border-color: var(--amber-lt); }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot__id {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 186, 169, 0.72);
  margin: 0;
}
.foot__c { color: var(--cream); font-family: var(--serif); font-size: 1.05rem; }

@media (min-width: 760px) {
  .foot__in { grid-template-columns: 1fr auto; align-items: center; row-gap: 14px; }
  .foot nav { justify-content: flex-end; }
  .foot__id { grid-column: 1 / -1; }
}

/* ---------- date page ---------- */
/* padding-block only: a shorthand here would wipe the .wrap gutter */
.page-head { padding-block: 48px 8px; }
@media (min-width: 900px) { .page-head { padding-block: 78px 12px; } }

.check { display: grid; gap: 36px; padding-bottom: 64px; }
@media (min-width: 980px) {
  .check { grid-template-columns: minmax(0, 1fr) 21rem; gap: 56px; align-items: start; padding-bottom: 104px; }
}

.form {
  background: var(--linen);
  border: 1px solid var(--rule);
  padding: 22px 20px 24px;
}
@media (min-width: 620px) { .form { padding: 30px 30px 32px; } }

.field { margin-bottom: 24px; }
.field:last-of-type { margin-bottom: 20px; }

.field > label, .field legend {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-l);
  margin-bottom: 10px;
  padding: 0;
}

.field fieldset { border: 0; margin: 0; padding: 0; }

.hint { font-size: 0.8125rem; color: var(--muted-l); margin: 8px 0 0; }

input[type="date"], input[type="number"] {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--bark);
  background: var(--paper);
  border: 1px solid var(--muted-l);
  border-radius: var(--r);
  padding: 0.78em 0.8em;
  width: 100%;
  min-height: 48px;
}
input[type="number"] { max-width: 8.5rem; }
input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--paper);
  color: var(--bark);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 0.6em 0.9em;
  min-height: 42px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.chip:hover { border-color: var(--amber); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.result {
  margin-top: 26px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}

.result__empty { color: var(--muted-l); font-size: 0.9375rem; margin: 0; }

.answer { border-left: 3px solid var(--muted-l); padding-left: 16px; }
.answer[data-state="open"] { border-color: var(--moss); }
.answer[data-state="taken"] { border-color: var(--amber); }
.answer[data-state="held"] { border-color: var(--amber); }
.answer[data-state="past"], .answer[data-state="error"] { border-color: var(--muted-l); }

.answer__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 8px;
}
.answer[data-state="open"] .answer__tag { color: var(--moss); }
.answer[data-state="past"] .answer__tag, .answer[data-state="error"] .answer__tag { color: var(--muted-l); }

.answer h3 { font-size: var(--step-2); margin-bottom: 0.35em; }
.answer p { font-size: 0.9375rem; color: var(--muted-l); max-width: 46ch; }
.answer p strong { color: var(--bark); font-weight: 600; }

.alts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.alts li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 0.9375rem;
  border-top: 1px solid var(--rule);
  padding-top: 6px;
}
.alts b { font-weight: 600; font-variant-numeric: tabular-nums; }
.alts span { color: var(--muted-l); font-size: 0.8125rem; }

.answer .actions { margin-top: 18px; }

.aside { display: grid; gap: 26px; align-content: start; }

.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 12px;
  font-size: 0.9375rem;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--amber);
  line-height: 1.35;
}

.card {
  background: var(--ink);
  color: var(--cream);
  padding: 22px 20px 24px;
}
.card h2 { font-size: var(--step-2); color: var(--cream); margin-bottom: 0.4em; }
.card p { color: var(--muted-d); font-size: 0.9375rem; }
.card p:last-child { margin-bottom: 0; }

.noscript-note {
  background: var(--ink);
  color: var(--cream);
  padding: 18px 20px;
  margin-bottom: 22px;
  border-left: 2px solid var(--amber-lt);
}
.noscript-note p { color: var(--muted-d); font-size: 0.9375rem; }
.noscript-note b { color: var(--cream); }

.date-band { background: var(--ink); overflow: hidden; height: 148px; }
.date-band svg { width: 100%; height: 100%; }

/* ---------- grain ---------- */
.grain {
  position: fixed;
  inset: -60px;
  z-index: 45;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grainDrift 1.2s steps(3) infinite;
}

@keyframes grainDrift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-14px, 9px); }
  66% { transform: translate(11px, -12px); }
  100% { transform: translate(0, 0); }
}

/* ---------- motion helpers ---------- */
.js .reveal { opacity: 0; }
.js .reveal.is-in { opacity: 1; }

.split-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.split-word { display: inline-block; will-change: transform, opacity; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .grain { animation: none; }
  .js .reveal { opacity: 1; }
  html { scroll-behavior: auto; }
}

@media print {
  .stage, .grain, .rail { display: none; }
}