/* DAEMON GREY design system v2: "Liturgical Industrial" (2026-07-23)
   Cinzel (sacred) / IBM Plex Mono (machine) / Archivo (body)
   Goethean polarity on dark ground: cool-shifted darks (blue principle),
   warm bone light pole (yellow principle), one Purpur accent (Steigerung).
   Proportions: Fibonacci spacing, phi line-height, musical-fourth type scale.
   Rationale: 04-Site-Architecture/design-system.md */
:root{
  --void:#0a0b10;        /* darkness pole, cool undertone */
  --iron:#13151c;
  --rule:#262a35;
  --ash:#d8d3c8;         /* light pole, warm bone */
  --ash-dim:#8f8a80;
  --blood:#c8102e;       /* the one accent */
  --blood-deep:#7c0a1d;
  --verdigris:#4e7a6a;   /* success states only */
  --measure:72rem;       /* BG 72 */
  --gutter:clamp(1.25rem,4vw,3rem);
  /* Fibonacci spacing */
  --s-1:8px;--s-2:13px;--s-3:21px;--s-4:34px;--s-5:55px;--s-6:89px;--s-7:144px;
  /* musical fourth type scale on 17px base */
  --t-1:1.0625rem;--t-2:1.417rem;--t-3:1.889rem;--t-4:2.518rem;--t-5:3.357rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  /* sticky footer: short pages (newsletter 43 words, contact 61) were leaving
     dead space under the footer because the page did not fill the viewport */
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--void);
  color:var(--ash);
  font-family:'Archivo',sans-serif;
  font-size:1.0625rem;
  line-height:1.618;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.04em;color:#fff;text-transform:uppercase}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blood);outline-offset:3px}
.mono{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash-dim)}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}

.sigil{display:flex;align-items:center;gap:.75rem;margin:0 0 2.5rem}
.sigil::before,.sigil::after{content:"";height:1px;background:var(--rule);flex:1}
.sigil span{width:.5rem;height:.5rem;background:var(--blood);transform:rotate(45deg)}

main{flex:1 0 auto}
footer{flex-shrink:0}

/* nav */
header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--void) 88%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:4.25rem}
.mark{font-family:'Cinzel',serif;font-weight:900;font-size:1.15rem;letter-spacing:.12em;color:#fff;text-decoration:none;white-space:nowrap}
.mark em{font-style:normal;color:var(--blood)}
.nav ul{display:flex;gap:clamp(1rem,2.5vw,2.25rem);list-style:none}
.nav ul a{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ash-dim);transition:color .2s}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:#fff}
.btn{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.8rem 1.6rem;text-decoration:none;border:1px solid var(--blood);color:#fff;background:transparent;
  transition:background .2s,color .2s;cursor:pointer;
}
.btn:hover{background:var(--blood)}
.btn--solid{background:var(--blood)}
.btn--solid:hover{background:var(--blood-deep);border-color:var(--blood-deep)}
/* mobile menu (2026-07-23c): hamburger + full-width dropdown panel */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;background:none;border:1px solid var(--rule);
  cursor:pointer;padding:0 10px;transition:border-color .2s;
}
.nav-toggle span{display:block;width:100%;height:1px;background:var(--ash);transition:transform .25s,opacity .2s,background .2s}
.nav-open .nav-toggle{border-color:var(--blood)}
.nav-open .nav-toggle span{background:var(--blood)}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:760px){
  .nav{position:relative;gap:.7rem}
  .nav-toggle{display:flex}
  .nav ul{display:none}
  .nav-open ul{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:var(--void);border-bottom:1px solid var(--blood);
    padding:0 var(--gutter) var(--s-3);z-index:99;
  }
  .nav-open ul li{border-top:1px solid var(--rule)}
  .nav-open ul a{display:block;padding:var(--s-2) 0;font-size:.8rem;letter-spacing:.24em}
  .nav .btn{padding:.55rem 1rem;font-size:.68rem}
}


.about-figure{margin:0 0 var(--s-4)}
.about-figure img{width:100%;height:auto;display:block;border:1px solid var(--rule)}


/* ---- Email slide-in (2026-08-02) ----
   Corner panel, not a full-screen interstitial: it never covers the content
   and never blocks reading. Appears after 10s, once, and stays dismissed. */
.dg-slide{
  position:fixed;right:var(--s-3);bottom:var(--s-3);z-index:200;
  width:min(23rem,calc(100vw - var(--s-3) * 2));
  background:var(--iron);border:1px solid var(--rule);border-top:2px solid var(--blood);
  padding:var(--s-3) var(--s-3) var(--s-3);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  transform:translateY(140%);opacity:0;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),opacity .45s;
}
.dg-slide.is-in{transform:translateY(0);opacity:1}
.dg-slide h3{font-size:.95rem;letter-spacing:.08em;margin:0 0 .5rem;padding-right:1.6rem}
.dg-slide p{font-size:.88rem;line-height:1.5;color:var(--ash-dim);margin:0 0 var(--s-2)}
.dg-slide form{display:flex;gap:.5rem;flex-wrap:wrap}
.dg-slide input[type=email]{
  flex:1 1 9rem;min-width:0;background:var(--void);border:1px solid var(--rule);
  color:var(--ash);padding:.6rem .7rem;font:inherit;font-size:.85rem;
}
.dg-slide input[type=email]:focus{outline:2px solid var(--blood);outline-offset:1px}
.dg-slide .btn{padding:.6rem 1rem;font-size:.68rem}
.dg-slide .fine{display:block;margin-top:var(--s-2);font-family:'IBM Plex Mono',monospace;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash-dim)}
.dg-slide-x{
  position:absolute;top:.4rem;right:.5rem;width:1.9rem;height:1.9rem;
  background:none;border:0;color:var(--ash-dim);font-size:1.15rem;line-height:1;
  cursor:pointer;transition:color .2s;
}
.dg-slide-x:hover{color:#fff}
@media(max-width:620px){
  .dg-slide{right:var(--s-1);left:var(--s-1);bottom:var(--s-1);width:auto}
}
@media(prefers-reduced-motion:reduce){
  .dg-slide{transition:opacity .2s;transform:none}
}

/* hero (home) */
.hero{position:relative;padding:clamp(4rem,10vh,7rem) 0 5rem;overflow:hidden}
.hero .mono{color:var(--blood);margin-bottom:1.25rem;display:block}
.hero h1{font-size:clamp(var(--t-5),11vw,8.5rem);font-weight:900;line-height:.95;letter-spacing:.02em;color:#fff}
.hero h1 .ae{color:var(--blood)}
.hero .mantra{
  font-family:'IBM Plex Mono',monospace;font-size:clamp(.8rem,1.6vw,1rem);letter-spacing:.55em;text-transform:uppercase;
  color:var(--ash-dim);margin:2rem 0 0;padding-left:.25rem;
}
.hero .lede{max-width:34rem;margin:2.25rem 0 2.75rem;color:var(--ash)}
.hero .actions{display:flex;flex-wrap:wrap;gap:1rem}
.hero::before{
  content:"\00C6";
  position:absolute;right:-.05em;top:50%;transform:translateY(-52%);
  font-family:'Cinzel',serif;font-weight:900;font-size:clamp(18rem,42vw,34rem);
  line-height:1;color:transparent;-webkit-text-stroke:1px var(--rule);
  z-index:-1;user-select:none;
}
.release-tag{display:inline-flex;align-items:center;gap:.8rem;border:1px solid var(--rule);padding:.55rem 1rem;margin-top:3rem;flex-wrap:wrap;background:color-mix(in srgb,var(--void) 82%,transparent);backdrop-filter:blur(4px)}
.release-tag b{font-family:'Cinzel',serif;color:#fff;letter-spacing:.1em}

/* page hero (interior pages) */
.page-hero{position:relative;padding:clamp(3rem,7vh,5rem) 0 3rem;overflow:hidden}
.page-hero .mono{color:var(--blood);display:block;margin-bottom:1rem}
.page-hero h1{font-size:clamp(var(--t-3),6vw,var(--t-5));line-height:1.05}
.page-hero .lede{max-width:38rem;margin-top:1.5rem;color:var(--ash-dim)}

/* sections */
section{padding:var(--s-6) 0;border-top:1px solid var(--rule)}
/* Modulor breathing: page rhythm alternates expansion (89) and contraction (55) */
main > section:nth-of-type(even){padding:var(--s-5) 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)}
.sec-head h2{font-size:clamp(var(--t-2),3.5vw,var(--t-4))}
.sec-head .mono a{text-decoration:none}
.sec-head .mono a:hover{color:var(--blood)}

/* discography registry */
.registry{border-top:1px solid var(--rule)}
.registry a{
  display:grid;grid-template-columns:5.5rem 1fr auto auto;gap:1.5rem;align-items:baseline;
  padding:var(--s-3) var(--s-1);border-bottom:1px solid var(--rule);text-decoration:none;
  transition:background .2s,padding-left .2s;
}
.registry a:hover{background:var(--iron);padding-left:1rem}
.registry .no{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--blood);letter-spacing:.2em}
.registry .title{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.05rem,2.4vw,1.5rem);color:#fff;letter-spacing:.06em;text-transform:uppercase}
.registry .kind{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-dim)}
.registry .year{font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--ash-dim)}
@media(max-width:640px){
  .registry a{grid-template-columns:3.4rem 1fr auto}
  .registry .kind{display:none}
}

/* player facade */
.player-facade{
  margin-top:3rem;border:1px solid var(--rule);background:var(--iron);
  padding:2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.player-facade .mono{color:var(--ash)}
#player-slot iframe{width:100%;height:352px;border:0;margin-top:3rem}

/* videos */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.5rem}
.video-card{border:1px solid var(--rule);background:var(--iron);text-decoration:none;transition:border-color .2s;display:block}
.video-card:hover{border-color:var(--blood)}
.video-card .thumb{aspect-ratio:16/9;display:grid;place-items:center;background:radial-gradient(ellipse at center,#1c1a20 0%,var(--void) 75%)}
.video-card .thumb span{
  width:3.4rem;height:3.4rem;border:1px solid var(--blood);border-radius:50%;
  display:grid;place-items:center;color:var(--blood);font-size:.9rem;
}
.video-card figcaption{padding:1.1rem 1.25rem 1.35rem}
.video-card .t{font-family:'Cinzel',serif;color:#fff;letter-spacing:.06em;text-transform:uppercase;font-size:.95rem}
.video-card .mono{display:block;margin-top:.4rem}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem)}
.about-grid .pull{
  font-family:'Cinzel',serif;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.5;color:#fff;
  border-left:2px solid var(--blood);padding-left:1.5rem;align-self:start;position:sticky;top:6.5rem;
}
.about-grid p+p{margin-top:1.25rem}
.about-grid .kicker{color:var(--blood)}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}.about-grid .pull{position:static}}

/* congregation */
.congregation{background:var(--iron);border-top:1px solid var(--rule)}
.congregation .inner{max-width:44rem;margin:0 auto;text-align:center}
.congregation h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin-bottom:1rem}
.congregation p{color:var(--ash-dim);margin-bottom:2.25rem}
.congregation form{max-width:32rem;margin:0 auto}
.congregation .formkit-fields{display:flex;gap:0;flex-wrap:wrap}
.congregation input{
  flex:1;min-width:14rem;background:var(--void);border:1px solid var(--rule);border-right:0;color:var(--ash);
  font-family:'IBM Plex Mono',monospace;font-size:.85rem;padding:.95rem 1.1rem;letter-spacing:.05em;
}
.congregation input::placeholder{color:var(--ash-dim)}
.congregation .mono{display:block;margin-top:1.25rem}

/* merch strip */
.merch-note{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;border:1px solid var(--rule);padding:2rem}
.merch-note h3{font-size:1.1rem;letter-spacing:.08em}
.merch-note p{color:var(--ash-dim);max-width:34rem;margin-top:.5rem}

/* footer */
footer{border-top:1px solid var(--rule);padding:3.5rem 0 4.5rem}
.foot{display:flex;justify-content:flex-start;gap:var(--s-3) var(--s-5);flex-wrap:wrap;align-items:center}
.foot ul{list-style:none;display:flex;gap:1.6rem;flex-wrap:wrap}
.foot ul a{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-dim);text-decoration:none}
.foot ul a:hover{color:#fff}
.foot .fine{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.12em;color:var(--ash-dim);margin-top:1.5rem;width:100%}
.foot .fine a{color:inherit}

/* ------- article / long-form pages ------- */
.dg-article-wrap{max-width:46rem;margin:0 auto;padding:3rem var(--gutter) 5rem}
.dg-article-wrap h2{font-size:clamp(1.35rem,3vw,1.9rem);margin:3rem 0 1.25rem}
.dg-article-wrap h3{font-size:1.05rem;letter-spacing:.08em;margin:2.25rem 0 .9rem;color:#fff}
.dg-article-wrap p{margin:0 0 1.2rem}
.dg-article-wrap ul,.dg-article-wrap ol{margin:0 0 1.2rem 1.4rem}
.dg-article-wrap li{margin-bottom:.45rem}
.dg-article-wrap a{color:#fff;text-decoration-color:var(--blood);text-underline-offset:3px}
.dg-article-wrap a:hover{color:var(--blood)}
.dg-article-wrap em{color:#efece5}
.dg-article-wrap blockquote{border-left:2px solid var(--blood);padding-left:1.4rem;margin:2rem 0;font-family:'Cinzel',serif;color:#fff}
.dg-article-wrap iframe{max-width:100%}
.dg-article-wrap table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.92rem}
.dg-article-wrap th{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim);text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--blood)}
.dg-article-wrap td{padding:.7rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}
.dg-article-wrap .table-scroll{overflow-x:auto}

.dg-quick-answer{border:1px solid var(--blood);background:var(--iron);padding:1.5rem 1.75rem;margin:0 0 2.5rem}
.dg-quick-answer p{margin:0}
.dg-guide-box{border:1px solid var(--rule);background:var(--iron);padding:1.5rem 1.75rem;margin:0 0 2rem}
.dg-guide-box h3{margin:0 0 .8rem}
.dg-guide-box ul{margin:0 0 0 1.2rem}
.dg-cta-box{border:1px solid var(--blood);padding:1.75rem;margin:3rem 0}
.dg-cta-box h3{margin:0 0 .8rem}
.dg-cta-box p{margin:0}

/* article index cards */
.post-list{list-style:none;border-top:1px solid var(--rule)}
.post-list a{
  display:block;padding:2rem .5rem;border-bottom:1px solid var(--rule);text-decoration:none;
  transition:background .2s,padding-left .2s;
}
.post-list a:hover{background:var(--iron);padding-left:1rem}
.post-list .t{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.05rem,2.4vw,1.45rem);color:#fff;letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:.5rem}
.post-list .d{color:var(--ash-dim);max-width:44rem}
.post-list .mono{display:block;margin-top:.7rem}

/* page-builder helpers */
.merch-note--stack{margin-top:1.5rem}
.dg-article-wrap--flush{margin:0;padding:0;max-width:46rem}

/* artist-written story blocks (about page) */
.story-block{padding-block:0}
.story-block .dg-article-wrap{padding-block:var(--s-6) var(--s-5)}
.story-block .sec-head{margin-bottom:var(--s-4)}
.story-block .sec-head h2{margin:0}
.story-block .sec-head .mono{color:var(--ash-dim);white-space:nowrap}
.story-block blockquote{font-size:1.05rem;line-height:1.5}
.story-block .mono a{color:#fff}

/* video facades (real thumbnails, click-to-play) */
button.video-card{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:0}
.video-card .thumb{position:relative;overflow:hidden}
.video-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(35%) contrast(1.05);transition:filter .25s}
.video-card:hover .thumb img{filter:none}
.video-card .thumb .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:3.4rem;height:3.4rem;border:1px solid var(--blood);border-radius:50%;
  display:grid;place-items:center;color:#fff;background:color-mix(in srgb,var(--void) 55%,transparent);
  font-size:.9rem;pointer-events:none;
}
.video-live{aspect-ratio:16/9;border:1px solid var(--blood)}
.video-live iframe{width:100%;height:100%;border:0;display:block}

/* mobile pass (2026-07-23) */
@media(max-width:700px){
  .dg-article-wrap table{display:block;overflow-x:auto}
  .hero .mantra{letter-spacing:.32em}
  .hero{padding:3.4rem 0 3.4rem}
  section{padding:var(--s-5) 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:var(--s-2);margin-bottom:var(--s-4)}
  .release-tag{gap:.5rem;padding:.7rem .9rem}
}
@media(max-width:560px){
  .congregation .formkit-fields{flex-direction:column;gap:.8rem}
  .congregation input{border-right:1px solid var(--rule);width:100%;min-width:0}
  .congregation form .btn{width:100%}
  .merch-note{padding:var(--s-3)}
  .merch-note .btn{width:100%;text-align:center}
  .player-facade{padding:var(--s-3)}
  .player-facade .btn{width:100%;text-align:center}
  .foot{gap:var(--s-3)}
}

/* official branding integration (2026-07-24) */
.mark-img{height:24px;width:auto;display:block}
.hero-logo img{width:min(100%,36rem);height:auto;display:block}
.hero--photo{position:relative;overflow:hidden}
.hero--photo::before{display:none}
.hero-photo{
  position:absolute;top:-9%;right:0;height:118%;width:44%;object-fit:cover;object-position:center 18%;
  will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34%);
  z-index:0;
}
.hero--photo .wrap{position:relative;z-index:1}
.page-hero.hero--photo .hero-photo{width:34%;object-position:center 12%}
@media(max-width:820px){
  .hero-photo{width:100%;opacity:.28;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
  .page-hero.hero--photo .hero-photo{width:100%}
}
.side-stack{display:flex;flex-direction:column;gap:var(--s-4);align-self:start;position:sticky;top:6.5rem}
.side-stack .pull{position:static}
.side-photo{width:100%;height:auto;border:1px solid var(--rule);display:block}
.press-photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s-3);margin:var(--s-3) 0 var(--s-5)}
.press-photo-grid img{width:100%;height:auto;border:1px solid var(--rule);display:block}
.press-photo-grid a:hover img{border-color:var(--blood)}

/* full-page smoke layer (removable: see #dg-smoke script)
   fixed behind all content at z-index:-1: smoke flows through the whole page,
   naturally passing behind sections and cards; no edges anywhere */
.dg-smoke-layer{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* footer guides column: hubs stay 1 click deep from every page */
/* Guides sat as a 16-row column with two thirds of the footer empty beside it.
   Now its own full-width row, links flowing into as many columns as fit. */
.foot-guides{flex:1 1 100%;margin-top:var(--s-2)}
.foot-guides > .mono{display:block;margin-bottom:var(--s-2);color:var(--blood)}
.foot-guides ul{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  gap:var(--s-1) var(--s-4);
}
@media(max-width:620px){
  /* two columns rather than one 16-row scroll */
  .foot-guides ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-1) var(--s-2)}
}
.foot-guides ul a{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim);text-decoration:none}
.foot-guides ul a:hover{color:#fff}

/* ---- Production credits (2026-07-27) -----------------------------------
   Three records, three blocks. Modulor contraction/expansion: the outer
   records breathe at s-5, the middle contracts to s-4, so the stack has a
   rhythm instead of a ruled grid. Separators are gradient, never a hard
   line, per the living-design rule: no straight cuts across the page. */
.credits{padding:var(--s-6) 0}
.credits .lead{max-width:44rem;color:var(--ash-dim);margin-bottom:var(--s-5)}
.record{padding-block:var(--s-5);position:relative}
.record:nth-child(even){padding-block:var(--s-4)}
.record+.record::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--rule) 23.6%,var(--rule) 61.8%,transparent);
}
.record-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-3);margin-bottom:var(--s-3)}
.record-head h3{font-size:var(--t-3);line-height:1.2}
.record-head .yr{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.18em;color:var(--blood)}
.credit-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:var(--s-2) var(--s-4)}
.credit-list dt,.credit-list .role{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash-dim);padding-top:.25rem;
}
.credit-list dd,.credit-list .who{margin:0}
.credit-list .who .for{color:var(--ash-dim);font-size:.94em}
.credit-list a{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.credit-list a:hover{text-decoration-color:var(--blood)}
@media(max-width:700px){
  .credit-list{grid-template-columns:1fr;gap:var(--s-1) 0}
  .credit-list .role{padding-top:var(--s-2)}
}

/* ---- Songwriting method (2026-07-27) ----------------------------------
   Sits between the story and the credits. Modulor: contracts against the
   credits block below it so the page breathes rather than marching. */
.method{padding-block:var(--s-6) var(--s-5)}
.method h2{font-size:var(--t-3);margin-bottom:var(--s-4)}
.method .about-grid p+p{margin-top:var(--s-3)}

/* About: sub-heads inside the story, and quote attribution */
.about-grid h3{font-size:var(--t-2);margin:var(--s-5) 0 var(--s-3);color:var(--ash)}
.about-grid h3:first-child{margin-top:0}
.pull cite{display:block;margin-top:var(--s-2);font-style:normal;font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blood)}

/* ---- Follow gate (2026-07-28) -----------------------------------------
   Asks at the moment of intent: right after someone has read the records.
   Face mark carries the brand into the block. Golden-section split so the
   copy column dominates and the CTA holds its own weight. */
.follow-gate{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:var(--s-3) var(--s-4);margin-top:var(--s-5);padding:var(--s-4);
  border:1px solid var(--rule);
  background:linear-gradient(105deg,rgba(200,16,46,.07),transparent 61.8%);
}
.follow-gate .gate-mark{flex:none;opacity:.9}
.follow-gate h3{font-size:var(--t-2);margin:var(--s-1) 0 var(--s-2)}
.follow-gate p{color:var(--ash-dim);max-width:46ch;margin:0}
.follow-gate .gate-cta{white-space:nowrap}
@media(max-width:720px){
  .follow-gate{grid-template-columns:auto minmax(0,1fr);text-align:left}
  .follow-gate .gate-cta{grid-column:1/-1;justify-self:start;margin-top:var(--s-2)}
  .follow-gate .gate-mark{width:56px;height:56px}
}

/* ---- Interview / Q&A (2026-07-28) -------------------------------------
   Long-form read. Measure held near the golden line for comfort, questions
   set as the structural rhythm, quotes carry the Purpur edge. */
.interview{padding-block:var(--s-6) var(--s-5)}
.interview .lead{color:var(--ash-dim);max-width:44rem;margin-bottom:var(--s-3)}
.interview-mark{display:block;opacity:.75;margin:0 0 var(--s-5)}
.qa{max-width:44rem;padding-block:var(--s-5);position:relative}
.qa+.qa::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--rule),transparent 61.8%);
}
.qa h2{font-size:var(--t-2);line-height:1.3;margin-bottom:var(--s-3);color:#fff}
.qa p{margin-bottom:var(--s-3)}
.qa p:last-child{margin-bottom:0}
.qa blockquote{
  margin:var(--s-3) 0;padding-left:var(--s-3);
  border-left:2px solid var(--blood);
  font-size:1.09rem;line-height:1.55;color:var(--ash);
}
.qa blockquote+blockquote{margin-top:var(--s-3)}

/* Interviews hub + trailing blocks */
.interview-index{padding-block:var(--s-6) var(--s-5)}
.index-note{margin-top:var(--s-5);color:var(--ash-dim)}
.interview-more{padding-block:0 var(--s-6)}
.interview-more p{max-width:44rem;color:var(--ash-dim)}
.epk-links{padding-block:var(--s-4) 0}
.after-form{margin-top:var(--s-3);color:var(--ash-dim);font-size:.94rem}
/* Per-article social note. Styled once, worded differently on every page. */
.dg-social-note{border-left:2px solid var(--blood);padding:var(--s-2) 0 var(--s-2) var(--s-3);margin:var(--s-5) 0}
.dg-social-note h3{font-size:var(--t-2);margin-bottom:var(--s-2)}
.dg-social-note p{color:var(--ash-dim);max-width:46rem;margin:0}
.dg-social-note a{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.dg-social-note a:hover{text-decoration-color:var(--blood)}

/* ---- Song pages (2026-07-28) ------------------------------------------ */
.song-player{margin:0 0 var(--s-5)}
.song-player .video-card{width:100%;max-width:44rem}
/* Lyrics are set the way Daemon writes them: centred, one line per line,
   blank line between stanzas, matching his lyric sheets. The lining is the
   poem, so it is never allowed to reflow into prose. */
/* Alignment follows each record's own lyric sheet: Follow Your Nightmares is
   centred, DAEMONIC and the 17 EP are left-aligned. Measured from the PDFs. */
.lyrics{text-align:left;border-left:2px solid var(--rule);padding:var(--s-3) 0 var(--s-3) var(--s-4);margin:var(--s-4) 0}
.lyrics--centred{text-align:center;border-left:0;padding-left:0}
.lyrics p{margin-bottom:var(--s-3);line-height:1.6;color:var(--ash);text-wrap:pretty}
@media(max-width:620px){
  /* Narrow screens cannot fit every line at full size. Shrink slightly, and
     hang the indent so a line that has to wrap reads as a continuation
     rather than as a new line of the poem. */
  .lyrics{font-size:.9rem;padding-left:var(--s-3)}
  .lyrics p{line-height:1.55;padding-left:1.15em;text-indent:-1.15em}
  .lyrics--centred p{padding-left:0;text-indent:0}
}
.lyrics p:last-child{margin-bottom:0}
.lyrics-credit{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash-dim);margin-bottom:var(--s-5)}

/* Lead paragraph on listing pages */
.news-intro{padding-block:var(--s-5) 0}
.news-intro p{max-width:44rem;color:var(--ash-dim)}

/* Press index: external coverage on the interviews hub */
.press-index{padding-block:var(--s-5) var(--s-6);position:relative}
.press-index::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--rule),transparent 61.8%)}
.press-index>.wrap>p{max-width:44rem;color:var(--ash-dim);margin-bottom:var(--s-4)}
.press-list .mono{color:var(--blood)}

/* Kit form: their script handles submission, our CSS keeps the appearance.
   Neutralise the layout classes Kit's JS expects so nothing shifts. */
.congregation .formkit-form,.congregation .seva-form{max-width:none}
.formkit-alert{margin:var(--s-3) 0 0;padding:var(--s-2) var(--s-3);border:1px solid var(--rule);
  background:var(--iron);color:var(--ash);font-size:.94rem;list-style:none}
.formkit-alert:empty{display:none}
.formkit-alert-success{border-color:var(--verdigris)}
.formkit-alert-error{border-color:var(--blood)}

/* Photo gallery + song photos (2026-07-31) */
.photo-gallery{columns:3 16rem;column-gap:var(--s-3);margin:var(--s-4) 0}
.photo-gallery figure{break-inside:avoid;margin:0 0 var(--s-3)}
.photo-gallery img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.photo-gallery figure:hover img{border-color:var(--blood)}
.photo-gallery figcaption{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.06em;color:var(--ash-dim);padding-top:.45rem}
.song-photo{margin:0 0 2.25rem}
.song-photo img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.song-photo figcaption{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.06em;color:var(--ash-dim);padding-top:.45rem}

/* About bio: text beside a modest photo (2026-07-31) */
.bio-grid{display:grid;grid-template-columns:1fr minmax(12rem,15rem);gap:var(--s-4);align-items:start}
.bio-photo{margin:0}
.bio-photo img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
@media(max-width:44rem){.bio-grid{grid-template-columns:1fr}.bio-photo{max-width:15rem;margin:0 auto}}