/* Kasane 3.0 preview. Built on Enchant's Everyday system (enchant.co, 2026-09-24) and the app's Florens tokens:
   sand grounds, stone ink, obsidian as the base accent, pill actions, no ornament.
   Kasane's own hue is verdant, used as a whole-section moment. Type is Inter until Söhne is licensed for kasanelife.com:
   swap --sans and --mono and nothing else changes. */
:root{
  --page:#f9f2e8;        /* Florens light sand */
  --sand:#f0e9df;        /* Florens sand */
  --sand-deep:#e9dfca;   /* Florens dark sand */
  --ink:#33312c;         /* stone */
  --night:#151515;       /* obsidian */
  --muted:#6d675c;       /* AA on sand */
  --on-dark:#f0e9df;
  --dim-dark:#aaa398;
  --line:#33312c26;
  --line-dark:#f0e9df24;
  --verdant:#275323;     /* Kasane's hue: the Verdant app icon, the app's primary accent */
  --verdant-soft:#bdd1b3;
  --sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --gutter:clamp(20px,4vw,56px);
  --max:1320px;
  --section:clamp(96px,12vw,176px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --reveal:.9s;          /* one duration for every arrival */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--page);color:var(--ink);font:400 17px/1.6 var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure,ol,ul{margin:0}
h1,h2,h3,.band-line{text-wrap:balance}
ol,ul{padding:0;list-style:none}
button,input{font:inherit;color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--night);outline-offset:4px;border-radius:4px}
.dark a:focus-visible,.dark button:focus-visible,.over a:focus-visible,.day a:focus-visible,.together a:focus-visible{outline-color:var(--on-dark)}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:12px;z-index:200;background:var(--night);color:var(--on-dark);padding:10px 14px;border-radius:8px}
.skip:focus{left:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}

/* ---------- Type: five sizes and a mono for times ---------- */
.display{font-size:clamp(52px,8.2vw,128px);font-weight:430;letter-spacing:-.04em;line-height:.98}
.h2{font-size:clamp(40px,5.2vw,76px);font-weight:430;letter-spacing:-.035em;line-height:1.02}
h3{font-size:clamp(22px,1.9vw,27px);font-weight:450;letter-spacing:-.015em;line-height:1.2}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:36ch}
.mono{font:400 13px/1.4 var(--mono);letter-spacing:.01em}
p+p{margin-top:18px}

/* ---------- Actions: pills ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border:0;border-radius:999px;background:var(--night);color:var(--page);font:500 16px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.button:hover{background:var(--ink);box-shadow:0 10px 26px #15151526}
.button:active{transform:scale(.98)}
.button.light{background:var(--page);color:var(--night)}
.button.light:hover{background:#fff}
.button.small{min-height:42px;padding:10px 18px;font-size:14px}
.text-link{display:inline-flex;min-height:44px;align-items:center;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.text-link:hover{text-decoration-thickness:2px}
.link-on-dark{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark);font-size:16px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.link-on-dark:hover{color:#fff;text-decoration-thickness:2px}

/* ---------- Navigation ---------- */
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:88px}
.nav.over{position:absolute;z-index:20;inset:0 0 auto;color:#fff}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:500;letter-spacing:-.035em;text-decoration:none;min-height:44px}
.wordmark .mark{box-shadow:0 2px 10px #15151526}
/* The k, from the app icon (Kasane/AppIcons/AppIcon.icon). Tile and letter colors follow the scene:
   ocean is the primary (cream k on #044056); cream inverts it over photos; moss and night for green and dark grounds. */
.mark{--s:32px;display:inline-grid;place-items:center;flex-shrink:0;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .2237);background:var(--tile);color:var(--glyph);overflow:hidden}
.mark svg{width:100%;height:100%;display:block}
.mark.ocean{--tile:#044056;--glyph:#f9f2e8}
.mark.cream{--tile:#f9f2e8;--glyph:#044056}
.mark.moss{--tile:var(--verdant);--glyph:#f9f2e8}
.mark.night{--tile:#151515;--glyph:#f9f2e8}
.nav nav{display:flex;align-items:center;gap:30px;font-size:15px}
.nav-link{text-decoration:none}
.nav-link:hover{text-decoration:underline;text-underline-offset:5px}

/* ---------- The day: film, title, and a dissolve to night ---------- */
.day{position:relative;height:130vh;height:130svh;background:var(--night)}
.day-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:#fff;--p:0;--title:1;--film:1}
.day-film{position:absolute;inset:0;opacity:var(--film);transform:scale(calc(1 + var(--p) * .06));transform-origin:50% 60%}
.day-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%);opacity:0;transition:opacity 1.6s ease}
.day-film img.on{opacity:1;animation:drift 9s linear both}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.1) translate3d(-1.2%,-1%,0)}}
.day-shade{position:absolute;inset:0;opacity:var(--film);background:linear-gradient(180deg,#15151599 0%,#15151500 26%,#15151514 50%,#151515d9 100%),linear-gradient(90deg,#15151566 0%,#15151500 55%)}
.day-title{position:absolute;left:0;right:0;bottom:clamp(88px,11vh,128px);opacity:var(--title);transform:translateY(calc((1 - var(--title)) * -6vh))}
.day-title h1{max-width:9.4ch;font-size:clamp(52px,7.6vw,124px)}
.day-title .lede{margin-top:24px;max-width:40ch;color:#f0e9dfeb}
.on-phone{display:none}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px}
.day-entry{position:absolute;left:0;right:0;bottom:clamp(88px,11vh,128px);display:flex;justify-content:flex-end;pointer-events:none;opacity:var(--title)}
/* The moment's journal line, raised off the photo like a note from the app. */
.entry-card{display:flex;align-items:center;gap:14px;max-width:360px;padding:14px 18px 14px 14px;border-radius:22px;background:#fffdf8eb;color:var(--night);box-shadow:0 1px 0 #ffffff inset,0 24px 50px -22px #15151599,0 6px 14px -8px #1515154d;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform:translateY(0);transition:opacity .32s var(--ease),transform .32s var(--ease)}
.entry-card.swap{opacity:0;transform:translateY(8px)}
.entry-emoji{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:14px;background:var(--sand);font-size:22px}
.entry-text{display:grid;gap:3px;font-size:16px;line-height:1.35;font-weight:500}
.entry-meta{font:400 12px/1.2 var(--mono);color:var(--muted);letter-spacing:.02em}


/* ---------- Pieces: one statement, lit word by word ---------- */
.dark{background:var(--night);color:var(--on-dark)}
.pieces{height:220vh;height:220svh}
.pieces-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center}
.statement{font-size:clamp(30px,3.7vw,54px);font-weight:400;letter-spacing:-.025em;line-height:1.22;max-width:24ch;text-wrap:pretty}
.statement-end{display:block;margin-top:.5em}
.statement .w{opacity:.2;transition:opacity .35s var(--ease)}
.statement .w.lit{opacity:1}

/* ---------- Shared: two columns, copy and a phone ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:center}
.split.flip .split-copy{order:2}
.split-copy .lede{margin-top:28px}
.split-copy .lede+p{margin-top:22px;max-width:44ch}
.split-visual{display:flex;justify-content:center}

/* The phone: an iPhone 17 Pro outline around a real simulator screenshot. */
.phone{--w:clamp(250px,23vw,330px);position:relative;width:var(--w);padding:calc(var(--w) * .032);border-radius:calc(var(--w) * .17);background:#151515;box-shadow:0 0 0 1px #ffffff14 inset,0 40px 80px -30px #15151573,0 18px 30px -18px #1515154d;flex-shrink:0}
.phone img{width:100%;border-radius:calc(var(--w) * .14);background:var(--page)}
.phone::after{content:'';position:absolute;top:calc(var(--w) * .052);left:50%;width:calc(var(--w) * .29);height:calc(var(--w) * .085);transform:translateX(-50%);border-radius:99px;background:#151515}

/* ---------- One place ---------- */
.journal{padding-block:var(--section)}
.day-list{margin-top:44px;border-top:1px solid var(--line);max-width:520px}
.day-list li{display:grid;grid-template-columns:88px 112px 1fr;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);font-size:16px}
.day-list .mono{color:var(--muted)}
.source{justify-self:start;font-size:13px;line-height:1;padding:7px 11px;border-radius:999px;background:var(--sand-deep);color:var(--ink);white-space:nowrap}

/* ---------- Together: the verdant moment ---------- */
.together{padding-block:var(--section);background:var(--verdant);color:var(--on-dark)}
.together .lede{color:#f0e9df}
.together .split-copy p:not(.lede){color:#f0e9dfc7}
.pair{position:relative;min-height:calc(clamp(250px,23vw,330px) * 2.24)}
.pair .phone{position:absolute}
/* The two phones drift apart a little as the section passes (--pp, 0 to 1). */
.pair .back{left:4%;top:0;--w:clamp(220px,20vw,290px);opacity:.92;--tilt:-5deg;--shift:calc((.5 - var(--pp,.5)) * 60px)}
.pair .front{right:4%;top:9%;--tilt:3deg;--shift:calc((var(--pp,.5) - .5) * 40px)}
.pair .phone{transform:translateY(var(--shift)) rotate(var(--tilt))}
.js .pair .phone.rise{transform:translateY(calc(var(--shift) + 28px)) rotate(var(--tilt))}
.js .pair .phone.rise.in{transform:translateY(var(--shift)) rotate(var(--tilt));transition:opacity var(--reveal) var(--ease),transform .2s linear}

/* ---------- Band: a full-bleed moment ---------- */
.band{position:relative;height:88vh;height:88svh;min-height:520px;overflow:hidden;background:var(--night);color:#fff}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(calc(1.12 - var(--bp,0) * .12))}
.band::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#15151500 40%,#151515cc 100%)}
.band-line{position:absolute;z-index:1;left:0;right:0;bottom:clamp(40px,7vw,96px);font-size:clamp(30px,3.7vw,54px);letter-spacing:-.025em;line-height:1.15}

/* ---------- Feel better: steps and a phone that follows ---------- */
.better{padding-top:var(--section);padding-bottom:calc(var(--section) * .6)}
.better-head .lede{margin-top:28px;color:#f0e9dfd9;max-width:44ch}
.steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);margin-top:clamp(40px,6vw,80px)}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;max-width:440px;transition:opacity .5s var(--ease)}
/* Dimming and the pinned phone need the script; without it every step reads in full with its own screen (Codex, PR #7). */
.js .step{opacity:.3}
.step-copy{border-left:2px solid var(--line-dark);padding:4px 0 4px 26px;transition:border-color .5s var(--ease)}
.js .step.active{opacity:1}
.step.active .step-copy{border-left-color:var(--verdant-soft)}
.step p{margin-top:16px;color:#f0e9dfd9;font-size:18px;line-height:1.55}
.js .step .phone.inline{display:none}
.step .phone.inline{margin-top:32px}
html:not(.js) .steps{grid-template-columns:1fr}
html:not(.js) .step{min-height:0;padding-bottom:64px}
.step-stage{display:none}
.js .step-stage{display:flex}
.js .step-stage{position:sticky;top:calc(50vh - clamp(250px,23vw,330px) * 1.1);height:max-content;justify-content:center;align-self:start}
.step-stage .phone{display:grid}
.step-stage .phone img{grid-area:1/1;opacity:0;transform:scale(.985);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.step-stage .phone img.on{opacity:1;transform:none}
.step-stage .phone::after{z-index:1}

/* ---------- Yours: plain files ---------- */

/* ---------- Testers ---------- */
.testing{padding-block:var(--section);background:var(--sand)}
.testing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);margin-top:clamp(40px,5vw,72px)}
.testing-grid article{border-top:1px solid var(--line);padding-top:26px}
.testing-grid p{margin-top:14px;color:var(--muted);font-size:16px;line-height:1.6}
.testing-grid .text-link{margin-top:10px}

/* ---------- Dawn: night into first light, with the sign-up ---------- */
.dawn{position:relative;height:170vh;height:170svh;background:var(--night);--dp:0;--a1:0;--a2:0;--a3:0}
.dawn-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;color:var(--on-dark)}
.dawn-sky,.dawn-sky::before,.dawn-sky::after{position:absolute;inset:0}
.dawn-sky{background:linear-gradient(0deg,#9c3d5a 0%,#044056 48%,#151515 100%);opacity:var(--a1)}
.dawn-sky::before{content:'';background:linear-gradient(0deg,#e0692a 0%,#9c3d5a 42%,#044056 100%);opacity:var(--a2)}
.dawn-sky::after{content:'';background:linear-gradient(0deg,#f9f2e8 0%,#f6bd8f 34%,#e0692a 74%,#9c3d5a 100%);opacity:var(--a3)}
.sun{position:absolute;z-index:1;left:50%;bottom:calc(min(30vw,380px) * -.42);width:min(30vw,380px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff6dc 0%,#f2cf86 42%,#e3a230 70%,#e3a23000 71%);box-shadow:0 0 120px 40px #f2cf8659;transform:translate(-50%,calc((1 - var(--dp)) * 38vh))}
.dawn-copy{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;margin-bottom:12vh;transition:color .6s var(--ease)}
.dawn.lit .dawn-stage{color:var(--night)}
.dawn-icon{margin-bottom:30px;box-shadow:0 14px 34px #15151547;--tile:#f9f2e8;--glyph:#044056;transition:background-color .8s var(--ease),color .8s var(--ease)}
.dawn.lit .dawn-icon{--tile:#044056;--glyph:#f9f2e8}
.dawn .lede{margin-top:20px;max-width:34ch}
.signup{margin-top:34px;width:min(100%,560px)}
.signup-row{display:flex;gap:10px;padding:6px;border-radius:999px;background:#f9f2e8f0;box-shadow:0 18px 40px -20px #15151566}
.signup input[type=email]{flex:1;min-width:0;min-height:52px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:var(--night);font-size:17px}
.signup input[type=email]::placeholder{color:#847e72}
.signup input[type=email]:focus-visible{outline:2px solid var(--night);outline-offset:2px}
.signup .submit{flex-shrink:0}
.consent{display:flex;gap:10px;align-items:flex-start;justify-content:center;margin-top:18px;font-size:14px;line-height:1.5;text-align:left;cursor:pointer}
.consent input{width:18px;height:18px;margin:2px 0 0;flex-shrink:0;accent-color:var(--night)}
.consent a{text-underline-offset:3px}
.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#form-status{margin-top:12px;font-size:15px;font-weight:500}
#form-status:empty{display:none}
.form-success{margin-top:30px}
.form-success p{margin-top:10px}

/* ---------- Footer: the page ends on the wordmark ---------- */
.footer{background:var(--page);padding:72px 0 calc(40px + env(safe-area-inset-bottom))}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.footer-brand p{margin-top:14px;font-size:15px;line-height:1.55}
.footer-cols{display:grid;grid-template-columns:repeat(2,max-content);gap:0 clamp(40px,6vw,96px)}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;font-size:15px}
.footer-col a{display:inline-flex;min-height:38px;align-items:center;text-decoration:none}
.footer-col a:hover,.footer-col a[aria-current]{text-decoration:underline;text-underline-offset:5px}
.footer-mark{margin-top:clamp(28px,4vw,56px);font-size:clamp(96px,27vw,420px);font-weight:450;letter-spacing:-.06em;line-height:.74;text-align:center;color:var(--night);transform:translateY(.08em)}

/* ---------- Legal pages (privacy, thanks) ---------- */
.legal{max-width:760px;padding-block:72px 110px}
.legal h1{font-size:clamp(44px,6vw,68px);font-weight:430;letter-spacing:-.035em;line-height:1.02;margin-bottom:28px}
.legal h2{font-size:26px;font-weight:450;letter-spacing:-.015em;margin:36px 0 14px}
.legal p,.legal li{font-size:17px;line-height:1.7}
.legal>p:first-of-type{font-size:20px}
.legal ul{list-style:disc;padding-left:1.2em}
.legal .text-link{margin-bottom:24px}
/* The privacy policy (/privacy.html): the app's policy, the beta list, and the California notice on one page. */
.legal>p.legal-updated{font:400 13px/1.4 var(--mono);letter-spacing:.02em;color:var(--muted);margin:-8px 0 28px}
.legal>p.legal-updated+p{font-size:20px;line-height:1.55}
.legal h3{font-size:19px;font-weight:550;letter-spacing:-.01em;margin:28px 0 8px}
.legal a:not(.button){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.legal li+li{margin-top:8px}
.legal .glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:40px 0 0;padding:0;list-style:none}
.legal .glance li{margin:0;padding:24px 24px 26px;border-radius:24px;color:var(--night)}
.glance .glance-title{margin:0 0 10px;font-size:19px;font-weight:550;line-height:1.25;letter-spacing:-.01em}
.glance p{font-size:15px;line-height:1.55}
.glance-lime{background:var(--k-lime,#B4DC64)}
.glance-marigold{background:var(--k-marigold,#F6B400)}
.glance-lavender{background:var(--k-lavender,#B9A8F0)}
.glance-pink{background:var(--k-pink,#F98DBF)}
.toc{margin:48px 0 8px;padding:20px 0;border-block:1px solid var(--line)}
.toc-title{font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.legal .toc ol{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:8px;padding:0;list-style:none}
.toc li,.toc li+li{margin:0}
.toc a{display:inline-flex;min-height:44px;align-items:center;font-weight:500}
.legal [id]{scroll-margin-top:24px}
.legal .part{margin-top:72px;padding-top:40px;border-top:1px solid var(--line);font-size:clamp(32px,4vw,44px);font-weight:430;letter-spacing:-.03em;line-height:1.08}
.legal #beta-list{margin-top:56px}
@media (max-width:640px){.legal .glance{grid-template-columns:1fr}}

/* ---------- Arrivals ---------- */
.js .rise{opacity:0;transform:translateY(28px);transition:opacity var(--reveal) var(--ease),transform var(--reveal) var(--ease);transition-delay:var(--d,0s)}
.js .rise.in{opacity:1;transform:none}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .pair{min-height:calc(clamp(250px,23vw,330px) * 2.3)}
  .pair .back{left:0}
  .pair .front{right:0}
}

/* ---------- Phone ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .nav .wrap{height:72px}
  .nav-link{display:none}
  .wordmark{font-size:21px}
  .on-wide{display:none}
  .on-phone{display:inline}
  .day{height:130svh}
  .day-film img{object-position:var(--focus-m,var(--focus,50% 50%))}
  .day-title{bottom:104px}
  .day-title .lede{margin-top:18px}
  .actions{gap:4px 22px;margin-top:24px}
  .day-entry{bottom:calc(18px + env(safe-area-inset-bottom));justify-content:flex-start}
  .entry-card{max-width:100%;padding:11px 14px 11px 11px;gap:11px}
  .entry-emoji{width:38px;height:38px;font-size:19px}
  .entry-text{font-size:14px}
  .sun{width:62vw;bottom:-26vw}
  .pieces{height:180svh}
  .split,.steps{grid-template-columns:1fr}
  .split.flip .split-copy{order:0}
  .phone{--w:min(300px,74vw)}
  .day-list li{grid-template-columns:76px 1fr;row-gap:8px;font-size:15px}
  .day-list li>span:last-child{grid-column:2}
  .together .split{gap:56px}
  .pair{min-height:calc(min(300px,74vw) * 2.25)}
  .pair .back{--w:min(250px,62vw);left:0}
  .pair .front{right:0;top:12%}
  .band{height:70svh}
  .band>img{object-position:66% 50%}
  .step{min-height:0;opacity:1;padding:0 0 64px}
  .step-copy{border-left:0;padding:0}
  /* Matches the .js rules above, so phones get each step's screen inline and no sticky stage (Codex, #7). */
  .step .phone.inline,.js .step .phone.inline{display:block;margin:32px auto 0}
  .step-stage,.js .step-stage{display:none}
  .testing-grid{grid-template-columns:1fr}
  .dawn{height:150svh}
  .signup-row{flex-direction:column;border-radius:26px;padding:8px}
  .signup .submit{width:100%}
  .footer-top{flex-direction:column;gap:28px}
  .footer-cols{gap:0 36px}
  .footer-col a{min-height:44px}
}

/* ---------- Reduced motion: the same page, still ---------- */
@media (prefers-reduced-motion:reduce){
  .day,.pieces,.dawn{height:auto}
  .day-stage,.pieces-stage,.dawn-stage{position:relative;height:100svh}
  .pieces-stage{height:auto;padding-block:var(--section)}
  .day-film img{transition:none;animation:none!important}
  .statement .w{opacity:1}
  .js .rise{opacity:1;transform:none;transition:none}
  .pair .phone,.js .pair .phone.rise{transform:rotate(var(--tilt))}
  .step{opacity:1;transition:none}
  .dawn{--dp:1;--a1:1;--a2:1;--a3:1}
  .dawn .dawn-stage{color:var(--night)}
  .dawn .dawn-icon{--tile:#044056;--glyph:#f9f2e8}
  .band>img{transform:none}
}

/* ---------- Short screens (landscape phones): the hero and the dawn scroll instead of pinning, so nothing is clipped (Codex, #7) ---------- */
@media (max-height:560px){
  .day{height:auto}
  .day-stage{position:relative;height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:96px 0 24px}
  .day-title,.day-entry{position:relative;left:auto;right:auto;bottom:auto;transform:none;opacity:1}
  .day-entry{margin-top:18px;justify-content:flex-start}
  .dawn{height:auto}
  .dawn-stage{position:relative;height:auto;min-height:100svh;overflow:visible;padding-block:72px}
}

/* ---------- Portrait phones: the hero is the phone art's own 9:16, laid out in flow ----------
   The copy always lands on the same part of the picture, so the art keeps faces above it. No pin, zoom, drift or
   dissolve; it grows if the text needs room. Last in the file so it wins over reduced motion and short screens
   (a portrait phone in Safari can be under 560px tall). Landscape phones keep the landscape frames (Codex, #13). */
@media (max-width:760px) and (orientation:portrait){
  .day{height:auto}
  .day-stage{position:relative;height:auto;min-height:calc(100vw * 16 / 9);display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 calc(18px + env(safe-area-inset-bottom))}
  .day-film{transform:none}
  .day-film img.on{animation:none}
  .day-film picture img{object-position:50% 0}
  .day-shade{background:linear-gradient(180deg,#15151580 0%,#15151500 15%,#15151500 30%,#15151566 40%,#151515b3 54%,#151515e6 72%,#151515f5 100%)}
  .day-title,.day-entry{position:relative;left:auto;right:auto;bottom:auto;transform:none;opacity:1}
  .day-title .lede{margin-top:14px}
  .actions{flex-wrap:nowrap;margin-top:20px}
  /* Room for a two-line entry, so the headline never jumps when the film reaches a longer line. */
  .day-entry{margin-top:18px;align-items:flex-end;min-height:78px}
}