/* ─────────────────────────────────────────
   RESET & TOKENS
───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;cursor:none !important}
:root{
   --ink:#1a1714;--paper:#f2ede4;--surface:#ede8df;--accent:#5e30eb;--accent-rgb:94,48,235;
  --muted:rgba(var(--ink-rgb),0.4);--border:rgba(var(--ink-rgb),0.12);
  --panel-bg:#f7f3ec;--panel-border:rgba(var(--ink-rgb),0.1);
  --font-s:'Cormorant Garamond',serif;--font-b:'DM Sans',sans-serif;
  --fs-xs:.6rem;--fs-sm:.7rem;--fs-md:.85rem;--fs-body:.95rem;--fs-lg:1.3rem;--fs-xl:2.2rem;
  --ls-tight:.04em;--ls-normal:.1em;--ls-wide:.16em;--ls-xwide:.25em;
  --ink-rgb:26,23,20;--paper-rgb:242,237,228;--ct-accent-rgb:255,120,40;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:var(--font-b);font-weight:300;background:var(--ink);color:var(--paper)}

/* ─────────────────────────────────────────
   CURSOR
───────────────────────────────────────── */
#cur{position:fixed;z-index:9999;width:10px;height:10px;background:var(--accent);border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);transition:width .28s var(--ease),height .28s var(--ease),background .28s var(--ease),border-width .28s var(--ease),opacity .2s;box-shadow:0 0 0 1.5px rgba(255,255,255,0.55)}
body.ch #cur{width:40px;height:40px;background:transparent;border-width:1px}
#cur-work-badge{position:fixed;left:0;top:0;z-index:9997;pointer-events:none;transform:translate(-9999px,-9999px) translateY(-50%);margin-left:18px;opacity:0;padding:.18rem .55rem;border-radius:2px;background:var(--accent);color:#fff;font-family:var(--font-b);font-size:var(--fs-xs);font-weight:500;letter-spacing:var(--ls-normal);text-transform:uppercase;white-space:nowrap;transition:opacity .8s var(--ease),margin-left .18s var(--ease);will-change:transform,margin-left}
#cur-work-badge.is-visible{opacity:1}
body.ch #cur-work-badge{margin-left:34px}
#cur-tail{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:visible}
#cur-tail-line{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:butt;stroke-linejoin:miter;opacity:.75}
.cur-tail-dot{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.95}
body.ch #cur-tail-line{opacity:.48}
body.ch .cur-tail-dot{opacity:.62}
body.native-cursor #cur-tail,body.reel-popup-open #cur-tail{display:none !important}
body.native-cursor #cur-work-badge,body.reel-popup-open #cur-work-badge{display:none !important}
@media (pointer:coarse){#cur-work-badge{display:none !important}}

/* ─────────────────────────────────────────
   STAGE & REEL
───────────────────────────────────────── */
#stage{position:fixed;inset:0;z-index:0;background:var(--ink);overflow:hidden}
#stage::after{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(var(--accent-rgb),0.06) 0%,transparent 70%),linear-gradient(to top,rgba(var(--ink-rgb),0.78) 0%,rgba(var(--ink-rgb),0.05) 50%,rgba(var(--ink-rgb),0.52) 100%);pointer-events:none}
#reel{position:absolute;inset:0;overflow:hidden}
#reel iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:177.78vh;height:100vh;min-width:100%;min-height:56.25vw;border:none}
#reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:none}
#reel-block{position:absolute;inset:0;z-index:1;pointer-events:all;background:transparent}
#rp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pg{position:absolute;inset:0;background-image:linear-gradient(rgba(var(--paper-rgb),0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--paper-rgb),0.03) 1px,transparent 1px);background-size:60px 60px}
.pi{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.bp{width:80px;height:80px;border:1px solid rgba(var(--paper-rgb),0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .25s,transform .25s}
.bp:hover{border-color:var(--accent);transform:scale(1.06)}
.bpt{width:0;height:0;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:21px solid rgba(var(--paper-rgb),0.55);margin-left:5px}
.bp:hover .bpt{border-left-color:var(--accent)}
.pl{font-size:var(--fs-xs);letter-spacing:var(--ls-xwide);text-transform:uppercase;color:rgba(var(--paper-rgb),0.22)}

#grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:128px 128px}

/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */
#nav{position:fixed;z-index:100;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2.5rem;pointer-events:none}
.nl{font-family:var(--font-s);font-size:var(--fs-lg);font-weight:400;letter-spacing:var(--ls-tight);color:var(--paper);text-decoration:none;pointer-events:all;opacity:0;animation:fdn .8s .4s var(--ease) forwards}
.nls{display:flex;gap:.25rem;list-style:none;pointer-events:all;opacity:0;animation:fdn .8s .6s var(--ease) forwards}
.nls button{font-family:var(--font-b);font-size:var(--fs-sm);letter-spacing:var(--ls-wide);text-transform:uppercase;background:none;border:none;color:rgba(var(--paper-rgb),0.45);padding:.5rem 1rem;transition:color .2s;position:relative}
.nls button::after{content:'';position:absolute;bottom:2px;left:1rem;right:1rem;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nls button:hover,.nls button.active{color:var(--paper)}
.nls button:hover::after,.nls button.active::after{transform:scaleX(1)}

/* ─────────────────────────────────────────
   HERO TEXT & LOG STACK
───────────────────────────────────────── */
#ht{position:fixed;z-index:10;bottom:3rem;left:2.5rem;pointer-events:none}
.htag{font-family:var(--font-b);font-size:var(--fs-xs);letter-spacing:var(--ls-xwide);text-transform:uppercase;color:var(--accent);margin-bottom:.9rem;font-weight:500;opacity:1}
.hname{font-family:var(--font-s);font-size:clamp(4rem,8vw,9rem);font-weight:700;line-height:.88;letter-spacing:.01em;opacity:1}
.sc-char{display:inline;opacity:0;transition:opacity .08s}
.hname em{color:var(--accent);font-style:italic;display:block}
#sh{position:fixed;z-index:10;bottom:3rem;right:2.5rem;display:flex;align-items:center;gap:.65rem;pointer-events:none;opacity:0;animation:fup .8s 1.1s var(--ease) forwards}
#log-stack{position:fixed;z-index:10;bottom:5.5rem;right:2.5rem;pointer-events:none;overflow:hidden}
.ls-inner{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;transition:transform 1.2s var(--ease);will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.ls-entry{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:rgba(var(--paper-rgb),0.9);line-height:1.5;text-align:right;opacity:0;transition:opacity 1.2s var(--ease);white-space:normal;word-break:break-word;will-change:opacity}
.ls-entry.show{opacity:1}
.avail-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:pulse 2.4s ease-in-out infinite}
.avail-text{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:rgba(var(--paper-rgb),0.45)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}

/* ─────────────────────────────────────────
   WATCH REEL BUTTON
───────────────────────────────────────── */
#watch-reel-wrap{position:fixed;z-index:10;top:66.666%;left:0;right:0;display:flex;justify-content:center;transform:translateY(-50%);opacity:0;animation:fup .8s 1s var(--ease) forwards}
#watch-reel{display:flex;align-items:center;justify-content:center;gap:.75rem;background:none;border:1px solid rgba(var(--paper-rgb),0.3);color:var(--paper);font-family:var(--font-b);font-size:var(--fs-sm);letter-spacing:var(--ls-wide);text-transform:uppercase;padding:.7rem 1.5rem;transition:border-color .25s,background .25s,background-image .25s}
#watch-reel:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),0.12);background-image:repeating-linear-gradient(-55deg,transparent,transparent 15px,rgba(var(--accent-rgb),0.22) 15px,rgba(var(--accent-rgb),0.22) 16px);background-size:21px 100%}
.wr-play{width:22px;height:22px;border:1px solid rgba(var(--paper-rgb),0.4);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .25s}
#watch-reel:hover .wr-play{border-color:var(--accent)}
.wr-tri{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:9px solid rgba(var(--paper-rgb),0.7);margin-left:2px}

/* ─────────────────────────────────────────
   LIGHTBOX
───────────────────────────────────────── */
#lightbox{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s ease}
#lightbox.open{opacity:1;pointer-events:all}
#lb-backdrop{position:absolute;inset:0;background:rgba(10,8,6,0.88);backdrop-filter:blur(8px)}
#lb-inner{position:relative;z-index:1;width:min(900px,92vw);display:flex;flex-direction:column;gap:1rem;transform:translateY(20px);transition:transform .45s var(--ease)}
#lightbox.open #lb-inner{transform:translateY(0)}
#lb-frame{width:100%;aspect-ratio:16/9;background:#000}
#lb-frame iframe{width:100%;height:100%;border:none;display:block;cursor:auto !important}
#lb-frame #lb-image{width:100%;height:100%;object-fit:contain;display:block}
#lb-top{display:flex;align-items:center;justify-content:space-between}
#lb-label{font-family:var(--font-b);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:rgba(var(--paper-rgb),0.4)}
#lb-close{width:32px;height:32px;border:1px solid rgba(var(--paper-rgb),0.2);background:none;color:rgba(var(--paper-rgb),0.5);font-size:var(--fs-md);line-height:1;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s,transform .25s}
#lb-close:hover{border-color:var(--accent);color:var(--paper);transform:rotate(90deg)}

/* ─────────────────────────────────────────
   PANELS (work, about, log)
───────────────────────────────────────── */
#bd{position:fixed;inset:0;z-index:200;background:rgba(var(--ink-rgb),0.45);opacity:0;pointer-events:none;transition:opacity .4s ease}
#bd.open{opacity:1;pointer-events:all}
#bd.project-open{z-index:350}

.panel{position:fixed;z-index:300;top:0;right:0;bottom:0;width:min(540px,92vw);background:rgba(247,243,236,0.97);backdrop-filter:blur(12px);border-left:1px solid var(--panel-border);transform:translateX(110%);transition:transform .6s var(--ease);display:flex;flex-direction:column;overflow:hidden}
.panel.wide{width:min(740px,96vw)}
.panel.open{transform:translateX(0)}
.panel.no-transition{transition:none !important}
.ph{display:flex;align-items:center;justify-content:space-between;padding:1.75rem 0 1.25rem;border-bottom:1px solid var(--panel-border);flex-shrink:0;padding-left:2rem;padding-right:2rem;gap:.75rem}
.pt2{font-family:var(--font-s);font-size:var(--fs-xl);font-weight:400;letter-spacing:var(--ls-tight);color:var(--ink)}
.pc{width:34px;height:34px;border:1px solid var(--border);background:none;color:rgba(var(--ink-rgb),0.4);font-size:var(--fs-md);line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .2s,color .2s,width .28s var(--ease),height .28s var(--ease),transform .25s}
.pc:hover{border-color:transparent;color:var(--accent);width:24px;height:24px;transform:rotate(90deg)}
.pb{flex:1;overflow-y:auto;padding:2rem;scrollbar-width:thin;scrollbar-color:rgba(var(--ink-rgb),0.1) transparent;color:var(--ink)}
.pb::-webkit-scrollbar{width:3px}.pb::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),0.1)}
#panel-work .pb,#panel-about .pb{
   position:relative;
   isolation:isolate;
   background-image:repeating-linear-gradient(-55deg,transparent,transparent 16px,rgba(var(--accent-rgb),0.18) 16px,rgba(var(--accent-rgb),0.18) 17px);
}
.panel.open .pb>*{opacity:0;animation:fup .5s var(--ease) forwards}
.panel.open .pb>*:nth-child(1){animation-delay:.08s}.panel.open .pb>*:nth-child(2){animation-delay:.15s}.panel.open .pb>*:nth-child(3){animation-delay:.21s}.panel.open .pb>*:nth-child(4){animation-delay:.27s}.panel.open .pb>*:nth-child(5){animation-delay:.32s}.panel.open .pb>*:nth-child(6){animation-delay:.37s}

/* ─────────────────────────────────────────
   WORK GRID
───────────────────────────────────────── */
.wf{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.75rem}
.fb{font-family:var(--font-b);font-size:var(--fs-xs);letter-spacing:var(--ls-normal);text-transform:uppercase;border:1px solid var(--border);background:var(--panel-bg);color:var(--muted);padding:.38rem .9rem;transition:all .2s}
.fb.active,.fb:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wg{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.wc{transition:opacity .3s}
.wci{aspect-ratio:16/9;background:var(--surface);position:relative;overflow:hidden;margin-bottom:.65rem;transition:transform .35s var(--ease)}
.wc:hover .wci{transform:scale(1.025)}
.wci img{width:100%;height:100%;object-fit:cover;display:block}
.wco{position:absolute;inset:0;background:rgba(var(--accent-rgb),0.45);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--paper);opacity:0;transition:opacity .25s}
.wc:hover .wco{opacity:1}
.wcm{display:flex;justify-content:space-between;align-items:baseline}
.wct{font-size:var(--fs-md);font-weight:500;color:var(--ink)}
.wcty{font-size:var(--fs-xs);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--muted)}
.tph{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.tph svg{width:100%;height:100%}

/* sensitive overlay */
.wci-blur img,.wci-blur .tph{filter:blur(10px);transform:scale(1.05)}
.wci-sensitive{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.wci-tape{position:absolute;left:-20%;right:-20%;width:140%;padding:.8rem 0;
  border-top:1px solid color-mix(in srgb,var(--sensitive-color,#e03030) 70%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--sensitive-color,#e03030) 70%,transparent);
  background:color-mix(in srgb,var(--sensitive-color,#e03030) 20%,transparent);
  overflow:hidden}
.wci-tape::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(-55deg,transparent,transparent 20px,
    color-mix(in srgb,var(--sensitive-color,#e03030) 30%,transparent) 20px,
    color-mix(in srgb,var(--sensitive-color,#e03030) 30%,transparent) 21px);
  background-size:27px 100%;animation:pinstripe-scroll 1.8s linear infinite}
.wci-tape-track{display:flex;gap:0;white-space:nowrap;will-change:transform}
.wci-tape-word{font-family:var(--font-b);font-weight:600;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:var(--ls-normal);
  color:var(--sensitive-color,#e03030);white-space:nowrap}
.wci-tape-dot{width:7px;height:7px;border-radius:50%;
  background:var(--sensitive-color,#e03030);flex-shrink:0;opacity:.7;margin:0 .6rem}

/* PROJECT PANEL */
#pp{z-index:400;width:min(680px,96vw);background:var(--panel-bg);border-left:1px solid var(--panel-border)}
.ppbody{flex:1;overflow-y:auto;padding:0 2rem 2rem 2rem;scrollbar-width:thin;color:var(--ink)}
.ppbody::-webkit-scrollbar{width:3px}.ppbody::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),0.08)}
.backbtn{display:flex;align-items:center;gap:.6rem;border:none;background:none;color:var(--muted);font-family:var(--font-b);font-size:var(--fs-sm);letter-spacing:var(--ls-normal);text-transform:uppercase;transition:color .2s;padding:0;margin-right:auto}
.backbtn:hover{color:var(--ink)}

#pp .ppbody{
   position:relative;
   isolation:isolate;
   --pp-stripe-alpha:0.18;
   background-image:repeating-linear-gradient(-55deg,transparent,transparent 16px,rgba(var(--accent-rgb),var(--pp-stripe-alpha)) 16px,rgba(var(--accent-rgb),var(--pp-stripe-alpha)) 17px);
}

/* Longform mode: same blocks, centered reading panel that slides up */
#pp.longform{
   width:min(900px,86vw);
   max-height:84vh;
   top:8vh;
   right:auto;
   left:50%;
   bottom:auto;
   border:1px solid var(--panel-border);
   border-radius:5px;
   box-shadow:0 26px 70px rgba(10,8,6,0.45);
   transform:translate(-50%,calc(100vh + 3rem));
   opacity:0;
   transition:transform .62s var(--ease),opacity .32s ease;
}
#pp.longform.open{
   transform:translate(-50%,0);
   opacity:1;
}
#pp.longform .ppbody{
   --pp-stripe-alpha:0.22;
   padding:0 clamp(1.4rem,3.8vw,3rem) clamp(2rem,4.2vw,3.2rem);
}
#pp.longform .ph{
   display:none;
}
#pp.longform .block-canvas{
   max-width:72ch;
   margin:0 auto;
   gap:1.6rem;
   padding-top:clamp(1.8rem,3.4vw,2.7rem);
}
#pp.longform .pp-hero{
   width:calc(100% + clamp(2.8rem,7.6vw,6rem));
   margin:0 calc(-1 * clamp(1.4rem,3.8vw,3rem)) 2rem;
}
#pp.longform .bl-text-md{
   font-size:var(--fs-body);
   line-height:1.95;
}
#pp.longform .bl-text-lg{
   font-size:clamp(2.2rem,3.6vw,3.25rem);
   line-height:1.06;
}

/* ─────────────────────────────────────────
   BLOCK RENDERER
───────────────────────────────────────── */
.block-canvas{display:flex;flex-direction:column;gap:1.25rem;padding-top:2rem}
.bl-text-sm{font-size:var(--fs-sm);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--muted);line-height:1.6}
.bl-text-md{font-size:var(--fs-body);color:rgba(var(--ink-rgb),0.7);line-height:1.85}
.bl-text-lg{font-family:var(--font-s);font-size:var(--fs-xl);font-weight:700;color:var(--accent);line-height:1.1}
.bl-text-sm.ac,.bl-text-md.ac,.bl-text-lg.ac{text-align:center}
.bl-text-sm.ar,.bl-text-md.ar,.bl-text-lg.ar{text-align:right}
.bl-text-sm b,.bl-text-md b,.bl-text-lg b{color:var(--accent);font-weight:600}
rgr{display:inline-block;background:var(--accent);color:#fff;font-family:var(--font-b);font-size:var(--fs-xs);font-weight:500;letter-spacing:var(--ls-normal);text-transform:uppercase;padding:.18rem .55rem;border-radius:2px;vertical-align:middle;position:relative;top:-.1em}
#contact-wrapper rgr{background:var(--ct-accent);color:var(--ct-bg)}
.bl-image{width:100%;background:var(--surface);overflow:hidden;aspect-ratio:16/9}
.bl-image img{width:100%;height:100%;display:block;object-fit:cover}
.bl-image.empty{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted)}
.bl-alpha-art{width:min(calc(var(--alpha-natural-width,100%) * var(--alpha-scale,1)),100%);max-width:100%;margin-inline:auto;background:var(--alpha-bg,transparent);overflow:hidden;aspect-ratio:var(--alpha-ratio,16/9);position:relative}
.bl-alpha-art-mask{width:100%;height:100%;background:var(--alpha-color,var(--accent));-webkit-mask-image:var(--alpha-src);mask-image:var(--alpha-src);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:var(--alpha-fit,contain);mask-size:var(--alpha-fit,contain)}
.bl-alpha-art-probe{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.bl-alpha-art.empty{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);background:var(--surface)}
.bl-twocol{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.bl-quote{border-left:2px solid var(--accent);padding:0 0 0 1rem}
.bl-quote p{font-family:var(--font-s);font-size:var(--fs-lg);font-weight:300;font-style:italic;color:var(--ink);line-height:1.4}
.bl-quote.ac{border-left:none;border-top:2px solid var(--accent);padding:1rem 0 0;text-align:center}
.bl-quote.ar{border-left:none;border-right:2px solid var(--accent);padding:0 1rem 0 0;text-align:right}
.bl-video{width:100%;aspect-ratio:16/9;background:var(--surface);overflow:hidden}
.bl-video iframe{width:100%;height:100%;border:none;display:block}
.bl-video video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.bl-video.empty{display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted)}
.bl-stats{display:grid;gap:1px;background:var(--border);border:1px solid var(--border)}
.bl-stats .sc{background:var(--panel-bg);padding:1rem 1.25rem}
.bl-stats .sn{font-family:var(--font-s);font-size:var(--fs-xl);font-weight:300;color:var(--accent);line-height:1;margin-bottom:.2rem}
.bl-stats .sl{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted)}
.bl-divider{height:1px;background:var(--border);margin:.25rem 0}
.bl-skills{display:flex;flex-direction:column;gap:.85rem;max-width:520px;width:100%;margin:0 auto;padding-left:0.5rem;padding-right:0.5rem}
.skr{display:flex;flex-direction:column;gap:.35rem;width:100%;min-width:0;flex:1}
.skn{display:flex;justify-content:space-between;font-size:var(--fs-sm);letter-spacing:var(--ls-normal);text-transform:uppercase;color:rgba(var(--ink-rgb),0.5);width:100%;min-width:0;flex:1}
.skb{height:1px;background:rgba(var(--ink-rgb),0.1);position:relative;overflow:hidden}
.skf{position:absolute;top:0;left:0;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.skf.go{transform:scaleX(var(--pct))}
.bl-callout{border:1px solid var(--border);padding:1rem 1.1rem;background:rgba(var(--accent-rgb),0.05)}
.bl-callout .bl-callout-title{font-family:var(--font-b);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink);margin-bottom:.45rem}
.bl-callout .bl-callout-body{font-size:var(--fs-body);line-height:1.8;color:rgba(var(--ink-rgb),0.75)}
.bl-callout.highlight{background:rgba(var(--accent-rgb),0.1)}
.bl-callout.warning{background:rgba(224,48,48,0.08);border-color:rgba(224,48,48,0.35)}
.bl-gallery{display:grid;gap:.75rem}
.bl-gallery.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bl-gallery.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bl-gallery-item{margin:0;display:flex;flex-direction:column;gap:.35rem}
.bl-gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface)}
.bl-gallery-item img.bl-gallery-open{cursor:zoom-in}
.bl-gallery-item figcaption{font-size:var(--fs-xs);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--muted)}
.bl-process{display:flex;flex-direction:column;gap:.75rem}
.bl-process-step{display:grid;grid-template-columns:38px 1fr;gap:.7rem;align-items:start;padding:.8rem .85rem;border:1px solid var(--border);background:rgba(var(--accent-rgb),0.1);position:relative;overflow:hidden}
.bl-process-step.has-image{aspect-ratio:4/3;align-items:end;padding:1.2rem}
.bl-process-step.has-image .bl-process-step-image{position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;border:none;z-index:0}
.bl-process-step.has-image .bl-process-step-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--accent-rgb),.45) 0%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.05) 100%);mix-blend-mode:multiply;z-index:1;transition:opacity .4s ease}
.bl-process-step.has-image:hover .bl-process-step-overlay{opacity:0}
.bl-process-step.has-image .bl-process-num{z-index:2;color:#fff;border-color:rgba(255,255,255,0.4)}
.bl-process-step.has-image .bl-process-copy{z-index:2}
.bl-process-step.has-image .bl-process-copy h4{color:#fff}
.bl-process-step.has-image .bl-process-copy p{color:rgba(255,255,255,0.82)}
.bl-process-step.has-image .bl-process-date{color:rgba(255,255,255,0.6)}
.bl-process-num{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);font-family:var(--font-b);font-size:var(--fs-sm);letter-spacing:var(--ls-normal);color:var(--accent)}
.bl-process-meta{display:flex;align-items:center;gap:.45rem;margin-bottom:.35rem}
.bl-process-date{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted)}
.bl-process-copy h4{font-size:var(--fs-md);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--ink);margin:0 0 .28rem}
.bl-process-copy p{font-size:var(--fs-body);line-height:1.7;color:rgba(var(--ink-rgb),0.72);margin:0}
.bl-process-step-image{width:100%;height:100%;object-fit:cover;display:block;background:var(--surface)}
.bl-cta{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border:1px solid var(--border);background:rgba(var(--accent-rgb),0.06)}
.bl-cta-copy{display:flex;flex-direction:column;gap:.35rem}
.bl-cta-headline{font-size:var(--fs-md);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--ink);margin:0}
.bl-cta-body{font-size:var(--fs-body);line-height:1.7;color:rgba(var(--ink-rgb),0.72);margin:0}
.bl-cta-link{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1rem;border:1px solid var(--accent);background:var(--accent);color:var(--paper);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:opacity .18s ease}
.bl-cta-link:hover{opacity:.85}
.bl-before-after{width:min(100%,780px);margin:0 auto;display:flex;flex-direction:column;gap:.5rem}
.bl-before-after-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface);border:1px solid var(--border);touch-action:none;user-select:none}
.bl-before-after-base,.bl-before-after-top{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bl-before-after-overlay{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 calc(100% - var(--before-after-pos)) 0 0);-webkit-clip-path:inset(0 calc(100% - var(--before-after-pos)) 0 0)}
.bl-before-after-handle{
   position:absolute;
   top:50%;
   left:var(--before-after-pos);
   transform:translate(-50%,-50%);
   width:56px;
   height:180px;
   border:none;
   background:none;
   padding:0;
   cursor:ew-resize;
   z-index:2;
}
.bl-before-after-pill{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3px;height:160px;border-radius:2px;border:1.5px solid rgba(var(--accent-rgb),0.78);background:rgba(var(--accent-rgb),0.14);box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset;pointer-events:none}
.bl-before-after-handle:focus-visible{outline:none}
.bl-before-after-handle:focus-visible .bl-before-after-pill{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.18)}
.bl-before-after-caption{font-size:var(--fs-xs);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--muted)}
.bl-before-after-fallback{width:min(100%,780px)}
.bl-faq{display:flex;flex-direction:column;border-top:1px solid var(--border);max-width:520px;width:100%;margin:0 auto;padding-left:0.5rem;padding-right:0.5rem}
.bl-faq-item{border-bottom:1px solid var(--border);width:100%;box-sizing:border-box}
.bl-faq-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;background:none;border:none;color:var(--ink);font-family:var(--font);font-size:var(--fs-md);letter-spacing:var(--ls-tight);text-align:left;cursor:pointer}
.bl-faq-icon{font-size:1rem;color:var(--accent);transition:transform .2s ease}
.bl-faq-item.open .bl-faq-icon{transform:rotate(45deg)}
.bl-faq-panel{padding:0 0 .9rem;width:100%;box-sizing:border-box}
.bl-faq-panel p{font-size:var(--fs-body);line-height:1.7;color:rgba(var(--ink-rgb),0.72);margin:0;word-break:break-word;overflow-wrap:anywhere}

/* ─────────────────────────────────────────
   CONTACT PANEL
───────────────────────────────────────── */
:root{
  --ct-bg:#080808;--ct-hi:#ffffff;--ct-accent:#ff7828;
  --ct-muted:rgba(255,255,255,0.35);--ct-border:rgba(255,255,255,0.1);
  --ct-panel-w:94vw;--ct-sliver:6vw;
  --font-hero:'Bebas Neue',sans-serif;--font-ui:'Space Grotesk',sans-serif;
}
#contact-wrapper{
  position:fixed;top:0;right:0;bottom:0;width:var(--ct-panel-w);z-index:300;
  transform:translateX(100%);transition:transform .8s var(--ease);
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) transparent;
}
#contact-wrapper::-webkit-scrollbar{width:2px}
#contact-wrapper::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08)}
#contact-wrapper.open{transform:translateX(0)}
#stage.contact-open{transform:translateX(calc(-1 * var(--ct-panel-w)));filter:brightness(0.38);pointer-events:none}
#ct-bg{position:sticky;top:0;height:100vh;margin-bottom:-100vh;overflow:hidden;pointer-events:none}
#ct-bg-video{position:absolute;inset:0;filter:saturate(0.55) brightness(0.9);transition:filter .2s ease}
#ct-bg-video::after{content:'';position:absolute;inset:0;z-index:1}
#ct-bg-video iframe,#ct-bg-video video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.1);width:177.78vh;height:100vh;min-width:100%;min-height:56.25vw;border:none;pointer-events:none}
#ct-bg-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,0.97) 0%,rgba(8,8,8,0.5) 35%,rgba(8,8,8,0.1) 65%),linear-gradient(to bottom,rgba(8,8,8,0.7) 0%,transparent 30%)}
#ct-bg-dark{position:absolute;inset:0;background:rgba(8,8,8,0);transition:background .2s ease}
#ct-bg-grain{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:128px 128px}
#ct-content{position:relative}
#ct-splash{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:3rem 3.5rem 4rem;position:relative}
.ct-tag{font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:500;letter-spacing:var(--ls-xwide);text-transform:uppercase;color:var(--ct-accent);display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem;opacity:0;transform:translateY(10px);transition:opacity .6s .2s var(--ease),transform .6s .2s var(--ease)}
#contact-wrapper.open .ct-tag{opacity:1;transform:translateY(0)}
.ct-hero {
   font-family: var(--font-hero);
   font-size: clamp(2rem, 8vw, 14rem);
   line-height: .88;
   letter-spacing: .01em;
   color: var(--ct-hi);
   text-transform: uppercase;
   max-width: 100%;
   white-space: nowrap;
   overflow: visible;
   opacity: 0;
   transform: translateY(40px);
   transition: opacity .85s .05s var(--ease), transform .85s .05s var(--ease);
}
.ct-hero,.ct-hero .accent-word{mix-blend-mode:difference}
.ct-hero .accent-word{color:var(--ct-accent);mix-blend-mode:screen}

/* Safari blend mode bug workaround: dummy class to force repaint */
#contact-wrapper.open .ct-hero{opacity:1;transform:translateY(0)}
.ct-sub{font-family:var(--font-ui);font-weight:300;font-size:var(--fs-body);color:var(--ct-muted);line-height:1.8;max-width:480px;margin-top:1.75rem;opacity:0;transform:translateY(16px);transition:opacity .7s .35s var(--ease),transform .7s .35s var(--ease)}
#contact-wrapper.open .ct-sub{opacity:1;transform:translateY(0)}
.ct-ticker{position:relative;z-index:2;width:115%;margin-left:-7.5%;overflow:hidden;border-top:1.5px solid color-mix(in srgb,var(--ct-accent) 70%,transparent);border-bottom:1.5px solid color-mix(in srgb,var(--ct-accent) 70%,transparent);padding:.55rem 0;background:color-mix(in srgb,var(--ct-accent) 20%,transparent)}
.ct-ticker::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(-55deg,transparent,transparent 18px,color-mix(in srgb,var(--ct-accent) 30%,transparent) 18px,color-mix(in srgb,var(--ct-accent) 30%,transparent) 19.5px);background-size:23.8px 100%;animation:pinstripe-scroll 1.8s linear infinite}
@keyframes pinstripe-scroll{from{background-position-x:0}to{background-position-x:23.8px}}
.ct-ticker.tape-mid{transform:rotate(-6deg)}
.ct-ticker.tape-top{position:absolute;left:-20%;right:-20%;width:140%;margin-left:0;top:8%;transform:rotate(20deg);transform-origin:center center}
.ct-ticker.reverse .ticker-track{animation-direction:reverse}
.ticker-track{display:flex;gap:0;white-space:nowrap;will-change:transform;}
.ticker-item{display:inline-flex;align-items:center;gap:.5rem;padding:0 .5rem;flex-shrink:0}
.ticker-word{font-family:var(--font-b);font-weight:500;font-size:clamp(.75rem,1.2vw,1rem);text-transform:uppercase;letter-spacing:var(--ls-normal);color:var(--ct-accent);white-space:nowrap}
.ticker-dot{width:5px;height:5px;border-radius:50%;background:var(--ct-accent);flex-shrink:0;opacity:.7}
.ct-scroll-cue{display:flex;align-items:center;gap:.75rem;margin-top:2.5rem;font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:500;letter-spacing:var(--ls-xwide);text-transform:uppercase;color:var(--ct-muted);opacity:0;transition:opacity .6s .65s var(--ease)}
#contact-wrapper.open .ct-scroll-cue{opacity:1}
.ct-scroll-line{width:0;height:1px;background:var(--ct-accent);transition:width .9s .85s var(--ease)}
#contact-wrapper.open .ct-scroll-line{width:36px}
#ct-ticker-mid{margin-top:-3.4rem}
#ct-links{padding:5rem 3.5rem 4rem;display:flex;flex-direction:column;gap:4rem}
.ct-email-block{display:flex;flex-direction:column;gap:.75rem}
.ct-email-label{font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-xwide);text-transform:uppercase;color:var(--ct-muted)}
.ct-email-link{font-family:var(--font-hero);font-size:clamp(2.5rem,6vw,5.5rem);letter-spacing:.02em;text-transform:uppercase;color:var(--ct-hi);text-decoration:none;line-height:1;display:inline-flex;align-items:center;gap:1rem;transition:color .2s}
.ct-email-link:hover{color:var(--ct-accent)}
.ct-email-link .arr{font-size:clamp(1.5rem,3vw,3rem);color:var(--ct-accent);transition:transform .3s var(--ease)}
.ct-email-link:hover .arr{transform:translate(6px,-6px)}
.ct-social-label{font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-xwide);text-transform:uppercase;color:var(--ct-muted);margin-bottom:1.25rem}
.ct-icons{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.ct-icon-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--ct-border);color:rgba(255,255,255,0.5);text-decoration:none;font-size:var(--fs-lg);transition:border-color .2s,color .2s,background .2s,background-image .2s,transform .25s var(--ease)}
.ct-icon-btn:hover{border-color:var(--ct-accent);color:var(--ct-accent);background:rgba(var(--ct-accent-rgb),0.08);background-image:repeating-linear-gradient(-55deg,transparent,transparent 15px,color-mix(in srgb,var(--ct-accent) 22%,transparent) 15px,color-mix(in srgb,var(--ct-accent) 22%,transparent) 16px);background-size:21px 100%;transform:translateY(-4px)}
.ct-resume-block{display:flex;flex-direction:column;gap:.75rem}
.ct-resume-link{display:inline-flex;align-items:center;gap:1rem;padding:1rem 1.75rem;border:1px solid var(--ct-border);background:transparent;color:var(--ct-hi);font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;text-decoration:none;align-self:flex-start;transition:border-color .2s,background .2s,background-image .2s,gap .3s var(--ease),color .2s}
.ct-resume-link:hover{border-color:var(--ct-accent);background:rgba(var(--ct-accent-rgb),0.06);background-image:repeating-linear-gradient(-55deg,transparent,transparent 15px,color-mix(in srgb,var(--ct-accent) 20%,transparent) 15px,color-mix(in srgb,var(--ct-accent) 20%,transparent) 16px);background-size:21px 100%;color:var(--ct-accent);gap:1.5rem}
.ct-resume-link i{font-size:1rem;color:var(--ct-accent)}
.ct-footer{padding:1.5rem 3.5rem 3rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--ct-border);font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:500;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ct-muted)}
.ct-footer-dot{width:6px;height:6px;border-radius:50%;background:var(--ct-accent);animation:pulse 2.4s ease-in-out infinite}
#ct-close{position:fixed;top:2rem;right:2rem;z-index:500;width:42px;height:42px;border:1px solid var(--ct-border);background:none;color:rgba(255,255,255,0.45);font-size:var(--fs-body);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s .35s ease,border-color .2s,color .2s,transform .25s,background .2s}
#ct-close.open{opacity:1;pointer-events:all}
#ct-close:hover{border-color:var(--ct-accent);color:var(--ct-accent);background:rgba(var(--ct-accent-rgb),0.08);transform:rotate(90deg)}
#ct-sliver{position:fixed;top:0;left:0;bottom:0;width:var(--ct-sliver);z-index:299;opacity:0;pointer-events:none;cursor:pointer;transition:opacity .4s .3s}
#ct-sliver.open{opacity:1;pointer-events:all}
@media(max-width:600px){#contact-wrapper{width:100vw}#ct-splash,#ct-links{padding:2rem 1.5rem}.ct-hero{font-size:clamp(3.4rem,20vw,6.5rem);line-height:.9}.ct-footer{padding:1.5rem}}

/* ─────────────────────────────────────────
   ANIMATIONS & CONTACT-OPEN STATE
───────────────────────────────────────── */
.log-entries{display:flex;flex-direction:column}
.log-entry{display:flex;gap:1.25rem;padding:.9rem 0;border-bottom:1px solid var(--border);align-items:baseline}
.log-date{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);flex-shrink:0;width:5.5rem}
.log-text{font-size:var(--fs-body);color:rgba(var(--ink-rgb),0.75);line-height:1.6;flex:1}
.log-empty{font-size:var(--fs-sm);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--muted);padding:2rem 0}
@keyframes fup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fdn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
body.contact-open #nav,
body.contact-open #watch-reel-wrap,
body.contact-open #ht,
body.contact-open #sh,
body.contact-open #log-stack{opacity:0 !important;pointer-events:none;transition:opacity .3s ease}
#nav,#watch-reel-wrap,#ht,#sh,#log-stack{transition:opacity .4s .2s ease}
/* ── LOADER ── */
#loader{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;background:var(--ink);opacity:1;transition:opacity .6s ease}
#loader.done{opacity:0;pointer-events:none}
#loader-img{width:min(120px,25vw);height:auto;margin-bottom:.25rem}
#loader-name{font-family:var(--font-b);font-size:clamp(.65rem,1.2vw,.85rem);font-weight:400;letter-spacing:var(--ls-xwide);color:rgba(var(--paper-rgb),0.6);display:flex;gap:0;justify-content:center}
#loader-name span{opacity:0;transition:opacity .06s}
#loader-bar-wrap{width:min(260px,50vw);height:1px;background:rgba(var(--paper-rgb),0.1);position:relative;overflow:hidden}
#loader-bar{position:absolute;top:0;left:0;height:100%;width:0;background:var(--accent);transition:width .0s linear}
body.page-loading #stage,
body.page-loading #nav,
body.page-loading #ht,
body.page-loading #sh,
body.page-loading #log-stack,
body.page-loading #watch-reel-wrap{filter:blur(12px);transition:filter .6s ease}
@media(max-width:600px){.panel,#pp{width:100vw!important;border-left:none}.wg{grid-template-columns:1fr}.bl-twocol{grid-template-columns:1fr}.bl-cta{flex-direction:column;align-items:flex-start}.bl-before-after{width:100%}#ht{bottom:2rem;left:1.5rem}#sh{display:none}#nav{padding:1.2rem 1.5rem}#pp.longform{top:0;left:0;right:0;bottom:0;max-height:none;border-radius:0;border-left:none;transform:translateX(110%);opacity:1}#pp.longform.open{transform:translateX(0)}}

/* ─────────────────────────────────────────
   PROJECT HERO HEADER
───────────────────────────────────────── */
.pp-hero{position:relative;width:calc(100% + 4rem);margin:0 -2rem 2rem -2rem;min-height:320px;background-size:cover;background-position:center;display:flex;align-items:flex-end;overflow:hidden}
.pp-hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--accent-rgb),.45) 0%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.05) 100%);mix-blend-mode:multiply}
.pp-hero-content{position:relative;z-index:1;width:100%;padding:2rem 2.5rem 1.8rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.pp-hero-left{flex:1;min-width:0}
.pp-hero-title{font-family:var(--font-hero);font-size:clamp(2.2rem,5vw,4rem);font-weight:400;color:#fff;letter-spacing:.02em;text-transform:uppercase;margin:0 0 .45rem;line-height:.95;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.pp-hero-meta{display:flex;flex-wrap:wrap;gap:.4rem}
.pp-hero-tag{font-family:var(--font-b);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(var(--accent-rgb),.18);border:1px solid rgba(var(--accent-rgb),.35);padding:.35rem .9rem;border-radius:2px;display:inline-flex;align-items:center}
.pp-hero-actions{position:absolute;top:1.2rem;right:1.5rem;z-index:2;display:flex;gap:.75rem;align-items:center}
.pp-hero-btn{font-family:var(--font-b);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;background:rgba(var(--accent-rgb),.18);color:rgba(255,255,255,.9);border:1px solid rgba(var(--accent-rgb),.35);padding:.35rem .9rem;border-radius:2px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;display:inline-flex;align-items:center;gap:.35rem}
.pp-hero-btn:hover{background:rgba(var(--accent-rgb),.35);color:#fff;border-color:rgba(var(--accent-rgb),.5)}
.pp-hero-btn i{font-size:var(--fs-md);vertical-align:-.1em}
.pp-like-btn{background:none;border:none;padding:0;color:rgba(255,255,255,.75);gap:.3rem;cursor:pointer}
.pp-like-btn:hover{background:none;color:#fff}
.pp-like-btn.liked{background:none;border:none;color:#ff6b6b}
#pp-like-icon{font-size:1rem;line-height:1;transition:transform .2s}
.pp-hero-btn:hover #pp-like-icon{transform:scale(1.15)}
#pp-like-count{font-size:var(--fs-xs);letter-spacing:var(--ls-normal)}

/* ─────────────────────────────────────────
   PANEL STYLE: DARK FROST
   Applied when body.panel-frost is set via theme.panelStyle = 'dark'
───────────────────────────────────────── */
body.panel-frost .panel{background:rgba(var(--ink-rgb),0.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-left-color:rgba(var(--paper-rgb),0.1)}
body.panel-frost #pp{background:rgba(var(--ink-rgb),0.82);border-left-color:rgba(var(--paper-rgb),0.1)}
body.panel-frost .ph{border-bottom-color:rgba(var(--paper-rgb),0.08)}
body.panel-frost .pt2{color:var(--paper)}
body.panel-frost .pc{color:rgba(var(--paper-rgb),0.4);border-color:rgba(var(--paper-rgb),0.15)}
body.panel-frost .pc:hover{color:var(--accent);border-color:transparent}
body.panel-frost .pb{color:var(--paper);scrollbar-color:rgba(var(--paper-rgb),0.1) transparent}
body.panel-frost .pb::-webkit-scrollbar-thumb{background:rgba(var(--paper-rgb),0.1)}
body.panel-frost .ppbody{color:var(--paper);scrollbar-color:rgba(var(--paper-rgb),0.1) transparent}
body.panel-frost .ppbody::-webkit-scrollbar-thumb{background:rgba(var(--paper-rgb),0.08)}
body.panel-frost .backbtn{color:rgba(var(--paper-rgb),0.5)}
body.panel-frost .backbtn:hover{color:var(--paper)}
/* remove diagonal stripe in dark mode — looks wrong on dark backgrounds */
body.panel-frost #panel-work .pb,body.panel-frost #panel-about .pb{background-image:none}
body.panel-frost #pp .ppbody{background-image:none}
/* filter buttons */
body.panel-frost .fb{background:rgba(var(--paper-rgb),0.07);color:rgba(var(--paper-rgb),0.45);border-color:rgba(var(--paper-rgb),0.12)}
body.panel-frost .fb.active,body.panel-frost .fb:hover{background:rgba(var(--paper-rgb),0.18);color:var(--paper);border-color:rgba(var(--paper-rgb),0.35)}
/* work card text */
body.panel-frost .wct{color:var(--paper)}
body.panel-frost .wcty{color:rgba(var(--paper-rgb),0.45)}
/* block text inside panels */
body.panel-frost .panel .bl-text-sm,body.panel-frost .ppbody .bl-text-sm{color:rgba(var(--paper-rgb),0.5)}
body.panel-frost .panel .bl-text-md,body.panel-frost .ppbody .bl-text-md{color:rgba(var(--paper-rgb),0.8)}
body.panel-frost .panel .bl-text-lg,body.panel-frost .ppbody .bl-text-lg{color:var(--accent)}
body.panel-frost .panel .bl-quote p,body.panel-frost .ppbody .bl-quote p{color:var(--paper)}
body.panel-frost .panel .bl-stats .sc,body.panel-frost .ppbody .bl-stats .sc{background:rgba(var(--paper-rgb),0.06)}
body.panel-frost .panel .bl-stats .sl,body.panel-frost .ppbody .bl-stats .sl{color:rgba(var(--paper-rgb),0.45)}
body.panel-frost .panel .bl-callout,body.panel-frost .ppbody .bl-callout{background:rgba(var(--accent-rgb),0.1);border-color:rgba(var(--accent-rgb),0.25)}
body.panel-frost .panel .bl-callout .bl-callout-title,body.panel-frost .ppbody .bl-callout .bl-callout-title{color:var(--paper)}
body.panel-frost .panel .bl-callout .bl-callout-body,body.panel-frost .ppbody .bl-callout .bl-callout-body{color:rgba(var(--paper-rgb),0.75)}
body.panel-frost .panel .bl-process-step,body.panel-frost .ppbody .bl-process-step{background:rgba(var(--accent-rgb),0.08);border-color:rgba(var(--paper-rgb),0.1)}
body.panel-frost .panel .bl-process-copy h4,body.panel-frost .ppbody .bl-process-copy h4{color:var(--paper)}
body.panel-frost .panel .bl-process-copy p,body.panel-frost .ppbody .bl-process-copy p{color:rgba(var(--paper-rgb),0.72)}
body.panel-frost .panel .bl-cta,body.panel-frost .ppbody .bl-cta{background:rgba(var(--accent-rgb),0.08);border-color:rgba(var(--paper-rgb),0.1)}
body.panel-frost .panel .bl-cta-headline,body.panel-frost .ppbody .bl-cta-headline{color:var(--paper)}
body.panel-frost .panel .bl-cta-body,body.panel-frost .ppbody .bl-cta-body{color:rgba(var(--paper-rgb),0.72)}
body.panel-frost .panel .bl-divider,body.panel-frost .ppbody .bl-divider{background:rgba(var(--paper-rgb),0.1)}