/* Akhil Tripathi v2 — one portfolio, ten records.
   Base system + 10 [data-style] worlds. */

:root{
  --bg:#EFEAE0; --ink:#1B1914; --mut:#6C6455; --acc:#14524E; --acc2:#D89A2B;
  --srf:#F7F3E9; --line:#D9D2C0; --r:2px; --space:1;
  --f-disp:'Fraunces',Georgia,serif; --f-body:'Newsreader',Georgia,serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp-track:-0.022em; --disp-wght:560; --grain:.05;
  --w:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:1.06rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; transition:background .5s ease,color .5s ease;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:4; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
::selection{background:var(--acc); color:var(--bg)}
a{color:inherit}
img{max-width:100%;display:block}
kbd{font-family:var(--f-mono);font-size:.72em;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 6px;letter-spacing:.05em}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:10px 16px;z-index:99;font-family:var(--f-mono);font-size:.85rem}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}

/* ---------- chrome ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:var(--acc);transition:width .08s linear}
.cursor{position:fixed;inset:0;pointer-events:none;z-index:80;display:none}
@media(hover:hover) and (pointer:fine){.cursor{display:block}}
.c-dot,.c-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;will-change:transform}
.c-dot{width:6px;height:6px;background:var(--ink);margin:-3px 0 0 -3px}
.c-ring{width:34px;height:34px;border:1.4px solid var(--ink);opacity:.45;margin:-17px 0 0 -17px;transition:width .22s ease,height .22s ease,margin .22s ease,opacity .22s ease,border-color .22s ease}
body.cur-on .c-ring{width:56px;height:56px;margin:-28px 0 0 -28px;opacity:.9;border-color:var(--acc)}
body.cur-hide .c-dot,body.cur-hide .c-ring{opacity:0}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:26px;
  padding:14px clamp(18px,4vw,44px);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-name{font-family:var(--f-disp);font-weight:var(--disp-wght);font-size:1.06rem;text-decoration:none;letter-spacing:-.01em}
.nav-links{display:flex;gap:20px;margin-left:auto}
.nav-links a{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--mut);
  position:relative;padding:4px 0;
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1);transform-origin:left}
.nav-links a.on{color:var(--ink)}
.stylebtn{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.04em;color:var(--ink);
  background:var(--srf);border:1px solid var(--line);border-radius:100px;padding:7px 12px;
  transition:border-color .25s ease,transform .25s ease;
}
.stylebtn:hover{border-color:var(--acc);transform:translateY(-1px)}
.sb-swatch{width:14px;height:14px;border-radius:50%;background:conic-gradient(var(--acc) 0 50%,var(--acc2) 50% 100%);border:1px solid var(--line)}
.sb-label b{font-weight:500}

/* ---------- hero ---------- */
.hero{position:relative;max-width:var(--w);margin:0 auto;padding:clamp(56px,9vh,120px) clamp(18px,4vw,44px) 0;min-height:86vh;display:flex;flex-direction:column}
.kicker{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.k-dot{width:5px;height:5px;border-radius:50%;background:var(--acc2)}
.masthead{
  font-family:var(--f-disp);font-weight:var(--disp-wght);letter-spacing:var(--disp-track);
  font-size:clamp(3.4rem,14.5vw,10.5rem);line-height:.92;margin:clamp(18px,3vh,34px) 0 0;
}
.mh-line{display:block}
.mh-ital{font-style:italic;color:var(--acc)}
.masthead .ch{display:inline-block;transform:translateY(1.1em);opacity:0;animation:chRise .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--chd,0s)}
@keyframes chRise{to{transform:none;opacity:1}}
.role{margin-top:clamp(16px,2.6vh,26px);font-family:var(--f-mono);font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.standfirst{max-width:56ch;margin-top:clamp(14px,2.2vh,22px)}
.standfirst p{font-size:clamp(1.12rem,1.7vw,1.35rem);line-height:1.55;font-style:italic;color:color-mix(in srgb,var(--ink) 82%,var(--mut))}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(22px,3.4vh,36px)}
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;
  font-family:var(--f-mono);font-size:.85rem;letter-spacing:.06em;
  padding:13px 22px;border-radius:var(--r);border:1px solid var(--ink);
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
  will-change:transform;
}
.btn .ar{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.btn:hover .ar{transform:translate(2px,-2px)}
.btn-solid{background:var(--ink);color:var(--bg)}
.btn-solid:hover{background:var(--acc);border-color:var(--acc)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{border-color:var(--acc);color:var(--acc)}
/* ---------- the tape (hero): waveform generated from the quotes; scrub to preview, click to read ---------- */
.tape{position:relative;margin-top:auto;height:clamp(150px,24vh,224px)}
#tapeCv{position:absolute;inset:0 0 34px;width:100%;height:calc(100% - 34px);display:block;cursor:crosshair}
.tp-chips{position:absolute;left:0;right:0;bottom:0;display:flex}
.tp-chip{flex:1;min-width:0;text-decoration:none;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);padding:7px 8px 2px;border-left:1px solid var(--line);transition:color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-chip b{color:var(--acc2);font-weight:500;margin-right:7px}
.tp-chip:hover,.tp-chip.on{color:var(--ink)}
.tp-read{position:absolute;top:-6px;left:0;max-width:min(360px,72vw);pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;background:var(--srf);border:1px solid var(--line);border-radius:var(--r);padding:11px 15px;z-index:3}
.tp-read.on{opacity:1;transform:none}
.tp-read b{display:block;font-family:var(--f-mono);font-weight:500;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:5px}
.tp-read span{font-family:var(--f-disp);font-style:italic;font-size:.99rem;line-height:1.4}
@media(max-width:760px){.tp-chip:nth-child(n+4){display:none}.tp-chip{border-left:none;border-top:1px solid var(--line)}}

/* ---------- sargam rail: scroll progress as a melody line, ticks = sections ---------- */
.rail{position:fixed;left:clamp(10px,2.2vw,30px);top:50%;transform:translateY(-50%);height:56vh;width:2px;background:var(--line);z-index:45}
.rl-fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--acc)}
.rl-t{position:absolute;left:-4px;top:var(--p);width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--mut);transition:border-color .2s ease}
.rl-t:hover,.rl-t.on{border-color:var(--acc)}
.rl-t i{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-family:var(--f-disp),serif;font-style:italic;font-size:.8rem;color:var(--mut);transition:color .2s ease}
.rl-t.on i,.rl-t:hover i{color:var(--acc)}
@media(max-width:1120px){.rail{display:none}}
@media(min-width:1121px){.progress{display:none}}

/* ---------- editor's marks: pencil stroke under section heads, stray proof notes ---------- */
.shead h2::after{content:"";display:block;height:9px;width:0;margin-top:13px;background:var(--acc);opacity:.9;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 10'%3E%3Cpath d='M2 7 C 30 3 62 9 92 5 S 152 8 178 3' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") left/180px 10px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 10'%3E%3Cpath d='M2 7 C 30 3 62 9 92 5 S 152 8 178 3' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") left/180px 10px no-repeat;
transition:width .8s cubic-bezier(.16,1,.3,1) .2s}
.shead.in h2::after{width:180px}
.stet{position:absolute;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;color:var(--mut);opacity:.55;transform:rotate(-7deg);user-select:none;pointer-events:none}
@media(max-width:900px){.stet{display:none}}

/* ---------- ticker ---------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:13px 0;position:relative}
.tk-track{display:flex;gap:0;width:max-content;animation:tk 36s linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
.tk-track span{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);white-space:nowrap;padding:0 18px;position:relative}
.tk-track span::after{content:"◦";position:absolute;right:-6px;color:var(--acc2)}
@keyframes tk{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{max-width:var(--w);margin:0 auto;padding:calc(clamp(66px,10vw,128px)*var(--space)) clamp(18px,4vw,44px)}
.shead{margin-bottom:clamp(34px,5vw,56px)}
.eyebrow{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin-bottom:16px}
h2{font-family:var(--f-disp);font-weight:var(--disp-wght);letter-spacing:var(--disp-track);font-size:clamp(1.9rem,4.4vw,3.3rem);line-height:1.06;text-wrap:balance}
h2 em{font-style:italic;color:var(--acc)}
.sdek{max-width:52ch;margin-top:14px;color:var(--mut);font-size:1.02rem}

/* reveal */
[data-rev]{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
[data-rev].in{opacity:1;transform:none}

/* ---------- writing index ---------- */
.windex{display:flex;flex-direction:column}
.wrow{
  display:grid;grid-template-columns:56px 1fr auto;gap:clamp(12px,2.5vw,26px);align-items:baseline;
  padding:clamp(16px,2.4vw,24px) 4px;border-top:1px solid var(--line);text-decoration:none;position:relative;
  transition:background .3s ease,padding-left .3s cubic-bezier(.16,1,.3,1);
}
.windex .wrow:last-child{border-bottom:1px solid var(--line)}
.wrow:hover{background:color-mix(in srgb,var(--srf) 70%,transparent);padding-left:14px}
.w-mark{font-family:var(--f-disp);font-style:italic;font-size:1rem;color:var(--acc);opacity:.85}
.w-title{display:block;font-family:var(--f-disp);font-weight:var(--disp-wght);font-size:clamp(1.35rem,2.6vw,1.9rem);letter-spacing:-.015em;line-height:1.14;transition:color .25s ease}
.wrow:hover .w-title{color:var(--acc)}
.w-dek{display:block;margin-top:5px;color:var(--mut);font-size:.99rem;max-width:60ch}
.w-meta{display:flex;align-items:baseline;gap:14px}
.w-cat{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.w-go{font-size:1.05rem;color:var(--acc);transform:translate(0,0);transition:transform .3s cubic-bezier(.16,1,.3,1);display:inline-block}
.wrow:hover .w-go{transform:translate(3px,-3px)}
.w-thumb{display:none;border-radius:var(--r)}
.wfloat{
  position:fixed;z-index:40;width:190px;height:190px;pointer-events:none;opacity:0;
  transform:scale(.86) rotate(var(--wr,0deg));transition:opacity .25s ease,transform .25s ease;
  will-change:transform;
}
.wfloat.on{opacity:1;transform:scale(1) rotate(var(--wr,0deg))}
.wfloat img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);box-shadow:0 18px 44px rgba(0,0,0,.24)}

/* ---------- quote ---------- */
.quote figure{max-width:880px;margin:0 auto;text-align:center}
.quote blockquote p{
  font-family:var(--f-disp);font-weight:var(--disp-wght);letter-spacing:var(--disp-track);
  font-size:clamp(1.7rem,4.2vw,3.1rem);line-height:1.2;text-wrap:balance;
}
.quote em{font-style:italic;color:var(--acc)}
.quote figcaption{margin-top:22px;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--bg);padding:clamp(20px,3vw,30px);transition:background .3s ease}
.stat:hover{background:var(--srf)}
.st-n{display:block;font-family:var(--f-disp);font-weight:var(--disp-wght);font-size:clamp(2.3rem,4.5vw,3.4rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--acc)}
.st-l{display:block;margin-top:10px;color:var(--mut);font-size:.96rem;max-width:26ch}

/* ---------- releases ---------- */
.sleeve{display:grid;grid-template-columns:minmax(200px,340px) 1fr;gap:clamp(22px,4vw,48px);align-items:start;margin-bottom:clamp(34px,5vw,54px)}
.sl-art{width:100%;border-radius:var(--r);border:1px solid var(--line);transition:transform .4s cubic-bezier(.16,1,.3,1);will-change:transform}
.sl-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sl-row{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:baseline;padding:15px 2px;border-bottom:1px solid var(--line)}
.sl-no{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;color:var(--acc2)}
.sl-name{font-family:var(--f-disp);font-weight:var(--disp-wght);font-size:1.35rem;letter-spacing:-.01em}
.sl-note{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;color:var(--mut);text-align:right}
.sl-dim{opacity:.55}
.credits{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.cr-row{display:grid;grid-template-columns:110px 1fr;gap:8px 26px;padding:16px 2px;border-bottom:1px solid var(--line)}
.cr-yr{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.08em;color:var(--acc2);padding-top:5px}
.cr-who{font-family:var(--f-disp);font-weight:var(--disp-wght);font-size:1.18rem;letter-spacing:-.01em}
.cr-what{grid-column:2;color:var(--mut);font-size:.97rem}

/* ---------- live / programme ---------- */
.prog{display:flex;flex-direction:column;max-width:820px}
.pg-row{display:grid;grid-template-columns:34px 1fr auto;gap:18px;align-items:baseline;padding:18px 2px;border-top:1px solid var(--line);text-decoration:none;transition:padding-left .3s cubic-bezier(.16,1,.3,1)}
.prog .pg-row:last-child{border-bottom:1px solid var(--line)}
.pg-row:hover{padding-left:12px}
.pg-i{font-family:var(--f-mono);font-size:.8rem;color:var(--acc)}
.pg-t{display:block;font-family:var(--f-disp);font-weight:var(--disp-wght);font-size:1.35rem;letter-spacing:-.01em;transition:color .25s ease}
.pg-row:hover .pg-t{color:var(--acc)}
.pg-d{display:block;margin-top:5px;color:var(--mut);font-size:.96rem;max-width:56ch}
.pg-loc{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);text-align:right}
.brandline{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(30px,4vw,44px);font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.b-sep{width:5px;height:5px;border-radius:50%;background:var(--acc2);flex:none}

/* ---------- contact ---------- */
.mail{
  display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(22px,3.6vw,36px) 4px;cursor:pointer;color:inherit;
  transition:padding-left .3s cubic-bezier(.16,1,.3,1),background .3s ease;
}
.mail:hover{padding-left:16px;background:color-mix(in srgb,var(--srf) 70%,transparent)}
.mail-t{display:block;font-family:var(--f-disp);font-weight:var(--disp-wght);letter-spacing:var(--disp-track);font-size:clamp(1.6rem,5.4vw,3.6rem);line-height:1.05;word-break:break-all}
.mail:hover .mail-t{color:var(--acc)}
.mail-s{display:block;margin-top:12px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.c-links{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px}
.c-links a{font-family:var(--f-mono);font-size:.85rem;letter-spacing:.06em;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .25s ease,color .25s ease}
.c-links a:hover{color:var(--acc);border-color:var(--acc)}

/* ---------- footer ---------- */
.foot{max-width:var(--w);margin:0 auto;padding:30px clamp(18px,4vw,44px) 44px;display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:.76rem;letter-spacing:.05em;color:var(--mut)}
.foot b{font-weight:500;color:var(--ink)}
.f-note{margin-left:auto}
.foot kbd{font-size:.68rem}

/* ---------- style palette ---------- */
.palette{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--ink) 32%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:18px}
.palette[hidden]{display:none}
.pal-card{width:min(860px,100%);max-height:82vh;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:calc(var(--r) + 10px);padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:palUp .35s cubic-bezier(.16,1,.3,1)}
@keyframes palUp{from{transform:translateY(26px);opacity:0}}
.pal-hint{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.pal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pal-item{
  cursor:pointer;text-align:left;border:1px solid var(--line);border-radius:var(--r);padding:12px;
  background:var(--srf);transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s ease;
}
.pal-item:hover{transform:translateY(-3px);border-color:var(--acc)}
.pal-item.on{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.pal-chip{height:44px;border-radius:calc(var(--r) + 2px);margin-bottom:10px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.14);font-size:1.25rem;line-height:1}
.pal-name{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.05em}
.pal-tag{display:block;font-family:var(--f-mono);font-size:.68rem;color:var(--mut);margin-top:3px;letter-spacing:.04em}

/* ============================================================
   THE TEN RECORDS
   ============================================================ */

/* 02 · Liner Notes — the record's credits */
[data-style="liner"]{
  --bg:#EBE5D6; --ink:#22242E; --mut:#63655F; --acc:#2B3A67; --acc2:#DE9B14;
  --srf:#F2EDDE; --line:#C6C0AD; --r:0px; --grain:.04;
  --f-disp:'Archivo',Helvetica,sans-serif; --f-body:'Newsreader',Georgia,serif; --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --disp-track:-0.028em; --disp-wght:750;
}
[data-style="liner"] .shead{border-top:2px solid var(--ink);padding-top:18px}
[data-style="liner"] .eyebrow{color:var(--acc2)}
[data-style="liner"] .mh-ital,[data-style="liner"] h2 em{font-style:normal;color:var(--acc)}
[data-style="liner"] .stat{border-left:none}
[data-style="liner"] .btn{border-width:2px}

/* 03 · Baithak — the gathering, lit for evening */
[data-style="baithak"]{
  --bg:#251A28; --ink:#F2EAD9; --mut:#B49A92; --acc:#C9A24B; --acc2:#8A3140;
  --srf:#312237; --line:#443349; --r:4px; --grain:.07;
  --f-disp:'Rozha One',Georgia,serif; --f-body:'Gantari',Helvetica,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp-track:0em; --disp-wght:400;
}
[data-style="baithak"] body,body[data-b="baithak"]{background:var(--bg)}
[data-style="baithak"] .hero{background:radial-gradient(ellipse 70% 46% at 50% 8%,color-mix(in srgb,var(--acc) 13%,transparent),transparent 70%)}
[data-style="baithak"] .wfloat img{box-shadow:0 18px 50px rgba(0,0,0,.6)}
[data-style="baithak"] ::selection{background:var(--acc);color:#251A28}
[data-style="baithak"] .k-dot,[data-style="baithak"] .b-sep{background:var(--acc)}
[data-style="baithak"] .standfirst p{color:#D8C9B3}

/* 04 · Newsprint — the morning music page */
[data-style="newsprint"]{
  --bg:#F6F3EB; --ink:#151412; --mut:#565450; --acc:#B3261E; --acc2:#151412;
  --srf:#FCFAF3; --line:#8F8D86; --r:0px; --grain:.06;
  --f-disp:'Playfair Display',Georgia,serif; --f-body:'PT Serif',Georgia,serif; --f-mono:'Courier Prime',ui-monospace,monospace;
  --disp-track:-0.014em; --disp-wght:700;
}
[data-style="newsprint"] .nav{border-bottom:3px double var(--ink)}
[data-style="newsprint"] .shead{border-bottom:1px solid var(--ink);padding-bottom:18px}
[data-style="newsprint"] .wrow,[data-style="newsprint"] .pg-row{border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
[data-style="newsprint"] .ticker{border-top:3px double var(--ink);border-bottom:3px double var(--ink)}
[data-style="newsprint"] .stats{border:2px solid var(--ink);background:var(--ink)}
[data-style="newsprint"] .st-n{color:var(--ink)}
[data-style="newsprint"] .eyebrow{color:var(--acc)}

/* 05 · Cassette — the mixtape J-card */
[data-style="cassette"]{
  --bg:#F3E9D7; --ink:#33251C; --mut:#7A6A58; --acc:#D9622B; --acc2:#2E6E63;
  --srf:#FAF3E4; --line:#DCCBB0; --r:14px; --grain:.05;
  --f-disp:'Bricolage Grotesque',Helvetica,sans-serif; --f-body:'Bricolage Grotesque',Helvetica,sans-serif; --f-mono:'Space Mono',ui-monospace,monospace;
  --disp-track:-0.03em; --disp-wght:800;
}
[data-style="cassette"] .hero::after{
  content:"";display:block;height:14px;margin-top:18px;border-radius:100px;
  background:repeating-linear-gradient(90deg,var(--acc) 0 46px,#E8A33D 46px 92px,var(--acc2) 92px 138px,transparent 138px 152px);
}
[data-style="cassette"] .btn{border-width:2px}
[data-style="cassette"] .stat{border-radius:0}
[data-style="cassette"] .sl-art{border-radius:var(--r)}
[data-style="cassette"] .standfirst p{font-style:normal}

/* 06 · Monsoon — grey rain, silver ink */
[data-style="monsoon"]{
  --bg:#232A31; --ink:#E9EDEB; --mut:#92A09D; --acc:#9FB8AD; --acc2:#6E8B84;
  --srf:#2B333B; --line:#3A444D; --r:3px; --grain:.06;
  --f-disp:'Cormorant Garamond',Georgia,serif; --f-body:'Karla',Helvetica,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp-track:-0.01em; --disp-wght:600;
}
[data-style="monsoon"] .hero{position:relative}
[data-style="monsoon"] .hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;
  background:repeating-linear-gradient(102deg,transparent 0 34px,color-mix(in srgb,var(--acc) 24%,transparent) 34px 35px);
}
[data-style="monsoon"] .wfloat img{box-shadow:0 18px 50px rgba(0,0,0,.55)}
[data-style="monsoon"] ::selection{background:var(--acc);color:#232A31}

/* 07 · Riso — two inks, slightly off-register */
[data-style="riso"]{
  --bg:#F4EFE4; --ink:#1E2749; --mut:#59618A; --acc:#F04A63; --acc2:#2A66FF;
  --srf:#FBF7EC; --line:#1E2749; --r:0px; --grain:.08;
  --f-disp:'Archivo Black',Helvetica,sans-serif; --f-body:'Public Sans',Helvetica,sans-serif; --f-mono:'Space Mono',ui-monospace,monospace;
  --disp-track:-0.015em; --disp-wght:400;
}
[data-style="riso"] .masthead,[data-style="riso"] h2{text-shadow:3px 3px 0 color-mix(in srgb,var(--acc) 60%,transparent)}
[data-style="riso"] .mh-ital{font-style:normal;color:var(--acc2)}
[data-style="riso"] .stats{gap:10px;background:transparent;border:none}
[data-style="riso"] .stat{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--acc)}
[data-style="riso"] .stat:nth-child(even){box-shadow:6px 6px 0 var(--acc2)}
[data-style="riso"] .btn{border-width:2px;box-shadow:4px 4px 0 var(--acc2)}
[data-style="riso"] .btn:hover{box-shadow:2px 2px 0 var(--acc2);transform:translate(2px,2px)}
[data-style="riso"] .standfirst p{font-style:normal}

/* 08 · Raat — the club at 1am */
[data-style="raat"]{
  --bg:#0D0E13; --ink:#EDEDF2; --mut:#898997; --acc:#B7F04A; --acc2:#7A6CFF;
  --srf:#15161E; --line:#242531; --r:6px; --grain:.05;
  --f-disp:'Syne',Helvetica,sans-serif; --f-body:'Space Grotesk',Helvetica,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp-track:-0.02em; --disp-wght:800;
}
[data-style="raat"] .mh-ital{font-style:normal;color:var(--acc);text-shadow:0 0 26px color-mix(in srgb,var(--acc) 55%,transparent)}
[data-style="raat"] h2 em{font-style:normal;color:var(--acc)}
[data-style="raat"] .st-n{text-shadow:0 0 20px color-mix(in srgb,var(--acc) 40%,transparent)}
[data-style="raat"] .btn-solid{background:var(--acc);border-color:var(--acc);color:#0D0E13}
[data-style="raat"] .btn-solid:hover{background:var(--acc2);border-color:var(--acc2);color:#EDEDF2}
[data-style="raat"] ::selection{background:var(--acc);color:#0D0E13}
[data-style="raat"] .wfloat img{box-shadow:0 18px 60px rgba(122,108,255,.35)}

/* 09 · Archive — the manila file */
[data-style="archive"]{
  --bg:#E9DFC8; --ink:#3A3226; --mut:#6E6350; --acc:#A33B2A; --acc2:#56604F;
  --srf:#F0E8D3; --line:#C4B79A; --r:0px; --grain:.09;
  --f-disp:'Libre Caslon Text',Georgia,serif; --f-body:'Courier Prime',ui-monospace,monospace; --f-mono:'Courier Prime',ui-monospace,monospace;
  --disp-track:-0.008em; --disp-wght:700;
}
[data-style="archive"] .wrow,[data-style="archive"] .pg-row,[data-style="archive"] .sl-row,[data-style="archive"] .cr-row,[data-style="archive"] .mail{border-style:dashed}
[data-style="archive"] .windex .wrow:last-child,[data-style="archive"] .prog .pg-row:last-child{border-bottom-style:dashed}
[data-style="archive"] .eyebrow::before{content:"FILE / "}
[data-style="archive"] .mail-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:var(--acc)}
[data-style="archive"] .stats{background:transparent;border:none;gap:12px}
[data-style="archive"] .stat{border:1.6px dashed var(--ink)}

/* 10 · Gallery — the white cube */
[data-style="gallery"]{
  --bg:#FCFCFA; --ink:#121212; --mut:#75756F; --acc:#C22B1F; --acc2:#121212;
  --srf:#FFFFFF; --line:#E4E4DE; --r:0px; --space:1.3; --grain:.025;
  --f-disp:'Instrument Sans',Helvetica,sans-serif; --f-body:'Instrument Sans',Helvetica,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp-track:-0.045em; --disp-wght:640;
}
[data-style="gallery"] .mh-ital,[data-style="gallery"] h2 em,[data-style="gallery"] .quote em{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-style:italic;color:var(--ink)}
[data-style="gallery"] .eyebrow{color:var(--ink)}
[data-style="gallery"] .eyebrow::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-right:10px;vertical-align:1px}
[data-style="gallery"] .w-go,[data-style="gallery"] .wrow:hover .w-title,[data-style="gallery"] .pg-row:hover .pg-t,[data-style="gallery"] .mail:hover .mail-t{color:var(--acc)}
[data-style="gallery"] .standfirst p{font-style:normal;color:var(--mut)}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .nav-links a[data-nav="numbers"],.nav-links a[data-nav="releases"],.nav-links a[data-nav="live"]{display:none}
  .wrow{grid-template-columns:1fr auto;grid-template-rows:auto auto}
  .w-mark{display:none}
  .w-thumb{display:block;grid-row:1/3;grid-column:2;width:74px;height:74px;object-fit:cover;align-self:center}
  .w-meta{grid-row:2;grid-column:1;margin-top:8px}
  .wfloat{display:none}
  .sleeve{grid-template-columns:1fr}
  .sl-art{max-width:300px}
  .pg-loc{display:none}
  .f-note{margin-left:0}
}
@media(hover:none){.wfloat{display:none}.w-thumb{display:block;grid-row:1/3;grid-column:2;width:74px;height:74px;object-fit:cover;align-self:center}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-rev]{opacity:1;transform:none}
  .masthead .ch{opacity:1;transform:none;animation:none}
  .tk-track{animation:none;flex-wrap:wrap;width:auto}
  .cursor{display:none!important}
  .tp-read{display:none}
  .wfloat{display:none}
  .w-thumb{display:block;grid-row:1/3;grid-column:2;width:74px;height:74px;object-fit:cover;align-self:center}
}