/* Home scroll film. Loaded after site.css on the home page only. */
:root{--fs:min(6.2vh,4.4vw)}
.hd.film{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hd.film.solid{background:rgba(20,22,26,.92);border-bottom-color:var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hd.film .home{opacity:0;transition:opacity .5s}
.hd.film.show .home,.hd.film.solid .home{opacity:1}
.hd.film nav a{text-shadow:0 1px 12px rgba(20,22,26,.6)}

.track{height:900vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--g)}
canvas#cv{position:absolute;inset:0;width:100%;height:100%;display:block;background:var(--g);z-index:0;filter:contrast(1.06) saturate(1.04)}
.noscript{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}

/* Veil: keeps white text legible on the light paper-sketch frames. JS fades it out once the film goes dark. */
.veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(20,22,26,.72) 0%,rgba(20,22,26,.25) 18%,rgba(20,22,26,.25) 60%,rgba(20,22,26,.7) 100%),
  rgba(20,22,26,.22)}
/* Scrim: left-side shade for the acrostic once the stages start */
.scrim{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;will-change:opacity;background:linear-gradient(90deg,rgba(20,22,26,.82) 0%,rgba(20,22,26,.5) 26%,rgba(20,22,26,0) 52%),linear-gradient(0deg,rgba(20,22,26,.55) 0%,rgba(20,22,26,0) 26%)}

.col{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:calc(var(--fs)*.34);z-index:5;will-change:transform}
.row{position:relative}
.word{font-weight:700;font-variation-settings:"wdth" 125;font-size:var(--fs);line-height:1;letter-spacing:-.02em;white-space:pre;display:flex;align-items:flex-end;color:var(--slate)}
.word span{display:inline-block}
.init{display:inline-block;transform-origin:0 0;color:var(--b);text-shadow:0 2px 30px rgba(20,22,26,.35)}
.rest{display:inline-block;will-change:clip-path;clip-path:inset(0 100% 0 0);color:#8a909c;transition:color .45s}
.row.on .rest{color:var(--b)}
.intent{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--mist);height:0;overflow:visible;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .45s,transform .45s;text-shadow:0 1px 10px rgba(20,22,26,.9)}
.intent b{font-weight:500;color:var(--b)}
.row.on .intent{opacity:1;transform:translateY(8px)}

.heroline{position:absolute;left:0;right:0;text-align:center;z-index:6;padding:0 20px}
.heroline h1{font-size:clamp(22px,2.2vw,32px);font-weight:600;letter-spacing:-.015em;line-height:1.2;text-shadow:0 2px 24px rgba(20,22,26,.65)}
.heroline p{margin:12px auto 0;max-width:46ch;font-size:clamp(15px,1.2vw,17px);color:var(--b);text-shadow:0 1px 16px rgba(20,22,26,.8)}
.heroline .hint{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--b);opacity:.8}
.heroline .hint::after{content:"";width:1px;height:22px;background:var(--a);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media (prefers-reduced-motion:reduce){.heroline .hint::after{animation:none}}

.cap{position:absolute;right:var(--pad);bottom:9vh;z-index:5;text-align:right}
.cap .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mist)}
.cap .t{margin-top:8px;font-size:15.5px;color:var(--b);max-width:32ch;margin-left:auto;line-height:1.45;text-shadow:0 1px 14px rgba(20,22,26,.8)}
.prog{position:absolute;right:var(--pad);bottom:5.5vh;width:160px;height:1px;background:var(--slate);z-index:5}
.prog i{position:absolute;inset:0;background:var(--b);transform-origin:left;transform:scaleX(0)}
.skipfilm{position:absolute;left:var(--pad);bottom:5vh;z-index:7;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);padding:8px 0;transition:color .2s,opacity .3s}
.skipfilm:hover{color:var(--b)}
.skipfilm span{color:var(--a)}

.finale{position:absolute;left:var(--pad);bottom:12vh;z-index:6;display:flex;flex-direction:column;gap:20px;opacity:0;transform:translateY(12px);pointer-events:none;max-width:560px}
.finale.on{pointer-events:auto}
.finale h2{font-weight:650;font-variation-settings:"wdth" 110;font-size:clamp(24px,2.3vw,34px);letter-spacing:-.02em;line-height:1.1}
.finale h2 small{display:block;font-size:.62em;font-weight:500;color:var(--mist);margin-top:8px;letter-spacing:-.005em}
.finale .finale-skip-hide{display:none}

@media (max-width:860px){
  :root{--fs:8.6vw}
  .col{top:30%}
  .intent{font-size:10.5px;white-space:normal;width:82vw;transition:opacity .45s,height .45s}
  .row.on .intent{height:34px;transform:translateY(4px)}
  .scrim{background:linear-gradient(0deg,rgba(20,22,26,.85) 0%,rgba(20,22,26,.2) 45%,rgba(20,22,26,.55) 100%)}
  .cap,.prog{display:none}
  .finale{right:var(--pad);bottom:9vh}
  .skipfilm{bottom:3vh}
  .heroline h1{font-size:21px}
}
.init.stop{color:var(--a)}
/* Initial position matches what film.js computes, so there is no layout shift when it takes over */
.heroline{top:calc(42vh + 11.9vw + 18px)}
.finale .fin-h{font-weight:650;font-variation-settings:"wdth" 110;font-size:clamp(24px,2.3vw,34px);letter-spacing:-.02em;line-height:1.1}
.finale .fin-h small{display:block;font-size:.62em;font-weight:500;color:var(--mist);margin-top:8px;letter-spacing:-.005em}