@font-face{font-family:"G";src:url(/_l/grotesk.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"F";src:url(/_l/frank.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"R";src:url(/_l/rubik.woff2) format("woff2");font-weight:300 900;font-display:swap}

:root{
  --bg:#ede8df;--ink:#121110;--acc:#ff4a1c;--soft:rgba(18,17,16,.58);--line:rgba(18,17,16,.16);
  --pad:clamp(18px,4.6vw,56px);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sar:env(safe-area-inset-right,0px);--sal:env(safe-area-inset-left,0px);
  --ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.76,0,.24,1);
}
html[data-theme=flix]{--bg:#0b0a0a;--ink:#f4efe9;--acc:#e50914;--soft:rgba(244,239,233,.6);--line:rgba(244,239,233,.16)}
html[data-theme=fy]{--bg:#0e1a12;--ink:#eaf6df;--acc:#c6f432;--soft:rgba(234,246,223,.62);--line:rgba(234,246,223,.16)}
html[data-theme=teach]{--bg:#f1e2c6;--ink:#2b1a10;--acc:#b4482a;--soft:rgba(43,26,16,.66);--line:rgba(43,26,16,.18)}
html[data-theme=lingo]{--bg:#ffd23f;--ink:#15120a;--acc:#2440ff;--soft:rgba(21,18,10,.68);--line:rgba(21,18,10,.2)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:"R",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color .8s var(--ease),color .8s var(--ease);
  -webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:var(--bg)}
:focus-visible{outline:3px solid var(--acc);outline-offset:4px;border-radius:2px}
.skip{position:fixed;top:calc(var(--sat) + 10px);right:12px;z-index:60;background:var(--ink);color:var(--bg);padding:10px 16px;transform:translateY(-200%)}
.skip:focus{transform:none}

/* grain (static, svg data uri allowed by img-src data:) */
body::after{content:"";position:fixed;inset:-50%;z-index:40;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- loader ---------- */
.loader{display:none}
.js .loader{display:flex;position:fixed;inset:0;z-index:80;background:#121110;color:#ede8df;align-items:flex-end;
  padding:calc(var(--sat) + var(--pad)) var(--pad) calc(var(--sab) + var(--pad));
  animation:loaderFailsafe 0s 4s forwards}
.loader-in{display:flex;justify-content:space-between;align-items:flex-end;width:100%;direction:ltr;overflow:hidden}
.loader-name{font-family:"G";font-weight:500;font-size:clamp(18px,2vw,26px);letter-spacing:-.02em;transform:translateY(110%);animation:up .9s .1s var(--ease) forwards}
.loader-count{font-family:"G";font-weight:300;font-size:clamp(84px,22vw,240px);line-height:.8;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.loader-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ff4a1c;transform-origin:left;transform:scaleX(var(--p,0))}
.done .loader{transform:translateY(-100%);transition:transform 1s var(--ease2)}
.done .loader-in{opacity:0;transition:opacity .4s}
@keyframes loaderFailsafe{to{visibility:hidden}}
@keyframes up{to{transform:none}}

/* ---------- cursor ---------- */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .has-cursor,.has-cursor a{cursor:none}
  .has-cursor .cursor{display:block;position:fixed;inset:0;pointer-events:none;z-index:70}
  .cursor-dot,.cursor-ring{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
  .cursor-dot{width:6px;height:6px;margin:-3px;background:var(--acc)}
  .cursor-ring{width:44px;height:44px;margin:-22px;border:1px solid var(--ink);display:grid;place-items:center;
    transition:width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease),background-color .5s,border-color .5s}
  .cursor-label{font-size:13px;font-weight:500;color:var(--bg);opacity:0;transition:opacity .3s}
  .cur-link .cursor-ring{width:92px;height:92px;margin:-46px;background:var(--acc);border-color:var(--acc)}
  .cur-link .cursor-label{opacity:1}
  .cur-link .cursor-dot{opacity:0}
}

/* ---------- top bar ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(var(--sat) + 14px) calc(var(--sar) + var(--pad)) 14px calc(var(--sal) + var(--pad));
  font-size:13px;letter-spacing:.01em;mix-blend-mode:normal}
.top p{margin:0}
.mark{display:inline-flex;align-items:center;gap:8px;font-family:"G";font-weight:700;font-size:18px;letter-spacing:-.03em;min-height:44px;padding-inline:2px}
.mark i{width:9px;height:9px;border-radius:50%;background:var(--acc);transition:background-color .8s}
.top-meta{display:none;color:var(--soft)}
.top-meta .sep{margin:0 .5em}
.top-clock{display:flex;align-items:center;gap:8px;color:var(--soft)}
.top-clock time{font-family:"G";color:var(--ink);font-variant-numeric:tabular-nums}
.pulse{width:7px;height:7px;border-radius:50%;background:#1fbf5b;box-shadow:0 0 0 0 rgba(31,191,91,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(31,191,91,0)}100%{box-shadow:0 0 0 0 rgba(31,191,91,0)}}
@media (min-width:760px){.top-meta{display:block}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  padding:calc(var(--sat) + 86px) calc(var(--sar) + var(--pad)) calc(var(--pad) * .6) calc(var(--sal) + var(--pad))}
.hero-copy{position:relative;z-index:2;max-width:34rem;order:-1}
.he-name{margin:0 0 10px;font-family:"F";font-weight:500;font-size:clamp(30px,7.6vw,58px);line-height:1;letter-spacing:-.01em}
.lead{margin:0;font-size:clamp(16px,4.1vw,20px);line-height:1.45;color:var(--soft);max-width:26em}
.field{position:relative;z-index:1;flex:1 1 0;width:calc(100% + var(--pad) * 2);margin-inline:calc(var(--pad) * -1);min-height:210px;display:block;touch-action:pan-y}
.name{position:relative;z-index:2;margin:0;font-family:"G";font-weight:500;line-height:.8;letter-spacing:-.065em;
  font-size:min(36vw,40svh);display:flex;flex-direction:column;align-items:flex-start;text-align:left;user-select:none}
.name-line{display:block;overflow:hidden;padding:.02em .06em .06em 0;margin-bottom:-.04em;white-space:nowrap}
.ch{display:inline-block;will-change:transform;font-variation-settings:"wght" var(--w,500)}
.js .ch{transform:translateY(105%)}
.in .ch{transform:none;transition:transform 1.25s var(--ease)}
.dot-acc{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--acc);margin-left:.05em;transition:background-color .8s,transform 1.2s var(--ease);transform:scale(0)}
.in .dot-acc{transform:scale(1);transition-delay:.9s}
.scroll-cue{position:absolute;z-index:3;left:calc(var(--sal) + var(--pad));top:calc(var(--sat) + 92px);display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:12px;color:var(--soft);writing-mode:vertical-rl;min-width:44px;padding:6px 0;display:none}
.scroll-cue i{display:block;width:1px;height:56px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(-100%);animation:drip 2.2s var(--ease2) infinite}
@keyframes drip{50%{transform:none}100%{transform:translateY(100%)}}

@media (min-width:900px){
  .hero{padding-top:calc(var(--sat) + 104px)}
  .hero-copy{align-self:flex-start;max-width:30rem}
  .field{min-height:0}
  .name{flex-direction:row;font-size:min(19.5vw,33vh);gap:.16em;align-items:flex-end}
  .scroll-cue{display:flex;top:auto;bottom:calc(var(--pad) + 4px);left:auto;right:calc(var(--sar) + var(--pad))}
  .lead{font-size:19px}
}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal.seen{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.2s var(--ease)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;direction:ltr;transition:border-color .8s}
.marquee-track{display:flex;align-items:center;gap:.6em;width:max-content;font-family:"G";font-weight:500;font-size:clamp(34px,8vw,92px);
  letter-spacing:-.04em;line-height:1;animation:mq 26s linear infinite}
.marquee-track .he{font-family:"F";font-weight:500;letter-spacing:0}
.marquee-track b{color:var(--acc);font-size:.5em;font-weight:400;transition:color .8s}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- work index ---------- */
.work{padding:clamp(56px,12vw,140px) calc(var(--sar) + var(--pad)) clamp(40px,8vw,90px) calc(var(--sal) + var(--pad))}
.work-head{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(24px,5vw,56px)}
.work-head h2{margin:0;font-family:"F";font-weight:500;font-size:clamp(22px,5vw,30px);letter-spacing:0}
.count{font-family:"G";color:var(--soft);font-size:14px}
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);transition:border-color .8s}
.index li{border-bottom:1px solid var(--line);transition:border-color .8s}
.row{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"no tag go" "name name name" "desc desc desc" "pv pv pv";
  align-items:center;column-gap:14px;padding:22px 0 24px;outline-offset:6px}
.row-no{grid-area:no;font-family:"G";font-size:13px;color:var(--soft);font-variant-numeric:tabular-nums}
.row-tag{grid-area:tag;font-size:13px;color:var(--soft);justify-self:start}
.row-tag::before{content:"— "}
.row-name{grid-area:name;font-family:"G";font-weight:500;font-size:clamp(52px,15.5vw,150px);line-height:.95;letter-spacing:-.055em;margin:14px 0 8px;
  transition:transform .9s var(--ease),color .5s;transform-origin:right center}
.row-name{justify-self:start}
.row-name.he{font-family:"F";font-weight:500;letter-spacing:-.02em;font-size:clamp(46px,12.6vw,130px);line-height:1}
.row-desc{grid-area:desc;font-size:16px;color:var(--soft);max-width:30em}
.row-go{grid-area:go;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  transition:background-color .5s,border-color .5s,transform .6s var(--ease)}
.row-go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .6s var(--ease);transform:rotate(-45deg)}
.row-pv{grid-area:pv;position:relative;display:block;height:min(36vw,190px);margin-top:18px;overflow:hidden;border-radius:2px;
  clip-path:inset(0 0 0 0);transition:clip-path 1s var(--ease)}
.row-pv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.row:not(.is-active) .row-pv{clip-path:inset(0 0 0 72%)}
.row.is-active .row-go,.row:focus-visible .row-go{background:var(--acc);border-color:var(--acc);color:var(--bg)}
.row.is-active .row-go svg{transform:none}
.row.is-active .row-no{color:var(--acc)}
.row:active .row-name{transform:scale(.985)}

@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .row{grid-template-columns:5rem minmax(0,1fr) minmax(14rem,22rem) 8rem 56px;grid-template-areas:"no name desc tag go";padding:28px 0;column-gap:24px}
  .row-pv{display:none}
  .row-name{margin:0;justify-self:start!important;font-size:clamp(64px,8.4vw,136px);white-space:nowrap}
  .row-name.he{font-size:clamp(56px,7vw,116px)}
  .row-tag{justify-self:center}
  .row-go{width:56px;height:56px}
  .index:hover .row:not(:hover) .row-name{opacity:.28}
  .row-name{transition:transform .9s var(--ease),opacity .6s var(--ease),color .5s}
  .row:hover .row-name{transform:translateX(-2.2rem)}
  .row:hover .row-go svg{transform:none}
  .row:hover .row-go{background:var(--acc);border-color:var(--acc);color:var(--bg)}
  .row:hover .row-no{color:var(--acc)}
}

.float-pv{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .float-pv{display:block;position:fixed;left:0;top:0;z-index:25;width:380px;height:250px;margin:-125px 0 0 -190px;pointer-events:none;
    clip-path:inset(50% 50% 50% 50%);transition:clip-path .7s var(--ease);will-change:transform}
  .float-pv.on{clip-path:inset(0 0 0 0)}
  .float-pv canvas{width:100%;height:100%;display:block}
  .float-label{display:none}
}

/* ---------- footer ---------- */
.foot{padding:clamp(40px,10vw,120px) calc(var(--sar) + var(--pad)) calc(var(--sab) + 28px) calc(var(--sal) + var(--pad));border-top:1px solid var(--line)}
.foot-big{margin:0 0 clamp(36px,8vw,90px);font-family:"F";font-weight:500;font-size:clamp(46px,13vw,170px);line-height:.95;letter-spacing:-.02em;display:flex;flex-direction:column}
.foot-big .it{color:var(--acc);font-weight:300;transition:color .8s}
.foot-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--soft);font-family:"G"}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .loader{display:none}
  .js .ch,.dot-acc{transform:none}
  .js .reveal{opacity:1;transform:none}
  .row:not(.is-active) .row-pv{clip-path:none}
  .marquee-track{flex-wrap:wrap;width:auto;justify-content:center;font-size:clamp(28px,6vw,64px)}
  .marquee-track>:nth-child(n+9){display:none}
}