[hidden]{display:none!important}
html,body{margin:0}

/* Layout: one dark stage lit by a chartreuse glow; giant italic serif type does the shouting; the work grid packs itself from each project's cover shape */
:root{
  --ink:#232220;--char:#34322e;--olive:#5e5b34;--volt:#d8cf45;--cream:#f1eed6;--mute:#a29f8a;
  --line:rgba(241,238,214,.14);--danger:#e8846b;
  --f-display:"Instrument Serif","Bodoni Moda","Didot",Georgia,serif;
  --f-body:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"DM Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:max(16px,env(safe-area-inset-left,0px));--gutr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{background:var(--ink);color:var(--cream);font-family:var(--f-body);font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
body.lock{overflow:hidden}
::selection{background:var(--volt);color:var(--ink)}
a{color:inherit}
img{display:block;max-width:100%}
button{font-family:var(--f-body)}
.wrap{padding-left:calc(var(--gut) + 2vw);padding-right:calc(var(--gutr) + 2vw);max-width:1600px;margin-inline:auto}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.it{font-family:var(--f-display);font-style:italic;font-weight:400}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px;border-radius:4px}
.grain{position:fixed;inset:-50%;z-index:70;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");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,-4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}}

#intro{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;transition:transform 1s var(--ease) .1s}
#intro .dots{display:flex;gap:18px}
#intro .dots i{width:22px;height:22px;border-radius:50%;background:var(--volt);animation:split .7s var(--ease) .15s backwards,hop .55s var(--ease) .85s infinite alternate}
#intro .dots i:nth-child(1){--x:40px;background:var(--cream);animation:hop .55s var(--ease) .85s infinite alternate}#intro .dots i:nth-child(2){--x:0px;animation-delay:.15s,.97s}#intro .dots i:nth-child(3){--x:-40px;animation-delay:.3s,1.09s}
#intro .dots i:nth-child(1){translate:0 0}
@keyframes split{from{translate:calc(var(--x) * -1) 0;opacity:0}}
@keyframes hop{to{transform:translateY(-26px)}}
#intro.done{transform:translateY(-101%)}#intro.gone{display:none}

.cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--volt);mix-blend-mode:difference;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease);display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.cursor span{opacity:0;transition:opacity .2s}
.cursor.big{width:86px;height:86px;margin:-43px 0 0 -43px;mix-blend-mode:normal}.cursor.big span{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;transition:transform .5s var(--ease),background .4s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.nav.solid{background:rgba(35,34,32,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.hide{transform:translateY(-110%)}
.nav .logo{display:block;line-height:0}.nav .logo svg{height:30px;width:auto;display:block}
.lg{overflow:visible}.lg .ink{fill:var(--cream)}.lg .ldot{fill:var(--volt);transform-box:fill-box;transform-origin:center}
.nav .logo:hover .ldot{animation:dotHop .5s var(--ease) calc(var(--k)*.08s)}
@keyframes dotHop{50%{transform:translateY(-35%)}}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.02em;position:relative;padding-block:4px}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--volt);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 22px;border-radius:999px;background:var(--volt);color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;border:0;cursor:pointer;transition:background .3s,opacity .3s}
.btn:hover{background:var(--cream)}
.btn:disabled{opacity:.45;cursor:not-allowed;background:var(--volt)}
.btn .d{display:inline-flex;gap:3px}.btn .d i{width:4px;height:4px;border-radius:50%;background:currentColor;transition:transform .4s var(--ease)}
.btn:hover .d i:nth-child(1){transform:translateY(-3px)}.btn:hover .d i:nth-child(3){transform:translateY(3px)}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--volt);color:var(--volt);background:transparent}
@media (max-width:760px){.nav ul{display:none}.nav .logo svg{height:24px}}

.hero{position:relative;min-height:min(100svh,980px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;padding-block:calc(150px + env(safe-area-inset-top,0px)) clamp(56px,7vw,84px)}
.hero>.wrap{width:100%;padding-left:calc(var(--gut) + 12px + clamp(18px,3vw,52px));padding-right:calc(var(--gutr) + 12px + clamp(18px,3vw,52px))}
.hero .glow{position:absolute;z-index:-1;width:120vmax;height:120vmax;left:var(--gx,70%);top:var(--gy,40%);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(216,207,69,.55),rgba(140,134,52,.28) 40%,rgba(94,91,52,.08) 65%,transparent 75%);pointer-events:none;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{scale:1.12}}
.hero .frame{position:absolute;top:calc(86px + env(safe-area-inset-top,0px));bottom:clamp(20px,3vw,32px);left:calc(var(--gut) + 12px);right:calc(var(--gutr) + 12px);border:1px solid rgba(216,207,69,.35);pointer-events:none;z-index:-1}
.hero .frame::before,.hero .frame::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--volt);top:-4px;left:-4px}
.hero .frame::after{top:auto;left:auto;bottom:-4px;right:-4px}
.hero h1{margin:0;font-family:var(--f-display);font-style:italic;font-weight:400;line-height:.86;letter-spacing:-.02em;font-size:clamp(50px,14vw,236px)}
.hero h1 .row{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .row:nth-child(2){color:var(--volt);padding-left:.6em}
.ch{display:inline-block;animation:rise 1.1s var(--ease) backwards;animation-delay:calc(var(--intro,1.6s) + var(--i)*.035s)}
@keyframes rise{from{transform:translateY(110%) rotate(6deg)}}
.ell{display:inline-flex;gap:.06em;vertical-align:baseline}
.ell i{display:inline-block;width:.12em;height:.12em;border-radius:50%;background:currentColor;animation:blink 1.6s infinite}
.ell i:nth-child(2){animation-delay:.2s}.ell i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:1}30%{opacity:.2}}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;margin-top:40px}
.hero-foot p{max-width:34ch;margin:0;font-size:clamp(17px,1.5vw,21px)}
.hero-foot p em{font-family:var(--f-display);font-size:1.25em}
.scrollcue{display:flex;align-items:center;gap:14px}
.scrollcue .bar{width:1px;height:56px;background:var(--line);position:relative;overflow:hidden}
.scrollcue .bar::after{content:"";position:absolute;inset:0;background:var(--volt);animation:drip 2s var(--ease) infinite}
@keyframes drip{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
.float-dots{position:absolute;right:calc(var(--gutr) + 12px + clamp(18px,3vw,52px));top:calc(120px + 8vw);display:flex;gap:2vw;z-index:-1}
.float-dots i{width:clamp(14px,2.2vw,36px);aspect-ratio:1;border-radius:50%;background:var(--cream);opacity:.9;animation:bob 5s ease-in-out infinite}
.float-dots i:nth-child(2){animation-delay:-1.6s}.float-dots i:nth-child(3){animation-delay:-3.2s}
@keyframes bob{50%{transform:translateY(-22px)}}

.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:22px}
.marquee .track{display:flex;width:max-content;animation:slide 32s linear infinite}
.marquee .sk{transform:skewX(var(--skew,0deg))}
.marquee span{font-family:var(--f-display);font-style:italic;font-size:clamp(40px,6vw,92px);line-height:1;white-space:nowrap;padding-right:.5em;display:flex;align-items:center;gap:.5em}
.marquee span b{display:inline-flex;gap:.12em}.marquee span b i{width:.14em;height:.14em;border-radius:50%;background:var(--volt)}
.marquee span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--cream)}
@keyframes slide{to{transform:translateX(-50%)}}

section{position:relative}
.sec{padding-block:clamp(90px,13vw,180px)}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(36px,5vw,70px)}
.head h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(52px,9vw,150px);line-height:.9;letter-spacing:-.02em;text-wrap:balance}
.head h2 em{color:var(--volt)}
.head p{max-width:40ch;margin:0;color:var(--mute)}

.scene{padding-block:clamp(30px,5vw,70px) clamp(40px,6vw,90px)}
.sentence{margin:0;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(58px,12.5vw,210px);line-height:.95;letter-spacing:-.02em;white-space:nowrap}
.stop{position:relative;display:inline-block;width:calc(.15em + var(--p,0) * .42em);height:.15em;margin-left:.05em;vertical-align:baseline}
.stop i{position:absolute;left:0;bottom:0;width:.15em;height:.15em;border-radius:50%;background:var(--cream);transition:background .5s}
.stop i:nth-child(2){left:calc(var(--p,0) * .21em);opacity:min(1,calc(var(--p,0) * 3))}
.stop i:nth-child(3){left:calc(var(--p,0) * .42em);opacity:min(1,calc(var(--p,0) * 3))}
.scene.done .stop i{background:var(--volt)}
.cap{margin:0 0 clamp(80px,11vw,160px);max-width:30ch;font-size:clamp(20px,2vw,28px);line-height:1.35;color:var(--mute)}
.mission{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:clamp(28px,6vw,100px);align-items:start}
.mission .side{position:sticky;top:110px}
.mission .side h2{margin:0 0 20px;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(56px,8vw,128px);line-height:.85;color:var(--volt)}
.mission .say{font-family:var(--f-display);font-size:clamp(30px,3.9vw,60px);line-height:1.08;margin:0;text-wrap:pretty}
.mission .say .w{opacity:var(--o,1);transition:opacity .25s linear}
.mission .say .k{font-style:italic;color:var(--volt)}
.dots-def{margin-top:clamp(48px,6vw,90px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;border-top:1px solid var(--line)}
.dots-def>div{padding:28px 18px 0 0}
.dots-def .n{display:flex;gap:6px;margin-bottom:22px}
.dots-def .n i{width:12px;height:12px;border-radius:50%;background:var(--line)}
.dots-def .n i.on{background:var(--volt)}
.dots-def h3{margin:0 0 6px;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1}
.dots-def p{margin:0;color:var(--mute);font-size:15px;max-width:30ch}
@media (max-width:820px){.mission{grid-template-columns:1fr}.mission .side{position:static}.dots-def{grid-template-columns:1fr}}

/* work: self-packing bento */
.filters{display:flex;flex-wrap:wrap;gap:10px}
.filters button{font-size:14px;font-weight:500;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--cream);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.filters button[aria-pressed="true"]{background:var(--volt);color:var(--ink);border-color:var(--volt)}
.filters button:hover{border-color:var(--volt)}
.filters sup{font-family:var(--f-mono);font-size:10px;margin-left:4px}
.bento{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px;--H:clamp(260px,30vw,460px)}
.bento::after{content:"";flex:999 1 0}
.pc{position:relative;border-radius:8px;overflow:hidden;background:var(--char);cursor:pointer;flex:var(--r) 1 calc(var(--r) * var(--H));aspect-ratio:var(--r);max-height:calc(var(--H) * 1.5);transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.pc .media{position:absolute;inset:0;overflow:hidden}
.pc .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .9s var(--ease),transform 1.6s var(--ease)}
.pc .media img.on{opacity:1;transform:scale(1)}
.pc:hover .media img.on{transform:scale(1.06)}
.pc .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(20,19,18,.86));pointer-events:none}
.pc .info{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.pc .info h3{margin:4px 0 0;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(22px,2.2vw,36px);line-height:1;text-wrap:balance}
.pc .tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--volt)}
.pc .cnt{flex:none;display:flex;gap:4px;align-items:center}
.pc .cnt i{width:6px;height:6px;border-radius:50%;background:rgba(241,238,214,.35);transition:background .3s,transform .3s}
.pc .cnt i.on{background:var(--volt);transform:scale(1.3)}
.pc .go{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;background:var(--volt);color:var(--ink);display:grid;place-items:center;transform:scale(0) rotate(-90deg);transition:transform .5s var(--ease)}
.pc:hover .go,.pc:focus-visible .go{transform:scale(1) rotate(0)}
.pc .go svg{width:18px;height:18px}
.pc.enter{animation:cardIn 1.1s var(--ease) backwards;animation-delay:calc(var(--d,0)*70ms)}
@keyframes cardIn{from{clip-path:inset(100% 0 0 0 round 8px);transform:translateY(40px)}to{clip-path:inset(0 0 0 0 round 8px)}}
.pc.gone{display:none}
@media (max-width:820px){.bento{gap:10px;--H:150px}.pc .info{padding:10px}.pc .info h3{font-size:20px}.pc .go{display:none}}
.empty{border:1px dashed rgba(216,207,69,.4);border-radius:10px;padding:clamp(40px,7vw,90px) 24px;text-align:center;margin-top:34px;display:grid;justify-items:center;gap:14px}
.empty .dots3{display:flex;gap:10px}.empty .dots3 i{width:14px;height:14px;border-radius:50%;background:var(--volt);animation:hop .7s var(--ease) infinite alternate}
.empty .dots3 i:nth-child(2){animation-delay:.12s}.empty .dots3 i:nth-child(3){animation-delay:.24s}
.empty h3{margin:10px 0 0;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(34px,4vw,56px);line-height:1}
.empty p{margin:0;color:var(--mute);max-width:42ch}

/* project viewer */
.pv{position:fixed;inset:0;z-index:95;background:var(--ink);overflow-y:auto;overscroll-behavior:contain;clip-path:inset(100% 0 0 0);visibility:hidden;transition:clip-path .9s var(--ease),visibility 0s .9s}
.pv.on{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .9s var(--ease)}
.pv .bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:calc(14px + env(safe-area-inset-top,0px)) 14px;background:linear-gradient(var(--ink) 60%,transparent)}
.rb{background:transparent;border:1px solid var(--line);color:var(--cream);width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:18px;display:grid;place-items:center;transition:all .3s;flex:none}
.rb:hover{background:var(--volt);color:var(--ink);border-color:var(--volt)}
.pv header{padding-block:clamp(30px,6vw,80px) clamp(30px,4vw,50px);display:grid;gap:22px}
.pv h2{margin:0;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(56px,11vw,190px);line-height:.86;letter-spacing:-.02em;overflow-wrap:anywhere}
.pv h2 .ln{display:block;overflow:hidden}
.pv h2 .ln>span{display:inline-block}
.pv.on h2 .ln>span{animation:rise 1s var(--ease) .25s backwards}
.pv .meta{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--volt);color:var(--ink);font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.pv .desc{margin:0;max-width:60ch;color:var(--cream);font-size:clamp(17px,1.4vw,20px)}
.pv .shots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;padding-bottom:40px}
.pv .shot{margin:0;grid-column:span 12;border-radius:8px;overflow:hidden;background:var(--char)}
.pv .shot.half{grid-column:span 6}
.pv .shot img{width:100%;height:auto}
.pv.on .shot{animation:cardIn 1.1s var(--ease) backwards;animation-delay:calc(.35s + var(--d,0)*120ms)}
.pv .next{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-block:40px calc(40px + env(safe-area-inset-bottom,0px));cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;color:var(--cream);width:100%;text-align:left}
.pv .next b{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(36px,6vw,90px);line-height:1;transition:color .3s}
.pv .next:hover b{color:var(--volt)}
@media (max-width:700px){.pv .shot.half{grid-column:span 12}}

/* services */
.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc li{border-bottom:1px solid var(--line);position:relative}
.svc a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:clamp(18px,2.2vw,30px) 0;text-decoration:none;position:relative;z-index:1}
.svc h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(40px,6.4vw,104px);line-height:1;letter-spacing:-.01em;transition:transform .6s var(--ease),color .3s}
.svc .meta{display:flex;align-items:center;gap:22px;color:var(--mute);font-size:15px;text-align:right}
.svc .arrow{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .4s,border-color .4s;flex:none}
.svc .arrow svg{width:20px;height:20px;transition:transform .6s var(--ease)}
.svc li::before{content:"";position:absolute;inset:0;background:var(--volt);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease)}
.svc li:hover::before{transform:scaleY(1)}
.svc li:hover h3{transform:translateX(24px) skewX(-8deg);color:var(--ink)}
.svc li:hover .meta{color:var(--ink)}
.svc li:hover .arrow{border-color:var(--ink);background:var(--ink);color:var(--volt)}
.svc li:hover .arrow svg{transform:rotate(-45deg)}
.peek{position:fixed;left:0;top:0;z-index:40;width:260px;aspect-ratio:3/4;border-radius:6px;overflow:hidden;pointer-events:none;opacity:0;scale:.6;transition:opacity .35s,scale .5s var(--ease);box-shadow:0 30px 60px rgba(0,0,0,.45);background:var(--char)}
.peek.on{opacity:1;scale:1}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.svc .meta .t{display:none}.svc .arrow{width:42px;height:42px}.peek{display:none}}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.step{border:1px solid var(--line);border-radius:6px;padding:28px 24px 30px;position:relative;overflow:hidden;transition:border-color .4s}
.step::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(216,207,69,.22),transparent 60%);opacity:0;transition:opacity .4s}
.step:hover{border-color:rgba(216,207,69,.5)}.step:hover::before{opacity:1}
.step .no{font-family:var(--f-mono);font-size:12px;color:var(--volt);letter-spacing:.1em}
.step h3{position:relative;margin:56px 0 10px;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:40px;line-height:1}
.step p{position:relative;margin:0;color:var(--mute);font-size:15px}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

.contact{overflow:hidden;isolation:isolate}
.contact .glow2{position:absolute;z-index:-1;inset:auto -20% -60% -20%;height:110%;background:radial-gradient(closest-side,rgba(216,207,69,.45),rgba(94,91,52,.15) 55%,transparent 72%)}
.contact h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(60px,12vw,210px);line-height:.86;letter-spacing:-.025em}
.contact h2 em{color:var(--volt)}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,100px);margin-top:clamp(48px,6vw,90px);align-items:start}
.cinfo{display:grid;gap:26px}
.cinfo .v{font-family:var(--f-display);font-size:clamp(26px,2.6vw,38px);line-height:1.1;user-select:all;word-break:break-word}
.copy{margin-top:8px;background:none;border:1px solid var(--line);color:var(--cream);border-radius:999px;padding:6px 14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.copy:hover{border-color:var(--volt);color:var(--volt)}
.frm{display:grid;gap:16px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{position:relative}
.fld input,.fld textarea{width:100%;background:rgba(35,34,32,.55);border:1px solid var(--line);border-radius:6px;color:var(--cream);font:inherit;font-size:16px;padding:22px 16px 10px;transition:border-color .3s;resize:vertical;-webkit-appearance:none;appearance:none}
.fld textarea{min-height:120px}
.fld label{position:absolute;left:16px;top:16px;color:var(--mute);font-size:15px;pointer-events:none;transition:all .3s var(--ease)}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--volt)}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,.fld textarea:focus+label,.fld textarea:not(:placeholder-shown)+label{top:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--volt)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:14px;cursor:pointer;transition:all .3s}
.chips input:checked+label{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.chips input:focus-visible+label{outline:2px solid var(--volt);outline-offset:2px}
.sent{padding:16px 18px;border-radius:6px;background:var(--volt);color:var(--ink);font-weight:500}
.sent.warn{background:var(--cream)}
@media (max-width:820px){.cgrid{grid-template-columns:1fr}.fr{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:40px calc(30px + env(safe-area-inset-bottom,0px));overflow:hidden}
footer .big{margin-top:30px}
footer .big svg{width:100%;height:auto;display:block}
footer .big .ldot{animation:blink 2.4s infinite;animation-delay:calc(var(--k)*.3s)}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:22px}
footer nav a{text-decoration:none;font-size:14px;color:var(--mute)}
footer nav a:hover{color:var(--volt)}

/* admin */
.fab{position:fixed;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;background:var(--cream);color:var(--ink);border:0;font-weight:600;font-size:13px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .4s var(--ease)}
.fab:hover{transform:translateY(-3px)}
.fab .d{display:inline-flex;gap:3px}.fab .d i{width:5px;height:5px;border-radius:50%;background:var(--ink)}
.adm{position:fixed;inset:0;z-index:97;display:flex;justify-content:flex-end;visibility:hidden;transition:visibility 0s .6s}
.adm.on{visibility:visible;transition:none}
.adm .scrim{position:absolute;inset:0;background:rgba(15,14,13,.6);opacity:0;transition:opacity .5s}
.adm.on .scrim{opacity:1}
.adm .panel{position:relative;width:min(620px,100%);height:100%;background:#2a2926;border-left:1px solid var(--line);display:grid;grid-template-rows:auto minmax(0,1fr) auto;transform:translateX(100%);transition:transform .6s var(--ease)}
.adm.on .panel{transform:none}
.adm .ph{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(16px + env(safe-area-inset-top,0px)) calc(20px + env(safe-area-inset-right,0px)) 16px 22px;border-bottom:1px solid var(--line)}
.adm .ph h2{margin:0;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:34px;line-height:1}
.adm .body{overflow-y:auto;padding:22px calc(22px + env(safe-area-inset-right,0px)) 30px 22px;display:grid;gap:26px;align-content:start}
.adm .pf{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:14px calc(20px + env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) 22px;border-top:1px solid var(--line);background:#2a2926}
.adm .pf span{font-size:14px;color:var(--mute)}
.tabs{display:flex;gap:6px;background:var(--ink);padding:4px;border-radius:999px;width:max-content;max-width:100%}
.tabs button{border:0;background:transparent;color:var(--cream);padding:9px 16px;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--volt);color:var(--ink)}
.fieldset{display:grid;gap:10px}
.fieldset>.label{color:var(--cream)}
.tin{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:6px;color:var(--cream);font:inherit;font-size:16px;padding:13px 14px}
.tin:focus{outline:none;border-color:var(--volt)}
textarea.tin{min-height:90px;resize:vertical}
.tagpick{display:flex;flex-wrap:wrap;gap:8px}
.tagpick button{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--cream);font-size:14px;cursor:pointer;transition:all .25s}
.tagpick button[aria-pressed="true"]{background:var(--volt);color:var(--ink);border-color:var(--volt)}
.drop{border:1.5px dashed rgba(216,207,69,.45);border-radius:10px;padding:26px 16px;text-align:center;cursor:pointer;transition:background .3s,border-color .3s;display:grid;gap:6px;justify-items:center}
.drop.over{background:rgba(216,207,69,.1);border-color:var(--volt)}
.drop b{font-weight:600}
.drop small{color:var(--mute);font-size:13px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.th{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--ink);border:1px solid var(--line)}
.th img{width:100%;height:100%;object-fit:cover}
.th.cover{border-color:var(--volt);box-shadow:0 0 0 1px var(--volt)}
.th .cv{position:absolute;left:6px;top:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:var(--volt);color:var(--ink);padding:2px 6px;border-radius:3px}
.th .ctl{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;padding:5px;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.th .ctl button{width:28px;height:28px;border-radius:50%;border:0;background:rgba(241,238,214,.9);color:var(--ink);cursor:pointer;font-size:13px;display:grid;place-items:center}
.th .ctl button:hover{background:var(--volt)}
.th .busy{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,19,18,.65);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.th .busy.err{color:var(--danger);text-align:center;padding:6px}
.plist{display:grid;gap:10px}
.prow{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--ink)}
.prow img,.prow .ph0{width:64px;height:64px;border-radius:5px;object-fit:cover;background:var(--char)}
.prow b{display:block;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:22px;line-height:1.05;overflow-wrap:anywhere}
.prow small{color:var(--mute);font-size:13px}
.prow .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sb{border:1px solid var(--line);background:transparent;color:var(--cream);height:34px;min-width:34px;padding:0 10px;border-radius:999px;cursor:pointer;font-size:13px}
.sb:hover{border-color:var(--volt);color:var(--volt)}
.sb.del:hover{border-color:var(--danger);color:var(--danger)}
.sb.yes{background:var(--danger);border-color:var(--danger);color:var(--ink)}
.sb:disabled{opacity:.3;cursor:default}
.note{font-size:14px;color:var(--mute);margin:0}
.msg{padding:12px 14px;border-radius:6px;font-size:14px}
.msg.err{background:rgba(232,132,107,.15);color:var(--danger);border:1px solid rgba(232,132,107,.4)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:99;transform:translate(-50%,calc(100% + 60px));visibility:hidden;background:var(--volt);color:var(--ink);font-weight:600;font-size:14px;padding:12px 20px;border-radius:999px;transition:transform .6s var(--ease);box-shadow:0 12px 30px rgba(0,0,0,.35);max-width:calc(100% - 32px)}
.toast.on{transform:translate(-50%,0);visibility:visible}

.rv{transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.rv.pre{opacity:0;transform:translateY(60px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  #intro{display:none}
  .rv.pre{opacity:1;transform:none}
  .pc .media img{transform:none}
  html{scroll-behavior:auto}
}

.skel{flex:var(--r) 1 calc(var(--r) * var(--H));aspect-ratio:var(--r);border-radius:8px;background:linear-gradient(100deg,var(--char) 30%,#3d3b36 50%,var(--char) 70%);background-size:300% 100%;animation:shim 1.4s linear infinite}
@keyframes shim{from{background-position:100% 0}to{background-position:-100% 0}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn:disabled{opacity:.5}