/* V8 Starwink chapter: Starwink's own ground, type and evidence inside the company grid.
   Everything here is the finished, readable composition. starwink.js only arrives at it. */

/* Moved from the retired V7 studies.css so the approach chapter stays unchanged. */
.approach-signoff{font-size:12px!important;line-height:1.6;color:var(--muted);margin-top:28px!important;max-width:34ch}

.sw8{--sw8-ink:#31190e;--sw8-cream:#fdf1dd;--sw8-orange:#fd7f28;--sw8-muted:#725d4f;--sw8-rule:rgba(49,25,14,.2);--sw8-device:#1b130e;position:relative;background:#e7e1d7;color:var(--sw8-ink);padding:clamp(40px,4vw,72px) 0 88px}
.sw8 h2,.sw8 h3,.sw8 h4{margin:0;font-family:StarwinkDisplay,"Open Sans",Arial,sans-serif;font-weight:600;letter-spacing:-.03em}
.sw8 p{font-size:14px;line-height:1.7}
.sw8 figure,.sw8 blockquote{margin:0}
.sw8 .sw8-label{font-size:12px;line-height:1.5}
.sw8 .sw8-index{display:flex;align-items:baseline;gap:14px;margin-bottom:20px;font-size:11px;line-height:1.5;color:var(--sw8-muted)}
.sw8-index b{font-weight:400;color:var(--sw8-ink);font-variant-numeric:tabular-nums}

/* Links: company underline, Starwink orange on intent. */
.sw8-visit{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px;padding:14px 21px;width:fit-content;border:1px solid var(--sw8-ink);border-radius:4px;background:var(--sw8-ink);color:var(--sw8-cream);font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap;transition:background .35s,color .35s,border-color .35s}
.sw8-visit:hover,.sw8-visit:focus-visible{background:var(--sw8-orange);border-color:var(--sw8-orange);color:var(--sw8-ink)}
.sw8-visit:focus-visible{outline:2px solid var(--sw8-ink);outline-offset:4px}
.sw8-visit .sw8-arrow{color:var(--sw8-orange);font-size:18px}
.sw8-visit:hover .sw8-arrow,.sw8-visit:focus-visible .sw8-arrow{color:inherit;transform:translate(3px,-3px)}
.sw8-arrow{display:inline-block;transition:transform .45s var(--arrival)}

/* Chapter bar */
.sw8-bar{position:relative;align-items:center;padding-bottom:24px}
.sw8-bar:after{content:'';position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:var(--sw8-rule)}
.sw8-bar .sw8-wordmark{grid-column:1/4;width:150px;height:auto}
.sw8-bar .sw8-label{grid-column:5/9}
.sw8-bar .sw8-visit{grid-column:9/-1;justify-self:end}

/* The product mark lives in the rail; the promise reads without an inline logo. */
.sw8-intro{margin-top:clamp(44px,4vw,72px)}
.sw8-title{grid-column:1/-1;font-size:clamp(40px,4.6vw,80px);line-height:1.06}

/* 01: one story, its world and the app screen that opens it. */
.sw8-open{margin-top:clamp(56px,5.5vw,100px);align-items:start}
.sw8-lede{grid-column:1/4;grid-row:1;max-width:36ch}
.sw8 .sw8-lede p{font-size:clamp(14px,1.05vw,17px);line-height:1.7}
.sw8-art{grid-column:6/-1;grid-row:1/3}
.sw8-art-frame{overflow:hidden;background:#fcefdb}
.sw8-art-frame img{aspect-ratio:1292/1218}
.sw8-art figcaption{margin-left:14.8%}
.sw8-open>.sw8-device{grid-column:4/7;grid-row:1/3;margin-top:clamp(70px,8.5vw,160px);position:relative;z-index:2}
.sw8-story{grid-column:1/4;grid-row:2;align-self:end;max-width:34ch}
.sw8-story h3{font-size:clamp(26px,2.2vw,40px);line-height:1.08;margin-bottom:16px}

/* App presentations in the original dark device frame. */
.sw8-phone{position:relative;padding:clamp(5px,.48vw,9px);border-radius:clamp(26px,2.9vw,52px);background:var(--sw8-device);box-shadow:inset 0 0 0 1px rgba(253,241,221,.09),0 50px 80px -40px rgba(49,25,14,.6),0 18px 30px -18px rgba(49,25,14,.32)}
.sw8-phone img{aspect-ratio:780/1732;border-radius:clamp(21px,2.45vw,44px)}
.sw8-phone--land{border-radius:clamp(22px,2.2vw,42px)}
.sw8-reader-preview{position:relative;container-type:inline-size;overflow:hidden;aspect-ratio:1800/866;border-radius:clamp(17px,1.75vw,34px);background:#1c1915}
.sw8-phone--land .sw8-reader-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;aspect-ratio:auto;border-radius:0}
.sw8-reader-close{position:absolute;top:2%;left:1.4%;display:grid;place-items:center;width:5.7%;aspect-ratio:1;border:1px solid rgba(255,255,255,.13);border-radius:50%;background:rgba(255,255,255,.035);color:rgba(255,255,255,.42)}
.sw8-reader-close svg{width:42%;height:42%}
.sw8 .sw8-reader-words{position:absolute;left:7%;right:7%;bottom:5%;margin:0;text-align:center;font:600 2.05cqi/1.35 StarwinkDisplay,"Open Sans",Arial,sans-serif;color:#fff;text-wrap:pretty;-webkit-text-stroke:.25px rgba(0,0,0,.5);paint-order:stroke fill;text-shadow:0 1px 2px rgba(0,0,0,.92),0 2px 8px rgba(0,0,0,.75),0 4px 22px rgba(0,0,0,.55),0 0 44px rgba(0,0,0,.42)}
.sw8-verse{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sw8 figcaption{display:flex;justify-content:space-between;gap:18px;padding-top:14px;font-size:11px;line-height:1.55;color:var(--sw8-muted)}
.sw8 figcaption span:first-child{color:var(--sw8-ink)}

/* 02: the cast, in a staggered editorial rhythm. */
.sw8-cast{margin-top:clamp(110px,11vw,210px);align-items:end}
.sw8-cast-head{grid-column:1/8}
.sw8-cast-head h3{font-size:clamp(32px,3.4vw,64px);line-height:1.06}
.sw8-cast-note{grid-column:9/-1;justify-self:end;max-width:30ch}
.sw8-chars{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2vw;align-items:start;margin-top:clamp(40px,4.4vw,80px)}
.sw8-char:nth-child(2){margin-top:clamp(48px,6.5vw,124px)}
.sw8-char:nth-child(3){margin-top:clamp(20px,2.4vw,46px)}
.sw8-char-frame{position:relative;overflow:hidden;aspect-ratio:4/5;background:#eadccb}
.sw8-char-media{width:100%;height:100%;transition:transform 1.1s var(--arrival)}
.sw8-char-media img{width:100%;height:100%;object-fit:cover}
.sw8-char--tella img{object-position:84% 50%}
.sw8-char--dob img{object-position:12% 50%}
.sw8-char--oona img{object-position:66% 50%}
@media(hover:hover) and (pointer:fine){.sw8-char:hover .sw8-char-media{transform:scale(1.035)}}
.sw8 .sw8-char figcaption{display:block;padding-top:18px;color:var(--sw8-ink)}
.sw8-char h4{font-size:clamp(22px,1.75vw,32px);line-height:1.1}
.sw8 .sw8-char-story{margin-top:4px;font-size:11px;line-height:1.5;color:var(--sw8-muted)}
.sw8 .sw8-char-copy{margin-top:12px;max-width:34ch;font-size:13px;line-height:1.65}

/* 03: reading together, shown in the actual reader. */
.sw8-read{margin-top:clamp(110px,11vw,210px);align-items:end}
.sw8-read>.sw8-device{grid-column:1/9}
.sw8-read-copy{grid-column:10/-1;padding-bottom:clamp(30px,3vw,56px)}
.sw8-read-copy h3{font-size:clamp(26px,2.3vw,44px);line-height:1.08;margin-bottom:18px}
.sw8-read-copy .sw8-visit{margin-top:26px}
@media(min-width:701px) and (max-width:1000px){
  .sw8-title{font-size:6.4vw}
  .sw8-open{row-gap:44px}
  .sw8-lede{grid-column:1/9;grid-row:1}
  .sw8-art{grid-column:4/-1;grid-row:2}
  .sw8-art figcaption{margin-left:11.4%}
  .sw8-open>.sw8-device{grid-column:1/5;grid-row:2;margin-top:14vw}
  .sw8-story{grid-column:1/9;grid-row:3;align-self:start}
  .sw8-cast-head{grid-column:1/-1}
  .sw8-cast-note{grid-column:1/-1;justify-self:start;margin-top:18px}
  .sw8-char:nth-child(2){margin-top:5vw}
  .sw8-char:nth-child(3){margin-top:2vw}
  .sw8 .sw8-char-copy{font-size:12px}
  .sw8-read{row-gap:30px}
  .sw8-read>.sw8-device{grid-column:1/-1}
  .sw8-read-copy{grid-column:1/9;padding:0}
}
@media(max-width:700px){
  .sw8{padding:26px 0 76px}
  .sw8 .sw8-label{font-size:11px}
  .sw8-bar .sw8-wordmark{grid-column:1/4;grid-row:1;width:132px}
  .sw8-bar .sw8-label{grid-column:4/-1;grid-row:1;justify-self:end}
  .sw8-bar .sw8-visit{grid-column:1/-1;grid-row:2;width:100%;margin-top:20px}
  .sw8-read-copy .sw8-visit{width:100%;max-width:320px}
  .sw8-intro{margin-top:46px}
  .sw8-title{font-size:10.6vw}
  .sw8-open{margin-top:34px}
  .sw8-lede{grid-column:1/-1;grid-row:1;margin-bottom:38px}
  .sw8 .sw8-lede p{font-size:14px}
  .sw8-art{grid-column:1/-1;grid-row:2}
  .sw8-art figcaption{display:none}
  /* Tucks onto the snowy lower edge only; Tove, her boots and the mailbox stay clear. */
  .sw8-open>.sw8-device{grid-column:1/5;grid-row:3;margin-top:-12vw}
  .sw8-story{grid-column:1/-1;grid-row:4;margin-top:36px;max-width:none}
  .sw8-story h3{font-size:28px}
  .sw8-cast{margin-top:96px}
  .sw8-cast-head{grid-column:1/-1}
  .sw8-cast-head h3{font-size:8.6vw}
  .sw8-cast-note{grid-column:1/-1;justify-self:start;margin-top:16px}
  .sw8-chars{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:15px;row-gap:36px;margin-top:34px}
  .sw8-char:nth-child(n){margin-top:0}
  .sw8-char--tella{grid-column:1/-1}
  .sw8-char--tella .sw8-char-frame{aspect-ratio:4/3}
  .sw8-char h4{font-size:21px}
  .sw8 .sw8-char-copy{font-size:12.5px}
  .sw8-read{margin-top:96px;row-gap:26px}
  .sw8-read>.sw8-device{grid-column:1/-1}
  .sw8-read-copy{grid-column:1/-1;padding:0}
  .sw8-verse{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin-top:22px;padding-left:16px;border-left:2px solid var(--sw8-orange)}
  .sw8 .sw8-verse p{font:500 17px/1.45 StarwinkDisplay,"Open Sans",Arial,sans-serif;letter-spacing:-.01em;max-width:46ch}
  .sw8 figcaption{font-size:10px;gap:12px}
}
@media(prefers-reduced-motion:reduce){
  .sw8 [data-sw8-rise],.sw8-art-frame,.sw8-art-frame img,.sw8-device,.sw8-phone,.sw8-char,.sw8-char-frame,.sw8-char img,.sw8-char figcaption{transform:none!important;opacity:1!important;visibility:visible!important;clip-path:none!important}
  .sw8-char-media,.sw8-visit,.sw8-arrow{transition:none}
  .sw8-char:hover .sw8-char-media{transform:none}
}