/* HIDDEN DAWN - shared stylesheet Aesthetic cloned from the live splash: blurred sunset bg, film grain, gold blackletter wordmark, bone/silver palette. */

/* ---- Fonts ---- */
@font-face{
  font-family:"Old London";
  src:url("/assets/fonts/OldLondon.woff2") format("woff2");
  font-display:swap;font-style:normal;font-weight:400;
}
/* Self-hosted Google fonts (no external request). latin + latin-ext subsets. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/cormorant-garamond-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/cormorant-garamond-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-400i-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-400i-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-garamond-500i-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-garamond-500i-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'UnifrakturCook';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/unifrakturcook-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --ink:#08060a;            /* deep black - shadows / gradients */
  --ink-veil:0 1px 1px rgba(8,6,10,0.2); /* whisper of separation for warm text over the bright bg */
  --sigil:#ecc9a3;          /* crest/emblem color - link icons + inline text links */
  --sigil-hover:#f5dab9;
  --silver:#d0d0d0;         /* primary light - true silver, shared app-wide (tagline + body text) */
  --silver-dim:#bcbcbc;     /* secondary text / hover */
  --gold-deep:#a8823c;      /* wordmark - deep gilt (darker value of the nav gold) */
  /* Gold ramp continues at the nav block below: --nav #c4a572 (primary),
     --nav-hover #d8bd8e. Bright warm accent (icons + text links) = --sigil #ecc9a3. */
}

*{box-sizing:border-box}

/* Screen-reader-only utility (visually hidden, still announced).
   A system font here keeps the off-screen <h1> from pulling a webfont
   (Cormorant) onto the splash's critical path - it's never seen anyway. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  font-family:Georgia,serif;
}

html,body{
  margin:0;padding:0;
  background:#1a0d05;color:var(--silver);
  width:100%;height:100vh;height:100dvh;
  overscroll-behavior:none;
}

body{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  position:relative;
  /* App shell: a fixed-height column. The nav (top) and footer (bottom) are
     persistent; only the content region between them scrolls, so content can
     never slide behind the header or footer. */
  display:flex;flex-direction:column;overflow:hidden;
}
/* Reveal: the background AND the emblem (the LCP image - it carries no webfont)
   paint immediately and stay static; only the font-bearing content (wordmark +
   tagline, social icons, nav, footer, inner-page bodies) fades in once the
   display fonts load. So there's no blackletter FOUT and the bg never "settles"/
   snaps on mobile, while the emblem is free to be the Largest Contentful Paint
   without waiting on fonts. (.emb / .inner are deliberately NOT gated - an
   opacity:0 parent would hide the emblem regardless of its own opacity.) */
.nav,.wordmark-block,.socials,.page-wrap,.anno{transition:opacity .4s ease-out}
body:not(.ready) .nav,
body:not(.ready) .wordmark-block,
body:not(.ready) .socials,
body:not(.ready) .page-wrap,
body:not(.ready) .anno{opacity:0}

/* ---- Background + grain (fixed, shared by every page) ---- */
.bg{
  /* Plain fixed full-bleed cover: no transform, no viewport-height units, so
     nothing recomputes or jitters when the mobile viewport resolves on load.
     inset:-3px hides any sub-pixel blur fringe at the edges. */
  position:fixed;inset:-3px;z-index:0;
  background-image:url("/assets/sunset.jpg");
  background-image:image-set(url("/assets/sunset.avif") type("image/avif"), url("/assets/sunset.jpg") type("image/jpeg"));
  background-size:cover;background-position:center center;
  filter:blur(0.74px) saturate(0.88) brightness(0.88) contrast(1.08);
}
.bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(8,6,10,0.55) 0%, rgba(8,6,10,0.18) 35%, rgba(8,6,10,0) 60%, rgba(8,6,10,0.85) 100%),
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%);
}
.grain{
  position:fixed;inset:-50%;pointer-events:none;z-index:4;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.82  0 0 0 0 0.74  0 0 0 0 0.5  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/></svg>");
  opacity:0.5;mix-blend-mode:overlay;
}

/* NAV BAR (persistent top bar, in normal flow, shared) */
.nav{
  position:relative;z-index:6;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4vw,52px);
  background:linear-gradient(180deg, rgba(8,6,10,0.78) 0%, rgba(8,6,10,0.32) 60%, rgba(8,6,10,0) 100%);
}
/* Splash: no nav backdrop - the wordmark must be fully visible at the top */
body.splash .nav{background:none}
/* Shared nav color + hover for sigil and menu items (toned-down muted gold) */
:root{--nav:#c4a572;--nav-hover:#d8bd8e}
.nav-home{
  display:inline-block;
  /* Explicit width + height (do NOT rely on aspect-ratio alone, which older iOS
     Safari fails to resolve, leaving the sigil zero-width and invisible). */
  width:clamp(70px,8.5vw,98px);
  height:clamp(70px,8.5vw,98px);
  aspect-ratio:1 / 1;
  /* The emblem PNG has ~12.6% transparent side-margin, so the crest sits inset
     from its box. Pull it left by (inset - button padding) so the visible crest's
     left gap matches the buttons' right gap. Tracks the sigil size. */
  margin-left:calc(7px - 0.126 * clamp(70px,8.5vw,98px));
  /* Recolor the emblem: fill its shape with the shared nav tint via mask.
     emblem-mask-196 = alpha-only render of emblem-silver-640 (2x the max
     98px box), so the nav doesn't pull the full 640px PNG on every page. */
  background-color:var(--nav);
  -webkit-mask:url("/assets/emblem-mask-196.png") center / contain no-repeat;
  mask:url("/assets/emblem-mask-196.png") center / contain no-repeat;
  /* Shield is top-heavy, so geometric centering reads high - nudge down to
     optically align with the menu text */
  transform:translateY(6px);
  text-decoration:none;
  transition:background-color .2s ease;
}
.nav-home:hover{background-color:var(--nav-hover)}
.nav-links{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:clamp(16px,3vw,42px)}
.nav-links a{
  /* Same face as the page titles / wordmark */
  font-family:"Old London",serif;font-weight:400;
  color:var(--nav);text-transform:uppercase;line-height:1;
  letter-spacing:0.03em;font-size:clamp(1.12rem,2.25vw,1.48rem);
  text-decoration:none;padding:8px 7px;position:relative;
  transition:color .2s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible{color:var(--nav-hover);outline:none}
.nav-links a[aria-current="page"]{color:var(--nav)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:rgba(236,201,163,0.5);
}

/* HOME / SPLASH */
/* The splash renders no body copy - every element here uses Old London,
   UnifrakturCook or the hidden-h1 system font. Drop Cormorant from the splash
   font stack so Blink doesn't pull cormorant-*.woff2 onto the home critical
   path for a face that's never actually rendered. Inner pages keep it (body). */
body.splash{text-align:center;font-family:Georgia,serif}
.inner{
  position:relative;z-index:3;width:100%;
  /* The splash scroll region: fills the space between nav and footer and
     centers the hero; scrolls internally only if the viewport is too short. */
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  /* Reserve the scrollbar gutter on both edges so centered content stays centered
     (and doesn't shift left) whether or not the region is scrolling. */
  scrollbar-gutter:stable both-edges;
  display:flex;flex-direction:column;justify-content:safe center;align-items:center;
  padding:clamp(6px,1vh,16px) clamp(20px,4vw,52px);
}
/* Optical re-center via asymmetric flex spacers. The persistent splash nav bar
   (~134px, driven by the corner sigil) is much taller than the footer (~62px),
   so simply centering the hero BETWEEN the two bars leaves it ~28px below the
   true viewport center (read as "more gap above than below"). These two spacers
   grow ONLY into leftover free space, biased ~1:5 so the hero rides up toward
   true center. The win: the shift is proportional to free space, so on roomy
   screens it fully re-centers, and on short screens the spacers collapse toward
   zero, the top spacer can never push the hero into the nav, and nothing is
   added to the scroll height (no phantom scrollbar). On genuine overflow both
   spacers hit zero and the region scrolls exactly as before.
   The bottom spacer carries a flex-basis (not just a bigger grow ratio): with
   both spacers growing equally past their bases, the hero rides up by exactly
   basis/2 px, a CONSTANT shift at every height (which matches the constant
   ~35px nav/footer asymmetry) that never over-shoots on tall windows. When free
   space drops below the basis the bottom spacer shrinks first, so the top
   spacer stays >=0 and the hero never reaches the nav. */
.inner::before{content:"";flex:1 1 0;}
.inner::after{content:"";flex:1 1 70px;}
.hero-text{display:flex;flex-direction:column;align-items:center;width:100%}
.emb{
  width:clamp(240px,min(50vw,36vh),640px);height:auto;
  margin:0 auto clamp(10px,1.6vh,22px);display:block;opacity:1;
  /* warm the cool-white crest toward ivory so it shares the gold palette
     (filter preserves the engraved line detail) */
  filter:brightness(1.06) sepia(0.42) saturate(1.55) hue-rotate(-8deg);
}
.wordmark-block{
  display:block;width:clamp(320px,min(60vw,41vh),800px);
  height:auto;margin:0 auto clamp(10px,1.8vh,26px);
}
.wordmark-block text{font-family:"Old London",serif;font-weight:400;fill:var(--gold-deep)}
.wordmark-block .tagline{
  font-family:"UnifrakturCook",serif;font-weight:700;fill:var(--silver);
  filter:drop-shadow(var(--ink-veil));
}

/* Social icon row (shared by home + contact + artist cards) */
.socials{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(32px,min(6vw,5.5vh),66px);margin:0 auto clamp(5px,1vh,10px);
}
.socials a{
  color:var(--sigil);
  width:clamp(50px,min(8vw,7.5vh),92px);height:clamp(50px,min(8vw,7.5vh),92px);
  display:inline-flex;align-items:center;justify-content:center;
  border:none;transition:color .2s ease;
}
.socials a:hover,.socials a:focus-visible{color:var(--sigil-hover)}
.socials a:focus-visible{outline:none}
.socials svg{width:100%;height:100%;fill:currentColor}
.socials a[href*="instagram"] svg{width:78%;height:78%}
.socials a[href*="bandcamp"] svg{width:78%;height:78%}
.socials a[href*="mailto"] svg{transform:scale(1.1)}

.anno{
  position:static;width:100%;z-index:3;text-align:center;flex:0 0 auto;
  padding:clamp(10px,2vh,18px) 16px;
  font-family:"Old London",serif;
  letter-spacing:0.06em;font-size:1.5rem;color:var(--nav);
}
.anno a{color:inherit;text-decoration:none}
.anno .at{font-size:0.62em}
/* The footer is a persistent bottom bar (a flex item), shared by every page. */
body.splash .anno{
  position:static;left:auto;right:auto;bottom:auto;width:100%;flex:0 0 auto;
}

/* INNER PAGES (artists / releases / store / studio / contact / 404) */
.page-wrap{
  position:relative;z-index:3;width:100%;
  /* The inner-page scroll region between the nav and footer. Content children
     (.page-body, .artist-grid, .cat-section, .ml) self-center via their own
     max-width + margin:auto, so this can stay full-width for an edge scrollbar. */
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  /* Reserve the scrollbar gutter on both edges so centered content stays centered
     (and doesn't shift left) whether or not the region is scrolling. */
  scrollbar-gutter:stable both-edges;
  padding:clamp(28px,5vh,56px) clamp(22px,5vw,60px);
}
.page-title{
  font-family:"Old London",serif;font-weight:400;
  color:var(--nav);text-align:center;text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.05;
  margin:0 0 clamp(28px,5vh,56px);
  text-shadow:var(--ink-veil);
}
.page-body{
  max-width:780px;margin:0 auto;text-align:center;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;font-weight:500;
  font-size:clamp(1.3rem,2.7vw,1.76rem);line-height:1.3;letter-spacing:0.005em;
  color:var(--silver);
}
.page-body p{margin:0 0 0.65em}
.page-body a{color:var(--sigil);text-decoration:none;border-bottom:1px solid rgba(236,201,163,0.5)}
.page-body a:hover{color:var(--silver)}

/* ---- Mailing list signup (contact page) ---- */
.ml{
  max-width:580px;margin:clamp(84px,13vh,140px) auto 0;
  text-align:center;
}
.ml-label{
  /* Lowercase fraktur, a touch larger than the section heads */
  font-family:"UnifrakturCook",serif;font-weight:700;color:var(--nav);
  text-transform:lowercase;letter-spacing:0.02em;
  font-size:clamp(1.65rem,3.7vw,2.25rem);line-height:1.1;
  margin:0 0 0.85em;
  text-shadow:var(--ink-veil);
}
.ml-form{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center;
}
.ml-form input[type="email"]{
  flex:1 1 300px;min-width:0;
  background:rgba(8,6,10,0.55);
  border:1px solid rgba(196,165,114,0.45);border-radius:0;
  color:var(--silver);
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:1.4rem;padding:0.72em 1em;
  transition:border-color .2s ease;
}
.ml-form input[type="email"]::placeholder{color:var(--silver-dim);opacity:0.8;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic}
.ml-form input[type="email"]:focus{outline:none;border-color:var(--nav-hover)}
.ml-form button{
  flex:0 0 auto;cursor:pointer;position:relative;
  /* Center the label itself so it stays centered whether the button is
     stretched (one-row desktop) or natural height (wrapped on phones). */
  display:inline-flex;align-items:center;justify-content:center;
  /* Default = solid gold fill with ink text (the old hover look) */
  background:var(--nav);border:1px solid var(--nav);border-radius:0;
  color:var(--ink);
  font-family:"Old London",serif;text-transform:uppercase;
  letter-spacing:0.06em;font-size:1.32rem;line-height:1;padding:0.88em 1.7em;
  transition:filter .2s ease;
}
.ml-form button:hover,.ml-form button:focus-visible{
  /* Subtle darkening of the fill */
  filter:brightness(0.9);outline:none;
}
/* Old London sits low in its line box (ascent 90 vs descent 23); nudge the
   button label up by the measured offset so it reads perfectly centered. */
.ml-form .btn-tx{display:inline-block;transform:translateY(-0.05em)}
/* Where supported (Safari 18.2+/Chrome 133+), trim Old London's lopsided leading
   to the cap height so the label centers by its visible letters, not the metric
   box (exact). The translateY above stays as the fallback for older browsers. */
@supports (text-box-edge:cap alphabetic){
  .ml-form .btn-tx{transform:none;text-box-trim:trim-both;text-box-edge:cap alphabetic}
}
/* Press feedback: an unmistakable darken the instant the button is pressed. */
.ml-form button:active{filter:brightness(0.78)}
/* Loading state: the button keeps its idle size. The label fades to 0 (still
   reserving its width, so nothing reflows) and a spinner is overlaid centered
   absolutely, so the button never widens and the input never shifts. */
.ml-form button.is-loading{filter:brightness(0.86);cursor:default}
.ml-form button.is-loading .btn-tx{opacity:0}
.ml-form .btn-spin{
  display:none;position:absolute;top:50%;left:50%;
  width:1.05em;height:1.05em;margin:-0.525em 0 0 -0.525em;
  border:2px solid rgba(8,6,10,0.3);border-top-color:var(--ink);border-radius:50%;
  animation:btn-spin 0.62s linear infinite;
}
.ml-form button.is-loading .btn-spin{display:block}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  /* No motion: drop the spinner, keep the label visible but dimmed instead. */
  .ml-form button.is-loading .btn-spin{display:none}
  .ml-form button.is-loading .btn-tx{opacity:0.5}
}
.ml-note{
  color:var(--silver);font-style:italic;font-weight:500;
  font-size:clamp(1.3rem,2.8vw,1.6rem);margin:1em 0 0;line-height:1.3;
}

/* ---- Artist grid ---- */
.artist-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(34px,4.5vw,64px);margin:0 auto;max-width:1040px;
}
/* No card chrome - each artist is a clean section: photo, name, links */
.artist-card{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:12px;
}
.artist-photo{
  width:100%;max-width:300px;aspect-ratio:1 / 1;display:block;overflow:hidden;
  /* Hand-drawn grunge frame (TEST): one solid gold band, flush to the photo edge
     on the outside, with a torn rough inner edge. Single continuous line - no
     double border, no blank spots, nothing pokes past. */
  position:relative;
}
.artist-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Pushed contrast + darker exposure pulls the mismatched sources into one
     consistent moody monochrome set. */
  filter:grayscale(1) brightness(0.86) contrast(1.16);
}
.artist-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--nav);
  --frame:url(../assets/frame-grunge-1.svg);
  -webkit-mask:var(--frame) center / 100% 100% no-repeat;
  mask:var(--frame) center / 100% 100% no-repeat;
}
/* 4 distinct hand-drawn traces, cycled across cards (period 4)... */
.artist-card:nth-child(4n+2) .artist-photo::after{--frame:url(../assets/frame-grunge-2.svg)}
.artist-card:nth-child(4n+3) .artist-photo::after{--frame:url(../assets/frame-grunge-3.svg)}
.artist-card:nth-child(4n+0) .artist-photo::after{--frame:url(../assets/frame-grunge-4.svg)}
/* ...then rotated/flipped (period 8) so a reused trace never reads the same.
   Only 90deg turns + mirrors, so every edge stays flush to the photo. */
.artist-card:nth-child(8n+2) .artist-photo::after{transform:scaleX(-1)}
.artist-card:nth-child(8n+3) .artist-photo::after{transform:scaleY(-1)}
.artist-card:nth-child(8n+4) .artist-photo::after{transform:rotate(180deg)}
.artist-card:nth-child(8n+5) .artist-photo::after{transform:rotate(90deg)}
.artist-card:nth-child(8n+6) .artist-photo::after{transform:rotate(90deg) scaleX(-1)}
.artist-card:nth-child(8n+7) .artist-photo::after{transform:rotate(-90deg)}
.artist-card:nth-child(8n+0) .artist-photo::after{transform:rotate(180deg) scaleX(-1)}
.artist-name{
  font-family:"Old London",serif;font-weight:400;
  color:var(--silver);font-size:clamp(1.5rem,3.4vw,2.1rem);
  line-height:1.1;text-align:center;text-transform:uppercase;
}
.artist-links{display:flex;gap:26px;margin-top:-6px}
.artist-links a{
  color:var(--sigil);width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .2s ease;
}
.artist-links a:hover{color:var(--sigil-hover)}
.artist-links svg{width:100%;height:100%;fill:currentColor}
.artist-links a[href*="instagram"] svg{width:82%;height:82%}
.artist-links a[href*="bandcamp"] svg{width:82%;height:82%}

/* ---- Releases catalog ---- */
.cat-section{max-width:860px;margin:0 auto clamp(40px,7vh,76px)}
.cat-section:last-of-type{margin-bottom:0}
.cat-head{
  /* Same blackletter as the home tagline ("raw and mystical metal") */
  font-family:"UnifrakturCook",serif;font-weight:700;
  color:var(--nav);text-align:center;text-transform:lowercase;
  letter-spacing:0.02em;font-size:clamp(1.55rem,3.3vw,2.1rem);
  margin:0 0 clamp(18px,3.2vh,32px);opacity:0.92;
  text-shadow:var(--ink-veil);
}
.release{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:clamp(14px,3vw,30px);
  padding:clamp(13px,2.1vh,19px) 4px;
  border-top:1px solid rgba(196,165,114,0.4);
}
.cat-section .release:last-child{border-bottom:1px solid rgba(196,165,114,0.4)}
.release .cat{
  font-family:"Old London",serif;
  color:var(--nav);font-size:clamp(0.95rem,2vw,1.18rem);
  letter-spacing:0.04em;white-space:nowrap;min-width:6em;
  text-transform:uppercase;
}
.rel-main{display:flex;flex-direction:column;gap:3px;text-align:left;min-width:0}
.rel-artist{
  font-family:"Old London",serif;font-weight:400;
  color:var(--silver);text-transform:uppercase;line-height:1.05;
  font-size:clamp(1.1rem,2.6vw,1.5rem);
}
.rel-title{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:400;
  color:var(--silver);line-height:1.12;font-size:clamp(1.04rem,2.3vw,1.34rem);
}
.rel-meta{
  font-family:"Cormorant Garamond",Georgia,serif;color:var(--silver);
  letter-spacing:0.02em;font-size:clamp(0.96rem,2vw,1.1rem);
}
.rel-link{
  color:var(--sigil);width:30px;height:30px;justify-self:end;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .2s ease;
}
.rel-link:hover,.rel-link:focus-visible{color:var(--sigil-hover);outline:none}
.rel-link svg{width:100%;height:100%;fill:currentColor}

/* Studio portfolio rows: role label sits between the title block and the Bandcamp link */
.studio-work .release{grid-template-columns:1fr auto auto}
.studio-work .role{
  /* Same blackletter as the "credits" head, lowercase */
  font-family:"UnifrakturCook",serif;font-weight:700;color:var(--nav);
  text-transform:lowercase;letter-spacing:0.02em;
  font-size:clamp(1.02rem,2.2vw,1.32rem);text-align:right;
  max-width:8.5em;line-height:1.2;
  /* Same whisper of ink separation as the mailing-list label, over the bg. */
  text-shadow:var(--ink-veil);
}

/* Inner pages reuse the same footer component as the home splash: .anno
   (now position:static, in normal flow). See the .anno rule above. */

/* ---- News feed ---- */
.news-feed{max-width:760px;margin:0 auto;text-align:left}
.news-item{
  padding:clamp(20px,3.4vh,30px) 4px;
  border-top:1px solid rgba(196,165,114,0.4);
}
.news-feed .news-item:last-child{border-bottom:1px solid rgba(196,165,114,0.4)}
.news-date{
  font-family:"Old London",serif;color:var(--nav);
  text-transform:uppercase;letter-spacing:0.06em;
  font-size:clamp(1rem,2vw,1.18rem);margin-bottom:7px;
  text-shadow:0 1px 2px rgba(8,6,10,0.7);
}
.news-title{
  font-family:"Old London",serif;font-weight:400;color:var(--nav);
  text-transform:uppercase;line-height:1.12;
  font-size:clamp(1.35rem,3vw,1.85rem);margin:0 0 0.4em;
  /* Soft dark halo so the blackletter reads over the bright sunset band */
  text-shadow:0 1px 2px rgba(8,6,10,0.62), 0 0 10px rgba(8,6,10,0.35);
}
.news-title em{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;text-transform:none;color:var(--silver)}
.news-body{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;color:var(--silver);
  font-size:clamp(1.16rem,2.4vw,1.4rem);line-height:1.4;
  text-shadow:0 1px 2px rgba(8,6,10,0.6);
}
.news-body p{margin:0 0 0.7em}
.news-body a{color:var(--sigil);text-decoration:none;border-bottom:1px solid rgba(236,201,163,0.5)}
.news-body a:hover{color:var(--silver)}
.news-embed{margin:0.85em 0 0.95em}
.news-embed iframe{display:block;width:100%;max-width:480px;border:0}
.news-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0.95em 0 0.25em}
/* Same FLUSH grunge frame as the artist photos. News imgs are wrapped in
   <picture>, so paint the frame as a masked ::after on that wrapper (flush to the
   photo edge, no gap) rather than border-image, which left a transparent band. */
.news-photos picture{position:relative;display:block}
.news-photos img{width:100%;height:auto;display:block}
.news-photos picture::after{
  content:"";position:absolute;inset:0;pointer-events:none;background:var(--nav);
  --f:url(../assets/frame-grunge-1.svg);
  -webkit-mask:var(--f) center / 100% 100% no-repeat;
  mask:var(--f) center / 100% 100% no-repeat;
}
.news-photos picture:nth-child(2n)::after{--f:url(../assets/frame-grunge-2.svg)}
.news-photos picture:nth-child(3n)::after{--f:url(../assets/frame-grunge-4.svg)}
/* If CSS masks are unsupported, hide the frame overlay rather than letting it
   collapse into a solid gold box over the photo. */
@supports not ((-webkit-mask: url("#")) or (mask: url("#"))) {
  .artist-photo::after, .news-photos picture::after { display: none; }
}
.news-foot{
  max-width:760px;margin:clamp(34px,6vh,60px) auto 0;text-align:center;
  font-family:"UnifrakturCook",serif;color:var(--nav);text-transform:lowercase;
  font-size:clamp(1.4rem,3vw,1.9rem);
}
.news-foot a{color:var(--nav);text-decoration:none}
.news-foot a:hover{color:var(--nav-hover)}

/* RESPONSIVE */
/* Roomy screens (maximized on a normal monitor): nudge the hero a touch larger
   to use the extra vertical space, same proportions. Tuned to still fit (footer
   visible, no scroll) at this breakpoint; short laptops keep the base size. */
@media (min-width:760px) and (min-height:900px){
  .emb{width:clamp(240px,min(50vw,38vh),680px)}
  .wordmark-block{width:clamp(320px,min(60vw,43vh),840px)}
  .socials a{width:clamp(50px,min(8vw,7vh),88px);height:clamp(50px,min(8vw,7vh),88px)}
}
/* Tall viewports (large monitors / full-height windows): genuine slack below
   the crest here, so grow the hero a touch. Gated at 1100px because 900-1080px
   heights are already near the no-scroll limit once the centering spacer is
   accounted for. */
@media (min-width:760px) and (min-height:1060px){
  .emb{width:clamp(240px,min(50vw,40vh),680px)}
  .wordmark-block{width:clamp(320px,min(60vw,44vh),840px)}
  .socials a{width:clamp(50px,min(8vw,7.5vh),92px);height:clamp(50px,min(8vw,7.5vh),92px)}
}
@media (max-width:720px){
  /* Splash */
  .inner{padding-left:18px;padding-right:18px}
  .wordmark-block{width:min(82vw,460px);margin-bottom:18px}
  .socials{gap:min(15vw,64px);margin-bottom:4px}
  .socials a{width:min(16vw,70px);height:min(16vw,70px)}
  .emb{width:min(74vw,340px);margin-bottom:14px}
  /* Phones have a shorter nav, so the centering offset is smaller; lighter lift. */
  .inner::after{flex:1 1 40px}
  .anno{font-size:clamp(1rem,4vw,1.3rem)}
  /* Nav */
  .nav{padding:14px 16px}
  /* Sigil height tracks the 2-row button block via calc with an EXPLICIT size
     (not stretch+aspect-ratio, which vanished on iOS Safari). A row is the link
     font (line-height:1) + 14px padding; 2 rows + the 3px row-gap = 2*font + 31. */
  .nav-home{--sig:calc(2 * clamp(0.92rem,4.2vw,1.28rem) + 31px);width:var(--sig);height:var(--sig);transform:none;margin-left:-7px}
  .nav-links{gap:4px 13px;flex-wrap:wrap;justify-content:flex-end}
  /* Bigger than the original but with real margin from the 3-row tipping point
     across phone widths (the absolute max measured clean in headless but tipped
     on real devices, so we keep clear of it). */
  /* 6 nav items (NEWS added): smaller than the old 5-item size so they keep 2 rows */
  .nav-links a{font-size:clamp(0.92rem,4.2vw,1.28rem);padding:7px 2px}
  /* Releases */
  .release{gap:12px}
  .release .cat{min-width:5em;font-size:0.95rem}
  /* Studio credits: let the long role wrap to tighter lines */
  .studio-work .role{max-width:6.5em}
  /* Studio intro text scales down a touch on phones */
  .studio .page-body{font-size:clamp(1.2rem,2.7vw,1.76rem)}
}
@media (max-width:720px) and (max-height:700px){
  .inner{padding-top:clamp(8px,1.5vh,18px);padding-bottom:clamp(8px,1.5vh,18px)}
  .wordmark-block{width:min(58vw,380px);margin-bottom:10px}
  .socials{gap:min(11vw,48px);margin-bottom:2px}
  .socials a{width:min(11vw,52px);height:min(11vw,52px)}
  .emb{width:min(46vw,260px);margin-bottom:8px}
  .anno{font-size:0.95rem}
}
/* Short landscape (e.g. 1000x500 desktop window): shrink hero so the stack +
   footer still fit without scroll. Phones are handled by the blocks above. */
@media (min-width:721px) and (max-height:650px){
  .inner{padding-top:clamp(8px,2vh,16px);padding-bottom:clamp(8px,1.5vh,14px)}
  .emb{width:clamp(150px,26vh,320px);margin-bottom:6px}
  .wordmark-block{width:clamp(220px,32vh,460px);margin-bottom:8px}
  .socials{margin-bottom:2px}
  .socials a{width:clamp(40px,6vh,58px);height:clamp(40px,6vh,58px)}
  .anno{margin-top:clamp(8px,1.5vh,16px)}
}