/* Shared chrome for the published story pages. Story colors remain page-specific. */
header{border-bottom:0}
header .masthead{position:relative;height:auto;padding:16px 34px 10px;display:flex;align-items:center;justify-content:space-between}
header .wordmark img{display:block;width:75px;height:auto}
header .collection{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:400 10px/1.2 'IBM Plex Mono',monospace;letter-spacing:1.2px;white-space:nowrap}
header .header-actions{display:flex;align-items:center;gap:13px}
header .masthead .header-actions button{font:400 10px 'IBM Plex Mono',monospace;padding:5px;white-space:nowrap}
header .masthead #reset-collage{padding:7px 10px;border-radius:0}
header nav{min-height:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;overflow:visible;padding:8px 20px 15px}
header nav button{font:400 12px Inter,Arial,sans-serif;padding:9px 18px;border-radius:0;white-space:nowrap}
header .progress{position:relative;inset:auto;height:2px;background:#e2e4dd;overflow:hidden}

/* Each navigation item previews its destination's card color on every page. */
header nav :is([data-story="City of Ketchum"],[href="ketchum"],[data-story="ElevenLabs"],[href="elevenlabs"]){--nav-story-rgb:25 59 50;--nav-story-text:#fff}
header nav :is([data-story="Notion"],[href="notion"],[data-story="Eight Sleep"],[href="eightsleep"]){--nav-story-rgb:94 84 14;--nav-story-text:#fff}
header nav :is([data-story="Denver Broncos"],[href="broncos"],[data-story="Baked by Melissa"],[href="bakedbymelissa"]){--nav-story-rgb:233 101 22;--nav-story-text:#1a1919}
header nav :is(button[data-story],a[href]){background:transparent;color:#1a1919;transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease}
@media(hover:hover){header nav :is(button[data-story],a[href]):hover{background:rgb(var(--nav-story-rgb) / .2);border-color:rgb(var(--nav-story-rgb) / .45);color:#1a1919}}
header nav :is(button[data-story],a[href]):focus-visible{background:rgb(var(--nav-story-rgb) / .2);border-color:rgb(var(--nav-story-rgb) / .45);color:#1a1919}
header nav :is(button[data-story],a[href]):is(:active,.selected,[aria-pressed="true"]){background:rgb(var(--nav-story-rgb));border-color:rgb(var(--nav-story-rgb));color:var(--nav-story-text)}
header nav :is(button[data-story],a[href]):active,body.reduced header nav :is(button[data-story],a[href]){transition:none}
@media(prefers-reduced-motion:reduce){header nav :is(button[data-story],a[href]){transition:none}}

.title-card h1{font:700 clamp(40px,7.3vw,112px)/1.05 'TWK Lausanne',Inter,Arial,sans-serif;font-synthesis:none;letter-spacing:-.04em;margin:0}
.hero-meta,.hero-foot{left:40px;right:40px;display:flex;align-items:center;justify-content:space-between}
.hero-meta{top:30px;font:400 10px/1.2 'IBM Plex Mono',monospace;letter-spacing:1px}
.hero-foot{bottom:32px;font:400 12px/1.2 'TWK Lausanne',Inter,Arial,sans-serif}
.hero-foot a{display:flex;align-items:center;gap:22px;color:inherit;text-decoration:none}
.hero-foot a span{font-size:24px;margin:0}

@media(max-width:700px){
  header .masthead{padding:12px 18px 5px}
  header .wordmark img{width:75px;height:auto}
  header .collection{display:none}
  header .header-actions{gap:5px}
  header .masthead .header-actions button{font-size:9px;padding:5px}
  header .masthead #reset-collage{padding:6px 7px}
  header nav{justify-content:center;gap:6px;padding:9px 12px 12px}
  header nav button{font-size:10px;padding:8px 12px}
  .title-card h1{font-size:clamp(35px,9.7vw,68px)}
  .hero-meta,.hero-foot{left:24px;right:24px}
  .hero-meta{font-size:9px}
  .hero-foot{font-size:11px}
}

/* Use a pure white canvas and opaque navigation on every page. */
:root{--paper:#fff}
html,body{background-color:#fff}
header,header .masthead,header nav{background:#fff;backdrop-filter:none}
#grid{background-color:#fff}

/* Previous/next CTAs preview the destination story's intro color. */
.ending-actions [data-story="City of Ketchum"],.ending-actions [data-story="ElevenLabs"]{--destination-color:#193b32}
.ending-actions [data-story="Notion"],.ending-actions [data-story="Eight Sleep"]{--destination-color:#5e540e}
.ending-actions [data-story="Denver Broncos"],.ending-actions [data-story="Baked by Melissa"]{--destination-color:#e96516}
.ending-actions button[data-story]:hover,.ending-actions button[data-story]:focus-visible{background:var(--destination-color);border-color:var(--destination-color);color:#fff}

/* Keep the negative-z grid above the white body fill, behind page content. */
body{isolation:isolate}

/* Keep the logo, story links, and utilities on one row whenever they fit. */
header{display:grid;grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);align-items:center;column-gap:16px;padding:16px 34px 0}
header .masthead{display:contents}
header .masthead .wordmark{grid-column:1;grid-row:1;justify-self:start}
header .masthead .header-actions{grid-column:3;grid-row:1;justify-self:end}
header nav{grid-column:2;grid-row:1;flex-wrap:nowrap;margin:0;padding:0}
header .progress{grid-column:1/-1;grid-row:3;width:calc(100% + 68px);margin:14px -34px 0}
header:not(:has(.progress)){padding-bottom:16px}
header.nav-stacked nav{grid-column:1/-1;grid-row:2;flex-wrap:wrap;margin-top:14px}
@media(max-width:700px){
 header{padding:12px 18px 0;column-gap:10px}
 header .progress{width:calc(100% + 36px);margin:12px -18px 0}
 header.nav-stacked nav{margin-top:12px}
 header:not(:has(.progress)){padding-bottom:12px}
}

@media(max-width:700px){
 header nav a,header nav button{font-size:14px;line-height:1.25;min-height:44px;padding:11px 12px;display:flex;align-items:center;justify-content:center}
}

@media(max-width:700px){
 header .masthead .header-actions{grid-column:1/-1;max-width:calc(100vw - 131px);flex-wrap:wrap;justify-content:flex-end;gap:4px 8px}
 header .masthead .header-actions button{font-size:14px;line-height:1.25;min-height:44px;padding:8px;display:flex;align-items:center;justify-content:center}
 header .masthead #reset-collage,header .masthead #motion{font-size:14px;line-height:1.25}
 header .masthead #reset-collage{width:44px;height:44px;flex:none;padding:0}
 header .masthead #reset-collage .reset-icon{font-size:20px;line-height:1}
 header .masthead #reset-collage .reset-label{display:none}
}
@media(min-width:300px) and (max-width:700px){header .masthead .header-actions{flex-wrap:nowrap}}

/* Simplify story intro cards and the fixed reading indicator. */
.title-card .hero-foot > span{display:none}
.title-card .hero-foot{justify-content:center;text-align:center}
.title-card .hero-foot a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.title-card .hero-foot a span{display:block;margin:0;line-height:1;font-size:28px}
.position #chapter-label{display:none}
.position{justify-content:flex-end}
@media(max-width:700px){
 .title-card .hero-meta{font-size:12px}
}

/* Outro titles match the intro lockups at every viewport size. */
.closing .ending-panel h2{font:700 clamp(40px,7.3vw,112px)/1.05 'TWK Lausanne',Inter,Arial,sans-serif;font-synthesis:none;letter-spacing:-.04em;margin:0}
.closing .ending-actions #replay:hover,.closing .ending-actions #replay:focus-visible{background:#fff;border-color:#fff;color:#1a1919}
@media(max-width:700px){
 .closing .ending-panel h2{font-size:clamp(35px,9.7vw,68px)}
}

/* Shared chapter navigation, centered in the visible story area. */
.chapter-index{position:fixed;left:22px;top:calc((100svh + var(--nav))/2);transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;z-index:21}
.chapter-index a{display:block;flex:0 0 8px;width:8px;height:8px;border-radius:50%;transform:scale(1);transform-origin:center;transition:transform .2s,background .2s}
.chapter-index a:hover{transform:scale(1.7)}
.chapter-index a.active,.chapter-index a.active:hover{transform:scale(1.8)}
@media(max-width:700px){
 .chapter-index{left:10px;gap:12px}
}

/* One grid-locked dashed guide treatment for every story. */
body #grid::before{content:'';position:absolute;top:0;bottom:0;left:var(--story-spine-x,var(--spine-x));width:1px;transform:none;background:#fff;pointer-events:none}
body #grid::after{content:'';position:absolute;top:0;bottom:0;left:var(--story-spine-x,var(--spine-x));width:1px;transform:none;background:repeating-linear-gradient(to bottom,#5c706780 0 calc(var(--story-row,24px) * .2),transparent calc(var(--story-row,24px) * .2) calc(var(--story-row,24px) * .5));background-size:1px var(--story-row,24px);background-position:0 var(--story-dash-y,0px);opacity:1;pointer-events:none}
body .chapter-index{left:calc(var(--chapter-grid-x,34px) - 4px)}
@media(max-width:700px){body #grid::after{background-position-y:var(--story-dash-y,0px)!important}}

/* Fit one painted rectangle to the grid without stretching the card's text.
   Clip only the painted surface so the card's content cannot be cut off.
   Do not pre-promote the transparent card: its surface can extend past its box. */
body .grid-card-fill{background:transparent;isolation:isolate;overflow:visible;will-change:auto}
body .grid-card-fill::before{content:'';position:absolute;left:var(--fill-x,0px);top:var(--fill-y,0px);width:calc(100% * var(--fill-scale-x,1));height:calc(100% * var(--fill-scale-y,1));z-index:-1;pointer-events:none;background:var(--card-color);clip-path:inset(0)}
.title-card.grid-card-fill{--fill-x:var(--intro-fill-x,0px);--fill-y:var(--intro-fill-y,0px);--fill-scale-x:var(--intro-fill-scale-x,1);--fill-scale-y:var(--intro-fill-scale-y,1)}
.ending-panel.grid-card-fill{--fill-x:var(--outro-fill-x,0px);--fill-y:var(--outro-fill-y,0px);--fill-scale-x:var(--outro-fill-scale-x,1);--fill-scale-y:var(--outro-fill-scale-y,1)}

/* Keep metadata legible inside the painted surface even when it snaps inward. */
.title-card.grid-card-fill .hero-meta{--hero-inset:40px;left:calc(var(--fill-x,0px) + var(--hero-inset));right:calc(100% - 100% * var(--fill-scale-x,1) - var(--fill-x,0px) + var(--hero-inset));top:calc(var(--fill-y,0px) + 30px)}
@media(max-width:700px){.title-card.grid-card-fill .hero-meta{--hero-inset:24px}}