/* The Kasane layer: Enchant's system underneath (fixed sections, motion inside them), Kasane's own on top.
   A burst of a family's health data layers into one story and then shows what might be behind a rough night,
   the experiment reads like a game board, shapes mark each act, and the brights sit between Montessori and Coplay. */
:root{
  --k-page:#FBF5EC;
  --k-sand:#EFE4D2;
  --k-marigold:#F6B400;
  --k-coral:#EE5A3E;
  --k-cobalt:#2F5BE0;
  --k-emerald:#0E8C6A;
  --k-lime:#B4DC64;
  --k-pink:#F98DBF;
  --k-lavender:#B9A8F0;
  --k-emerald-ink:#0A6E53; /* emerald deep enough for white text (6.2:1); the bright stays for shapes and dots */
}
.look-k body,.look-k .footer{background:var(--k-page)}
/* Title → lede is a clear step; the lede and the paragraph after it sit closer together. */
.look-k .h2{line-height:1}
.look-k .split-copy .lede,.look-k .better-head .lede{margin-top:30px;line-height:1.4}
.look-k .split-copy .lede+p{margin-top:16px;line-height:1.55}
/* The film dissolves into the burst's sand instead of night. */
.look-k .day{background:var(--k-sand)}

/* ---------- Section colors ---------- */
.look-k .journal{background:var(--k-page)}
.look-k .together{background:var(--k-cobalt);color:#fff}
.look-k .together .lede{color:#fff}
.look-k .together .split-copy p:not(.lede){color:#ffffffd1}
.look-k .better{background:var(--k-marigold);color:var(--night)}
.look-k .better-head .lede,.look-k .step p{color:var(--ink)}
.look-k .step-copy{border-left-color:#1515152e}
.look-k .step.active .step-copy{border-left-color:var(--night)}
.look-k .testing{background:var(--k-sand)}

/* ---------- Burst: scatter → one stack (title appears under it) → three stay and connect to a rough night ----------
   Without the script (or on a short screen) it is a still, readable list: title, pieces, then the two lines (Codex, PR #7). */
.burst{position:relative;background:var(--k-sand)}
.burst-stage{display:flex;flex-direction:column;align-items:center;gap:24px;padding:clamp(72px,9vw,120px) var(--gutter)}
.burst-title{margin:0;text-align:center;font-size:clamp(30px,3.5vw,50px);font-weight:430;letter-spacing:-.03em;line-height:1.08;max-width:24ch}
.burst-title.b1{order:0}
.chips{order:1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:0;padding:0;list-style:none}
.burst-title.b2{order:2}
.burst-title.b3{order:3}
.links{display:none}
.chip{display:inline-flex;gap:9px;align-items:center;padding:10px 18px;border-radius:999px;font-size:16px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;color:var(--night);box-shadow:0 10px 22px -14px #15151566}
@media (min-height:561px){
  .js .burst{height:330vh;height:330svh}
  .js .burst-stage{position:sticky;top:0;display:block;height:100vh;height:100svh;overflow:hidden;padding:0}
  .js .burst-title{position:absolute;z-index:2;left:0;right:0;max-width:none;padding-inline:var(--gutter);opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
  .js .burst-title.b1{top:clamp(76px,11vh,118px)}
  .js .burst-title.b2{top:var(--b2-top,70%)}
  .js .burst-title.b3{top:var(--b3-top,76%);max-width:24ch;margin-inline:auto}
  .js .burst.show-b1 .b1,.js .burst.show-b2 .b2,.js .burst.show-b3 .b3{opacity:1;transform:none}
  .js .links{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
  .js .chips{position:absolute;inset:0;display:block;max-width:none;z-index:1}
  .js .chip{position:absolute;left:50%;top:50%;opacity:var(--o,1);transform:translate(-50%,-50%) translate(var(--x,0px),var(--y,0px)) rotate(var(--rot,0deg)) scale(var(--sc,1));will-change:transform,opacity}
}
.links path{fill:none;stroke:var(--night);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--draw,1);opacity:.55}
.c-lavender{background:var(--k-lavender)}
.c-lime{background:var(--k-lime)}
.c-marigold{background:var(--k-marigold)}
.c-coral{background:var(--k-coral);color:var(--night)}
.c-sand{background:#fff}
.c-pink{background:var(--k-pink)}
.c-cobalt{background:var(--k-cobalt);color:#fff}
.c-emerald{background:var(--k-emerald-ink);color:#fff}

/* ---------- The experiment as a game board ---------- */
.act{display:block;width:34px;height:34px;margin-bottom:16px}
.hunch{margin-top:18px;padding:14px 18px;border-radius:18px;background:#fffbf2;font-size:16px;line-height:1.5;max-width:30ch;transform:rotate(-1.5deg);box-shadow:0 10px 22px -16px #1515154d}
.hunch [data-field=hunchWho]{font-weight:600}
.tracker{margin-top:22px;display:grid;gap:10px}
.tracker .row{display:flex;align-items:center;gap:14px;font-size:14px}
.tracker .row>span:first-child{width:56px;font-weight:500}
.tracker .dots{display:flex;flex-wrap:wrap;gap:6px}
.tracker i{display:inline-block;width:16px;height:16px;border-radius:50%;transition:transform .45s var(--ease) calc(var(--i,0) * 55ms)}
.js .tracker i{transform:scale(0)}
.js .step.active .tracker i,.js .tracker .key i{transform:scale(1)}
.tracker .bad{background:var(--k-coral)}
.tracker .good{background:var(--k-emerald)}
.tracker .key{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px}
.tracker .key i{width:11px;height:11px;margin-left:8px}
.tracker .key i:first-child{margin-left:0}
.stamp{position:relative;width:128px;height:128px;margin-top:22px;color:var(--k-emerald);transform:rotate(-10deg);transition:opacity .4s var(--ease),transform .55s cubic-bezier(.34,1.56,.64,1)}
.js .stamp{opacity:0;transform:rotate(-10deg) scale(.55)}
.js .step.active .stamp{opacity:1;transform:rotate(-10deg) scale(1)}
.stamp svg{position:absolute;inset:0;width:100%;height:100%}
.stamp span{position:absolute;inset:0;display:grid;place-items:center;padding:0 20px;text-align:center;color:#fff;font-size:21px;font-weight:600;line-height:1.05;letter-spacing:-.01em}

/* ---------- Together: a thread drawn between the caregivers ---------- */
.look-k .pair .phone{z-index:1}
.thread{position:absolute;z-index:0;inset:4% 6%;width:88%;height:92%;overflow:visible}
.thread path{fill:none;stroke:var(--k-marigold);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:max(0, calc(1 - var(--pp,0) * 1.8));vector-effect:non-scaling-stroke}

/* ---------- Band: the scenario sits high on the photo ---------- */
/* The photo fills the band; the scenario and the parent's real journal sit in a column on its calm left side. */
.look-k .band{height:auto;min-height:100vh;min-height:100svh;display:block}
.look-k .band::after{background:linear-gradient(90deg,#151515c7 0%,#15151580 30%,#15151500 56%)}
.band-copy{position:relative;z-index:1;display:grid;justify-items:start;gap:clamp(28px,4vh,44px);padding:clamp(72px,11vh,128px) 0 clamp(56px,8vh,96px);color:#fff}
.band-phone{--w:clamp(220px,19vw,280px);transform:rotate(-2deg)}
.band-copy .band-line{position:static;padding:0;font-size:clamp(32px,4vw,58px);letter-spacing:-.03em;line-height:1.04;max-width:15ch}
.band-sub{margin-top:18px;max-width:34ch;font-size:clamp(18px,1.5vw,21px);line-height:1.45;color:#f9f2e8}

/* ---------- Dawn, brighter, with a soft mesh sun ---------- */
.look-k .dawn-sky{background:linear-gradient(0deg,#F98DBF 0%,#2F5BE0 52%,#151515 100%)}
.look-k .dawn-sky::before{background:linear-gradient(0deg,#F6B400 0%,#EE5A3E 42%,#2F5BE0 100%)}
.look-k .dawn-sky::after{background:linear-gradient(0deg,#FBF5EC 0%,#FBD36B 34%,#F6B400 62%,#EE5A3E 100%)}
/* The sun is a blurred mesh of three warm lights, not a disc. */
.look-k .sun{width:min(62vw,720px);bottom:calc(min(62vw,720px) * -.5);border-radius:50%;background:radial-gradient(circle at 50% 42%,#FFE9A8 0%,#F6B400 26%,#F6B40000 62%),radial-gradient(circle at 28% 62%,#F98DBF 0%,#F98DBF00 52%),radial-gradient(circle at 72% 64%,#EE5A3E 0%,#EE5A3E00 52%);filter:blur(38px);box-shadow:none;opacity:.95}

/* ---------- Phone ---------- */
@media (max-width:760px){
  .chip{font-size:13px;padding:8px 13px}
  .js .links{display:none}
  .tracker i{width:12px;height:12px}
  .tracker .dots{gap:5px;flex-wrap:nowrap}
  .tracker .row>span:first-child{width:50px}
  .step .tracker i{transform:scale(1)}
  .stamp{opacity:1;transform:rotate(-10deg) scale(1)}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce) and (min-height:561px){
  .js .burst{height:auto}
  .js .burst-stage{position:relative;height:100svh}
}
@media (prefers-reduced-motion:reduce){
  .tracker i,.stamp{transform:none!important;opacity:1;transition:none}
  .stamp{transform:rotate(-10deg)!important}
  .thread path{stroke-dashoffset:0}
}

/* ---------- Stories: pick the question the page follows; a dock keeps the pick at hand ---------- */
/* A quiet pause between the hero and the burst: the hero dissolves into this sand, the question sits alone in it,
   and the burst's title stays below the fold until the picker leaves (when the dock takes over). */
.stories{display:grid;align-items:start;min-height:78vh;min-height:78svh;background:var(--k-sand);padding:clamp(40px,8vh,96px) 0 64px}
.stories-inner{display:grid;justify-items:center;text-align:center}
.stories-title{font-size:clamp(24px,2.3vw,32px);font-weight:450;letter-spacing:-.02em;line-height:1.15}
.story-picks{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.story-pick{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 22px 12px 14px;border:0;border-radius:999px;background:#fffdf8;color:var(--night);font:500 17px/1.2 var(--sans);letter-spacing:-.01em;cursor:pointer;box-shadow:0 10px 22px -16px #1515154d;transition:background .25s var(--ease),color .25s var(--ease),transform .2s var(--ease)}
.story-pick span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--k-sand);font-size:18px}
.story-pick:hover{transform:translateY(-2px)}
.story-pick[aria-checked=true]{background:var(--pick,var(--night));color:var(--pick-ink,#fff)}
.story-pick[aria-checked=true] span{background:#ffffff4d}
.stories-note{margin-top:18px;font-size:15px;color:var(--muted)}
/* visibility (not just opacity) takes the hidden dock out of the tab order and the accessibility tree; without JS it never shows (Codex, #7). */
.story-dock{position:fixed;z-index:40;left:var(--gutter);bottom:calc(20px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s}
.story-dock.show{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.dock-button{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:8px 16px 8px 8px;border:0;border-radius:999px;background:#151515e6;color:#fff;font:500 15px/1.2 var(--sans);cursor:pointer;box-shadow:0 14px 30px -14px #15151599;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.dock-button .dock-emoji{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--pick,#ffffff2e);font-size:16px}
.dock-button .dock-switch{margin-left:4px;color:#ffffffa6;font-weight:400}
.dock-button{max-width:calc(100vw - 2 * var(--gutter));white-space:nowrap}
.dock-button .dock-label{overflow:hidden;text-overflow:ellipsis;min-width:0}
.dock-button .dock-emoji,.dock-button .dock-switch{flex-shrink:0}
.dock-menu{position:absolute;left:0;bottom:calc(100% + 10px);display:grid;gap:6px;min-width:280px;padding:8px;border-radius:22px;background:#fffdf8;box-shadow:0 24px 50px -20px #15151580}
.dock-menu[hidden]{display:none}
.dock-menu .story-pick{justify-content:flex-start;box-shadow:none;width:100%}
.dock-menu .story-pick:hover{transform:none;background:var(--k-sand)}
.dock-menu .story-pick[aria-checked=true]{background:var(--pick,var(--night))}
[data-story-swap]{transition:opacity .3s var(--ease)}
.story-fading [data-story-swap]{opacity:0}
@media (max-width:760px){
  .story-picks{display:grid;width:100%;gap:10px}
  .story-pick{width:100%;justify-content:flex-start;font-size:16px}
  .story-dock{left:50%;transform:translate(-50%,16px)}
  .story-dock.show{transform:translate(-50%,0)}
  .dock-menu{left:50%;transform:translateX(-50%)}
}

@media (max-width:760px){
  .look-k .band{min-height:0;background:var(--night)}
  .look-k .band>img{position:relative;inset:auto;height:auto;aspect-ratio:4/3;object-position:66% 50%;transform:none}
  .look-k .band::after{display:none}
  .band-copy{padding:36px 0 64px;justify-items:center;text-align:left}
  .band-text{justify-self:stretch}
  .band-phone{--w:min(270px,70vw)}
}

/* The story's Guide, under its look-back. */
.story-guide{margin-top:26px;max-width:42ch;font-size:16px;line-height:1.5}
.story-guide .text-link{display:inline;min-height:0}

/* ---------- Yours: the jobs your own files make possible, and the folder underneath them ---------- */
.look-k .yours{background:var(--k-lime);color:var(--night);padding-block:clamp(80px,8vw,120px)}
.yours .ya-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
.yours .h2{max-width:12ch}
.yours .ya-copy .lede{color:var(--ink);max-width:35ch;margin-top:26px;line-height:1.45}
.yours .ya-jobs{margin-top:36px;display:grid;gap:22px;list-style:none}
.yours .ya-jobs h3{font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.yours .ya-jobs p{margin-top:5px;max-width:36ch;font-size:16px;line-height:1.5;color:var(--ink)}
.yours .ya-folder{min-width:0;padding-top:26px;position:relative}
.yours .ya-folder-tab{position:absolute;top:0;left:0;width:42%;height:28px;background:var(--k-page);border:1px solid var(--night);border-bottom:0;border-radius:14px 22px 0 0}
.yours .ya-folder-body{position:relative;background:var(--k-page);border:1px solid var(--night);border-radius:0 16px 16px 16px;overflow:hidden}
.yours .ya-folder-tab::after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:4px;background:var(--k-page);z-index:1}
.yours .ya-folder-head{display:flex;gap:17px;align-items:center;padding:28px}
.yours .ya-folder-icon{width:42px;flex-shrink:0;color:var(--k-cobalt)}
.yours .ya-folder-head h3{font-size:24px;font-weight:500}
.yours .ya-folder-head p{margin-top:6px;font-size:13px;line-height:1.5;color:var(--ink)}
.yours .ya-contents{margin-inline:28px;list-style:none}
.yours .ya-contents li{display:flex;gap:16px;align-items:center;padding:17px 0;border-top:1px solid var(--line)}
.yours .ya-contents li>div{min-width:0}
.yours .ya-contents strong{display:block;font-size:17px;font-weight:500;line-height:1.3}
.yours .ya-contents code{display:block;margin-top:5px;overflow-wrap:anywhere;color:var(--ink);font-size:12px;line-height:1.5}
.yours .ya-file{position:relative;display:block;width:22px;height:28px;border:1px solid var(--ink);border-radius:2px;flex-shrink:0}
.yours .ya-file::after{content:"";position:absolute;left:5px;right:5px;top:10px;height:6px;border-block:1px solid var(--ink)}
.yours .ya-agent{margin-top:12px;padding:24px 28px 26px;background:var(--night);color:var(--k-page)}
.yours .ya-agent h3{font-size:20px;line-height:1.25;color:var(--k-lime);font-weight:450}
.yours .ya-agent p{font-size:15px;line-height:1.5;margin-top:10px}
.yours .ya-agent .mono{font-size:14px;color:var(--k-lime)}
.yours .ya-agent .ya-owned{font-size:13px;color:var(--k-sand);margin-top:12px}
@media(max-width:900px){.yours .ya-grid{grid-template-columns:1fr;gap:44px}.yours .h2{max-width:17ch}.yours .ya-break{display:none}.yours .ya-copy .lede{max-width:44ch}.yours .ya-jobs{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.yours .ya-folder{max-width:640px;width:100%}}
@media(max-width:560px){.look-k .yours{padding-block:64px}.yours .ya-jobs{grid-template-columns:1fr;gap:22px;margin-top:30px}.yours .ya-folder-head{padding:22px 20px;gap:12px}.yours .ya-folder-head h3{font-size:21px}.yours .ya-folder-icon{width:32px}.yours .ya-contents{margin-inline:20px}.yours .ya-contents li{gap:12px}.yours .ya-agent{padding:24px 20px}.yours .ya-contents code{font-size:11px}}