/* The Favour — thefavour.club
   One stylesheet, no framework. The identity is a postcard: card stock, ink, one red stamp.
   Palette and type from BRAND-GUIDE.md v1 (3 Nov 2026). */

/* ---------- fonts: self-hosted (stage 5), no request to Google ----------
   Fraunces (Undercase Type, OFL 1.1) as one variable file per style with all its axes (wght, opsz, SOFT, WONK);
   Inter (Rasmus Andersson, OFL 1.1) as one variable weight file. Latin subset; licences in fonts/. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces-normal.woff2) format('woff2-variations'), url(fonts/fraunces-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces-italic.woff2) format('woff2-variations'), url(fonts/fraunces-italic.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter.woff2) format('woff2-variations'), url(fonts/inter.woff2) format('woff2'); }

:root {
  --ink: #1C1B1A;
  --card: #F3EEE4;
  --card-dark: #E7DFD0;
  --stamp: #C8321E;
  --postmark: #1F3A5F;

  /* page roles */
  --bg: var(--card);
  --fg: var(--ink);
  --fg-soft: #4A4642;
  --line: var(--card-dark);
  --line-strong: #CFC5B2;
  --button-bg: var(--ink);
  --button-fg: var(--card);
  --focus: var(--postmark);
  --field-bg: #FBF8F2;

  /* the postcard is a physical object: it stays cream in both themes */
  --paper: #F6F1E7;
  --paper-ink: #1C1B1A;
  --paper-rule: #D9CFBC;
  --paper-shadow: 0 1px 2px rgba(28, 27, 26, .12), 0 14px 32px -12px rgba(28, 27, 26, .35);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --gutter: 16px;
  --measure: 62ch;
  --page: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #211E1A;
    --fg: #EFE8DA;
    --fg-soft: #C2B9A8;
    --line: #3B3630;
    --line-strong: #5A5347;
    --button-bg: #EFE8DA;
    --button-fg: #1C1B1A;
    --focus: #9DB7D8;
    --field-bg: #2A2621;
    --paper-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -12px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  --bg: #211E1A;
  --fg: #EFE8DA;
  --fg-soft: #C2B9A8;
  --line: #3B3630;
  --line-strong: #5A5347;
  --button-bg: #EFE8DA;
  --button-fg: #1C1B1A;
  --focus: #9DB7D8;
  --field-bg: #2A2621;
  --paper-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -12px rgba(0, 0, 0, .7);
}

/* ---------- publish gates ----------
   One rule hides every gated element. Since 3 November 2026 two gates remain, ICO (the registration sentence) and
   ANALYTICS (the privacy-notice sentence); D1 and ENTITY are closed and their gates removed. Lift a gate by removing
   its data-publish-gate attribute from the element; never delete this rule. */
[data-publish-gate] { display: none; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01';
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
p { margin: 0 0 1em; max-width: var(--measure); }
ul, ol { padding-left: 1.25em; margin: 0 0 1em; max-width: var(--measure); }
li { margin-bottom: .35em; }
strong { font-weight: 600; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 .5em;
  font-variation-settings: 'opsz' 72, 'SOFT' 30;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
h3 { font-size: 1.3rem; font-variation-settings: 'opsz' 24, 'SOFT' 30; letter-spacing: 0; }

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

/* ---------- header ---------- */
.site-header {
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-variation-settings: 'opsz' 48, 'SOFT' 30;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wordmark span:first-child { letter-spacing: -0.045em; } /* the tightened 'Th' */
.site-nav ul { display: flex; gap: 1.1rem 1.4rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.site-nav li { margin: 0; }
.site-nav a { font-size: .95rem; text-decoration: none; color: var(--fg-soft); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--fg); text-decoration: underline; }

/* ---------- sections ---------- */
.section { padding-block: 3.5rem; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }
@media (min-width: 56rem) { .section { padding-block: 5rem; } }
.lede { font-size: 1.2rem; line-height: 1.5; }
.quiet { color: var(--fg-soft); }
.small { font-size: .9rem; line-height: 1.5; }

/* ---------- buttons ---------- */
.button {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  padding: .95rem 1.4rem;
  background: var(--button-bg);
  color: var(--button-fg);
  border: 1px solid var(--button-bg);
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { text-decoration: none; opacity: .92; }
.button:active { transform: translateY(1px); }

/* ---------- hero ---------- */
.hero { padding-block: 2.75rem 3.5rem; }
.hero .wrap {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 56rem) {
  .hero { padding-block: 4.5rem 5rem; }
  .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.5rem; }
}
.hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 5.2vw, 5.25rem);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin-bottom: .45em;
}
.hero h1 .name { display: block; font-size: .42em; letter-spacing: -0.015em; margin-bottom: .55em; font-variation-settings: 'opsz' 48, 'SOFT' 30; }
.hero .lede { margin-bottom: 1.1rem; }
.home-line { margin-bottom: 1.75rem; }
.hero .button { margin-top: .25rem; }
.frame-line { margin-top: 1.5rem; }

/* hero kicker, call to action, closing */
.kicker {
  font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--postmark); margin: 0 0 1.25rem;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kicker { color: #9DB7D8; } }
:root[data-theme="dark"] .kicker { color: #9DB7D8; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin: 1.5rem 0 1rem; max-width: none; }
.cta .under { font-size: .88rem; color: var(--fg-soft); }
.read-by { margin: 0 0 .5rem; }
.hero .frame-line { margin-top: 1rem; }
.promises-block h2 { max-width: 20ch; margin-bottom: 1.25rem; }
.promise-list {
  list-style: none; padding: 0; margin: 0; counter-reset: promise;
  max-width: 48rem;
}
.promise-list li {
  counter-increment: promise;
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .75rem; align-items: baseline;
  padding: 1rem 0; margin: 0; border-top: 1px solid var(--line);
  font-family: var(--serif); font-variation-settings: 'opsz' 48, 'SOFT' 30;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; text-wrap: pretty;
}
.promise-list li:last-child { border-bottom: 1px solid var(--line); }
.promise-list li::before {
  content: '0' counter(promise);
  font-family: var(--sans); font-size: .8rem; font-weight: 500; letter-spacing: .12em; color: var(--postmark);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .promise-list li::before { color: #9DB7D8; } }
.closing h2 { max-width: 18ch; font-size: clamp(2rem, 1.3rem + 3.4vw, 3.75rem); font-variation-settings: 'opsz' 144, 'SOFT' 50; letter-spacing: -0.022em; }
.closing .cta { margin-top: 1.75rem; }

.paid { padding-block: 3rem 5rem; }
.paid h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.5rem); font-variation-settings: 'opsz' 144, 'SOFT' 50; letter-spacing: -0.022em; max-width: 18ch; }
.paid .steps { margin-top: 1.5rem; }

/* ---------- the postcard ---------- */
.postcard {
  position: relative;
  aspect-ratio: 3 / 2;
  width: 100%;
  max-width: 34rem;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 3px;
  box-shadow: var(--paper-shadow);
  padding: 1.1rem 1.2rem;
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.postcard--front { transform: rotate(-1.75deg); margin-inline: auto; }
@media (min-width: 56rem) { .postcard--front { margin-inline: 0 auto; } }
.postcard p { color: inherit; }

.postcard .stamp {
  position: absolute; top: .9rem; right: .9rem;
  width: 2.6rem; height: auto;
  z-index: 1;
}
.postcard .postmark {
  position: absolute; top: .3rem; right: 2.05rem;
  width: 7.3rem; height: auto;
  color: var(--postmark);
  opacity: .86;
  transform: rotate(-9deg);
  z-index: 2;
}
/* card stock: the hero card's paper is a photograph of blank 350 gsm printer's card (img/card-paper.jpg, generated
   3 November 2026, cropped to the card face); the type stays live on top. The SVG-noise grain it replaces is gone. */
.postcard--front { background: #F6F1E7 url("img/card-paper.jpg") center / cover no-repeat; background-image: image-set(url("img/card-paper.webp") type("image/webp"), url("img/card-paper.jpg") type("image/jpeg")); }
.postcard--front::before { content: none; }
.postcard--front > * { position: relative; z-index: 1; }
.postcard .favour-label {
  font-size: .78rem;
  color: var(--postmark);
  margin: 0 0 .35rem;
  max-width: 70%;
}
.postcard .favour {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 24, 'SOFT' 30;
  font-size: clamp(1.15rem, .9rem + 1.3vw, 1.6rem);
  line-height: 1.25;
  margin: 0 0 .25rem;
  max-width: 100%;
  text-wrap: pretty;
}
.postcard .turn {
  font-size: .78rem;
  color: var(--postmark);
  margin: .3rem 0 0;
}

/* the back of the card */
.postcard--back {
  justify-content: flex-start;
  transform: rotate(1.25deg);
  margin-inline: auto;
  max-width: 36rem;
  padding: 1rem 1.1rem;
  aspect-ratio: auto;        /* the back grows with its six lines; never clips */
  min-height: 15rem;
}
@media (min-width: 56rem) { .postcard--back { min-height: 22rem; } }
.postcard--back .back-grid {
  display: grid;
  grid-template-columns: 1.75fr 1px .75fr;
  gap: 0 .9rem;
  height: 100%;
}
.postcard--back .divider { background: var(--paper-rule); }
.postcard--back ol {
  list-style: none; counter-reset: favour;
  padding: 0; margin: 0;
  font-size: clamp(.7rem, .5rem + .75vw, .86rem);
  line-height: 1.28;
}
.postcard--back ol li {
  counter-increment: favour;
  display: grid; grid-template-columns: 1.1em 1fr; gap: .35em;
  margin: 0 0 .28em;
}
.postcard--back ol li::before {
  content: counter(favour);
  font-family: var(--serif);
  font-variation-settings: 'opsz' 24;
  color: var(--postmark);
}
.postcard--back .back-label {
  font-size: .72rem; color: var(--postmark); margin: 0 0 .5rem;
}
.postcard--back .address {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1.2rem; padding-bottom: .4rem;
}
.postcard--back .address span { display: block; border-bottom: 1px solid var(--paper-rule); height: 1px; }
.postcard--back .address .to { font-size: .72rem; color: var(--postmark); border: 0; height: auto; margin-bottom: -.4rem; }
@media (max-width: 35.99rem) {
  .postcard--back .back-grid { grid-template-columns: 1fr; }
  .postcard--back .divider, .postcard--back .address { display: none; }
}

/* ---------- how it works ---------- */
.steps {
  list-style: none; padding: 0; margin: 0 0 2rem;
  counter-reset: step;
  max-width: var(--measure);
}
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.2rem 1fr; gap: .5rem;
  padding: .7rem 0;
  border-top: 1px solid var(--line);
  margin: 0;
  align-items: baseline;
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(step);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-variation-settings: 'opsz' 24, 'SOFT' 30;
  color: var(--fg-soft);
  line-height: 1;
}
.steps .when { color: var(--fg-soft); }
.game { margin-top: 2.5rem; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .game { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }

/* ---------- price ---------- */
.price-block { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .price-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
.price {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  font-size: clamp(2.4rem, 1.5rem + 4vw, 4.25rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.promises { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.promises li {
  padding: .6rem 0; margin: 0;
  border-top: 1px solid var(--line);
}
.promises li:last-child { border-bottom: 1px solid var(--line); }
.tier { padding-top: .25rem; }
.tier h3 { margin-bottom: .25em; }
.notice {
  margin-top: 1.5rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-size: .95rem;
  max-width: var(--measure);
}
.notice p { margin: 0; }

/* ---------- guarantee ---------- */
.guarantee h2 { max-width: 20ch; }
.guarantee .line {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--stamp);
  max-width: 22ch;
  margin: 0 0 1rem;
}

/* ---------- founder ---------- */
.founder p { font-size: 1.2rem; }

/* ---------- FAQ ---------- */
.faq { max-width: var(--measure); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-variation-settings: 'opsz' 24, 'SOFT' 30;
  padding: .9rem 2.2rem .9rem 0;
  position: relative;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute; right: .2rem; top: .75rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--fg-soft);
  line-height: 1;
}
.faq details[open] summary::after { content: '–'; }
.faq details > p, .faq details > ul { padding-bottom: 1rem; }
.faq details > p:last-child { margin-bottom: 0; }

/* ---------- forms (apply) ---------- */
.form { max-width: 40rem; }
.field { margin-bottom: 1.6rem; }
.field label, .field .label {
  display: block; font-weight: 500; margin-bottom: .35rem;
}
.field .hint { color: var(--fg-soft); font-size: .92rem; margin: 0 0 .5rem; }
.field input[type="text"], .field input[type="tel"], .field textarea, .field select {
  width: 100%;
  font: inherit;
  color: var(--fg);
  background: var(--field-bg);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: .7rem .8rem;
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 50%, calc(100% - .75rem) 50%; background-size: .36rem .36rem; background-repeat: no-repeat; }
.field--pair { display: grid; gap: 1rem; }
@media (min-width: 36rem) { .field--pair { grid-template-columns: 1fr 1fr; } }
.field--pair label { display: block; font-weight: 500; margin-bottom: .35rem; }
fieldset .hint { color: var(--fg-soft); font-size: .92rem; margin: 0 0 .75rem; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; }
.check { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; align-items: start; margin-bottom: 1rem; max-width: var(--measure); }
.check input { width: 1.1rem; height: 1.1rem; margin: .25rem 0 0; accent-color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .check input { accent-color: #EFE8DA; } }
.check label { font-weight: 400; }
.before-submit { margin: 2rem 0 1rem; max-width: var(--measure); }
fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
legend { font-weight: 500; padding: 0; margin-bottom: .75rem; }

/* ---------- legal pages ---------- */
.legal { max-width: var(--measure); overflow-wrap: anywhere; } /* long statute URLs in the sources lists must wrap, not scroll */
.legal h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); margin-bottom: .35em; }
.legal h2 { font-size: 1.5rem; margin-top: 2em; }
.legal h3 { margin-top: 1.5em; }
.legal .updated { color: var(--fg-soft); margin-bottom: 2rem; }
.legal .table-wrap, .legal table { max-width: 100%; }
.legal table {
  border-collapse: collapse; width: 100%; margin: 1rem 0 1.5rem;
  font-size: .95rem; display: block; overflow-x: auto;   /* wide tables scroll inside themselves, never the page */
}
.legal th, .legal td { text-align: left; vertical-align: top; padding: .5rem .6rem .5rem 0; border-bottom: 1px solid var(--line); }
.legal th { font-weight: 500; border-bottom: 1px solid var(--line-strong); }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.legal blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 2px solid var(--line-strong); color: var(--fg-soft); }
.legal code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
  font-size: .92rem;
  color: var(--fg-soft);
}
.site-footer .wrap { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .site-footer .wrap { grid-template-columns: auto 1fr; align-items: end; gap: 3rem; } }
.site-footer .logo { width: 16rem; max-width: 100%; display: block; }
.site-footer .logo .ink { fill: var(--fg); }
.site-footer .logo .blue { fill: var(--postmark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-footer .logo .blue { fill: #9DB7D8; } }
:root[data-theme="dark"] .site-footer .logo .blue { fill: #9DB7D8; }
.site-footer ul { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.site-footer li { margin: 0; }
.site-footer p { margin: 0 0 .4rem; max-width: none; }
.placeholder { border-bottom: 1px dashed var(--line-strong); }


/* ---------- the application (apply.html): one question per screen ---------- */
.apply { padding-block: 2.5rem 4rem; }
@media (min-width: 56rem) { .apply { padding-block: 3.5rem 6rem; } }
.apply-form { max-width: 38rem; margin-inline: auto; }
.apply-kicker {
  font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--postmark); margin: 0 0 1.25rem;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .apply-kicker { color: #9DB7D8; } }
:root[data-theme="dark"] .apply-kicker { color: #9DB7D8; }
.screen { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
body:not(.js) .screen { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
body:not(.js) .screen--mirror, body:not(.js) .screen--done, body:not(.js) #back, body:not(.js) #next { display: none !important; }
body:not(.js) .screen[hidden] { display: block !important; }
body:not(.js) .screen--done[hidden] { display: none !important; }
.q {
  display: block; width: 100%;
  font-family: var(--serif); font-weight: 400;
  font-variation-settings: 'opsz' 72, 'SOFT' 30; letter-spacing: -0.015em;
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.5rem); line-height: 1.12;
  margin: 0 0 .6em; padding: 0; text-wrap: balance;
}
.q-hint { color: var(--fg-soft); margin: 0 0 1.25rem; }
.q-note { color: var(--fg-soft); font-size: .92rem; line-height: 1.5; margin: 1.1rem 0 0; }
.q-note em { font-style: italic; }
.optional { font-weight: 400; color: var(--fg-soft); font-size: .85em; margin-left: .35em; }

/* answer cards */
.opts { display: grid; gap: .6rem; margin: 0 0 .5rem; }
.opt {
  position: relative; display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--field-bg); cursor: pointer; transition: border-color .12s, background .12s;
}
.opt:hover { border-color: var(--fg-soft); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt__text { display: flex; flex-direction: column; gap: .1rem; }
.opt__main { font-weight: 500; }
.opt__sub { font-size: .85rem; color: var(--fg-soft); }
.opt::before {
  content: ""; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: transparent; transition: background .12s, border-color .12s;
}
.opt:has(input[type="checkbox"])::before { border-radius: 3px; }
.opt:has(input:checked) { border-color: var(--fg); background: var(--bg); }
.opt:has(input:checked)::before { background: var(--fg); border-color: var(--fg); box-shadow: inset 0 0 0 3px var(--bg); }
.opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.opt--any { margin-top: .25rem; }

/* language chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.chip { position: relative; padding: .5rem .85rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--field-bg); font-size: .95rem; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:has(input:checked) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.field--inline { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center; }
.field--inline label { margin: 0; }
.field--inline input { width: 100%; font: inherit; color: var(--fg); background: var(--field-bg); border: 1px solid var(--line-strong); border-radius: 3px; padding: .6rem .8rem; }
.field input[type="text"]::placeholder, .field input[type="tel"]::placeholder, .field textarea::placeholder { color: #9A9184; }

/* the favour */
.field--favour textarea { font-family: var(--serif); font-variation-settings: 'opsz' 24, 'SOFT' 30; font-size: 1.35rem; line-height: 1.3; min-height: 7rem; }
.counter { text-align: right; font-size: .85rem; color: var(--fg-soft); margin: .35rem 0 0; }
.counter--near { color: var(--fg); font-weight: 500; }
.warn { font-size: .92rem; color: var(--fg); border-left: 2px solid var(--postmark); padding-left: .8rem; margin: .75rem 0 0; }

/* the mirror */
.postcard--mirror { margin: .5rem auto 1.25rem; transform: rotate(-1.25deg); }
@media (min-width: 56rem) { .postcard--mirror { margin-inline: 0; } }
.postcard--mirror .favour { font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem); }
.linklike { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* the three boxes */
.boxes { display: grid; gap: .6rem; }
.box { display: grid; grid-template-columns: 1.4rem 1fr; gap: .75rem; align-items: start; padding: .9rem 1rem; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--field-bg); cursor: pointer; }
.box input { width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .box input { accent-color: #EFE8DA; } }
.box:has(input:checked) { border-color: var(--fg); }
.summary { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .95rem; }
.summary__label { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); margin: 0 0 .6rem; }
.summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; }
.summary dt { color: var(--fg-soft); }
.summary dd { margin: 0; }

/* errors, controls */
.err { color: var(--stamp); font-size: .95rem; margin: .5rem 0 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .err { color: #E8674F; } }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.5rem; }
.controls .under { width: 100%; margin: .25rem 0 0; font-size: .85rem; color: var(--fg-soft); }
.button--quiet { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.button--quiet:hover { border-color: var(--fg); opacity: 1; }
.button[disabled] { opacity: .6; cursor: default; }
.nope { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.screen--done .q { margin-bottom: .5em; }


/* ---------- character pass (prototype c1, 3 November 2026) ----------
   The site is a postcard. The page borrows the card's furniture: perforated edges between sections, two papers
   (card and card-dark) alternating like front and back, the postmark's cancellation bars as the one ornament,
   section numerals set like the back's favour numbers. No new colours, no illustration, one red thing per surface. */
:root { --paper-2: #ECE5D6; --perf: #CFC5B2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper-2: #27231E; --perf: #4A443B; } }
:root[data-theme="dark"] { --paper-2: #27231E; --perf: #4A443B; }

/* perforation: a punched edge instead of a hairline between sections */
.section { border-top: 0; position: relative; }
.section::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 10px;
  background:
    radial-gradient(circle at 5px 5px, var(--bg) 3.2px, transparent 3.6px) 0 0 / 14px 10px repeat-x,
    linear-gradient(var(--perf), var(--perf)) 0 4.5px / 100% 1px no-repeat;
  pointer-events: none;
}
.hero + .section::before, .section:first-of-type::before { display: none; }

/* two papers: the second, fourth… sections sit on the darker card stock */
.section.paper-2 { background: var(--paper-2); }
.section.paper-2::before {
  background:
    radial-gradient(circle at 5px 5px, var(--paper-2) 3.2px, transparent 3.6px) 0 0 / 14px 10px repeat-x,
    linear-gradient(var(--perf), var(--perf)) 0 4.5px / 100% 1px no-repeat;
}
.section.paper-2 + .section::before {
  background:
    radial-gradient(circle at 5px 5px, var(--bg) 3.2px, transparent 3.6px) 0 0 / 14px 10px repeat-x,
    linear-gradient(var(--perf), var(--perf)) 0 4.5px / 100% 1px no-repeat;
}
.paper-2 .notice, .paper-2 .postcard--back { box-shadow: var(--paper-shadow); }

/* section numerals, set like the favour numbers on the back of the card */
.section > .wrap > h2:first-child { position: relative; }
.section > .wrap > h2:first-child::before {
  content: attr(data-n);
  display: block;
  font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .14em;
  color: var(--postmark); margin-bottom: .9rem;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .section > .wrap > h2:first-child::before { color: #9DB7D8; } }

/* the cancellation bars: the postmark's wavy lines, used once per section as the only ornament */
.bars { display: block; width: 7.5rem; height: 1.6rem; color: var(--postmark); opacity: .55; margin: 1.5rem 0 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bars { color: #9DB7D8; } }

/* the hero: the card sits on the darker paper, like a card on a desk, with the back of another card under it */
.hero { position: relative; overflow: hidden; }
.hero .desk { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--paper-2); }
.hero .wrap { position: relative; z-index: 1; }
.hero .ghost {
  position: absolute; z-index: 0; pointer-events: none;
  width: 34rem; aspect-ratio: 3 / 2; right: 6rem; bottom: -7rem;
  background: var(--paper); border-radius: 3px; opacity: .55; transform: rotate(6deg);
  box-shadow: 0 1px 2px rgba(28,27,26,.1);
}
.hero .ghost::before, .hero .ghost::after {
  content: ""; position: absolute; left: 55%; right: 2rem; height: 1px; background: var(--paper-rule);
}
.hero .ghost::before { top: 50%; } .hero .ghost::after { top: 66%; }
.hero .ghost .corner { position: absolute; top: 1rem; right: 1rem; width: 2.4rem; height: 2.9rem; border: 1px dashed var(--paper-rule); }

/* the guarantee: a stamp. Perforated on all four edges (dot strips in the page colour), the red line inside */
.guarantee .stamp-panel {
  position: relative; padding: 2.4rem 2.2rem 2.2rem; max-width: 52rem; margin-top: .5rem;
  background: var(--paper); color: var(--paper-ink);
  box-shadow: var(--paper-shadow);
}
.guarantee .stamp-panel .perf-x, .guarantee .stamp-panel .perf-y { position: absolute; pointer-events: none; }
.guarantee .stamp-panel .perf-x { left: 0; right: 0; height: 10px; background: radial-gradient(circle at 6px 5px, var(--bg) 3.4px, transparent 3.9px) 0 0 / 12px 10px repeat-x; }
.guarantee .stamp-panel .perf-x.top { top: -5px; } .guarantee .stamp-panel .perf-x.bottom { bottom: -5px; }
.guarantee .stamp-panel .perf-y { top: 0; bottom: 0; width: 10px; background: radial-gradient(circle at 5px 6px, var(--bg) 3.4px, transparent 3.9px) 0 0 / 10px 12px repeat-y; }
.guarantee .stamp-panel .perf-y.left { left: -5px; } .guarantee .stamp-panel .perf-y.right { right: -5px; }
.guarantee .stamp-panel::after { content: ""; position: absolute; inset: 1rem; border: 1px solid var(--paper-rule); pointer-events: none; }
.guarantee .stamp-panel p { color: var(--paper-ink); position: relative; z-index: 1; }
.guarantee .stamp-panel .line { color: var(--stamp); }
.guarantee .stamp-panel .small { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--postmark); margin: 0 0 .75rem; }

/* the closing: on the darker paper, the perforation above it */
.closing.paper-2 h2 { color: var(--fg); }

/* ---------- stage 1 wireframe (DESIGN-PLAN.md): the evening, the night, the gallery, the person ---------- */
.ph {
  position: relative; margin: 0; width: 100%; background: var(--paper-2);
  border: 1px dashed var(--perf); border-radius: 3px; display: flex; align-items: flex-end; overflow: hidden;
}
.ph figcaption { font-size: .78rem; line-height: 1.4; color: var(--fg-soft); padding: .7rem .8rem; max-width: 26ch; }
.ph__n { position: absolute; top: .6rem; left: .7rem; font-family: var(--serif); font-size: 1.4rem; color: var(--postmark); opacity: .7; }
.ph--portrait { max-width: 22rem; }
.ph--phone { background: var(--paper-2); align-items: center; justify-content: center; }
.sms { width: 100%; max-width: 20rem; background: var(--paper); color: var(--paper-ink); border-radius: 14px; padding: .6rem .75rem; font-size: .6rem; line-height: 1.32; box-shadow: var(--paper-shadow); }
.sms__from { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--postmark); margin-bottom: .35rem; }
.sms p, .how .sms p, #how .sms p { margin: 0; max-width: none; color: var(--paper-ink); }

.moments { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 2rem 1.5rem; counter-reset: moment; }
@media (min-width: 40rem) { .moments { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .moments { grid-template-columns: repeat(3, 1fr); } }
.moments li { margin: 0; counter-increment: moment; }
.moments h3 { margin: .9rem 0 .3rem; font-size: 1.15rem; }
.moments h3::before { content: counter(moment, decimal-leading-zero) '  '; font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; color: var(--postmark); vertical-align: .2em; }
.moments p { font-size: .98rem; color: var(--fg-soft); max-width: none; }

/* the night: ink paper, cream type; the card glows */
.night { background: var(--ink); color: #EFE8DA; --fg: #EFE8DA; --fg-soft: #C2B9A8; --bg: var(--ink); --line: #3B3630; --perf: #4A443B; }
.night::before { background: radial-gradient(circle at 5px 5px, var(--ink) 3.2px, transparent 3.6px) 0 0 / 14px 10px repeat-x, linear-gradient(#4A443B, #4A443B) 0 4.5px / 100% 1px no-repeat; }
.night .kicker, .night > .wrap > h2:first-child::before, .night .night__grid h2::before { color: #9DB7D8; }
.night h2 { color: #EFE8DA; }
.night .quiet, .night .under { color: #C2B9A8; }
.night__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) { .night__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; } }
.night__grid h2 { position: relative; }
.night__grid h2::before { content: attr(data-n); display: block; font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .14em; margin-bottom: .9rem; }
.postcard--night { transform: rotate(-1.5deg); box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 30px 60px -20px rgba(0,0,0,.8); }
.night__note { margin-top: 2rem; font-size: .8rem; color: #8F867A; border-left: 1px dashed #4A443B; padding-left: .8rem; }
.night + .section::before { background: radial-gradient(circle at 5px 5px, var(--paper-2) 3.2px, transparent 3.6px) 0 0 / 14px 10px repeat-x, linear-gradient(var(--perf), var(--perf)) 0 4.5px / 100% 1px no-repeat; }
.button--light { background: #EFE8DA; color: #1C1B1A; border-color: #EFE8DA; }
.closing.night h2 { color: #EFE8DA; }
.closing.night::before { display: none; }

/* the gallery: nine small cards */
.gallery { list-style: none; padding: 0; margin: 1.5rem 0 1rem; display: grid; gap: .9rem; max-width: none; }
@media (min-width: 40rem) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery li {
  margin: 0; background: var(--paper); color: var(--paper-ink); border-radius: 3px; box-shadow: var(--paper-shadow);
  padding: 1.1rem 1.2rem 1.3rem; font-family: var(--serif); font-variation-settings: 'opsz' 24, 'SOFT' 30;
  font-size: 1.15rem; line-height: 1.25; position: relative; min-height: 7.5rem;
}
.gallery li::before { content: ""; position: absolute; top: .7rem; right: .7rem; width: 1rem; height: 1.2rem; border: 1px dashed var(--paper-rule); }
.gallery li:nth-child(3n+2) { transform: rotate(.6deg); } .gallery li:nth-child(3n) { transform: rotate(-.5deg); }

/* the gallery head's kicker */
.gallery__head h2[data-n]::before { content: attr(data-n); display: block; font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .14em; color: var(--postmark); margin-bottom: .9rem; }

/* the person */
.person h2[data-n]::before { content: attr(data-n); display: block; font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .14em; color: var(--postmark); margin-bottom: .9rem; }
.person__grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 56rem) { .person__grid { grid-template-columns: 22rem minmax(0, 1fr); gap: 4rem; } }
.person .lede { font-family: var(--serif); font-variation-settings: 'opsz' 48, 'SOFT' 30; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.01em; }

/* questions in three groups */
.faq-groups { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .faq-groups { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.faq-groups h3 { font-size: .78rem; font-family: var(--sans); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--postmark); margin-bottom: .5rem; font-variation-settings: normal; }
.faq-groups .faq summary { font-size: 1.1rem; }


/* ---------- stage 3: drawings until the photographs, the phone hero, motion, the sticky Apply ---------- */
.ill-frame { margin: 0; width: 100%; aspect-ratio: 4 / 3; background: var(--paper-2); border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--fg); overflow: hidden; position: relative; }
.ill-frame .ill { width: 72%; height: auto; opacity: .85; }
.ill-frame--phone { background: var(--paper-2); aspect-ratio: 4 / 3; padding: .9rem; }
.moments li { display: flex; flex-direction: column; }
.moments .ill-frame { flex: 0 0 auto; }
.night .ill-frame { background: #27231E; }

/* the phone hero: card right under the headline, lede after; Apply within the first screen */
@media (max-width: 55.99rem) {
  .hero .wrap { display: flex; flex-direction: column; }
  .hero .wrap > div:first-child { display: contents; }
  .hero .kicker { order: 1; } .hero h1 { order: 2; margin-bottom: .6rem; }
  .hero .postcard--front { order: 3; margin: .25rem auto 1.25rem; max-width: 30rem; }
  .hero .lede { order: 4; font-size: 1.08rem; }
  .hero .cta { order: 5; } .hero .read-by { order: 6; }
  .hero h1 { font-size: clamp(2.3rem, 1.4rem + 5vw, 3.2rem); }
  .hero .ghost { display: none; }
}

/* motion */
.js-motion .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js-motion .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.postcard--front, .gallery li { transition: transform .35s ease, box-shadow .35s ease; }
.postcard--front:hover { transform: rotate(-1.75deg) translateY(-3px); }
.gallery li:hover { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(28,27,26,.12), 0 22px 40px -16px rgba(28,27,26,.45); }
@media (prefers-reduced-motion: reduce) { .postcard--front, .gallery li { transition: none; } .postcard--front:hover, .gallery li:hover { transform: none; } }

/* the sticky Apply (phones only, after the hero, gone at the close) */
.sticky-apply {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(28,27,26,.25);
}
.sticky-apply span { font-size: .82rem; color: var(--fg-soft); }
.sticky-apply .button { padding: .8rem 1.1rem; }
@media (min-width: 56rem) { .sticky-apply { display: none !important; } }
body { padding-bottom: 0; }

/* the person section without a portrait */
.person__grid--words { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }


/* ---------- the photographs ---------- */
.ill-frame--photo { background: var(--paper-2); }
.ill-frame--photo picture, .ill-frame--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ill-frame--photo { aspect-ratio: 4 / 3; }
.night--photo { position: relative; overflow: hidden; }
.night__bg { position: absolute; inset: 0; z-index: 0; }
.night__bg img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .55; filter: saturate(.9); }
.night__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,27,26,.92) 0 38%, rgba(28,27,26,.45) 70%, rgba(28,27,26,.7) 100%); }
@media (max-width: 55.99rem) { .night__bg::after { background: linear-gradient(180deg, rgba(28,27,26,.94) 0 55%, rgba(28,27,26,.55) 100%); } }
.night--photo .wrap { position: relative; z-index: 1; }
.ph-photo { margin: 0; border-radius: 3px; overflow: hidden; box-shadow: var(--paper-shadow); }
.ph-photo img { width: 100%; height: auto; display: block; }
.ph-photo--small { max-width: 14rem; }
.gallery__head { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 56rem) { .gallery__head { grid-template-columns: minmax(0, 1fr) 14rem; gap: 3rem; } }
.person__grid .ph-photo { max-width: 22rem; }


/* ---------- stage 4: booking made easy ---------- */
/* what happens after you apply: one quiet line under the hero button, four steps separated by small marks */
.after-apply { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-family: var(--sans); font-size: .8rem; letter-spacing: .02em; color: var(--fg-soft); max-width: 40rem; }
.after-apply li { position: relative; padding-left: 1.1rem; }
.after-apply li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem; border: 1px solid var(--postmark); border-radius: 50%; }
.after-apply li:first-child::before { background: var(--postmark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .after-apply li::before { border-color: #9DB7D8; } :root:not([data-theme="light"]) .after-apply li:first-child::before { background: #9DB7D8; } }
:root[data-theme="dark"] .after-apply li::before { border-color: #9DB7D8; } :root[data-theme="dark"] .after-apply li:first-child::before { background: #9DB7D8; }
@media (max-width: 55.99rem) { .hero .after-apply { order: 7; } }

/* this Thursday: the week of a seat as four date bands, set like the postmark's date */
.thursday h2 { max-width: 22ch; }
.thursday .tt-date { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.thursday .lede { margin-bottom: 2rem; }
.week { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1.5rem 2rem; counter-reset: week; }
@media (min-width: 40rem) { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; } }
.week li { counter-increment: week; padding-top: 1rem; border-top: 1px solid var(--line-strong); position: relative; }
.week li::before { content: counter(week, decimal-leading-zero); position: absolute; right: 0; top: 1rem; font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .14em; color: var(--postmark); }
.week__when { display: block; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--postmark); margin-bottom: .55rem; padding-right: 2.2rem; }
.week strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: .45rem; font-variation-settings: 'opsz' 72, 'SOFT' 50; }
.week li > span:last-child { display: block; font-size: .98rem; color: var(--fg-soft); max-width: 30ch; }
.week__note { margin-top: .25rem; font-size: .9rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .week li::before, :root:not([data-theme="light"]) .week__when { color: #9DB7D8; } }
:root[data-theme="dark"] .week li::before, :root[data-theme="dark"] .week__when { color: #9DB7D8; }

/* the apply page's first screen: the Thursdays shown as date bands, like the postmark */
.opt .opt__stamp { display: inline-block; align-self: flex-start; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; color: var(--postmark); border: 1px solid currentColor; border-radius: 999px; padding: .2rem .55rem; margin-right: .75rem; vertical-align: middle; white-space: nowrap; }
.opt:has(input:checked) .opt__stamp { background: var(--postmark); color: var(--card); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .opt .opt__stamp { color: #9DB7D8; } :root:not([data-theme="light"]) .opt:has(input:checked) .opt__stamp { background: #9DB7D8; color: #1C1B1A; } }
:root[data-theme="dark"] .opt .opt__stamp { color: #9DB7D8; } :root[data-theme="dark"] .opt:has(input:checked) .opt__stamp { background: #9DB7D8; color: #1C1B1A; }

/* review fixes, 3 November 2026 */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gallery__head h2[data-n]::before, :root:not([data-theme="light"]) .person h2[data-n]::before, :root:not([data-theme="light"]) .moments h3::before { color: #9DB7D8; } }
:root[data-theme="dark"] .gallery__head h2[data-n]::before, :root[data-theme="dark"] .person h2[data-n]::before, :root[data-theme="dark"] .moments h3::before { color: #9DB7D8; }
/* the Sunday text mock: never clipped by its 4:3 frame */
.ill-frame--phone { align-items: center; container-type: inline-size; padding: .6rem; }
.ill-frame--phone .sms { font-size: clamp(.42rem, 5.2cqw, .82rem); line-height: 1.28; max-height: 100%; overflow: hidden; padding: .5em .7em; }
.ill-frame--phone .sms__from { font-size: .9em; margin-bottom: .3em; }
.ill-frame--phone .sms p { font-size: inherit; line-height: inherit; }


/* ---------- the handmade pass (3 November 2026, 23:20 GMT) ----------
   The same photographed card stock as the hero card, wherever the page shows a piece of card: the nine favour cards,
   the back of the card at night, the guarantee stamp panel. The page itself gets the faintest paper grain. */
.gallery li, .postcard--back, .guarantee .stamp-panel {
  background-color: var(--paper);
  background-image: url("img/card-paper.jpg"); background-image: image-set(url("img/card-paper.webp") type("image/webp"), url("img/card-paper.jpg") type("image/jpeg"));
  background-size: cover; background-position: center;
}
.gallery li:nth-child(2n) { background-position: 30% 70%; } .gallery li:nth-child(3n) { background-position: 70% 20%; }
.gallery li:nth-child(3n+1) { transform: rotate(-.3deg); } .gallery li:nth-child(5) { transform: rotate(.4deg); } .gallery li:nth-child(7) { transform: rotate(.5deg); }
.gallery li { box-shadow: 0 1px 1px rgba(28,27,26,.10), 0 10px 22px -12px rgba(28,27,26,.38); }
.gallery li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }

/* the page: a whisper of grain on every surface, so the card sits on paper rather than on a screen */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .17 0 0 0 0 .12 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: .07; mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; opacity: .05; } }
:root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .05; }
body > * { position: relative; z-index: 1; }
.sticky-apply { z-index: 20; }