/* ══════════════════════════════════════════════════════════
   ANTON CHILIBI — shared stylesheet
   01 tokens · 02 fluid root · 03 type · 04 brackets · 05 labels
   06 caption bar · 07 reveal · 08 chrome · 09 overlay · 10 layout
   11 covers · 12 components · 13 pages
   ══════════════════════════════════════════════════════════ */

/* ── 01 · TOKENS ────────────────────────────────────────── */
:root{
  --linen:#f1e8dc;
  --paper:#f8f2e9;
  --ink:#141011;
  --wine:#4a2226;
  --wine-d:#26191a;
  --rose:#d2bcbc;
  --line:#cbb4b3;
  --dim:#6d5250;
  --gray:#8a7a76;
  --live:#79b17a;

  --display:'Archivo Black','Archivo',sans-serif;
  --accent:'Archivo',sans-serif;
  --ui:'IBM Plex Mono',ui-monospace,monospace;
  --body:'IBM Plex Sans Condensed',sans-serif;

  --pad:2.5rem;
  --header-h:5.2rem;
  --r:.3rem;

  --skew:0deg;
}
@media (min-width:580px){ :root{ --pad:3.5rem } }
@media (min-width:1025px){ :root{ --pad:6rem; --header-h:7.5rem } }

/* ── 02 · FLUID ROOT ────────────────────────────────────── */
html{ font-size:calc(100vw / 270 * 10) }
@media (min-width:580px) and (max-width:1024px){ html{ font-size:calc(100vw / 600 * 10) } }
@media (min-width:900px) and (max-width:1180px) and (min-height:700px){ html{ font-size:calc(100vw / 960 * 10) } }
@media (min-width:1025px) and (max-width:1599px){ html{ font-size:1vw } }
@media (min-width:1600px){ html{ font-size:calc(100vw / 1260 * 10) } }

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scrollbar-width:none;overscroll-behavior:none}
html::-webkit-scrollbar{width:0;height:0}
body{
  background:var(--linen);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:1.7rem;line-height:1.62;
  overflow-x:hidden;
}
body::after{
  content:'';position:fixed;inset:-40%;z-index:300;pointer-events:none;
  opacity:.06;mix-blend-mode:multiply;
  background-image: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='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.3s steps(2) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-2%,1.6%)}100%{transform:translate(1.6%,-2%)}}

/* ── 03 · TYPE ──────────────────────────────────────────── */
.t-dsp{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.t-ui{font-family:var(--ui);text-transform:uppercase;letter-spacing:.24em;font-size:1rem;font-weight:400}
.t-it{
  font-family:var(--accent);font-style:italic;font-weight:500;
  text-transform:lowercase;letter-spacing:-.015em;display:inline-block;
  transform:skewX(var(--skew));transition:transform .22s cubic-bezier(.2,.8,.2,1);will-change:transform;
}
a{color:inherit}
.dim{color:var(--dim)}

/* ── 04 · BRACKETS ──────────────────────────────────────── */
.brk{position:relative}
.brk::before,.brk::after,.brk > .brk-b::before,.brk > .brk-b::after{
  content:'';position:absolute;width:1.1rem;height:1.1rem;border:1px solid var(--line);pointer-events:none;z-index:3;
}
.brk::before{top:0;left:0;border-right:0;border-bottom:0}
.brk::after{top:0;right:0;border-left:0;border-bottom:0}
.brk > .brk-b::before{bottom:0;left:0;border-right:0;border-top:0}
.brk > .brk-b::after{bottom:0;right:0;border-left:0;border-top:0}

/* ── 05 · SECTION LABEL ─────────────────────────────────── */
.hr{height:1px;background:var(--line);width:100%}
.slabel{display:flex;align-items:center;gap:1.6rem;margin-bottom:3.2rem}
.slabel .no{font-family:var(--ui);font-weight:500;font-size:1rem;letter-spacing:.14em;color:var(--wine)}
.slabel .tx{font-family:var(--ui);font-size:.92rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.slabel .fill{flex:1;height:1px;background:var(--line)}
.dark .slabel .no,.dark .slabel .tx{color:var(--rose)}
.dark .slabel .fill,.dark .hr{background:rgba(210,188,188,.3)}

/* ── 06 · CAPTION BAR ───────────────────────────────────── */
.capbar{
  display:grid;grid-template-columns:1fr auto;gap:.8rem 1.2rem;align-items:baseline;
  padding:1.1rem 1.4rem;border-top:1px solid var(--line);
  font-family:var(--ui);font-size:.84rem;letter-spacing:.22em;text-transform:uppercase;
}
.capbar .mid{grid-column:1/-1;color:var(--gray);font-size:.76rem;letter-spacing:.3em}
.capbar .rt{color:var(--wine)}
@media (min-width:580px){
  .capbar{grid-template-columns:1fr auto 1fr}
  .capbar .mid{grid-column:auto;text-align:center}
  .capbar .rt{text-align:right}
}
.framed{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:rgba(248,242,233,.4)}

/* ── 07 · REVEAL ────────────────────────────────────────── */
[data-rv]{transition-delay:var(--d,0s)}
[data-rv="mask"]{display:block;overflow:hidden}
[data-rv="mask"] > *{display:block;transform:translateY(115%);
  transition:transform 1.15s cubic-bezier(.19,1,.22,1);transition-delay:var(--d,0s)}
.is-in[data-rv="mask"] > *{transform:translateY(0)}
[data-rv="rise"]{opacity:0;transform:translateY(2.4rem);
  transition:opacity .95s cubic-bezier(.19,1,.22,1),transform 1.05s cubic-bezier(.19,1,.22,1);transition-delay:var(--d,0s)}
.is-in[data-rv="rise"]{opacity:1;transform:none}
[data-rv="grow"]{transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.19,1,.22,1);transition-delay:var(--d,0s)}
.is-in[data-rv="grow"]{transform:scaleX(1)}

/* ── 08 · CHROME ────────────────────────────────────────── */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:120;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);
  transition:color .45s;pointer-events:none;
}
.hd::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--linen) 55%,rgba(241,232,220,0));transition:opacity .45s}
.hd.inv{color:var(--rose)}
.hd.inv::before{opacity:0}
.hd > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:1rem;white-space:nowrap;text-decoration:none;color:inherit;
  font-family:var(--ui);font-size:.88rem;letter-spacing:.28em;text-transform:uppercase}
.mark{width:1.5rem;height:1.5rem;flex:none}
.mark circle{fill:currentColor}
.hd-r{display:flex;align-items:center;gap:1rem}
.btn{
  font-family:var(--ui);font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:999px;padding:.9rem 1.5rem;background:none;color:inherit;
  cursor:pointer;display:flex;align-items:center;gap:.8rem;transition:.35s;text-decoration:none;
}
.btn:active{transform:scale(.95)}
.btn.solid{background:var(--ink);color:var(--linen);border-color:var(--ink)}
.hd.inv .btn.solid{background:var(--rose);color:var(--wine-d);border-color:var(--rose)}
.btn i{font-family:var(--accent);font-style:italic;font-weight:500;text-transform:lowercase;letter-spacing:-.01em;font-size:1rem}
.dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--live);flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:579px){
  .btn{padding:.85rem 1.2rem;font-size:.72rem;letter-spacing:.18em}
  .btn i{display:none}
  .brand span{display:none}
  .hd-r{gap:.7rem}
}
.meter{position:fixed;left:var(--pad);right:var(--pad);bottom:calc(env(safe-area-inset-bottom) + 1.4rem);
  z-index:110;display:flex;align-items:center;gap:1rem;pointer-events:none;mix-blend-mode:multiply}
.meter .track{flex:1;height:1px;background:var(--line)}
.meter .track b{display:block;height:100%;width:0;background:var(--ink)}
.meter .pc{font-family:var(--ui);font-size:.72rem;letter-spacing:.16em;color:var(--dim);min-width:3.4rem;text-align:right}
.meter.inv{mix-blend-mode:normal}
.meter.inv .track{background:rgba(210,188,188,.3)}
.meter.inv .track b{background:var(--rose)}
.meter.inv .pc{color:rgba(210,188,188,.75)}

/* ── 09 · CHAPTERS OVERLAY ──────────────────────────────── */
.ovl{
  position:fixed;inset:0;z-index:200;background:var(--wine-d);color:var(--rose);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--header-h) var(--pad) calc(env(safe-area-inset-bottom) + 3rem);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.76,0,.24,1);overflow:hidden;
}
.ovl.open{clip-path:inset(0 0 0 0)}
.ovl .close{position:absolute;top:0;right:var(--pad);height:var(--header-h);display:flex;align-items:center;
  background:none;border:0;color:inherit;font-family:var(--ui);font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;cursor:pointer}
.chs{list-style:none;margin-top:2rem}
.chs li{border-top:1px solid rgba(210,188,188,.25)}
.chs li:last-child{border-bottom:1px solid rgba(210,188,188,.25)}
.chs a{display:flex;align-items:baseline;gap:1.4rem;padding:1.7rem 0;text-decoration:none;color:inherit;
  font-family:var(--display);font-size:3.4rem;text-transform:uppercase;letter-spacing:-.025em;
  transition:padding-left .45s,color .45s}
.chs a .n{font-family:var(--ui);font-size:.8rem;letter-spacing:.22em;color:rgba(210,188,188,.55)}
.chs a:hover,.chs a:active{padding-left:1.2rem;color:#fff}
.chs a.here{color:#fff}
.stickers{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.5}
.stickers span{position:absolute;border:1px solid rgba(210,188,188,.3);border-radius:var(--r);
  font-family:var(--ui);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(210,188,188,.55);padding:.7rem .9rem;white-space:nowrap;
  animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0) rotate(var(--rot,0deg))}to{transform:translate(1.6rem,-1.2rem) rotate(var(--rot,0deg))}}

/* ── 10 · LAYOUT ────────────────────────────────────────── */
main{position:relative;z-index:1}
section{padding:3.6rem var(--pad) 8rem;position:relative}
.dark{background:var(--wine-d);color:var(--rose)}
.wrap{max-width:112rem;margin:0 auto}
.pagehead{padding-top:calc(var(--header-h) + 6rem)}
.h1{font-family:var(--display);text-transform:uppercase;letter-spacing:-.032em;line-height:.92;
  font-size:min(17vw,13rem)}
.h1 .t-it{font-family:var(--accent);font-style:italic;text-transform:lowercase;letter-spacing:-.03em;font-size:.62em}
.lede{font-size:2.1rem;line-height:1.5;max-width:26em;font-weight:300;margin-top:2.4rem}
.stmt{font-family:var(--display);text-transform:uppercase;font-size:min(10vw,5.8rem);line-height:1;letter-spacing:-.028em}
.stmt .t-it{font-size:1.02em;line-height:.95}
.scrub{font-size:1.9rem;line-height:1.55;max-width:26em;font-weight:300}
.scrub w{opacity:.15;transition:opacity .16s linear}
@media (min-width:760px){ .scrub{font-size:2.3rem} }
.dark .scrub w{color:var(--rose)}

/* ── 11 · COVERS ────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 1.4rem;margin-top:3rem}
@media (min-width:760px){ .grid{grid-template-columns:repeat(3,1fr);gap:3rem 2.4rem} }
.rel{display:block;text-decoration:none;color:inherit;perspective:1000px}
.cover{
  position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;
  background:var(--wine-d);transform-style:preserve-3d;
  transform:translate3d(0,0,0);will-change:transform;
  box-shadow:0 .4rem 2rem rgba(38,25,26,.12);
  transition:box-shadow .5s;
}
.rel:hover .cover,.rel.act .cover{box-shadow:0 2.4rem 5rem rgba(38,25,26,.3)}
.cover img,.cover .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cover .glare{
  position:absolute;inset:-30%;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.42),rgba(255,255,255,0) 55%);
  mix-blend-mode:screen;
}
.rel:hover .cover .glare,.rel.act .cover .glare{opacity:1}
.cover .sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 62%);
  transform:translateX(-120%);transition:transform .9s cubic-bezier(.19,1,.22,1);
}
.rel:hover .cover .sheen,.rel.act .cover .sheen{transform:translateX(120%)}
.cover .yr{
  position:absolute;left:1rem;top:1rem;z-index:4;
  font-family:var(--ui);font-size:.7rem;letter-spacing:.2em;color:rgba(241,232,220,.75);
  transform:translateZ(30px);
}
.cover .play{
  position:absolute;right:1rem;bottom:1rem;z-index:4;width:2.6rem;height:2.6rem;border-radius:50%;
  border:1px solid rgba(241,232,220,.5);display:grid;place-items:center;
  color:rgba(241,232,220,.85);font-size:.8rem;
  opacity:0;transform:translateZ(40px) scale(.7);transition:opacity .45s,transform .45s;
}
.rel:hover .cover .play,.rel.act .cover .play{opacity:1;transform:translateZ(40px) scale(1)}
.rel .cap{margin-top:1.2rem}
.rel .cap b{display:block;font-family:var(--display);font-size:1.25rem;letter-spacing:-.02em;
  text-transform:uppercase;line-height:1.12;font-weight:400}
.rel .cap s{display:block;text-decoration:none;font-family:var(--body);font-size:1.2rem;color:var(--dim);margin-top:.35rem;line-height:1.4}
.rel .cap u{display:block;text-decoration:none;font-family:var(--ui);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--wine);margin-top:.6rem}
@media (min-width:760px){
  .rel .cap b{font-size:1.6rem}
  .rel .cap s{font-size:1.45rem}
}

/* ── 12 · COMPONENTS ────────────────────────────────────── */
.figrow{display:grid}
.fig{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:1.6rem;
  padding:2.4rem .2rem;border-top:1px solid var(--line)}
.fig:last-child{border-bottom:1px solid var(--line)}
.dark .fig{border-color:rgba(210,188,188,.3)}
.odo{display:flex;font-family:var(--display);font-size:min(16vw,8rem);line-height:1;letter-spacing:-.035em}
.odo .col{overflow:hidden;height:1em;display:inline-block}
.odo .col i{display:block;font-style:normal;transform:translateY(0);transition:transform 1.6s cubic-bezier(.19,1,.22,1)}
.odo .sep{display:inline-block}
.fig .lab{font-family:var(--ui);font-size:.84rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gray);text-align:right;line-height:1.9;max-width:12em}
.dark .fig .lab{color:rgba(210,188,188,.65)}

.svc{display:flex;justify-content:space-between;align-items:baseline;gap:1.4rem;
  padding:1.8rem .2rem;border-top:1px solid var(--line)}
.svc:last-of-type{border-bottom:1px solid var(--line)}
.svc dt{font-family:var(--display);font-size:1.4rem;letter-spacing:-.015em;text-transform:uppercase;font-weight:400}
.svc dd{font-family:var(--accent);font-style:italic;font-size:1.55rem;color:var(--dim);text-align:right;text-transform:lowercase}
.svc p{flex:0 0 100%;font-size:1.5rem;color:var(--dim);margin-top:.6rem}

.lk{display:flex;justify-content:space-between;align-items:center;padding:1.9rem .2rem;
  border-top:1px solid var(--line);text-decoration:none;color:inherit;
  font-family:var(--display);font-size:1.35rem;letter-spacing:-.01em;text-transform:uppercase;font-weight:400;
  transition:padding-left .4s,color .4s}
.lk:last-of-type{border-bottom:1px solid var(--line)}
.lk:hover,.lk:active{padding-left:1.2rem;color:var(--wine)}
.lk s{text-decoration:none;font-family:var(--ui);font-size:1.3rem;color:var(--dim)}
.dark .lk{border-color:rgba(210,188,188,.3)}

.marq{overflow:hidden;padding:2.6rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq .tr{display:flex;gap:3.4rem;width:max-content;will-change:transform}
.marq .tr span{font-family:var(--ui);font-size:1rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gray);white-space:nowrap}

.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr auto;gap:.6rem 1.4rem;align-items:baseline;
  padding:2rem .3rem;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:background .4s,color .4s,padding-left .4s}
.row:hover,.row.act{background:var(--ink);color:var(--linen);padding-left:1.2rem}
.row h3{font-family:var(--display);font-size:1.7rem;letter-spacing:-.02em;text-transform:uppercase;line-height:1.12;font-weight:400}
.row .meta{font-family:var(--ui);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wine);text-align:right;white-space:nowrap}
.row:hover .meta,.row.act .meta{color:var(--rose)}
.row p{grid-column:1/-1;font-size:1.55rem;line-height:1.5;color:var(--dim);max-width:44em}
.row:hover p,.row.act p{color:rgba(241,232,220,.65)}

footer{padding:8rem var(--pad) 12rem;border-top:1px solid var(--line)}
.fcols{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem 2rem;margin-top:4rem}
@media (min-width:760px){ .fcols{grid-template-columns:repeat(4,1fr)} }
.fcols b{display:block;font-family:var(--ui);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gray);font-weight:400;margin-bottom:.9rem}
.fcols a,.fcols span{display:block;font-size:1.5rem;text-decoration:none;line-height:1.9;font-weight:300}
.fcols a:hover{color:var(--wine)}

/* ── 13 · PAGE-SPECIFIC ─────────────────────────────────── */
.metarow{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 1.4rem;border-top:1px solid var(--line);padding-top:1.6rem;margin-top:3rem}
@media (min-width:760px){ .metarow{grid-template-columns:repeat(5,1fr)} }
.metarow b{display:block;font-family:var(--ui);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gray);font-weight:400;margin-bottom:.5rem}
.metarow span{display:block;font-family:var(--ui);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.8}

.spread{display:grid;gap:4rem}
@media (min-width:900px){ .spread{grid-template-columns:1fr 1fr;gap:6rem} }

.hero-cover{max-width:52rem;margin-bottom:4rem}
.rel-figs{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin:3rem 0}
.rel-figs div{border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 1.6rem}
.rel-figs b{display:block;font-family:var(--ui);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gray);font-weight:400;margin-bottom:.8rem}
.rel-figs span{font-family:var(--display);font-size:2.6rem;letter-spacing:-.03em}

.cta{background:var(--rose);color:var(--wine-d);position:relative;overflow:hidden;padding:12rem var(--pad)}
.cta .orb{position:absolute;border-radius:50%;border:1px solid rgba(38,25,26,.3);will-change:transform;transform:translate3d(0,0,0)}
.cta .orb.fill{background:radial-gradient(circle at 38% 34%,rgba(38,25,26,.09),rgba(38,25,26,0) 64%);border-color:rgba(38,25,26,.2)}
.cta .orb.thin{border-color:rgba(38,25,26,.16)}
.cta .lk{border-color:rgba(38,25,26,.25)}
.cta .slabel .fill{background:rgba(38,25,26,.25)}
.cta .slabel .no,.cta .slabel .tx{color:var(--wine-d)}

.covernote{
  margin-top:4rem;border:1px dashed var(--line);border-radius:var(--r);padding:1.8rem;
  font-family:var(--ui);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);line-height:2
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  [data-rv]{opacity:1!important;transform:none!important}
  [data-rv="mask"] > *{transform:none!important}
  .scrub w{opacity:1!important}
}

/* ── 14 · COVER PLACEHOLDER ─────────────────────────────── */
.cover .ph{
  display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;
  padding:1.4rem;text-align:left;overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, hsl(var(--h) 34% 34% / .95), transparent 62%),
    radial-gradient(110% 100% at 8% 92%, hsl(calc(var(--h) + 28) 30% 22% / .95), transparent 60%),
    linear-gradient(150deg, hsl(var(--h) 26% 18%), hsl(calc(var(--h) + 40) 22% 11%));
}
.cover .ph::before{
  content:'';position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;
  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='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cover .ph::after{
  content:'';position:absolute;left:1.6rem;right:1.6rem;top:1.6rem;height:1px;background:rgba(241,232,220,.28);
}
.cover .ph b{
  position:relative;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.55rem;line-height:1;letter-spacing:-.03em;color:#f4ede3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow-wrap:anywhere;
}
@media (min-width:760px){ .cover .ph b{font-size:1.9rem} }
.cover .ph s{
  position:relative;text-decoration:none;font-family:var(--ui);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(244,237,227,.6);line-height:1.5;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}


/* ── 15 · GLOBE + FLOATING WIDGET ───────────────────────── */
.globewrap{position:relative;display:flex;justify-content:center;align-items:center;padding:4rem 0;margin-top:2rem}
.globewrap canvas{width:min(64vw,40rem);height:min(64vw,40rem);display:block;cursor:grab;touch-action:pan-y}
.globewrap canvas:active{cursor:grabbing}
.cities{position:absolute;inset:0;pointer-events:none}
.cities span{position:absolute;font-family:var(--ui);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(210,188,188,.55);white-space:nowrap;transform:translateY(-50%)}
.globehint{text-align:center;font-family:var(--ui);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(210,188,188,.4);margin-top:1rem}

.widget{
  position:fixed;left:var(--pad);bottom:calc(env(safe-area-inset-bottom) + 4.6rem);
  z-index:110;display:flex;align-items:center;gap:1.1rem;
  border:1px solid var(--line);border-radius:var(--r);
  background:rgba(248,242,233,.86);backdrop-filter:blur(8px);
  padding:1rem 1.3rem 1rem 1rem;
  opacity:0;transform:translateY(1.2rem);transition:opacity .8s,transform .8s,background .5s,border-color .5s,color .5s;
}
.widget.show{opacity:1;transform:none}
.widget canvas{width:3.6rem;height:3.6rem;display:block}
.widget .wtx b{display:block;font-family:var(--ui);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;font-weight:400}
.widget .wtx s{display:block;text-decoration:none;font-family:var(--ui);font-size:.62rem;letter-spacing:.22em;color:var(--gray);text-transform:uppercase;margin-top:.3rem}
.widget.inv{background:rgba(38,25,26,.88);border-color:rgba(210,188,188,.3);color:var(--rose)}
.widget.inv .wtx s{color:rgba(210,188,188,.6)}
@media (max-width:579px){ .widget{padding:.8rem 1rem .8rem .8rem;gap:.9rem} .widget canvas{width:3rem;height:3rem} }

#world{padding-bottom:14rem}
@media (max-width:759px){
  .globewrap{flex-direction:column;padding:2rem 0}
  .globewrap canvas{width:74vw;height:74vw}
  .cities{position:static;display:flex;flex-wrap:wrap;justify-content:center;
    gap:.7rem 1.4rem;margin-top:2.4rem;max-width:34rem}
  .cities span{position:static!important;transform:none!important;left:auto!important;right:auto!important;
    top:auto!important;text-align:center!important;font-size:.68rem;letter-spacing:.16em}
}
@media (min-width:760px){
  .cities span{font-size:.72rem}
}

/* ── 16 · FACTS STRIP ───────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
@media (min-width:900px){ .facts{grid-template-columns:repeat(4,1fr)} }
.facts > div{border-top:1px solid var(--line);padding:2.4rem 1.4rem 2.4rem 0}
@media (min-width:900px){ .facts > div{padding-right:2.4rem} }
.facts b{display:block;font-family:var(--display);font-weight:400;font-size:min(11vw,4.4rem);
  letter-spacing:-.035em;line-height:1;color:var(--wine)}
.facts span{display:block;margin-top:1rem;font-family:var(--ui);font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gray);line-height:1.9}

/* primary listen link on a release page */
.lk.primary{font-size:1.7rem;color:var(--wine)}
.lk.primary s{color:var(--wine)}

/* scrim so the year badge stays legible over real artwork */
.cover.has-art::before{
  content:'';position:absolute;inset:0 0 auto 0;height:38%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,16,17,.5),rgba(20,16,17,0));
}

/* featured album tiles */
.grid.albums{grid-template-columns:1fr;gap:3rem}
@media (min-width:760px){ .grid.albums{grid-template-columns:repeat(2,1fr)} }
.grid.albums .cap b{font-size:2.4rem}
.grid.albums .cap s{font-size:1.6rem}

/* ── 17 · LIVE STILLS ───────────────────────────────────── */
.grid.live-grid{grid-template-columns:1fr;gap:3rem}
@media (min-width:760px){ .grid.live-grid{grid-template-columns:repeat(2,1fr)} }
.live{display:block;text-decoration:none;color:inherit;perspective:1000px}
.still{
  position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--wine-d);
  transform:translate3d(0,0,0);will-change:transform;transform-style:preserve-3d;
  box-shadow:0 .4rem 2rem rgba(38,25,26,.12);transition:box-shadow .5s;
}
.live:hover .still,.live.act .still{box-shadow:0 2.4rem 5rem rgba(38,25,26,.3)}
.still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform .8s cubic-bezier(.19,1,.22,1)}
.live:hover .still img{transform:scale(1.1)}
.still::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,16,17,.5),rgba(20,16,17,0) 45%,rgba(20,16,17,.35))}
.still .glare{position:absolute;inset:-30%;pointer-events:none;opacity:0;transition:opacity .5s;z-index:2;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),rgba(255,255,255,0) 55%);
  mix-blend-mode:screen}
.live:hover .still .glare,.live.act .still .glare{opacity:1}
.still .yr{position:absolute;left:1.2rem;top:1.1rem;z-index:4;font-family:var(--ui);font-size:.72rem;
  letter-spacing:.2em;color:rgba(241,232,220,.8);transform:translateZ(30px)}
.still .playbig{
  position:absolute;left:50%;top:50%;z-index:4;width:5.4rem;height:5.4rem;border-radius:50%;
  border:1px solid rgba(241,232,220,.65);display:grid;place-items:center;color:rgba(241,232,220,.9);
  font-size:1.4rem;padding-left:.3rem;background:rgba(20,16,17,.28);backdrop-filter:blur(3px);
  transform:translate(-50%,-50%) translateZ(40px) scale(.86);opacity:.75;transition:opacity .45s,transform .45s;
}
.live:hover .still .playbig,.live.act .still .playbig{opacity:1;transform:translate(-50%,-50%) translateZ(40px) scale(1)}
.live .cap{margin-top:1.2rem}
.live .cap b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:-.02em;
  text-transform:uppercase;line-height:1.12}
.live .cap s{display:block;text-decoration:none;font-size:1.4rem;color:var(--dim);margin-top:.35rem}
.live .cap u{display:block;text-decoration:none;font-family:var(--ui);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--wine);margin-top:.7rem}

/* featured live item — full width, bigger type */
.grid.live-grid.solo{grid-template-columns:1fr}
.live.feature .cap b{font-size:2.4rem}
.live.feature .cap s{font-size:1.7rem}
@media (min-width:760px){ .live.feature{grid-column:1/-1} .live.feature .cap b{font-size:3rem} }

/* ── 18 · TRACKLIST ─────────────────────────────────────── */
.tracks{list-style:none;border-top:1px solid var(--line)}
.tracks li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1.6rem;
  padding:1.5rem .3rem;border-bottom:1px solid var(--line);
  transition:background .35s,color .35s,padding-left .35s;
}
.tracks li:hover{background:var(--ink);color:var(--linen);padding-left:1.2rem}
.tracks .n{font-family:var(--ui);font-size:.8rem;letter-spacing:.14em;color:var(--wine);min-width:2.4rem}
.tracks li:hover .n{color:var(--rose)}
.tracks .ti{font-family:var(--display);font-weight:400;font-size:1.4rem;letter-spacing:-.015em;
  text-transform:uppercase;line-height:1.2}
.tracks .du{font-family:var(--ui);font-size:.8rem;letter-spacing:.1em;color:var(--gray)}
.tracks li:hover .du{color:rgba(210,188,188,.7)}
@media (min-width:760px){ .tracks .ti{font-size:1.7rem} }

/* both flagship live items read large */
@media (min-width:760px){ .live.feature{grid-column:auto} }
.live.feature .cap b{font-size:2rem}
@media (min-width:760px){ .live.feature .cap b{font-size:2.4rem} }

/* ══════════════════════════════════════════════════════════
   19 · MOBILE PASS — legibility, tap targets, safe space
   ══════════════════════════════════════════════════════════ */
main{overflow-x:clip}

@media (max-width:759px){
  /* nothing tiny: floor every micro-label at ~10.5px */
  .slabel .tx{font-size:max(.92rem,10.5px)}
  .slabel .no{font-size:max(1rem,11px)}
  .capbar,.capbar .mid{font-size:max(.84rem,10.5px);letter-spacing:.16em}
  .metarow b,.fcols b,.facts span,.fig .lab,.rel .cap u,.live .cap u,
  .tracks .n,.tracks .du,.meter .pc,.globehint,.widget .wtx b,.widget .wtx s,
  .row .meta,.still .yr,.cover .yr{font-size:max(.8rem,10.5px)}
  .metarow span{font-size:max(.9rem,11px)}
  .brand{font-size:max(.88rem,11px)}
  .btn{font-size:max(.72rem,10.5px)}

  /* tap targets */
  .btn{min-height:44px;padding:1rem 1.4rem}
  .lk,.row,.svc,.tracks li{min-height:52px}
  .chs a{min-height:56px}

  /* breathing room so the pinned chrome never sits on the last line */
  section{padding-bottom:9rem}
  footer{padding-bottom:calc(env(safe-area-inset-bottom) + 14rem)}
  .pagehead{padding-top:calc(var(--header-h) + 4rem)}

  /* headline can lean without dragging a scrollbar */
  .h1,.stmt,.mast{overflow:clip}

  /* single-column grids read better than cramped pairs on the smallest screens */
  .grid.live-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .facts b{font-size:min(13vw,4rem)}
}
@media (max-width:400px){
  .grid{grid-template-columns:1fr;gap:2.6rem}
  .rel .cap b{font-size:1.6rem}
  .rel .cap s{font-size:1.5rem}
}

/* the floating widget gets out of the way while you scroll down */
.widget{transition:opacity .45s,transform .45s,background .5s,border-color .5s,color .5s}
.widget.hide{opacity:0;transform:translateY(1.4rem);pointer-events:none}

/* exact figure under the shortened odometer */
.fig .lab i{display:inline-block;margin-top:.5rem;font-style:normal;font-size:.72rem;letter-spacing:.1em;opacity:.6}
@media (max-width:759px){
  .fig .lab i{font-size:max(.72rem,10px)}
  .odo{font-size:min(14vw,6.4rem)}
  .fig{grid-template-columns:1fr;gap:.8rem}
  .fig .lab{text-align:left;max-width:none}
}

@media (max-width:759px){
  .row{grid-template-columns:1fr}
  .row .meta{white-space:normal;text-align:left;order:-1;margin-bottom:.4rem}
  .rel .cap u,.live .cap u{white-space:normal}
  .svc{flex-wrap:wrap}
  .svc dd{text-align:left;flex:1 0 100%;margin-top:.3rem}
}

/* ══════════════════════════════════════════════════════════
   20 · PROSE (journal articles)
   ══════════════════════════════════════════════════════════ */
.prose{max-width:34em;font-size:1.9rem;line-height:1.7}
@media (min-width:760px){ .prose{font-size:2rem} }
.prose p{margin-bottom:2.2rem}
.prose h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.022em;
  font-size:min(7vw,3rem);line-height:1.08;margin:5rem 0 2rem}
.prose ul{margin:0 0 2.2rem 1.6rem}
.prose li{margin-bottom:.8rem}
.prose strong{font-weight:500;color:var(--ink)}
.prose a{color:var(--wine);text-underline-offset:.3em}
.postnav{display:flex;flex-direction:column}

/* ══════════════════════════════════════════════════════════
   21 · FORM
   ══════════════════════════════════════════════════════════ */
.form{margin-top:1rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f2{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:760px){ .f2{grid-template-columns:1fr 1fr;gap:0 3rem} }
.fi{display:block;border-bottom:1px solid var(--line);padding:1.8rem 0 1.2rem}
.fi > span{display:block;font-family:var(--ui);font-size:max(.74rem,10.5px);letter-spacing:.24em;
  text-transform:uppercase;color:var(--gray);margin-bottom:.9rem}
.fi input,.fi select,.fi textarea{
  width:100%;background:none;border:0;outline:none;color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:1.8rem;line-height:1.5;
  padding:0;appearance:none;border-radius:0;
}
.fi textarea{resize:vertical;min-height:12rem}
.fi input::placeholder,.fi textarea::placeholder{color:rgba(20,16,17,.28)}
.fi select{cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--wine) 50%),linear-gradient(135deg,var(--wine) 50%,transparent 50%);
  background-position:calc(100% - 12px) 1.05em,calc(100% - 7px) 1.05em;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.6rem}
.fi:focus-within{border-color:var(--wine)}
.fi:focus-within > span{color:var(--wine)}
.fsub{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;margin-top:3.4rem}
.submit{min-height:52px;padding:1.2rem 2.4rem;font-size:max(.82rem,11px);cursor:pointer}
.fnote{font-family:var(--ui);font-size:max(.76rem,10.5px);letter-spacing:.14em;color:var(--gray)}
.fnote a{color:var(--wine)}
.fmsg{margin-top:2rem;font-family:var(--ui);font-size:max(.82rem,11px);letter-spacing:.14em;
  text-transform:uppercase;min-height:1.4em}
.fmsg.ok{color:#3f7a44}
.fmsg.err{color:#a33}
.form.sent{opacity:.45;pointer-events:none}

/* ── 22 · CREDITS TABLE ─────────────────────────────────── */
.ctab{border-top:1px solid var(--line)}
.dark .ctab{border-color:rgba(210,188,188,.22)}
.chead{display:none}
.crow{display:grid;grid-template-columns:1fr;gap:.5rem;padding:1.8rem 0;border-bottom:1px solid var(--line)}
.dark .crow{border-color:rgba(210,188,188,.18)}
.crow > span{font-family:var(--body);font-size:1rem;line-height:1.45}
.crow > span::before{
  content:attr(data-l);display:block;font-family:var(--ui);
  font-size:max(.62rem,9.5px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gray);margin-bottom:.25rem
}
.dark .crow > span::before{color:rgba(210,188,188,.5)}
.crow b{font-family:var(--display);font-weight:400;font-size:1.15rem;letter-spacing:-.01em}
.crow a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.1rem}
.crow a:hover{opacity:.6}
@media (min-width:900px){
  .chead{
    display:grid;grid-template-columns:1.5fr 1.3fr .4fr 1.5fr 1.3fr;gap:1.6rem;
    padding:1rem 0;font-family:var(--ui);font-size:max(.64rem,10px);
    letter-spacing:.22em;text-transform:uppercase;color:var(--gray);
    border-bottom:1px solid var(--line)
  }
  .dark .chead{color:rgba(210,188,188,.5);border-color:rgba(210,188,188,.18)}
  .crow{grid-template-columns:1.5fr 1.3fr .4fr 1.5fr 1.3fr;gap:1.6rem;align-items:start;padding:1.5rem 0}
  .crow > span::before{display:none}
  .crow > span{font-size:.92rem}
  .crow b{font-size:1.05rem}
}