/* Home: the four-suits scroll.
   One fixed WebGL canvas (#gl) behind the page draws every painting, the dealt cards, and the circle reveal
   with its ASCII ring, all in the same frame. The page scrolls natively over it: the dealer's table (hero),
   the hand of four suits (pinned), the four suit chapters, the full hand back at the table, then the work.
   There are no section edges and no black screens: a painting is always behind the text.
   Loads after base.css, loader.css, nav.css and footer.css, and only on the home page. */
:root{
  --dim-h:rgba(244,244,242,.64);
  --soft:rgba(244,244,242,.88);
  --out:cubic-bezier(.16,1,.3,1);
}
body.page-index{overflow-x:clip}
.page-index .sp{width:12px;height:12px;flex:none;color:var(--ink)}
.page-index .rs .sp,.page-index .sp.r{color:var(--red)}
.page-index .eb{color:var(--dim-h)}

/* ---------- the stage ---------- */
#gl{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;display:block;background:#000;pointer-events:none;max-width:none}
html.nogl #gl{display:none}
html.nogl body{background:#000 url(../img/home/hero-far.jpg) center/cover fixed}
.page-index main{position:relative;z-index:1}
.page-index .foot-wrap{position:relative;z-index:1}

/* the shared nav sits out the first beat of the deal, then fades in */
.page-index .nos-nav{transition:opacity .8s ease .2s}
html.intro .page-index .nos-nav,html.intro .nos-nav{opacity:0}

/* ---------- suits rail ---------- */
.rail{position:fixed;left:14px;top:50%;z-index:30;opacity:0;transform:translate(-10px,-50%);transition:opacity .4s ease,transform .5s var(--ease)}
html.in-chapters .rail{opacity:1;transform:translate(0,-50%)}
html.menu-open .rail{opacity:0}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rail a{position:relative;display:grid;justify-items:center;gap:3px;width:34px;padding:7px 0;border-radius:8px;color:var(--dim-h);transition:color .3s ease,background-color .3s ease}
.rail .n{font-family:var(--f-display);font-size:11px;line-height:1}
.rail .sp{color:currentColor;width:13px;height:13px}
.rail .rs .sp{color:var(--red)}
.rail a:not(.rs) .sp{opacity:.55}
.rail a.on{color:var(--ink);background:rgba(244,244,242,.08)}
.rail a.on .sp{opacity:1}
.rail .t{position:absolute;left:44px;top:50%;transform:translate(-6px,-50%);white-space:nowrap;font-size:11.5px;color:var(--ink);
  padding:5px 9px;border-radius:6px;background:rgba(0,0,0,.72);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .3s var(--ease)}
.rail a:hover .t,.rail a:focus-visible .t{opacity:1;transform:translate(0,-50%)}
@media (max-width:760px){.rail{display:none}}

/* ---------- hero: the dealer's table ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:var(--nav-h) var(--gutter) 22vh}
.hl{margin:0;max-width:13.5em;font-family:var(--f-display);font-weight:400;font-size:clamp(30px,3.7vw,60px);line-height:1.06;letter-spacing:-.012em;
  text-shadow:0 2px 30px rgba(0,0,0,.55)}
.hl .w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(8px);
  transition:opacity .9s var(--out),transform 1.1s var(--out),filter .9s var(--out);transition-delay:calc(var(--i) * 46ms)}
.hl .w2{color:var(--dim-h)}
html.words .hl .w{opacity:1;transform:none;filter:blur(0)}
.hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;opacity:0;transition:opacity 1s ease 1.6s}
html.words .hint{opacity:1}
.hint i{width:1px;height:26px;background:linear-gradient(var(--ink),rgba(244,244,242,0));animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){
  .hero{align-items:flex-start;padding-top:calc(var(--nav-h) + 6vh)}
  .hl{font-size:clamp(26px,7.4vw,38px)}
}

/* ---------- the hand: the dealt cards stand up and turn into the four suits (cards are drawn in WebGL) ---------- */
.hand{position:relative;height:290vh}
.hand-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-rows:auto 1fr;padding:calc(var(--nav-h) + 4vh) var(--gutter) 5vh}
.hand-head{max-width:1180px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px 56px;align-items:end;
  will-change:opacity}
.hand-head .eb{grid-column:1/-1}
.hand-head h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(32px,4vw,62px);line-height:1;letter-spacing:-.014em;text-wrap:balance}
.hand-head p{margin:0;max-width:40ch;font-size:13.5px;line-height:1.7;color:var(--dim-h)}
.hand-row{list-style:none;margin:0 auto;padding:0;max-width:1180px;width:100%;align-self:center;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.suit{display:grid;justify-items:center;gap:16px;text-align:center;border-radius:12px;padding:6px 4px 10px}
.cslot{display:block;width:min(100%,24vh,190px);aspect-ratio:5/7}
.lbl{display:grid;justify-items:center;gap:6px;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 10px))}
.lbl b{font-family:var(--f-display);font-weight:400;font-size:clamp(20px,1.9vw,28px);line-height:1}
.lbl .tl{font-size:12px;line-height:1.45;color:var(--dim-h);max-width:24ch}
.lbl .sv{font-family:var(--f-hud);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-hot)}
.suit:hover .lbl b,.suit:focus-visible .lbl b{color:#fff}
@media (max-width:860px){
  .hand-head{grid-template-columns:minmax(0,1fr)}
  .hand-head p{display:none}
  .hand-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;align-self:start;margin-top:3vh}
  .cslot{width:min(100%,19vh,150px)}
  .suit{gap:8px}
  .lbl .tl{display:none}
}

/* ---------- chapters ---------- */
.ch-open{min-height:165vh;padding:62vh var(--gutter) 0 max(var(--gutter),72px);display:flex;flex-direction:column}
.chapter.copy-r .ch-open{align-items:flex-end}
.copy{width:min(100%,980px);display:grid;gap:0}
.chapter.copy-r .copy{width:min(100%,900px)}
.copy .eb{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--soft)}
.title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(84px,15vw,240px);line-height:.84;letter-spacing:-.022em;text-shadow:0 2px 50px rgba(0,0,0,.4)}
.title.two{font-size:clamp(72px,12.5vw,200px)}
.ch-intro{margin:26px 0 0;max-width:30ch;font-family:var(--f-display);font-size:clamp(20px,2.1vw,31px);line-height:1.2;color:var(--soft);text-shadow:0 1px 24px rgba(0,0,0,.6)}
.ch-intro .cap{float:left;font-size:2.7em;line-height:.78;padding:.05em .09em 0 0;color:var(--red)}

.ch-body{padding:14vh var(--gutter) 52vh max(var(--gutter),72px)}
.cb{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:start}
.cb-lead{position:sticky;top:calc(var(--nav-h) + 9vh);display:grid;gap:24px;align-content:start}
.cb-lead .eb{display:flex;align-items:center;gap:10px;color:var(--soft)}
.cb-h{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(36px,4.3vw,62px);line-height:1.02;letter-spacing:-.014em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.cb-p{margin:0;max-width:42ch;font-size:14.5px;line-height:1.75;color:var(--soft)}
.cb-svc{display:flex;flex-wrap:wrap;gap:8px}
.cb-svc span{display:inline-flex;align-items:center;height:30px;padding:0 13px;border:1px solid var(--faint);border-radius:999px;font-size:11.5px;color:var(--soft);background:rgba(0,0,0,.25)}
.cb-cta{display:inline-flex;align-items:center;gap:12px;width:max-content;max-width:100%;padding-bottom:6px;border-bottom:1px solid var(--red);
  font-family:var(--f-display);font-size:20px;line-height:1.2;transition:gap .35s var(--ease),color .25s ease}
.cb-cta i{font-style:normal;color:var(--red-hot)}
.cb-cta:hover,.cb-cta:focus-visible{gap:18px;color:#fff}
.cb-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--faint)}
.cb-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 16px;padding:34px 0 38px;border-bottom:1px solid var(--faint)}
.cb-list .sp{width:15px;height:15px;margin-top:12px}
.cb-list h4{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.05;letter-spacing:-.008em}
.cb-list p{margin:12px 0 0;max-width:46ch;font-size:13.5px;line-height:1.75;color:var(--soft)}
@media (max-width:860px){.cb{grid-template-columns:minmax(0,1fr)}.cb-lead{position:static}}
@media (max-width:760px){
  /* phones: tighter gaps so there's always text on screen; the scene handoff still plays over ~60vh of scroll */
  .ch-open{padding:40vh var(--gutter) 14vh;min-height:0}
  .ch-body{padding:8vh var(--gutter) 20vh}
  .chapter.copy-r .ch-open{align-items:flex-start}
  .title{font-size:clamp(60px,19vw,120px)}
  .title.two{font-size:clamp(52px,15vw,96px)}
  .ch-intro{font-size:19px;max-width:24ch}
}

/* ---------- end: back at the table, the full hand face up ---------- */
.end{min-height:100vh;padding:58vh var(--gutter) clamp(70px,10vw,130px) max(var(--gutter),72px)}
.end .wrap{max-width:1180px;margin:0 auto;display:grid;gap:22px;justify-items:start}
.end .pips{display:flex;gap:14px}
.end .pips .sp{width:22px;height:22px}
.end h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(42px,6.4vw,100px);line-height:.96;letter-spacing:-.016em;max-width:13ch;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.end p{margin:0;max-width:48ch;color:var(--soft);font-size:14.5px;line-height:1.75}
.page-index .btn{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 16px;border-radius:7px;font-size:12.5px;letter-spacing:.01em;
  background:linear-gradient(var(--red),var(--red)) 0 0/0% 100% no-repeat,var(--ink);color:#000;transition:background-size .38s var(--ease),color .25s ease}
.page-index .btn:hover,.page-index .btn:focus-visible{background-size:100% 100%;color:var(--ink)}

/* ---------- work: still at the table, the painting darkens under the tiles ---------- */
.hwork{padding:clamp(40px,8vw,110px) var(--gutter) clamp(90px,12vw,160px) max(var(--gutter),72px);
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 34%,rgba(0,0,0,.78) 100%)}
.hwork .wrap{max-width:1180px;margin:0 auto;display:grid;gap:22px}
.hwork .eb{display:flex;align-items:center;gap:10px;color:var(--soft)}
.hwork h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(36px,4.3vw,62px);line-height:1.02;letter-spacing:-.014em;text-wrap:balance}
.hwork .lede{margin:0;max-width:56ch;font-size:14.5px;line-height:1.75;color:var(--soft)}
/* the cards, the case-notes dialog and the concept tiles are in work.css */

@media (max-width:760px){
  .end,.hwork{padding-left:var(--gutter)}
  .end{padding-top:40vh;min-height:0}
}

html.still .hint i{animation:none}
html.still .hl .w{transition:none}