/* thejakeabdo.com, hub of the stick figure world (preview 2026-11-08).
 * Tokens from stickfig_studio/world/RESEARCH.md (motion v3) + the film runtime. Replace the :root block when WORLD_BIBLE.md lands.
 * Red is reserved for the woman and the carrier ring. Only transform + opacity animate (plus a one-time stroke draw-on). */
:root{
  /* WORLD_BIBLE.md v1: ink, bone, ash, red (the woman + one key word per screen + the primary button's hover rule) */
  --bg:#0a0a0a; --bg2:#0f0f0f; --card:#0f0f0f; --card2:#141414;
  --fg:#ede8df; --mute:#a9a49b; --faint:#8a857d; --ash:#575552; --grey:#575552;
  --line:rgba(237,232,223,.10); --line2:rgba(237,232,223,.34);
  --her:#e0201c;
  --red:var(--fg); --red-soft:rgba(237,232,223,.06);
  --disp:'Anton',Impact,'Arial Narrow',sans-serif;
  --sans:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --serif:'DM Serif Display',Georgia,serif;
  --in:cubic-bezier(.05,.7,.1,1); --out:cubic-bezier(.32,0,.67,0); --std:cubic-bezier(.65,0,.35,1); --draw:cubic-bezier(.65,0,.35,1); --expo:cubic-bezier(.16,1,.3,1);
  --gut:16px;
}
@media(min-width:700px){:root{--gut:24px}}
@media(min-width:1100px){:root{--gut:96px;--wrap:1360px}}
html,body{background:var(--bg)}
body{font:400 17px/1.5 var(--sans)}
body::after,.glow{display:none!important}
::selection{background:var(--fg);color:var(--bg)}
.chat .bub.jaik[style]{border-color:var(--line2)!important}

/* ---------- type: Anton headlines, flush left, Archivo body + labels, DM Serif only for film titles ---------- */
h1,h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.004em;line-height:.98}
h1{font-size:clamp(42px,11.4vw,104px)}
@media(min-width:900px){.split h1{font-size:clamp(52px,4.5vw,72px)}.split h1 .rv{white-space:nowrap}}
h2{font-size:clamp(32px,8.4vw,64px)}
h1 em,h2 em{font-style:normal}
h3{font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:-.005em;line-height:1.3}
.k{color:var(--her)}
.lead{font-size:17px;line-height:1.55;color:var(--mute)}
@media(min-width:900px){.lead{font-size:18px}}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.18em;color:var(--faint)}
.eyebrow::before{background:var(--line2)!important}
.num{font:600 12px/1 var(--sans);letter-spacing:.1em;color:var(--faint)}
.tag{font-family:var(--sans)}
.ul path{stroke:var(--fg)}

/* ---------- the room: solid ink header, hairline rules that draw left to right ---------- */
.hdr{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line2)}
.nav{gap:28px;font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.nav a.on{color:var(--fg);box-shadow:0 10px 0 -9px var(--line2)}
.drawer a{font:400 40px/1.15 var(--disp);text-transform:uppercase}
.sec+.sec{border-top:0}
.sec+.sec::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:var(--line2);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--std)}
.sec.seen::before,html:not(.js) .sec::before{transform:scaleX(1)}

/* ---------- buttons: outlined bone, never filled. Primary gets a 2 px red rule on hover ---------- */
.btn{position:relative;background:transparent;color:var(--fg);border:1px solid var(--fg);border-radius:0;font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;min-height:52px;padding:0 24px}
.btn:hover{background:transparent;color:var(--fg)}
.btn::after{content:"";position:absolute;left:24px;right:24px;bottom:12px;height:2px;background:var(--her);transform:scaleX(0);transform-origin:0 50%;transition:transform .42s var(--expo)}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1)}
.btn-ghost{border-color:var(--line2)}
.btn-ghost::after{display:none}
.btn-ghost:hover{border-color:var(--fg)}
.btn-sm{min-height:42px;padding:0 16px;font-size:12px}
.btn-sm::after{left:16px;right:16px;bottom:9px}
.btn-block{width:100%}
.card,.shell,.pcard,.pick,.inp,.chip,.vid,.portrait{border-radius:0!important}
.shell{background:transparent}
.chip{font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.chip.on{background:transparent;color:var(--fg);border-color:var(--fg)}

/* ---------- wordmark = the mark (the lead figure on the hairline) + JAKE ABDO ---------- */
.brand{display:inline-flex;align-items:flex-end;gap:10px;font:400 22px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.brand span:not(.mark){display:none}
.mark{display:inline-block;width:15px;padding:0 3px;border-bottom:1px solid var(--line2);line-height:0}
.mark .sf *{stroke-width:11}
.brand .mark{transition:transform .5s var(--expo)}
.brand.lift .mark{transform:translateY(-7px)}

/* ---------- figures ---------- */
.sf,.sp{display:block;overflow:visible;width:100%;height:auto}
.sf *,.sp *{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sf *{stroke-width:6.2}
.sf.c-bone *{stroke:var(--fg)}
.sf.c-red *{stroke:var(--her)}
.sf.c-ash *{stroke:var(--ash)}
.sp *{stroke:var(--fg)}
.sp .fi{fill:var(--fg);stroke:none}
.js [data-r] .fi{opacity:0;transition:opacity .3s .6s}
.js [data-r].in .fi{opacity:1}
.js .stage .ob:not(.on) .fi{opacity:0!important;transition-delay:0s}
#intro .fi{opacity:0}
.sf.flip{transform:scaleX(-1)}
.sf g{transform-box:view-box}
.j-all,.j-ll1,.j-rl1,.j-tor{transform-origin:0 0}
.j-ll2,.j-rl2{transform-origin:0 62px}
.j-head{transform-origin:0 -115px}
.j-la1,.j-ra1{transform-origin:0 -98px}
.j-la2,.j-ra2{transform-origin:0 -40px}
/* draw-on: once, on reveal; order --o staggers 90 ms per stroke */
.js [data-r] .dw,.js .drawn .dw{stroke-dasharray:1;stroke-dashoffset:1}
.js [data-r].in .dw,.js .in [data-r] .dw,.js [data-r].in [data-r] .dw,.js .drawn.go .dw{stroke-dashoffset:0;transition:stroke-dashoffset .62s var(--draw) calc(var(--dl,0s) + var(--o,0) * 90ms)}
.js [data-r]:not(.in) .dw{transition:none}
/* idle: a slow breath and a small head turn */
.idle .j-tor{animation:breathe-t 7s ease-in-out infinite}
.idle .j-head{animation:look 11s var(--std) infinite}
.idle.alt .j-tor{animation-delay:-3.1s}.idle.alt .j-head{animation-delay:-5.4s}
@keyframes breathe-t{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-1.2deg)}}
@keyframes look{0%,62%,100%{transform:rotate(0deg)}70%,88%{transform:rotate(-9deg)}}

/* walk cycle (transform only). The walker's own wrapper carries the travel. */
.walk .j-ll1{animation:w-a .9s ease-in-out infinite}
.walk .j-rl1{animation:w-a .9s ease-in-out -.45s infinite}
.walk .j-ll2{animation:w-k .9s ease-in-out infinite}
.walk .j-rl2{animation:w-k .9s ease-in-out -.45s infinite}
.walk .j-la1{animation:w-a .9s ease-in-out -.45s infinite}
.walk .j-ra1{animation:w-a .9s ease-in-out infinite}
.walk .j-all{animation:w-b .45s ease-in-out infinite}
.walk .j-tor{transform:rotate(-4deg)}
@keyframes w-a{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(22deg)}}
@keyframes w-k{0%,100%{transform:rotate(0deg)}25%{transform:rotate(16deg)}50%,75%{transform:rotate(2deg)}}
@keyframes w-b{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.flip{transform:scaleX(-1)}

/* ---------- stage: a ground line with figures standing on it ---------- */
.stage{position:relative;height:clamp(250px,64vw,420px);margin-top:28px}
.stage .gl{position:absolute;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);bottom:0;height:1px;background:var(--line2);transform-origin:0 50%}
.js .stage[data-r] .gl{transform:scaleX(0);transition:transform 1.1s var(--std)}
.js .stage[data-r].in .gl{transform:scaleX(1)}
.stage{--fw:clamp(86px,24vw,128px)}
.stage .who{position:absolute;bottom:-1px;width:var(--fw);margin-left:calc(var(--fw) / -2)}
.stage .who svg{margin-bottom:-2.6%}
.stage .m{left:24%}
.stage .w{left:76%;--dl:.9s}
.stage .objs{position:absolute;left:50%;bottom:-1px;width:calc(var(--fw) * 1.1);margin-left:calc(var(--fw) * -.55);aspect-ratio:260/330}
.stage .objs.solo{left:70%}
.stage .ob{position:absolute;inset:0}
.js .stage .ob .dw{stroke-dasharray:1;transition:stroke-dashoffset .9s var(--draw) calc(var(--o,0) * 90ms)!important}
.js .stage .ob:not(.on) .dw{stroke-dashoffset:1!important;transition-duration:.5s!important;transition-timing-function:var(--out)!important;transition-delay:0s!important}
.js .stage.in .ob.on .dw{stroke-dashoffset:0!important}
html:not(.js) .stage .ob:not(.on){display:none}
.stage .w button{all:unset;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stage .w button:focus-visible{outline:1px dashed var(--line2);outline-offset:6px}
.stage .say{position:absolute;left:0;right:0;bottom:-38px;font:600 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);opacity:0;transform:translateY(8px);transition:opacity .5s var(--in),transform .6s var(--in)}
.stage .say.on{opacity:1;transform:none}
.stage .mv{transition:transform .7s var(--std),opacity .5s var(--std)}
.stage .day,.stage .night{position:absolute;inset:0}
.stage .night{display:none}
html.night .stage .day{display:none}
html.night .stage .night{display:block}
.stage .night .moon{position:absolute;right:6%;top:2%;width:clamp(50px,13vw,80px)}
@media(max-width:899px){.hero .hero-stage{order:-1}.hero .hero-stage .stage{height:210px;margin:0 0 6px}.hero{padding-top:24px}}
@media(min-width:900px){.stage{margin-top:0;--fw:132px}.hero .hero-stage .stage{height:440px}}

/* ---------- headlines: each word rises 1 em through its baseline mask, 420 ms ease-out-expo, 60 ms stagger ---------- */
.rv{display:block}
.rv .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em;margin-bottom:-.04em}
.rv .w>span{display:inline-block}
.js [data-r] .rv .w>span{transform:translateY(1.05em);transition:transform .42s var(--expo) calc(var(--k,0) * 60ms + .05s)}
.js [data-r].in .rv .w>span{transform:none}
.rule{display:block;height:1px;width:72px;background:var(--fg);transform-origin:0 50%;margin-top:26px}
.js [data-r] .rule{transform:scaleX(0);transition:transform .5s var(--std) .55s}
.js [data-r].in .rule{transform:scaleX(1)}
.wv{font:400 clamp(21px,5.4vw,28px)/1.28 var(--serif);color:var(--fg)}

/* ---------- index cards (cast, places) ---------- */
.idx{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.idx{grid-template-columns:repeat(5,1fr)}}
.pcard{display:flex;flex-direction:column;gap:12px;padding:18px 16px 20px;background:var(--card);border:1px solid var(--line);border-radius:12px;min-width:0;transition:border-color .4s var(--std),transform .5s var(--std)}
a.pcard:hover{border-color:var(--line2);transform:translateY(-2px)}
.pcard .art{height:118px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--line);margin:0 -16px;padding:0 16px}
.pcard .art svg{width:58px}
.pcard .art .sp{width:96px}
.pcard h3{font:400 22px/1 var(--disp);text-transform:uppercase;letter-spacing:.01em}
.pcard p{font-size:13.5px;line-height:1.5;color:var(--mute)}
.pcard .n{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:auto}
.pcard.empty{background:transparent;border-style:dashed}
.pcard.empty .art{border-bottom-color:transparent}

/* ---------- the world page: one entry per character / place ---------- */
.entry{display:grid;gap:22px;padding:44px 0;border-top:1px solid var(--line)}
.entry:first-child{border-top:0}
@media(min-width:900px){.entry{grid-template-columns:220px 1fr;gap:48px}}
.entry .art{width:110px;height:170px;display:flex;align-items:flex-end;border-bottom:1px solid var(--line2)}
.entry .art svg{width:110px}
.entry .art.obj svg{width:150px}
.entry h2{font-size:clamp(34px,9vw,60px)}
.entry .apps{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:6px}
.entry .apps a{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.entry .apps a span:last-child{font:500 11px/1.4 var(--mono);color:var(--faint);letter-spacing:.06em;white-space:nowrap}
.entry .more{font-size:14px}

/* ---------- films: 9:16 poster frames, DM Serif titles, the world object beside the title ---------- */
.fgrid{display:grid;gap:26px 12px;grid-template-columns:1fr 1fr}
@media(min-width:760px){.fgrid{grid-template-columns:repeat(3,1fr);gap:34px 18px}}
@media(min-width:1100px){.fgrid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:760px){.fgrid.two{grid-template-columns:repeat(2,minmax(0,300px))}}
.film{min-width:0;scroll-margin-top:90px}
.film .fr{aspect-ratio:9/16;background:#000;border:1px solid var(--line)}
.film .fr img{width:100%;height:100%;object-fit:cover;filter:none}
.film .fr iframe{width:100%;height:100%;border:0}
.film .ft{display:flex;gap:10px;align-items:flex-start;margin-top:12px}
.film .mi{flex:none;width:26px;margin-top:1px;opacity:.75}
.film h3{font:400 17px/1.22 var(--serif);letter-spacing:0}
@media(min-width:760px){.film h3{font-size:19px}}
.film .meta{font:600 10.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.film:target .fr{outline:1px solid var(--fg);outline-offset:4px}
.series{padding:40px 0 8px;border-top:1px solid var(--line)}
.series.hide{display:none}
.series .hd{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.series .hd h2{font-size:clamp(30px,7.4vw,52px)}
.fpill{display:none;align-items:center;gap:10px;margin-top:16px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.fpill.on{display:inline-flex}
.fpill button{all:unset;cursor:pointer;border:1px solid var(--line2);border-radius:999px;padding:7px 11px;color:var(--fg)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- worldview chapters + the margin rail ---------- */
.wv-page{position:relative}
.chap{position:relative;padding:40px 46px 40px 0;border-top:1px solid var(--line);scroll-margin-top:80px}
@media(min-width:900px){.chap{display:grid;grid-template-columns:90px 1fr;gap:28px;padding-right:90px}}
.chap .no{font:400 54px/1 var(--disp);color:var(--ash)}
.chap h2{font-size:clamp(30px,7vw,44px)}
.chap .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.rail{position:absolute;top:0;bottom:0;right:4px;width:30px;pointer-events:none}
.rail::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.rail .rm{position:sticky;top:calc(100vh - 96px);width:30px;will-change:transform}
.rail .rw{position:absolute;bottom:0;left:0;width:30px}
@media(min-width:900px){.rail{right:10px;width:38px}.rail .rm,.rail .rw{width:38px}}
.player{position:relative;scroll-margin-top:76px}

/* ---------- start ---------- */
.picks{display:grid;gap:10px}
@media(min-width:700px){.picks{grid-template-columns:1fr 1fr}}
.pick{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 18px;border:1px solid var(--line2);background:transparent;font-size:16px;transition:border-color .35s var(--std),background .35s var(--std)}
.pick:hover{border-color:rgba(237,232,223,.35);background:var(--card2)}

/* ---------- footer figures ---------- */
.ftr-stage{position:relative;height:84px;margin:0 0 34px;border-bottom:1px solid var(--line2);display:flex;gap:22px;align-items:flex-end;justify-content:flex-end;padding-right:6px}
.ftr-stage .who{width:36px}
.brand b{font-weight:400}
.ftr-stage .who svg{margin-bottom:-2px}
.ftr-stage .j-tor,.ftr-stage .j-head,.ftr-stage .j-la1,.ftr-stage .j-ra1{transition:transform .9s var(--std)}
.wind .ftr-stage .j-tor{transform:rotate(9deg)!important}
.wind .ftr-stage .j-head{transform:rotate(12deg)!important}
.wind .ftr-stage .j-la1{transform:rotate(-30deg)!important}
.wind .ftr-stage .j-ra1{transform:rotate(-18deg)!important}
.wind .ftr-stage .who:nth-child(2) .j-tor{transition-delay:.06s}.wind .ftr-stage .who:nth-child(3) .j-tor{transition-delay:.12s}

/* ---------- intro (first visit to /, inline SVG, skippable, ~5 s) ---------- */
#intro{display:none}
html.intro #intro{display:block;position:fixed;inset:0;z-index:100;background:var(--bg);cursor:pointer}
html.intro body{overflow:hidden}
#intro svg.stage-i{position:absolute;inset:0;width:100%;height:100%}
#intro svg g,#intro svg text,#intro svg path{transform-box:view-box}
#intro .skip{position:absolute;right:var(--gut);bottom:calc(18px + env(safe-area-inset-bottom));font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);background:none;border:0;padding:12px 4px;cursor:pointer}
#intro .dw{stroke-dasharray:1;stroke-dashoffset:1}
#intro .i-gl{stroke:var(--line2);stroke-width:1.2;transform-origin:195px 400px}
#intro.play .i-gl{animation:i-draw .7s var(--std) forwards,i-gl-out .55s var(--out) 3.9s forwards}
#intro .i-man{--t0:.35s}#intro .i-her{--t0:2.55s}
#intro .i-o1{--t0:1.2s;--t1:1.95s}#intro .i-o2{--t0:1.95s;--t1:2.65s}#intro .i-o3{--t0:2.7s;--t1:3.7s}
#intro.play .i-man .dw{animation:i-draw .6s var(--draw) forwards;animation-delay:calc(var(--t0) + var(--o,0) * 95ms)}
#intro.play .i-her .dw{animation:i-draw .6s var(--draw) forwards,i-undraw .42s var(--out) forwards;animation-delay:calc(var(--t0) + var(--o,0) * 95ms),calc(3.7s + (6 - var(--o,0)) * 55ms)}
#intro.play .i-objs .dw{animation:i-draw .55s var(--draw) forwards,i-undraw .4s var(--out) forwards;animation-delay:calc(var(--t0) + var(--o,0) * 90ms),var(--t1)}
#intro.play .i-man .j-head{animation:i-turn .5s var(--std) 3.3s forwards}
#intro .i-mg{transform-origin:112px 400px}
#intro.play .i-mg{animation:i-mark .75s var(--std) 4.0s forwards}
#intro .i-word{font:400 44px var(--disp);letter-spacing:.03em;fill:var(--fg);opacity:0;transform:translateY(22px)}
#intro.play .i-word{animation:i-word .42s var(--expo) 4.3s forwards}
#intro .i-rule{fill:none;stroke:var(--line2);stroke-width:1;transform:scaleX(0);transform-origin:100px 0}
#intro.play .i-rule{animation:i-rule .5s var(--std) 4.45s forwards}
#intro.out{opacity:0;transition:opacity .45s var(--out)}
@keyframes i-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes i-undraw{from{stroke-dashoffset:0}to{stroke-dashoffset:1}}
@keyframes i-turn{to{transform:rotate(-11deg)}}
@keyframes i-gl-out{to{transform:scaleX(.04);opacity:0}}
@keyframes i-mark{to{transform:translateY(-99px) scale(.11)}}
@keyframes i-word{to{opacity:1;transform:none}}
@keyframes i-rule{to{transform:scaleX(1)}}

/* ---------- Easter egg layers ---------- */
.egg-walker{position:fixed;left:0;bottom:calc(6px + env(safe-area-inset-bottom));z-index:40;width:44px;height:64px;padding:0;border:0;background:none;cursor:pointer;transform:translateX(-60px);will-change:transform;-webkit-tap-highlight-color:transparent}
.egg-walker svg{width:28px;margin:0 auto}
.egg-walker.go{animation:walk-x var(--dur,16s) linear forwards}
.egg-walker.pause,.egg-walker.pause *{animation-play-state:paused!important}
.egg-walker.tip .j-head{animation:none!important;transform:rotate(-16deg)!important;transition:transform .35s var(--std)}
@keyframes walk-x{from{transform:translateX(-60px)}to{transform:translateX(calc(100vw + 20px))}}
.egg-lights{position:fixed;inset:0;z-index:60;background:#000;opacity:0;pointer-events:none;transition:opacity .8s var(--std)}
.egg-lights.on{opacity:.78}
.egg-duo{position:fixed;left:0;bottom:calc(10px + env(safe-area-inset-bottom));z-index:61;display:flex;gap:26px;align-items:flex-end;pointer-events:none;transform:translateX(-160px);will-change:transform}
.egg-duo .who{width:40px}
.egg-duo.go{animation:walk-x 11s linear forwards}
.egg-card{position:fixed;left:var(--gut);right:var(--gut);bottom:calc(18px + env(safe-area-inset-bottom));z-index:70;max-width:420px;margin:0 auto;padding:18px 18px;background:var(--card2);border:1px solid var(--line2);border-radius:14px;display:flex;justify-content:space-between;align-items:center;gap:14px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--in),transform .6s var(--in);pointer-events:none}
.egg-card.on{opacity:1;transform:none;pointer-events:auto}
.egg-card p{font:400 20px/1.2 var(--serif)}
.egg-card .x{all:unset;cursor:pointer;color:var(--faint);padding:6px;font-size:18px}

/* back room: the door draws itself */
.door-shut{width:170px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-r] .dw,.js .drawn .dw{stroke-dashoffset:0}
  .js [data-r] .rv .w>span{transform:none}
  .js .stage[data-r] .gl,.js [data-r] .rule{transform:none}
  html.intro #intro{display:none}
  html.intro body{overflow:auto}
  .egg-walker,.egg-duo{display:none}
}

/* ---------- phone fit (2026-11-08). Every box fits the screen; nothing is clipped or scrolls sideways.
   Root cause: grid and flex children default to min-width:auto, so one unbreakable thing (a nowrap underline phrase,
   a select's longest option) widened the whole column past the screen and .hero's overflow:hidden cut it off. ---------- */
.split>*,.grid>*,.idx>*,.fgrid>*,.books>*,.lesson-grid>*,.form>*,.picks>*,.seg>*,.cols>*,.row>*,.entry>*,.chap>*,.stack>*,.field{min-width:0}
.form{grid-template-columns:minmax(0,1fr)}
.inp,select.inp,textarea.inp{max-width:100%;min-width:0}
.wrap,.card,.formcard,.shell,.pcard,.book,.vid,.cal{max-width:100%}
h1,h2,h3,.lead,p,label,summary,.t,.s{overflow-wrap:break-word}
h1,h2{text-wrap:balance}
.fc-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 12px;margin-bottom:18px}
.fc-hd h3{min-width:0}
.tag{white-space:nowrap}
.btn{max-width:100%;text-align:center;line-height:1.25;padding-top:8px;padding-bottom:8px}
.btn::after{bottom:9px}
.cal iframe{max-width:100%}
.btn-sm,.chip{min-height:44px}
@media(max-width:899px){.split{grid-template-columns:minmax(0,1fr)}}
@media(max-width:699px){
  /* the underlined phrase wraps like any words; a plain bone rule replaces the drawn one */
  .ul{white-space:normal;text-decoration-line:underline;text-decoration-color:var(--fg);text-decoration-thickness:2px;text-underline-offset:.12em;-webkit-text-decoration-line:underline;-webkit-text-decoration-color:var(--fg)}
  .ul svg{display:none}
  .btn{padding-left:16px;padding-right:16px;letter-spacing:.1em}
}