/* Stizzle F placeholder theme.
   TEMPORARY visual layer. A redesign can replace this file entirely.
   Direction: warm paper, black type, bold condensed headlines, the photograph
   as the identity, blue used only where it earns attention (the release). */

@font-face{
  font-family:"Archivo";
  src:url("/static/fonts/archivo-var.woff2") format("woff2-variations"),url("/static/fonts/archivo-var.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}

:root{
  --paper:#f4f1ea;
  --paper-2:#ebe7dd;
  --ink:#111110;
  --mute:#5c5851;
  --line:rgba(17,17,16,.16);
  --blue:#1d3fd1;          /* his color */
  --blue-ink:#ffffff;
  --gutter:clamp(16px,4.5vw,64px);
  --max:1360px;
  --inset:max(var(--gutter),calc((100% - var(--max))/2));
  --font:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:800;line-height:.9}

/* condensed display type */
.display,.hero-name,.hero-title,.release-title,.rows .t,.page>h1,.story h2,.foot-name,section h2{
  font-stretch:62%;font-weight:850;text-transform:uppercase;letter-spacing:-.01em;word-spacing:.12em}

/* small caps-style labels */
.status,.kicker,.m,.more,.note,.fine,.site-header nav a,.site-footer nav a,.loc,dt,.listen{
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.m,.note,.fine,dt{color:var(--mute)}

.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* header */
.site-header{display:flex;justify-content:space-between;align-items:center;padding:18px var(--inset);position:relative;z-index:5}
.wordmark{text-decoration:none;font-stretch:62%;font-weight:850;font-size:20px;text-transform:uppercase;letter-spacing:.01em}
.site-header ul{display:flex;gap:clamp(18px,3vw,36px);list-style:none;margin:0;padding:0}
.site-header nav a{text-decoration:none}
.site-header nav a:hover,.site-header nav a[aria-current]{color:var(--blue)}
.page-home .wordmark{visibility:hidden}  /* the hero name is the wordmark on home */

/* ---------- HERO ---------- */
.hero-name{
  font-size:clamp(76px,25.4vw,430px);line-height:.78;
  padding:0 var(--inset) clamp(10px,1.4vw,22px);margin-top:-6px;
  white-space:nowrap;
}
.hero-stage{position:relative}
.hero-photo img{width:100%;height:auto}
.hero-slot{aspect-ratio:3/2;display:grid;place-items:center;background:var(--paper-2)}

.hero-release{position:absolute;top:clamp(20px,4vw,64px);right:var(--inset);width:min(430px,32vw);display:grid;gap:10px}
.hero-title{font-size:clamp(56px,7vw,112px);line-height:.85}
.hero-release-id{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:end}
.hero-release-id>div{display:grid;gap:8px}
.hero-cover img{width:112px;height:auto;box-shadow:0 10px 30px rgba(17,17,16,.25)}
.status{display:flex;align-items:center;gap:8px}
.status::before{content:"";width:8px;height:8px;background:var(--blue);display:inline-block}

/* ---------- THE EVEN CTA ----------
   Rectangular, typographic, full-width within its column. Reads like a record
   sticker or ticket stub, not a rounded app button. */
.even{display:flex;align-items:center;justify-content:space-between;gap:18px;text-decoration:none;
  font-stretch:75%;font-weight:850;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.even--block{background:var(--ink);color:var(--paper);padding:20px 22px;font-size:clamp(19px,1.7vw,24px);margin-top:10px}
.even--block .even-arrow{font-size:1.35em;transition:transform .25s ease}
.even--block:hover{background:var(--blue);color:var(--blue-ink)}
.even--block:hover .even-arrow{transform:translate(3px,-3px)}
.even--line{display:inline-flex;font-size:clamp(20px,2.4vw,30px);border-bottom:3px solid currentColor;padding-bottom:6px}
.even--line:hover{color:var(--blue)}

/* phone hero: art-directed crop, everything important on the first screen */
@media (max-width:700px){
  .page-home .site-header{padding-bottom:6px}
  .hero{display:flex;flex-direction:column;min-height:100svh}
  .hero-name{font-size:26.6vw;padding-bottom:8px}
  .hero-stage{display:flex;flex-direction:column;flex:1}
  .hero-photo img{height:min(125vw,56svh);width:100%;object-fit:cover;object-position:50% 35%}
  .hero-release{position:static;width:auto;padding:18px var(--inset) 22px;gap:8px}
  .hero-title{font-size:15vw}
  .hero-cover img{width:84px}
  .hero-cover{margin-top:-46px;position:relative;z-index:1;align-self:start}
  .hero-cover img{outline:4px solid var(--paper)}
  .hero-release-id{gap:14px}
  .even--block{padding:18px 18px;font-size:19px}
}

/* ---------- CURRENT RELEASE ----------
   Cream ground, the official artwork untouched, oversized title, black EVEN block.
   The artwork supplies the blue; the page does not re-sample it. */
.release{background:var(--paper-2);padding:clamp(56px,9vw,130px) var(--inset);border-top:2px solid var(--ink)}
.release-inner{display:grid;gap:clamp(28px,4.5vw,72px);align-items:center}
@media (min-width:900px){.release-inner.has-art{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.cover img{width:100%;height:auto;box-shadow:0 24px 60px rgba(17,17,16,.22)}
.release-copy{display:grid;gap:16px;align-content:center}
.release-title{font-size:clamp(88px,16vw,260px);line-height:.78}
.release-inner.has-art .release-title{font-size:clamp(80px,11.5vw,200px)}
.kicker-line{font-size:clamp(18px,1.6vw,22px);font-weight:600}
.msg{font-size:clamp(18px,1.6vw,22px);max-width:44ch}
.benefits{margin:0;padding-left:1.1em;font-size:18px}
.price{font-weight:700;letter-spacing:.04em}
.release .even--block{max-width:560px}

/* ---------- sections ---------- */
section{padding:clamp(56px,9vw,120px) var(--inset)}
section.hero{padding:0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px}
section h2{font-size:clamp(44px,7vw,104px)}
.more{text-decoration:none;display:inline-flex;gap:8px;align-items:center;border-bottom:2px solid currentColor;padding-bottom:3px;width:fit-content}
.more:hover{color:var(--blue)}

.rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.rows li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;padding:16px 0;border-bottom:1px solid var(--line)}
.rows .t{font-size:clamp(30px,4.6vw,62px);line-height:.95;flex:1 1 260px}
.rows li:hover .t{color:var(--blue)}
.listen{text-decoration:none;border-bottom:2px solid currentColor}
.listen:hover{color:var(--blue)}

.story{display:grid;gap:clamp(24px,4vw,56px);align-items:end;background:var(--paper-2)}
@media (min-width:900px){.story{grid-template-columns:minmax(0,5fr) minmax(0,5fr)}}
.story-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.story-copy{display:grid;gap:16px;align-content:end;padding-bottom:6px}
.story h2{font-size:clamp(48px,6.5vw,96px)}
.kicker{color:var(--mute)}

/* ---------- inner pages ---------- */
.page>h1{font-size:clamp(84px,17vw,260px);line-height:.78;padding:clamp(20px,4vw,48px) var(--inset) clamp(28px,5vw,64px)}
.page>section{padding-top:0}
.page>section.release{padding-top:clamp(56px,10vw,140px);margin-bottom:clamp(40px,7vw,96px)}
.page .note{margin-bottom:18px;text-transform:none;letter-spacing:.01em;font-weight:500;font-size:15px}
.page .empty{padding:0 var(--inset) 80px}

.about-grid{display:grid;gap:clamp(28px,4vw,64px);padding:0 var(--inset) clamp(56px,9vw,120px)}
@media (min-width:900px){.about-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}}
.about-photo img{width:100%}
.about-copy{display:grid;gap:20px;font-size:18px}
.about-copy .lead{font-size:clamp(26px,3vw,40px);line-height:1.12;font-weight:600;letter-spacing:-.01em}
.facts{margin:10px 0 0;border-top:2px solid var(--ink)}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dd{margin:0;text-align:right;font-weight:600}
.profiles{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 24px}
.profiles a{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid currentColor}
.profiles a:hover{color:var(--blue)}
.crosslink{padding:0 var(--inset) 80px}

.video{margin-bottom:56px}
.video h2{font-size:36px;margin-bottom:6px}
.yt{position:relative;display:block;margin-top:14px;aspect-ratio:16/9;background:#000;overflow:hidden}
.yt img,.yt iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.yt .play{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:#fff;background:rgba(0,0,0,.2)}
.press{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.press li{padding:22px 0;border-bottom:1px solid var(--line);display:grid;gap:8px}
.press h2{font-size:30px}

/* ---------- footer ---------- */
.site-footer{border-top:2px solid var(--ink);padding:40px var(--inset) 32px;display:grid;gap:32px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px}
.foot-name{font-size:clamp(56px,10vw,140px);line-height:.8}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:10px 22px}
.site-footer nav a{text-decoration:none}
.site-footer nav a:hover{color:var(--blue)}

@media (max-width:520px){
  .site-header nav a{font-size:12px}
  .site-header ul{gap:16px}
  .rows .t{flex-basis:100%}
}

/* preview-only markers (never rendered in production builds) */
.todo{background:#fff1d6;color:#7a4300;border:1px dashed #b86a00;padding:1px 6px;font:600 11px/1.6 ui-monospace,Menlo,monospace;
  letter-spacing:0;text-transform:none;vertical-align:middle;white-space:normal;display:inline-block;justify-self:start;width:fit-content;word-spacing:normal;font-stretch:100%}
.release .todo{background:#fff1d6}
.preview-bar{position:fixed;bottom:12px;right:12px;z-index:200;max-width:min(440px,calc(100vw - 24px));
  background:#fff8ea;border:1px solid #b86a00;color:#4a2a00;font:12px/1.5 ui-monospace,Menlo,monospace;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.preview-bar summary{cursor:pointer;padding:10px 14px}
.preview-bar ol{margin:0;padding:0 14px 12px 32px}
.preview-bar li{margin-top:4px}


@media (max-width:700px) and (max-height:720px){
  .hero-photo img{height:min(115vw,50svh)}
  .hero-title{font-size:13vw}
}

/* about + music extras */
.about-links a,.crosslink a{font-weight:600}
.listen--even{color:var(--blue)}

/* press & archive timeline */
.press-intro{padding:0 var(--inset) clamp(28px,4vw,48px);font-size:clamp(20px,2vw,26px);font-weight:500;max-width:calc(var(--max) + 2*var(--gutter));line-height:1.3}
.press-intro{max-width:none}
.timeline{list-style:none;margin:0 var(--inset) clamp(56px,9vw,120px);padding:0;border-top:2px solid var(--ink)}
.timeline .entry{display:grid;grid-template-columns:clamp(70px,12vw,180px) 1fr;gap:clamp(12px,3vw,40px);padding:22px 0;border-bottom:1px solid var(--line)}
.timeline .year{font-stretch:62%;font-weight:850;font-size:clamp(34px,5vw,72px);line-height:.85}
.timeline .entry-body{display:grid;gap:8px}
.timeline h2{font-stretch:75%;font-size:clamp(22px,2.4vw,34px);line-height:1.05;text-transform:none;letter-spacing:0}
.timeline h2 a{text-decoration:none}
.timeline h2 a:hover{color:var(--blue);text-decoration:underline}
.timeline .current .year{color:var(--blue)}
.timeline .current h2{text-transform:uppercase;font-stretch:62%;font-size:clamp(30px,3.4vw,48px)}

/* ---------- MOTION ----------
   Transform/opacity only (no layout thrash). Everything is visible without JS,
   and all of it switches off under prefers-reduced-motion. */
:root{--ease:cubic-bezier(.16,1,.3,1)}

/* hero: name wipes up, photo settles, release follows */
.js .hero-name{clip-path:inset(0 0 100% 0);transform:translateY(18%);transition:clip-path 1.1s var(--ease),transform 1.1s var(--ease)}
.js.is-loaded .hero-name{clip-path:inset(0 0 -10% 0);transform:none}
.hero-photo{display:block;overflow:hidden}
.hero-photo img{will-change:transform}
.js .hero-photo img{transform:scale(1.18);transition:transform 2.2s var(--ease)}
.js.is-loaded .hero-photo img{transform:scale(1.1)}
@media (max-width:700px){.js .hero-photo img{transform:scale(1.08)}.js.is-loaded .hero-photo img{transform:scale(1)}}
.js .hero-release>*{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js.is-loaded .hero-release>*{opacity:1;transform:none}
.js.is-loaded .hero-release>*:nth-child(1){transition-delay:.45s}
.js.is-loaded .hero-release>*:nth-child(2){transition-delay:.6s}
.js.is-loaded .hero-release>*:nth-child(3){transition-delay:.7s}

/* scroll reveals (JS adds .reveal and later .in) */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* EVEN block: color fills from the left, arrow lifts */
.even--block{position:relative;overflow:hidden;isolation:isolate;transition:color .35s var(--ease)}
.even--block::before{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:-1}
.even--block:hover{background:var(--ink);color:#fff}
.even--block:hover::before{transform:scaleX(1)}
.even--block .even-arrow{transition:transform .35s var(--ease)}
.even--block:hover .even-arrow{transform:translate(4px,-4px)}
.even--line{background:linear-gradient(var(--blue),var(--blue)) left bottom/0 3px no-repeat;border-bottom-color:var(--ink);transition:background-size .45s var(--ease),color .3s}
.even--line:hover{background-size:100% 3px}

/* cover + photos: gentle lift */
.cover img,.story-photo img,.about-photo img{transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.cover:hover img{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 36px 70px rgba(17,17,16,.28)}
.story-photo,.about-photo{display:block;overflow:hidden}
.story-photo:hover img,.about-photo:hover img{transform:scale(1.03)}

/* catalog rows slide on hover */
.rows .t{transition:transform .45s var(--ease),color .3s}
.rows li:hover .t{transform:translateX(10px)}
.more span{transition:transform .35s var(--ease)}
.more:hover span{transform:translateX(5px)}
.site-header nav a{transition:color .25s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .hero-name,.js .hero-photo img,.js .hero-release>*,.js .reveal{clip-path:none!important;opacity:1!important;transform:none!important}
}