/* Fonts: self-hosted Google Fonts subsets (OFL, licences in /fonts), loaded only for the ranges a page uses. */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/be-vietnam-pro-400-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/be-vietnam-pro-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/be-vietnam-pro-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/be-vietnam-pro-500-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/be-vietnam-pro-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/be-vietnam-pro-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-500-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/patrick-hand-400-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/patrick-hand-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/patrick-hand-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bricolage-grotesque-700-opsz72-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bricolage-grotesque-700-opsz72-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bricolage-grotesque-700-opsz72-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/bricolage-grotesque-600-opsz18-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/bricolage-grotesque-600-opsz18-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/bricolage-grotesque-600-opsz18-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Be Vietnam Pro",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --hand:"Patrick Hand","Be Vietnam Pro",cursive;
  --amber:#e1ad66; --led:#ff8a1e; --pencil:#c2361f;
  --charcoal:#161412; --plastic:#2a2826; --safelight:#3a0906; --paper:#efe6d6; --paper-ink:#1f1a14;
  --ground:var(--charcoal); --ink:#f3efe8; --muted:#bdb4a8; --accent:var(--amber);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--charcoal);color:var(--ink)}
body{font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block;background:#2b2724}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Grain: a fixed overlay; grain.js draws it. */

/* Header and footer */
.site-nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;display:flex;justify-content:space-between;align-items:center;height:60px;
  padding:12px 16px;background:rgba(22,20,18,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.brand{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font:600 18px var(--display)}
.brand img{border-radius:7px;background:none}
.site-nav nav{display:flex;gap:16px;align-items:center;font-size:14px}
.site-nav nav a{color:var(--muted);text-decoration:none;white-space:nowrap}
/* Narrow phones: the Vietnamese labels are longer, so the nav tightens rather than breaking a label in two. */
@media (max-width:400px){ .site-nav nav{gap:12px} }
@media (max-width:380px){ .site-nav{padding-inline:12px} .site-nav nav{gap:10px;font-size:13px} .brand{gap:8px} }
@media (max-width:340px){ .brand{font-size:0;gap:0} }  /* the mark alone; the name stays in the link for screen readers */
.sound-toggle{display:grid;place-items:center;width:36px;height:36px;padding:0;color:var(--muted);background:none;border:1px solid rgba(255,255,255,.2);border-radius:99px;cursor:pointer}
.sound-toggle[hidden]{display:grid!important;visibility:hidden}  /* keeps its box until home.js offers it: no nav shift */
.sound-toggle .waves{display:none}
.sound-toggle[aria-pressed="true"]{color:var(--amber)}
.sound-toggle[aria-pressed="true"] .waves{display:inline}
.sound-toggle[aria-pressed="true"] .mute{display:none}
.site-footer{padding:40px 16px 56px;background:var(--paper);color:var(--paper-ink);text-align:center;font-size:14px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.site-footer nav a{white-space:nowrap}
.site-footer a{color:var(--paper-ink)}

/* Chapters: each is at least one screen, text wraps, never clips. */
.chapter{position:relative;background:var(--ground);color:var(--ink);padding:0 16px}
.pin{position:relative;z-index:2;min-height:100svh;max-width:1080px;margin:0 auto;padding:56px 0 40px;display:grid;gap:28px;align-content:center}
.kicker{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0}
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(56px,14vw,148px);line-height:.9}
h2{font-size:clamp(34px,7vw,72px);line-height:1}
.copy{display:grid;gap:14px;max-width:34ch}
.copy p{margin:0;color:var(--muted);overflow-wrap:anywhere}
.copy .copy-lead{color:var(--ink);font-size:clamp(17px,2.6vw,21px)}
.lead{font-size:clamp(20px,3.4vw,28px);margin:0}
@media (min-width:900px){ .ch-shoot .pin,.ch-develop .pin{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center} }

/* Light-leak joins between chapters */
.chapter::before{content:"";position:absolute;left:0;right:0;top:-90px;height:180px;pointer-events:none;z-index:1;
  background:radial-gradient(55% 38% at 22% 50%,rgba(255,140,40,.26),transparent),radial-gradient(38% 34% at 84% 50%,rgba(255,60,30,.16),transparent),
    linear-gradient(var(--prev-ground,var(--ground)),var(--ground))}
#ch0::before{display:none}

/* 0 · Load */
.ch-load{--ground:var(--charcoal)}
.ch-load .pin{justify-items:start;min-height:78svh;padding-bottom:16px}
.ch-load h1{font-size:clamp(42px,10vw,104px)}
.ch-load .lead{color:var(--muted);max-width:44ch}
.cta-line{margin:0}
.btn.btn-load{background:var(--amber);color:var(--charcoal);box-shadow:0 3px 0 rgba(0,0,0,.6)}
.btn.btn-load:active{box-shadow:0 1px 0 rgba(0,0,0,.6)}

/* 0b · Why Fonder: a plain text strip, no motion (like the recipes teaser). */
.ch-why{--ground:var(--charcoal);--prev-ground:var(--charcoal)}
.ch-why .pin{justify-items:start;gap:16px;min-height:0;padding:72px 0 64px}
.ch-why h2{font-size:clamp(26px,4.6vw,44px);max-width:26ch}
.why-cycle{margin:0;font:500 13px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.why-line{margin:0;font-size:clamp(18px,2.8vw,24px);max-width:36ch}
.canister-wrap{position:relative;width:min(40vw,200px)}
.canister{width:100%;aspect-ratio:1/1;background:none;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.leader{position:absolute;left:80%;top:52%;width:min(44vw,300px);aspect-ratio:8/3;translate:0 -50%;transform-origin:left center;
  background:url(/img/home/film-strip.svg) left center/auto 100% repeat-x;
  -webkit-mask:linear-gradient(90deg,#000 85%,transparent);
  mask:linear-gradient(90deg,#000 85%,transparent)}
.hint{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* 1 · Shoot */
.ch-shoot{--ground:var(--plastic);--prev-ground:var(--charcoal);--accent:var(--led)}
.modes{display:flex;gap:8px;flex-wrap:wrap}
.modes span{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent);border-radius:99px;padding:6px 12px}

/* The Still-mode camera: Fonder's camera screen as live HTML, in the app's own points (--u, as in
   ch2's phone) — the viewfinder at 12,134 pt and 378 x 566, the action row at 761, the shutter at 827. */
.cam{--u:calc(100cqw / 402);--amber:#e1ad66;--c-text:#f3f2f2;--c-muted:#bab6b6;--c-hair:rgba(255,255,255,.16);
  position:absolute;inset:0;overflow:hidden;background:#1c1a18;color:var(--c-text);font-family:var(--body);line-height:1.25}
.cam p{margin:0}
.cam::before{content:"";position:absolute;z-index:9;top:calc(11 * var(--u));left:50%;width:calc(124 * var(--u));height:calc(36 * var(--u));translate:-50% 0;border-radius:99px;background:#000}
.cam-sprite{position:absolute;width:0;height:0}
.cam .ci{width:calc(22 * var(--u));height:calc(22 * var(--u));fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cam-top{position:absolute;left:calc(12 * var(--u));right:calc(12 * var(--u));top:calc(62 * var(--u));height:calc(44 * var(--u));
  display:flex;align-items:center;justify-content:space-between;padding:0 calc(10 * var(--u))}
.cam-title{display:grid;justify-items:center;gap:calc(3 * var(--u))}
.cam-name{font-size:max(10px,calc(15 * var(--u)))}
.cam-film,.hud-k,.cap-t{text-transform:uppercase}
html[lang=vi] .cap-t{text-transform:none}
.cam-film{font-size:max(9px,calc(9 * var(--u)));letter-spacing:.16em;color:var(--amber)}
.cam-vf{position:absolute;left:calc(12 * var(--u));top:calc(134 * var(--u));width:calc(378 * var(--u));height:calc(566 * var(--u));
  border-radius:calc(14 * var(--u));overflow:hidden;background:#0d0c0b}
.cam-vf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:none}
.cam-vf img:not(.vf-7){opacity:0}   /* without motion: the finished frame */
.vf-guides{position:absolute;inset:0;background:
  linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.35) 0 calc(33.33% + .5px),transparent 0 calc(66.67% - .5px),rgba(255,255,255,.35) 0 calc(66.67% + .5px),transparent 0),
  linear-gradient(transparent calc(33.33% - .5px),rgba(255,255,255,.35) 0 calc(33.33% + .5px),transparent 0 calc(66.67% - .5px),rgba(255,255,255,.35) 0 calc(66.67% + .5px),transparent 0)}
.vf-corners{position:absolute;inset:calc(8 * var(--u));--c:rgba(243,242,242,.75);--a:calc(14 * var(--u));--s:1.5px;
  background:linear-gradient(var(--c),var(--c)) 0 0/var(--a) var(--s),linear-gradient(var(--c),var(--c)) 0 0/var(--s) var(--a),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--a) var(--s),linear-gradient(var(--c),var(--c)) 100% 0/var(--s) var(--a),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--a) var(--s),linear-gradient(var(--c),var(--c)) 0 100%/var(--s) var(--a),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--a) var(--s),linear-gradient(var(--c),var(--c)) 100% 100%/var(--s) var(--a);
  background-repeat:no-repeat;filter:drop-shadow(0 0 2px rgba(0,0,0,.5))}
.vf-snap{--c:var(--amber);--a:calc(26 * var(--u));--s:2.5px;opacity:0}
.vf-cross{position:absolute;left:50%;top:50%;width:calc(26 * var(--u));height:calc(26 * var(--u));translate:-50% -50%;opacity:.8;
  background:linear-gradient(#f3f2f2,#f3f2f2) 50% 50%/calc(7 * var(--u)) 1px no-repeat,linear-gradient(#f3f2f2,#f3f2f2) 50% 50%/1px calc(7 * var(--u)) no-repeat}
.hud{position:absolute;display:grid;gap:calc(3 * var(--u));padding:calc(6 * var(--u)) calc(8 * var(--u));text-shadow:0 0 3px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.6)}
.hud-tl{left:calc(10 * var(--u));top:calc(14 * var(--u))}
.hud-tr{right:calc(10 * var(--u));top:calc(14 * var(--u));text-align:right}
.hud-bl{left:calc(10 * var(--u));bottom:calc(14 * var(--u))}
.hud-br{right:calc(10 * var(--u));bottom:calc(14 * var(--u));text-align:right}
.hud-k{font-size:max(9px,calc(10 * var(--u)));letter-spacing:.14em}
.hud-v{font-size:max(9px,calc(11 * var(--u)))}
.hud-auto{color:var(--c-muted)}
.vf-zoom{position:absolute;left:50%;bottom:calc(20 * var(--u));translate:-50% 0;white-space:nowrap;font-size:max(9px,calc(9 * var(--u)));color:var(--c-muted);text-shadow:0 0 3px rgba(0,0,0,.7)}
.vf-zoom b{font-weight:400;font-size:max(12px,calc(15 * var(--u)));color:var(--c-text)}
.vf-flash{position:absolute;inset:0;background:#fff;opacity:0}
.cam-controls{position:absolute;left:0;right:0;top:calc(737 * var(--u))}
.cam-actions{display:flex;align-items:center;justify-content:space-between;height:calc(48 * var(--u));padding:0 calc(38 * var(--u))}
.cam-pill{position:relative;display:grid;grid-template-columns:repeat(2,1fr);width:calc(180 * var(--u));height:calc(42 * var(--u));align-items:center;text-align:center;
  border:1px solid var(--c-hair);border-radius:99px;font-size:max(9px,calc(11 * var(--u)));letter-spacing:.16em;color:var(--c-muted);white-space:nowrap}
html[lang=en] .cam-pill{text-transform:uppercase}
html[lang=vi] .cam-pill{letter-spacing:.04em}
.pill-on{color:var(--amber);position:relative}
.pill-on::before{content:"";position:absolute;left:calc(3 * var(--u));right:calc(1 * var(--u));top:50%;height:calc(34 * var(--u));translate:0 -50%;border:1.5px solid var(--amber);border-radius:99px;
  background:repeating-linear-gradient(90deg,rgba(225,173,102,.16) 0 1px,transparent 1px calc(3 * var(--u)))}
.cam-bottom{position:relative;height:calc(90 * var(--u))}
.cam-recent{position:absolute;left:calc(30 * var(--u));top:calc(21 * var(--u));width:calc(48 * var(--u));height:calc(48 * var(--u));border-radius:calc(4 * var(--u));overflow:hidden;background:#2a2826;border:1px solid var(--c-hair)}
.cam-recent img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:none}
.cam-recent .rc-old{opacity:0}
.cam-shutter{position:absolute;left:50%;top:50%;width:calc(76 * var(--u));height:calc(76 * var(--u));translate:-50% -50%;border-radius:50%;border:2px solid var(--c-text);
  background:radial-gradient(circle,var(--c-text) calc(31 * var(--u)),transparent calc(31 * var(--u) + .5px))}
.cam-can{position:absolute;right:calc(38 * var(--u));top:calc(16 * var(--u));width:calc(30 * var(--u));height:calc(58 * var(--u));
  background:linear-gradient(#111 0 0) 50% 0/calc(10 * var(--u)) calc(5 * var(--u)) no-repeat,linear-gradient(#2b2b2b 0 0) 50% calc(5 * var(--u))/100% calc(5 * var(--u)) no-repeat,linear-gradient(#2b2b2b 0 0) 50% 100%/100% calc(5 * var(--u)) no-repeat}
.can-body{position:absolute;left:calc(2 * var(--u));right:calc(2 * var(--u));top:calc(10 * var(--u));bottom:calc(5 * var(--u));border-radius:1px;opacity:0}
.can-1{background:linear-gradient(90deg,#f3e7c8,#dfe8ee 45%,#3f8fd8 80%,#1d5aa5)}
.can-2{background:linear-gradient(90deg,#dff0ee,#6fb7bd 55%,#1f6f7b)}
.can-3{background:linear-gradient(90deg,#f6d9a3,#e59a3b 55%,#9a4b16)}
.can-4{background:linear-gradient(90deg,#efe9df,#b7c2c9 50%,#c0392b 85%,#7d1f16);opacity:1}
.cam-shot{position:absolute;left:calc(12 * var(--u));top:calc(134 * var(--u));width:calc(378 * var(--u));height:calc(566 * var(--u));border-radius:calc(14 * var(--u));overflow:hidden;opacity:0;pointer-events:none}
.cam-shot img{width:100%;height:100%;object-fit:cover;background:none}
.cam-sheet{position:absolute;left:0;right:0;bottom:0;height:calc(268 * var(--u));background:#2d2b2b;border-radius:calc(22 * var(--u)) calc(22 * var(--u)) 0 0;
  transform:translateY(105%);box-shadow:0 -10px 30px rgba(0,0,0,.35)}
.sheet-handle{display:block;width:calc(36 * var(--u));height:calc(4 * var(--u));min-height:3px;margin:calc(8 * var(--u)) auto 0;border-radius:99px;background:rgba(243,242,242,.25)}
.sheet-head{display:grid;gap:calc(2 * var(--u));padding:calc(10 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u));border-bottom:1px solid var(--c-hair)}
.sheet-kind{font-size:max(9px,calc(10 * var(--u)));letter-spacing:.14em;color:var(--amber)}
.sheet-name{font-size:max(12px,calc(20 * var(--u)))}
.sheet-strip{overflow:hidden;padding:calc(16 * var(--u)) 0}
.sheet-track{display:flex;width:calc(492 * var(--u));transform:translateX(-34.15%)}
.sw{flex:none;width:calc(82 * var(--u));display:grid;justify-items:center;gap:calc(6 * var(--u))}
.sw-img{position:relative;width:calc(64 * var(--u));height:calc(64 * var(--u));border-radius:calc(4 * var(--u));overflow:hidden;outline:1px solid rgba(255,255,255,.2);outline-offset:-1px}
.sw-img img{width:100%;height:100%;object-fit:cover;background:none}
.sw-ring{position:absolute;inset:0;border:2px solid var(--amber);border-radius:inherit;opacity:0}
.sw-chip{position:absolute;right:calc(3 * var(--u));top:calc(3 * var(--u));padding:0 calc(5 * var(--u));height:calc(16 * var(--u));min-height:12px;display:grid;place-items:center;
  border-radius:99px;background:rgba(28,26,24,.72);border:1px solid rgba(255,255,255,.2);font:600 max(9px,calc(9 * var(--u))) var(--mono);letter-spacing:.04em}
.sw-name{display:grid;width:calc(78 * var(--u));font-size:max(9px,calc(11.5 * var(--u)));white-space:nowrap}
.sw-name>*{grid-area:1/1;text-align:center;overflow:hidden;text-overflow:ellipsis}
.sw-dim{color:var(--c-muted)}.sw-on{color:var(--amber);opacity:0}
.sw.is-on .sw-ring,.sw.is-on .sw-on{opacity:1}.sw.is-on .sw-dim{opacity:0}
.cam-panel{position:absolute;left:calc(12 * var(--u));right:calc(12 * var(--u));bottom:calc(10 * var(--u));height:calc(396 * var(--u));display:grid;grid-template-rows:auto 1fr;
  background:rgba(30,28,27,.96);border-radius:calc(22 * var(--u));transform:translateY(110%);box-shadow:0 -10px 30px rgba(0,0,0,.35)}
.pg{grid-area:2/1;opacity:0;padding:calc(6 * var(--u)) calc(16 * var(--u)) 0}
.pg-grid{display:grid;grid-template-columns:repeat(3,1fr);row-gap:calc(14 * var(--u));align-content:start;padding-top:calc(14 * var(--u))}
.pg-grid p{display:grid;justify-items:center;gap:calc(8 * var(--u))}
.pg-grid i{display:grid;place-items:center;width:calc(54 * var(--u));height:calc(54 * var(--u));border-radius:50%;background:rgba(255,255,255,.07)}
.pg-grid span{font-size:max(9px,calc(10 * var(--u)));letter-spacing:.14em;color:var(--c-muted);white-space:nowrap}
.pg-head{display:flex;align-items:center;justify-content:space-between;height:calc(44 * var(--u))}
.pg-head span{font-size:max(9px,calc(10.5 * var(--u)));letter-spacing:.18em}
.pg-head .ci{width:calc(16 * var(--u));height:calc(16 * var(--u))}
.wb-a{display:grid;place-items:center;width:calc(34 * var(--u));height:calc(34 * var(--u));border-radius:50%;border:1.5px solid rgba(255,255,255,.2);font-weight:500;font-size:max(10px,calc(15 * var(--u)))}
.pg-head>b:empty{width:calc(16 * var(--u))}
.wb-read{display:grid;justify-items:center;gap:calc(2 * var(--u));margin-top:calc(4 * var(--u))!important}
.wb-big{font-weight:300;font-size:max(16px,calc(30 * var(--u)));white-space:nowrap}
.wb-cap{font-size:max(9px,calc(11 * var(--u)));color:var(--c-muted)}
.wb-choices{display:grid;grid-template-columns:repeat(7,1fr);margin-top:calc(10 * var(--u))}
.wb-c{position:relative;display:grid;justify-items:center;gap:calc(8 * var(--u))}
.wb-c>*{grid-column:1}
.wb-c>b,.wb-c>svg{grid-row:1;height:calc(24 * var(--u));display:grid;place-items:center;font-weight:600;font-size:max(9px,calc(12 * var(--u)))}
.wb-c>i{grid-row:2;width:calc(10 * var(--u));height:calc(10 * var(--u));min-width:7px;min-height:7px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);box-sizing:border-box}
.wb-c>.on{color:var(--amber);opacity:0}
.wb-c>.dot-on{border-color:var(--amber);background:radial-gradient(circle,var(--amber) 45%,transparent 50%);opacity:0}
.wb-k>.on,.wb-k>.dot-on{opacity:1}
.wb-kel{display:flex;align-items:center;gap:calc(8 * var(--u));margin-top:calc(14 * var(--u));font-size:max(9px,calc(12 * var(--u)))}
.wb-kel>b{display:grid;place-items:center;width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:50%;border:1px solid rgba(255,255,255,.2);font-weight:400}
.kel-track{position:relative;flex:1 1 0;min-width:0;height:calc(4 * var(--u));min-height:3px;border-radius:99px;
  background:linear-gradient(90deg,#6f8fd8,#b8c9ee 35%,#f3f2f2 40%,#f1d9a8 50%,#e6a54a)}
.kel-pos,.gr-pos{position:absolute;inset:0}
.kel-track,.gr-track{overflow-x:clip;overflow-clip-margin:calc(10 * var(--u))}  /* the knobs' wrappers slide past the track; only the knob shows */
.kel-pos{transform:translateX(60%)}.gr-pos{transform:translateX(75%)}
.kel-knob{position:absolute;left:0;top:50%;width:calc(16 * var(--u));height:calc(16 * var(--u));margin:calc(-8 * var(--u)) 0 0 calc(-8 * var(--u));border-radius:50%;background:#f3f2f2;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.kel-v{width:calc(56 * var(--u));text-align:right;color:var(--amber);font-size:max(10px,calc(14 * var(--u)))}
.wb-pad{position:relative;height:calc(118 * var(--u));margin-top:calc(14 * var(--u));border-radius:calc(6 * var(--u));
  background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) 50% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) 0 50%/100% 1px no-repeat,
    linear-gradient(135deg,rgba(96,160,120,.25),rgba(120,120,200,.18),rgba(210,120,160,.25))}
.pad-knob{position:absolute;left:calc(50% + 4 / 9 * 50%);top:calc(50% + 5 / 9 * 50%);width:calc(16 * var(--u));height:calc(16 * var(--u));margin:calc(-8 * var(--u)) 0 0 calc(-8 * var(--u));border-radius:50%;border:2px solid #f3f2f2;box-sizing:border-box}
.wb-shift{display:flex;justify-content:space-between;margin-top:calc(6 * var(--u))!important;font-size:max(9px,calc(11 * var(--u)));color:var(--c-muted)}
.shift-v{color:var(--amber);white-space:pre}
.gr-row{display:flex;justify-content:space-between;margin-top:calc(18 * var(--u))!important;font-size:max(9px,calc(13 * var(--u)))}
.gr-v{color:var(--amber)}
.gr-track{position:relative;display:block;height:calc(4 * var(--u));min-height:3px;margin-top:calc(14 * var(--u));border-radius:99px;background:rgba(255,255,255,.2)}
.gr-fill{position:absolute;inset:0;border-radius:inherit;background:var(--amber);transform-origin:left center;transform:scaleX(.75)}
.gr-knob{position:absolute;left:0;top:50%;width:calc(16 * var(--u));height:calc(16 * var(--u));margin:calc(-8 * var(--u)) 0 0 calc(-8 * var(--u));border-radius:50%;background:#f3f2f2}
.gr-seg{display:grid;grid-template-columns:1fr 1fr;margin-top:calc(10 * var(--u))!important;border:1px solid rgba(255,255,255,.2);border-radius:calc(8 * var(--u));overflow:hidden;font-size:max(9px,calc(12 * var(--u)));text-align:center}
.gr-seg span{padding:calc(8 * var(--u)) 0;color:var(--c-muted)}
.gr-seg .on{background:rgba(255,255,255,.1);color:var(--c-text)}

/* 2 · Develop */
.ch-develop{--ground:var(--safelight);--prev-ground:var(--plastic);--ink:#ffe9dc;--muted:#f1c9b8;--accent:#ffb070}
/* Above the light-leak join, so the phone isn't veiled at the start of the pin. */
@media (min-width:900px){ .ch-develop .pin{grid-template-areas:"copy phone" "compare phone"} .ch-develop .copy{grid-area:copy} .ch-develop .compare{grid-area:compare} .ch-develop .phone{grid-area:phone} }

/* The phone: Fonder's Developing screen as live HTML. Its insides are sized in --u, one point of a
   402-pt-wide iPhone screen (the screen is a size container), with a 9px floor on small text. */
.phone{--pw:min(270px,70vw);justify-self:center;position:relative;width:var(--pw);padding:calc(var(--pw) * .035);
  border-radius:calc(var(--pw) * .17);background:#0a0908;
  box-shadow:0 0 0 1.5px #5a524b,0 0 0 3px #1d1a18,0 30px 70px rgba(0,0,0,.6),0 0 90px rgba(255,90,40,.12)}
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#3d3733}
.phone::before{left:-4px;top:20%;height:9%;box-shadow:0 calc(var(--pw) * .25) 0 #3d3733}
.phone::after{right:0;width:0;top:26%;height:14%;box-shadow:2.5px 0 0 1.5px #3d3733}
.phone-screen{container-type:inline-size;position:relative;aspect-ratio:402/874;border-radius:calc(var(--pw) * .135);overflow:hidden;background:#1c1a18}
.app{--u:calc(100cqw / 402);--app-amber:#dca760;--app-muted:#b3aca3;--app-dim:#6a645d;
  position:absolute;inset:0;padding:calc(66 * var(--u)) calc(20 * var(--u)) 0;color:#f1ede7;font-family:var(--body);line-height:1.3}
.app p{margin:0}
.app::before{content:"";position:absolute;top:calc(11 * var(--u));left:50%;width:calc(124 * var(--u));height:calc(36 * var(--u));translate:-50% 0;border-radius:99px;background:#000}
.app svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.app-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:calc(56 * var(--u))}
.app-back{display:flex;white-space:nowrap;align-items:center;gap:calc(8 * var(--u));font-size:max(9px,calc(16 * var(--u)))}
.app-back svg{width:calc(9 * var(--u));height:calc(15 * var(--u))}
.app-title{display:grid;justify-items:center;font-size:max(10px,calc(18 * var(--u)))}
.app-status,.n-stack,.app-count,.app-meta,.app-foot{display:grid}
.app-status>*,.n-stack>*,.app-count>*,.app-meta>*,.app-foot>*{grid-area:1/1}
.app-status{justify-items:center;font:500 max(9px,calc(10 * var(--u))) var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--app-amber);white-space:nowrap}
.app-progress{display:flex;justify-content:space-between;align-items:flex-end;margin-top:calc(30 * var(--u))}
.app-count{align-items:baseline;font-size:calc(66 * var(--u));font-weight:400;line-height:.9;letter-spacing:-.03em}
.app-count small{font-size:max(9px,calc(16 * var(--u)));letter-spacing:0;margin-left:calc(8 * var(--u));color:var(--app-muted)}
.c-dev small{color:#f1ede7}
.app-meta{text-align:right;justify-items:end;font-size:max(9px,calc(15 * var(--u)));color:var(--app-muted);line-height:1.45}
.app-tabs{position:relative;display:flex;gap:calc(26 * var(--u));margin-top:calc(16 * var(--u));padding-bottom:calc(14 * var(--u));
  font:500 max(9px,calc(12 * var(--u))) var(--body);letter-spacing:.22em;text-transform:uppercase}
.tab{display:grid}.tab>*{grid-area:1/1}
.tab-dim{color:#57524c}.tab-on{color:var(--app-amber)}
.app-bar{position:absolute;left:0;right:0;bottom:0;height:calc(3 * var(--u));min-height:2px;background:#3a3633;border-radius:2px;overflow:hidden}
.app-bar-fill{position:absolute;inset:0;background:var(--app-amber);transform-origin:left center}
.app-note{display:flex;gap:calc(10 * var(--u));align-items:flex-start;margin-top:calc(16 * var(--u))!important;font-size:max(9px,calc(14 * var(--u)));color:#d9d3cb}
.app-note svg{flex:none;width:calc(12 * var(--u));height:calc(16 * var(--u));margin-top:.1em;color:var(--app-muted)}
.app-sheet{display:grid;gap:calc(10 * var(--u));margin:calc(14 * var(--u)) calc(-6 * var(--u)) 0}
.app-strip{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(6 * var(--u));padding:calc(16 * var(--u)) calc(8 * var(--u));background:#0f0e0d;border-radius:2px}
.app-strip::before,.app-strip::after{content:"";position:absolute;left:calc(4 * var(--u));right:calc(4 * var(--u));height:calc(4 * var(--u));
  background:repeating-linear-gradient(90deg,#34302d 0 calc(8 * var(--u)),transparent 0 calc(14 * var(--u)))}
.app-strip::before{top:calc(5 * var(--u))}.app-strip::after{bottom:calc(5 * var(--u))}
.app-frame{position:relative}
.app-slot{display:grid;place-items:center;aspect-ratio:3/2;background:#1f1d1b;border-radius:2px;color:#5f5a54;font-size:max(9px,calc(15 * var(--u)))}
.app-frame img{position:absolute;left:0;top:0;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:2px;background:none}
.app-fn{display:grid;margin-top:calc(5 * var(--u));font:500 max(9px,calc(10 * var(--u)))/1 var(--mono);letter-spacing:.08em}
.app-fn>*{grid-area:1/1}.fn-dim{color:#5f5a54}.fn-on{color:var(--app-amber)}
.app-foot{position:absolute;left:0;right:0;bottom:0;height:calc(96 * var(--u));place-items:center;padding:0 calc(20 * var(--u)) calc(14 * var(--u));
  background:#1c1a18;border-top:1px solid #2f2c29;font-size:max(9px,calc(15 * var(--u)));color:var(--app-muted)}
.f-done{display:flex;gap:calc(10 * var(--u));width:100%;height:calc(50 * var(--u))}
.f-icon{display:grid;place-items:center;flex:none;width:calc(50 * var(--u));border:1px solid #3a3633;border-radius:calc(4 * var(--u));color:#e8e3dc}
.f-icon svg{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.f-btn{flex:1;display:grid;place-items:center;border:1px solid var(--app-amber);border-radius:calc(4 * var(--u));color:var(--app-amber);font-weight:500;font-size:max(10px,calc(16 * var(--u)))}
/* Without motion (no JS, Reduce Motion) the screen shows its finished state: developed, all 12 photos. */
.st-dev,.c-dev,.m-dev,.n-dev,.f-dev,.fn-dim,.app-tabs{opacity:0}
@media (min-width:900px){ .phone{--pw:clamp(240px,calc((100svh - 150px) * .45),300px)} }
.compare{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:6px;--split:50%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare-after{clip-path:inset(0 0 0 var(--split))}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare::after{content:"";position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.5)}
/* The grip on the divider: ◂ ▸ so the slider reads as draggable at a glance. Decorative and
   inert (empty content, pointer-events none — the input keeps every pointer event). z-index
   lifts it above the two absolutely-positioned photos, which otherwise paint over a ::before. */
.compare::before{content:"";position:absolute;z-index:2;pointer-events:none;top:50%;left:var(--split);width:34px;height:34px;translate:-50% -50%;border-radius:50%;
  background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9.5 7 4.5 12l5 5zM14.5 7l5 5-5 5z'/%3E%3C/svg%3E") center/20px no-repeat;
  border:1.5px solid rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.compare:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.compare-tag{position:absolute;bottom:10px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.55);color:#fff;padding:4px 8px;border-radius:4px}
.compare-tag.before{left:10px}.compare-tag.after{right:10px}

/* 2b · Film Roll: the roll counter counting down as the section passes, no pin. */
.ch-roll{--ground:var(--charcoal);--prev-ground:var(--safelight);--accent:var(--amber)}
.ch-roll .pin{justify-items:start;gap:28px;min-height:0;padding:72px 0 64px}
@media (min-width:900px){ .ch-roll .pin{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center} }
.roll-visual{display:grid;gap:14px;justify-items:start}
@media (min-width:900px){ .roll-visual{justify-self:center} }
.roll-count{display:flex;align-items:baseline;gap:14px;margin:0}
.roll-num{font:500 clamp(64px,16vw,110px)/0.9 var(--mono);letter-spacing:.04em;color:var(--amber);
  font-variant-numeric:tabular-nums;min-width:2ch;text-shadow:0 0 22px rgba(225,173,102,.35)}
.roll-num.is-low{color:var(--led);text-shadow:0 0 22px rgba(255,138,30,.45)}
.roll-cap{font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.roll-develop{display:inline-flex;align-items:center;min-height:40px;margin:0;padding:0 20px;border:1.5px solid var(--amber);border-radius:99px;
  color:var(--amber);font:500 13px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  background:repeating-linear-gradient(90deg,rgba(225,173,102,.14) 0 1px,transparent 1px 8px)}
@keyframes roll-pulse{50%{opacity:.45}}
html.motion .roll-num.is-low{animation:roll-pulse .9s ease-in-out infinite}
html.motion .roll-develop{opacity:.25}
html.motion .roll-develop.is-on{opacity:1}

/* 3 · Prints */
.ch-prints{--ground:var(--paper);--prev-ground:var(--charcoal);--ink:var(--paper-ink);--muted:#5d5246;--accent:var(--pencil)}
.envelope{display:none}
.fan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.print-card{background:#fbf7ef;padding:8px 8px 34px;box-shadow:0 8px 20px rgba(60,40,20,.25);position:relative;transform:rotate(calc((var(--i) - 2.5) * 1.6deg))}
.print-card img{width:100%}  /* each print keeps its own ratio (width/height attributes), border intact */
.pencil{position:absolute;left:10px;bottom:6px;font:400 20px var(--hand);color:var(--pencil)}
.contact{margin:0;display:grid;gap:8px}
.contact img{width:100%;aspect-ratio:16/11}
.contact figcaption{font:400 20px var(--hand);color:var(--pencil)}

/* 3b · Recipes teaser: a light strip on the same paper, not pinned. */
.ch-recipes-teaser{--ground:var(--paper);--prev-ground:var(--paper);--ink:var(--paper-ink);--muted:#5d5246;--accent:var(--pencil)}
.ch-recipes-teaser .pin{justify-items:start;gap:14px;min-height:0;padding:64px 0 56px}
.ch-recipes-teaser h2{font-size:clamp(28px,5vw,48px)}
.rteaser-body{margin:0;color:var(--muted);max-width:52ch}
.rteaser-lines{list-style:none;margin:8px 0 2px;padding:0;display:grid;gap:8px}
.rteaser-lines li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rt-occ{font:400 22px var(--hand);color:var(--pencil)}
.rt-name{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8a6a3c}
.swatch-line{margin:4px 0 6px;display:flex;gap:5px}
.swatch-line i{width:26px;height:17px;border-radius:4px;border:1px solid rgba(31,26,20,.18)}

/* 3c · Diary teaser: same paper strip as the recipes teaser, entry cards from the diary itself. */
.ch-diary-teaser{--ground:var(--paper);--prev-ground:var(--paper);--ink:var(--paper-ink);--muted:#5d5246;--accent:var(--pencil)}
.ch-diary-teaser .pin{justify-items:start;gap:14px;min-height:0;padding:56px 0 56px}
.ch-diary-teaser h2{font-size:clamp(28px,5vw,48px)}
.diary-cards{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:12px;width:100%}
@media (min-width:800px){ .diary-cards{grid-template-columns:repeat(3,1fr)} }
.diary-cards a{display:grid;gap:4px;align-content:start;background:#fbf7ef;box-shadow:0 6px 16px rgba(60,40,20,.15);
  border-radius:4px;padding:14px 16px;text-decoration:none;color:var(--paper-ink)}
.dc-date{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8a6a3c}
.dc-title{font:600 17px/1.3 var(--display);letter-spacing:-.01em}

/* 4 · Ticket */
.ch-ticket{--ground:var(--paper);--prev-ground:var(--paper);--ink:var(--paper-ink);--muted:#5d5246;--accent:#9a6a2c}
.ch-ticket .pin{justify-items:center;gap:0;min-height:0;padding:72px 0 64px}  /* not pinned: no screen-tall box */
/* The ticket feeds out of this slot under the printer bar; the slot clips it until it's printed. */
.slot{margin-top:-9px;padding:0 14px 28px;overflow:hidden}
.printer{position:relative;z-index:3;width:min(92vw,420px);height:18px;border-radius:9px;background:#2b2724}
.ticket{width:min(88vw,380px);background:#fffdf7;color:var(--paper-ink);padding:26px 22px 30px;display:grid;gap:10px;text-align:center;
  box-shadow:0 12px 30px rgba(60,40,20,.25);
  -webkit-mask:radial-gradient(8px at 50% 100%,transparent 98%,#000) 50% 100%/18px 100% repeat-x;
  mask:radial-gradient(8px at 50% 100%,transparent 98%,#000) 50% 100%/18px 100% repeat-x}
.ticket-no{font:500 13px var(--mono);letter-spacing:.2em;color:#7a6d5e;margin:0}
.action-title{font:700 26px/1.1 var(--display);margin:6px 0 0}
.action-body{margin:0;color:#5d5246}
.action-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0 0}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:99px;background:var(--paper-ink);color:#fffdf7;text-decoration:none;font-weight:500;
  box-shadow:0 3px 0 #000;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
.btn-primary{background:#9a6a2c}

/* Language suggestion */
/* The bottom bars — the language suggestion and the analytics question (home/consent.js styles its
   own) — stack in one fixed column, so on a first visit both show without covering each other. */
.bars{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.bars>*{pointer-events:auto}
.lang-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:var(--paper);color:var(--paper-ink);padding:12px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.lang-bar p{margin:0;flex:1 1 180px}
.lang-bar a,.lang-bar button{min-height:40px;font:inherit}
.lang-bar button{background:none;border:0;color:var(--paper-ink);text-decoration:underline}

/* The pins' scroll lengths, reserved from the first paint while home.js loads (html.pins, set in the head);
   home.js drops the class in the same task that creates the pins, so nothing below moves. Keep in step
   with the `end` of each chapter's ScrollTrigger. */
html.pins #ch0 .pin{margin-bottom:45vh}
html.pins #ch1 .pin{margin-bottom:160vh}
html.pins #ch2 .pin{margin-bottom:120vh}
html.pins #ch3 .pin{margin-bottom:100vh}

/* Start states: only while motion runs (set in the head, taken off by home.js if it cannot run; never with no JS or Reduce Motion). */
html.motion .cam-vf img:not(.vf-1){opacity:0}
html.motion .cam-vf img.vf-1{opacity:1}
html.motion .cam-recent .rc-old{opacity:1}
html.motion .cam-recent .rc-new{opacity:0}
html.motion .can-4{opacity:0}
html.motion .can-1{opacity:1}
html.motion .sw.is-on .sw-ring,html.motion .sw.is-on .sw-on{opacity:0}
html.motion .sw.is-on .sw-dim{opacity:1}
html.motion .sw-0 .sw-ring,html.motion .sw-0 .sw-on{opacity:1}
html.motion .sw-0 .sw-dim{opacity:0}
html.motion .pg-grid{opacity:1}
html.motion .wb-sun>.on,html.motion .wb-sun>.dot-on{opacity:1}
html.motion .wb-k>.on,html.motion .wb-k>.dot-on{opacity:0}
html.motion .gr-fill{transform:scaleX(.3)}
html.motion :is(.kel-pos,.gr-pos,.sheet-track,.cam-sheet,.cam-panel){transform:none}  /* set by home.js in % */
html.motion .canister{transform:translateX(-120vw) rotate(-540deg)}
html.motion .leader{transform:scaleX(0)}
html.motion .ch-develop :is(.st-dev,.c-dev,.m-dev,.n-dev,.f-dev,.fn-dim,.app-tabs){opacity:1}
html.motion .ch-develop :is(.st-done,.c-done,.m-done,.n-done,.f-done,.fn-on,.tab-on,.app-frame img){opacity:0}
html.motion .ch-develop .app-tabs .tab-on.t-develop{opacity:1}
html.motion .app-bar-fill{transform:scaleX(0)}
html.motion .ticket{transform:translateY(-110%)}
html.motion .ch-ticket .pin{overflow:hidden}
html.motion .ch-prints .pin{overflow:hidden}
@media (min-width:700px){
  html.motion .envelope{display:block;position:absolute;inset:auto 0 0 0;height:40%;background:#d8c7a6;z-index:2}
}