:root{
  --bg:#0b0a09;
  --bg-soft:#131210;
  --panel:#151412;
  --cream:#e7dece;
  --muted:#9e978d;
  --line:#2d2a26;
  --red:#8d1c18;
  --red-soft:#ba2c25;
  --shadow:0 18px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--cream);font-family:"IBM Plex Mono",monospace;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.08;z-index:20;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.site-header{position:fixed;top:0;left:0;right:0;z-index:15;height:72px;padding:0 4vw;display:flex;align-items:center;gap:2rem;background:linear-gradient(rgba(11,10,9,.96),rgba(11,10,9,.84),rgba(11,10,9,.1));border-bottom:1px solid rgba(231,222,206,.12);backdrop-filter:blur(4px)}
.brand,.nav a,.button,h1,h2,h3,.statement,.work-card span,.lyric-panel summary,.lead{font-family:"Archivo Black",sans-serif}
.brand{display:inline-flex;align-items:center;gap:.8rem;letter-spacing:-.04em;font-size:1.15rem}.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 6px 18px rgba(0,0,0,.35);border:1px solid rgba(231,222,206,.14)}.brand span{display:inline-block}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;color:var(--cream);font:inherit;letter-spacing:.16em}
.nav{margin-left:auto;display:flex;gap:1.8rem;align-items:center}
.nav a{font-size:.74rem;letter-spacing:.16em;opacity:.92}
.nav a:hover,.button:hover,.release-links a:hover,.finale-links a:hover{color:#ff6a60}
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:9rem 6vw 6rem;overflow:hidden}
.hero-sun,.final-sun{position:absolute;border-radius:50%;background:radial-gradient(circle at 44% 38%, #be3027 0%, #8d1c18 44%, #58100e 70%, transparent 71%)}
.hero-sun{width:min(70vw,860px);aspect-ratio:1;right:-8vw;top:6vh;opacity:.9;filter:contrast(1.15) saturate(1.05)}
.hero-land{position:absolute;left:0;right:0;bottom:0;height:35%;background:
 linear-gradient(168deg,transparent 0 42%, #151412 43%),
 linear-gradient(186deg,transparent 0 50%, #10100e 51%);
 border-top:1px solid rgba(231,222,206,.1)}
.hero-birds{position:absolute;right:18vw;top:24%;width:22vw;min-width:220px;height:120px;opacity:.28;background:radial-gradient(circle at 10% 25%, #060606 0 8px, transparent 9px),radial-gradient(circle at 24% 38%, #060606 0 7px, transparent 8px),radial-gradient(circle at 40% 30%, #060606 0 6px, transparent 7px),radial-gradient(circle at 55% 48%, #060606 0 5px, transparent 6px),radial-gradient(circle at 70% 38%, #060606 0 4px, transparent 5px),radial-gradient(circle at 86% 55%, #060606 0 4px, transparent 5px)}
.hero-figure{position:absolute;right:19vw;bottom:16%;width:14px;height:48px;background:#040404;border-radius:10px 10px 3px 3px;box-shadow:0 -8px 0 -2px #040404}
.hero-copy{position:relative;z-index:1;max-width:740px}
.eyebrow,.section-label,.release-type{font-size:.72rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
h1,h2,h3{margin:0;line-height:.9;text-transform:uppercase;letter-spacing:-.06em}
h1{font-size:clamp(4.8rem,14vw,12rem);text-shadow:4px 4px 0 rgba(0,0,0,.28)}
.statement{margin:1.6rem 0 0;font-size:clamp(1.15rem,2.2vw,2.4rem);letter-spacing:.18em}
.hero-links{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.95rem 1.2rem;border:1px solid rgba(231,222,206,.2);font-size:.78rem;letter-spacing:.16em;background:rgba(255,255,255,.03)}
.button.ghost{background:transparent}

.latest-release{
  position:relative;
  max-width:1360px;
  margin:0 auto;
  padding:7rem 6vw;
  display:grid;
  grid-template-columns:minmax(280px,520px) minmax(280px,1fr);
  gap:4rem;
  align-items:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(130deg,rgba(141,28,24,.12),transparent 48%);
}
.latest-art{position:relative;min-width:0;width:100%;max-width:520px;aspect-ratio:1 / 1;align-self:center}
.latest-art::after{content:"CURRENT";position:absolute;right:-1rem;top:1rem;padding:.45rem .65rem;background:var(--red);color:var(--cream);font-family:"Archivo Black",sans-serif;font-size:.68rem;letter-spacing:.18em;transform:rotate(3deg)}
.latest-art img{display:block;width:100%;height:100%;aspect-ratio:1 / 1;object-fit:cover;object-position:center;border:1px solid var(--line);box-shadow:var(--shadow)}
.latest-copy h2{font-size:clamp(2.8rem,6vw,6rem);margin:.35rem 0 1.2rem}
.latest-copy blockquote{margin:1.2rem 0 1.6rem;padding-left:1rem;border-left:3px solid var(--red-soft);font-size:1.15rem}

.thread{position:absolute;left:50%;top:95vh;width:2px;height:420vh;background:linear-gradient(transparent,rgba(186,44,37,.95) 2%,rgba(186,44,37,.95) 98%,transparent);box-shadow:0 0 14px rgba(186,44,37,.45);transform:scaleY(.18);transform-origin:top}
.section{position:relative;max-width:1360px;margin:0 auto;padding:9rem 6vw;border-top:1px solid var(--line)}
.section h2{font-size:clamp(3.6rem,9vw,8.6rem);margin:.25rem 0 1rem}
.intro{max-width:820px;color:#b9b2a8}
.works-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;margin-top:3rem}
.work-card{display:block;position:relative;overflow:hidden;background:#111;border:1px solid #2b2824;box-shadow:var(--shadow);transition:transform .25s ease,border-color .25s ease;aspect-ratio:1 / 1}
.work-card:hover{transform:translateY(-4px);border-color:#575047}
.work-card img{display:block;aspect-ratio:1 / 1;object-fit:cover;width:100%;height:100%}
.work-card span{position:absolute;left:0;right:0;bottom:0;padding:1rem;font-size:.95rem;line-height:1.05;background:linear-gradient(transparent,rgba(0,0,0,.95));text-transform:uppercase}
.square-cover{position:relative;width:100%;aspect-ratio:1 / 1;overflow:hidden;background:#111}
.square-cover img{width:100%;height:100%;object-fit:cover;object-position:center}
.release-media{border:0;min-width:0}
.release-list{margin-top:5.5rem;display:grid;gap:3rem}
.release{display:grid;grid-template-columns:minmax(280px,420px) minmax(280px,1fr);gap:2rem;align-items:center;padding:1.35rem;border:1px solid var(--line);background:linear-gradient(180deg,#131210,#0d0c0b)}
.release.reverse{grid-template-columns:minmax(280px,1fr) minmax(280px,420px)}
.release.reverse img{order:2}
.release img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;background:#111;box-shadow:var(--shadow)}
.release-copy blockquote{margin:1rem 0 1.4rem;padding-left:1rem;border-left:3px solid var(--red-soft);font-size:1.08rem;color:#f0e8da}
.release-links,.finale-links{display:flex;gap:1rem;flex-wrap:wrap}
.release-links a,.finale-links a{display:inline-flex;border-bottom:1px solid rgba(231,222,206,.2);padding-bottom:.25rem}

.photo-break{
  position:relative;
  max-width:1500px;
  margin:0 auto;
  padding:3rem 5vw 8rem;
  display:grid;
  grid-template-columns:1.55fr .78fr .78fr;
  grid-template-areas:"one two three" "one words words";
  gap:1.1rem;
  overflow:hidden;
}
.photo-break::before{
  content:"";
  position:absolute;
  left:0; right:0; top:12%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--red-soft),transparent);
  opacity:.55;
}
.photo-break figure{margin:0;position:relative;background:#090909;border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}
.photo-break img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.08) brightness(.92)}
.photo-wide{grid-area:one;min-height:560px}
.photo-two{grid-area:two}
.photo-three{grid-area:three}
.photo-tall{min-height:270px}
.photo-break figcaption{
  position:absolute;left:1rem;bottom:1rem;
  padding:.45rem .65rem;background:rgba(8,8,7,.82);
  border:1px solid rgba(231,222,206,.16);
  color:var(--cream);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase
}
.photo-words{
  grid-area:words;
  min-height:180px;
  border:1px solid var(--line);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:
    linear-gradient(115deg,rgba(141,28,24,.12),transparent 45%),
    #11100f;
  text-transform:uppercase
}
.photo-words span,.photo-words strong,.photo-words em{display:block;font-style:normal}
.photo-words span{font-size:.72rem;letter-spacing:.22em;color:var(--muted)}
.photo-words strong{font-family:"Archivo Black",sans-serif;font-size:clamp(2rem,4vw,4rem);line-height:.9;margin:.35rem 0;color:var(--cream)}
.photo-words em{font-size:.68rem;letter-spacing:.16em;color:var(--red-soft)}
.about-images{display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:"main logo" "secondary secondary";gap:1rem;align-items:end;margin-top:2rem}.about-photo.main{grid-area:main}.about-photo.secondary{grid-area:secondary}.about-mark{grid-area:logo;align-self:start}
.about-photo{margin:0;border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}
.about-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(100%) contrast(1.06)}.about-photo.secondary img{aspect-ratio:auto;height:auto;object-fit:contain;object-position:center top;background:#0b0a09}.about-mark img{background:#0f0e0d}.about-side-photo{margin:2rem 0 0;border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}.about-side-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(100%) contrast(1.06)}

.words .lyric-panel{border:1px solid var(--line);background:var(--panel);margin-top:1.4rem}
.lyric-panel summary{cursor:pointer;list-style:none;padding:1.2rem 1.3rem;font-size:1.1rem;letter-spacing:-.03em;display:flex;align-items:center;justify-content:space-between}
.lyric-panel summary::-webkit-details-marker{display:none}
.lyric-panel summary::after{content:'+';font-family:"IBM Plex Mono",monospace;font-size:1.3rem;color:var(--red-soft)}
.lyric-panel[open] summary::after{content:'−'}
.lyric-body{padding:0 1.3rem 1.5rem;color:#d8d0c2;white-space:normal}
.lyric-body p{margin:0 0 1.25rem}
.art-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1.25rem;margin-top:2.5rem}
.art-grid figure{margin:0;background:#111;border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}
.art-grid img{aspect-ratio:1;object-fit:cover;width:100%}
.art-grid figcaption{padding:.9rem 1rem;text-transform:uppercase;font-size:.8rem;letter-spacing:.16em;color:#beb7ad}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}.about-mark{margin:2rem 0 0;max-width:240px}.about-mark img{width:100%;border-radius:50%;display:block;box-shadow:var(--shadow);border:1px solid var(--line)}
.lead{font-size:clamp(2rem,4.5vw,4.6rem);line-height:1.02;margin:0;text-transform:uppercase}

.archive-heading{margin-top:6rem;max-width:880px}
.archive-heading h3{font-size:clamp(2rem,4vw,4rem);margin:.4rem 0 1rem}
.archive-heading p:last-child{color:#aaa399}
.archive-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;margin-top:2rem}
.archive-grid figure{margin:0;background:#111;border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}
.archive-grid img{width:100%;aspect-ratio:1;object-fit:cover}
.archive-grid figcaption{padding:.75rem .85rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#beb7ad}
.pending{color:var(--muted);font-style:italic}
.history-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:5rem;background:var(--line);border:1px solid var(--line)}
.history-timeline div{background:#11100f;padding:1.5rem}
.history-timeline span{display:block;font-family:"Archivo Black",sans-serif;font-size:clamp(2rem,4vw,4rem);color:var(--red-soft);line-height:1}
.history-timeline p{margin:.8rem 0 0;color:#b7afa4}

.finale{position:relative;min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7rem 6vw;text-align:center;overflow:hidden}
.final-sun{width:min(56vw,620px);aspect-ratio:1;opacity:.78}
.finale > *:not(.final-sun){position:relative;z-index:1}
.finale p{letter-spacing:.22em;color:var(--muted)}
.finale h2{font-size:clamp(3.2rem,8vw,7rem)}
.site-footer{height:84px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:.68rem;letter-spacing:.18em;color:#8f877c}.footer-brand{display:inline-flex;align-items:center;gap:.8rem}.footer-brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid rgba(231,222,206,.12)}
@media (max-width: 1080px){
  .archive-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .works-grid,.art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .thread{left:82%}
}
@media (max-width: 780px){
  .latest-release{grid-template-columns:1fr;padding:5rem 5vw;gap:2rem}
  .latest-art::after{right:.5rem}
  .archive-grid{grid-template-columns:1fr 1fr}
  .history-timeline{grid-template-columns:1fr}
  .photo-break{grid-template-columns:1fr;grid-template-areas:none;padding:2rem 5vw 6rem}
  .photo-wide,.photo-tall{grid-row:auto;grid-area:auto;min-height:0}
  .photo-wide img{aspect-ratio:4/3}
  .photo-tall img{aspect-ratio:4/3}
  .about-images{grid-template-columns:1fr;grid-template-areas:"main" "secondary" "logo"}

  .site-header{height:64px;padding:0 5vw}
  .brand img{width:36px;height:36px}
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;padding:1rem 5vw 1.5rem;background:#0b0a09;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:1rem}
  .site-header.open .nav{display:flex}
  .hero{padding:8rem 5vw 5rem}
  .hero-sun{width:112vw;right:-48vw;top:12vh}
  .thread{left:88%}
  .section{padding:7rem 5vw}
  .release,.release.reverse,.about-grid{grid-template-columns:1fr}
  .release.reverse img{order:0}
  .works-grid,.art-grid{grid-template-columns:1fr}
  .site-footer{height:auto;gap:.5rem;flex-direction:column;padding:1.1rem 5vw;text-align:center}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* v3.2 — original atmospheric hero restored; panoramic art remains in assets for future use. */
.hero-copy{isolation:isolate}
.frank-work-card{border-color:rgba(186,44,37,.65)}
.frank-work-card span small{font:600 .62rem "IBM Plex Mono",monospace;letter-spacing:.12em;color:#e8a59e;white-space:nowrap}
.frank-release{border-color:rgba(186,44,37,.45)}
.new-lyrics-tag{display:inline-block;margin-left:.8rem;padding:.18rem .4rem;vertical-align:middle;border:1px solid rgba(186,44,37,.7);font:600 .65rem "IBM Plex Mono",monospace;letter-spacing:.12em;color:#e8a59e}
.lyric-panel{scroll-margin-top:5.8rem}
.frank-outro{font-weight:700;letter-spacing:.05em}
@media(max-width:780px){
 .latest-art{max-width:min(100%,520px);margin-inline:auto}
 .latest-copy h2{font-size:clamp(3.4rem,14vw,6rem)}
}


/* v3.4: release art is always an independent square frame.
   Never give release <img> height:100% against a variable-height grid row.
   Text determines its own height without stretching the sleeve. */
.release{align-items:center}
.release > .release-media{
  display:block;
  position:relative;
  width:100%;
  min-width:0;
  height:auto;
  aspect-ratio:1 / 1;
  overflow:hidden;
  align-self:center;
  background:#111;
  box-shadow:var(--shadow);
}
.release > .release-media img{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
  box-shadow:none;
}
/* Main new-release image, and all nine catalogue sleeves */
.latest-art{aspect-ratio:1 / 1;min-height:0}
.latest-art > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work-card{aspect-ratio:1 / 1;min-height:0}
.work-card > img,.work-card > .square-cover{display:block;width:100%;height:100%;aspect-ratio:1 / 1}
.work-card > img{object-fit:cover}
.work-card > .square-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Archive artwork also stays in consistent square tiles. */
.art-grid img,.archive-grid img{display:block;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover}

/* Keep the earlier right-hand image layout for While We Sleep. */
@media (min-width:781px){
  .release.reverse > .release-media{order:2}
  .release.reverse > .release-copy{order:1}
}
@media (max-width:780px){
  .release.reverse > .release-media,.release.reverse > .release-copy{order:initial}
}