/* Christina Sok: the homepage film. The film is pinned behind six full screens of copy that scroll
   natively; film.js plays it forward one stretch per screen. Tokens come from brand.css. With
   JavaScript off the first frame holds and every screen still reads. */
.fl{--fl-bg:#0f0e0d;--fl-text:#f4f1ec;--fl-text-2:#d9d3ca;--fl-line:rgba(238,236,234,.22);position:relative;background:var(--fl-bg);color:var(--fl-text)}

.fl-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--fl-bg)}
.fl-photo,.fl-video,.fl-shade{position:absolute;inset:0;width:100%;height:100%}
.fl-photo,.fl-video{object-fit:cover}
.fl-video{opacity:0;transition:opacity .6s ease}
.fl-live .fl-video{opacity:1}
.fl-shade{pointer-events:none;background:
  linear-gradient(90deg,rgba(15,14,13,.74) 0%,rgba(15,14,13,.34) 46%,rgba(15,14,13,.12) 72%,rgba(15,14,13,.38) 100%),
  linear-gradient(to top,rgba(15,14,13,.7) 0%,rgba(15,14,13,0) 36%),
  linear-gradient(to bottom,rgba(15,14,13,.5) 0%,rgba(15,14,13,0) 20%)}
.fl-note{position:absolute;left:clamp(18px,5.5vw,96px);bottom:16px;z-index:3;font-size:12px;color:var(--fl-text-2);opacity:.9;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.fl-count{position:absolute;right:clamp(18px,5.5vw,96px);bottom:16px;z-index:3;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--brass);font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.fl-progress{position:absolute;left:0;right:0;bottom:0;z-index:3;height:3px;background:rgba(255,255,255,.12)}
.fl-progress i{display:block;height:100%;width:100%;background:var(--brass);transform-origin:left;transform:scaleX(0);transition:transform .18s linear}
.fl-status{position:absolute;left:50%;top:84px;z-index:3;transform:translateX(-50%);font-size:13px;color:var(--fl-text-2);text-shadow:0 1px 8px rgba(0,0,0,.8)}

/* The six screens ride over the pinned stage. */
.fl-pages{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh}
.fl-page{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,5vw,80px);padding:0 clamp(18px,5.5vw,96px);max-width:1600px;margin:0 auto}
.fl-block{max-width:660px}
.fl-page h1{font:400 clamp(40px,5.6vw,82px)/1.03 var(--display);letter-spacing:-.024em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.fl-page h2{font:400 clamp(30px,3.9vw,56px)/1.1 var(--display);letter-spacing:-.018em;text-wrap:balance;text-shadow:0 2px 26px rgba(0,0,0,.7)}
.fl-lede{margin-top:18px;max-width:46ch;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--fl-text-2);text-shadow:0 1px 14px rgba(0,0,0,.8)}
.fl-scrollcue{margin-top:22px;font-size:14px;color:var(--fl-text-2)}
.fl-scrollcue::after{content:"";display:block;width:1px;height:28px;margin:10px 0 0;background:linear-gradient(var(--fl-text-2),transparent);animation:fl-cue 1.8s cubic-bezier(.22,1,.36,1) infinite}
@keyframes fl-cue{0%{transform:scaleY(0);transform-origin:top}60%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(1);opacity:0}}
.fl-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* Readouts: no boxes. A hairline, a small heading, figures in tabular numerals. */
.fl-read{position:relative;flex:none;width:min(300px,28vw);padding-right:18px;border-right:1px solid var(--stone);text-align:right;text-shadow:0 1px 14px rgba(0,0,0,.85)}
.fl-read::before{content:"";position:absolute;inset:-60px -70px;z-index:-1;background:radial-gradient(closest-side,rgba(15,14,13,.78) 0%,rgba(15,14,13,.55) 50%,rgba(15,14,13,.2) 80%,rgba(15,14,13,0) 100%)}
.fl-read h3{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--brass);margin:0 0 12px}
.fl-read dl{margin:0}
.fl-read dl>div{padding:9px 0;border-top:1px solid var(--fl-line)}
.fl-read dl>div:first-child{border-top:0;padding-top:0}
.fl-read dt{font-size:13px;line-height:1.35;color:var(--fl-text-2)}
.fl-read dd{margin:0;font-size:18px;font-weight:500;line-height:1.3;font-variant-numeric:tabular-nums}
.fl-read dd.fl-big{white-space:nowrap;margin-top:2px;font:400 clamp(30px,3vw,42px)/1.05 var(--display);letter-spacing:-.015em}
.fl-ticks{list-style:none;margin:0;padding:0}
.fl-ticks li{position:relative;padding:8px 26px 8px 0;border-top:1px solid var(--fl-line);font-size:16px;font-weight:500;opacity:.3;transition:opacity .4s}
.fl-ticks li:first-child{border-top:0}
.fl-ticks li::after{content:"";position:absolute;right:2px;top:50%;width:11px;height:6px;border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:translateY(-70%) rotate(-45deg);opacity:0;transition:opacity .3s}
.fl-ticks li.on{opacity:1}
.fl-ticks li.on::after{opacity:1}

@media (max-width:860px){
  .fl-page{flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;padding-top:84px;padding-bottom:56px}
  .fl-read{width:100%;padding:0;border:0;text-align:left}
  .fl-read::before{inset:-28px -22px}
  .fl-read dl{display:flex;gap:6px 22px;flex-wrap:wrap}
  .fl-read dl>div{border:0;padding:0}
  .fl-read dl>div:nth-child(n+3){display:none}
  .fl-read dd.fl-big{font-size:28px}
  .fl-ticks{display:flex;flex-wrap:wrap;gap:4px 16px}
  .fl-ticks li{border:0;padding:2px 22px 2px 0;font-size:14px}
  .fl-shade{background:
    linear-gradient(to top,rgba(15,14,13,.9) 0%,rgba(15,14,13,.62) 42%,rgba(15,14,13,.3) 100%),
    linear-gradient(to bottom,rgba(15,14,13,.5) 0%,rgba(15,14,13,0) 18%)}
  .fl-note{left:18px;right:84px;bottom:14px}
  .fl-count{right:18px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  .fl-video,.fl-ticks li{transition:none}
  .fl-scrollcue::after{animation:none}
}