/* ---------- fonts (self-hosted, latin subset, variable weight) ---------- */
@font-face{font-family:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/oswald-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2')}

/* ---------- tokens (reference palette: white page, near-black type, pale grey secondary) ---------- */
:root{
  --paper:#FFFFFF;
  --ink:#2B2B2B;
  --grey:#D6D6D6;
  --mid:#9C9C9C;
  --soft:#F2F2F2;
  --display:'Oswald','Arial Narrow',Impact,sans-serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;
  --r:28px;
  --pad:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.22,.8,.28,1);
  --shadow:0 30px 50px -22px rgba(0,0,0,.45), 0 10px 18px -12px rgba(0,0,0,.25);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* fixed brand palette: the same in the viewer's dark mode */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#FFFFFF;--ink:#2B2B2B}}
:root[data-theme="dark"]{--paper:#FFFFFF;--ink:#2B2B2B}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--paper);z-index:60}
a{color:inherit}
a,button{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.wrap{max-width:1280px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* type helpers */
.cap{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em}
.cap.sm{font-size:15px;font-weight:600}
.cap.xs{font-size:13px;font-weight:500;letter-spacing:.16em;color:var(--mid)}

/* ---------- avatar button (top right) ---------- */
.head-btn{text-decoration:none;position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;z-index:40;width:60px;height:60px;border-radius:50%;background:var(--ink);display:grid;place-items:center;transition:transform .35s var(--ease)}
.head-btn .about-lbl{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;white-space:nowrap;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:600;color:var(--ink)}
@media (hover:hover){.head-btn:hover{transform:rotate(-8deg) scale(1.08)}}
.head-btn svg{width:50px;height:50px;overflow:visible}
.avatar .eye-lid{transform-origin:center;animation:blink 5.5s infinite}
.avatar .eye-lid.r{animation-delay:.08s}
@keyframes blink{0%,94%,100%{transform:scaleY(0)}96%{transform:scaleY(1)}}
.avatar .eye-lid{transform:scaleY(0)}
.avatar .pupil{transition:transform .12s linear}
.avatar .mouth-open{opacity:0;transition:opacity .15s}
.avatar .mouth-closed{opacity:1;transition:opacity .15s}
@media (hover:hover){.head-btn:hover .mouth-open,.avatar.sing .mouth-open{opacity:1}}
@media (hover:hover){.head-btn:hover .mouth-closed,.avatar.sing .mouth-closed{opacity:0}}

/* ---------- hero ---------- */
.hero{text-align:center;padding-top:clamp(28px,4vh,44px)}
/* very narrow phones: start the hero below the fixed avatar so it doesn't cover the email */
@media (max-width:359px){.hero{padding-top:100px}}
.hero .loc{margin:0}
.hero .mail{margin:6px 0 0}
.hero .mail a{text-decoration:none}
@media (hover:hover){.hero .mail a:hover{color:var(--ink)}}
.hero h1{margin:clamp(28px,5vh,56px) 0 0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(64px,13vw,196px);line-height:.9;letter-spacing:-.01em}
/* overlapping work tiles */
.tiles{list-style:none;isolation:isolate;z-index:0;position:relative;margin:clamp(24px,4vh,48px) auto 0;padding:0 0 40px;display:flex;justify-content:center;align-items:center;max-width:1100px}
.tile{display:inline-block;position:relative;width:clamp(min(150px,calc((100vw + 72px) / 3)),28vw,380px);aspect-ratio:1;margin:0 clamp(-26px,-3vw,-44px);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transform:translate(var(--mx,0px),var(--my,0px)) rotate(calc(var(--rot) + var(--mr,0deg))) translateY(var(--dy));background:var(--soft);will-change:transform}
.tile img{-webkit-user-drag:none;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);transition:transform .5s var(--ease)}
/* NB: each tile is the only child of its <li>, so only nth-child(1) ever matches: all three rest at -7deg and DOM order sets the stacking.
   This is how the signed-off prototype renders. For the BUILD-SPEC values, change these three selectors to `.tiles li:nth-child(n) .tile`. */
.tile:nth-child(1){--rot:-7deg;--dy:18px;z-index:1}
.tile:nth-child(2){--rot:3deg;--dy:-10px;z-index:3}
.tile:nth-child(3){--rot:-2deg;--dy:8px;z-index:2}
@media (hover:hover){.tile:hover img,.tile:focus-visible img{transform:scale(1.06)}}
.hero .title{margin:clamp(8px,2vh,24px) 0 0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(44px,10.4vw,160px);line-height:.9;letter-spacing:-.01em;display:inline-block;background:linear-gradient(180deg,var(--ink) 0,var(--ink) var(--fill,0%),var(--grey) var(--fill,0%));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---------- featured wheel ---------- */
.featured{padding-top:clamp(64px,12vh,140px);padding-bottom:clamp(40px,8vh,96px);text-align:center}
.featured h2{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-.01em}
.featured .sub{margin:8px 0 0}
.wheel{position:relative;isolation:isolate;z-index:0;height:clamp(360px,40vw,520px);margin-top:clamp(20px,4vw,48px);user-select:none;touch-action:pan-y;overflow:hidden;cursor:grab}
.wheel:active{cursor:grabbing}
.wheel .card{position:absolute;left:50%;top:50%;width:clamp(230px,30vw,380px);aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--soft);box-shadow:var(--shadow);will-change:transform;cursor:grab;text-align:left;padding:0;display:block;transition:box-shadow .3s}
.wheel .card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.wheel .card .tag{position:absolute;left:14px;bottom:14px;background:var(--paper);color:var(--ink);font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:14px;padding:8px 14px;border-radius:999px}
.wheel-ui{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px;flex-wrap:wrap;text-align:left}
.wheel-ui .now{margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.wheel-ui .now span{font-family:var(--display);text-transform:uppercase;font-weight:700;font-size:clamp(24px,2.8vw,36px);line-height:1}
.wheel-ui .ctl{display:flex;gap:10px;align-items:center}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:15px;text-decoration:none;transition:transform .25s var(--ease),background .25s}
@media (hover:hover){.pill:hover{transform:translateY(-2px);background:#000}}
.pill.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);width:48px;padding:0}
@media (hover:hover){.pill.ghost:hover{background:var(--ink);color:#fff}}
.pill svg{width:20px;height:20px}
@media (max-width:720px){
  .wheel{height:auto;overflow-x:auto;overflow-y:hidden;display:flex;gap:14px;scroll-snap-type:x mandatory;touch-action:auto;cursor:auto;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding:4px 12vw 28px;scroll-padding:0 12vw;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wheel::-webkit-scrollbar{display:none}
  .wheel .card{position:static;transform:none !important;opacity:1 !important;flex:0 0 76vw;scroll-snap-align:center;cursor:pointer}
  .wheel .card.dup{display:none}
  .wheel-ui .ctl .arrow{display:none}
}

/* ---------- footer: grows into one giant Contact ---------- */
.site-foot{background:#D3D3D3;color:var(--ink);min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;margin-top:40px;overflow:hidden}
.site-foot .big{flex:1;display:flex;align-items:center;justify-content:center;padding:0}
.site-foot .big a{display:inline-block;font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.8;text-decoration:none;color:#fff;font-size:clamp(5rem,27vw,36rem);letter-spacing:-.02em;transform:scaleY(var(--sy,1));transform-origin:50% 50%;will-change:transform;transition:color .2s}
@media (hover:hover){.site-foot .big a:hover{color:var(--ink)}}
.site-foot .links{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding:24px var(--pad) 44px}
.site-foot .links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:18px}
.site-foot .links li:first-child{font-size:22px;margin-bottom:12px}
.site-foot .links a{text-decoration:none;border-bottom:2px solid transparent}
@media (hover:hover){.site-foot .links a:hover{border-color:currentColor}}
.site-foot .cap.xs{color:#fff}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:100;background:var(--paper);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);visibility:hidden;transition:transform .55s var(--ease),visibility 0s .55s}
.overlay.open{transform:none;visibility:visible;transition:transform .55s var(--ease),visibility 0s}
.overlay.instant{transition:none}
.overlay .bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(14px + env(safe-area-inset-top,0px)) calc(var(--pad) + env(safe-area-inset-right,0px)) 14px calc(var(--pad) + env(safe-area-inset-left,0px));background:rgba(255,255,255,.92);backdrop-filter:blur(10px)}
.close{width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform .3s var(--ease)}
@media (hover:hover){.close:hover{transform:rotate(90deg)}}
.close svg{width:22px;height:22px}
.overlay .wrap{padding-top:clamp(24px,5vh,56px);padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
.overlay h2{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(48px,9vw,128px);line-height:.9;letter-spacing:-.01em}
.overlay .summary{font-size:clamp(19px,1.7vw,24px);font-weight:500;line-height:1.35;max-width:32ch;margin:24px 0 0}
.meta{margin:40px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px 32px;border-top:2px solid var(--ink);padding-top:20px}
.meta dt{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--mid)}
.meta dd{margin:6px 0 0;font-weight:600}
.stats{margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.stat{background:var(--ink);color:#fff;border-radius:22px;padding:22px 20px 18px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.stat b{font-family:var(--display);font-size:clamp(40px,4vw,60px);font-weight:700;line-height:1}
.stat span{font-size:15px;margin-top:12px;color:var(--grey)}
.stats-note{margin:14px 0 0;font-size:14px;color:var(--mid)}
.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(48px,8vh,96px);padding:32px 0 48px;border-top:2px solid var(--ink)}
.pager a{text-decoration:none;font-family:var(--display);text-transform:uppercase;font-weight:700;font-size:clamp(20px,2.4vw,30px);letter-spacing:.01em}
@media (hover:hover){.pager a:hover{color:var(--mid)}}

/* about */
.about .wrap{max-width:900px;text-align:center;padding-top:clamp(40px,8vh,96px);padding-bottom:clamp(56px,10vh,112px)}
.about .big-p{margin:0 auto clamp(40px,7vh,80px);max-width:22ch;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,4.8vw,68px);line-height:.95;letter-spacing:-.01em;color:var(--ink)}
.about .big-p.fill{display:inline-block;background:linear-gradient(180deg,var(--ink) 0,var(--ink) var(--fill,0%),var(--grey) var(--fill,0%));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.about .about-contact{margin:clamp(24px,5vh,48px) 0 0}
.about .about-contact a{text-decoration:none;border-bottom:2px solid var(--ink)}
@media (hover:hover){.about .about-contact a:hover{color:var(--mid);border-color:var(--mid)}}

/* ---------- project pages ---------- */
.pg .wrap{padding-bottom:0}
.pg .lede{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px 64px;align-items:end;margin-top:24px}
@media (max-width:860px){.pg .lede{grid-template-columns:1fr}}
.pg .summary{margin:0}
.media{border-radius:var(--r);overflow:hidden;background:var(--soft)}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.media.tall{aspect-ratio:3/4}
.media.wide{aspect-ratio:16/9}
.media.sq{aspect-ratio:1}
/* padding-top:0 undoes the home-page .hero rule, which shares the class name */
.media.hero{padding-top:0;aspect-ratio:21/10;margin-top:clamp(32px,5vh,56px)}
.poster-hero{position:relative;background:#111;display:flex;justify-content:center;align-items:center}
.poster-hero .bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(28px) brightness(.75);transform:scale(1.1)}
.poster-hero img:not(.bg){position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:auto;height:88%;max-width:90%;object-fit:contain;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
/* banner gradient continues the image's own diagonal gradient (sampled from its corners) */
.grad-hero{background:linear-gradient(135deg,#5713e6 0%,#7135ec 17.7%,#a172f6 50%,#d1aeff 82.3%,#ebcfff 100%);display:flex;justify-content:center;align-items:center}
.grad-hero img{width:auto;height:148%;object-fit:contain;flex:none}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
@media (max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.g3>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}.g6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.g2{grid-template-columns:1fr}.g6{grid-template-columns:repeat(2,1fr)}}
figure{margin:0}
figcaption{margin-top:10px}
figcaption b{display:block;font-weight:600;font-size:15px;color:var(--ink);text-transform:none;letter-spacing:0;font-family:var(--body)}
.sec{margin-top:clamp(56px,9vh,112px)}
.sec h3{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,4vw,54px);line-height:1;letter-spacing:-.01em}
.sec .lead{margin:16px 0 0;max-width:62ch;font-size:clamp(17px,1.4vw,20px)}
.sec .media,.sec .grid{margin-top:28px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;margin-top:36px}
.cols h4{margin:0 0 8px;font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:22px;line-height:1.1;padding-top:16px;border-top:2px solid var(--ink)}
.cols p{margin:0}
.cols ul{margin:12px 0 0;padding-left:18px}
.cols li{margin:6px 0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 56px;align-items:start;margin-top:28px}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split .text ul{margin:16px 0 0;padding-left:18px}
.split .text li{margin:6px 0}
.bars{margin-top:24px;display:grid;gap:14px}
.bars .row{display:flex;justify-content:space-between;font-weight:600;font-size:15px}
.bars .track{height:12px;background:var(--soft);border-radius:999px;margin-top:6px;overflow:hidden}
.bars .fill{height:100%;background:var(--ink);border-radius:999px}
.share{display:flex;height:44px;border-radius:999px;overflow:hidden;margin-top:14px;font-size:14px;font-weight:600}
.share div{display:flex;align-items:center;padding-left:14px;white-space:nowrap;overflow:hidden}
.share .a{background:var(--ink);color:#fff}.share .b{background:var(--grey);color:var(--ink)}
.vid{position:relative;display:block;text-decoration:none;background:var(--ink);color:#fff;border-radius:var(--r);aspect-ratio:16/9;overflow:hidden;padding:22px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .3s var(--ease)}
@media (hover:hover){.vid:hover{transform:translateY(-4px)}}
.vid .play{width:56px;height:56px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center}
.vid .play svg{width:22px;height:22px;margin-left:3px}
.vid .t{font-family:var(--display);text-transform:uppercase;font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1}
.vid .c{color:var(--grey);font-size:14px;margin-top:6px}
.vid.has-img{padding:0}
.vid.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.vid.has-img .play{position:absolute;left:22px;bottom:22px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (hover:hover){.vid.playing:hover{transform:none}}
.vid.has-img .meta2{position:absolute;right:22px;bottom:22px;text-align:right;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.chips{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{border:2px solid var(--ink);border-radius:999px;padding:8px 16px;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:14px;font-weight:600}
.link{display:inline-flex;margin-top:20px}

.stats.g3x{grid-template-columns:repeat(3,1fr)}
@media (max-width:600px){.grid.vids,.grid.vtiles{grid-template-columns:1fr}.grid.vids>:last-child,.grid.vtiles>:last-child{grid-column:auto;width:auto;justify-self:stretch}}
@media (max-width:600px){.stats.g3x{grid-template-columns:repeat(2,1fr)}}
.media.pdf{display:grid;place-items:center;text-decoration:none;background:var(--ink);color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:14px;text-align:center;padding:16px}
@media (hover:hover){.media.pdf:hover{background:#000}}
/* CSS laptop mock-up */
.laptop{perspective:1800px;padding:6% 7% 2%;transform-style:preserve-3d}
.laptop .lid{position:relative;transform:rotateX(-6deg) rotateY(10deg);transform-origin:50% 100%;background:#1c1c1c;border-radius:16px 16px 6px 6px;padding:12px 12px 16px;box-shadow:0 40px 60px -30px rgba(0,0,0,.55),inset 0 0 0 1px #3a3a3a}
.laptop .cam{position:absolute;top:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#444;box-shadow:inset 0 0 0 1px #222}
.laptop .screen{aspect-ratio:16/10;background:#000;border-radius:6px;overflow:hidden}
.laptop .screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.laptop .base{position:relative;height:16px;margin:0 -6%;background:linear-gradient(#ececec,#bfbfbf);border-radius:3px 3px 14px 14px;transform:rotateX(-6deg) rotateY(10deg);transform-origin:50% 0;box-shadow:0 18px 30px -16px rgba(0,0,0,.5)}
.laptop .notch{position:absolute;top:0;left:50%;width:18%;height:6px;margin-left:-9%;background:#a9a9a9;border-radius:0 0 8px 8px}
.laptop .foot{height:5px;margin:0 -5%;background:#8f8f8f;border-radius:0 0 10px 10px;transform:rotateX(-6deg) rotateY(10deg);transform-origin:50% 0;opacity:.8}

/* flick-book carousel */
/* width capped so a whole 4:5 page (+ counter) fits under the sticky bar on short screens */
.book{position:relative;outline-offset:6px;max-width:min(560px,calc((100svh - 180px) * .8));margin:0 auto}
/* the frame clips; the track inside it slides (clipping on the track itself hid every page after the first) */
.book-view{border-radius:var(--r);overflow:hidden;background:var(--soft);box-shadow:var(--shadow)}
.book-track{display:flex;cursor:grab;touch-action:pan-y;user-select:none;transition:transform .5s var(--ease)}
.book-track.drag{transition:none;cursor:grabbing}
.book .page{flex:0 0 100%;aspect-ratio:4/5}
.book .page img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.book-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transition:transform .25s var(--ease),opacity .2s}
@media (hover:hover){.book-btn:hover{transform:translateY(-50%) scale(1.08)}}
.book-btn.prev{left:-26px}.book-btn.next{right:-26px}
.book-btn svg{width:22px;height:22px}
.book-btn[disabled]{opacity:.3;pointer-events:none}
.book-ui{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px;flex-wrap:wrap}
@media (max-width:600px){.book-btn{width:42px;height:42px}.book-btn.prev{left:8px}.book-btn.next{right:8px}}

/* video tiles + lightbox */
.vtile{position:relative;display:block;width:100%;text-align:left;padding:0}
.vtile .media{display:block}
.vtile img{transition:transform .5s var(--ease)}
@media (hover:hover){.vtile:hover img{transform:scale(1.04)}}
.vtile .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transition:transform .25s var(--ease)}
.vtile .play svg{width:24px;height:24px;margin-left:3px}
@media (hover:hover){.vtile:hover .play{transform:translate(-50%,-50%) scale(1.1)}}
.vtile .vcap{display:block;margin-top:10px}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(20,20,20,.92);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.lightbox[hidden]{display:none}
.lb-frame{width:min(100%,calc((100vh - 140px) * var(--ar,1.78)));width:min(100%,calc((100dvh - 140px) * var(--ar,1.78)));max-width:1200px}
.lb-frame video{width:100%;aspect-ratio:var(--ar,16/9);max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);background:#000;border-radius:var(--r);display:block;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.lb-title{color:#fff;text-align:center;margin:16px 0 0}
.lb-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);right:16px;background:#fff;color:var(--ink)}
/* article card */
.article{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:28px;border-radius:var(--r);background:var(--soft);text-decoration:none;color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
@media (hover:hover){.article:hover{transform:translateY(-4px);box-shadow:var(--shadow)}}
.article .a-title{font-family:var(--display);text-transform:uppercase;font-weight:700;font-size:clamp(26px,2.6vw,36px);line-height:1}
.article .a-desc{font-size:16px;color:#3b4150}
.article .pill{margin-top:6px}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto}
  .overlay{transition:none}
  .avatar .eye-lid{animation:none}
}