/* ==========================================================================
   How Ideas Survive — the room the lecture was given in.
   Slate board and cinderblock wall alternate; a chalk tray divides them.
   ========================================================================== */
@font-face{font-family:'Chalk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ArchitectsDaughter-400-latin.284a3c18.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex';font-style:normal;font-weight:100 700;font-display:swap;src:url(/assets/fonts/IBMPlexSans-400-latin.e2291e84.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'PlexMono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/IBMPlexMono-400-latin.08949f72.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'PlexMono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/IBMPlexMono-500-latin.01d28544.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'PlexMono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/IBMPlexMono-600-latin.0d1f0b8d.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Chalk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ArchitectsDaughter-400-latin-ext.4b7ce446.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plex';font-style:normal;font-weight:100 700;font-display:swap;src:url(/assets/fonts/IBMPlexSans-400-latin-ext.d160e209.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'PlexMono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/IBMPlexMono-400-latin-ext.6bc0f226.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'PlexMono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/IBMPlexMono-500-latin-ext.6bb06407.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'PlexMono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/IBMPlexMono-600-latin-ext.32057cf5.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}


:root{
  --slate:#2a332c; --slate-hi:#39443a; --slate-lo:#1e251f;
  --chalk:#ece9d8; --chalk-2:#aab2a2; --chalk-3:#79836f;
  --wall:#d3c9b5; --wall-2:#c2b69e; --paper:#ece7d9;
  --ink:#201d18; --ink-2:#5b5346;
  --tray:#b4afa3; --tray-hi:#e2ded2; --wood:#7e6545;
  --lamp:#c23d2c; --go:#54a368;
  --maxw:38rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}
body{
  margin:0; background:var(--slate); color:var(--ink);
  font-family:Plex,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.6; overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}

/* ----------------------------------------------------------------- shells */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.15rem}
.wide{max-width:60rem;margin:0 auto;padding:0 1.15rem}

/* slate = chalkboard. Dust and ghosting from erased writing, not flat black. */
.board{
  position:relative; background:var(--slate); color:var(--chalk);
  background-image:
    radial-gradient(68% 40% at 22% 18%, rgba(236,233,216,.055), transparent 70%),
    radial-gradient(52% 34% at 78% 72%, rgba(236,233,216,.04), transparent 72%),
    radial-gradient(40% 60% at 50% 100%, rgba(0,0,0,.28), transparent 70%);
}
.board::after{ /* chalk dust */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.22'/></svg>");
  mix-blend-mode:overlay;
}
.board > *{position:relative;z-index:1}

/* wall = the cinderblock the board is bolted to. Opaque, warm, load-bearing. */
.wall{
  background:var(--wall); color:var(--ink);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 22%),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(32,29,24,.05) 96px 97px),
    repeating-linear-gradient(180deg, transparent 0 48px, rgba(32,29,24,.045) 48px 49px);
}

/* The chalk tray. A real edge: shadow, aluminium lip catching the light, wood. */
.tray{height:15px;position:relative;background:var(--tray);
  background-image:linear-gradient(180deg,var(--tray-hi) 0 3px,var(--tray) 3px 9px,var(--wood) 9px 100%);
  box-shadow:0 -7px 14px rgba(0,0,0,.34), 0 3px 7px rgba(0,0,0,.26);}
.tray::before{content:"";position:absolute;left:12%;top:1px;width:66px;height:5px;border-radius:3px;
  background:linear-gradient(180deg,#fbf9f2,#ddd8c8);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.tray::after{content:"";position:absolute;right:20%;top:2px;width:30px;height:4px;border-radius:3px;
  background:linear-gradient(180deg,#f2eee0,#cfc9b6);box-shadow:0 1px 2px rgba(0,0,0,.3)}

/* --------------------------------------------------------------- lettering */
.chalkface{font-family:Chalk,"Comic Sans MS",cursive;font-weight:400;letter-spacing:.02em;
  text-transform:uppercase;text-shadow:0 0 1px rgba(236,233,216,.42)}
.mono{font-family:PlexMono,ui-monospace,Menlo,Consolas,monospace}
.tc{font-family:PlexMono,ui-monospace,Menlo,monospace;font-size:.72rem;font-weight:600;
  letter-spacing:.09em;font-variant-numeric:tabular-nums}

h1,h2,h3{margin:0;font-weight:400}
h1{font-family:Chalk,cursive;text-transform:uppercase;font-size:clamp(2.6rem,13.5vw,5.2rem);
  line-height:.94;letter-spacing:.01em;text-shadow:0 0 2px rgba(236,233,216,.4)}
h2{font-family:Chalk,cursive;text-transform:uppercase;font-size:clamp(1.85rem,8.4vw,3rem);
  line-height:1.02;text-shadow:0 0 1px rgba(236,233,216,.4)}
.wall h2{text-shadow:none;color:var(--ink)}
h3{font-size:1.06rem;font-weight:600;letter-spacing:-.01em}

/* --------------------------------------------------------------- the hero */
.hero{padding:calc(1.4rem + env(safe-area-inset-top)) 0 2.1rem}
.eyebrow{font-family:PlexMono,monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chalk-2);margin:0 0 1rem}
.hero .dek{font-size:1.06rem;line-height:1.55;color:#d6d3c2;margin:1.1rem 0 0;max-width:33rem}
.hero .dek b{color:var(--chalk);font-weight:600}

/* K + P + T, with the T the size he drew it */
.formula{display:flex;align-items:baseline;gap:.42rem;margin:1.5rem 0 .3rem;flex-wrap:wrap}
.formula i{font-style:normal;font-family:Chalk,cursive;color:var(--chalk);line-height:1}
.formula .k{font-size:2.5rem}.formula .p{font-size:2.5rem}
.formula .t{font-size:1.25rem;position:relative;top:-.1em}
.formula .op{font-size:1.5rem;color:var(--chalk-3)}
.formula-note{font-size:.84rem;color:var(--chalk-2);margin:.1rem 0 0}

/* ------------------------------------------------- Winston's own checklist */
.outline{margin:1.7rem 0 0;border-top:1px solid rgba(236,233,216,.2);padding-top:.5rem}
.outline-h{font-family:PlexMono,monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--chalk-3);margin:0 0 .55rem}
.ck{display:block;width:100%;text-align:left;background:none;border:0;padding:.52rem .2rem;
  color:var(--chalk-2);font-family:Chalk,cursive;text-transform:uppercase;font-size:1.22rem;
  letter-spacing:.02em;cursor:pointer;display:flex;align-items:center;gap:.7rem;line-height:1.1;
  border-bottom:1px solid rgba(236,233,216,.09)}
.ck:last-child{border-bottom:0}
.ck .box{flex:0 0 auto;width:1.05em;height:1.05em;border:2px solid currentColor;position:relative;
  border-radius:2px;transition:color .25s}
.ck .box::after{content:"";position:absolute;left:14%;top:46%;width:34%;height:2.5px;background:var(--chalk);
  transform:rotate(45deg) scaleX(0);transform-origin:left center;transition:transform .22s ease-out}
.ck .box::before{content:"";position:absolute;left:32%;top:60%;width:62%;height:2.5px;background:var(--chalk);
  transform:rotate(-52deg) scaleX(0);transform-origin:left center;transition:transform .26s .17s ease-out}
.ck[data-done="1"]{color:var(--chalk)}
.ck[data-done="1"] .box::after{transform:rotate(45deg) scaleX(1)}
.ck[data-done="1"] .box::before{transform:rotate(-52deg) scaleX(1)}
.ck[aria-current="true"]{color:var(--chalk)}
.ck[aria-current="true"] .lbl{box-shadow:inset 0 -3px 0 rgba(236,233,216,.55)}
.ck .sub{display:block;font-family:Plex,sans-serif;text-transform:none;font-size:.74rem;
  letter-spacing:0;color:var(--chalk-3);margin-top:.1rem}

/* board photograph — full strength, in a frame, never faded behind text */
.plate{margin:1.6rem 0 0;border:1px solid rgba(236,233,216,.22);
  box-shadow:0 14px 34px rgba(0,0,0,.42);background:#111}
.plate img{width:100%}

/* ------------------------------------------------------------- CTA buttons */
.cta-row{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.5rem 0 0}
.btn{appearance:none;border:0;cursor:pointer;font-family:Plex,sans-serif;font-size:.9rem;font-weight:600;
  padding:.78rem 1.05rem;border-radius:3px;display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;line-height:1;min-height:44px}
.btn-lamp{background:var(--lamp);color:#fff;box-shadow:0 2px 0 #8d2a1d, 0 6px 16px rgba(0,0,0,.34)}
.btn-lamp:active{transform:translateY(1px);box-shadow:0 1px 0 #8d2a1d}
.btn-chalk{background:transparent;color:var(--chalk);border:1.5px solid rgba(236,233,216,.4)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.45;cursor:default}

/* ---------------------------------------------------------------- sections */
section{scroll-margin-top:3.4rem}
.sec{padding:2.5rem 0 2.7rem}
.sec-head{display:flex;align-items:baseline;gap:.8rem;margin:0 0 1.1rem}
.sec-n{font-family:PlexMono,monospace;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  color:var(--lamp);flex:0 0 auto;padding-top:.3rem}
.board .sec-n{color:#e8836f}
.lede{font-size:1.1rem;line-height:1.52;margin:0 0 1.15rem}
.board .lede{color:#dedac9}
p{margin:0 0 1rem}
.board p{color:#cdc9b8}
.board strong{color:var(--chalk)}

/* ------------------------------------------------------- the moment player */
.moment{margin:1.3rem 0;background:#141814;border:1px solid rgba(236,233,216,.16);
  box-shadow:0 10px 26px rgba(0,0,0,.36);overflow:hidden}
.wall .moment{border-color:rgba(32,29,24,.24);box-shadow:0 8px 20px rgba(32,29,24,.2)}
.moment-stage{position:relative;aspect-ratio:16/9;background:#0d100d}
.moment-stage img,.moment-stage video{width:100%;height:100%;object-fit:cover;display:block}
.moment-stage video{object-fit:contain;background:#000}
.m-play{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.58));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:#fff}
.m-play .disc{width:58px;height:58px;border-radius:50%;background:var(--lamp);
  display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.5)}
.m-play .disc svg{width:22px;height:22px;margin-left:3px;fill:#fff}
.m-play .cap{font-family:PlexMono,monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 1px 4px rgba(0,0,0,.8)}
.moment-body{padding:.95rem 1rem 1.05rem;background:#1b201b;color:#d9d5c4}
.wall .moment-body{background:var(--paper);color:var(--ink)}
.moment-body blockquote{margin:0;font-size:1.02rem;line-height:1.48}
.moment-body blockquote::before{content:"\201C"}
.moment-body blockquote::after{content:"\201D"}
.moment-meta{display:flex;align-items:center;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
.moment-meta .tc{color:var(--lamp);background:rgba(194,61,44,.13);padding:.24rem .45rem;border-radius:2px}
.moment-meta .who{font-size:.76rem;color:var(--chalk-3)}
.wall .moment-meta .who{color:var(--ink-2)}

/* --------------------------------------------------------------- chalk chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0}
.chip{appearance:none;cursor:pointer;font-family:Chalk,cursive;text-transform:uppercase;font-size:1rem;
  letter-spacing:.04em;padding:.5rem .8rem;min-height:44px;border-radius:2px;
  background:transparent;color:var(--chalk-2);border:1.5px solid rgba(236,233,216,.32)}
.chip[aria-expanded="true"]{color:#141814;background:var(--chalk);border-color:var(--chalk)}
.wall .chip{color:var(--ink-2);border-color:rgba(32,29,24,.4)}
.wall .chip[aria-expanded="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip-body{display:none;margin:.2rem 0 1rem;padding:.9rem 1rem;background:rgba(0,0,0,.22);
  border-left:3px solid var(--lamp);font-size:.96rem;line-height:1.5;color:#d9d5c4}
.chip-body.on{display:block}

/* ------------------------------------------------------- the seven seconds */
.seven{margin:1.4rem 0;padding:1.2rem 1.1rem;background:rgba(0,0,0,.25);
  border:1px solid rgba(236,233,216,.18);text-align:center}
.seven-dial{font-family:PlexMono,monospace;font-size:3.4rem;font-weight:600;line-height:1;
  color:var(--chalk);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.seven-bar{height:6px;background:rgba(236,233,216,.16);margin:.9rem 0 .2rem;overflow:hidden;border-radius:3px}
.seven-fill{height:100%;width:0;background:var(--lamp);transition:width .1s linear}
.seven-note{font-size:.88rem;color:var(--chalk-2);margin:.7rem 0 0;min-height:2.6em}
.seven .btn{margin-top:.9rem}

/* -------------------------------------------------------------- crime sheet */
.crimes{list-style:none;margin:1.2rem 0;padding:0;border-top:1px solid rgba(32,29,24,.18)}
.crime{border-bottom:1px solid rgba(32,29,24,.18)}
.board .crimes{border-color:rgba(236,233,216,.16)}
.board .crime{border-color:rgba(236,233,216,.16)}
.crime > button{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:.92rem .2rem;
  display:flex;align-items:center;gap:.7rem;font-family:Plex,sans-serif;font-size:1rem;font-weight:600;
  color:inherit;min-height:44px;line-height:1.3}
.crime .no{font-family:PlexMono,monospace;font-size:.72rem;color:var(--lamp);flex:0 0 auto}
.crime .tog{margin-left:auto;flex:0 0 auto;width:1.5rem;height:1.5rem;position:relative;opacity:.55}
.crime .tog::before,.crime .tog::after{content:"";position:absolute;background:currentColor;
  left:50%;top:50%;transition:transform .2s}
.crime .tog::before{width:13px;height:2px;transform:translate(-50%,-50%)}
.crime .tog::after{width:2px;height:13px;transform:translate(-50%,-50%)}
.crime[data-open="1"] .tog::after{transform:translate(-50%,-50%) scaleY(0)}
.crime-fix{display:none;padding:0 .2rem 1.05rem;font-size:.97rem;line-height:1.5}
.crime[data-open="1"] .crime-fix{display:block}
.crime-fix .rule{display:block;margin-top:.5rem;font-family:PlexMono,monospace;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--lamp)}

/* ------------------------------------------------------------ Winston's Star */
.star-wrap{margin:1.3rem 0}
.star-svg{width:100%;height:auto;max-width:22rem;margin:0 auto;display:block;overflow:visible}
.star-svg .spoke{stroke:rgba(236,233,216,.34);stroke-width:1.5;fill:none}
.star-svg .pt{cursor:pointer}
.star-svg .pt circle{fill:#1b201b;stroke:var(--chalk-2);stroke-width:1.5;transition:all .2s}
.star-svg .pt text{fill:var(--chalk-2);font-family:PlexMono,monospace;font-size:8.5px;font-weight:600;
  letter-spacing:.1em;text-anchor:middle;pointer-events:none;text-transform:uppercase}
.star-svg .pt[aria-pressed="true"] circle{fill:var(--lamp);stroke:var(--lamp)}
.star-svg .pt[aria-pressed="true"] text{fill:#fff}
.star-read{margin:.4rem 0 0;padding:1rem;background:rgba(0,0,0,.24);border-left:3px solid var(--lamp);
  min-height:6.5rem;font-size:.98rem;line-height:1.5;color:#d9d5c4}
.star-read h4{margin:0 0 .35rem;font-family:Chalk,cursive;text-transform:uppercase;font-size:1.25rem;
  font-weight:400;color:var(--chalk)}

/* -------------------------------------------------------------- final slides */
.ends{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.2rem,1fr));gap:.6rem;margin:1.2rem 0}
.end{appearance:none;cursor:pointer;border:0;padding:0;background:none;text-align:left;min-width:0}
.end .face{aspect-ratio:4/3;background:#f2f0e8;border:1px solid rgba(32,29,24,.3);display:grid;
  place-items:center;padding:.5rem;font-family:"Times New Roman",Times,serif;font-size:.92rem;
  color:#15130f;text-align:center;line-height:1.2;box-shadow:0 4px 12px rgba(0,0,0,.28)}
.end[aria-pressed="true"] .face{outline:3px solid var(--chalk);outline-offset:-1px}
.end .verdict{display:block;font-family:PlexMono,monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;margin-top:.42rem;color:var(--chalk-3)}
.end[data-good="1"] .verdict{color:var(--go)}
.end[data-good="0"] .verdict{color:var(--lamp)}
.end-read{margin:.3rem 0 0;padding:1rem;background:rgba(0,0,0,.24);border-left:3px solid var(--lamp);
  min-height:5rem;font-size:.98rem;line-height:1.5;color:#d9d5c4}

/* -------------------------------------------------------------- the pipeline */
.pipe{display:flex;gap:.4rem;overflow-x:auto;margin:1.3rem -1.15rem;padding:.2rem 1.15rem 1rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.pipe-step{flex:0 0 8.6rem;scroll-snap-align:start;background:rgba(0,0,0,.26);
  border:1px solid rgba(236,233,216,.18);padding:.85rem .8rem;min-height:8.2rem}
.pipe-step .n{font-family:PlexMono,monospace;font-size:.66rem;color:var(--lamp);letter-spacing:.12em}
.pipe-step h4{margin:.35rem 0 .3rem;font-family:Chalk,cursive;font-weight:400;text-transform:uppercase;
  font-size:1.08rem;color:var(--chalk);line-height:1.05}
.pipe-step p{font-size:.8rem;line-height:1.38;margin:0;color:var(--chalk-2)}

/* -------------------------------------------------------------- narration */
.narr{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#171c17;color:var(--chalk);
  border-top:1px solid rgba(236,233,216,.22);box-shadow:0 -8px 28px rgba(0,0,0,.5);
  padding-bottom:env(safe-area-inset-bottom);transform:translateY(105%);transition:transform .28s ease-out}
.narr.on{transform:translateY(0)}
.narr-bar{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem}
.narr-pp{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;background:var(--lamp);
  cursor:pointer;display:grid;place-items:center}
.narr-pp svg{width:17px;height:17px;fill:#fff}
.narr-meta{flex:1 1 auto;min-width:0}
.narr-part{font-family:PlexMono,monospace;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--chalk-3);display:block}
.narr-title{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.narr-btn{flex:0 0 auto;background:none;border:1.5px solid rgba(236,233,216,.3);color:var(--chalk);
  border-radius:3px;font-family:PlexMono,monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem .55rem;cursor:pointer;min-height:38px}
.narr-btn[aria-pressed="true"]{background:var(--chalk);color:#171c17;border-color:var(--chalk)}
.narr-prog{height:3px;background:rgba(236,233,216,.16)}
.narr-prog span{display:block;height:100%;width:0;background:var(--lamp)}
.narr-chaps{display:none;max-height:46vh;overflow:auto;border-top:1px solid rgba(236,233,216,.16);
  -webkit-overflow-scrolling:touch}
.narr-chaps.on{display:block}
.narr-chaps button{width:100%;text-align:left;background:none;border:0;color:var(--chalk-2);cursor:pointer;
  padding:.72rem .9rem;display:flex;gap:.65rem;align-items:baseline;font-size:.9rem;min-height:44px;
  border-bottom:1px solid rgba(236,233,216,.08);font-family:Plex,sans-serif}
.narr-chaps button[aria-current="true"]{color:var(--chalk);background:rgba(236,233,216,.07)}
.narr-chaps .cn{font-family:PlexMono,monospace;font-size:.68rem;color:var(--lamp);flex:0 0 1.6rem}
.narr-chaps .cd{margin-left:auto;font-family:PlexMono,monospace;font-size:.68rem;color:var(--chalk-3)}
.narr-line{padding:0 .9rem .75rem;font-size:.82rem;line-height:1.45;color:var(--chalk-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  /* the clamp alone leaves the second line sheared by a pixel or two where the
     chapter list begins; pin the box to exactly two lines plus the padding */
  max-height:calc(2 * 1.45em + .75rem);box-sizing:content-box}
.narr-line b{color:var(--lamp);font-family:PlexMono,monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;display:block;font-weight:600}
body.narr-open{padding-bottom:7.5rem}

/* ---------------------------------------------------------------- sharing */
.tile-pick{display:flex;gap:.5rem;overflow-x:auto;margin:1.2rem -1.15rem;padding:.2rem 1.15rem 1rem;
  scroll-snap-type:x mandatory}
.tile-pick button{flex:0 0 7.4rem;scroll-snap-align:start;background:none;border:1px solid rgba(32,29,24,.25);
  padding:0;cursor:pointer;border-radius:2px;overflow:hidden}
.board .tile-pick button{border-color:rgba(236,233,216,.22)}
.tile-pick img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
dialog.sh{border:0;padding:0;max-width:26rem;width:calc(100vw - 2rem);border-radius:5px;
  background:var(--paper);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.5)}
dialog.sh::backdrop{background:rgba(12,14,12,.72)}
.sh-in{padding:1rem}
.sh-in img{width:100%;border:1px solid rgba(32,29,24,.2);margin-bottom:.8rem}
.sh-cap{font-size:.94rem;line-height:1.45;margin:0 0 .9rem}
.sh-acts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.sh-acts .btn{justify-content:center;font-size:.84rem}
.sh-x{all:unset;position:absolute;top:.4rem;right:.5rem;cursor:pointer;font-size:1.5rem;line-height:1;
  padding:.3rem .55rem;color:var(--ink-2)}
.sh-wrap{position:relative}

/* ------------------------------------------------------------------ footer */
footer{padding:2.2rem 0 calc(2.6rem + env(safe-area-inset-bottom));font-size:.84rem;line-height:1.55;
  color:var(--chalk-2)}
footer h3{font-family:Chalk,cursive;text-transform:uppercase;font-weight:400;font-size:1.3rem;
  color:var(--chalk);margin:0 0 .7rem}
footer a{color:var(--chalk)}
.src{list-style:none;padding:0;margin:0 0 1.2rem}
.src li{padding:.42rem 0;border-bottom:1px solid rgba(236,233,216,.12)}

/* ----------------------------------------------------------------- reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s ease-out}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* --------------------------------------------------------------- >= tablet */
@media (min-width:46rem){
  body{font-size:18px}
  .sec{padding:3.6rem 0 3.8rem}
  .hero{padding:3rem 0 3rem}
  .outline{columns:2;column-gap:2rem}
  .ck{break-inside:avoid}
}