@font-face { font-family:"Clash Display"; src:url(fonts/ClashDisplay-Bold.woff2) format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Clash Display"; src:url(fonts/ClashDisplay-Semibold.woff2) format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Clash Display"; src:url(fonts/ClashDisplay-Medium.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Familjen Grotesk"; src:url(fonts/FamiljenGrotesk-Regular.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Familjen Grotesk"; src:url(fonts/FamiljenGrotesk-Medium.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Familjen Grotesk"; src:url(fonts/FamiljenGrotesk-SemiBold.woff2) format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Familjen Grotesk"; src:url(fonts/FamiljenGrotesk-Italic.woff2) format("woff2"); font-weight:400; font-style:italic; font-display:swap; }

/* Noon values. scene.js rewrites these as the day goes by. */
:root {
  --sky:#F7E9C4; --page:#F7E9C4; --ink:#123F32; --accent:#EE552B; --panel:#FFF8E6; --glowcol:#7CF0DF;
  --head:"Clash Display","Helvetica Neue",Arial,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --body:"Familjen Grotesk","Helvetica Neue",Arial,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --zh:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif;
  color-scheme: light;
}
* { box-sizing:border-box; }
html { background:var(--page); -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--page); color:var(--ink); font:400 18px/1.5 var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.card h2, .desk h2, .names, .dates, #end .e1 { word-spacing:.12em; }
button, input { font:inherit; color:inherit; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- the fixed poster ---------- */
.stage { position:fixed; left:0; top:0; width:100vw; height:100vh; height:100svh; z-index:0; overflow:hidden; container-type:size; }
.frame { position:absolute; inset:0;
  --aw:max(100cqw, calc(100cqh * .66667)); --ah:calc(var(--aw) * 1.5);
  --ty:calc((100cqh - var(--ah)) / 2); --k:calc(var(--aw) / 1080); --u:calc(min(var(--aw), 106cqw) / 1080); }
@media (min-width:900px) {
  .stage:not(.cover) { width:calc(100svh * .66667); }
  .stage:not(.cover) .frame { --aw:min(100cqw, calc(100cqh * .66667)); }
}
.artbox { position:absolute; width:var(--aw); height:var(--ah); left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--sky) url(art/poster-1080-v2.jpg) center/cover no-repeat; }
.artbox svg { display:block; width:100%; height:100%; }
.grain { position:absolute; inset:0; background:url(grain.png) 0 0/256px 256px; pointer-events:none; opacity:.85; }

.hero { position:absolute; inset:0; pointer-events:none; text-align:center; color:var(--ink); }
.hero p, .hero h1 { margin:0; }
.h-top, .h-bot { position:absolute; left:0; right:0; }
.h-top { top:max(64px, calc(var(--ty) + 92 * var(--k))); }
.h-bot { top:calc(var(--ty) + 1384 * var(--k)); }
.h-top > *, .h-bot > * { position:absolute; left:0; right:0; }
.kicker { top:0; font:500 calc(21 * var(--u))/1 var(--body); letter-spacing:.42em; text-indent:.42em; text-transform:uppercase; }
.names { top:calc(36 * var(--u)); font:700 calc(120 * var(--u))/1 var(--head); letter-spacing:-.025em; white-space:nowrap; }
.names .amp { color:var(--accent); }
.sub { top:calc(176 * var(--u)); font:600 calc(27 * var(--u))/1 var(--head); letter-spacing:.2em; text-indent:.2em; text-transform:uppercase; }
.zh { top:calc(226 * var(--u)); font:700 calc(30 * var(--u))/1 var(--zh); letter-spacing:.5em; text-indent:.5em; }
.place { top:0; font:700 calc(164 * var(--u))/1 var(--head); letter-spacing:.05em; text-indent:.05em; }
.when { top:calc(172 * var(--u)); font:600 calc(27 * var(--u))/1 var(--head); letter-spacing:.24em; text-indent:.24em; text-transform:uppercase; color:var(--accent); }
.cue { top:calc(212 * var(--u)); font:500 calc(15 * var(--u))/1 var(--body); letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; opacity:.85; }
.ch { display:inline-block; overflow:hidden; vertical-align:top; line-height:1.04; }
.ch > span { display:inline-block; will-change:transform; }

/* ---------- page chrome ---------- */
.bar { position:fixed; top:0; left:0; right:0; z-index:20; display:flex; justify-content:flex-end; gap:6px; padding:calc(12px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)); pointer-events:none; }
.pill { pointer-events:auto; cursor:pointer; background:var(--panel); color:var(--ink); border:2px solid var(--ink); border-radius:999px; padding:7px 14px; min-height:44px;
  font:600 12px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; gap:7px; transition:transform .15s ease; }
.pill:hover { transform:translateY(-1px); }
.pill:active { transform:translateY(1px); }
.pill[aria-pressed="true"] { background:var(--ink); color:var(--panel); }
.bars { display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.bars i { width:3px; background:currentColor; height:4px; border-radius:1px; }
.snd-on .bars i { animation:eq 1s ease-in-out infinite; }
.snd-on .bars i:nth-child(2) { animation-delay:.2s; } .snd-on .bars i:nth-child(3) { animation-delay:.4s; }
@keyframes eq { 0%,100% { height:3px; } 50% { height:12px; } }

main { position:relative; z-index:2; pointer-events:none; }
.sec { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:0 16px calc(4svh + env(safe-area-inset-bottom, 0px)); }
.sec.s0 { min-height:100svh; padding-bottom:0; }
.desk { display:none; }
.card { pointer-events:auto; background:var(--panel); color:var(--ink); border:3px solid var(--ink); box-shadow:7px 7px 0 var(--accent);
  padding:22px 22px 24px; max-width:600px; width:100%; }
.eyebrow { margin:0 0 12px; font:600 12px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); display:flex; gap:10px; align-items:center; }
.eyebrow::before { content:""; width:22px; height:3px; background:currentColor; }
.card h2 { margin:0 0 12px; font:700 clamp(30px, 7.4vw, 46px)/1.02 var(--head); letter-spacing:-.025em; text-wrap:balance; }
.card p { margin:0 0 12px; font-size:18px; max-width:46ch; }
.card p:last-child { margin-bottom:0; }
.small { font-size:14px !important; opacity:.8; }
.tag { display:inline-block; border:2px solid currentColor; padding:3px 8px; font:600 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; margin-right:8px; vertical-align:2px; }
.row { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.btn { cursor:pointer; background:var(--ink); color:var(--panel); border:3px solid var(--ink); padding:13px 18px; min-height:48px; font:600 15px/1 var(--body); letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .12s ease, box-shadow .12s ease; box-shadow:4px 4px 0 var(--accent); }
.btn:hover { transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--accent); }
.btn:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--accent); }
.btn.ghost { background:transparent; color:var(--ink); }
.btn[disabled] { opacity:.5; cursor:default; }

.count { display:flex; align-items:baseline; gap:12px; margin:6px 0 4px; }
.count b { font:700 clamp(72px, 20vw, 132px)/.8 var(--head); letter-spacing:-.04em; color:var(--accent); font-variant-numeric:tabular-nums; }
.count span { font:600 16px/1.1 var(--head); letter-spacing:.14em; text-transform:uppercase; }
.dates { font:700 clamp(30px, 7.4vw, 46px)/1.02 var(--head); }
.list { list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px; }
.list li { display:flex; gap:12px; align-items:baseline; font-size:18px; }
.list li::before { content:""; flex:0 0 10px; height:10px; border-radius:50%; background:var(--accent); transform:translateY(-1px); }
.dots { display:grid; grid-template-columns:repeat(10, 1fr); gap:10px; margin:14px 0 16px; max-width:420px; }
.dots i { aspect-ratio:1; border-radius:50%; background:var(--ink); display:block; }
.dots i:last-child { background:var(--accent); box-shadow:0 0 0 4px var(--panel), 0 0 0 7px var(--accent); }
.pl20 { width:100%; height:auto; aspect-ratio:2/1; display:block; margin:0 0 8px; touch-action:pan-y; }
label { display:block; font:600 12px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; margin:0 0 8px; }
input[type=text] { width:100%; background:transparent; border:3px solid var(--ink); border-radius:0; padding:13px 14px; min-height:50px; font-size:18px; }
input[aria-invalid="true"] { border-color:var(--accent); animation:shake .35s; }
@keyframes shake { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
.msg { margin-top:14px; border:3px dashed var(--ink); padding:14px; font-size:17px; }
.msg[hidden] { display:none; }
.keep { display:grid; gap:10px; margin-top:6px; }
.keep a { display:flex; justify-content:space-between; gap:12px; align-items:baseline; text-decoration:none; border-top:2px solid var(--ink); padding:12px 0 2px; font:600 17px/1.2 var(--head); }
.keep a:hover { color:var(--accent); }
.keep small { font:400 13px/1.2 var(--body); opacity:.75; white-space:nowrap; }
.foot { text-align:center; padding:28px 16px calc(34px + env(safe-area-inset-bottom, 0px)); font-size:13px; opacity:.85; pointer-events:auto; }

/* ---------- wide screens: poster left, story right ---------- */
@media (min-width:900px) {
  main { margin-left:calc(100svh * .66667); padding:0 clamp(28px, 5vw, 84px); }
  .sec { justify-content:center; padding:0; }
  .desk { display:block; max-width:600px; pointer-events:auto; }
  .desk h2 { margin:0 0 18px; font:700 clamp(40px, 4.6vw, 70px)/1 var(--head); letter-spacing:-.03em; text-wrap:balance; }
  .desk p { margin:0 0 22px; font-size:20px; max-width:34ch; }
  .card { max-width:620px; padding:30px 32px 34px; box-shadow:9px 9px 0 var(--accent); }
  .card h2, .dates { font-size:clamp(34px, 3.4vw, 52px); }
  .foot { margin-left:calc(100svh * .66667); }
}

/* ---------- modes used to capture the poster, wallpapers and video ---------- */
html.mode-x main, html.mode-x .bar, html.mode-x .foot, html.mode-x .cue { display:none !important; }
html.mode-x body { overflow:hidden; }
html.mode-bare .hero, html.mode-bare .grain { display:none; }
html.mode-wall .hero .h-top { display:none; }
html.mode-wall .artbox { left:calc(50% - 70 * var(--k)); }

noscript .ns { position:fixed; inset:0; z-index:50; background:var(--sky); display:grid; place-items:center; padding:24px; text-align:center; }

@media (prefers-reduced-motion:reduce) {
  .btn, .pill { transition:none; }
  .snd-on .bars i { animation:none; height:8px; }
}

/* video capture only */
#vid20 { position:fixed; left:50%; top:14%; width:min(94vw, 860px); aspect-ratio:2/1; transform:translateX(-50%); z-index:5; pointer-events:none; opacity:0; }
#end { position:fixed; left:0; right:0; bottom:9%; z-index:6; text-align:center; color:var(--ink); pointer-events:none; padding:0 6vw; }
#end p { margin:0; }
#end .e1 { font:700 11.5vw/1 var(--head); letter-spacing:-.025em; }
#end .e2 { margin-top:2.4vw; font:600 3vw/1.2 var(--head); letter-spacing:.13em; text-indent:.13em; white-space:nowrap; text-transform:uppercase; }
#end .e3 { margin-top:3vw; font:700 3.6vw/1 var(--zh); letter-spacing:.5em; text-indent:.5em; }
#end .e4 { margin-top:5vw; font:600 3.6vw/1 var(--head); letter-spacing:.24em; text-indent:.24em; text-transform:uppercase; color:var(--accent); }

/* the pills step aside on the way down */
.bar { transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.bar.hide { transform:translateY(-130%); }
@media (prefers-reduced-motion:reduce) { .bar { transition:none; } }

/* night swim */
.swim { position:relative; min-height:175svh; pointer-events:none; }
.swim.static { min-height:100svh; }
.swim-in { position:sticky; top:0; height:100svh; overflow:hidden; pointer-events:auto; touch-action:pan-y; user-select:none; -webkit-user-select:none;
  background:radial-gradient(120% 90% at 50% 62%, #07303a 0%, #04141c 56%, #020a10 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); }
.swim-in canvas#swim3d { position:absolute; inset:0; width:100%; height:100%; display:block; }
.swim-in .pl20 { position:absolute; left:50%; top:46%; width:min(86%, 520px); transform:translate(-50%, -50%); margin:0; }
.swim-ui { position:absolute; left:0; right:0; bottom:0; padding:64px 22px calc(9svh + env(safe-area-inset-bottom, 0px)); background:linear-gradient(to bottom, rgba(2,10,16,0), rgba(2,10,16,.72) 55%); color:#E6F2EC; pointer-events:none; }
.swim-ui .eyebrow { color:#7CF0DF; }
.swim-ui h2 { margin:0 0 10px; font:700 clamp(30px, 7.4vw, 46px)/1.02 var(--head); letter-spacing:-.025em; word-spacing:.12em; text-wrap:balance; max-width:14em; }
.swim-sub { margin:0; font-size:16px; opacity:.82; max-width:38ch; }
@media (min-width:900px) { .swim-ui { padding:0 32px calc(8svh) ; } .swim-ui h2 { font-size:clamp(34px, 3.4vw, 52px); } }