/* =====================================================================
   Lexous Español — portfolio
   Art direction: street stickers, taped paper, vinyl, and brick walls.
   Fonts: Bungee (display), Permanent Marker (hand), Archivo (body).
   ===================================================================== */

@font-face{font-family:'Bungee';src:url('../fonts/bungee.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Permanent Marker';src:url('../fonts/permanent-marker.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-variable.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

@property --fold{syntax:'<length>';inherits:false;initial-value:0px}

:root{
  --bg:#111318;
  --bg-0:#0d0f13;
  --bg-1:#16181e;
  --bg-2:#1a1d25;
  --bg-3:#232731;
  --paper:#ece8df;
  --paper-2:#e2ddd1;
  --ink:#141519;
  --text:#ece8df;
  --muted:#a7aab2;
  --dim:#81858f;
  --red-ink:#c8341a;
  --line:rgba(236,232,223,.09);
  --line-2:rgba(236,232,223,.16);
  --lime:#e2f53c;
  --red:#ff4b2f;
  --pink:#ff3e8e;
  --blue:#2fc6f2;
  --green:#3ee584;
  --orange:#ffa41f;
  --purple:#b8a6ff;
  --gold:#d9a640;
  --sticker-edge:#fbf7ef;
  --font-display:'Bungee',Impact,'Arial Black',sans-serif;
  --font-marker:'Permanent Marker','Segoe Print','Comic Sans MS',cursive;
  --font-body:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --container:1240px;
  --gutter:clamp(16px,4vw,48px);
  --header-h:76px;
  --shadow-sticker:0 2px 0 rgba(0,0,0,.28),0 12px 22px -8px rgba(0,0,0,.6);
  --shadow-paper:0 2px 3px rgba(0,0,0,.3),0 28px 50px -24px rgba(0,0,0,.85);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  --squiggle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='6' viewBox='0 0 18 6'%3E%3Cpath d='M0 3q4.5-3.2 9 0t9 0' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
  color-scheme:dark;
  scrollbar-color:#3b404c var(--bg-0);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;font-synthesis:none}
body.has-modal{overflow:hidden}
::selection{background:var(--lime);color:var(--ink)}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.container{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}
.i{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg-0)}
::-webkit-scrollbar-thumb{background:#363b46;border:3px solid var(--bg-0);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--lime)}

.skip-link{position:fixed;left:16px;top:12px;z-index:300;background:var(--lime);color:var(--ink);padding:12px 20px;border-radius:10px;font:400 13px/1 var(--font-display);transform:translateY(-200%);transition:transform .2s}
.skip-link:focus{transform:none}

/* ---------- Texture ---------- */
.grain{position:fixed;inset:-60%;z-index:95;pointer-events:none;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");animation:grain 1.4s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,-2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}}
.ribbed{background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.026) 0 1px,transparent 1px 3px,rgba(0,0,0,.16) 3px 4px,transparent 4px 5px)}

/* ---------- Shared pieces ---------- */
.btn{--rot:-1.5deg;--mx:0px;--my:0px;--lift:0px;--fill:var(--lime);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 20px;border:3px solid var(--sticker-edge);border-radius:12px;background-color:var(--fill);color:var(--ink);font:400 13px/1.1 var(--font-display);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.4),0 14px 24px -12px rgba(0,0,0,.7);transform:translate(var(--mx),var(--my)) translateY(var(--lift)) rotate(var(--rot));transition:transform .45s var(--ease-spring),box-shadow .25s,background-color .2s,color .2s,border-color .2s}
.btn:hover{--lift:-3px;--rot:0deg;box-shadow:0 7px 0 rgba(0,0,0,.4),0 22px 30px -12px rgba(0,0,0,.7)}
.btn:active{--lift:2px;box-shadow:0 1px 0 rgba(0,0,0,.4)}
.btn .i{width:18px;height:18px}
.btn-lime{--fill:var(--lime)}
.btn-green{--fill:var(--green)}
.btn-blue{--fill:var(--blue)}
.btn-pink{--fill:var(--pink)}
.btn-outline{--fill:transparent;color:var(--paper);border-color:rgba(236,232,223,.55);box-shadow:none}
.btn-outline:hover{--fill:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-sm{min-height:42px;padding:9px 15px;font-size:11.5px;border-width:2.5px;border-radius:10px}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;--lift:0px}
.icon-btn:disabled{opacity:.4;cursor:not-allowed}
.icon-btn:disabled:hover{border-color:var(--line-2);color:var(--paper);transform:none}
.btn-sm .i{width:16px;height:16px}

.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--line-2);background:var(--bg-1);color:var(--paper);transition:border-color .2s,background-color .2s,color .2s,transform .3s var(--ease-spring)}
.icon-btn:hover{border-color:var(--lime);color:var(--lime);transform:rotate(-8deg)}
.icon-btn .i{width:20px;height:20px}

.sticker{--rot:0deg;--dx:0px;--dy:0px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:.55em .95em;border:3px solid var(--sticker-edge);border-radius:10px;background:var(--c,var(--lime));color:var(--ink);font:400 13px/1.05 var(--font-display);text-transform:uppercase;text-align:center;box-shadow:var(--shadow-sticker);transform:translate(var(--dx),var(--dy)) rotate(var(--rot));position:relative;white-space:nowrap}
.sticker::after,.skill::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,rgba(255,255,255,.4),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 72%,rgba(0,0,0,.08));pointer-events:none}
.sticker .i{width:1.1em;height:1.1em}

.paper{position:relative;color:var(--ink);background-color:var(--paper);background-image:var(--noise),linear-gradient(172deg,#f4f1ea 0%,#e8e3d8 100%);box-shadow:var(--shadow-paper)}

.tape{position:absolute;z-index:3;display:block;width:108px;height:30px;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%),rgba(206,202,190,.66);clip-path:polygon(3% 0,97% 0,100% 18%,97.5% 34%,100% 52%,97% 70%,100% 86%,97% 100%,3% 100%,0 86%,2.5% 68%,0 50%,3% 32%,0 14%);pointer-events:none}
.tape-red{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 50%),rgba(255,75,47,.92)}

.hand-note{position:absolute;display:flex;align-items:center;gap:6px;font:400 19px/1 var(--font-marker);color:var(--lime);pointer-events:none;white-space:nowrap}
.hand-note .i{width:58px;height:44px;stroke-width:2.6}

.marker-accent{display:inline-block;font-family:var(--font-marker);font-weight:400;text-transform:none;letter-spacing:0}
.marker-inline{font-family:var(--font-marker);color:var(--lime);font-size:1.1em}

/* Social pins: round sticker badges for GitHub, LinkedIn, and Instagram */
.social-pins{display:flex;align-items:center;gap:12px;list-style:none}
.pin{--rot:0deg;--mx:0px;--my:0px;--lift:0px;--c:var(--paper);position:relative;display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--sticker-edge);border-radius:50%;background:var(--c);color:var(--ink);box-shadow:var(--shadow-sticker);transform:translate(var(--mx),var(--my)) translateY(var(--lift)) rotate(var(--rot));transition:transform .45s var(--ease-spring),box-shadow .25s}
.pin::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,rgba(255,255,255,.45),rgba(255,255,255,0) 42%,rgba(255,255,255,0) 70%,rgba(0,0,0,.1));pointer-events:none}
.pin>.i{width:22px;height:22px}
.pin-github{--c:var(--paper);--rot:-8deg}
.pin-linkedin{--c:var(--blue);--rot:6deg}
.pin-instagram{--c:var(--pink);--rot:-5deg}
.pin:hover,.pin:focus-visible{--lift:-4px;--rot:0deg;box-shadow:0 6px 0 rgba(0,0,0,.28),0 18px 26px -10px rgba(0,0,0,.7)}
.pin:hover>.i{animation:pin-wiggle .55s var(--ease-out)}
.pin:focus-visible{outline-offset:4px}
@keyframes pin-wiggle{0%,100%{rotate:0deg}25%{rotate:-14deg}55%{rotate:10deg}80%{rotate:-4deg}}
.pin-tip{position:absolute;left:50%;bottom:calc(100% + 10px);z-index:2;padding:6px 9px 5px;border:2px solid var(--sticker-edge);border-radius:7px;background:var(--ink);color:var(--paper);font:400 10px/1 var(--font-display);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;box-shadow:var(--shadow-sticker);opacity:0;pointer-events:none;transform:translate(-50%,6px) rotate(-4deg) scale(.7);transform-origin:50% 100%;transition:opacity .2s,transform .35s var(--ease-spring)}
.pin:hover .pin-tip,.pin:focus-visible .pin-tip{opacity:1;transform:translate(-50%,0) rotate(-4deg) scale(1)}

/* ---------- Cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:250;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
.cursor.is-active{opacity:1}
.cursor-ring{--cs:30px;position:absolute;left:calc(var(--cs) / -2);top:calc(var(--cs) / -2);width:var(--cs);height:var(--cs);border:2px solid var(--lime);border-radius:999px;transition:width .35s var(--ease-out),height .35s var(--ease-out),left .35s var(--ease-out),top .35s var(--ease-out),background-color .25s,border-color .25s,transform .2s}
.cursor.is-hover .cursor-ring{--cs:54px;background:rgba(226,245,60,.1)}
.cursor.has-label .cursor-ring{--cs:78px;background:var(--lime);border-color:var(--lime)}
.cursor.is-down .cursor-ring{transform:scale(.82)}
.cursor.is-paint .cursor-ring{--cs:var(--paint-size,30px);background:transparent;border-color:rgba(255,255,255,.85);border-width:1.5px;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.cursor-label{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.6);font:400 11px/1 var(--font-display);text-transform:uppercase;color:var(--ink);opacity:0;white-space:nowrap;transition:opacity .2s,transform .3s var(--ease-spring)}
.cursor.has-label .cursor-label{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;transition:transform .5s var(--ease-out)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-2;background:rgba(15,17,21,.8);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--line);opacity:0;transition:opacity .35s}
.site-header.is-scrolled::before{opacity:1}
.site-header.is-hidden{transform:translateY(-105%)}
.nav-wrap{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding-inline:clamp(16px,3vw,40px)}
.logo{--mx:0px;--my:0px;display:inline-block;font:400 30px/1 var(--font-marker);color:var(--lime);text-shadow:2px 2px 0 var(--pink),4px 4px 0 rgba(0,0,0,.35);transform:translate(var(--mx),var(--my)) rotate(-4deg);transition:transform .45s var(--ease-spring);white-space:nowrap}
.logo:hover{transform:translate(var(--mx),var(--my)) rotate(3deg) scale(1.06)}
.nav-list{display:flex;align-items:center;gap:clamp(12px,1.7vw,26px);list-style:none}
.nav-list a{position:relative;display:inline-flex;align-items:center;padding:10px 2px 14px;font:800 13px/1 var(--font-body);font-stretch:88%;letter-spacing:.05em;text-transform:uppercase;color:#cbcdd3;transition:color .2s}
.nav-list a::after{content:"";position:absolute;left:-3px;right:-3px;bottom:3px;height:6px;background:currentColor;opacity:.35;-webkit-mask:var(--squiggle) repeat-x 0 50%/18px 6px;mask:var(--squiggle) repeat-x 0 50%/18px 6px;transition:opacity .2s}
.nav-list a:hover,.nav-list a[aria-current]{color:var(--lime)}
.nav-list a:hover::after,.nav-list a[aria-current]::after{opacity:1;animation:squiggle .55s linear infinite}
.menu-social{display:none}
@keyframes squiggle{to{-webkit-mask-position:18px 50%;mask-position:18px 50%}}
.nav-no{display:none}
.menu-note{display:none}
.nav-tools{display:flex;align-items:center;gap:10px}
.pill-toggle{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px;border:2px solid var(--line-2);background:var(--bg-1)}
.pill-toggle span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:400 10px/1 var(--font-display);text-transform:uppercase;color:var(--dim);transition:background-color .3s var(--ease-out),color .3s}
.pill-toggle[aria-pressed=true] .pt-on{background:var(--lime);color:var(--ink)}
.pill-toggle[aria-pressed=false] .pt-off{background:#3a3f4b;color:var(--paper)}
.sound-toggle .i-on{display:none}
.sound-toggle[aria-pressed=true]{border-color:var(--lime);color:var(--lime)}
.sound-toggle[aria-pressed=true] .i-on{display:block}
.sound-toggle[aria-pressed=true] .i-off{display:none}
.menu-toggle{display:none;position:relative;width:46px;height:46px;border-radius:50%;border:2px solid var(--line-2);background:var(--bg-1)}
.menu-toggle span{position:absolute;left:12px;right:12px;height:2.5px;border-radius:2px;background:var(--paper);transition:transform .35s var(--ease-out),top .35s var(--ease-out)}
.menu-toggle span:first-child{top:17px}
.menu-toggle span:last-child{top:25px}
.menu-toggle[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}

/* ---------- Section frame ---------- */
.section{position:relative;padding-block:clamp(84px,11vw,150px)}
.panel{border-radius:32px 32px 0 0;margin-top:-32px;z-index:1}
.section-head{position:relative;z-index:2;display:flex;align-items:flex-start;gap:clamp(18px,3vw,40px);margin-bottom:clamp(36px,5vw,64px)}
.section-title{flex:none;font:400 clamp(54px,8.4vw,108px)/.84 var(--font-display);text-transform:uppercase;letter-spacing:-.01em;color:var(--paper);text-shadow:0 3px 0 rgba(0,0,0,.25)}
.section-intro{max-width:560px;padding-top:.35em;color:var(--muted);font-size:clamp(15px,1.25vw,17px);line-height:1.6}
.section-intro strong{color:var(--text);font-weight:800}
.ghost-word{position:absolute;left:0;top:clamp(36px,5vw,84px);z-index:0;font:400 clamp(150px,25vw,420px)/.78 var(--font-display);text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:2px rgba(236,232,223,.045);pointer-events:none;user-select:none;will-change:transform}
.section .container{position:relative;z-index:1}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:calc(var(--header-h) + clamp(40px,5vw,70px));padding-bottom:clamp(40px,5vw,64px);background-color:#15161a;overflow:clip}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,transparent calc(33.33% - 1px),rgba(255,255,255,.035) calc(33.33% - 1px) 33.33%,transparent 33.33%,transparent calc(66.66% - 1px),rgba(255,255,255,.035) calc(66.66% - 1px) 66.66%,transparent 66.66%)}
.hero-glow{position:absolute;inset:0;background:radial-gradient(900px 520px at 12% 8%,rgba(255,170,90,.11),transparent 62%),radial-gradient(700px 500px at 92% 85%,rgba(47,198,242,.06),transparent 60%),linear-gradient(180deg,transparent 70%,rgba(0,0,0,.35))}
.ghost-hero{top:auto;bottom:-4%;left:-2%;font-size:clamp(150px,27vw,440px);-webkit-text-stroke:2px rgba(236,232,223,.05)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero-copy{position:relative;z-index:3}

.name-tag{--rot:-4deg;--rx:0deg;--ry:0deg;position:relative;display:block;width:min(100%,560px);padding:14px 16px 16px;border:5px solid var(--sticker-edge);border-radius:22px;background:var(--red);color:#fff;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.25),0 34px 60px -24px rgba(0,0,0,.85);transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rot));transition:transform .6s var(--ease-out);cursor:pointer;user-select:none}
.name-tag::after{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(120deg,rgba(255,255,255,.22),rgba(255,255,255,0) 35%);pointer-events:none}
.nt-top{display:block;padding:4px 0 12px}
.nt-hello{display:block;font:400 clamp(40px,5.2vw,66px)/.92 var(--font-display);letter-spacing:.03em;text-transform:uppercase;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.nt-sub{display:block;margin-top:6px;font:800 clamp(19px,1.6vw,21px)/1.1 var(--font-body);letter-spacing:.01em}
.nt-body{display:grid;place-items:center;min-height:clamp(120px,13vw,186px);padding:6px 14px;border-radius:12px;background:#fbf8f2;box-shadow:inset 0 2px 7px rgba(0,0,0,.2)}
.nt-name{display:inline-block;padding:0 .12em;font:400 clamp(66px,9vw,134px)/1.05 var(--font-marker);color:#131315;transform:rotate(-5deg);clip-path:inset(-30% -8% -30% -8%)}
.nt-name.is-writing{animation:write-name 1.05s cubic-bezier(.55,.1,.35,1) both}
@keyframes write-name{from{clip-path:inset(-30% 104% -30% -8%)}to{clip-path:inset(-30% -8% -30% -8%)}}
.name-tag.is-wobble{animation:wobble .6s var(--ease-out)}
@keyframes wobble{0%,100%{rotate:0deg}25%{rotate:-3deg}50%{rotate:2.5deg}75%{rotate:-1deg}}

.hero-role{margin-top:clamp(28px,3.4vw,46px);font:400 clamp(25px,2.75vw,38px)/1.06 var(--font-display);text-transform:uppercase;color:var(--paper);max-width:640px}
.hero-role .amp{color:var(--orange)}
.hero-tags{margin-top:12px;font:800 13px/1.5 var(--font-body);font-stretch:90%;letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}
.hero-lede{margin-top:16px;max-width:530px;color:#bfc1c7;font-size:17px;line-height:1.65}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:30px}
.hero-pins{margin-left:6px}

.hero-art{position:relative;z-index:2;display:flex;justify-content:center;padding:20px 0 30px}
.polaroid{--rot:4deg;--rx:0deg;--ry:0deg;position:relative;width:min(100%,384px);padding:16px 16px 62px;border-radius:5px;background:#f7f4ee;box-shadow:0 3px 4px rgba(0,0,0,.3),0 40px 60px -26px rgba(0,0,0,.9);transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rot));transition:transform .6s var(--ease-out);cursor:pointer}
.polaroid-photo{position:relative;display:block;overflow:hidden;aspect-ratio:1/1.04;border-radius:2px;background:radial-gradient(120% 90% at 50% 15%,#fff7e6 0%,#efe2cc 55%,#d9c7ab 100%)}
.polaroid-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;mix-blend-mode:multiply;filter:contrast(1.04) saturate(1.05)}
.polaroid-photo::after{content:"";position:absolute;inset:0;background:var(--noise),linear-gradient(160deg,rgba(255,255,255,.18),transparent 40%);mix-blend-mode:multiply;pointer-events:none}
.polaroid.is-developing .polaroid-photo img{animation:develop 2.8s cubic-bezier(.3,.1,.3,1) both}
@keyframes develop{0%{filter:brightness(2.4) contrast(.35) saturate(0) sepia(.6) blur(3px)}35%{filter:brightness(1.5) contrast(.7) saturate(.3) sepia(.4) blur(1.2px)}100%{filter:contrast(1.04) saturate(1.05)}}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.polaroid.is-flash .flash{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.polaroid figcaption{position:absolute;right:20px;bottom:15px;font:400 24px/1 var(--font-marker);color:#17181c;transform:rotate(-3deg)}
.tape-polaroid{top:-15px;left:calc(50% - 58px);width:116px;height:34px;transform:rotate(-3deg)}
.hs-note{--rot:-8deg;position:absolute;left:max(-6%,-40px);bottom:72px;z-index:3;padding:.6em .9em;font-size:12.5px;line-height:1.15;background:var(--pink);white-space:normal}
/* "On air": the role running right now, worked out from the CV dates */
.on-air{position:absolute;left:50%;bottom:-26px;z-index:3;display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border:1.5px solid rgba(255,75,47,.5);border-radius:999px;background:rgba(14,15,19,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--paper);font:700 13.5px/1.2 var(--font-body);white-space:nowrap;box-shadow:0 14px 26px -14px rgba(0,0,0,.9);transform:translateX(-50%);transition:border-color .25s,background-color .25s,transform .4s var(--ease-spring)}
.on-air:hover{border-color:var(--red);background:rgba(30,16,16,.9);transform:translateX(-50%) translateY(-2px)}
.on-air-lamp{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 5px;border-radius:999px;background:var(--red);color:#fff;font:400 10px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 16px rgba(255,75,47,.65)}
.on-air-lamp::before,.track-now::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:on-air 1.5s ease-in-out infinite}
@keyframes on-air{50%{opacity:.2}}
.on-air .i{width:15px;height:15px;color:var(--red);transition:transform .35s var(--ease-spring)}
.on-air:hover .i{transform:translateX(3px)}

/* Draggable decorative stickers */
.hero-stickers{position:absolute;top:0;bottom:0;left:50%;z-index:4;width:min(var(--container),100% - 2*var(--gutter));transform:translateX(-50%);pointer-events:none}
.hs,.hs-disc{position:absolute;pointer-events:auto;touch-action:none;user-select:none;cursor:grab}
.hs.is-dragging,.hs-disc.is-dragging{cursor:grabbing;z-index:20;filter:drop-shadow(0 18px 18px rgba(0,0,0,.45))}
.hs-paper{--rot:-8deg;left:max(-8%,calc(10px - var(--gutter)));top:calc(var(--header-h) + 34px);background:var(--paper);font:400 17px/1 var(--font-marker);text-transform:none;padding:.5em .8em}
.hs-paper .i{color:var(--red)}
.hs-award{--rot:8deg;left:41%;top:calc(var(--header-h) + 36px);font-size:11.5px}
.hs-blue{--rot:9deg;right:-1%;top:calc(var(--header-h) + 22px);--c:var(--blue);border-radius:999px;font-size:13px}
.hs-red{--rot:-9deg;left:51%;top:calc(var(--header-h) + 470px);--c:var(--red);color:#fff;font-size:12px;border-radius:8px}
.hs-pink{--rot:14deg;right:2%;top:calc(var(--header-h) + 400px);--c:var(--pink);width:70px;height:70px;padding:0;border-radius:50%;font-size:13px}
.hs-disc{--rot:0deg;--dx:0px;--dy:0px;right:calc(-1 * var(--gutter) - 70px);top:calc(var(--header-h) + 250px);width:200px;height:200px;border-radius:50%;background:var(--lime);box-shadow:0 18px 40px -16px rgba(0,0,0,.8);transform:translate(var(--dx),var(--dy));display:grid;place-items:center}
.hs-disc>svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite}
.hs-disc text{font:400 15px var(--font-display);fill:var(--ink);letter-spacing:1px;text-transform:uppercase}
.disc-core{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--ink);color:var(--lime)}
.disc-core .i{width:30px;height:30px;animation:spin 6s linear infinite reverse}

/* LCD stats */
.lcd-panel{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,5vw,70px);list-style:none;border-radius:16px;border:2px solid #23262e;background:linear-gradient(180deg,#0a0b0e,#0f1116);box-shadow:inset 0 2px 14px rgba(0,0,0,.7),0 24px 40px -24px rgba(0,0,0,.9)}
.lcd{--c:var(--red);display:flex;flex-direction:column;gap:12px;padding:22px clamp(16px,2vw,28px) 20px;border-left:1px solid rgba(255,255,255,.06);color:var(--c)}
.lcd:first-child{border-left:0}
.lcd-value{display:flex;align-items:flex-end;gap:8px;height:64px}
.lcd-text{font:400 54px/1 var(--font-display);color:var(--c)}
.lcd-digits{display:flex;gap:6px;height:100%;transform:skewX(-7deg);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--c) 65%,transparent))}
.lcd-digits svg{height:100%;width:auto}
.seg{fill:currentColor;opacity:.07;transition:opacity .06s}
.seg.on{opacity:1}
.lcd-suffix{font:400 22px/1 var(--font-display);padding-bottom:4px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 60%,transparent))}
.lcd-label{font:800 11.5px/1.35 var(--font-body);font-stretch:90%;letter-spacing:.05em;text-transform:uppercase;color:#c9cbd1}
.lcd.is-flicker .lcd-digits{animation:lcd-flicker .5s steps(2) 2}
@keyframes lcd-flicker{50%{opacity:.35}}

/* ---------- Tape marquees ---------- */
.tape-marquee{position:relative;z-index:6;width:106%;margin-left:-3%;overflow:hidden;padding:15px 0;transform:rotate(var(--tilt,-2deg));box-shadow:0 14px 30px -12px rgba(0,0,0,.75)}
.tape-marquee::after{content:"";position:absolute;inset:0;background:var(--noise);opacity:.6;pointer-events:none}
.tape-lime{--tilt:-2.2deg;margin-top:-26px;margin-bottom:-6px;background:var(--lime);color:var(--ink)}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-group{display:flex;align-items:center;flex:none}
.marquee-group>span{padding-inline:clamp(20px,2.6vw,40px);font:400 clamp(16px,1.6vw,22px)/1 var(--font-display);text-transform:uppercase;white-space:nowrap}
.dia{display:block;width:12px;height:12px;flex:none;background:currentColor;transform:rotate(45deg)}
.no-js .marquee-track,.js:not(.marquee-ready) .marquee-track{animation:marquee 40s linear infinite}
.fx-off .marquee-track{animation:none!important}
@keyframes marquee{to{transform:translateX(-50%)}}
.tape-paper{--tilt:1.6deg;position:absolute;left:0;bottom:-34px;margin-left:-3%;background:#efebe2;color:#2e3038}
.tape-paper .marquee-group>span{font-size:clamp(20px,2vw,28px)}
.tape-paper .dia{width:10px;height:10px;color:#17181c}
.lg-1{font:900 1em/1 var(--font-body)!important;font-stretch:112%!important;letter-spacing:-.02em;text-transform:none!important}
.lg-2{font:700 1em/1 var(--font-body)!important;font-style:oblique 10deg;text-transform:none!important}
.lg-3{font:300 1em/1 var(--font-body)!important;text-transform:lowercase!important;letter-spacing:.02em}
.lg-4{font:600 1em/1 var(--font-body)!important;font-stretch:75%!important;text-transform:lowercase!important}
.lg-5{font:400 .85em/1 var(--font-display)!important}
.lg-6{font:800 .9em/1 var(--font-body)!important;text-transform:lowercase!important;border:2px solid currentColor;border-radius:999px;padding:.2em .6em!important;margin-inline:clamp(20px,2.6vw,40px)}
.lg-7{font:700 1em/1 var(--font-body)!important;font-stretch:65%!important;text-transform:uppercase!important;letter-spacing:.08em}
.lg-8{font:400 1em/1 var(--font-marker)!important;text-transform:none!important}
.lg-9{font:500 1.05em/1 var(--font-body)!important;text-transform:none!important;letter-spacing:-.03em}
.lg-10{font:900 1.1em/1 var(--font-body)!important;text-transform:lowercase!important;font-stretch:120%!important}
.lg-11{font:400 .95em/1 var(--font-marker)!important;text-transform:none!important}

/* ---------- About ---------- */
.about{background-color:var(--bg-1);padding-top:clamp(110px,13vw,170px)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:start}
.about-paper{--rot:-1deg;padding:clamp(30px,4.4vw,60px) clamp(24px,4.4vw,56px);transform:rotate(var(--rot))}
.tape-corner-l{top:-12px;left:-26px;transform:rotate(-24deg)}
.tape-corner-r{top:-10px;right:-24px;transform:rotate(22deg)}
.about-paper h2{font:400 clamp(36px,4.5vw,62px)/.95 var(--font-display);text-transform:uppercase}
.about-kicker{display:block}
.about-paper .marker-accent{display:block;width:max-content;max-width:100%;margin-top:.12em;font-size:1.08em;line-height:1.02;color:#ec3a1e;transform:rotate(-2deg);transform-origin:left center}
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px);margin-top:clamp(22px,3vw,34px);color:#2b2d33;font-size:15.5px;line-height:1.68}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,36px);list-style:none}
.chips li{padding:9px 16px;border:2.5px solid var(--ink);border-radius:999px;font:800 11.5px/1 var(--font-body);font-stretch:90%;letter-spacing:.05em;text-transform:uppercase;transition:background-color .25s,color .25s,transform .4s var(--ease-spring)}
.chips li:hover{background:var(--ink);color:var(--lime);transform:rotate(-3deg) scale(1.06)}
.note-wrap{position:relative;margin-top:clamp(0px,3vw,36px);filter:drop-shadow(0 26px 30px rgba(0,0,0,.55)) drop-shadow(0 3px 3px rgba(0,0,0,.3));transform:rotate(2.5deg)}
.sticky-note{--fold:0px;position:relative;padding:clamp(28px,3vw,40px) clamp(24px,3vw,36px) clamp(26px,3vw,36px);background-color:var(--pink);background-image:var(--noise),linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%);color:var(--ink);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--fold)),calc(100% - var(--fold)) 100%,0 100%);transition:--fold .45s var(--ease-out)}
.sticky-note::after{content:"";position:absolute;right:0;bottom:0;width:var(--fold);height:var(--fold);background:linear-gradient(315deg,transparent 50%,#c92d6d 50%,#ff86b9 100%);transition:width .45s var(--ease-out),height .45s var(--ease-out)}
.note-wrap:hover .sticky-note{--fold:44px}
.note-kicker{font:400 12px/1 var(--font-display);text-transform:uppercase;letter-spacing:.04em;opacity:.75}
.sticky-note h3{margin-top:14px;font:400 clamp(25px,2.6vw,36px)/1.02 var(--font-display);text-transform:uppercase}
.sticky-note p:not(.note-kicker){margin-top:16px;font-size:15.5px;line-height:1.55;font-weight:550}
.marker-link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:6px 0;font:400 21px/1 var(--font-marker);color:var(--ink)}
.marker-link .i{width:22px;height:22px;transition:transform .35s var(--ease-spring)}
.marker-link:hover .i{transform:translateX(7px)}

/* ---------- Path (turntable) ---------- */
.path{background-color:var(--bg-0)}
.path-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:start}
.deck-wrap{position:relative}
@media (min-width:1041px){
  /* The deck stays in view while the longer tracklist scrolls past. */
  .deck-wrap{position:sticky;top:calc(var(--header-h) + 24px)}
}
.deck{position:relative;padding:clamp(12px,1.6vw,18px);border-radius:20px;border:1px solid #30343f;background:linear-gradient(150deg,#2a2e38 0%,#1e2129 55%,#191c23 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.4),0 44px 70px -34px rgba(0,0,0,.95),0 8px 20px rgba(0,0,0,.4)}
.deck::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--noise);opacity:.5;pointer-events:none}
.deck-top{position:relative;aspect-ratio:1.12}
.platter{position:absolute;left:7.14%;top:8%;width:71.43%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#30343d 0 60%,#272a32 61% 100%);box-shadow:0 0 0 5px #23262d,0 0 0 6px #3b404c,0 22px 34px rgba(0,0,0,.65)}
.record{position:absolute;inset:3%;border-radius:50%;cursor:grab;touch-action:none;user-select:none;will-change:transform;background:radial-gradient(circle,transparent 0 31%,rgba(255,255,255,.035) 31.5% 32%,transparent 32.5% 46%,rgba(0,0,0,.4) 46.5% 47.2%,transparent 47.7% 63%,rgba(0,0,0,.4) 63.5% 64.2%,transparent 64.7% 80%,rgba(0,0,0,.35) 80.5% 81%,transparent 81.5%),repeating-radial-gradient(circle,#121317 0 1px,#1a1b20 1px 2.2px,#141519 2.2px 3.2px);box-shadow:inset 0 0 0 5px #0c0d10,inset 0 0 0 6px #26282f,0 6px 14px rgba(0,0,0,.6)}
.record:active{cursor:grabbing}
.record-label{--label:var(--red);position:absolute;inset:31%;display:grid;place-items:center;border-radius:50%;background-color:var(--label);background-image:var(--noise),radial-gradient(circle,transparent 0 58%,rgba(0,0,0,.12) 59% 60%,transparent 61%);color:var(--ink);box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);transition:background-color .45s}
.record-label::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4f4f4,#9a9ca3);box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.rl-inner{display:flex;flex-direction:column;align-items:center;gap:3px;transform:rotate(-58deg);text-align:center;width:90%}
.rl-side{font:400 clamp(10px,1vw,13px)/1 var(--font-display)}
.rl-title{font:400 clamp(13px,1.45vw,19px)/1 var(--font-marker);max-width:100%}
.rl-dates{font:800 clamp(7px,.7vw,9px)/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.record-label.is-swap .rl-inner{animation:label-swap .6s var(--ease-out)}
@keyframes label-swap{0%{opacity:0;scale:.6}100%{opacity:1;scale:1}}
.record-sheen{position:absolute;inset:3%;border-radius:50%;pointer-events:none;background:conic-gradient(from 20deg,transparent 0deg,rgba(255,255,255,.1) 22deg,transparent 52deg,transparent 180deg,rgba(255,255,255,.07) 202deg,transparent 232deg);mix-blend-mode:screen}
.arm-base{position:absolute;left:90.18%;top:14%;width:12%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 36% 34%,#e2e4e8,#9a9da6 55%,#5d6069);box-shadow:0 0 0 6px #262931,0 0 0 7px #3a3e49,0 8px 14px rgba(0,0,0,.55);z-index:3}
.tonearm{--arm:2deg;position:absolute;left:90.18%;top:14%;width:0;height:66%;z-index:4;transform-origin:0 0;transform:rotate(var(--arm));transition:transform 1.1s var(--ease-in-out)}
.tonearm.is-tracking{transition:transform .25s linear}
.arm-rod{position:absolute;left:-3.5px;top:0;width:7px;height:calc(100% - 22px);border-radius:7px;background:linear-gradient(90deg,#8d9199,#eef0f3 45%,#9a9ea6);box-shadow:4px 6px 8px rgba(0,0,0,.45)}
.arm-head{position:absolute;left:-13px;bottom:-10px;width:26px;height:38px;border-radius:5px;background:linear-gradient(90deg,#d63a20,var(--red) 40%,#ff7a5f);transform:rotate(24deg);box-shadow:4px 8px 10px rgba(0,0,0,.5)}
.arm-rest{position:absolute;left:92%;top:66%;width:3.6%;aspect-ratio:1;border-radius:50%;background:#2c3038;box-shadow:inset 0 0 0 3px #3d424e}
.deck.is-lifting .tonearm{transition:transform .35s var(--ease-out);transform:rotate(calc(var(--arm) - 4deg)) scale(1.03)}
.deck-controls{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:clamp(10px,1.5vw,16px);padding:2px 2px 0}
.deck-play{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 16px;border:2px solid var(--green);border-radius:10px;background:rgba(62,229,132,.08);color:var(--green);font:400 12px/1 var(--font-display);text-transform:uppercase;box-shadow:0 0 0 0 rgba(62,229,132,.0);transition:background-color .2s,box-shadow .3s,transform .3s var(--ease-spring)}
.deck-play:hover{background:rgba(62,229,132,.16);transform:translateY(-2px)}
.deck-play .i{width:16px;height:16px}
.deck-play .i-pause{display:none}
.deck-play[aria-pressed=true]{box-shadow:0 0 18px -2px rgba(62,229,132,.55)}
.deck-play[aria-pressed=true] .i-pause{display:block}
.deck-play[aria-pressed=true] .i-play{display:none}
.deck-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;border:2px solid #3a3f4b;color:var(--paper);transition:border-color .2s,color .2s}
.deck-btn:hover{border-color:var(--paper)}
.deck-btn .i{width:18px;height:18px}
.deck-bpm{display:inline-flex;align-items:flex-end;gap:6px;height:44px;padding:6px 10px;border-radius:8px;background:#0b0c0f;border:1px solid #2a2d35;color:var(--red);font:400 10px/1 var(--font-display)}
.mini-lcd{display:flex;height:100%;font:400 24px/1 var(--font-display)}
.mini-lcd .lcd-digits{--c:var(--red);gap:3px}
.deck-bpm>span:last-child{padding-bottom:2px;color:#c9cbd1}
.deck-rpm{display:inline-flex;align-items:center;gap:8px;margin-left:auto;min-height:36px;padding:7px 12px;border-radius:999px;border:1px solid #2c3039;background:#121419;color:#d6d8dd;font:800 11px/1 var(--font-body);letter-spacing:.04em}
.led{width:9px;height:9px;border-radius:50%;background:#5a2a22;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.deck.is-playing .led{background:var(--red);box-shadow:0 0 10px var(--red)}
.deck-rpm[aria-pressed=true] .led{background:var(--orange)}
.deck.is-playing .deck-rpm[aria-pressed=true] .led{box-shadow:0 0 10px var(--orange)}
.note-play{left:-6px;bottom:-46px;transform:rotate(-6deg);color:var(--green)}
.note-play .i{transform:scaleY(-1) rotate(-20deg)}
.deck.is-playing~.note-play,.note-play.is-hidden{opacity:0;transition:opacity .4s}

.tracklist{border-top:1px solid var(--line-2)}
.track{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:18px 14px;border-bottom:1px solid var(--line-2);text-align:left;color:var(--paper);transition:background-color .25s}
.track:hover{background:rgba(255,255,255,.03)}
.track[aria-selected=true]{background:rgba(255,255,255,.05)}
.track::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:calc(var(--p,0) * 100%);background:var(--label,var(--red))}
.track-code{justify-self:start;padding:6px 7px;border-radius:7px;font:400 13px/1 var(--font-display);color:var(--dim);transition:background-color .3s,color .3s}
.track[aria-selected=true] .track-code{background:var(--red);color:#fff}
.track-main{min-width:0}
.track-title{display:block;font:400 clamp(17px,1.65vw,22px)/1.1 var(--font-display);text-transform:uppercase;transition:color .3s}
.track[aria-selected=true] .track-title{color:var(--red)}
.track-now{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:4px 7px 3px;border-radius:5px;background:var(--red);color:#fff;font:400 9px/1 var(--font-display);letter-spacing:.08em;vertical-align:.25em;white-space:nowrap;box-shadow:0 0 12px rgba(255,75,47,.5)}
.track-now::before{width:5px;height:5px}
.track-role{display:block;margin-top:5px;font-size:14px;line-height:1.35;color:var(--muted)}
.track-end{display:flex;align-items:center;gap:10px}
.track-date{font:800 12px/1.2 var(--font-body);font-stretch:92%;color:#d4d6db;white-space:nowrap;text-align:right}
.track-eq{display:inline-flex;align-items:flex-end;gap:2px;width:18px;height:14px;opacity:0;transition:opacity .3s}
.track-eq i{flex:1;height:35%;border-radius:1px;background:var(--red)}
.track[aria-selected=true] .track-eq{opacity:1}
.deck-playing .track[aria-selected=true] .track-eq i{animation:eq .9s ease-in-out infinite alternate}
.deck-playing .track[aria-selected=true] .track-eq i:nth-child(2){animation-duration:.6s;animation-delay:-.2s}
.deck-playing .track[aria-selected=true] .track-eq i:nth-child(3){animation-duration:.75s;animation-delay:-.4s}
.deck-playing .track[aria-selected=true] .track-eq i:nth-child(4){animation-duration:.5s;animation-delay:-.1s}
@keyframes eq{0%{height:20%}100%{height:100%}}
.track-panels{position:relative;margin-top:clamp(28px,3.5vw,44px)}
.track-card{--rot:.7deg;padding:clamp(26px,3vw,38px) clamp(22px,3vw,36px);transform:rotate(var(--rot))}
.js .track-card:not(.is-active),.js .crate-card:not(.is-active){display:none}
.track-card.is-entering,.crate-card.is-entering{animation:card-in .55s var(--ease-out)}
@keyframes card-in{0%{opacity:0;translate:0 18px;rotate:-2deg}100%{opacity:1;translate:0 0;rotate:0deg}}
.track-card .tape-red{top:-11px;left:22px;width:104px;height:24px;transform:rotate(-3deg)}
.track-card h3{font:400 clamp(20px,2vw,26px)/1.1 var(--font-display);text-transform:uppercase}
.card-meta{margin-top:8px;font:800 12px/1.45 var(--font-body);font-stretch:92%;letter-spacing:.05em;text-transform:uppercase;color:#5c5f67}
.dash-list{display:grid;gap:12px;margin-top:18px;list-style:none}
.dash-list li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.6;color:#2a2c31}
.dash-list li::before{content:"";position:absolute;left:0;top:.72em;width:13px;height:3px;border-radius:2px;background:var(--ink);transform:rotate(-14deg)}
.no-js .track-card+.track-card,.no-js .crate-card+.crate-card{margin-top:28px}
.liner-notes{--lift:0px;position:relative;display:flex;align-items:center;gap:14px;margin-top:24px;padding:11px 18px 11px 11px;border:2px dashed rgba(236,232,223,.22);border-radius:14px;color:var(--paper);transform:translateY(var(--lift));transition:transform .45s var(--ease-spring),border-color .25s,background-color .25s}
.liner-notes:hover,.liner-notes:focus-visible{--lift:-3px;border-color:var(--lime);border-style:solid;background:rgba(226,245,60,.06)}
.ln-disc{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle,var(--lime) 0 31%,#0e0f12 32% 35%,transparent 36%),repeating-radial-gradient(circle,#131418 0 1.4px,#1c1d22 1.4px 3px);color:var(--ink);box-shadow:0 6px 14px rgba(0,0,0,.5);transition:transform .9s var(--ease-out)}
.ln-disc .i{width:13px;height:13px;stroke-width:2.6}
.liner-notes:hover .ln-disc{transform:rotate(220deg)}
.ln-text{display:grid;gap:4px;min-width:0}
.ln-text strong{font:400 14px/1.1 var(--font-display);text-transform:uppercase}
.ln-text small{font:600 12.5px/1.3 var(--font-body);color:var(--muted)}
.ln-arrow{flex:none;margin-left:auto;width:20px;height:20px;color:var(--lime);transition:transform .35s var(--ease-spring)}
.liner-notes:hover .ln-arrow{transform:translateY(3px)}

/* ---------- Work (brick wall) ---------- */
.wall{margin-inline:clamp(0px,.8vw,12px);border-radius:32px;background-color:#26282d;background-image:url('../images/brick-wall.svg');background-size:580px 320px;isolation:isolate;z-index:2;padding-bottom:clamp(120px,13vw,170px);margin-bottom:0}
.wall::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(120% 80% at 50% 0%,rgba(0,0,0,.05),rgba(0,0,0,.55) 75%),linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.08) 26%,rgba(0,0,0,.12) 70%,rgba(0,0,0,.6))}
.wall-light{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(560px circle at var(--lx,72%) var(--ly,22%),rgba(255,226,170,.2),rgba(255,226,170,.06) 42%,transparent 70%);transition:opacity .4s}
.speech{position:relative;align-self:flex-start;margin-top:.4em;padding:14px 18px;border-radius:12px;background:rgba(14,15,19,.88);color:#d5d7dc;box-shadow:0 14px 30px -16px rgba(0,0,0,.8)}
.speech::before{content:"";position:absolute;left:-9px;top:22px;border:9px solid transparent;border-left:0;border-right-color:rgba(14,15,19,.88)}
.work-toolbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:clamp(34px,4vw,54px)}
.filters{display:flex;flex-wrap:wrap;gap:10px}
.filter{--rot:0deg;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border:2.5px solid rgba(236,232,223,.5);border-radius:999px;background:rgba(14,15,19,.75);color:var(--paper);font:400 12px/1 var(--font-display);text-transform:uppercase;transform:rotate(var(--rot));transition:background-color .25s,color .25s,border-color .25s,transform .4s var(--ease-spring)}
.filter span{display:grid;place-items:center;min-width:24px;height:22px;padding-inline:5px;border-radius:999px;background:rgba(255,255,255,.12);font:800 11px/1 var(--font-body)}
.filter:hover{border-color:var(--lime);transform:rotate(-2deg) translateY(-2px)}
.filter.is-active{--rot:-2deg;background:var(--lime);border-color:var(--sticker-edge);color:var(--ink)}
.filter.is-active span{background:rgba(0,0,0,.14)}
.work-count{font:800 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:#d7d9de;padding:8px 12px;border-radius:8px;background:rgba(14,15,19,.7)}
.polaroid-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4.5vw,64px) clamp(22px,3vw,44px)}
.project{--rot:-2deg;--lift:0px;position:relative;transform:translateY(var(--lift)) rotate(var(--rot));transition:transform .55s var(--ease-spring)}
.project:nth-child(3n+2){--rot:1.6deg;margin-top:clamp(0px,2.4vw,34px)}
.project:nth-child(3n){--rot:-.8deg}
.project:hover,.project:focus-within{--lift:-10px;--rot:0deg;z-index:3}
.project-open{--rx:0deg;--ry:0deg;position:relative;display:block;width:100%;padding:12px 12px 20px;border-radius:4px;background:#f6f3ec;background-image:var(--noise);color:var(--ink);text-align:left;box-shadow:0 3px 5px rgba(0,0,0,.35),0 32px 46px -22px rgba(0,0,0,.95);transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .45s var(--ease-out),box-shadow .35s}
.project:hover .project-open{box-shadow:0 3px 5px rgba(0,0,0,.35),0 44px 60px -22px rgba(0,0,0,.95)}
.project-frame{display:block;padding:9px;border-radius:7px;background:var(--frame,var(--lime))}
.project-photo{position:relative;display:block;overflow:hidden;aspect-ratio:680/460;border-radius:4px;background:var(--art,#ddd)}
.project-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.project:hover .project-photo img{transform:scale(1.07) rotate(-.6deg)}
.project-overlay{position:absolute;left:0;right:0;bottom:0;padding:58px 14px 12px;background:linear-gradient(180deg,transparent,rgba(9,10,13,.62) 42%,rgba(9,10,13,.94));color:#fff}
.project-overlay small{display:inline-flex;align-items:center;gap:6px;font:700 11px/1.2 var(--font-body);color:rgba(255,255,255,.86);letter-spacing:.02em}
.project-overlay small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--frame,var(--lime))}
.project-overlay strong{display:block;margin-top:3px;font:800 clamp(21px,2.1vw,29px)/1 var(--font-body);font-stretch:96%;letter-spacing:-.015em}
.project-kind{display:block;margin-top:16px;padding-inline:4px;font:400 clamp(13px,1.2vw,15.5px)/1.15 var(--font-display);text-transform:uppercase}
.project-meta{display:block;margin-top:7px;padding-inline:4px;font:800 11.5px/1.3 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--red-ink)}
.project-no{position:absolute;right:16px;bottom:20px;font:400 12px/1 var(--font-display);color:#9ea1a8}
.project .tape{top:-12px;width:92px;height:28px}
.project .tape-l{left:-22px;transform:rotate(-34deg)}
.project .tape-r{right:-22px;transform:rotate(34deg)}
.award{position:absolute;top:-16px;left:50%;z-index:4;display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border:2.5px solid var(--sticker-edge);border-radius:8px;background:var(--lime);font:400 11px/1 var(--font-display);text-transform:uppercase;box-shadow:var(--shadow-sticker);transform:translateX(-50%) rotate(-4deg)}
.award .i{width:13px;height:13px}
.project.is-out{animation:card-out .35s var(--ease-in-out) forwards}
@keyframes card-out{to{opacity:0;translate:0 40px;rotate:8deg;scale:.9}}
.project.is-in-filter{animation:card-slap .6s var(--ease-out) backwards}
@keyframes card-slap{0%{opacity:0;scale:1.25;rotate:-6deg}60%{opacity:1;scale:.97}100%{scale:1;rotate:0deg}}
.work-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(48px,5vw,70px)}
.artwork-note{max-width:420px;font-size:13px;line-height:1.5;color:#c0c2c8;padding:8px 12px;border-radius:8px;background:rgba(14,15,19,.6)}
.noscript-note{margin-top:20px;padding:14px;border:2px solid var(--lime);border-radius:10px;background:rgba(0,0,0,.6)}

/* ---------- Toolkit (sticker board) ---------- */
.toolkit{background-color:var(--bg-1);padding-top:clamp(140px,15vw,190px)}
.toolkit::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(800px 500px at 0% 0%,rgba(214,166,64,.09),transparent 60%),linear-gradient(90deg,transparent calc(33.33% - 1px),rgba(255,255,255,.03) calc(33.33% - 1px) 33.33%,transparent 33.33%,transparent calc(66.66% - 1px),rgba(255,255,255,.03) calc(66.66% - 1px) 66.66%,transparent 66.66%)}
.toolkit-head{justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
.toolkit-head .section-intro{margin-top:16px;padding-top:0}
.board-actions{display:flex;gap:12px;flex-wrap:wrap}
.board{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;min-height:420px;padding:28px;list-style:none;border:2px dashed rgba(236,232,223,.13);border-radius:22px;background:rgba(10,11,14,.25);transition:height .6s var(--ease-out)}
.board.is-ready{display:block;padding:0}
.skill{--rot:0deg;--tilt:0deg;--s:1;--x:0px;--y:0px;--c:var(--lime);position:relative;display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border:3px solid var(--sticker-edge);border-radius:10px;background:var(--c);color:var(--ink);font:400 clamp(14px,1.35vw,18px)/1.05 var(--font-display);text-transform:uppercase;text-align:center;white-space:nowrap;box-shadow:var(--shadow-sticker);cursor:grab;user-select:none;touch-action:none;transform:rotate(var(--rot))}
.board.is-ready .skill{position:absolute;left:0;top:0;transform:translate(var(--x),var(--y)) rotate(calc(var(--rot) + var(--tilt))) scale(var(--s));transition:transform .75s var(--ease-spring),box-shadow .25s}
.board.is-ready .skill.is-dragging{transition:box-shadow .25s;cursor:grabbing;--s:1.08;box-shadow:0 4px 0 rgba(0,0,0,.25),0 34px 40px -12px rgba(0,0,0,.75)}
.board.is-ready .skill.is-key{transition:transform .25s var(--ease-out)}
.skill:hover{--s:1.04}
.board.is-waiting .skill{opacity:0}
.board.is-live .skill{animation:slap .65s var(--ease-out) var(--d,0s) backwards}
.skill:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.c-lime{--c:var(--lime)}.c-blue{--c:var(--blue)}.c-pink{--c:var(--pink)}.c-green{--c:var(--green)}.c-orange{--c:var(--orange)}.c-red{--c:var(--red)}.c-paper{--c:var(--paper)}.c-purple{--c:var(--purple)}
.c-red{color:#fff}
.sh-pill{border-radius:999px;padding:13px 24px}
.sh-circle{width:118px;height:118px;padding:10px;border-radius:50%;white-space:normal;font-size:clamp(13px,1.2vw,16px)}
.sh-tag{padding:14px 22px 14px 34px;border-radius:8px}
.sh-tag::before{content:"";position:absolute;left:13px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.f-marker{font-family:var(--font-marker);text-transform:none;font-size:clamp(17px,1.6vw,22px);letter-spacing:.01em}
.board-hint{margin-top:16px;text-align:center;font-size:13px;color:var(--dim)}

/* ---------- Learning (record crate) ---------- */
.learning{background-color:var(--bg-2);border-radius:32px 32px 0 0;margin-top:-32px;z-index:1}
.float-st{position:absolute;z-index:3}
.st-green{--rot:-4deg;--c:var(--green);left:max(var(--gutter),calc(50% - 470px));top:42px}
.st-pink{--rot:5deg;--c:var(--pink);right:max(var(--gutter),calc(50% - 470px));top:36px}
.crate-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:start}
.crate-stage{position:relative;aspect-ratio:1.42}
.crate-featured{position:absolute;left:0;top:0;width:45%;aspect-ratio:1;z-index:3}
.crate-featured .cover{position:absolute;inset:0;z-index:2;transform:rotate(-2deg);box-shadow:0 30px 40px -22px rgba(0,0,0,.9),0 3px 6px rgba(0,0,0,.4)}
.crate-featured.is-swap .cover{animation:cover-swap .7s var(--ease-out)}
@keyframes cover-swap{0%{translate:0 40%;opacity:0;rotate:4deg}100%{translate:0 0;opacity:1;rotate:0deg}}
.vinyl-peek{position:absolute;top:5%;left:6%;width:90%;aspect-ratio:1;z-index:1;border-radius:50%;background:radial-gradient(circle,var(--label,var(--lime)) 0 17%,#0e0f12 17.5% 19%,transparent 19.5%),repeating-radial-gradient(circle,#131418 0 1.4px,#1c1d22 1.4px 3px);box-shadow:0 10px 20px rgba(0,0,0,.6);transform:translateX(34%) rotate(var(--spin,0deg));transition:transform .9s var(--ease-out)}
.crate-featured.is-swap .vinyl-peek{animation:vinyl-out .9s var(--ease-out)}
@keyframes vinyl-out{0%{translate:-34% 0}100%{translate:0 0}}
.cover{display:block;overflow:hidden;border-radius:3px;background-color:var(--cv,var(--lime));color:var(--ink)}
.cover-year{position:absolute;left:7%;top:6%;font:400 clamp(26px,3.2vw,44px)/.9 var(--font-display);writing-mode:vertical-rl}
.cover-title{position:absolute;left:24%;right:7%;bottom:7%;font:800 clamp(11px,1vw,13px)/1.2 var(--font-body);letter-spacing:.05em;text-transform:uppercase}
.cover-rings{--cv:var(--lime);background-image:radial-gradient(circle at 62% 46%,rgba(20,21,25,.32) 0 15%,transparent 15.5% 22%,rgba(20,21,25,.25) 22.5% 23.5%,transparent 24% 30%,rgba(20,21,25,.25) 30.5% 31.5%,transparent 32%),var(--noise)}
.cover-stripes{--cv:var(--pink);background-image:repeating-linear-gradient(-45deg,rgba(20,21,25,.18) 0 10px,transparent 10px 22px),var(--noise)}
.cover-dots{--cv:var(--blue);background-image:radial-gradient(rgba(20,21,25,.32) 22%,transparent 24%),var(--noise);background-size:12px 12px,auto}
.cover-checks{--cv:var(--orange);background-image:repeating-linear-gradient(45deg,rgba(20,21,25,.2) 0 12px,transparent 12px 24px),repeating-linear-gradient(-45deg,rgba(255,255,255,.18) 0 4px,transparent 4px 24px),var(--noise)}
.cover-grid{--cv:var(--green);background-image:linear-gradient(rgba(20,21,25,.2) 2px,transparent 2px),linear-gradient(90deg,rgba(20,21,25,.2) 2px,transparent 2px),var(--noise);background-size:22px 22px,22px 22px,auto}
.crate-box{position:absolute;left:0;right:0;bottom:0;height:58%}
.crate-rack{position:absolute;left:43%;right:3%;bottom:34%;height:118%;display:flex;align-items:flex-end;z-index:2}
.sleeve{--pull:0px;--lean:0deg;position:relative;flex:1 1 0;min-width:0;height:100%;margin-left:-4px;border-radius:4px 4px 0 0;border:2px solid rgba(0,0,0,.25);background-color:var(--cv);transform-origin:50% 100%;transform:translateY(var(--pull)) rotate(var(--lean));transition:transform .55s var(--ease-spring),filter .3s;box-shadow:-8px 0 14px rgba(0,0,0,.4);overflow:hidden}
.sleeve:first-child{margin-left:0}
.sleeve:nth-child(odd){--lean:-2deg}.sleeve:nth-child(even){--lean:2deg}
.sleeve:hover{--pull:-18px}
.sleeve[aria-selected=true]{--pull:-40px;--lean:0deg;border-color:var(--sticker-edge);filter:brightness(1.08)}
.sleeve-year{position:absolute;left:50%;top:10px;transform:translateX(-50%);writing-mode:vertical-rl;font:400 clamp(18px,2.1vw,30px)/1 var(--font-display);color:var(--ink)}
.crate-front{position:absolute;left:-1%;right:-1%;bottom:0;height:46%;z-index:4;display:grid;place-items:center;border-radius:14px;border:1px solid #3a3f4b;background:linear-gradient(180deg,#2c303a,#1d2027);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 40px -24px rgba(0,0,0,.9)}
.crate-front::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--noise);opacity:.6}
.crate-handle{position:absolute;top:12%;left:50%;width:24%;height:18%;border-radius:999px;background:#0e1014;transform:translateX(-50%);box-shadow:inset 0 2px 4px rgba(0,0,0,.8)}
.crate-brand{position:relative;margin-top:12%;font:400 clamp(20px,2.3vw,30px)/1 var(--font-marker);color:var(--gold);transform:rotate(-3deg);text-shadow:0 2px 0 rgba(0,0,0,.4)}
.crate-panels{position:relative}
.crate-card{--rot:1.2deg;padding:clamp(30px,3.4vw,42px) clamp(24px,3vw,38px) clamp(80px,7vw,92px);transform:rotate(var(--rot))}
.crate-card .tape-top{top:-14px;right:40px;transform:rotate(5deg)}
.crate-kind{font:400 11px/1 var(--font-display);text-transform:uppercase;color:#6c6f77;letter-spacing:.05em}
.crate-year{display:inline-block;margin-top:12px;padding:6px 10px 4px;background:var(--lime);font:400 clamp(24px,2.8vw,38px)/1 var(--font-display);color:var(--ink);transform:rotate(-1.5deg)}
.crate-card h3{margin-top:16px;font:400 clamp(18px,1.9vw,24px)/1.12 var(--font-display);text-transform:uppercase}
.crate-org{margin-top:8px;font:800 12px/1.45 var(--font-body);font-stretch:92%;letter-spacing:.05em;text-transform:uppercase;color:#5c5f67}
.crate-desc{margin-top:16px;font-size:15.5px;line-height:1.62;color:#2a2c31}
.crate-nav{position:absolute;left:clamp(24px,3vw,38px);bottom:clamp(24px,2.6vw,30px);z-index:3;display:flex;gap:10px;transform:rotate(1.2deg)}
.no-js .crate-nav{display:none}
.chip-btn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 14px;border:2px solid #9b9ea6;border-radius:9px;background:transparent;color:#5c5f67;font:400 11px/1 var(--font-display);text-transform:uppercase;transition:border-color .2s,color .2s,background-color .2s,transform .3s var(--ease-spring)}
.chip-btn:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.chip-btn-dark{border-color:var(--ink);color:var(--ink)}
.chip-btn-dark:hover{background:var(--ink);color:var(--lime)}
.chip-btn .i{width:16px;height:16px}

/* ---------- Process (singles) ---------- */
.process{background-color:var(--bg-0);background-image:radial-gradient(900px 420px at 50% 0%,rgba(255,62,142,.06),transparent 70%)}
.singles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4.5vw,64px)}
.single-cover{position:relative;aspect-ratio:1;margin-right:12%}
.single-sleeve{position:absolute;inset:0;z-index:2;display:block;overflow:hidden;border-radius:3px;background:var(--c);box-shadow:0 30px 44px -24px rgba(0,0,0,.95),0 3px 6px rgba(0,0,0,.4)}
.single-sleeve img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.single:hover .single-sleeve img{transform:scale(1.05)}
.single-vinyl{position:absolute;top:4%;left:4%;width:92%;height:92%;z-index:1;border-radius:50%;background:repeating-radial-gradient(circle,#121317 0 1.4px,#1c1d22 1.4px 3px);box-shadow:0 10px 24px rgba(0,0,0,.6);transform:translateX(8%) rotate(0deg);transition:transform .9s var(--ease-out)}
.single-vinyl span{position:absolute;inset:34%;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px rgba(0,0,0,.2)}
.single-vinyl span::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#0e0f12}
.single:hover .single-vinyl{transform:translateX(30%) rotate(200deg)}
.single-side{position:absolute;bottom:12px;left:12px;z-index:3;padding:6px 9px;border-radius:7px;background:var(--paper);color:var(--ink);font:400 11px/1 var(--font-display);text-transform:uppercase;transform:rotate(-3deg);box-shadow:0 4px 8px rgba(0,0,0,.35)}
.single-45{position:absolute;right:12px;bottom:12px;z-index:3;display:grid;place-items:center;width:40px;height:34px;background:var(--lime);color:var(--ink);font:400 18px/1 var(--font-marker);transform:rotate(4deg);box-shadow:0 4px 8px rgba(0,0,0,.35)}
.single-meta{margin-top:20px;font:800 12px/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.single h3{margin-top:10px;font:800 21px/1.25 var(--font-body);color:var(--paper)}
.single>p:not(.single-meta){margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;list-style:none}
.tags li{padding:5px 10px;border:1px solid var(--line-2);border-radius:999px;font:700 11.5px/1 var(--font-body);color:#b6b9c0}

/* ---------- Contact ---------- */
.contact{background-color:#17181d;padding-bottom:clamp(90px,10vw,130px)}
.contact::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(760px 480px at 0% 0%,rgba(214,166,64,.16),transparent 62%),linear-gradient(90deg,transparent calc(33.33% - 1px),rgba(255,255,255,.03) calc(33.33% - 1px) 33.33%,transparent 33.33%)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(34px,5vw,76px);align-items:center}
.contact h2{font:400 clamp(42px,5.3vw,76px)/.96 var(--font-display);text-transform:uppercase;color:var(--paper)}
.contact h2 .marker-accent{color:var(--lime);font-size:1.02em;line-height:1.05;transform:rotate(-2deg)}
.contact-lede{margin-top:22px;max-width:470px;color:var(--muted);font-size:17px;line-height:1.6}
.contact-lede strong{color:var(--text)}
.contact-email{display:inline-block;max-width:100%;margin-top:24px;font:400 clamp(19px,2.25vw,32px)/1.1 var(--font-display);text-transform:uppercase;color:var(--lime);overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;padding-bottom:6px;transition:background-size .45s var(--ease-out)}
.contact-email:hover{background-size:100% 3px}
.contact-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.social-block{max-width:600px;margin-top:32px}
.social-kicker{display:flex;align-items:center;gap:14px;font:400 12px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--lime)}
.social-kicker::after{content:"";flex:1;height:6px;background:var(--line-2);-webkit-mask:var(--squiggle) repeat-x 0 50%/18px 6px;mask:var(--squiggle) repeat-x 0 50%/18px 6px}
.social-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px;list-style:none}
.social-card{--c:var(--paper);--lift:0px;--rot:0deg;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;height:100%;padding:14px 14px 15px;border:2px solid var(--line-2);border-radius:16px;background:rgba(12,13,17,.6);color:var(--paper);transform:translateY(var(--lift)) rotate(var(--rot));transition:transform .5s var(--ease-spring),border-color .25s,box-shadow .3s}
.social-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(140% 120% at 0% 100%,color-mix(in srgb,var(--c) 20%,transparent),transparent 58%);opacity:0;transition:opacity .35s;pointer-events:none}
.social-card:hover,.social-card:focus-visible{--lift:-5px;--rot:-1.2deg;border-color:var(--c);box-shadow:0 22px 32px -20px rgba(0,0,0,.95)}
.social-card:hover::before,.social-card:focus-visible::before{opacity:1}
.sc-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.sc-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border:3px solid var(--sticker-edge);border-radius:50%;background:var(--c);color:var(--ink);box-shadow:var(--shadow-sticker);transform:rotate(var(--ir,-8deg));transition:transform .55s var(--ease-spring)}
.sc-icon .i{width:20px;height:20px}
.social-card:hover .sc-icon,.social-card:focus-visible .sc-icon{transform:rotate(10deg) scale(1.1)}
.sc-arrow{width:20px;height:20px;color:var(--dim);transition:transform .4s var(--ease-spring),color .2s}
.social-card:hover .sc-arrow,.social-card:focus-visible .sc-arrow{color:var(--c);transform:translate(3px,-3px)}
.sc-text{position:relative;display:grid;min-width:0}
.sc-name{font:400 14px/1.05 var(--font-display);text-transform:uppercase}
.sc-handle{margin-top:6px;font:700 12.5px/1.25 var(--font-body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-github{--c:var(--paper)}
.sc-linkedin{--c:var(--blue);--ir:7deg}
.sc-instagram{--c:var(--pink);--ir:-4deg}
.social-block.is-in .social-cards li{animation:slap .7s var(--ease-out) calc(.25s + var(--d,0s)) backwards}
.contact-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px;list-style:none}
.contact-links li>a,.contact-links li>span{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#cfd1d6}
.contact-links li>a{border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:color .2s,border-color .2s}
.contact-links li>a:hover{color:var(--lime);border-color:var(--lime)}
.contact-links .i{width:18px;height:18px}
.cv-links{display:inline-flex;align-items:center;gap:10px}
.contact-links .cv-alt{padding:5px 8px 4px;border:1.5px solid var(--line-2);border-radius:7px;font:800 11px/1 var(--font-body);letter-spacing:.07em;color:#cfd1d6}
.contact-links .cv-alt:hover{border-color:var(--lime);color:var(--lime)}
.local-time{display:inline-flex;align-items:center;gap:10px}
.contact-links .lt-screen{--c:var(--green);display:inline-flex;align-items:flex-end;gap:7px;height:34px;padding:6px 10px;border:1px solid #2a2d35;border-radius:8px;background:#0b0c0f;color:var(--green);font-size:inherit;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.lt-digits{display:flex;align-items:stretch;height:100%}
.lt-digits .lcd-digits{gap:3px}
.lt-colon{position:relative;flex:none;width:4px;margin:0 3px;animation:lt-blink 1s steps(1) infinite}
.lt-colon::before,.lt-colon::after{content:"";position:absolute;left:0;width:4px;height:4px;border-radius:1px;background:currentColor;box-shadow:0 0 6px currentColor}
.lt-colon::before{top:26%}
.lt-colon::after{bottom:22%}
@keyframes lt-blink{50%{opacity:.15}}
.lt-ampm{font:400 10px/1 var(--font-display);padding-bottom:1px;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--green) 60%,transparent))}
.graffiti{position:relative}
.no-js .graffiti{display:none}
.copy-email.is-copied{--fill:var(--green);color:var(--ink);border-color:var(--sticker-edge)}
.wall-frame{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:16px;background:#2a2c31;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 36px 50px -28px rgba(0,0,0,.9)}
.wall-frame canvas{position:absolute;inset:0;width:100%;height:100%}
.wall-paint{touch-action:none;cursor:crosshair}
.wall-placeholder{position:absolute;left:50%;top:56%;z-index:2;font:400 clamp(26px,3.4vw,46px)/1.05 var(--font-marker);color:rgba(236,232,223,.3);text-align:center;transform:translate(-50%,-50%) rotate(-7deg);pointer-events:none;transition:opacity .5s,transform .5s var(--ease-out)}
.graffiti.has-paint .wall-placeholder{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(.9)}
.wall-save{position:absolute;top:14px;right:14px;z-index:3}
.spray-panel{display:grid;gap:14px;margin-top:14px;padding:16px 18px;border-radius:16px;border:1px solid #2a2e37;background:linear-gradient(180deg,#171a20,#111318)}
.sp-row{display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap}
.sp-label{width:64px;font:400 11px/1 var(--font-display);text-transform:uppercase;color:var(--lime)}
.cans{display:flex;flex-wrap:wrap;gap:9px}
.can{--c:var(--lime);position:relative;width:28px;height:44px;margin-top:10px;border-radius:7px 7px 5px 5px;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.38) 30%,rgba(255,255,255,0) 56%,rgba(0,0,0,.28)),var(--c);box-shadow:0 4px 8px rgba(0,0,0,.4);transition:transform .35s var(--ease-spring),box-shadow .2s}
.can::before{content:"";position:absolute;left:50%;top:-9px;width:15px;height:10px;margin-left:-7.5px;border-radius:4px 4px 1px 1px;background:linear-gradient(90deg,#8b8e96,#ecedf0 45%,#8b8e96)}
.can::after{content:"";position:absolute;left:50%;top:-13px;width:5px;height:5px;margin-left:-2.5px;border-radius:1px;background:#1b1c20}
.can:hover{transform:translateY(-4px) rotate(-6deg)}
.can[aria-checked=true]{transform:translateY(-6px);box-shadow:0 0 0 3px var(--bg-1),0 0 0 5px var(--lime),0 10px 14px rgba(0,0,0,.5)}
.can-rainbow{background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.35) 30%,rgba(255,255,255,0) 56%,rgba(0,0,0,.25)),linear-gradient(180deg,#ff4b2f,#ffa41f,#e2f53c,#3ee584,#2fc6f2,#b8a6ff,#ff3e8e)}
.nozzles{display:flex;flex-wrap:wrap;gap:8px}
.nozzle{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 13px;border:1.5px solid #343944;border-radius:999px;background:#1b1e25;color:#d8dade;font:700 13px/1 var(--font-body);transition:background-color .2s,color .2s,border-color .2s}
.nozzle:hover{border-color:#5c6270}
.nozzle[aria-checked=true]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.nozzle .i{width:15px;height:15px}
.nz{display:block;flex:none;border-radius:50%;background:currentColor}
.nz-skinny{width:7px;height:7px}
.nz-fat{width:13px;height:13px;opacity:.75}
.nz-soft{width:14px;height:14px;background:radial-gradient(circle,currentColor 0,transparent 70%)}
.nz-splatter{width:14px;height:14px;background:radial-gradient(circle at 30% 30%,currentColor 0 1.5px,transparent 2px),radial-gradient(circle at 75% 40%,currentColor 0 2px,transparent 2.5px),radial-gradient(circle at 45% 78%,currentColor 0 1.6px,transparent 2px)}
.sp-controls{gap:14px 22px}
.sp-range{display:grid;gap:8px;min-width:128px;flex:1 1 128px;font:700 12.5px/1 var(--font-body);color:#d8dade}
.sp-range output{color:var(--lime)}
.sp-range input{--fill:50%;appearance:none;-webkit-appearance:none;width:100%;height:5px;margin:6px 0;border-radius:999px;background:linear-gradient(var(--lime),var(--lime)) 0/var(--fill) 100% no-repeat,#3a3f4a;cursor:pointer}
.sp-range input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--lime);border:3px solid #121419;box-shadow:0 0 0 1.5px var(--lime)}
.sp-range input::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--lime);border:3px solid #121419;box-shadow:0 0 0 1.5px var(--lime)}
.sp-switch{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:40px;font:700 13px/1 var(--font-body);color:#d8dade;cursor:pointer}
.sp-switch input{position:absolute;opacity:0;width:1px;height:1px}
.sw{position:relative;width:42px;height:24px;border-radius:999px;background:#2f343f;transition:background-color .25s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#e8e9ec;transition:transform .35s var(--ease-spring)}
.sp-switch input:checked+.sw{background:var(--lime)}
.sp-switch input:checked+.sw::after{transform:translateX(18px);background:var(--ink)}
.sp-switch input:focus-visible+.sw{outline:3px solid var(--blue);outline-offset:3px}
.sp-actions{display:flex;gap:8px;margin-left:auto}
.note-spray{right:-10px;top:-56px;transform:rotate(4deg);color:var(--pink)}
.note-spray .i{transform:scaleX(-1) rotate(-30deg)}
.graffiti.has-paint .note-spray{opacity:0;transition:opacity .4s}

/* ---------- Footer ---------- */
.site-footer{position:relative;z-index:2;background-color:var(--bg-0)}
.hazard{height:16px;background:repeating-linear-gradient(-45deg,var(--lime) 0 18px,var(--bg-0) 18px 36px)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,.9fr);gap:clamp(30px,4vw,56px);padding-block:clamp(54px,7vw,90px)}
.logo-xl{font-size:clamp(58px,7.5vw,100px);text-shadow:3px 3px 0 var(--pink),6px 6px 0 rgba(0,0,0,.35)}
.footer-brand p{margin-top:20px;max-width:330px;color:var(--muted);font-size:15px;line-height:1.6}
.footer-col h2{margin-bottom:18px;font:400 13px/1 var(--font-display);text-transform:uppercase;color:var(--lime)}
.footer-col ul{display:grid;gap:12px;list-style:none}
.footer-col a,.footer-col span{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#dcdde1;transition:color .2s,transform .3s var(--ease-spring)}
.footer-col a:hover{color:var(--lime);transform:translateX(4px)}
.footer-col .i{width:17px;height:17px;color:var(--muted)}
.footer-col a,.footer-col span{overflow-wrap:anywhere}
.footer-find a:hover .i:not(.ext){color:var(--lime)}
.footer-col .ext{width:13px;height:13px;color:var(--lime);opacity:0;transform:translate(-5px,5px);transition:opacity .2s,transform .35s var(--ease-spring)}
.footer-find a:hover .ext,.footer-find a:focus-visible .ext{opacity:1;transform:none}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding-block:22px 120px;border-top:1px solid var(--line);color:var(--dim);font-size:13px}
.footer-bottom a{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--paper)}
.footer-bottom a:hover{color:var(--lime)}
.footer-bottom .i{width:16px;height:16px}

/* ---------- Floating widgets ---------- */
.now-playing{position:fixed;left:18px;bottom:18px;z-index:40;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 110px);padding:7px 16px 7px 7px;border:1.5px solid #2f333d;border-radius:999px;background:rgba(14,15,19,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--paper);text-align:left;box-shadow:0 16px 30px -16px rgba(0,0,0,.9);transition:transform .5s var(--ease-out),border-color .2s}
.now-playing:hover{border-color:var(--lime);transform:translateY(-3px)}
.np-disc{flex:none;width:42px;height:42px;border-radius:50%;border:3px solid var(--lime);background:radial-gradient(circle,var(--green) 0 18%,#0f1013 19% 26%,transparent 27%),repeating-radial-gradient(circle,#14151a 0 1.5px,#1d1f25 1.5px 3px);animation:spin 3.2s linear infinite}
.np-text{display:grid;min-width:0}
.np-text small{font:800 10px/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.np-text strong{margin-top:4px;font:400 13px/1.1 var(--font-display);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-text strong.is-flip{animation:np-flip .5s var(--ease-out)}
@keyframes np-flip{0%{opacity:0;translate:0 8px}100%{opacity:1;translate:0 0}}
.np-skip{width:18px;height:18px;color:var(--lime)}
.to-top{position:fixed;right:18px;bottom:18px;z-index:40;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--lime);color:var(--ink);box-shadow:0 14px 26px -10px rgba(0,0,0,.8);opacity:0;transform:translateY(24px) scale(.8);pointer-events:none;transition:opacity .35s,transform .5s var(--ease-spring)}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{transform:translateY(-4px) rotate(-8deg)}
.to-top>.i{width:24px;height:24px;stroke-width:2.6}
.to-top-ring{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);transform:rotate(-90deg);fill:none;stroke-width:3}
.to-top-ring circle:first-child{stroke:rgba(226,245,60,.18)}
.to-top-progress{stroke:var(--lime);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--progress,0) * 100);stroke-linecap:round}

/* ---------- Dialogs ---------- */
dialog{position:fixed;max-width:calc(100% - 28px);max-height:min(90dvh,900px);padding:0;border:0;border-radius:14px;background:var(--paper);background-image:var(--noise);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.9);overscroll-behavior:contain;color-scheme:light}
dialog::backdrop{background:rgba(6,7,9,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog[open]{animation:dialog-in .5s var(--ease-out)}
dialog.is-closing{animation:dialog-out .28s var(--ease-in-out) forwards}
@keyframes dialog-in{0%{opacity:0;translate:0 40px;rotate:-3deg;scale:.94}100%{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes dialog-out{to{opacity:0;translate:0 30px;rotate:2deg;scale:.96}}
.dialog-topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 20px;background:var(--ink);color:var(--paper);font:400 11px/1.3 var(--font-display);text-transform:uppercase;letter-spacing:.04em}
.dialog-tools{display:flex;gap:6px}
.dialog-topbar .icon-btn{width:40px;height:40px;border-color:#30343e;background:transparent}
.project-dialog{width:820px}
.dialog-art{background:#dcd8cc}
.dialog-artwork{width:100%;height:clamp(200px,34vh,320px);object-fit:cover}
.dialog-art-note{padding:7px 20px;background:#dedacd;font:800 10px/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;text-align:right;color:#55585f}
.dialog-content{padding:clamp(24px,4vw,40px)}
.dialog-category{font:400 11px/1.3 var(--font-display);text-transform:uppercase;color:var(--red-ink);letter-spacing:.04em}
.dialog-content h2{margin-top:10px;font:400 clamp(38px,6vw,64px)/.94 var(--font-display);text-transform:uppercase}
.dialog-content h2:focus{outline:none}
.dialog-subtitle{margin-top:10px;font-size:17px;font-weight:600;color:#3a3d44}
.project-meta-list{display:grid;grid-template-columns:1fr 1.3fr;gap:20px;margin:24px 0;padding:16px 0;border-block:1.5px dashed #b2b0a5}
.project-meta-list dt{font:400 10px/1.4 var(--font-display);text-transform:uppercase;color:#6a6d74;letter-spacing:.04em}
.project-meta-list dd{margin-top:4px;font-size:15px;font-weight:600}
.dialog-summary{font-size:17px;line-height:1.65}
.dialog-content h3{margin:28px 0 4px;font:400 20px/1 var(--font-display);text-transform:uppercase}
.stack-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.stack-tags span{padding:7px 12px;border:2px solid var(--ink);border-radius:999px;font:800 11.5px/1 var(--font-body);letter-spacing:.04em;text-transform:uppercase}
.stack-tags span:nth-child(4n+1){background:var(--lime)}
.dialog-actions{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:30px}
.btn-ink{--fill:var(--ink);color:var(--paper)}
dialog .btn{border-color:var(--ink);box-shadow:3px 4px 0 var(--ink)}
dialog .btn:hover{box-shadow:5px 7px 0 var(--ink)}
dialog .btn:active{box-shadow:1px 1px 0 var(--ink)}
.dialog-body.is-swap{animation:body-swap .45s var(--ease-out)}
@keyframes body-swap{0%{opacity:0;translate:var(--swap-x,30px) 0}100%{opacity:1;translate:0 0}}
.message-dialog{width:680px}
.message-inner{padding:clamp(24px,4vw,40px)}
.message-inner h2{margin-top:10px;margin-bottom:16px;font:400 clamp(36px,6vw,58px)/.94 var(--font-display);text-transform:uppercase}
.message-lede{font-size:15px;line-height:1.65;color:#4c4f56;max-width:540px}
#message-form{margin-top:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#message-form label{display:block;margin-bottom:16px;font:400 11px/1.5 var(--font-display);text-transform:uppercase;letter-spacing:.03em}
#message-form input,#message-form select,#message-form textarea{display:block;width:100%;min-height:48px;margin-top:7px;padding:12px 14px;border:2px solid #a8a9a0;border-radius:10px;background:#fbf9f3;color:var(--ink);font:500 16px/1.4 var(--font-body);text-transform:none;letter-spacing:0;transition:border-color .2s,box-shadow .2s}
#message-form textarea{resize:vertical;min-height:110px;max-height:260px}
#message-form input::placeholder,#message-form textarea::placeholder{color:#7b7e86}
#message-form input:focus,#message-form select:focus,#message-form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--lime)}
#message-form [aria-invalid=true]{border-color:var(--red)}
.form-note{margin-top:14px;font-size:12.5px;color:#5c5f67}
.form-feedback{margin-top:10px;font-size:14px;line-height:1.6}
.form-feedback a{text-decoration:underline}
#message-form .message-label{margin-bottom:6px}
.char-count{margin:0 0 16px;text-align:right;font:700 12px/1 var(--font-body);color:#6a6d74;font-variant-numeric:tabular-nums}
.char-count.is-near{color:var(--red-ink)}
.hp-field{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.form-actions .form-note{max-width:290px;margin-top:0;line-height:1.45}
.form-submit .spinner{display:none;width:17px;height:17px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.form-submit[aria-busy=true]{opacity:1;cursor:progress}
.form-submit[aria-busy=true] .spinner{display:block}
.form-submit[aria-busy=true] .i-send{display:none}
.form-submit:not([aria-busy=true]):hover .i-send{animation:plane .6s var(--ease-out)}
@keyframes plane{0%{translate:0 0}45%{translate:5px -5px;opacity:0}46%{translate:-5px 5px}100%{translate:0 0;opacity:1}}
#message-form.is-sending input,#message-form.is-sending select,#message-form.is-sending textarea{opacity:.6;pointer-events:none}
.form-error{margin-top:16px;padding:16px 18px;border:2px solid var(--red-ink);border-radius:12px;background:#fbeee8}
.form-error.is-in{animation:rise .5s var(--ease-out)}
.fe-title{font:400 15px/1.2 var(--font-display);text-transform:uppercase;color:var(--red-ink)}
.fe-text{margin-top:6px;font-size:14.5px;line-height:1.55;color:#2a2c31}
.fe-actions{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:12px}
.fe-copy.is-copied{--fill:var(--green)}
.fe-owner{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--ink);color:var(--lime);font:600 12.5px/1.55 var(--font-body)}
/* The envelope: who the message goes to, with a live subject line, an airmail border, a stamp, and a postmark */
.envelope{position:relative;margin:2px 0 22px;padding:16px 156px 16px 18px;border-radius:12px;background:#fbf9f3}
.envelope::before{content:"";position:absolute;inset:0;padding:5px;border-radius:inherit;background:repeating-linear-gradient(-45deg,#e8452c 0 10px,transparent 10px 16px,#2a6fdb 16px 26px,transparent 26px 32px);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.env-lines{display:grid;gap:8px;margin:0}
.env-lines div{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:baseline;gap:10px}
.env-lines dt{font:400 10px/1.4 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:#6a6d74}
.env-lines dd{margin:0;font:600 14.5px/1.4 var(--font-body);color:var(--ink);overflow-wrap:anywhere}
.env-addr{font-weight:500;color:#5c5f67}
.env-tag{font-weight:600;color:#9a9c9f}
.env-stamp{position:absolute;top:12px;right:18px;padding:5px;border:2px dashed rgba(20,21,25,.22);background:#fff;rotate:5deg;box-shadow:0 3px 6px rgba(0,0,0,.12)}
.env-stamp img{display:block;width:52px;height:52px;border-radius:8px}
.env-mark{position:absolute;top:22px;right:78px;display:grid;place-items:center;width:62px;height:62px;border:2px solid rgba(42,111,219,.55);border-radius:50%;font:400 8.5px/1.15 var(--font-display);letter-spacing:.05em;text-transform:uppercase;text-align:center;color:rgba(42,111,219,.8);rotate:-14deg;pointer-events:none}
.env-mark::after{content:"";position:absolute;left:-26px;right:-4px;top:50%;height:12px;margin-top:-6px;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(42,111,219,.35) 3px 4.5px,transparent 4.5px 6px);-webkit-mask:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);mask:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent)}
.sent-receipt{max-width:440px;margin:22px auto 0;padding:10px 18px;border:2px dashed #b2b0a5;border-radius:12px;background:#fbf9f3;text-align:left}
.sent-receipt div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px dashed #d6d2c6}
.sent-receipt div:last-child{border-bottom:0}
.sent-receipt dt{font:400 10px/1.7 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:#6a6d74}
.sent-receipt dd{margin:0;font:600 14px/1.45 var(--font-body);color:var(--ink);overflow-wrap:anywhere}
.btn-ghost{--fill:transparent;color:var(--ink)}
.btn-ghost:hover{--fill:var(--ink);color:var(--paper)}
.message-sent{text-align:center;padding-block:clamp(36px,6vw,60px)}
.sent-stamp{display:inline-grid;place-items:center;align-content:center;gap:4px;width:136px;height:136px;border:5px solid var(--red-ink);border-radius:50%;color:var(--red-ink);font:400 24px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;rotate:-12deg;box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 7px var(--red-ink);opacity:.92}
.sent-stamp .i{width:34px;height:34px;stroke-width:3}
.message-sent h2{margin-top:24px;font:400 clamp(34px,5.5vw,52px)/.95 var(--font-display);text-transform:uppercase}
.message-sent h2:focus{outline:none}
.sent-text{max-width:430px;margin:14px auto 0;font-size:16px;line-height:1.6;color:#4c4f56;overflow-wrap:anywhere}
.sent-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.message-sent.is-in .sent-stamp{animation:stamp .65s var(--ease-out) both}
.message-sent.is-in h2,.message-sent.is-in .sent-text,.message-sent.is-in .sent-receipt,.message-sent.is-in .sent-actions{animation:rise .6s var(--ease-out) backwards}
.message-sent.is-in h2{animation-delay:.2s}
.message-sent.is-in .sent-text{animation-delay:.28s}
.message-sent.is-in .sent-receipt{animation-delay:.36s}
.message-sent.is-in .sent-actions{animation-delay:.44s}
@keyframes stamp{0%{opacity:0;scale:2.3;rotate:-36deg}55%{opacity:1;scale:.9;rotate:-9deg}75%{scale:1.05}100%{opacity:.92;scale:1;rotate:-12deg}}
.toast{position:fixed;left:50%;bottom:28px;z-index:120;max-width:calc(100% - 32px);padding:13px 20px;border:3px solid var(--sticker-edge);border-radius:12px;background:var(--lime);color:var(--ink);font:400 12px/1.4 var(--font-display);text-transform:uppercase;text-align:center;box-shadow:var(--shadow-sticker);opacity:0;pointer-events:none;transform:translate(-50%,30px) rotate(-2deg);transition:opacity .25s,transform .45s var(--ease-spring)}
.toast.is-visible{opacity:1;transform:translate(-50%,0) rotate(-2deg)}

/* ---------- Motion: reveals and intro ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{0%{opacity:0;translate:0 44px}100%{opacity:1;translate:0 0}}
@keyframes drop{0%{opacity:0;translate:0 -80px;rotate:-7deg}65%{opacity:1}100%{opacity:1;translate:0 0;rotate:0deg}}
@keyframes slap{0%{opacity:0;scale:1.5;rotate:12deg}55%{opacity:1;scale:.94;rotate:-1deg}80%{scale:1.03}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes char-in{0%{opacity:0;translate:0 .5em;rotate:14deg;scale:.4}70%{opacity:1;scale:1.12}100%{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes write{from{clip-path:inset(-30% 104% -30% -6%)}to{clip-path:inset(-30% -6% -30% -6%)}}
.reveal-ready [data-reveal]:not(.is-in){opacity:0}
[data-reveal].is-in{animation:rise .9s var(--ease-out) var(--d,0s) backwards}
[data-reveal=drop].is-in{animation-name:drop;animation-duration:1s}
[data-reveal=slap].is-in{animation-name:slap;animation-duration:.8s}
[data-split] .char{display:inline-block}
.reveal-ready [data-split]:not(.is-in) .char{opacity:0}
[data-split].is-in .char{animation:char-in .7s var(--ease-out) calc(var(--i) * 45ms) backwards}
.reveal-ready [data-write]:not(.is-in){clip-path:inset(-30% 104% -30% -6%)}
[data-write].is-in{animation:write 1s cubic-bezier(.55,.1,.35,1) .35s backwards}

.intro .hero .name-tag,.intro .hero-role,.intro .hero-tags,.intro .hero-lede,.intro .hero-actions,.intro .polaroid,.intro .hs-note,.intro .hs,.intro .hs-disc,.intro .on-air{opacity:0}
.intro-play .on-air{animation:slap .7s var(--ease-out) 1.3s backwards}
.intro-play .hero .name-tag{animation:slap .85s var(--ease-out) .1s backwards}
.intro-play .nt-name{animation:write-name 1.05s cubic-bezier(.55,.1,.35,1) .55s backwards}
.intro-play .hero-role{animation:rise .9s var(--ease-out) .35s backwards}
.intro-play .hero-tags{animation:rise .9s var(--ease-out) .45s backwards}
.intro-play .hero-lede{animation:rise .9s var(--ease-out) .55s backwards}
.intro-play .hero-actions{animation:rise .9s var(--ease-out) .65s backwards}
.intro-play .hero-pins li{animation:slap .6s var(--ease-out) calc(1.05s + var(--k,0) * .1s) backwards}
.intro-play .polaroid{animation:drop 1.1s var(--ease-out) .25s backwards}
.intro-play .hs-note{animation:slap .7s var(--ease-out) 1.1s backwards}
.intro-play .hs,.intro-play .hs-disc{animation:slap .7s var(--ease-out) var(--intro-d,1s) backwards}

/* FX off: everything visible and still */
.fx-off .grain,.fx-off .hs-disc>svg,.fx-off .disc-core .i,.fx-off .np-disc,.fx-off .nav-list a::after,.fx-off .social-cards li,.fx-off .pin>.i,.fx-off .lt-colon,.fx-off .message-sent *,.fx-off .form-error,.fx-off .form-submit .i-send,.fx-off .on-air-lamp::before,.fx-off .track-now::before{animation:none!important}
.fx-off [data-reveal],.fx-off [data-split] .char,.fx-off [data-write],.fx-off .hero *,.fx-off .board .skill,.fx-off .track-card,.fx-off .crate-card,.fx-off .crate-featured *,.fx-off .record-label *{animation:none!important}
.fx-off .cursor{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav-list{gap:14px}
  .nav-list a{font-size:12px}
  .hs-award{left:44%}
  .hs-red{top:calc(var(--header-h) + 440px)}
}
@media (max-width:1040px){
  :root{--header-h:70px}
  .menu-toggle{display:block}
  .nav-cta{display:none}
  .primary-nav{position:fixed;inset:0;z-index:-1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;align-items:center;gap:28px 12px;padding:96px max(28px,8vw) max(40px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background-color:var(--bg-0);background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px);visibility:hidden;clip-path:circle(0% at calc(100% - 46px) 36px);transition:clip-path .7s var(--ease-in-out),visibility 0s linear .7s}
  .primary-nav.is-open{visibility:visible;clip-path:circle(150% at calc(100% - 46px) 36px);transition:clip-path .7s var(--ease-in-out),visibility 0s}
  .nav-list{grid-column:1/-1;flex-direction:column;align-items:flex-start;gap:4px}
  .primary-nav li{opacity:0;translate:0 30px;transition:opacity .45s,translate .6s var(--ease-out)}
  .primary-nav.is-open li{opacity:1;translate:0 0;transition-delay:calc(var(--i) * 55ms + .2s)}
  .nav-list a{gap:16px;padding:8px 0;font:400 clamp(34px,min(7.5vw,6.4vh),60px)/1 var(--font-display);color:var(--paper)}
  .nav-list a::after{display:none}
  .nav-no{display:inline-block;font:800 13px/1 var(--font-body);color:var(--lime);letter-spacing:.05em}
  .menu-note{display:block;grid-column:2;grid-row:2;align-self:end;margin-bottom:4px;font:400 22px/1.1 var(--font-marker);color:var(--pink);transform:rotate(-6deg);text-align:right}
  .menu-social{grid-column:1;grid-row:2;align-self:end;display:flex;gap:12px}
  .menu-social .pin{width:46px;height:46px}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  .hs-blue{right:2%}
  .hs-disc{width:160px;height:160px;right:calc(-1 * var(--gutter) - 60px)}
  .hs-red{display:none}
  .lcd-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lcd:nth-child(3){border-left:0}
  .lcd:nth-child(n+3){border-top:1px solid rgba(255,255,255,.06)}
  .about-grid{grid-template-columns:minmax(0,1fr)}
  .note-wrap{max-width:460px;margin-left:auto;margin-top:0}
  .path-grid{grid-template-columns:minmax(0,1fr)}
  .path-grid{row-gap:72px}
  .deck-wrap{max-width:560px;width:100%;margin-inline:auto}
  .polaroid-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project:nth-child(3n+2){margin-top:0}
  .project:nth-child(even){--rot:1.6deg;margin-top:clamp(0px,3vw,30px)}
  .crate-layout{grid-template-columns:minmax(0,1fr)}
  .crate-stage{max-width:640px;width:100%;margin-inline:auto}
  .singles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .graffiti{max-width:720px}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:760px){
  .section-head{flex-direction:column;gap:14px}
  .section-intro{padding-top:0}
  .speech::before{display:none}
  .hero{padding-top:calc(var(--header-h) + 36px)}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .name-tag{width:calc(100% - 8px);margin-inline:4px}
  .hero-art{padding-top:36px}
  .polaroid{width:min(84%,320px)}
  .hs-note{left:0;bottom:60px}
  .hs-paper{display:none}
  .hs-award{left:auto;right:-2px;top:calc(var(--header-h) + 14px);font-size:10px}
  .hs-blue{display:none}
  .hs-pink{right:1%;top:auto;bottom:clamp(560px,150vw,700px);width:58px;height:58px;font-size:11px}
  .hs-disc{width:130px;height:130px;right:-62px;top:auto;bottom:clamp(380px,100vw,520px)}
  .hs-disc text{font-size:17px}
  .disc-core{width:46px;height:46px}
  .disc-core .i{width:22px;height:22px}
  .hero-actions .btn{flex:1 1 auto}
  .lcd-value{height:48px}
  .lcd-label{font-size:10.5px}
  .tape-lime{margin-top:-18px}
  .about-cols{grid-template-columns:minmax(0,1fr)}
  .tape-corner-l{left:-14px}
  .tape-corner-r{right:-14px}
  .note-wrap{max-width:none;margin-inline:8px}
  .track{grid-template-columns:40px minmax(0,1fr);padding:16px 8px}
  .track-end{grid-column:2;justify-content:flex-start;margin-top:-4px}
  .track-eq{order:2}
  .polaroid-grid{grid-template-columns:minmax(0,1fr);max-width:440px;margin-inline:auto}
  .project:nth-child(n){--rot:-1.4deg;margin-top:0}
  .project:nth-child(even){--rot:1.4deg}
  .board{min-height:520px}
  .toolkit-head{align-items:flex-start}
  .skill{padding:10px 14px;font-size:13px;border-width:2.5px}
  .sh-pill{padding:10px 16px}
  .sh-tag{padding:10px 15px 10px 27px}
  .sh-tag::before{left:10px;width:7px;height:7px}
  .f-marker{font-size:16px}
  .sh-circle{width:82px;height:82px;padding:6px;font-size:12px}
  .can{width:25px;height:40px}
  .cans{gap:7px}
  html.chrome-hidden .now-playing{transform:translateY(160%)}
  .crate-stage{aspect-ratio:1.25}
  .crate-featured{width:50%}
  .crate-rack{left:47%}
  .singles{grid-template-columns:minmax(0,1fr);max-width:440px;margin-inline:auto}
  .single-cover{margin-right:16%}
  .contact h2{font-size:clamp(38px,10.5vw,60px)}
  .contact-actions .btn{flex:1 1 auto}
  .wall-frame{aspect-ratio:4/3.2}
  .sp-label{width:100%}
  .sp-actions{margin-left:0}
  .note-spray{display:none}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;column-gap:20px}
  .footer-talk{grid-column:1/-1}
  .footer-bottom{flex-direction:column;align-items:flex-start;padding-bottom:110px}
  .now-playing{left:12px;bottom:12px;padding-right:14px}
  .to-top{right:12px;bottom:12px;width:52px;height:52px}
  .form-row{grid-template-columns:minmax(0,1fr);gap:0}
  .project-meta-list{grid-template-columns:minmax(0,1fr);gap:14px}
  .float-st{display:none}
}
@media (max-width:560px){
  .envelope{padding:14px 78px 14px 14px}
  .env-addr{display:block;font-size:12.5px}
  .env-mark{display:none}
  .env-stamp{top:10px;right:12px}
  .env-stamp img{width:44px;height:44px}
  .env-lines div{grid-template-columns:56px minmax(0,1fr)}
  .sent-receipt div{grid-template-columns:74px minmax(0,1fr)}
  .social-cards{grid-template-columns:minmax(0,1fr);gap:10px}
  .social-card{flex-direction:row;align-items:center;gap:14px;padding:11px 14px}
  .sc-top{display:contents}
  .sc-text{order:1}
  .sc-arrow{order:2;margin-left:auto;flex:none}
  .sc-icon{width:42px;height:42px}
}
@media (max-width:420px){
  .menu-note{font-size:16px}
  .menu-social{gap:10px}
  .menu-social .pin{width:42px;height:42px}
  .menu-social .pin>.i{width:20px;height:20px}
  .nt-name{font-size:clamp(58px,19vw,80px)}
  .hero-role{font-size:clamp(22px,7vw,28px)}
  .btn{padding-inline:15px;font-size:12px}
  .np-text small{display:none}
  .now-playing{padding:5px 12px 5px 5px;gap:9px}
  .np-disc{width:36px;height:36px}
}
@media (max-width:360px){
  .menu-note{display:none}
  .nav-wrap{gap:8px}
  .nav-tools{gap:6px}
  .logo{font-size:25px}
  .pill-toggle{padding:3px}
  .pill-toggle span{width:30px;height:30px;font-size:9px}
  .nav-tools .icon-btn,.menu-toggle{width:40px;height:40px}
  .menu-toggle span{left:10px;right:10px}
  .menu-toggle span:first-child{top:14px}
  .menu-toggle span:last-child{top:22px}
  .menu-toggle[aria-expanded=true] span:first-child,.menu-toggle[aria-expanded=true] span:last-child{top:18px}
}

/* Reduced motion keeps every interaction but drops the movement. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

@media print{
  body{background:#fff;color:#000}
  .grain,.cursor,.site-header,.hero-stickers,.hero-art,.tape-marquee,.ghost-word,.deck-wrap,.board-actions,.crate-stage,.crate-nav,.graffiti,.now-playing,.to-top,dialog,.toast,.filters,.work-count,.hand-note,.single-cover,.hazard{display:none!important}
  .section,.hero{padding:24px 0;background:#fff!important;color:#000}
  .panel,.learning{margin-top:0;border-radius:0}
  .wall{background:#fff!important}
  .wall::before,.wall-light{display:none}
  .name-tag,.paper,.project-open,.sticky-note{box-shadow:none!important;transform:none!important}
  .js .track-card:not(.is-active),.js .crate-card:not(.is-active){display:block}
  .section-title,.hero-role,.contact h2,.single h3{color:#000;text-shadow:none}
  .lcd-panel{background:#fff;border-color:#000}
  .polaroid-grid{grid-template-columns:repeat(3,1fr)}
  .social-pins,.local-time,.sc-icon,.sc-arrow,.footer-col .ext{display:none!important}
  .social-card{border:1px solid #000;color:#000;transform:none!important;box-shadow:none!important}
  .social-card::after{content:attr(href);font-size:11px;overflow-wrap:anywhere}
  .sc-handle{color:#333}
}