/* Daylight, one case study (v5, October 2026). The portal, the homeowner
   app and Ray in one continuous editorial page. Loaded only by daylight.html
   (html.dl-story) after daylight-case-study.css and ray.css, whose product
   reconstructions it reuses unchanged. This file sets the story's reading
   system, the part and chapter rhythm, the opening product view and the larger
   evidence scenes. Daylight's own type and color: Feature Deck for the
   opening and part titles, Aeonik Pro for reading, ABC Social Mono only for
   short labels and numbers. Cream belongs to homeowners, neutral white to
   the portal, the orange film to Ray. Reading text never waits on motion.
   No em dashes. */
html.dl-story{--orange:#F66F00;--orange-ink:#ae4800;--ink:#1e1d1b;--brown:#1e1d1b;--muted:#5f5e58;--prose:#393834;--label:#6b6a64;--hair:#e6e5df;--hair-strong:#d6d5cf;--cream:#FFF7E9;--cream-2:#F7EED9;--cream-ink:#4C2806;--neutral:#f4f4f0;--wrap-wide:1360px;--pad:clamp(20px,5vw,72px);--gap-chapter:clamp(72px,8vw,124px);background:#fff}
html.dl-story body{background:#fff;color:var(--ink)}

/* ---------- reading system ---------- */
html.dl-story .cs-h2{font-family:var(--sans);font-weight:500;font-size:clamp(34px,2.2vw + 18px,56px);line-height:1.05;letter-spacing:-.04em;color:var(--ink);max-width:16ch;margin:0}
html.dl-story .cs-h3{font-size:clamp(24px,.8vw + 18px,32px);line-height:1.15;letter-spacing:-.03em;font-weight:500;color:var(--ink);margin:0 0 18px;max-width:22ch}
html.dl-story .cs-kicker{font-family:var(--sans);text-transform:none;font-size:15px;line-height:1.4;letter-spacing:0;color:var(--label);display:flex;gap:12px;align-items:baseline;margin:0 0 18px}
html.dl-story .cs-kicker .num{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--orange-ink)}
html.dl-story .cs-lead{font-size:clamp(19px,.5vw + 16px,23px);line-height:1.45;letter-spacing:-.012em;color:#3a3935;max-width:34em;margin:22px 0 0}
html.dl-story .ch-prose{max-width:64ch}
html.dl-story .ch-prose p{font-size:clamp(17px,.25vw + 16px,19px);line-height:1.62;color:var(--prose);margin:0 0 1em}
html.dl-story .ch-prose p:last-child{margin-bottom:0}
html.dl-story figure{margin:0}
html.dl-story figure>figcaption{text-align:left;margin:16px 0 0;max-width:72ch}
html.dl-story .cs-caption{font-size:13.5px;line-height:1.5;color:#6a6963}
html.dl-story .cs-section{scroll-margin-top:0}
html.dl-story .cs-btn{border-radius:100px;background:#1e1d1b;border-color:#1e1d1b;color:#fff;padding:13px 23px}
html.dl-story .cs-btn:hover{background:#3a3936;border-color:#3a3936}
html.dl-story .cs-btn.ghost{background:transparent;border-color:#cfcec8;color:#2c2b28}
html.dl-story .cs-btn.ghost:hover{background:#f3f3ef}
html.dl-story .cs-nav.is-scrolled{background:rgba(255,255,255,.94);border-color:var(--hair)}
html.dl-story .cs-footer{background:#fff;border-top:1px solid var(--hair)}
html.dl-story .dl-depth{margin-top:36px;max-width:880px}
html.dl-story .dl-depth>summary{font-size:15.5px;color:#4e4d48}
/* a project reference that should wrap as one piece, never at its hyphen */
html.dl-story .ds-keep{white-space:nowrap}

/* the chapter menu groups the three parts with quiet labels */
.dl-story .cs-nav-group{font-family:var(--mono);font-size:13px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--label);padding:14px 12px 4px}
.dl-story .cs-nav-group:first-child{padding-top:6px}

/* ---------- part markers and chapter heads ---------- */
/* the part label sits above its title on one left edge, at every width */
.ds-part{display:block;margin:0 0 clamp(44px,5vw,72px);padding-top:18px;border-top:1px solid var(--ink);font-family:var(--display);font-size:clamp(26px,1.2vw + 18px,36px);line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.ds-part>span{display:block;margin:0 0 10px;font-family:var(--mono);font-size:13px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-ink)}
.ds-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(40px,5vw,80px);align-items:start;margin-bottom:clamp(40px,4.5vw,64px)}
.ds-head>.ch-prose{padding-top:6px}
html.dl-story .ds-head>.cs-lead{margin:6px 0 0}
.ds-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px clamp(40px,5vw,80px);align-items:center}
.ds-split-copy .ch-prose{margin-top:24px}
.ds-takeaway{margin:clamp(36px,4vw,56px) 0 0;max-width:30ch;font-family:var(--display);font-size:clamp(26px,1.4vw + 18px,40px);line-height:1.12;letter-spacing:-.015em;color:var(--ink)}

/* ---------- opening: one body of work ---------- */
.ds-hero{padding:clamp(108px,10vw,150px) 0 clamp(56px,6vw,88px)}
.ds-hero-grid{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:48px clamp(40px,5vw,88px);align-items:center}
.ds-hero-copy .dl-brand{margin-bottom:clamp(24px,2.4vw,36px)}
html.dl-story .ds-h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,2.6vw + 26px,68px);line-height:1;letter-spacing:-.025em;color:#1e1b17;max-width:11ch;margin:0;text-wrap:balance}
html.dl-story .dl-hero-lead{font-size:clamp(19px,.5vw + 15px,22px);line-height:1.45;letter-spacing:-.015em;color:#2a2926;max-width:26em;margin:clamp(20px,2vw,28px) 0 0;text-wrap:pretty}
.ds-hero-sub{font-size:17px;line-height:1.55;color:var(--muted);max-width:34em;margin:18px 0 0}
/* the portal and Ray as one reconstructed product: the project's open
   requirement on the left, Ray's answer about it attached on the right.
   Product UI type, legible at reading size; one orange anchor on the
   requirement Ray is talking about. Nothing here is a control. */
.ds-hero-visual{width:100%;max-width:780px;justify-self:end}
.ds-hv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;border:1px solid #e4e1d8;border-radius:18px;box-shadow:0 40px 80px -52px rgba(60,48,24,.45),0 2px 8px rgba(60,48,24,.05);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#171717}
.ds-hv p{margin:0}
.ds-hv-portal{padding:clamp(20px,2.2vw,28px);background:#f7f6f2;border-radius:17px 0 0 17px}
.ds-hv-brand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding-bottom:16px;margin-bottom:20px!important;border-bottom:1px solid #e6e4dc}
.ds-hv-brand img{width:88px;height:auto}
.ds-hv-brand span{font-size:13px;color:#73766a}
.ds-hv-name{font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.ds-hv-meta{margin-top:4px!important;font-size:14px;color:#6b6e63}
.ds-hv-stage{margin:20px 0 14px}
.ds-hv-stage>p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:14px}
.ds-hv-stage b{font-weight:600}
.ds-hv-stage span{color:#6b6e63}
.ds-hv-stage ol{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:10px 0 0;padding:0}
.ds-hv-stage li{height:4px;border-radius:2px;background:#e1ded4}
.ds-hv-stage li.is-current{background:var(--orange)}
.ds-hv-reqs{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.ds-hv-reqs li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:11px 14px;background:#fff;border:1px solid #e6e4dc;border-radius:10px;font-size:15px;line-height:1.35}
.ds-hv-reqs li>span:first-child{font-weight:500}
.ds-hv-reqs li.is-focus{border-color:#efc9a6;box-shadow:inset 3px 0 0 var(--orange)}
.ds-hv-ray{display:grid;align-content:start;gap:16px;padding:clamp(20px,2.2vw,28px);border-left:1px solid #e6e4dc}
.ds-hv-ray-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding-bottom:14px;border-bottom:1px solid #ecebe6}
.ds-hv-ray-head b{font-size:15px;font-weight:600}
.ds-hv-ray-head span{font-size:13px;color:#73766a}
.ds-hv-q{justify-self:end;max-width:92%;padding:10px 15px;border-radius:18px;background:#171717;color:#fff;font-size:15px;line-height:1.4}
.ds-hv-a{display:flex;align-items:flex-start;gap:10px}
.ds-hv-a>img{margin-top:2px}
.ds-hv-a>div{padding:12px 15px;border-radius:18px;background:#f3f3f1;font-size:15px;line-height:1.5}
.ds-hv-a .ds-hv-src{margin-top:10px;padding-top:8px;border-top:1px solid #e3e3df;font-size:13px;line-height:1.45;color:#6b6b65}
.ds-hero-visual>figcaption{margin-top:16px}
.ds-hero-role{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px clamp(40px,5vw,88px);margin-top:clamp(40px,5vw,64px);padding-top:20px;border-top:1px solid var(--hair);font-size:14px;line-height:1.5;color:var(--label)}
.ds-hero-role p{margin:0;color:#393834}
.ds-parts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);margin-top:clamp(36px,4vw,56px)}
.ds-parts a{display:grid;align-content:start;gap:8px;min-height:44px;padding:20px 0 6px;border-top:2px solid var(--ink);text-decoration:none;color:var(--ink);transition:border-color var(--t-press) var(--ease-out)}
.ds-parts a:hover{border-color:var(--orange)}
.ds-parts a:hover b{color:var(--orange-ink)}
.ds-parts-n{font-family:var(--mono);font-size:13px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-ink)}
.ds-parts b{font-family:var(--display);font-weight:400;font-size:clamp(28px,1.2vw + 20px,38px);line-height:1.05;letter-spacing:-.01em;transition:color var(--t-press) var(--ease-out)}
.ds-parts a>span:last-child{font-size:15.5px;line-height:1.5;color:var(--muted);max-width:30ch}

/* ---------- part one: the portal ---------- */
.ds-handoffs{padding-top:clamp(24px,3vw,40px)}
.ds-stage-line{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 clamp(12px,1.6vw,24px)}
.ds-stage-line>li{position:relative;padding-top:34px}
.ds-stage-line>li::before{content:"";position:absolute;top:9px;left:0;right:calc(-1 * clamp(12px,1.6vw,24px));height:2px;background:#e1ded4}
.ds-stage-line>li.is-last::before{right:0}
.ds-stage-line>li::after{content:"";position:absolute;top:3px;left:0;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #b9b5a8}
.ds-stage-line>li.is-first::after{background:var(--orange);border-color:var(--orange)}
.ds-stage-line>li.is-last::after{background:var(--yellow);border-color:var(--orange);box-shadow:0 0 0 5px rgba(246,111,0,.14)}
.ds-stage-n{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--orange-ink);margin-bottom:10px}
.ds-stage-line b{display:block;font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.ds-stage-line p{font-size:15px;line-height:1.45;color:var(--muted);margin:8px 0 0}
.ds-stages>figcaption{margin-top:28px}
html.dl-story .dl-project{background:var(--neutral)}
html.dl-story .dl-project .dp-product{box-shadow:0 40px 80px -48px rgba(32,36,23,.32),0 3px 9px rgba(32,36,23,.04)}
html.dl-story .dl-queue{background:#fff}
html.dl-story .dl-queue-figure{margin:0}
html.dl-story .dl-notes{background:var(--neutral)}
.ds-notes-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px clamp(40px,5vw,80px);align-items:center}
html.dl-story .dp-notes-modal{max-width:620px;margin:0 auto}
html.dl-story .dl-phone-figure{max-width:350px;width:100%;justify-self:center;scroll-margin-top:calc(var(--nav-h) + env(safe-area-inset-top) + 24px)}
html.dl-story .dl-note-figure>figcaption,html.dl-story .dl-phone-figure>figcaption{text-align:center;margin-left:auto;margin-right:auto}

/* ---------- part two: homeowners, on Daylight cream ---------- */
html.dl-story .ds-home{background:var(--cream);color:var(--cream-ink)}
.ds-home .ds-part{border-color:var(--cream-ink);color:var(--cream-ink)}
.ds-home .cs-h2,.ds-home .cs-h3{color:#2a1a08}
.ds-home .cs-lead{color:#4a3520}
.ds-home .ch-prose p{color:#4d3a27}
.ds-home .cs-kicker{color:#7a5a3e}
.ds-home .cs-caption{color:#7a5f45}
.ds-home-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px clamp(40px,5vw,88px);align-items:start}
.ds-home-copy{padding-top:12px}
.ds-home-copy .ch-prose{margin-top:24px}
.ds-home-screens{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,32px);align-items:start}
html.dl-story .dl-shot{margin:0}
html.dl-story .dl-shot img{width:100%;max-width:none;margin:0;border:1px solid rgba(76,40,6,.14);border-radius:clamp(18px,2vw,30px);box-shadow:0 34px 60px -40px rgba(76,40,6,.5)}
html.dl-story .dl-shot:nth-child(2){margin-top:clamp(28px,4vw,64px)}
html.dl-story .dl-shot:nth-child(3){margin-top:clamp(56px,8vw,128px)}
html.dl-story .dl-shot>figcaption{text-align:left;max-width:none;margin:16px 0 0;font-size:15px}
.dl-shot>figcaption>b{display:block;font-size:17px;font-weight:500;letter-spacing:-.01em;color:#2a1a08;margin-bottom:4px}
html.dl-story .dl-authentic-caption{text-align:right;margin:28px 0 0;max-width:none}
.ds-language{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px clamp(40px,5vw,88px);align-items:start;margin-top:clamp(64px,7vw,104px);padding-top:clamp(40px,4vw,56px);border-top:1px solid rgba(76,40,6,.18)}
.ds-tones{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.ds-tone{display:grid;align-content:start;gap:14px;padding:26px 26px 24px;border-radius:14px}
.ds-tone p{margin:0}
.ds-tone.is-portal{background:#fff;border:1px solid #e3e3dd;color:#30312f}
.ds-tone.is-home{background:var(--cream-2);border:1px solid rgba(76,40,6,.12);color:var(--cream-ink)}
.ds-tone-label{font-family:var(--mono);font-size:13px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#7a7a72}
.ds-tone.is-home .ds-tone-label{color:#8a6a48}
.ds-tone-sample{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:12px 14px;border:1px solid #e3e5dc;border-radius:8px;font-size:15px}
.ds-tone-sample>b{font-weight:500}
.ds-tone-sample.is-row{color:#5e6254}
.ds-tone-serif{font-family:var(--display);font-size:clamp(26px,1vw + 18px,32px);line-height:1.12;letter-spacing:-.01em;color:#3f2206}
.ds-tone-mono{font-family:var(--mono);font-size:13px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#8a6a48}
.ds-tone-mono::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--orange);vertical-align:1px}
.ds-tone-note{font-size:15px;line-height:1.5;color:inherit;opacity:.82}
.ds-tone-shared{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:18px 2px 0}
.ds-swatch{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.ds-swatch::before{content:"";width:18px;height:18px;border-radius:50%;border:1px solid rgba(76,40,6,.2)}
.ds-swatch.is-orange::before{background:#F66F00}
.ds-swatch.is-cream::before{background:#FFF7E9}
.ds-swatch.is-brown::before{background:#4C2806}
.ds-type{font-size:16px;color:#3f2206}
.ds-type.is-display{font-family:var(--display);font-size:20px}
.ds-type.is-mono{font-family:var(--mono);font-size:14px}
.ds-tones>figcaption{grid-column:1/-1;margin-top:4px}

/* ---------- part three: Ray ---------- */
html.dl-story .ray-notes{background:#fff}
html.dl-story .ray-notes .ch-grid-notes{align-items:center}
/* 07, Ray's opening: a deliberate break from the white reading surface. The
   original gradient film runs unveiled on a full-bleed stage and the chapter
   continues on warm ink, which makes the film glow. The word Ray sits on the
   seam between them: an ink copy is drawn above the seam and a cream copy
   below it. Ink on the film measures at least 3.9:1 on every frame, enough
   for display type and control outlines only, so smaller text over the film
   always sits on an ink plate. The word's size and the seam are em-based, so
   text zoom and the fallback face keep the halves aligned. */
html.dl-story .ray-open{--ro-ink:#140b05;--ro-cream:#fff7e9;--ro-soft:rgba(255,247,233,.76);--ro-hair:rgba(255,247,233,.17);--ro-ember:#ff9a3d;--ro-word:min(clamp(176px,21vw + 100px,380px),56vh);--ro-seam:.56em;padding:0 0 clamp(72px,8vw,120px);background:var(--ro-ink);color:var(--ro-cream)}
html.dl-story .ray-open-stage{height:max(250px,min(30vw + 210px,660px,100vh - 120px));height:max(250px,min(30vw + 210px,660px,100svh - 120px));background-position:62% 50%}
html.dl-story .ray-open-stage .cs-wave-video{object-position:62% 50%}
html.dl-story .ray-open-marks{position:absolute;inset:0 0 auto;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-top:clamp(20px,2.6vw,40px)}
html.dl-story .ray-open-slate{display:inline-flex;align-items:baseline;gap:10px;margin:0;padding:8px 14px 9px;background:var(--ro-ink);color:var(--ro-cream);font-size:15px;line-height:1.35;border-radius:2px}
html.dl-story .ray-open-slate .num{color:var(--ro-ember)}
html.dl-story .ray-open-toggle{margin:0;padding:0 15px 0 13px;border:0;border-radius:100px;background:rgba(20,11,5,.84);color:var(--ro-cream);font-size:14px}
html.dl-story .ray-open-toggle:hover{background:var(--ro-ink)}
html.dl-story .ray-open-toggle:focus-visible{outline:2px solid var(--ro-ink);outline-offset:3px;border-radius:100px}
html.dl-story .ray-open-body{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr)}
html.dl-story .ray-open-word{display:grid;margin:0 0 0 -.03em;font-family:var(--display);font-weight:400;font-size:var(--ro-word);line-height:1;letter-spacing:-.04em;color:var(--ro-cream);transform:translateY(calc(var(--ro-seam) * -1));margin-bottom:calc(var(--ro-seam) * -1)}
html.dl-story .ray-open-word>span{grid-area:1/1;padding:0 .04em .14em 0}
html.dl-story .ray-open-lit{color:var(--ro-ink);clip-path:inset(0 0 calc(100% - var(--ro-seam)) 0);pointer-events:none;user-select:none;-webkit-user-select:none}
html.dl-story .ray-open-dusk{clip-path:inset(var(--ro-seam) 0 0 0)}
html.dl-story .ray-open-intro{max-width:36em;margin-top:6px}
html.dl-story .ray-open-line{margin:0;max-width:17ch;font-size:clamp(26px,1.15vw + 21px,40px);font-weight:500;line-height:1.08;letter-spacing:-.035em;color:var(--ro-cream);text-wrap:balance}
html.dl-story .ray-open-lead{margin:16px 0 0;max-width:33em;font-size:clamp(17px,.3vw + 16px,20px);line-height:1.55;color:var(--ro-soft)}
html.dl-story .ray-open-try{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:30px}
html.dl-story .ray-open .ray-try{min-height:54px;padding:0 26px 0 28px;border-color:#F66F00;background:#F66F00;color:var(--ro-ink);font-size:16.5px}
html.dl-story .ray-open .ray-try:hover{border-color:#ff8a2e;background:#ff8a2e}
html.dl-story .ray-open .ray-try:focus-visible{outline-color:var(--ro-cream)}
html.dl-story .ray-open .ray-try-note{font-size:14px;color:var(--ro-soft)}
html.dl-story .ray-open-notes{display:grid;gap:40px;margin-top:clamp(56px,6vw,80px);padding-top:26px;border-top:1px solid var(--ro-hair)}
html.dl-story .ray-open-label{margin:0 0 14px;font-family:var(--mono);font-size:13px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ro-ember)}
html.dl-story .ray-open-part p+p{margin:0;max-width:34em;font-size:clamp(17px,.25vw + 16px,19px);line-height:1.62;color:var(--ro-soft)}
html.dl-story .ray-open-principles{list-style:none;margin:0;padding:0}
html.dl-story .ray-open-principles li{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:4px 24px;align-items:baseline;padding:14px 0 15px;border-bottom:1px solid var(--ro-hair)}
html.dl-story .ray-open-principles li:first-child{padding-top:2px}
html.dl-story .ray-open-principles b{font-family:var(--display);font-weight:400;font-size:clamp(24px,.6vw + 20px,30px);line-height:1.1;letter-spacing:-.01em;color:var(--ro-cream)}
html.dl-story .ray-open-principles span{font-size:16.5px;line-height:1.5;color:var(--ro-soft)}
@media (min-width:1000px){
  /* A wider, lower film on desktop so the opening line and Try Ray arrive in
     the same view as the film: about 480px at 1440x900, easing down with
     shorter laptop heights but never below a 360px field. */
  html.dl-story .ray-open-stage{height:clamp(360px,min(33.33vw,100vh - 420px),560px);height:clamp(360px,min(33.33vw,100svh - 420px),560px)}
  html.dl-story .ray-open-body{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,2.4vw,40px)}
  html.dl-story .ray-open-word{grid-column:1/8;grid-row:1}
  html.dl-story .ray-open-intro{grid-column:8/13;grid-row:1;align-self:start;margin-top:0;padding-top:clamp(32px,3vw,48px)}
  html.dl-story .ray-open-notes{grid-column:1/-1;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,2.4vw,40px)}
  html.dl-story .ray-open-part{grid-column:1/7}
  html.dl-story .ray-open-held{grid-column:8/13}
}
@media (max-width:419px){
  html.dl-story .ray-open-principles li{grid-template-columns:1fr}
}
@media (forced-colors:active){
  html.dl-story .ray-open-lit{display:none}
  html.dl-story .ray-open-dusk{clip-path:none}
}
html.dl-story #continuity .product-scene{margin-top:0}
html.dl-story .product-scene>figcaption{text-align:left;margin:16px 0 0}

/* sheets: one large before and after, legible at reading size */
html.dl-story .ray-sheets{background:var(--neutral)}
html.dl-story .sheet-stage{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"request request" "file live";gap:20px;padding:0;background:transparent;border-radius:0}
html.dl-story .sheet-request{grid-area:request;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 20px;align-items:center;padding:24px 28px;border-radius:16px;background:#fff;border:1px solid #e2e2dc}
html.dl-story .sheet-request>.step-label{grid-column:1/-1}
html.dl-story .sheet-request>.rp-user{justify-content:flex-start}
html.dl-story .sheet-request>.rp-user>p{font-size:17px}
html.dl-story .sheet-request .artifact-response{margin-top:0}
html.dl-story .sheet-request .artifact-link{margin-top:12px}
html.dl-story .sh-file{grid-area:file;align-self:start;padding:28px;border-radius:16px;background:#fbfbf9;border:1px dashed #cfcfc7;color:#696963}
html.dl-story .sh-live{grid-area:live;padding:32px 36px 30px;border:1px solid #dcdcd5;border-radius:16px;background:#fff;box-shadow:0 34px 70px -50px rgba(36,36,24,.5)}
html.dl-story .sh-live h3{font-size:clamp(26px,1vw + 18px,34px)}
html.dl-story .sh-live .sh-live-meta{font-size:14px}
html.dl-story .sh-live .sh-table td{font-size:16px;padding:17px 10px}
html.dl-story .sh-live .sh-table small,html.dl-story .sh-live .sh-table .cs-tag{font-size:16px}
html.dl-story .sh-live .sh-table th{font-size:14px}
html.dl-story .sh-live .cs-status{font-size:15px}
html.dl-story .sh-file .sh-table td{font-size:15px}
html.dl-story .sh-file .sh-table small{font-size:14px}
html.dl-story .sheet-story>figcaption{margin-top:18px}
.ray-sheets .ds-takeaway{margin-left:auto;margin-right:0;text-align:left;max-width:26ch}

/* actions and support */
.ds-actions{grid-template-columns:minmax(0,4fr) minmax(0,6fr);align-items:start}
.ds-actions .ds-split-copy{padding-top:12px}
.ds-actions .feature-board{padding:clamp(16px,2.4vw,36px);gap:20px}
.ds-actions .feature-panel{max-width:none}
.ds-actions .feature-panel .rp-messages{padding:26px 24px;gap:22px}
.ds-actions .feature-panel .rp-messages .rp-user>p,.ds-actions .feature-panel .rp-answer{font-size:17px}
.ds-actions .feature-status{font-size:15px;margin-top:0;text-align:left}
.ds-actions .feature-story>figcaption{text-align:left;margin-top:10px}
.ds-support{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px clamp(40px,5vw,88px);align-items:start;margin-top:clamp(72px,8vw,120px);padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--hair);scroll-margin-top:calc(var(--nav-h) + env(safe-area-inset-top) + 24px)}
.ds-support .ch-prose{margin-bottom:clamp(32px,3.5vw,48px)}
html.dl-story .ds-support .handoff-figure{margin-top:0}
html.dl-story .ds-support .handoff{grid-template-columns:1fr;row-gap:0;border-left:1px solid #d6d6cf;margin-left:6px}
html.dl-story .ds-support .handoff>li{padding:0 0 22px 26px;border-top:0}
html.dl-story .ds-support .handoff>li::before{top:5px;left:-6px}
html.dl-story .ds-support .handoff>li:last-child{padding-bottom:0}
html.dl-story .ds-support .handoff p{max-width:52ch}
html.dl-story .ds-support .homeowner-stage{background:var(--cream);padding:40px 28px 26px}
html.dl-story .ds-support .native-ray{justify-self:center}

/* evaluation: what the golden set checked beside what it could not */
html.dl-story .ray-eval{background:var(--neutral)}
.ds-eval{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.ds-eval-col{padding:clamp(24px,2.6vw,36px);border-radius:16px;background:#fff;border:1px solid #e0e0da}
.ds-eval-col.is-next{background:transparent;border:1.5px dashed #c4c4bb}
.ds-eval-label{font-size:16px;font-weight:500;color:var(--ink);margin:0 0 18px!important}
.ds-eval dl{display:grid;gap:16px;margin:0}
.ds-eval dt{font-size:13.5px;color:#77776f}
.ds-eval dd{margin:4px 0 0;font-size:clamp(18px,.4vw + 16px,21px);color:#2a2a27}
.ds-eval ul{list-style:none;display:grid;gap:14px}
.ds-eval li{position:relative;padding-left:30px;font-size:clamp(17px,.3vw + 16px,19px);line-height:1.45;color:#34342f}
.ds-eval li::before{content:"";position:absolute;left:2px;top:.66em;width:16px;height:1.5px;background:#a3a39a}
.ds-eval .eval-pass{font-size:16px}
.ds-eval>figcaption{grid-column:1/-1;margin-top:2px}
html.dl-story .ray-engineering .ds-head{margin-bottom:clamp(40px,4vw,56px)}
html.dl-story .ray-engineering .cs-lead{color:#b9bdb7}

/* ---------- close ---------- */
.ds-close-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(40px,5vw,80px);align-items:start}
.ds-close-grid .dl-depth{max-width:none}
.ds-close-grid .credits-detail{margin-top:0}
.ds-close-grid .cs-details>summary{font-size:15.5px;font-weight:500;color:#4e4d48}
.ds-close-actions{margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--hair)}

/* ---------- tablet ---------- */
@media (max-width:1099px){
  .ds-hero-grid{grid-template-columns:1fr}
  html.dl-story .ds-h1{max-width:none}
  .ds-hero-visual{max-width:720px;justify-self:start}
  .ds-split,.ds-actions{grid-template-columns:1fr}
  .ds-notes-pair{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px}
  .ds-home-grid,.ds-language{grid-template-columns:1fr}
  .ds-home-screens{max-width:820px}
  .ds-support{grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:40px}
}
@media (max-width:999px){
  .ds-head,.ds-close-grid{grid-template-columns:1fr;gap:20px}
  .ds-stage-line{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}
  .ds-stage-line>li:nth-child(3)::before{right:0}
  html.dl-story .sheet-stage{grid-template-columns:1fr;grid-template-areas:"request" "file" "live"}
  html.dl-story .sh-live{padding:28px 28px 26px;border-top:1px solid #dcdcd5}
  .ds-eval{grid-template-columns:1fr}
}
@media (max-width:759px){
  html.dl-story{--pad:20px;--gap-chapter:clamp(64px,14vw,88px)}
  .ds-hero{padding-top:92px}
  html.dl-story .ds-h1{font-size:clamp(40px,10vw + 6px,52px)}
  .ds-hero-role{grid-template-columns:1fr;gap:4px}
  .ds-parts{grid-template-columns:1fr}
  .ds-parts a{padding:16px 0 18px;border-top-width:1px}
  .ds-parts b{font-size:28px}
  .ds-part{font-size:26px;padding-top:14px}
  .ds-stage-line{grid-template-columns:1fr;row-gap:0;border-left:2px solid #e1ded4;margin-left:6px}
  .ds-stage-line>li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 10px;padding:0 0 20px 18px}
  .ds-stage-line>li::before{display:none}
  .ds-stage-line>li::after{top:3px;left:-8px}
  .ds-stage-n{grid-row:1/3;margin:2px 0 0}
  .ds-stage-line p{margin-top:4px}
  .ds-notes-pair{grid-template-columns:1fr;gap:48px}
  .ds-home-screens{grid-template-columns:1fr;gap:48px;justify-items:center}
  html.dl-story .dl-shot{width:100%;max-width:300px}
  html.dl-story .dl-shot:nth-child(2),html.dl-story .dl-shot:nth-child(3){margin-top:0}
  html.dl-story .dl-authentic-caption{text-align:center}
  .ds-tones{grid-template-columns:1fr}
  .ds-tone{padding:22px 20px}
  html.dl-story .sheet-request{grid-template-columns:1fr;padding:18px 16px}
  html.dl-story .sh-file{padding:20px 16px}
  html.dl-story .sh-live{padding:22px 16px 20px}
  html.dl-story .sh-live .sh-table td,html.dl-story .sh-live .sh-table small,html.dl-story .sh-live .sh-table .cs-tag{font-size:16px}
  html.dl-story .sh-live .sh-table td{padding:0}
  .ds-actions .feature-board{padding:10px 8px 16px;border-radius:12px}
  .ds-actions .feature-panel .rp-messages{padding:20px 14px;gap:20px}
  .ds-actions .feature-panel .rp-messages .rp-user>p,.ds-actions .feature-panel .rp-answer{font-size:16px}
  .ds-support{grid-template-columns:1fr;gap:40px}
  html.dl-story .ds-support .homeowner-stage{padding:16px 12px 20px}
  .ds-close-actions .cs-btn{width:100%}
}
@media (max-width:599px){
  .ds-hv{grid-template-columns:1fr;border-radius:16px}
  .ds-hv-portal{padding:16px 16px 14px;border-radius:15px 15px 0 0}
  .ds-hv-brand{padding-bottom:10px;margin-bottom:12px!important}
  .ds-hv-brand img{width:76px}
  .ds-hv-name{font-size:19px}
  .ds-hv-meta{margin-top:2px!important}
  .ds-hv-stage{margin:14px 0 12px}
  .ds-hv-reqs{gap:6px}
  .ds-hv-reqs li{padding:9px 12px}
  .ds-hv-ray{gap:12px;padding:14px 16px 16px;border-left:0;border-top:1px solid #e6e4dc}
  .ds-hv-ray-head{padding-bottom:10px}
  .ds-hv-a{gap:8px}
  .ds-hv-a>img{width:24px;height:24px}
  .ds-hv-a>div{padding:10px 13px}
  .ds-hv-a .ds-hv-src{margin-top:8px;padding-top:6px}
}
/* ---------- phones (v4): one reading system ----------
   Every chapter reads the same way on a phone: eyebrow, a balanced headline
   at full measure, prose, then the evidence with a short caption and any
   detail below it. Frames that only repeated a parent frame are dropped so
   product UI keeps its width; nothing is hidden that carries the story. */
@media (max-width:1099px){
  /* the dashboard's detail follows its figure, as in every other chapter;
     the figure holds no controls, so focus order is unchanged */
  .ds-split{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .ds-split-copy{display:contents}
  html.dl-story .ds-split>figure{order:1;margin-top:clamp(32px,4vw,44px)}
  .ds-split-copy>.dl-depth{order:2}
}
@media (max-width:759px){
  html.dl-story .cs-h2{font-size:clamp(30px,6.2vw + 8px,36px);line-height:1.08;letter-spacing:-.035em;max-width:22ch;text-wrap:balance}
  html.dl-story .cs-h3{max-width:none;text-wrap:balance}
  html.dl-story .cs-kicker{margin-bottom:14px}
  html.dl-story figure>figcaption{margin-top:14px}
  html.dl-story .dl-depth{margin-top:28px}
  .ds-part{margin-bottom:36px}
  .ds-head{margin-bottom:32px}
  .ds-takeaway{margin-top:36px}

  /* opening: the role on one line, the three parts as a compact index */
  .ds-hero-grid{gap:32px}
  .ds-hero-role{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 16px;margin-top:32px;padding-top:14px}
  .ds-hero-role p{order:-1;font-weight:500}
  .ds-parts{margin-top:24px}
  .ds-parts a{grid-template-columns:minmax(0,1fr) 20px;gap:4px 12px;padding:14px 0 16px}
  .ds-parts a>*{grid-column:1}
  .ds-parts a::after{content:"";grid-column:2;grid-row:1/4;align-self:center;justify-self:center;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.55;transition:opacity var(--t-press) var(--ease-out)}
  .ds-parts a:hover::after,.ds-parts a:active::after{opacity:1;color:var(--orange-ink)}
  .ds-parts b{font-size:27px}
  .ds-parts a>span:last-child{font-size:15px}
  .ds-stages>figcaption{margin-top:16px}

  /* homeowner screens: a native, snapping row with the next screen showing.
     It bleeds to the screen edges; the page itself never scrolls sideways. */
  .ds-home-grid{gap:32px}
  .ds-home-copy{padding-top:0}
  .ds-home-screens{display:flex;gap:14px;justify-items:normal;align-items:start;max-width:none;margin:0 calc(-1 * max(var(--pad),env(safe-area-inset-right))) 0 calc(-1 * max(var(--pad),env(safe-area-inset-left)));padding:4px max(var(--pad),env(safe-area-inset-right)) 14px max(var(--pad),env(safe-area-inset-left));overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--pad),env(safe-area-inset-left));scrollbar-width:thin;scrollbar-color:rgba(76,40,6,.28) transparent;-webkit-overflow-scrolling:touch}
  .ds-home-screens:focus-visible{outline-offset:-3px;border-radius:12px}
  html.dl-story .ds-home-screens>.dl-shot{flex:0 0 min(300px,calc(100% - 56px));max-width:none;scroll-snap-align:start}
  html.dl-story .dl-shot img{border-radius:24px;box-shadow:0 24px 44px -32px rgba(76,40,6,.5)}
  html.dl-story .dl-shot>figcaption{margin-top:14px;font-size:14px}
  html.dl-story .dl-authentic-caption{text-align:left;margin-top:12px}
  .ds-language{margin-top:56px;padding-top:36px;gap:28px}
  .ds-tones{gap:12px}


  /* sheets: saved rows mirror the CSV rows above them, so the change reads */
  html.dl-story .sh-live .sh-table tr{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 12px;padding:13px 14px}
  html.dl-story .sh-live .sh-table td::before{content:none}
  html.dl-story .sh-live .sh-table td:nth-child(2){justify-self:end}
  html.dl-story .sh-live .sh-table small{color:#5f5f59}
  html.dl-story .sh-actions{display:flex;flex-wrap:wrap;gap:8px}
  html.dl-story .sh-actions .cs-btn{flex:1 1 auto;min-height:44px;padding:0 16px}

  /* actions: the chat is the frame; no grey board around it */
  .ds-actions .feature-board{padding:0;gap:14px;background:transparent;border-radius:0}
  .ds-actions .feature-panel>.rp-chat{box-shadow:0 20px 44px -36px #32322966}
  .ds-actions .feature-status{margin-top:14px;color:#55554f}
  .ds-actions .feature-replay{margin-top:12px;text-align:left}
  .ds-actions .feature-story>figcaption{margin-top:6px}
  .ds-support{margin-top:56px;padding-top:36px;gap:36px}
  html.dl-story .ds-support .homeowner-stage{padding:20px 14px}
  html.dl-story .ds-support .native-ray{max-width:380px}

  .ds-eval-col{padding:22px 20px}
  .ds-close-actions{margin-top:36px;padding-top:0;border-top:0}
}
@media (max-width:599px){
  /* the Ray panel already sits under the project it names */
  .ds-hv-ray-head span{display:none}
  .ds-actions .feature-panel .rp-tools{display:none}
  html.dl-story .dl-note-figure>figcaption,html.dl-story .dl-phone-figure>figcaption{text-align:left;margin-left:0}
  html.dl-story .dl-phone-figure{max-width:340px}
}
/* dashboard rows: name across the top, stage and next step side by side in
   columns that line up from row to row; narrower phones keep the stack */
@media (min-width:360px) and (max-width:599px){
  html.dl-story .dp-jobs tbody{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:16px}
  html.dl-story .dp-jobs tr{grid-column:1/-1;grid-template-columns:subgrid;gap:12px 16px;padding:18px 0}
  html.dl-story .dp-jobs tbody th{grid-column:1/-1}
  html.dl-story .dp-jobs td{min-width:0}
}
/* touch at any width, landscape phones included: the view switches stay a full tap */
@media (pointer:coarse){
  html.dl-story .ray-product .ray-window-controls button{min-width:44px;min-height:44px}
}
/* without motion the streamed events sit still on their lane, not vanish */
@media (prefers-reduced-motion:reduce){
  html.dl-story .eng-event-lane i{animation:none;opacity:1}
  html.dl-story .eng-event-lane i:nth-child(2){left:24%}html.dl-story .eng-event-lane i:nth-child(3){left:44%}html.dl-story .eng-event-lane i:nth-child(4){left:64%}html.dl-story .eng-event-lane i:nth-child(5){left:84%}
}
html.reduce-motion.dl-story .eng-event-lane i{animation:none;opacity:1}
html.reduce-motion.dl-story .eng-event-lane i:nth-child(2){left:24%}html.reduce-motion.dl-story .eng-event-lane i:nth-child(3){left:44%}html.reduce-motion.dl-story .eng-event-lane i:nth-child(4){left:64%}html.reduce-motion.dl-story .eng-event-lane i:nth-child(5){left:84%}
@media print{
  .ds-hv{box-shadow:none}
  html.dl-story .ds-home,html.dl-story .dl-project,html.dl-story .dl-notes,html.dl-story .ray-sheets,html.dl-story .ray-eval{background:#fff}
  html.dl-story .ray-open{--ro-cream:var(--ink);--ro-soft:var(--prose);--ro-hair:var(--hair-strong);--ro-ember:var(--orange-ink);padding-top:32px;background:#fff;color:var(--ink)}
  html.dl-story .ray-open-stage{display:none}
  html.dl-story .ray-open-lit{display:none}
  html.dl-story .ray-open-word{transform:none;margin-bottom:0}
  html.dl-story .ray-open-dusk{clip-path:none}
}