/* served by k.  —  one visual world, single theme by choice.
   Layout idea: a record player you operate (work), a notebook you leaf through (about),
   a pool table you play (contact). Aubergine room, pink type, cream paper. */
:root{
  color-scheme: dark;
  --aub:#36211e;        /* the portfolio's own aubergine */
  --aub-deep:#261614;
  --aub-lift:#4a2e2a;
  --pink:#f6a5b7;
  --cream:#f2ead8;
  --paper:#efe5cc;
  --ink:#2a1a17;
  --red:#d92b25;
  --felt:#1d5a44;
  --f-display:'Instrument Serif','Iowan Old Style','Times New Roman',serif;
  --f-body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --f-mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --f-hand:'Caveat','Bradley Hand','Segoe Print',cursive;
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-io:cubic-bezier(.65,0,.2,1);
  --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--aub);color:var(--cream);font-family:var(--f-body);font-size:17px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:2px}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gut)}
.skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--pink);color:var(--ink);padding:10px 14px;font-family:var(--f-mono);font-size:13px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* ---------- header ---------- */
.top{position:absolute;left:0;right:0;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px var(--gut)}
.logo{display:inline-flex;align-items:baseline;text-decoration:none;color:var(--pink);font-size:30px;line-height:1;white-space:nowrap}
.logo span{display:inline-block;transition:transform .5s var(--ease)}
.logo .gap{width:.32em}
.logo .l1{font-family:'Bowlby One',var(--f-body);font-size:.92em}
.logo .l2{font-family:var(--f-display);font-style:italic;font-size:1.15em}
.logo .l3{font-family:'Pinyon Script',cursive;font-size:1.5em;margin:0 -.02em 0 .02em}
.logo .l4{font-family:var(--f-mono);font-size:.8em}
.logo .l5{font-family:var(--f-display);font-size:1.1em}
.logo .l6{font-family:'Bowlby One',var(--f-body);font-size:.7em}
.logo .l7{font-family:var(--f-display);font-style:italic;font-size:1.15em}
.logo .l8{font-family:var(--f-mono);font-size:.82em}
.logo .l9{font-family:'Pinyon Script',cursive;font-size:1.9em;margin-right:.04em}
.logo .l10{font-family:'Bowlby One',var(--f-body)}
.logo:hover span:nth-child(odd){transform:translateY(-3px) rotate(-4deg)}
.logo:hover span:nth-child(even){transform:translateY(2px) rotate(3deg)}
.nav{display:flex;gap:clamp(12px,2.4vw,34px);font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.nav a:hover{color:var(--pink);border-color:var(--pink)}

/* ---------- hero / player ---------- */
.hero{position:relative;padding:104px var(--gut) 64px;background:
  radial-gradient(1200px 700px at 28% 46%,#5a3832 0%,transparent 62%),var(--aub)}
.hero-grid{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,84px);align-items:center}
.hero-deck{min-width:0;max-width:640px;width:100%;justify-self:center}
.eyebrow{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,4.5vw,70px);line-height:.95;letter-spacing:-.015em;margin-top:10px;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--pink)}
.hero-role{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-top:14px;opacity:.85}
.shelf-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:clamp(20px,2.4vw,32px);padding-bottom:10px;border-bottom:1px solid #f2ead833;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.shelf-head h2{font:inherit;letter-spacing:inherit}
.shelf-head span{opacity:.7}

.deck{position:relative;width:100%;aspect-ratio:1.22/1;border-radius:3.4% / 4.1%;container-type:inline-size;
  background:linear-gradient(158deg,#f6eedb 0%,#e9dfc6 45%,#d9cdb0 100%);
  box-shadow:inset 0 2px 0 #fffc,inset 0 -7px 0 #b3a27c,inset 0 0 0 1px #0002,0 50px 90px -34px #000d,0 14px 28px -10px #0009}
.deck::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.deck-badge{position:absolute;left:5%;top:4.4%;font-family:var(--f-mono);font-size:1.75cqw;letter-spacing:.16em;text-transform:uppercase;color:#6b5d49}
.platter{position:absolute;left:6%;top:50%;width:62%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;
  background:repeating-conic-gradient(#cfc8b8 0 1.2deg,#7d776c 1.2deg 2.4deg);
  box-shadow:0 0 0 .5cqw #2a2320,0 1.6cqw 3cqw #0007,inset 0 0 0 .3cqw #fff6;transition:box-shadow .3s}
.platter.ready{box-shadow:0 0 0 .5cqw #2a2320,0 0 0 1.3cqw var(--pink),0 0 6cqw 1cqw #f6a5b788}
.mat{position:absolute;inset:3.2%;border-radius:50%;background:repeating-radial-gradient(circle,#191311 0 .5%,#251c19 .5% 1%);box-shadow:inset 0 0 3cqw #000}
.disc-slot{position:absolute;inset:7%}
.spindle{position:absolute;left:50%;top:50%;width:3.4%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 30%,#fff,#bdb6aa 45%,#5d564e);box-shadow:0 1px 3px #000a}

.disc{position:absolute;inset:0;border-radius:50%;cursor:pointer;filter:drop-shadow(0 .5cqw .8cqw #0009)}
.disc-art,.disc-sheen{position:absolute;inset:0;border-radius:50%;
  -webkit-mask:radial-gradient(circle,transparent 0 5.4%,#000 5.8%);mask:radial-gradient(circle,transparent 0 5.4%,#000 5.8%)}
.disc-art{background-size:cover;background-position:center;background-color:#222}
.disc-art::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,transparent 0 5.6%,#fffc 5.9% 6.6%,#e8e8e866 6.6% 14.6%,#fffa 14.6% 15.3%,#0000 15.6%)}
.disc-sheen{pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 25deg,#fff0 0deg,#ffffff66 16deg,#ffd0ee66 27deg,#c6ecff55 38deg,#fff0 58deg,#fff0 180deg,#ffffff55 198deg,#dbffd955 212deg,#fff0 236deg,#fff0 360deg)}
.disc.spin .disc-art{animation:spin 2.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.arm{position:absolute;right:9.5%;top:9%;width:7%;height:57%;z-index:5;pointer-events:none;transform-origin:50% 13%;transform:rotate(0deg);transition:transform 1.1s var(--ease-io)}
.arm.on{transform:rotate(40deg)}
.arm i{position:absolute;display:block}
.arm-weight{left:16%;top:-4%;width:68%;height:11%;border-radius:18%;background:linear-gradient(90deg,#1f1a18,#5d544e 50%,#1f1a18)}
.arm-pivot{left:0;top:5.5%;width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#bdb6aa 42%,#655e55);box-shadow:0 .5cqw 1cqw #0006}
.arm-tube{left:41%;top:12%;width:18%;height:76%;border-radius:99px;background:linear-gradient(90deg,#8e877b,#f6f2e8 45%,#8e877b);box-shadow:.5cqw .7cqw 1cqw #0004}
.arm-head{left:12%;bottom:0;width:76%;height:13.5%;border-radius:14% 14% 26% 26%;background:linear-gradient(180deg,#f9b7c6,var(--pink) 60%,#d98297);box-shadow:.5cqw .8cqw 1.2cqw #0006}

.deck-led{position:absolute;right:4.5%;bottom:5.5%;width:25%;height:6.4%;border-radius:.6cqw;background:#17110f;box-shadow:inset 0 .2cqw .5cqw #000;overflow:hidden;display:flex;align-items:center}
.deck-led span{display:inline-block;white-space:nowrap;padding-left:100%;font-family:var(--f-mono);font-size:1.75cqw;letter-spacing:.12em;color:var(--pink);text-shadow:0 0 .8cqw #f6a5b7aa;animation:marq 9s linear infinite}
@keyframes marq{to{transform:translateX(-100%)}}
.deck-btns{position:absolute;right:4.5%;bottom:19.5%;width:25%;display:flex;justify-content:space-between}
.knob{width:44%;aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;padding:0;position:relative;
  background:radial-gradient(circle at 35% 28%,#fff,#e6dcc4 38%,#b8a987);box-shadow:0 .5cqw .9cqw #0007,inset 0 -.3cqw .5cqw #0003;transition:transform .15s}
.knob span{position:absolute;left:50%;top:108%;transform:translateX(-50%);font-family:var(--f-mono);font-size:1.5cqw;letter-spacing:.12em;text-transform:uppercase;color:#6b5d49}
.knob:not(:disabled):active{transform:scale(.94)}
.knob:disabled{cursor:default;filter:saturate(.4) brightness(.93)}
.knob::after{content:"";position:absolute;left:50%;top:18%;width:8%;height:26%;transform:translateX(-50%);border-radius:9px;background:#6b5d49}
.knob--eject:not(:disabled){background:radial-gradient(circle at 35% 28%,#ffe3ea,var(--pink) 45%,#cf6f86)}

.np{min-height:128px;margin-top:22px;display:grid;grid-template-columns:auto 1fr auto;gap:8px 20px;align-items:start}
.np-empty{grid-column:1/-1;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;opacity:.8;padding-top:6px}
.np-no{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;color:var(--pink);padding-top:10px;white-space:nowrap}
.np-main{min-width:0}
.np-title{font-family:var(--f-display);font-size:clamp(30px,3.2vw,46px);line-height:1;font-weight:400}
.np-title em{color:var(--pink)}
.np-meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-top:8px}
.np-short{margin-top:8px;max-width:52ch;opacity:.92}
.np > *{animation:npin .7s var(--ease) both}
@keyframes npin{from{opacity:0;transform:translateY(10px)}}
.btn{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--pink);background:var(--pink);color:var(--ink);padding:12px 18px;border-radius:99px;cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease),background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--pink)}
.np .btn{margin-top:6px}

/* shelf of sleeves */
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,26px) clamp(20px,2.6vw,36px);padding:22px 9% 4px 0;max-width:600px}
.sleeve{position:relative;aspect-ratio:1;border:0;background:none;padding:0;cursor:grab;container-type:inline-size;touch-action:pan-x pan-y;
  transform:rotate(var(--r,0deg));transition:transform .5s var(--ease)}
.sleeve:nth-child(4n+1){--r:-1.6deg}.sleeve:nth-child(4n+2){--r:1.1deg}.sleeve:nth-child(4n+3){--r:-.6deg}.sleeve:nth-child(4n){--r:1.8deg}
.sleeve:hover,.sleeve:focus-visible{transform:rotate(0deg) translateY(-5px);z-index:2}
.sleeve-disc{position:absolute;top:4%;left:8%;width:92%;height:92%;border-radius:50%;transition:transform .55s var(--ease);filter:drop-shadow(0 2px 4px #0008)}
.sleeve:hover .sleeve-disc,.sleeve:focus-visible .sleeve-disc{transform:translateX(26%) rotate(50deg)}
.sleeve.out .sleeve-disc,.sleeve.lift .sleeve-disc{visibility:hidden}
.sleeve.out .cover{filter:brightness(.55) saturate(.7)}
.sleeve.out::after{content:"playing";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--f-mono);font-size:9cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);z-index:3}
.cover{position:absolute;inset:0;overflow:hidden;border-radius:2px;background:var(--c-bg);color:var(--c-ink);text-align:left;
  box-shadow:0 10px 22px -8px #000c,0 2px 4px #0007,inset 0 0 0 1px #fff2}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#fff3 0%,#fff0 28%,#fff0 70%,#0003 100%);box-shadow:inset 2px 0 0 #fff3,inset 5px 0 6px -3px #0005}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.cover-no,.cover-cat{position:absolute;font-family:var(--f-mono);font-size:5.4cqw;letter-spacing:.1em;text-transform:uppercase;z-index:2}
.cover-no{left:7cqw;top:6cqw}
.cover-cat{right:7cqw;top:6cqw;max-width:60cqw;text-align:right;line-height:1.15}
.cover-title{position:absolute;z-index:2;font-family:var(--f-display);line-height:.9;font-size:15cqw;text-wrap:balance}
.cover.long .cover-title{font-size:11.4cqw}
/* style: full */
.cover--full::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0008 0%,#0000 32%,#0000 46%,#000c 100%)}
.cover--full .cover-title{left:7cqw;right:7cqw;bottom:7cqw;font-style:italic}
/* style: frame */
.cover--frame img{inset:17cqw 9cqw auto 9cqw;width:82cqw;height:50cqw}
.cover--frame .cover-title{left:9cqw;right:9cqw;bottom:7cqw;font-size:12.5cqw}
.cover--frame.long .cover-title{font-size:10cqw}
/* style: split */
.cover--split img{inset:46% 0 0 0;height:54%}
.cover--split .cover-title{left:7cqw;right:7cqw;top:17cqw}
.cover--split .cover-cat{display:none}
.cover--split .cover-no{left:auto;right:7cqw}
/* style: type */
.cover--type::before{content:"";position:absolute;inset:0;z-index:1;background:var(--c-bg);mix-blend-mode:multiply;opacity:.55}
.cover--type .cover-title{left:6cqw;right:6cqw;top:50%;transform:translateY(-50%);text-align:center;font-size:21cqw;font-style:italic;text-shadow:0 1cqw 4cqw #0006}
.cover--type.long .cover-title{font-size:13cqw}
.cover--type .cover-no{left:auto;right:6cqw;top:6cqw;width:15cqw;height:15cqw;border-radius:50%;background:var(--c-ink);color:var(--c-bg);display:grid;place-items:center;letter-spacing:0}
.cover--type .cover-cat{left:7cqw;right:auto;top:auto;bottom:6cqw;text-align:left}

.fly{position:fixed;z-index:200;pointer-events:none;border-radius:50%;container-type:inline-size;will-change:transform}
.fly .disc{cursor:grabbing}

/* ---------- index ---------- */
.index{padding:clamp(56px,8vw,120px) 0;background:linear-gradient(180deg,var(--aub) 0%,var(--aub-deep) 100%)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,40px)}
.sec-head h2{font-family:var(--f-display);font-weight:400;font-size:clamp(46px,7vw,112px);line-height:.9;letter-spacing:-.015em;font-style:italic;color:var(--pink)}
.sec-head p{font-family:var(--f-mono);font-size:13px;letter-spacing:.03em;max-width:44ch;opacity:.82;padding-bottom:10px}
.tracks{border-top:1px solid #f2ead833}
.track{border-bottom:1px solid #f2ead833}
.track button{width:100%;display:grid;grid-template-columns:3.2ch 58px minmax(0,1fr) auto;gap:clamp(12px,2vw,28px);align-items:center;background:none;border:0;padding:12px 8px;text-align:left;cursor:pointer;transition:background .25s,color .25s,padding .35s var(--ease)}
.track button:hover,.track button:focus-visible{background:var(--pink);color:var(--ink);padding-left:20px}
.track-no{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;opacity:.7;font-variant-numeric:tabular-nums}
.track-thumb{width:58px;height:58px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 1px #0004;
  -webkit-mask:radial-gradient(circle,transparent 0 9%,#000 10%);mask:radial-gradient(circle,transparent 0 9%,#000 10%);transition:transform 1.2s var(--ease)}
.track button:hover .track-thumb{transform:rotate(200deg)}
.track-title{font-family:var(--f-display);font-size:clamp(24px,3vw,40px);line-height:1.05}
.track-title{min-width:0;overflow-wrap:anywhere}
.track-title small{font-family:var(--f-body);font-size:14px;line-height:1.3;opacity:.75;margin-left:12px}
.track-cat{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:right;opacity:.8}

/* ---------- notebook ---------- */
.about{padding:clamp(56px,8vw,120px) 0 clamp(64px,9vw,130px);background:
  radial-gradient(900px 620px at 50% 58%,#6a4038 0%,transparent 70%),linear-gradient(180deg,var(--aub-deep),#3b2420 40%,#2c1a17)}
.book-stage{perspective:2400px;display:flex;justify-content:center;padding:10px 0 6px}
.book{position:relative;width:min(1000px,100%);aspect-ratio:1000/660;transform-style:preserve-3d;transition:transform 1s var(--ease-io);outline-offset:14px}
.book.closed{transform:translateX(-25%)}
.book.ended{transform:translateX(25%)}
.book.single{width:min(400px,86vw);aspect-ratio:400/560}
.book.single.closed,.book.single.ended{transform:none}
.sheet{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.05s var(--ease-io);cursor:pointer;touch-action:pan-y}
.book.single .sheet{left:0;width:100%}
.sheet.flipped{transform:rotateY(-180deg)}
.book.single .sheet.flipped{transform:rotateY(-120deg);opacity:0;pointer-events:none;transition:transform 1.05s var(--ease-io),opacity .3s .6s}
.sheet.drag{transition:none}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;container-type:inline-size;color:var(--ink);
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  border-radius:0 6px 6px 0;box-shadow:inset 14px 0 22px -14px #0006,0 12px 30px -12px #000a}
.face--back{transform:rotateY(180deg);border-radius:6px 0 0 6px;box-shadow:inset -14px 0 22px -14px #0006,0 12px 30px -12px #000a}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0004,#0000 22%);opacity:0;transition:opacity .5s}
.sheet.turning .face::after{opacity:1}
.face.ruled{background-image:repeating-linear-gradient(180deg,transparent 0 6.9cqw,#7d9bb655 6.9cqw 7.1cqw),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.face.dots{background-image:radial-gradient(circle,#8a745a66 .28cqw,transparent .34cqw);background-size:5cqw 5cqw}
.pg{position:absolute;inset:0;padding:11cqw 10cqw 12cqw;display:flex;flex-direction:column;gap:4cqw}
.pg-no{position:absolute;bottom:4.4cqw;font-family:var(--f-mono);font-size:2.5cqw;letter-spacing:.1em;opacity:.55}
.face--front .pg-no{right:7cqw}.face--back .pg-no{left:7cqw}
.book.single .face--front .pg-no{right:7cqw}
.pg-hand{font-family:var(--f-hand);font-weight:700;font-size:11.5cqw;line-height:.95;color:var(--aub);transform:rotate(-2deg);transform-origin:left}
.pg-body{font-family:var(--f-display);font-size:5.9cqw;line-height:1.22;white-space:pre-line}
.pg.big .pg-body{font-size:7cqw;line-height:1.14}
.anno{position:relative;cursor:help;background:linear-gradient(transparent 62%,#f6a5b7aa 62%);border:0;padding:0;font:inherit;color:inherit;text-align:inherit;display:inline}
.anno-note{position:absolute;left:8cqw;right:8cqw;bottom:9cqw;font-family:var(--f-hand);font-size:6.2cqw;line-height:1;color:var(--red);transform:rotate(-3deg) translateY(8px);opacity:0;transition:opacity .35s,transform .45s var(--ease);pointer-events:none}
.anno-note::before{content:"↳ "}
.anno-note.on{opacity:1;transform:rotate(-3deg)}
.pg-note{font-family:var(--f-hand);font-size:6cqw;line-height:1;color:var(--red);transform:rotate(-4deg);align-self:flex-end;margin-top:auto;max-width:70%}
.doodle{position:absolute;right:8cqw;top:8cqw;width:20cqw;height:20cqw;color:var(--red);overflow:visible}
.doodle path,.doodle circle,.doodle rect{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);transition:stroke-dashoffset 1.6s .5s var(--ease-io)}
.face.seen .doodle path,.face.seen .doodle circle,.face.seen .doodle rect{stroke-dashoffset:0}
/* cover */
.face.cover-face{background:linear-gradient(135deg,#40201f,#2a1413);color:var(--pink);box-shadow:inset 0 0 0 1px #0006,inset 6cqw 0 6cqw -5cqw #0009,0 18px 40px -14px #000}
.face.cover-face::before{content:"";position:absolute;top:0;bottom:0;right:11cqw;width:4.4cqw;background:linear-gradient(90deg,#150b0a,#3a2523,#150b0a);box-shadow:0 0 3cqw #0008}
.cv{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:12cqw 22cqw 12cqw 12cqw}
.cv-k{font-family:'Pinyon Script',cursive;font-size:56cqw;line-height:.7;margin-top:6cqw}
.cv-sub{font-family:var(--f-mono);font-size:3.2cqw;letter-spacing:.3em;text-transform:uppercase}
.cv-label{align-self:flex-start;background:var(--paper);color:var(--ink);padding:3cqw 4cqw;transform:rotate(-2deg);box-shadow:0 2px 6px #0007}
.cv-label small{display:block;font-family:var(--f-mono);font-size:2.4cqw;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.cv-label b{font-family:var(--f-hand);font-size:6.6cqw;font-weight:700;line-height:1}
.cv-open{position:absolute;right:20cqw;top:12cqw;width:22cqw;height:22cqw;border-radius:50%;background:var(--pink);color:var(--aub);display:grid;place-items:center;text-align:center;font-family:var(--f-mono);font-size:2.9cqw;letter-spacing:.1em;text-transform:uppercase;transform:rotate(12deg);box-shadow:0 3px 8px #0007;animation:wob 3.4s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(4deg) scale(1.05)}}
.face.back-face{background:linear-gradient(135deg,#c9b48e,#b7a079)}
.bk{position:absolute;inset:0;display:grid;place-items:center}
.bk span{font-family:var(--f-mono);font-size:3cqw;letter-spacing:.2em;text-transform:uppercase;color:#5c4a33;border:1.5px solid #5c4a33;border-radius:50%;width:38cqw;height:38cqw;display:grid;place-items:center;text-align:center;transform:rotate(-14deg);opacity:.75;padding:4cqw}
/* owner page */
.own{display:flex;flex-direction:column;gap:5.4cqw;margin-top:6cqw}
.own div{border-bottom:1.5px solid #2a1a1766;padding-bottom:1.2cqw}
.own small{display:block;font-family:var(--f-mono);font-size:2.5cqw;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.own b{font-family:var(--f-hand);font-size:8cqw;line-height:1.05;font-weight:700;color:var(--aub)}
/* list */
.pg-list{display:flex;flex-direction:column;gap:1.6cqw;font-family:var(--f-display);font-size:6.2cqw;line-height:1.1}
.pg-list li{display:flex;gap:3cqw;align-items:baseline}
.pg-list li::before{content:"✓";font-family:var(--f-hand);font-size:7.4cqw;color:var(--red);transform:rotate(-8deg);display:inline-block}
/* quotes */
.pg-quotes{display:flex;flex-direction:column;gap:4.6cqw}
.pg-quotes blockquote{margin:0;font-family:var(--f-display);font-style:italic;font-size:5.4cqw;line-height:1.16;padding-left:4cqw;border-left:.6cqw solid var(--pink)}
.pg-quotes cite{display:block;font-family:var(--f-mono);font-style:normal;font-size:2.5cqw;letter-spacing:.12em;text-transform:uppercase;margin-top:1.4cqw;opacity:.65}
/* photos */
.pg-photos{position:relative;flex:1}
.snap{position:absolute;width:45cqw;background:#fbf7ea;padding:2.4cqw 2.4cqw 0;box-shadow:0 3px 10px #0006;border:0;cursor:pointer;transition:transform .5s var(--ease);text-align:center}
.snap img{width:100%;aspect-ratio:4/3;object-fit:cover}
.snap span{display:block;font-family:var(--f-hand);font-size:4.8cqw;color:var(--aub);padding:1cqw 0 1.6cqw;line-height:1}
.snap::before{content:"";position:absolute;left:50%;top:-3cqw;width:18cqw;height:6cqw;transform:translateX(-50%) rotate(-3deg);background:#f6a5b7b0;box-shadow:0 1px 2px #0003}
.snap:nth-child(1){left:-3cqw;top:1cqw;transform:rotate(-5deg)}
.snap:nth-child(2){right:-4cqw;top:22cqw;transform:rotate(4deg)}
.snap:nth-child(3){left:5cqw;top:47cqw;transform:rotate(-2deg)}
.snap:hover,.snap:focus-visible{transform:rotate(0) scale(1.06);z-index:3}
/* stickers */
.pg-stickers{display:flex;flex-wrap:wrap;gap:2.6cqw 2.2cqw;align-content:flex-start}
.pg-stickers li{font-family:var(--f-mono);font-size:3.1cqw;letter-spacing:.06em;text-transform:uppercase;padding:2cqw 3cqw;border-radius:99px;border:1.5px solid var(--aub);transform:rotate(var(--sr,0deg));background:#fbf7ea}
.pg-stickers li:nth-child(3n){background:var(--pink);--sr:-3deg}
.pg-stickers li:nth-child(3n+1){--sr:2deg}
.pg-stickers li:nth-child(4n){background:var(--aub);color:var(--paper);--sr:-1.5deg}
/* blank page with peel sticker */
.peel{position:absolute;right:12cqw;bottom:16cqw;width:30cqw;height:30cqw;border:0;padding:0;background:none;cursor:pointer}
.peel-under{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--f-hand);font-size:6cqw;line-height:1;color:var(--red);transform:rotate(-8deg)}
.peel-top{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd0da,var(--pink) 60%,#e488a0);display:grid;place-items:center;font-family:var(--f-mono);font-size:3cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--aub);transform-origin:20% 20%;transition:transform .7s var(--ease),opacity .5s .2s;box-shadow:0 2px 6px #0005}
.peel.off .peel-top{transform:rotate(-70deg) translate(-30%,-90%) scale(.8);opacity:0}
.pg-link{align-self:flex-start;margin-top:2cqw;font-family:var(--f-mono);font-size:3cqw;letter-spacing:.1em;text-transform:uppercase;background:var(--aub);color:var(--paper);border:0;padding:3cqw 4.4cqw;border-radius:99px;cursor:pointer}
.pg-link:hover{background:var(--red)}
.book-ctrl{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:26px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.book-ctrl button{width:46px;height:46px;border-radius:50%;border:1px solid #f2ead866;background:none;cursor:pointer;font-size:18px;transition:background .2s,color .2s}
.book-ctrl button:hover:not(:disabled){background:var(--pink);color:var(--ink);border-color:var(--pink)}
.book-ctrl button:disabled{opacity:.3;cursor:default}
.book-ctrl span{min-width:11ch;text-align:center}

/* ---------- pool ---------- */
.contact{position:relative;padding:clamp(56px,8vw,120px) 0 clamp(48px,6vw,90px);background:
  radial-gradient(1000px 640px at 50% 62%,#274a3c 0%,transparent 70%),linear-gradient(180deg,#2c1a17,#131a17 30%,#0d1311)}
.pool-persp{perspective:1600px;perspective-origin:50% 20%}
.pool{position:relative;width:min(1120px,100%);aspect-ratio:2/1;margin:0 auto;transform-origin:50% 100%;will-change:transform;filter:drop-shadow(0 50px 50px #000a)}
.pool.portrait{width:min(440px,100%);aspect-ratio:9/15.4}
.pool canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;border-radius:2.6% / 5%}
.pool.portrait canvas{border-radius:5% / 2.9%}
.pool-number{position:absolute;left:50%;top:64%;transform:translateX(-50%);white-space:nowrap;text-align:center;animation:npin .9s var(--ease) both}
.pool.portrait .pool-number{top:60%}
.pool-number a{font-family:var(--f-display);font-style:italic;font-size:clamp(26px,4.6vw,60px);color:var(--cream);text-decoration:none;border-bottom:1px solid #f2ead877;font-variant-numeric:tabular-nums}
.pool-number a:hover{color:var(--pink);border-color:var(--pink)}
.paper{position:absolute;left:66%;top:14%;width:13%;aspect-ratio:1.5;border:0;padding:0;background:#fbf6e6;cursor:pointer;transform:rotate(9deg);
  box-shadow:0 10px 16px -6px #000a,0 2px 3px #0006;animation:drop 1.25s cubic-bezier(.3,.7,.3,1) both}
.pool.portrait .paper{left:56%;top:12%;width:30%}
@keyframes drop{0%{transform:translateY(-130vh) rotate(-70deg) scale(1.5);opacity:0}8%{opacity:1}70%{transform:translateY(0) rotate(14deg) scale(1)}84%{transform:translateY(-10px) rotate(7deg)}100%{transform:translateY(0) rotate(9deg)}}
.paper-fold{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#efe7d0,#fbf6e6)}
.paper-fold--l{left:0;box-shadow:inset -6px 0 8px -6px #0005}
.paper-fold--r{right:0;background:linear-gradient(270deg,#efe7d0,#fbf6e6)}
.paper-hint{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-hand);font-weight:700;font-size:clamp(15px,2vw,26px);color:var(--red);transform:rotate(-4deg)}
.paper:hover{transform:rotate(3deg) scale(1.08);transition:transform .35s var(--ease)}
.pool-ctrl{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:28px}
.sec-head--light h2{color:var(--cream)}
.card-veil{position:fixed;inset:0;z-index:150;background:#060a08cc;display:grid;place-items:center;padding:20px;animation:fade .4s both;perspective:1400px}
@keyframes fade{from{opacity:0}}
.card{position:relative;width:min(520px,100%);background:#fbf6e6;color:var(--ink);padding:clamp(28px,5vw,48px);transform-origin:50% 0;animation:unfold .9s var(--ease) both;
  background-image:linear-gradient(90deg,transparent 49.6%,#0000001c 50%,transparent 50.6%),linear-gradient(180deg,transparent 49.4%,#00000014 50%,transparent 50.6%);box-shadow:0 30px 60px -20px #000}
@keyframes unfold{0%{transform:rotateX(-88deg) scale(.5);opacity:0}55%{opacity:1}100%{transform:none}}
.card-x{position:absolute;right:10px;top:8px;width:40px;height:40px;border:0;background:none;font-size:26px;cursor:pointer;color:var(--ink)}
.card-hand{font-family:var(--f-hand);font-weight:700;font-size:30px;color:var(--red);transform:rotate(-3deg);transform-origin:left}
.card-name{font-family:var(--f-display);font-size:clamp(36px,7vw,56px);line-height:.95;margin-top:10px}
.card-role{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:10px;opacity:.75}
.card-rows{margin-top:26px;display:grid;gap:14px}
.card-rows div{display:grid;grid-template-columns:7ch 1fr;gap:12px;align-items:baseline;border-top:1px solid #2a1a1733;padding-top:12px}
.card-rows dt{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.card-rows dd{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;justify-content:space-between}
.card-rows a{font-family:var(--f-display);font-size:clamp(20px,4.4vw,27px);overflow-wrap:anywhere;text-decoration-thickness:1px;text-underline-offset:4px}
.card-rows a:hover{color:var(--red)}
.copy{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid #2a1a1766;background:none;border-radius:99px;padding:5px 10px;cursor:pointer;color:var(--ink)}
.copy:hover{background:var(--ink);color:#fbf6e6}

/* ---------- footer ---------- */
.foot{background:#0d1311;padding:34px 0 44px;border-top:1px solid #f2ead81f;font-size:15px}
.foot-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-name{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.7}
.foot-plain{font-family:var(--f-display);font-size:22px;line-height:1.35}
.foot-plain a{text-decoration-thickness:1px;text-underline-offset:4px}
.foot-plain a:hover,.foot-top a:hover{color:var(--pink)}
.foot-top{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- project view ---------- */
.proj{position:fixed;inset:0;z-index:100;background:var(--p-bg,#111);color:var(--p-ink,#fff);clip-path:circle(0% at var(--ox,30%) var(--oy,50%));transition:clip-path 1s var(--ease-io),background .6s,color .6s}
.proj.open{clip-path:circle(150% at var(--ox,30%) var(--oy,50%))}
.proj-bar{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px var(--gut);
  background:color-mix(in srgb,var(--p-bg,#111) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--p-ink,#fff) 18%,transparent)}
.proj-now{display:flex;align-items:center;gap:12px;min-width:0}
.proj-disc{flex:none;width:44px;height:44px;border-radius:50%;background-size:cover;background-position:center;animation:spin 2.8s linear infinite;
  -webkit-mask:radial-gradient(circle,transparent 0 10%,#000 11%);mask:radial-gradient(circle,transparent 0 10%,#000 11%)}
.proj-now-txt{display:flex;flex-direction:column;min-width:0}
.proj-now-txt small{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.proj-now-txt b{font-family:var(--f-display);font-weight:400;font-size:21px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-btns{display:flex;gap:8px;align-items:center;flex:none}
.proj-btns button{height:42px;min-width:42px;border-radius:99px;border:1px solid color-mix(in srgb,var(--p-ink,#fff) 45%,transparent);background:none;cursor:pointer;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:0 12px;transition:background .2s,color .2s}
.proj-btns button:hover{background:var(--p-ink,#fff);color:var(--p-bg,#111)}
.proj-btns .proj-back{background:var(--p-accent,#fff);border-color:var(--p-accent,#fff);color:var(--p-on,#111);padding:0 16px}
.proj-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding-top:69px;outline:none;overscroll-behavior:contain}
.proj-body{max-width:1320px;margin:0 auto;padding:0 var(--gut) 60px;transition:opacity .35s}
.proj-body.swap{opacity:0}
.ph{padding:clamp(40px,8vh,96px) 0 clamp(26px,5vh,60px)}
.ph-no{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-accent)}
.ph h1{font-family:var(--f-display);font-weight:400;font-size:clamp(56px,12.5vw,200px);line-height:.86;letter-spacing:-.025em;margin-top:14px;text-wrap:balance;overflow-wrap:anywhere}
.ph.long h1{font-size:clamp(46px,8.6vw,140px)}
.ph-sub{font-family:var(--f-display);font-style:italic;font-size:clamp(24px,3.4vw,46px);line-height:1.05;margin-top:16px;color:var(--p-accent);text-wrap:balance}
.ph-meta{display:flex;flex-wrap:wrap;gap:14px 48px;margin-top:clamp(26px,4vw,48px);padding-top:16px;border-top:1px solid color-mix(in srgb,var(--p-ink) 30%,transparent)}
.ph-meta div{max-width:46ch}
.ph-meta dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.ph-meta dd{font-size:16px;margin-top:3px}
.ph-text{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,64px);margin-top:clamp(30px,5vw,64px);align-items:start}
.ph-lead{font-family:var(--f-display);font-size:clamp(24px,2.7vw,38px);line-height:1.14;text-wrap:pretty}
.ph-rest{display:grid;gap:1em;font-size:17px;line-height:1.55;max-width:62ch}
.blk{margin-top:clamp(34px,6.5vw,104px)}
.blk img{width:100%;height:auto;background:color-mix(in srgb,var(--p-ink) 10%,transparent)}
.blk figcaption,.cap{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:12px;opacity:.8}
.blk.narrow{max-width:860px}
.blk.narrow.small{max-width:420px}
.blk.narrow:nth-of-type(even){margin-left:auto}
.blk--duo .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2vw,28px);align-items:start}
.blk--duo .row > :nth-child(2){margin-top:9%}
.blk--trio .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.6vw,22px);align-items:end}
.blk--trio .row > :nth-child(2){margin-bottom:7%}
.blk--grid .row{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(8px,1.4vw,20px)}
.blk--strip .row{display:flex;gap:clamp(10px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:14px;margin:0 calc(var(--gut) * -1);padding-left:var(--gut);padding-right:var(--gut);cursor:grab;scrollbar-width:thin;scrollbar-color:var(--p-accent) transparent}
.blk--strip img{height:clamp(300px,62vh,560px);width:auto;max-width:none;flex:none;scroll-snap-align:center}
.blk--strip .cap{margin-top:6px}
.blk--side .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);align-items:center}
.blk--side p{font-size:18px;line-height:1.55;max-width:48ch}
.blk--side p.bigq,.blk--quote p{font-family:var(--f-display);font-style:italic;font-size:clamp(28px,3.6vw,52px);line-height:1.08;text-wrap:balance;max-width:20ch}
.blk--quote p{max-width:24ch}
.blk--text h3{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.4vw,44px)}
.blk--text p{max-width:62ch;margin-top:10px}
.blk--note{margin-top:22px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--p-accent)}
.rv{opacity:0;transform:translateY(46px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.pnext{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;width:100%;margin-top:clamp(60px,10vw,150px);padding:clamp(26px,4vw,48px) 0;border:0;border-top:1px solid color-mix(in srgb,var(--p-ink) 30%,transparent);background:none;text-align:left;cursor:pointer}
.pnext small{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;display:block}
.pnext b{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,8vw,120px);line-height:.92;display:block;margin-top:8px;transition:color .3s;text-wrap:balance}
.pnext:hover b{color:var(--p-accent);font-style:italic}
.pnext i{width:clamp(90px,14vw,190px);aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;transition:transform 1.4s var(--ease);
  -webkit-mask:radial-gradient(circle,transparent 0 6%,#000 7%);mask:radial-gradient(circle,transparent 0 6%,#000 7%)}
.pnext:hover i{transform:rotate(240deg)}
.pend{display:flex;justify-content:center;padding-top:10px}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero{padding-top:92px}
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-side{order:-1;display:contents}
  .hero-side > .eyebrow{order:-6}.hero-side > h1{order:-5;margin-top:-18px}.hero-side > .hero-role{order:-4;margin-top:-12px}
  .hero-deck{order:-3;max-width:620px;width:100%;margin:0 auto}
  .shelf-head{order:1;margin-top:8px}
  .shelf{order:2;display:flex;overflow-x:auto;gap:22px;padding:22px var(--gut) 26px;margin:0 calc(var(--gut) * -1);scroll-snap-type:x proximity;scrollbar-width:none}
  .shelf::-webkit-scrollbar{display:none}
  .sleeve{flex:0 0 min(42vw,210px);scroll-snap-align:center;cursor:pointer}
  .np{min-height:150px}
}
@media (max-width:640px){
  body{font-size:16px}
  .logo{font-size:23px}
  .nav{gap:12px;font-size:10.5px;letter-spacing:.05em}
  .nav a:first-child{display:none}
  .np{grid-template-columns:1fr}
  .np-no{padding-top:0}
  .track button{grid-template-columns:2.6ch 44px minmax(0,1fr)}
  .track-thumb{width:44px;height:44px}
  .track-cat{display:none}
  .track-title small{display:block;margin:2px 0 0}
  .ph-text{grid-template-columns:1fr}
  .blk--side .row{grid-template-columns:1fr}
  .blk--trio .row{gap:8px}
  .blk--grid .row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .np{min-height:0}
  .proj-back span{display:none}
  .proj-btns .proj-back{padding:0 12px;font-size:11px}
  .proj-now-txt b{font-size:17px}
  .proj-disc{width:36px;height:36px}
  .sec-head p{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .disc.spin .disc-art,.proj-disc{animation:none}
  .rv{opacity:1;transform:none}
}