/* Humara · Camp 0 — site styles.
   Three states on <html>:  .nojs  plain reading page (no JavaScript, or ?plain): every text in order, glass cards over
   the poster.  .js  the interactive pieces work.  .film  the scroll drives the film; at 8 stops it holds and a night-glass
   panel opens (fixed on wide screens, flowing with the page on phones: .flow). One deliberate look: night ground,
   whatever the viewer's theme (the film is dusk to night). Design locked from prototype v21. */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(fonts/figtree.woff2) format("woff2"); }
/* brand kit (26.10): Alegreya for headings, the logo and the letter only, never body text; Figtree for everything else.
   Alegreya from google/fonts (SIL OFL 1.1, fonts/Alegreya-OFL.txt), static 500 and 700, Latin subset (KARARLAR.md) */
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/alegreya-500.woff2) format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/alegreya-700.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/plexmono-500.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  /* brand kit (marka-kiti-v1, Furkan 26.10): the only colours on the page; everything below is built from these nine */
  --k-plum: #3f1627; --k-dusk: #2d3563; --k-moss: #4e5030; --k-ember: #8a3e2b; --k-peach: #f5ba94;
  --k-paper: #f5f1e6; --k-linen: #eae3d2; --k-ink: #2b1b24; --k-night: #24101b;
  --night-rgb: 36, 16, 27; --paper-rgb: 245, 241, 230; --peach-rgb: 245, 186, 148; --ember-rgb: 138, 62, 43; --ink-rgb: 43, 27, 36;
  --night: var(--k-night); --paper: var(--k-paper); --muted: var(--k-linen); --line: rgba(var(--paper-rgb), .16);
  --font-display: "Alegreya", Georgia, serif; --font-body: "Figtree", system-ui, sans-serif;
  --ui: var(--font-body);
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* labels (V-01, awaiting Furkan): the kit has no mono, so labels are Figtree 600, set in capitals with tracking.
     To go back to Plex Mono, this one line becomes:  --label: var(--mono); --label-w: 500; */
  --label: var(--font-body); --label-w: 600;
  --serif: var(--font-display); --logo: var(--font-display);
  /* accent (KIT §4): on the dark glass the text accent is Linen (capitals, tracking, weight set it apart); peach never
     colours text, it only marks: lines, dots, rings, focus. One switch if Furkan wants peach text: --g-accent: var(--k-peach) */
  --mark: var(--k-peach); --focus: var(--k-peach);
  /* night glass */
  --g-bg: rgba(var(--night-rgb), .64); --g-solid: var(--k-night); --g-border: rgba(var(--paper-rgb), .15); --g-ink: var(--k-paper); --g-muted: var(--k-linen);
  --g-accent: var(--k-linen); --g-chip: rgba(var(--paper-rgb), .08); --g-sep: rgba(var(--paper-rgb), .13); --g-on: var(--k-paper); --g-on-ink: var(--k-ink);
  --g-blur: 18px; --g-radius: 16px; --g-shadow: 0 24px 70px rgba(var(--night-rgb), .38);
  /* paper: soft text is Plum Ink made lighter, never below 4.5:1 on Paper (.66 → 5.0:1, .72 → 6.1:1, .78 → 7.5:1) */
  --p-bg: var(--k-paper); --p-note: var(--k-linen); --p-ink: var(--k-ink); --p-rust: var(--k-ember);
  --p-soft: rgba(var(--ink-rgb), .78); --p-label: rgba(var(--ink-rgb), .72); --p-faint: rgba(var(--ink-rgb), .66);
  --safe-l: max(16px, env(safe-area-inset-left, 0px)); --safe-r: max(16px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { background: var(--night); }
body { margin: 0; color: var(--paper); font: 400 16px/1.55 var(--ui); padding-left: var(--safe-l); padding-right: var(--safe-r); }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.nojs .only-js { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- the film (fixed behind everything) */
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--night); }
.stage video, .stage canvas, .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stage.drawn .poster, .stage.vok .poster { opacity: 0; }
.stage.vok canvas { opacity: 0; }
.stage .rest { opacity: 0; filter: brightness(.55) saturate(1.1); transform: scale(1.04); }
.stage.rest .rest { opacity: 1; }
.vig { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(70% 60% at 50% 54%, rgba(var(--night-rgb), .64), rgba(var(--night-rgb), .44) 56%, rgba(var(--night-rgb), 0) 82%); }   /* under the logo and the small opening text (28.10: ≥4.5:1 on the bright opening frame) */
.night { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, var(--k-dusk) 0%, var(--k-night) 100%); mix-blend-mode: multiply; }
.stage .fade { position: absolute; inset: 0; background: var(--k-night); opacity: 0; pointer-events: none; }
.stage.cut .fade { opacity: .92; }
@media (prefers-reduced-motion: no-preference) {
  .stage .poster { transition: opacity .5s; } .stage canvas { transition: opacity .15s; }
  .stage .rest { transition: opacity .7s; } .stage .fade { transition: opacity .28s ease; }
}
.nojs .stage video, .nojs .stage canvas, .nojs .stage .rest, .nojs .stage .night, .nojs .stage .fade { display: none; }
#lvh { position: fixed; top: 0; left: 0; width: 0; height: 100vh; height: 100lvh; visibility: hidden; pointer-events: none; }

/* ---------------------------------------------------------------- always one tap from the letter */
.join { position: fixed; z-index: 31; top: calc(12px + env(safe-area-inset-top, 0px)); right: var(--safe-r);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--k-ember); color: var(--k-paper);   /* camp theme (kit): Paper on Ember 6.6:1, seen on film and on paper */
  font: 600 14.5px/1 var(--ui); text-decoration: none; box-shadow: 0 8px 24px rgba(var(--night-rgb), .3); }
.join.away, .brand.away { opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; }
/* the horizontal logo, top left: leaves the opening (where the big one is) and takes you back to it */
.brand { position: fixed; z-index: 31; top: calc(12px + env(safe-area-inset-top, 0px)); left: var(--safe-l); display: flex; align-items: center; min-height: 44px; }
.brand img { display: block; width: 128px; height: auto; filter: drop-shadow(0 1px 6px rgba(var(--night-rgb), .55)); }
@media (prefers-reduced-motion: no-preference) { .join, .brand { transition: opacity .35s, transform .35s, visibility .35s; } }

/* stop rail (wide screens) */
.rail { position: fixed; z-index: 8; top: 50%; right: max(14px, env(safe-area-inset-right, 0px)); transform: translateY(-50%);
  display: grid; gap: 0; padding: 4px 0; border-radius: 999px; background: rgba(var(--night-rgb), .32); }
.rail button { position: relative; width: 24px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.rail button::before { content: ""; position: absolute; left: 8px; top: 7px; width: 8px; height: 8px; border-radius: 99px; background: rgba(var(--paper-rgb), .5); transition: height .3s, top .3s, background .3s; }
.rail button[aria-current="true"]::before { top: 0; height: 22px; background: var(--k-paper); }

/* ---------------------------------------------------------------- glass and type */
.glass { color: var(--g-ink); background: var(--g-bg); border: 1px solid var(--g-border); border-radius: var(--g-radius); box-shadow: var(--g-shadow);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.4); backdrop-filter: blur(var(--g-blur)) saturate(1.4); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--g-solid); } }
@media (prefers-reduced-transparency: reduce) { .glass { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (pointer: coarse) { :root { --g-blur: 10px; --g-bg: rgba(var(--night-rgb), .7); } }

.panel { display: grid; gap: 14px; align-content: start; }
.panel > * { min-width: 0; }
.eb { margin: 0; font: var(--label-w) 12px/1.3 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--g-accent); }
.pt { margin: 0; font: 500 34px/1.08 var(--serif); text-wrap: balance; }
.pt > span { display: block; }   /* a two-sentence title breaks between its sentences, never inside one */
.pb { margin: 0; font-size: 15.5px; line-height: 1.55; }
.sm { margin: 0; font-size: 13.5px; color: var(--g-muted); }
.btn { justify-self: start; border: 0; background: var(--g-on); color: var(--g-on-ink); min-height: 46px; padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 15.5px; cursor: pointer; }
.btn:disabled { opacity: .7; cursor: progress; }
.lnk { justify-self: start; border: 0; background: none; min-height: 44px; padding: 4px 0; color: var(--g-accent); font-size: 14.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* opening: no box, the logo centred over the film, a soft vignette behind it */
.hero { text-align: center; justify-items: center; gap: 14px; color: var(--k-paper); }
/* the brand logo (kit: humara-yatay-krem on dark ground): as drawn, no shadow, no frame; space around it is the hero's own */
.wm { margin: 0 0 6px; line-height: 0; }
.wm img { display: block; width: min(560px, 74vw); height: auto; }
.hero .mo { margin: -4px 0 0; font: 500 clamp(24px, 3vw, 34px)/1.1 var(--logo); letter-spacing: .02em; text-shadow: 0 1px 14px rgba(var(--night-rgb), .5); }
.hero .kun { margin: 4px 0 0; font: 600 13px/1.5 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--k-paper); text-shadow: 0 1px 10px rgba(var(--night-rgb), .7); }
.hero .count { margin: -4px 0 0; font: 500 18px/1.3 var(--serif); color: var(--k-paper); text-shadow: 0 1px 10px rgba(var(--night-rgb), .75); }
.hero .hint { margin: 6px 0 0; font: var(--label-w) 13px var(--label); letter-spacing: .06em; color: var(--k-paper); text-shadow: 0 1px 8px rgba(var(--night-rgb), .8); }
@media (prefers-reduced-motion: no-preference) { .hero .count.in { animation: fadein 1.2s ease-out; } }

/* ---------------------------------------------------------------- stop 1: tap-to-grow facts */
.xf { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; margin: 4px 0 0; }
.fx { position: relative; display: grid; border-radius: 12px; background: rgba(var(--night-rgb), .35); border: 1px solid var(--g-sep); transition: background .25s, border-color .25s; }
.fx > summary { display: grid; gap: 3px; min-height: 44px; padding: 10px 30px 10px 12px; cursor: pointer; list-style: none; }
.fx > summary::-webkit-details-marker { display: none; }
.fx > summary::after { content: "+"; position: absolute; top: 8px; right: 11px; color: var(--mark); font-size: 17px; line-height: 1; transition: transform .25s; }
.fx.static { padding: 10px 12px; gap: 3px; }
.fx .k { font: var(--label-w) 11px/1.3 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--g-accent); }
.fx .v { font-size: 14.5px; line-height: 1.35; }
.fx.static .v { font-size: 13.5px; color: var(--g-ink); }
.fx .more { margin: 0; padding: 0 12px 12px; font-size: 13.5px; line-height: 1.45; color: var(--g-muted); }
.fx .more a { color: var(--g-accent); text-underline-offset: 3px; white-space: nowrap; padding-block: 14px; }   /* 44 px to tap, same line height */
.fx[open] { background: rgba(var(--peach-rgb), .1); border-color: rgba(var(--peach-rgb), .45); }
.fx[open] > summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .fx[open] .more, .grow { animation: grow .3s ease-out; } }
@keyframes grow { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- tabs (stop 2, stop 5) */
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--g-chip); border: 1px solid var(--g-sep); width: fit-content; max-width: 100%; overflow-x: auto; }
.seg button { border: 0; background: transparent; min-height: 38px; padding: 7px 15px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--g-ink); white-space: nowrap; }
.seg button[aria-selected="true"] { background: var(--g-on); color: var(--g-on-ink); }
.pane { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pane-h { margin: 6px 0 0; font: var(--label-w) 12px/1.3 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--g-accent); }
.nojs .seg { display: none; }
.nojs .panes { display: grid; gap: 18px; }
/* fixed glass: the panes share one cell, so switching never moves the glass; flowing glass just grows or shrinks */
.js .panes { display: grid; }
.js .panes > .pane.off { display: none; }
.film:not(.flow) .panes > .pane { grid-area: 1 / 1; }
.film:not(.flow) .panes > .pane.off { display: grid; visibility: hidden; pointer-events: none; }
.js .pane-h { display: none; }
.dlx { margin: 0; min-height: 4.6em; font-size: 15px; line-height: 1.5; }
.dlx b { color: var(--g-accent); font-weight: 600; }

/* stop 2 · moments: the day as a line of gold, every moment open at once (the dashed stretch is the night, the fire glows) */
.dl { list-style: none; margin: 2px 0 0; padding: 0; display: grid; }
.dl li { position: relative; padding: 0 0 .62em 1.8em; font-size: 14.5px; }
.dl li:last-child { padding-bottom: 0; }
.dl li::after { content: ""; position: absolute; left: 0; top: .36em; width: .82em; height: .82em; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 .28em rgba(var(--peach-rgb), .17); }
.dl li:not(:last-child)::before { content: ""; position: absolute; left: .38em; top: 1.2em; bottom: -.36em; border-left: 1px solid rgba(var(--peach-rgb), .45); }
.dl li:nth-last-child(2)::before { border-left-style: dashed; }
.dl li:nth-last-child(2)::after { background: var(--k-ember); box-shadow: 0 0 0 .2em var(--mark), 0 0 12px rgba(var(--peach-rgb), .6); }
.dl p, .pegs p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.dl p b, .pegs p b { color: var(--g-accent); font-weight: 600; }
.nojs .pegs { display: grid; gap: 8px; }
.nojs .pegs button { display: none; }
.js .pegs p { display: none; }

/* stop 2 · always open: nine stations pegged on a line, all of them always there; tap one and it lifts off the line */
.pegs { list-style: none; margin: 0; padding: 0; }
.js .pegs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; padding-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 66' preserveAspectRatio='none'%3E%3Cpath d='M-2 7 Q150 19 302 7' fill='none' stroke='%23f5ba94' stroke-width='1.3' stroke-opacity='.75' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 66px repeat-y; }
.js .pegs li { display: grid; justify-items: center; align-content: start; height: 66px; padding-top: 9px; }
.js .pegs li:nth-child(3n+2) { padding-top: 14px; }
.tag { position: relative; display: grid; place-items: center; width: 100%; max-width: 122px; min-height: 44px; padding: 8px 8px 7px; border: 0; border-radius: 3px 3px 7px 7px;
  background: var(--k-linen); color: var(--p-ink); font: 500 13.5px/1.15 var(--ui); text-align: center; cursor: pointer;
  transform-origin: 50% -7px; transform: rotate(var(--r, -2.2deg)); box-shadow: 0 6px 12px rgba(var(--night-rgb), .3); }
.tag::before { content: ""; position: absolute; top: -10px; left: 50%; width: 8px; height: 17px; margin-left: -4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--k-ember), var(--k-peach) 45%, var(--k-ember)); box-shadow: 0 1px 2px rgba(var(--night-rgb), .45); }
.pegs li:nth-child(3n+2) .tag { --r: 1.6deg; }
.pegs li:nth-child(3n) .tag { --r: -.9deg; }
.tag[aria-pressed="true"] { --r: 0deg; background: var(--g-on); color: var(--g-on-ink); box-shadow: 0 0 0 2px var(--mark), 0 12px 22px rgba(var(--night-rgb), .42); transform: rotate(0) translateY(-3px); }
@media (prefers-reduced-motion: no-preference) {
  .tag { transition: transform .45s cubic-bezier(.3, 1.5, .45, 1), box-shadow .35s, background .25s; }
  .tag.swing { animation: swing .7s ease-out; }
}
@keyframes swing { 0% { transform: rotate(var(--r)); } 35% { transform: rotate(4deg) translateY(-3px); } 70% { transform: rotate(-1.5deg) translateY(-3px); } 100% { transform: rotate(0) translateY(-3px); } }

/* stop 2 · agreements */
.mom details { border-top: 1px solid var(--g-sep); }
.mom details:first-child { border-top: 0; }
.mom summary { display: grid; grid-template-columns: 22px 1fr 14px; gap: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; list-style: none; font-size: 15px; align-items: start; }
.mom summary::-webkit-details-marker { display: none; }
.mom summary::after { content: "+"; color: var(--mark); }
.mom details[open] summary::after { content: "–"; }
.mom summary .t { font: var(--label-w) 13px/1.6 var(--label); color: var(--g-accent); }
.mom details p { margin: 0 0 12px 32px; font-size: 14px; line-height: 1.45; color: var(--g-muted); }
.nojs .mom details p { display: block; }

/* ---------------------------------------------------------------- stop 3: ask us */
.chat { display: grid; gap: 8px; min-height: 176px; align-content: end; }
.chat .q, .chat .a { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 15px; line-height: 1.4; }
.chat .q { justify-self: end; background: var(--g-on); color: var(--g-on-ink); border-bottom-right-radius: 4px; }
.chat .a { justify-self: start; background: rgba(var(--paper-rgb), .1); border: 1px solid var(--g-sep); border-bottom-left-radius: 4px; }
.chat .a small { display: block; font: var(--label-w) 11px var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--g-accent); margin-bottom: 2px; }
.chat .a .tgb, .qa .tgb { display: inline-flex; align-items: center; min-height: 36px; margin-top: 8px; padding: 0 14px; border-radius: 999px; background: var(--g-on); color: var(--g-on-ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.chat .typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.chat .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-muted); }
@media (prefers-reduced-motion: no-preference) {
  .chat .q, .chat .a { animation: grow .3s ease-out; }
  .chat .typing i { animation: blink 1s infinite; } .chat .typing i:nth-child(2) { animation-delay: .15s; } .chat .typing i:nth-child(3) { animation-delay: .3s; }
}
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.who { display: flex; flex-wrap: wrap; gap: 6px; }
.who button { min-height: 40px; padding: 8px 14px; border-radius: 999px; background: var(--g-chip); border: 1px solid var(--g-sep); color: var(--g-ink); font-size: 14px; cursor: pointer; }
.who button.used { opacity: .5; }
.qa { margin: 0; display: grid; gap: 4px; }
.qa dt { font-weight: 600; color: var(--g-accent); font-size: 15px; margin-top: 8px; }
.qa dd { margin: 0; font-size: 14.5px; line-height: 1.5; }
.js .qa { display: none; }
@media (pointer: coarse) { .who button, .seg button { min-height: 44px; } }

/* ---------------------------------------------------------------- stop 4: inside the tent; its lamp starts off */
.tent { position: relative; margin: 0; border-radius: 14px; overflow: hidden; }
.tent svg { display: block; width: 100%; height: auto; }
.tent svg * { vector-effect: non-scaling-stroke; }
.tent .flame { transform-box: fill-box; transform-origin: 50% 100%; }
.tent .bring { opacity: 0; transform: translateY(-3px); transform-box: fill-box; }
.tent svg[data-has~="water"] .k-water, .tent svg[data-has~="headlamp"] .k-headlamp, .tent svg[data-has~="jacket"] .k-jacket, .tent svg[data-has~="layer"] .k-layer,
.tent svg[data-has~="socks"] .k-socks, .tent svg[data-has~="shoes"] .k-shoes, .tent svg[data-has~="towel"] .k-towel, .tent svg[data-has~="dog"] .k-dog { opacity: 1; transform: none; }
.tent .ghost { opacity: .8; }
.tent svg[data-has~="headlamp"] .ghost { opacity: 0; }
.tent .dim { opacity: 0; }
.tent .lampglow, .tent .lamp-halo, .tent .lamp-beam { opacity: 0; }
.tent .lamp-halo { transform-box: fill-box; transform-origin: center; transform: scale(.35); }
.tent .lamp-globe { fill: var(--k-ink); stroke: var(--k-linen); stroke-width: .8; }
.tent.lit .lampglow, .tent.lit .lamp-beam, .tent.lit .lamp-halo { opacity: 1; }
.tent.lit .lamp-halo { transform: scale(1); }
.tent.lit .lamp-globe { fill: var(--k-paper); stroke: var(--k-paper); }
.nojs .tent .lampglow, .nojs .tent .lamp-halo, .nojs .tent .lamp-beam { opacity: 1; }
.nojs .tent .lamp-halo { transform: none; }
.nojs .tent .lamp-globe { fill: var(--k-paper); }
.js .tent.dark .dim { opacity: .68; }
.js .tent.dark .hots { opacity: 0; visibility: hidden; }
.js .tent.dark { cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .tent .flame { animation: flick 1.1s ease-in-out infinite alternate; }
  .tent .bring, .tent .ghost { transition: opacity .4s, transform .4s; }
  .tent .dim { transition: opacity 1.4s ease .15s; }
  .tent .lampglow { transition: opacity 1.6s ease .1s; }
  .tent .lamp-beam { transition: opacity 1.2s ease .35s; }
  .tent .lamp-halo { transition: opacity .5s ease, transform 1s cubic-bezier(.2, .9, .3, 1.2); }
  .tent .lamp-globe { transition: fill .35s, stroke .35s; }
  .tent.lit .lamp-halo { animation: lampbreath 3.4s ease-in-out 1.2s infinite alternate; }
  .tent:not(.lit):not(.dark) .lamp-halo { animation: none; }
  .tent .hots { transition: opacity .6s ease .6s, visibility 0s .6s; }
}
@keyframes lampbreath { from { opacity: .82; transform: scale(.96); } to { opacity: 1; transform: scale(1.06); } }
@keyframes flick { from { transform: scaleY(.88) skewX(-3deg); } to { transform: scaleY(1.08) skewX(3deg); } }
.lampbtn { position: absolute; z-index: 5; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.lampbtn::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1.5px solid rgba(var(--peach-rgb), .8); box-shadow: 0 0 14px rgba(var(--peach-rgb), .45); }
@media (prefers-reduced-motion: no-preference) { .lampbtn::after { animation: breathe 2.2s ease-in-out infinite; } }
@keyframes breathe { 0%, 100% { transform: scale(.85); opacity: .55; } 50% { transform: scale(1.15); opacity: 1; } }
.tent.lit .lampbtn { display: none; }
.hots { position: absolute; inset: 0; pointer-events: none; }
.hot { position: absolute; z-index: 4; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; pointer-events: auto;
  background: var(--g-on); color: var(--g-on-ink); font: 600 15px/24px var(--ui); box-shadow: 0 0 0 4px rgba(var(--peach-rgb), .35); }
.hot::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.hot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(var(--peach-rgb), .7); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .tent.lit .hot::after { animation: ping 2.4s ease-out infinite; } }
@keyframes ping { 0% { transform: scale(.8); opacity: .9; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
.hot[aria-expanded="true"] { background: var(--k-paper); box-shadow: 0 0 0 5px rgba(var(--paper-rgb), .25); }
.hot[aria-expanded="true"]::after { animation: none; opacity: 0; }
.tent .tip { position: absolute; z-index: 6; max-width: 66%; padding: 8px 11px; border-radius: 10px; background: rgba(var(--night-rgb), .92); color: var(--k-paper); font-size: 13.5px; line-height: 1.35;
  box-shadow: 0 8px 20px rgba(var(--night-rgb), .35); transform: translate(-50%, calc(-100% - 18px)); pointer-events: none; }
.tent .tip.below { transform: translate(-50%, 18px); }
.tent .tip b { display: block; color: var(--g-accent); font: var(--label-w) 11px var(--label); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
@media (prefers-reduced-motion: no-preference) { .tent .tip { animation: fadein .25s ease-out; } }
.marks { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 14.5px; }
.marks b { color: var(--g-accent); font-weight: 600; }
.js .marks { display: none; }
.reveal { display: grid; gap: 12px; }
.js #your-tent:not(.lit) .reveal { display: none; }
@media (prefers-reduced-motion: no-preference) { .js #your-tent.lit .reveal { animation: grow .6s ease-out .45s backwards; } }
.lbl2 { margin: 2px 0 -6px; font: var(--label-w) 11.5px var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--g-accent); }
.addons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.addon { position: relative; display: grid; gap: 4px; align-content: start; text-align: left; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--g-sep); background: rgba(var(--night-rgb), .35); color: var(--g-ink); cursor: pointer; }
.addon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.addon:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.addon .an { font-size: 14.5px; font-weight: 600; }
.addon .ad { font-size: 13px; line-height: 1.38; color: var(--g-muted); }
.addon .ap { font: var(--label-w) 12px var(--label); color: var(--g-muted); }
.addon .aq { font-size: 12.5px; line-height: 1.35; color: var(--g-muted); }
.addon .as { font: var(--label-w) 12px var(--label); letter-spacing: .06em; color: var(--g-accent); }
.addon:has(input:checked) { border-color: rgba(var(--peach-rgb), .6); background: rgba(var(--peach-rgb), .12); }
.nojs .addon .as { display: none; }
.nojs .addon { cursor: default; }   /* without JavaScript the letter's P.S. holds the choice; the card only tells */
.addnote { margin: -4px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--g-accent); }
.addnote:empty { display: none; }
.packed { font: var(--label-w) 11.5px var(--label); letter-spacing: .08em; color: var(--g-muted); text-transform: uppercase; margin-left: 8px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ticks label { position: relative; display: inline-flex; align-items: center; min-height: 38px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--g-chip); border: 1px solid var(--g-sep); color: var(--g-ink); font-size: 14px; cursor: pointer; }
.ticks input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ticks span::before { content: "○ "; color: var(--g-muted); }
.ticks input:checked + span { color: var(--g-ink); }
.ticks input:checked + span::before { content: "✓ "; color: var(--mark); }
.ticks label:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.ticks label:has(input:checked) { border-color: rgba(var(--peach-rgb), .5); }
@media (pointer: coarse) { .ticks label { min-height: 44px; } }

/* ---------------------------------------------------------------- stop 5: the whole weekend */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 58px; top: 16px; bottom: 16px; width: 1px; background: rgba(var(--paper-rgb), .18); }
.tl details { border-radius: 10px; }
.tl details[open] { background: rgba(var(--paper-rgb), .05); }
.tl summary { position: relative; display: grid; grid-template-columns: 46px 14px 1fr; gap: 8px; align-items: center; min-height: 40px; padding: 7px 6px 7px 0; cursor: pointer; list-style: none; font-size: 15px; }
.tl summary::-webkit-details-marker { display: none; }
.tl .t { font: var(--label-w) 13px var(--label); color: var(--g-muted); text-align: right; font-variant-numeric: tabular-nums; }
.tl .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(var(--paper-rgb), .6); background: var(--k-night); justify-self: center; position: relative; z-index: 1; }
.tl .star .dot { width: 12px; height: 12px; border: 0; background: var(--mark); box-shadow: 0 0 0 4px rgba(var(--peach-rgb), .18); }
.tl .star .ti { font-weight: 600; color: var(--g-ink); }
.tl details p { margin: 0 8px 10px 68px; font-size: 14px; line-height: 1.45; color: var(--g-muted); }
@media (pointer: coarse) { .tl summary { min-height: 44px; } }

/* ---------------------------------------------------------------- stop 6: a soft paper fire, lit by holding it */
.pfire { display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; outline: none; }
.pfire svg { display: block; width: 100%; height: auto; overflow: visible; }
.pfire:focus-visible svg { outline: 2px solid var(--focus); outline-offset: 3px; }
.pfire .fz, .pfire .sw { transform-box: view-box; }
.js .pfire .fz { transform: scale(.5, .04); }
.pfire .glow6 { opacity: calc(.12 + var(--lv, 1) * .88); }
.pfire .lit6 { opacity: calc(var(--lv, 1) * .85); }
.pfire .sparks6 { opacity: calc(var(--lv, 1) * 1.3 - .3); }
@media (prefers-reduced-motion: no-preference) {
  .pfire .sw { animation: sway6 1.6s ease-in-out infinite alternate; }
  .pfire .sw1 { animation-duration: 1.25s; animation-delay: -.4s; } .pfire .sw2 { animation-duration: 1s; animation-delay: -.7s; } .pfire .sw3 { animation-duration: .8s; }
  .pfire .sw4 { animation-duration: .7s; animation-delay: -.2s; }
  .pfire .sp6 { transform-box: fill-box; transform-origin: center; animation: rise6 3.6s linear infinite; }
  .pfire.paused .sw, .pfire.paused .sp6 { animation-play-state: paused; }
}
@keyframes sway6 { from { transform: rotate(-2.4deg) scaleY(.97); } to { transform: rotate(2.4deg) scaleY(1.03); } }
@keyframes rise6 { 0% { transform: translateY(14px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-46px) rotate(180deg); opacity: 0; } }
.hints6 { display: grid; margin: -4px 0 0; }
.hints6 > * { grid-area: 1 / 1; margin: 0; text-align: center; }
.lit6t { font: 500 15.5px/1.35 var(--serif); color: var(--k-paper); opacity: 0; transition: opacity 1.2s ease .3s; }
.lit6t.on { opacity: 1; }
.hint6 { text-align: center; font: var(--label-w) 12px var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--g-muted); transition: opacity .8s; }
.hint6.done { opacity: 0; }
.night6 { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; text-align: center; }
.night6 li { padding: 4px 0; font: 500 19.5px/1.35 var(--serif); color: var(--k-paper); text-shadow: 0 0 14px rgba(var(--peach-rgb), .35); }
.js .night6 li { color: rgba(var(--paper-rgb), .22); text-shadow: none; }
.js .night6 li.on { color: var(--k-paper); text-shadow: 0 0 14px rgba(var(--peach-rgb), .35); }
@media (prefers-reduced-motion: no-preference) { .js .night6 li { transition: color 1.1s, text-shadow 1.1s; } }

/* ---------------------------------------------------------------- stop 7: the letter (design as in v21) */
/* one rhythm: every line of the letter is --u tall and the ruled paper has a line under each, so nothing sits across a rule */
.letter7 { --u: 40px; position: relative; display: grid; gap: 0; margin: 0; padding: 0 20px 4px; border-radius: 6px; background: var(--p-bg); color: var(--p-ink); box-shadow: 0 14px 30px rgba(var(--night-rgb), .35); transform: rotate(-.6deg);
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--u) - 1px), rgba(var(--ink-rgb), .09) calc(var(--u) - 1px) var(--u)); background-position: 0 -8px; }
@media (pointer: coarse) { .letter7 { --u: 44px; } }
.lt-head { position: relative; display: flex; justify-content: space-between; align-items: flex-start; height: calc(var(--u) * 2); }
.lt-dear { font: 500 19.5px/var(--u) var(--serif); color: var(--p-ink); padding-top: var(--u); }
.stamp7 { width: 50px; height: 60px; flex: none; margin-top: 10px; filter: drop-shadow(0 2px 3px rgba(var(--night-rgb), .25)); }
/* the stamp's and the postmark's lettering follow the labels (V-01) */
.stamp7 text, .pmark text { font-family: var(--label); font-weight: var(--label-w); }
.pmark { position: absolute; right: 14px; top: 6px; width: 104px; height: 64px; opacity: 0; transform: scale(1.5) rotate(-14deg); pointer-events: none; }
.letter7.sent .pmark { opacity: 1; transform: rotate(-14deg); }
@media (prefers-reduced-motion: no-preference) { .pmark { transition: opacity .25s, transform .35s cubic-bezier(.3, 1.4, .5, 1); } }
.lt-body { margin: 0; font: 500 17px/var(--u) var(--serif); display: grid; gap: 0; }
.lt-body .ln, .lt-ps .ln { margin: 0; }
.letter7 .w { font: 500 17px/1.25 var(--serif); color: var(--p-rust); background: rgba(var(--ember-rgb), .09); border: 0; border-bottom: 1.5px dashed rgba(var(--ember-rgb), .65); padding: 1px 8px 1px 6px; margin: 0 -2px 0 1px; border-radius: 5px 5px 0 0; max-width: 100%; vertical-align: baseline; }
.letter7 .nb { white-space: nowrap; }
.letter7 .pt1 { margin-left: -1px; }
.letter7 select.w { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 2px; }
.letter7 input.w { width: 8.5em; }   /* site.js sizes each blank to its words */
.letter7 .w::placeholder { color: var(--p-faint); opacity: 1; }
.letter7 .w:focus { outline: none; border-bottom-color: var(--p-rust); border-bottom-style: solid; background: rgba(var(--ember-rgb), .07); }
.letter7 .w:focus-visible { outline: none; }
.letter7.sent .w { border-bottom-color: transparent; background: none; padding-inline: 2px; }
.letter7 .w.miss { border-bottom-color: var(--k-ember); border-bottom-style: solid; background: rgba(var(--ember-rgb), .14); }
.letter7 .w:disabled { opacity: 1; -webkit-text-fill-color: var(--p-rust); }
/* the extras are real tick boxes: a clear place to tap, written in once ticked */
.tog { position: relative; cursor: pointer; }
.tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ck { display: flex; align-items: center; gap: 10px; height: var(--u); font: 500 15.5px/1.25 var(--serif); color: var(--p-soft); }
.ck span { display: flex; align-items: center; gap: 10px; }
.ck span::before { content: ""; flex: none; box-sizing: border-box; width: 20px; height: 20px; border: 1.5px solid rgba(var(--ember-rgb), .7); border-radius: 4px; background: rgba(var(--paper-rgb), .35);
  background-repeat: no-repeat; background-position: center; background-size: 14px; }
.ck i { font-style: italic; }
.ck input:checked + span { color: var(--p-rust); }
.ck input:checked + span::before { background-color: var(--p-rust); border-color: var(--p-rust);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23f5f1e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ck input:focus-visible + span::before { outline: 2px solid var(--p-rust); outline-offset: 2px; }
.letter7.sent .tog input:not(:checked) + span { display: none; }
.lt-ps { display: grid; gap: 0; margin: 0; font: 500 15.5px/var(--u) var(--serif); color: var(--p-soft); }
.lt-pps { display: flex; align-items: center; gap: 0 12px; height: var(--u); font: 500 15.5px/1.25 var(--serif); color: var(--p-soft); }
.lt-ps .w { font-size: 15.5px; }
/* an untouched choice reads like an empty blank; parts that only matter for some answers come and go with them */
.letter7 select.w:has(option[value=""]:checked) { color: var(--p-faint); }
.letter7:not(:has(select[name="with"] :is(option[value="friends"], option[value="family"]):checked)) .lt-n { display: none; }
.letter7:not(:has(select[name="with"] option[value="alone"]:checked)) .lt-solo:not(:has(input:checked)) { display: none; }
.letter7.sent .lt-dog:has(option[value=""]:checked) { display: none; }
.letter7.sent .lt-food:has(option[value=""]:checked) { display: none; }
.letter7.sent .lt-ps:has(.lt-food option[value=""]:checked):not(:has(input:checked)) { display: none; }
.letter7.sent .lt-pps:not(:has(input:checked)) { display: none; }
.measuring #join .lt-n { display: inline !important; }
.measuring #join .lt-solo { display: flex !important; }
.pv7 a, .fine a { color: inherit; text-underline-offset: 3px; padding-block: 14px; }   /* 44 px to tap, same line height */
.letter7.sent ~ .pv7 { display: none; }   /* agreed when it was sent; the stamped letter stays short */
.addon:has(input:disabled:not(:checked)) .as { visibility: hidden; }   /* a sent letter: the cards only show what it asked for */
.note7:focus { outline: none; }
.cancel7 { margin: -6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; font-size: 14.5px; color: var(--g-muted); }
.cancel7 .cq7 { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.cancel7 .cq7[hidden] { display: none; }
.lt-sign { margin: 0; display: grid; justify-items: end; align-content: start; min-height: calc(var(--u) * 2); font: 500 15.5px/var(--u) var(--serif); text-align: right; color: var(--p-soft); }
.lt-sig { font: 500 23px/var(--u) var(--serif); color: var(--p-rust); transform: rotate(-3deg); min-height: 1.1em; }
.letter7.shake { animation: shake7 .35s; }
@keyframes shake7 { 25% { transform: rotate(-.6deg) translateX(-5px); } 75% { transform: rotate(-.6deg) translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .letter7.shake { animation: none; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.err7 { margin: -4px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(var(--ember-rgb), .18); border: 1px solid rgba(var(--peach-rgb), .5); color: var(--k-paper); font-size: 14.5px; line-height: 1.45; }
.note7 { position: relative; justify-self: end; width: 90%; display: grid; gap: 6px; padding: 16px 16px 12px; border-radius: 4px; background: var(--p-note); color: var(--p-ink); box-shadow: 0 10px 22px rgba(var(--night-rgb), .3);
  transform: rotate(1.2deg); margin-top: -4px; }
.note7::before { content: ""; position: absolute; top: -8px; left: 50%; width: 54px; height: 16px; margin-left: -27px; background: rgba(var(--paper-rgb), .55); border: 1px solid rgba(var(--paper-rgb), .35); transform: rotate(-4deg); }
@media (prefers-reduced-motion: no-preference) { .note7.in { animation: slip7 .55s cubic-bezier(.2, .8, .2, 1); } }
@keyframes slip7 { from { opacity: 0; transform: translateY(-22px) rotate(1.2deg); } to { opacity: 1; transform: rotate(1.2deg); } }
.nt-body { margin: 0; font: 500 16px/1.5 var(--serif); }
.nt-sign { margin: 0; text-align: right; font: 500 20px var(--serif); color: var(--p-rust); }
.nt-links { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.nt-links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--p-rust); font: 600 14.5px var(--ui); text-underline-offset: 3px; }
.after7 { display: flex; flex-wrap: wrap; gap: 0 20px; }
.share7 { display: flex; flex-wrap: wrap; gap: 8px; }
.share7 .sh { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--g-sep); background: var(--g-chip); color: var(--g-ink); font-size: 14.5px; font-weight: 500; text-decoration: none; cursor: pointer; }

/* ---------------------------------------------------------------- after the film: paper */
.after { position: relative; z-index: 6; display: grid; justify-items: center; }
.av { display: grid; width: min(640px, 100%); justify-items: center; gap: 22px; }
.av > * { width: 100%; }
/* on light paper the focus ring is Ember (6.6:1 on Paper, 5.9:1 on Linen); peach is for the dark glass */
.paper8, .letter7, .note7, .note8 { --focus: var(--k-ember); }
.paper8 { position: relative; padding: 22px 22px 18px; border-radius: 5px; background: var(--p-bg); color: var(--p-ink); box-shadow: 0 16px 34px rgba(var(--night-rgb), .35);
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(var(--ink-rgb), .07) 27px 28px); }
.list8 { transform: rotate(-.5deg); }
.pp-k { margin: 0; font: var(--label-w) 11px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-label); }
.pp-t { margin: 4px 0 10px; font: 500 27px/1.12 var(--serif); }
.pr8 { margin: -4px 0 12px; font: 400 15.5px/1.4 var(--font-body); color: var(--p-ink); }
.pr8 b { margin-right: 4px; font: 700 24px/1 var(--serif); color: var(--p-rust); }
.tick8 { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tick8 li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; font: 400 16.5px/1.42 var(--font-body); }
.tick8 li b { font-weight: 600; color: var(--p-rust); }
.tk8 { width: 22px; height: 18px; margin-top: 4px; }
.tk8 path { fill: none; stroke: var(--p-rust); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.js .list8 .tk8 path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .list8.on .tk8 path { animation: tick8 .5s ease-out forwards; animation-delay: calc(var(--i) * .22s + .2s); }
@keyframes tick8 { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .js .list8 .tk8 path { stroke-dashoffset: 0; animation: none !important; } }
.qs8 { display: grid; gap: 12px; }
.qs8 > .eb { color: var(--g-accent); text-shadow: 0 1px 8px rgba(var(--night-rgb), .5); }
.notes8 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; align-items: start; }
.note8 { position: relative; display: grid; gap: 0; padding: 0; border-radius: 3px; background: var(--p-note); color: var(--p-ink);
  box-shadow: 0 8px 18px rgba(var(--night-rgb), .3); transform: rotate(var(--r, -1.4deg)); }
.note8:nth-child(even) { --r: 1.6deg; } .note8:nth-child(3n) { --r: -.6deg; }
.note8::before { content: ""; position: absolute; top: -7px; left: 50%; width: 46px; height: 14px; margin-left: -23px; background: rgba(var(--paper-rgb), .6); border: 1px solid rgba(var(--paper-rgb), .35); transform: rotate(-3deg); }
.note8 .q { display: flex; align-items: center; min-height: 52px; padding: 14px 14px 12px; font: 500 17px/1.25 var(--serif); cursor: pointer; list-style: none; }
.note8 .q::-webkit-details-marker { display: none; }
.note8 .a { margin: 0; padding: 0 14px 14px; font: 400 14.5px/1.45 var(--font-body); color: var(--p-ink); }
.note8[open] { grid-column: 1 / -1; transform: rotate(0); }
@media (prefers-reduced-motion: no-preference) { .note8 { transition: transform .35s; } .note8[open] .a { animation: grow .3s ease-out; } }
.ps8 { transform: rotate(.6deg); }
.ps8 p { margin: 0; font: 400 16px/1.45 var(--font-body); }
.ps8 .pp-sig { font: 500 21px var(--font-display); }
.ps8 a { color: var(--p-rust); text-underline-offset: 3px; padding-block: 13px; }   /* 44 px to tap at the 16 px Figtree line */
.ps8 b { font-weight: 400; }
.pp-sig { text-align: right; color: var(--p-rust); font-size: 21px !important; }
.fine { position: relative; z-index: 6; margin: 0 auto; max-width: 60ch; padding-block: 8px 48px; font-size: 13px; color: var(--k-linen); text-align: center; text-shadow: 0 1px 8px rgba(var(--night-rgb), .5); }
.fine p { margin: 0; }
.fine .soc { margin-top: 2px; }
.fine .soc a { display: inline-block; padding-block: 11px; }   /* 44 px to tap */

/* ---------------------------------------------------------------- plain reading page (no JavaScript, or ?plain) */
main { position: relative; z-index: 2; }
html:not(.film) main { display: grid; gap: 26px; max-width: 600px; margin: 0 auto; padding-block: 0 40px; }
html:not(.film) .panel.glass { padding: 26px 24px; }
html:not(.film) .hero { min-height: 78svh; align-content: center; padding-block: 72px 24px; }
html:not(.film) .vig { opacity: 1; }
html:not(.film) .track, html:not(.film) .rail { display: none; }
html:not(.film) .after { padding-block: 24px 8px; }
html:not(.film) .stage::after { content: ""; position: absolute; inset: 0; background: rgba(var(--night-rgb), .35); }

/* ---------------------------------------------------------------- the film layout */
.film main { display: block; }
.film .track { height: 1300vh; }
.film .panel { position: fixed; z-index: 10; opacity: 0; visibility: hidden; transform: translate(calc(var(--bx, 0%) + var(--tx, 0px)), calc(var(--by, 0%) + var(--ty, 0px))); }
.film .panel.hero { left: 50%; top: 50%; --bx: -50%; --by: -50%; width: min(960px, calc(100vw - 32px)); opacity: 1; visibility: visible; }
.film .panel.glass { left: auto; right: max(7vw, 56px); top: 50%; --by: -50%; width: min(420px, calc(100vw - 80px)); max-height: calc(100svh - 140px);
  padding: 30px 32px; overflow: auto; overscroll-behavior: auto; scrollbar-width: thin; }
.film .after { padding-block: 16vh 6vh; }
/* flowing glass: the panel sits in the page and scrolls past natively, the film holds while it is on screen */
.film.flow .panel.glass { position: absolute; top: 0; --by: 0%; transform: none; opacity: 1; visibility: visible; max-height: none; overflow: visible; }
.film:not(.ready) .panel.glass { visibility: hidden; }
.film .panel.glass.asleep { -webkit-backdrop-filter: none; backdrop-filter: none; }
.asleep, .asleep * { animation-play-state: paused !important; }
.measuring #your-tent .reveal { display: grid !important; }
.measuring #your-tent .addnote:empty { display: block; }   /* the add-on note's line counts too */
.measuring #your-tent .addnote:empty::before { content: "\00a0"; }
@media (max-width: 760px) {
  .rail { display: none !important; }
  .film .panel.glass { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); width: auto; padding: 22px 20px; }
  .pt { font-size: 30px; }
  .hero .kun { font-size: 11.5px; letter-spacing: .14em; max-width: 30ch; }
  .notes8 { grid-template-columns: 1fr; }
  .join { right: max(12px, env(safe-area-inset-right, 0px)); }
  .brand { left: max(12px, env(safe-area-inset-left, 0px)); }
  .brand img { width: 108px; }
}
@media (max-width: 440px) {
  .wm img { width: 84vw; }
  .seg button { padding: 7px 11px; font-size: 13.5px; }
}
@media (max-width: 380px) { .xf { grid-template-columns: 1fr; } .pt { font-size: 28px; } .seg button { padding: 7px 9px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .film .panel { transition: none; } }

/* ---------------------------------------------------------------- the pages a letter sent without JavaScript lands on */
body.small { display: grid; min-height: 100svh; place-items: center; padding-block: 40px; background: var(--night) url(film/poster.jpg) center / cover fixed; }
.small-in { display: grid; gap: 18px; width: min(520px, 100%); }
.small .note7 { width: 100%; justify-self: stretch; }
.small .back a { color: var(--g-ink); font-weight: 600; }
.small .back { margin: 0; text-align: center; }
body.small { padding-inline: var(--safe-l) var(--safe-r); }
.nt-plans { margin: 2px 0 0; font: 400 15px/1.45 var(--ui); color: var(--p-soft); }
.nt-plans a, .pv8 a { color: var(--p-rust); text-underline-offset: 3px; }
.pv8 { display: grid; gap: 8px; }
.pv8 .pp-t { margin: 0 0 4px; }
.pv8 h2:not(.pp-t), .pv8 h3 { margin: 10px 0 0; font: var(--label-w) 11px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-label); }
.pv8 p { margin: 0; font: 400 16px/1.5 var(--font-body); }
.pv8 a { color: var(--p-rust); }
.pv8 .pp-k { margin-top: 12px; font: var(--label-w) 11px var(--label); }

/* "write to me about the next camp": its own tick, outside the letter, just above Send */
.next7 { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--g-sep); border-radius: 12px; background: var(--g-chip); font-size: 15px; line-height: 1.35; }
.next7 span { display: flex; align-items: center; gap: 12px; }
.next7 span::before { content: ""; flex: none; box-sizing: border-box; width: 22px; height: 22px; border: 1.5px solid rgba(var(--paper-rgb), .65); border-radius: 5px; background: rgba(var(--paper-rgb), .08) center / 15px no-repeat; }
.next7 input:checked + span::before { background-color: var(--g-on); border-color: var(--g-on);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%2324101b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.next7:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.letter7.sent ~ .next7 { display: none; }

/* the question button and its chat window: in the corner on every screen */
.askfab { position: fixed; z-index: 32; right: var(--safe-r); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: 999px;
  background: var(--paper); color: var(--k-ink); font: 600 14.5px/1 var(--ui); cursor: pointer; box-shadow: 0 8px 24px rgba(var(--night-rgb), .35); }
.askfab.open { display: none; }
.askpanel { position: fixed; z-index: 33; right: var(--safe-r); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 2 * var(--safe-r))); max-height: min(560px, calc(100dvh - 90px)); display: grid; grid-template-rows: auto 1fr auto auto; gap: 0; overflow: hidden; background: rgba(var(--night-rgb), .88); }
.askpanel[hidden] { display: none; }
.ask-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 10px 18px; border-bottom: 1px solid var(--g-sep); }
.ask-h h2 { margin: 0; font: 500 24px/1 var(--serif); }
.ask-x { width: 44px; height: 44px; border: 0; background: none; color: var(--g-ink); font-size: 28px; line-height: 1; cursor: pointer; border-radius: 50%; }
.ask-log { min-height: 160px; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 10px; padding: 14px 14px 8px; }
.ask-m { max-width: 92%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.ask-m p { margin: 0; }
.ask-m.bot { justify-self: start; background: var(--g-chip); border-bottom-left-radius: 4px; }
.ask-m.me { justify-self: end; background: var(--g-accent); color: var(--k-ink); border-bottom-right-radius: 4px; }
.ask-m a { color: var(--g-accent); text-underline-offset: 3px; }
.ask-m.me a { color: var(--k-ink); }
.ask-r { margin: 10px 0 6px !important; font: var(--label-w) 11.5px var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--g-muted); }
.ask-rel { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-chip { min-height: 40px; padding: 6px 12px; border: 1px solid var(--g-border); border-radius: 999px; background: transparent; color: var(--g-ink); font-size: 14px; cursor: pointer; text-align: left; }
.ask-form { display: flex; gap: 8px; padding: 10px 12px 8px; border-top: 1px solid var(--g-sep); }
.ask-form input { flex: 1; min-width: 0; min-height: 46px; padding: 8px 14px; border: 1px solid var(--g-border); border-radius: 999px; background: rgba(var(--paper-rgb), .08); color: var(--g-ink); font-size: 16px; }
.ask-form input::placeholder { color: var(--g-muted); }
.ask-form input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.ask-form .btn { min-height: 46px; padding: 8px 18px; }
.ask-foot { margin: 0; padding: 0 16px 12px; font-size: 12px; line-height: 1.4; color: var(--g-muted); }
@media (max-width: 760px) { .askpanel { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); width: auto; } .askfab { right: max(12px, env(safe-area-inset-right, 0px)); } }
@media (prefers-reduced-motion: no-preference) { .ask-m { animation: fadein .25s ease-out; } }