@font-face{font-family:'Geist';font-weight:700;font-style:normal;font-display:block;src:url('fonts/geist-Bold.woff2') format('woff2');}
@font-face{font-family:'Geist';font-weight:300;font-style:normal;font-display:block;src:url('fonts/geist-Light.woff2') format('woff2');}
@font-face{font-family:'Geist';font-weight:400;font-style:normal;font-display:block;src:url('fonts/geist-Regular.woff2') format('woff2');}
:root{--m:24px;--g:24px;--tr:12px;--fg:#fff;--bg:#000;--card:#fff;--ink:#111;--muted:#6b6b6b;--ok:#1a7f37;--tile:#151515;}
:root[data-theme=light]{--fg:#000;--bg:#fff;--card:#000;--ink:#fff;--muted:#9a9a9a;--ok:#5ad27a;--tile:#ececec;}
html,body,.nl{transition:background-color .3s ease,color .3s ease;}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);color:var(--fg);overflow:hidden;overscroll-behavior:none;}
body{font-family:'Geist',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
#feed{position:fixed;inset:0;overflow:hidden;touch-action:none;}
.col{position:absolute;top:0;will-change:transform;}
.tile{position:absolute;left:0;width:100%;cursor:pointer;overflow:hidden;border-radius:var(--tr);background:var(--tile);transform:translateZ(0);}
.tile canvas,.tile video,.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.cap{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.62);color:#fff;font-size:15px;line-height:1.3;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none;}
.cap b{display:block;font-weight:700;}
.cap span{font-weight:400;opacity:.8;}
@media (hover:hover){.tile:hover .cap{opacity:1;transform:none;}}
.lock{position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;pointer-events:none;z-index:2;color:var(--fg);font-weight:700;padding:0 20px;}
.lock h1{font-size:clamp(44px,10.4vw,150px);letter-spacing:-0.04em;line-height:1;font-weight:700;}
.lock p{font-size:clamp(15px,2.08vw,30px);font-weight:300;line-height:1.2;margin-top:clamp(2px,0.4vw,6px);}
.nav,.pops{position:fixed;top:calc(40px + env(safe-area-inset-top,0px));right:var(--m);z-index:5;}
.nav{display:flex;gap:40px;}
.pops{z-index:6;width:0;height:0;}
.nl{all:unset;font-size:21.6px;font-weight:700;color:var(--fg);padding:8px 0;display:block;cursor:pointer;transition:opacity .2s ease;}
.nl:focus-visible{outline:2px solid var(--fg);outline-offset:4px;border-radius:4px;}
.nl.on{opacity:.6;}
.pop{position:absolute;top:56px;right:0;background:var(--card);color:var(--ink);border-radius:var(--tr);padding:20px 24px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;max-width:calc(100vw - 2 * var(--m));}
.pop::before{content:'';position:absolute;left:-24px;right:-24px;top:-28px;height:28px;}
.pop.open{opacity:1;transform:none;pointer-events:auto;}
:root[data-theme=light] .lock,:root[data-theme=light] .nav{color:#fff;mix-blend-mode:difference;}
:root[data-theme=light] .nl{color:#fff;}
.about{width:400px;}
.about p{font-size:17px;font-weight:400;line-height:1.45;}
.about strong{display:block;font-size:15px;font-weight:700;margin-top:16px;}
.contact{white-space:nowrap;}
.mail{all:unset;font-size:21px;font-weight:700;cursor:pointer;}
.mail:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px;}
.hint{font-size:13px;font-weight:400;color:var(--muted);margin-top:8px;transition:color .2s ease;}
.hint.ok{color:var(--ok);}
@media (max-width:767px){
  .nav,.pops{top:calc(20px + env(safe-area-inset-top,0px));}
  .nav{gap:24px;}
  .nl{font-size:16.2px;}
  .pop{top:40px;padding:18px 20px;}
  .about{width:calc(100vw - 2 * var(--m));}
  .contact{white-space:normal;max-width:calc(100vw - 2 * var(--m));}
  .about p{font-size:15px;}
  .mail{font-size:18px;}
  .lock h1{font-size:13vw;}
  .lock p{font-size:4.2vw;}
}
:root.diff .lock,:root.diff .nav{mix-blend-mode:difference;}
:root.diff .lock,:root.diff .nl{color:#fff;}
#reel{position:fixed;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none;}
#reel[hidden]{display:none;}
.reel-box{width:min(1100px,calc(100vw - 2 * var(--m)));aspect-ratio:16/9;max-height:calc(100vh - 160px);border-radius:var(--tr);overflow:hidden;background:#000;transform:translateY(110vh);transition:transform 1.1s cubic-bezier(.2,.75,.15,1);pointer-events:auto;}
.reel-box video,.reel-box iframe{width:100%;height:100%;display:block;border:0;background:#000;}
body.reel-in .reel-box{transform:none;transition-delay:.45s;}
body.reel-out .reel-box{transform:translateY(-110vh);transition:transform .75s cubic-bezier(.55,0,.8,.35);}
#reel-close{all:unset;position:fixed;top:calc(40px + env(safe-area-inset-top,0px));right:var(--m);z-index:9;font-size:21.6px;font-weight:700;color:#fff;padding:8px 0;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .35s ease;}
#reel-close:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px;}
body.reel-in #reel-close{opacity:1;pointer-events:auto;transition-delay:.6s;}
.lock h1,.lock p,.nav .nl{transition:opacity .45s ease;}
body.reel-open .lock h1,body.reel-open .lock p,body.reel-open .nav .nl{opacity:0;}
body.reel-open .nav{pointer-events:none;}
/* return from reel: name, then subtitle, then menu items one by one */
body.reel-return .lock h1{transition:opacity .7s ease .2s;}
body.reel-return .lock p{transition:opacity .7s ease .55s;}
body.reel-return .nav .nl:nth-child(1){transition:opacity .5s ease .9s;}
body.reel-return .nav .nl:nth-child(2){transition:opacity .5s ease 1.05s;}
body.reel-return .nav .nl:nth-child(3){transition:opacity .5s ease 1.2s;}
@media (max-width:767px){#reel-close{top:calc(20px + env(safe-area-inset-top,0px));font-size:16.2px;}.reel-box{max-height:calc(100vh - 120px);}}
.reel-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;}
#reel-link{font-size:14px;font-weight:400;color:#fff;opacity:.6;text-decoration:none;pointer-events:auto;transition:opacity .2s ease,transform 1.1s cubic-bezier(.2,.75,.15,1);transform:translateY(110vh);}
#reel-link:hover{opacity:1;}
body.reel-in #reel-link{transform:none;transition-delay:0s,.5s;}
body.reel-out #reel-link{transform:translateY(-110vh);transition:transform .75s cubic-bezier(.55,0,.8,.35);}
.nl[hidden],.pop strong[hidden]{display:none;}


/* touch screens: no hover bridge, so the menu stays tappable while a card is open */
@media (hover:none),(max-width:767px){.pop::before{display:none;}}