@font-face{font-family:'apfel-grotezk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/apfel-grotezk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'apfel-grotezk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/apfel-grotezk-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'outfit';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/outfit-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'outfit';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/outfit-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'outfit';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/outfit-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'outfit';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/outfit-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'outfit';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/outfit-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'schibsted-grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'schibsted-grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/schibsted-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'schibsted-grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/schibsted-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'schibsted-grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/schibsted-grotesk-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'figtree';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/figtree-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'figtree';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/figtree-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'figtree';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/figtree-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'figtree';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/figtree-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'figtree';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/figtree-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'instrument-sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/instrument-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'instrument-sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/instrument-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'instrument-sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/instrument-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'instrument-sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/instrument-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'space-grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/space-grotesk-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'space-grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'space-grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'space-grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'space-grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2')}

:root{
  --bg:#f4f3f1; --ink:#0c0c0d; --ink2:#6c6a67; --ink3:#9b9894;
  --line:rgba(12,12,13,.13); --accent:#e0552f;
  --f:'apfel-grotezk','outfit',system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,5vw,64px); --maxw:1620px;
  --meta:13px;   /* every caption, credit and description uses this */
  --ease:cubic-bezier(.62,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.04em;line-height:1}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--accent);color:#fff;padding:10px 16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lbl{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2);
  margin:0 0 12px;display:block}

/* ============ THE FLIP ============
   rotateX(180deg) flips about the horizontal axis: the word mirrors vertically
   and keeps its left-to-right letter order. The negative margin plus matching
   padding gives the mask room, so ascenders and descenders are not clipped
   while the overflow still hides the flip's edges. */
.flipa,.flipword{display:inline-block;vertical-align:top;
  margin:-.1em 0;padding:.1em .1em .1em 0;overflow:hidden}
.flipa>span,.flipword>span{display:inline-block;backface-visibility:visible;
  transform-origin:center center;transition:transform .3s ease}
@media(hover:hover){
  .flipa:hover>span,.flipword:hover>span{transform:rotateX(180deg)}
}

/* ============ HEADER ============ */
.hd{position:absolute;inset:0 0 auto;z-index:30;display:flex;align-items:flex-start;
  justify-content:space-between;gap:24px;padding:clamp(20px,3vw,36px) var(--pad)}
.pg .hd,body>.hd{position:sticky;top:0;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-size:clamp(13px,1.4vw,16px);font-weight:700;line-height:1.3;letter-spacing:0}
.brand span{display:block;font-weight:400;font-size:.82em;color:var(--ink2);letter-spacing:.02em}
.nv{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.nv a{font-size:clamp(14px,1.6vw,18px);font-weight:400;letter-spacing:-.02em;padding:1px 0}
.nv a.on>span{color:var(--accent)}
.nv a.ext{font-size:.82em;color:var(--ink2)}
.burger{display:none;background:none;border:0;padding:9px;cursor:pointer}
.burger span{display:block;width:23px;height:1.6px;background:var(--ink);margin:5px 0;transition:.3s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(3.3px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)}

/* ============ COVER — reel as centred object, disciplines down the right ============ */
.cv{position:relative;min-height:100svh;display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(18px,2.6vw,34px) var(--pad) clamp(16px,2.2vw,28px);gap:clamp(14px,2.4vw,34px)}
.cv-tl{grid-row:1;margin:0;font-size:clamp(14px,1.6vw,19px);font-weight:500;line-height:1.22;
  letter-spacing:-.015em;max-width:22ch}
.cv-name{display:block;font-weight:400}
.cv-role{display:block;color:var(--ink2);font-weight:400}
.cv-nav{position:absolute;top:clamp(18px,2.6vw,34px);right:var(--pad);z-index:6;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.cv-nav a{font-size:clamp(14px,1.6vw,19px);font-weight:400;letter-spacing:-.02em}
.cv-nav a.ext{font-size:.82em;color:var(--ink2)}

/* stage: reel + word column overlapping slightly, like the reference */
.cv-stage{grid-row:2;position:relative;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr);min-height:0}
.cv-reel{position:relative;width:min(68%,1120px);aspect-ratio:16/9;overflow:hidden;
  border-radius:3px;background:#0b0b0c;justify-self:start;
  margin-left:clamp(0px,2vw,44px);box-shadow:0 30px 80px rgba(0,0,0,.16)}
.cv-reel .reel{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;display:block}
.cv-words{position:absolute;z-index:5;left:min(58%,calc(100% - 320px));top:50%;
  transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;
  pointer-events:auto}
/* White text in `difference` blend reads black on the light page and white over the
   video, so the column stays legible wherever it crosses. The fade down the list is
   done with opacity, which behaves consistently on both backdrops. */
.cv-words{mix-blend-mode:difference;perspective:900px;perspective-origin:left center}
.dw{font-size:clamp(18px,2.7vw,38px);font-weight:400;letter-spacing:-.04em;line-height:1.1;
  white-space:nowrap;color:#fff;
  opacity:calc(1 - var(--i) * 0.055);
  transform-style:preserve-3d;
  transition:opacity .3s}
.dw:nth-child(-n+2){opacity:1}
.dw:hover{opacity:1}
@supports not (mix-blend-mode:difference){
  .cv-words{mix-blend-mode:normal}
  .dw{color:var(--ink)}
}

.cv-foot{grid-row:3;display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;
  font-size:12px;color:var(--ink3);align-self:end;justify-content:space-between}
.cv-foot a:hover{color:var(--accent)}

/* ============ INTRO / CLIENTS ============ */
.intro{max-width:var(--maxw);margin:auto;padding:clamp(56px,9vw,130px) var(--pad) clamp(30px,5vw,60px)}
.intro p{max-width:46ch;font-size:clamp(19px,2.6vw,34px);font-weight:400;letter-spacing:-.025em;
  line-height:1.28;margin:0 0 26px}
.lnk{font-size:15px;font-weight:500;border-bottom:1.5px solid var(--line);padding-bottom:2px}
.clients{max-width:var(--maxw);margin:auto;padding:0 var(--pad) clamp(56px,9vw,120px)}
.clients ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.clients li{border:1px solid var(--line);border-radius:99px;padding:8px 15px;font-size:var(--meta);color:var(--ink2)}

/* ============ PAGE HEAD ============ */
.pg-h{max-width:var(--maxw);margin:auto;padding:clamp(34px,5vw,68px) var(--pad) clamp(18px,2.4vw,30px)}
.pg-h h1{font-size:clamp(23px,2.2vw,38px);letter-spacing:-.025em;line-height:1.1;padding-bottom:.04em}
.pg-h p{color:var(--ink2);max-width:56ch;margin:12px 0 0;font-size:14px}
.pg-h .rq{margin-top:24px}
.btn{border:1px solid var(--line);border-radius:99px;padding:11px 22px;font-size:12.5px;font-weight:500}
.btn:hover{border-color:var(--ink)}
.jump{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
.jump a{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:99px;padding:9px 15px;color:var(--ink2)}
.jump a:hover{border-color:var(--ink);color:var(--ink)}

/* ============ WORK — tight list, thumb slides left, details slide right ============ */
.wpg{--thumbw:clamp(180px,20.4vw,324px);--detw:clamp(160px,17vw,250px)}
.wh h1{margin-bottom:0}
.wbar{max-width:var(--maxw);margin:auto;padding:0 var(--pad) 14px;display:flex;
  align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--ink)}
.fls{display:flex;gap:4px;flex-wrap:wrap}
.fl{font:inherit;font-family:var(--f);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:none;border:1px solid var(--line);border-radius:99px;
  color:var(--ink2);padding:8px 13px;cursor:pointer;transition:.2s;display:inline-flex;
  align-items:center;gap:7px}
.fl i{font-style:normal;font-size:9.5px;font-weight:700;color:var(--ink3);letter-spacing:.06em}
.fl.on i{color:rgba(255,255,255,.62)}
.fl:hover{border-color:var(--ink);color:var(--ink)}
.fl.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.wct{font-size:11px;color:var(--ink3);letter-spacing:.1em}
.wct b{color:var(--ink2);font-weight:600}

/* the list sits in the middle column; the outer columns are empty gutters
   that the thumbnail and the details animate into */
.wlist{max-width:var(--maxw);margin:auto;
  padding:clamp(72px,8vw,124px) calc(var(--pad) + var(--detw)) clamp(50px,8vw,110px)
          calc(var(--pad) + var(--thumbw))}
.wr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;gap:0 var(--pad);padding:clamp(2px,.28vw,6px) 0;
  transition:opacity .3s}
.wr-t{font-size:clamp(24px,2.95vw,58px);font-weight:400;letter-spacing:-.04em;line-height:1;
  min-width:0;
  transition:opacity .25s,transform .45s var(--ease)}
.wr-y{font-size:clamp(24px,2.95vw,58px);font-weight:400;color:var(--ink2);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;transition:color .25s}
.wr.has{cursor:pointer}
/* dim the rest of the list while one row is hovered */
.wlist:hover .wr{opacity:.35}
.wlist:hover .wr:hover{opacity:1}
.wr.has:hover .wr-t{transform:translateX(8px)}
.wr:hover .wr-y{color:var(--ink)}
.wr:not(.has) .wr-t{color:var(--ink2)}

/* thumbnail — slides out to the LEFT */
.wr-th{position:absolute;right:100%;margin-right:clamp(14px,1.6vw,26px);top:50%;
  width:var(--thumbw);aspect-ratio:16/10;overflow:hidden;border-radius:2px;
  pointer-events:none;opacity:0;
  transform:translateY(-50%) translateX(-18px);
  transition:opacity .3s ease,transform .48s var(--ease);
  box-shadow:0 18px 44px rgba(0,0,0,.22);z-index:5}
.wr-th img{width:100%;height:100%;object-fit:cover}
.wr.has:hover .wr-th{opacity:1;transform:translateY(-50%) translateX(0)}

/* details — slide out to the RIGHT */
.wr-dt{position:absolute;left:100%;margin-left:clamp(14px,1.6vw,26px);top:50%;
  width:var(--detw);pointer-events:none;opacity:0;
  transform:translateY(-50%) translateX(18px);
  transition:opacity .3s ease,transform .48s var(--ease);z-index:5}
.wr:hover .wr-dt{opacity:1;transform:translateY(-50%) translateX(0)}
.wr-dt b,.wr-dt i,.wr-dt u,.wr-dt s,.wr-dt em{display:block;font-style:normal;text-decoration:none;
  font-size:var(--meta);line-height:1.5}
.wr-dt b{color:var(--ink);font-weight:700}
.wr-dt i{color:var(--ink2);margin-top:2px}
.wr-dt u{color:var(--ink2);margin-top:6px}
.wr-dt s{color:var(--accent);font-weight:700;margin-top:6px}
.wr-dt em{color:var(--ink3);margin-top:8px;font-size:calc(var(--meta) - 1px);
  letter-spacing:.14em;text-transform:uppercase}
.wr.hid{display:none}


/* ============ WORK LIST — titles write on as the page loads ============
   Each title is wiped in from the left, staggered down the list, so the page
   appears to write itself out. Driven by a class JS adds, so with JS off (or
   reduced motion on) everything is simply visible from the start. */
.js-reveal .wr-t,
.js-reveal .wr-y{
  clip-path:inset(0 100% -.25em 0);
  opacity:.001;
}
.js-reveal .wr.lit .wr-t{
  animation:writeOn .62s cubic-bezier(.22,.75,.2,1) forwards;
  animation-delay:var(--d,0ms);
}
.js-reveal .wr.lit .wr-y{
  animation:writeOn .5s cubic-bezier(.22,.75,.2,1) forwards;
  animation-delay:calc(var(--d,0ms) + 120ms);
}
@keyframes writeOn{
  from{clip-path:inset(0 100% -.25em 0);opacity:1}
  to  {clip-path:inset(0 0 -.25em 0);   opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .js-reveal .wr-t,.js-reveal .wr-y{clip-path:none;opacity:1;animation:none!important}
}


/* ---- alternative intro: titles flip into place instead of wiping ----
   Add ?intro=flip to the URL to try it; ?intro=wipe forces the other one.
   To make one permanent, change INTRO_DEFAULT at the top of site.js. */
.js-reveal.intro-flip .wr-t,
.js-reveal.intro-flip .wr-y{clip-path:none;opacity:.001}
.js-reveal.intro-flip .wlist{perspective:1400px;perspective-origin:30% 50%}
.js-reveal.intro-flip .wr.lit .wr-t{
  animation:flipOn .62s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:var(--d,0ms);transform-origin:center center}
.js-reveal.intro-flip .wr.lit .wr-y{
  animation:flipOn .52s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(var(--d,0ms) + 90ms);transform-origin:center center}
@keyframes flipOn{
  from{transform:rotateX(-92deg);opacity:0}
  60% {opacity:1}
  to  {transform:rotateX(0deg);  opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .js-reveal.intro-flip .wr-t,.js-reveal.intro-flip .wr-y{opacity:1;animation:none!important;transform:none}
}

/* ============ PROJECT PAGE ============ */
.proj{padding-top:0}
.p-h{max-width:var(--maxw);margin:auto;padding:clamp(40px,6vw,90px) var(--pad) clamp(20px,3vw,36px);
  border-bottom:1px solid var(--line)}
.p-h .lbl{margin-bottom:16px}
.p-h h1{font-size:clamp(30px,5.4vw,72px);letter-spacing:-.04em;line-height:1.07;padding-bottom:.04em}
.p-b{max-width:var(--maxw);margin:auto;padding:clamp(30px,4.6vw,64px) var(--pad);
  display:grid;gap:clamp(26px,4vw,58px);grid-template-columns:minmax(0,290px) minmax(0,1fr);align-items:start}
.p-x{position:sticky;top:110px}
.p-x p{color:var(--ink2);font-size:15px;margin:0 0 14px}
.p-x .lbl{margin-top:30px}
.cr{font-size:var(--meta);line-height:1.85;color:var(--ink2)}
.aw2{color:var(--accent);font-size:var(--meta);font-weight:700}
.p-hero{overflow:hidden;border-radius:2px;margin-bottom:clamp(16px,2.2vw,30px)}
.vid{position:relative;aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden;
  margin-bottom:clamp(16px,2.2vw,30px)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.shs{columns:2;column-gap:clamp(12px,1.5vw,20px)}
.sh{margin:0 0 clamp(12px,1.5vw,20px);break-inside:avoid}
.sh a{display:block;overflow:hidden;border-radius:2px}
.sh img{width:100%;transition:transform .6s var(--ease),opacity .3s}
.sh a:hover img{transform:scale(1.03);opacity:.93}
.sh figcaption{font-size:var(--meta);color:var(--ink3);margin-top:7px}
.pgr{max-width:var(--maxw);margin:auto;padding:clamp(26px,3.6vw,50px) var(--pad) clamp(50px,7vw,96px);
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.pgr a{display:flex;flex-direction:column;gap:5px;max-width:38%;min-width:0}
.pgr a.nx{text-align:right;align-items:flex-end}
.pgr em{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink3)}
.pgr a>span{font-size:clamp(14px,1.7vw,20px);font-weight:500;letter-spacing:-.02em}
.allw{max-width:none!important;border:1px solid var(--line);border-radius:99px;padding:11px 20px;
  font-size:12px;font-weight:500}
.allw:hover{border-color:var(--ink)}

/* ============ RESUME ============ */
.rgrid{max-width:var(--maxw);margin:auto;padding:0 var(--pad) clamp(56px,8vw,110px);
  display:grid;gap:clamp(30px,4.4vw,68px);grid-template-columns:minmax(0,1fr) minmax(0,268px)}
.rs .d-h{padding-left:0;padding-right:0}
.cv{list-style:none;margin:0;padding:0}
.cv li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:16px;
  padding:17px 0;border-bottom:1px solid var(--line)}
.c-y{font-size:12px;font-weight:600;color:var(--ink3);font-variant-numeric:tabular-nums;padding-top:3px}
.c-b{display:block}
.c-r{display:block;font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:4px}
.c-w{font-size:clamp(16px,1.9vw,21px);font-weight:500;letter-spacing:-.02em}
.c-w a{border-bottom:1.5px solid var(--accent);transition:color .2s}
.c-w a:hover{color:var(--accent)}
.c-k{font-size:var(--meta);color:var(--ink2)}
.c-m{display:block;font-size:var(--meta);color:var(--ink3);margin-top:4px}
.c-a{display:block;font-size:var(--meta);color:var(--accent);font-weight:700;margin-top:4px}
.rside{position:sticky;top:110px;align-self:start}
.rside section{margin-bottom:34px}
.sk{list-style:none;margin:0;padding:0;font-size:var(--meta);color:var(--ink2)}
.sk li{padding:5px 0;border-bottom:1px solid var(--line)}
.edu{font-size:var(--meta);color:var(--ink2);margin:0;line-height:1.75}
.edu b{color:var(--ink);font-weight:600}
.edu a:hover{color:var(--accent)}

/* ============ CONTACT ============ */
.cts{max-width:var(--maxw);margin:auto;padding:0 var(--pad) clamp(56px,9vw,120px);
  display:grid;gap:clamp(18px,3vw,36px);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.ct{border:1px solid var(--line);border-radius:3px;padding:clamp(24px,3.4vw,42px)}
.ct .big{font-size:clamp(16px,2.1vw,25px);font-weight:500;letter-spacing:-.02em;margin:0 0 8px}
.ct .big a:hover{color:var(--accent)}
.ct p{color:var(--ink2);font-size:var(--meta)}
.mut{color:var(--ink3)!important;font-size:var(--meta)}

/* ============ FOOTER ============ */
.ft{border-top:1px solid var(--line)}
.ft-in{max-width:var(--maxw);margin:auto;padding:clamp(38px,5.6vw,72px) var(--pad);
  display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.ft-n{font-size:15px;font-weight:600;letter-spacing:.01em}
.ft-r{color:var(--ink2);font-size:13px;margin-top:6px}
.ft-c,.ft-nav{display:flex;flex-direction:column;gap:7px}
.ft-c a,.ft-nav a{font-size:13.5px;color:var(--ink2)}
.ft-c a:hover{color:var(--accent)}
.ft-nav a:hover{color:var(--ink)}
.ft-b{border-top:1px solid var(--line);padding:17px var(--pad);text-align:center;
  color:var(--ink3);font-size:11.5px}

/* ============ LIGHTBOX ============ */
.lb{position:fixed;inset:0;z-index:100;background:rgba(244,243,241,.985);display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,58px)}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb-x,.lb-p,.lb-n{position:absolute;background:none;border:1px solid var(--line);color:var(--ink);
  width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:18px;display:grid;place-items:center;
  transition:.2s}
.lb-x:hover,.lb-p:hover,.lb-n:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.lb-x{top:20px;right:20px}.lb-p{left:16px;top:50%;transform:translateY(-50%)}
.lb-n{right:16px;top:50%;transform:translateY(-50%)}
.lb-c{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:var(--ink3);font-size:12px}

/* ============ RESPONSIVE ============ */
@media(max-width:1180px){
  .wpg{--thumbw:clamp(132px,15.6vw,216px);--detw:clamp(115px,13vw,170px)}
}
@media(max-width:900px){
  .wlist{padding-left:var(--pad);padding-right:var(--pad)}
  .wr-th,.wr-dt{display:none}
  .wr{padding:7px 0;border-bottom:1px solid var(--line)}
  .wr-t{font-size:clamp(19px,5.6vw,30px)}
}
@media(max-width:1100px){
  .cv-reel{width:min(78%,900px)}
  .cv-words{left:auto;right:0}
}
@media(max-width:820px){
  .cv{gap:22px;padding-bottom:26px}
  .cv-nav{position:static;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;
    gap:4px 16px;margin-top:14px}
  .cv-nav a{font-size:15px}
  .cv-stage{display:block}
  .cv-reel{width:100%;margin:0 0 20px}
  .cv-words{position:static;transform:none;mix-blend-mode:normal;filter:none;
    display:flex;flex-wrap:wrap;flex-direction:row;gap:2px 16px}
  .dw{font-size:16px;color:var(--ink2)}
  .dw:nth-child(-n+2){color:var(--ink)}
  .cv-foot{font-size:11px;gap:12px}
}
@media(max-width:980px){
  .p-b,.rgrid{grid-template-columns:1fr}
  .p-x,.rside{position:static}
}
@media(max-width:820px){
  .burger{display:block}
  .nv{position:fixed;inset:0 0 auto;padding:92px 26px 34px;flex-direction:column;align-items:flex-start;
    gap:2px;background:var(--bg);height:100svh;transform:translateY(-101%);
    transition:transform .42s var(--ease);overflow-y:auto;z-index:40}
  .nv.open{transform:none}
  .nv a{font-size:22px;padding:11px 0}
}
@media(max-width:900px){
  .r-t,.r-m{max-width:100%}
}
@media(max-width:620px){
  .shs{columns:1}
  .pgr a{max-width:100%}
  .allw{order:3;width:100%;text-align:center}
  .cv li{grid-template-columns:1fr;gap:5px}
  .c-y{padding-top:0}
  .reel-flag{position:static;margin:0 var(--pad) 20px;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .cv-reel .reel{display:none}
  html{scroll-behavior:auto}
  .flipa:hover>span,.flipword:hover>span,.row.has:hover .r-in{transform:none!important}
}
@media print{
  .hd,.ft,.cover,.peek,.pgr,.jump{display:none}
  body{background:#fff}
  .rgrid{grid-template-columns:1fr 1fr}
}