/* ==========================================================================
   Listrich Entertainment, Design system
   ========================================================================== */

:root{
  /* Palette: warm near-black ground, off-white ink, single coral accent */
  --bg: #131210;
  --bg-raised: #1a1815;
  --bg-raised-2: #201e1a;
  --line: rgba(245,242,235,0.09);
  --line-strong: rgba(245,242,235,0.16);
  --ink: #f5f2ea;
  --ink-dim: #a8a39a;
  --ink-faint: #726d64;
  --accent: #ff5a36;
  --accent-ink: #180a04;
  --accent-soft: rgba(255,90,54,0.12);
  --accent-line: rgba(255,90,54,0.35);

  --font-display: "Bebas Neue", "Inter", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 4px;
  --radius-lg: 14px;

  --ease: cubic-bezier(.16,1,.3,1);
  --dur: .5s;

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grain texture, subtle, adds material depth to flat dark surfaces */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }

::selection{ background: var(--accent); color: var(--accent-ink); }

/* Focus visibility */
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link{
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: 12px 18px; z-index: 1000; font-weight: 600;
}
.skip-link:focus{ left: 16px; top: 16px; }

/* ---- Type scale --------------------------------------------------------- */

h1, .h1, h2, .h2, h3, .h3{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.04;
  text-wrap: balance;
}
h1, .h1, h2, .h2{ text-transform: uppercase; }

.h1{ font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
h2, .h2{ font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3, .h3{ font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 400; letter-spacing: 0.02em; }

.lead{
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-dim);
  max-width: 46ch;
}

.section__lead{
  color: var(--ink-dim);
  max-width: 56ch;
  margin-top: 10px;
  font-size: 1.02rem;
}

/* ---- Layout --------------------------------------------------------------- */

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main{ display: block; overflow: hidden; }

/* Section padding is deliberately modest, because it is never seen on its own:
   consecutive sections stack their bottom and top padding, so the gap a reader
   actually sees between two blocks is roughly double these numbers. */
.section{ padding: clamp(56px, 6.6vw, 80px) 0; }
.section--tight{ padding: clamp(36px, 4.6vw, 58px) 0; }
/* A closing block introduced by a hairline rule. The rule is the separator, so
   the section drops its own top padding rather than stacking one on top of the
   previous section's bottom padding and the rule's own margin. */
.section--rule{ padding-top: 0; }
.section-head{ margin-bottom: clamp(32px, 5vw, 56px); }

.visually-hidden{ position: absolute; left: -9999px; }

.divider{
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ---- Buttons ------------------------------------------------------------- */

.btn{
  --pad-y: .85em;
  --pad-x: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 0.5px var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease),
              opacity .2s var(--ease);
  white-space: nowrap;
}
.btn:hover{ box-shadow: inset 0 0 0 0.5px var(--ink-dim); }

.btn--primary{
  background: var(--accent);
  box-shadow: none;
  color: var(--accent-ink);
}
.btn--primary:hover{ background: #ff6f4f; box-shadow: none; }

.btn--ghost{ box-shadow: none; padding-inline: .2em; }
.btn--ghost:hover{ box-shadow: none; color: var(--accent); }

.btn--small{ font-size: .84rem; --pad-y: .6em; --pad-x: 1.15em; }

.btn:disabled{
  color: var(--ink-faint);
  cursor: default;
  pointer-events: none;
}

.arrow{ display: inline-block; transition: transform .3s var(--ease); }
a:hover .arrow, .btn:hover .arrow{ transform: translateX(5px); }

/* ---- Nav ------------------------------------------------------------------ */

[id]{ scroll-margin-top: 100px; }

.nav{
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav.is-scrolled{ border-bottom-color: var(--line); }

.nav__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 84px;
}

.brand{
  display: flex;
  align-items: center;
}
.brand__logo{
  height: 38px;
  width: auto;
}
.footer__brand .brand__logo{
  height: 32px;
}

.nav__links{
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 34px);
}
.nav__links a{
  position: relative;
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-dim);
  padding: 6px 0;
  transition: color .2s var(--ease);
}
.nav__links a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right .3s var(--ease);
}
.nav__links a:hover{ color: var(--ink); }
.nav__links a:hover::after{ right: 0; }
.nav__links a[aria-current="page"]{ color: var(--ink); }
.nav__links a[aria-current="page"]::after{ right: 0; background: var(--ink-faint); }

.nav__cta{ display: flex; align-items: center; gap: 10px; }

.hamburger{
  display: none;
  background: none;
  border: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.hamburger svg{ width: 18px; height: 18px; transition: transform .3s var(--ease); }
.hamburger.is-open svg{ transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce){
  .hamburger svg{ transition: none; }
}

.mobile{
  display: none;
  flex-direction: column;
  gap: 2px;
}
.mobile a{
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-dim);
}
.mobile a[aria-current="page"]{ color: var(--accent); }

@media (max-width: 860px){
  .nav__links, .nav__cta{ display: none; }
  .hamburger{ display: inline-flex; }
  /* Kept in the DOM as a collapsed, invisible strip rather than toggled via
     display, so opening/closing can transition smoothly. display stays
     "none" outside this breakpoint (above), so on desktop widths these
     links are fully removed from layout and the tab order. */
  .mobile{
    display: flex;
    max-height: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .35s var(--ease), opacity .25s var(--ease),
                padding-bottom .35s var(--ease), visibility 0s linear .35s;
  }
  .mobile.open{
    /* 5 links x 55px + 4 gaps x 2px + 18px bottom padding = 301px of real
       content; keep this comfortably above that so the last link (and its
       bottom hairline) never gets clipped as content changes. */
    max-height: 340px;
    padding-bottom: 18px;
    opacity: 1;
    visibility: visible;
    transition: max-height .35s var(--ease), opacity .25s var(--ease),
                padding-bottom .35s var(--ease), visibility 0s linear 0s;
  }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce){
  .mobile{ transition: none; }
}

/* ---- Hero ------------------------------------------------------------------ */

.hero{
  position: relative;
  padding: clamp(56px, 11vw, 132px) 0 clamp(36px, 5.5vw, 70px);
  overflow: clip;
}

.hero__pattern{
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23f5f2ea' stroke-opacity='0.07' stroke-width='1.4'%3E%3Ccircle cx='20' cy='20' r='7'/%3E%3Cpath d='M60 6 72 30 48 30Z'/%3E%3Crect x='84' y='60' width='16' height='16' transform='rotate(45 92 68)'/%3E%3Cpath d='M8 88 24 104 M24 88 8 104'/%3E%3Ccircle cx='96' cy='16' r='2.5'/%3E%3Ccircle cx='44' cy='96' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}

.hero__intro{ max-width: 44rem; }

.hero .lead{ margin-top: 22px; }

.hero__actions{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.pill-row{
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.pill{
  padding-right: 28px;
  margin-right: 28px;
  border-right: 1px solid var(--line);
}
.pill:last-child{ border-right: none; margin-right: 0; padding-right: 0; }
.pill b{
  display: block;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin-bottom: 6px;
}
.pill span{ font-size: .92rem; color: var(--ink); }

@media (max-width: 640px){
  .pill-row{ flex-direction: column; }
  .pill{
    width: 100%;
    padding-right: 0;
    margin-right: 0;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .pill:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
}

.fact-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 40px);
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
@media (max-width: 620px){
  .fact-grid{ grid-template-columns: 1fr; gap: 20px; }
}
.fact b{
  display: block;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.fact span{
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: .01em;
  color: var(--ink);
}

/* ---- Grid / cards ----------------------------------------------------------- */

.grid{ display: grid; gap: 22px; }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
/* Extra breathing room between three short info columns (Releases' "Built
   for singles, EPs, and albums" and News' "What to expect"). Column gap only,
   so the single-column mobile layout below is unaffected. */
.grid--3-spaced{ column-gap: 48px; }
@media (max-width: 900px){
  .grid--3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .grid--2, .grid--3{ grid-template-columns: 1fr; }
}

.service{
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.service .num{
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.service h3{ margin-top: 16px; }
.service p{ margin-top: 10px; color: var(--ink-dim); }
.service .tags{ margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }

.tag{
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
}

/* ---- Reveal-on-scroll ------------------------------------------------------- */

[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  .arrow{ transition: none; }
  *{ scroll-behavior: auto !important; }
}

/* ---- Artist cards -----------------------------------------------------------
   The roster is a plain grid of self-contained cards, one per artist: the
   printed sleeve, then that artist's name, role, bio and links, all of it on
   screen at once. The Artists page and the homepage both use this component, so
   an artist reads the same in either place and no artist is ever tucked behind
   another one.

   Two across by default, and the cards stretch to a common height, so a roster
   of two gives each artist exactly the same room whatever the length of their
   bio. The homepage lays the same cards out with the --wide modifier below. */
.artist-cards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
}
/* The same width the navigation collapses at. Below it a column is too narrow
   to hold a sleeve and a readable bio side by side, so the cards stack and each
   one takes the full container. */
@media (max-width: 860px){
  .artist-cards{ grid-template-columns: 1fr; }
}

.artist-card{
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--bg-raised), var(--bg-raised-2));
  padding: clamp(24px, 3vw, 40px);
}

/* Homepage variant only: one card per row, full width, art and body sitting
   side by side instead of stacked, so each card reads as a wide horizontal
   band rather than the Artists page's square card. The Artists page keeps
   the plain .artist-cards/.artist-card above untouched. */
.artist-cards--wide{ grid-template-columns: 1fr; }
.artist-card--wide{
  flex-direction: row;
  align-items: center;
  gap: clamp(28px, 5vw, 56px);
}
.artist-card--wide .artist-card__art{
  flex: 0 0 auto;
  width: min(100%, 300px);
  margin-inline: 0;
}
.artist-card--wide .artist-card__body{ flex: 1 1 auto; min-width: 0; }
@media (max-width: 860px){
  /* align-items: center above is for the desktop row (vertically centering
     art against body). Stacked, that same rule was centering the body's
     content-width box instead of stretching it, so the text and buttons sat
     narrower and indented compared to the full-width art above them. */
  .artist-card--wide{ flex-direction: column; align-items: stretch; }
  .artist-card--wide .artist-card__art{ width: 100%; max-width: 420px; margin-inline: auto; }
  .artist-card--wide .artist-card__body{ width: 100%; }
}

/* The art box is what the sleeve is measured against (see below), so the cap
   here is what stops the cover growing without limit once the cards stack and a
   card has the whole container to itself. Deliberately no overflow clipping:
   the record sits proud of this box on hover. */
.artist-card__art{
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
}

.artist-card__body .role{
  color: var(--accent);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.artist-card__body h2{ margin-top: 14px; }
.artist-card__body p{ margin-top: 16px; color: var(--ink-dim); max-width: 48ch; }

/* ---- Sleeve ----------------------------------------------------------------
   One artist's artwork: a square sleeve printed with their cover photo, with a
   black record sitting behind it and pulled part-way out to the right.

   The whole composition is sized from a single custom property, --cover. The
   record is absolutely positioned and its right edge is pinned to the card's
   right edge, so the exposed sliver stays exactly --peek wide at any card
   size, and the sleeve, painted on top of it, is what sells "the record is
   inside the jacket". A real 12 inch record is very slightly smaller than its
   jacket, so --disc is only a touch bigger than --cover: just enough that the
   disc clears the sleeve's top and bottom edges and reads as round. The card
   carries vertical padding of half that overhang, so its box still bounds the
   whole composition. */
.sleeve{
  --cover: clamp(160px, 26vw, 320px);
  --disc: var(--cover);
  --peek: calc(var(--cover) * .22);

  position: relative;
  flex: 0 0 auto;
  width: calc(var(--cover) + var(--peek));
  /* Half the disc's vertical overhang, top and bottom. */
  padding: calc((var(--disc) - var(--cover)) / 2) 0;
  text-align: left;
}

/* In a card the sleeve fills the art box at every width, so --cover becomes a
   share of that box rather than a length: 1 / 1.22, since --peek is .22 of
   --cover. Everything --cover feeds, the cover face, the disc's width and its
   offset, is then a percentage of the same box, so the composition simply
   scales and its proportions are identical at any viewport. */
.artist-card__art .sleeve{
  width: 100%;
  --cover: 81.9672%;
}

/* The record. Same rendering approach as .vinyl on the releases page (a dark
   radial body, fine concentric grooves, a fixed sheen) but static and without
   a printed label: here it only has to say "there is a record in this sleeve". */
.sleeve__record{
  position: absolute;
  top: 50%;
  /* Right edge of the disc meets the right edge of the card. */
  left: calc(var(--cover) + var(--peek) - var(--disc));
  z-index: 0;
  width: var(--disc);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1b1916 0%, #100e0c 74%, #060605 100%);
  box-shadow:
    inset 0 0 0 1px rgba(245,242,235,.09),
    inset 0 0 34px -10px rgba(0,0,0,.9),
    0 18px 34px -22px rgba(0,0,0,.95);
  transition: transform .45s var(--ease);
}

/* Grooves: a dense fine pitch for the surface, plus a wider pitch over it that
   reads as the gaps between tracks. Inset so the outer rim stays unridged. */
.sleeve__record::before{
  content: "";
  position: absolute;
  inset: 3.5%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(245,242,235,.05) 0 .5px,
      rgba(0,0,0,0) .5px 1.4px,
      rgba(0,0,0,.42) 1.4px 1.9px,
      rgba(0,0,0,0) 1.9px 3px),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(245,242,235,.05) 0 1px,
      rgba(0,0,0,0) 1px 27px);
}

/* Spindle hole and sheen in one layer, hole first so it sits on top of the
   grooves. The sheen is two soft reflection lobes, a high highlight and a low
   accent bounce, matching the record on the releases page. */
.sleeve__record::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #050504 0 2.6%,
      rgba(245,242,235,.2) 2.6% 3.1%,
      rgba(0,0,0,0) 3.1%),
    conic-gradient(from 208deg at 50% 50%,
      rgba(245,242,235,0) 0deg,
      rgba(245,242,235,.085) 32deg,
      rgba(245,242,235,0) 72deg,
      rgba(245,242,235,0) 180deg,
      rgba(245,242,235,.055) 212deg,
      rgba(245,242,235,0) 252deg,
      rgba(245,242,235,0) 360deg),
    radial-gradient(ellipse 58% 44% at 32% 24%, rgba(245,242,235,.08), rgba(245,242,235,0) 70%),
    radial-gradient(circle at 74% 79%, rgba(255,90,54,.16), rgba(255,90,54,0) 55%);
}

.sleeve__cover{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  width: var(--cover);
  aspect-ratio: 1;
  padding: 20px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--bg-raised), var(--bg-raised-2));
  box-shadow: inset 0 0 0 0.5px var(--line-strong);
}

/* Cover photo, when one exists at the artist's image path (see the img src in
   artists.html). If the file isn't there yet the image errors out and
   initSleeveArt() (main.js) removes it, leaving the gradient above. */
.sleeve__art{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Legibility scrim under the printed name. */
.sleeve__cover::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 32%, rgba(10,9,7,.9) 100%);
  pointer-events: none;
}

.sleeve__name{
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: .02em;
  line-height: 1.04;
  color: var(--ink);
}
.sleeve__role{
  position: relative;
  z-index: 2;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}

/* A card is a static profile, not a control, so it takes no hover styling that
   would suggest otherwise. The one exception is the record: with the pointer
   anywhere over the card it slides a little further out of its jacket, which is
   the detail that says the artwork is a sleeve with a record in it. */
.artist-card:hover .sleeve__record{
  transform: translateY(-50%) translateX(calc(var(--cover) * .03));
}

@media (prefers-reduced-motion: reduce){
  .sleeve__record{ transition: none; }
  .artist-card:hover .sleeve__record{ transform: translateY(-50%); }
}

@media (max-width: 560px){
  .sleeve__cover{ padding: 16px; }
}

.social-row{ display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.social-row a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 0.5px var(--line-strong);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  transition: box-shadow .2s var(--ease), color .2s var(--ease);
}
.social-row a:hover{ box-shadow: inset 0 0 0 0.5px var(--accent); color: var(--accent); }
.social-row svg{ width: 16px; height: 16px; }

/* ---- Roster grid (future artists) ------------------------------------------ */

.news-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 700px){
  .news-grid{ grid-template-columns: 1fr; }
}

.news-card{
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-raised);
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 0.5px var(--line-strong);
  transition: box-shadow .25s var(--ease);
}
.news-card:hover{ box-shadow: inset 0 0 0 0.5px var(--accent); }
.news-card__photo{
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(155deg, var(--bg-raised-2), #14120f);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}
.news-card__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.news-card:hover .news-card__photo img{ transform: scale(1.04); }
.news-card__photo svg{ width: 34px; height: 34px; opacity: .5; }
.news-card__body{ padding: 22px clamp(18px, 2.4vw, 26px) 26px; }
.news-card__meta{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.news-card__badge{
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 9px;
}
.news-card h3{ margin: 0; transition: color .2s var(--ease); }
.news-card:hover h3{ color: var(--accent); }
.news-card p{ margin-top: 10px; color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce){
  .news-card__photo img{ transition: none; }
}

/* ---- Empty state (no news yet, etc.) -------------------------------------- */

.empty-state{
  grid-column: 1 / -1; /* span the full news-grid when it's the only child */
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 0.5px var(--line-strong);
  padding: clamp(40px, 7vw, 72px) clamp(24px, 5vw, 56px);
  text-align: center;
}
.empty-state__mark{
  width: 44px;
  height: 44px;
  margin: 0 auto 20px;
  color: var(--ink-faint);
}
.empty-state__mark svg{ width: 100%; height: 100%; }
.empty-state h2{ margin: 0; }
.empty-state p{
  margin: 14px auto 0;
  max-width: 46ch;
  color: var(--ink-dim);
}

/* ---- Individual story page --------------------------------------------------- */

.story-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.story-meta__date{
  font-size: .85rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.story__photo{
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.story__photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.story__body{
  max-width: 680px;
  display: grid;
  gap: 18px;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.story__body p{ color: var(--ink-dim); font-size: 1.05rem; line-height: 1.75; }
.story__body p a{ color: var(--accent); font-weight: 600; }
.story__body p a:hover{ text-decoration: underline; }

.roster-note{
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px);
  text-align: center;
  color: var(--ink-dim);
}
.roster-note h3{ color: var(--ink); }
.roster-note p{ margin-top: 10px; max-width: 44ch; margin-inline: auto; }

/* ---- Release / catalog ------------------------------------------------------ */

.release-feature{
  display: grid;
  grid-template-columns: .55fr 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 860px){
  .release-feature{ grid-template-columns: 1fr; }
  /* Single column would otherwise stretch the record to the full container
     width. Cap it and centre it so it stays a sensible size. */
  .release-feature__art{ width: 100%; max-width: 360px; margin-inline: auto; }
}
.release-feature__art{
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
/* Soft accent halo sitting behind the record. */
.release-feature__art::before{
  content: "";
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle at 52% 56%, rgba(255,90,54,.18), transparent 62%);
  pointer-events: none;
}

/* Flat, straight-on vinyl record. Deliberately 2D: no tilt, no perspective,
   just concentric grooves, a fixed sheen, and the artist photo printed on the
   centre label.

   Two layers on purpose: .vinyl is the static frame that owns the sheen (a
   real record's reflection stays put while the record turns), and
   .vinyl__disc is the part that actually rotates, carrying the grooves and
   the label with it. */
.vinyl{
  position: relative;
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1b1916 0%, #100e0c 74%, #060605 100%);
  box-shadow:
    inset 0 0 0 1px rgba(245,242,235,.09),
    inset 0 0 34px -10px rgba(0,0,0,.9),
    0 26px 58px -34px rgba(0,0,0,.95);
}

/* A slow, ambient turn: one revolution every 26s reads as a record playing
   rather than as a spinning UI element. initVinylSpin (main.js) eases the
   animation's playback rate down on hover, which changes the speed without
   ever moving the angle, so the record decelerates instead of snapping. */
@keyframes vinyl-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.vinyl__disc{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: vinyl-spin 26s linear infinite;
  will-change: transform;
}

/* Grooves: a dense fine pitch for the record surface, plus a wider pitch on
   top of it that reads as the gaps between tracks. Inset slightly so the
   outer rim stays as a clean unridged edge. */
.vinyl__disc::before{
  content: "";
  position: absolute;
  inset: 3.5%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(245,242,235,.05) 0 .5px,
      rgba(0,0,0,0) .5px 1.4px,
      rgba(0,0,0,.42) 1.4px 1.9px,
      rgba(0,0,0,0) 1.9px 3px),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(245,242,235,.05) 0 1px,
      rgba(0,0,0,0) 1px 27px);
  pointer-events: none;
}

/* Sheen: two opposed reflection lobes plus a high highlight and a low accent
   bounce, all soft, all flat. Sits on .vinyl rather than on the rotating disc
   so the reflection stays put while the record turns under it. */
.vinyl::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background:
    conic-gradient(from 208deg at 50% 50%,
      rgba(245,242,235,0) 0deg,
      rgba(245,242,235,.085) 32deg,
      rgba(245,242,235,0) 72deg,
      rgba(245,242,235,0) 180deg,
      rgba(245,242,235,.055) 212deg,
      rgba(245,242,235,0) 252deg,
      rgba(245,242,235,0) 360deg),
    radial-gradient(ellipse 58% 44% at 32% 24%, rgba(245,242,235,.08), rgba(245,242,235,0) 70%),
    radial-gradient(circle at 74% 79%, rgba(255,90,54,.16), rgba(255,90,54,0) 55%);
  pointer-events: none;
}

.vinyl__label{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  background: var(--bg-raised-2);
  box-shadow:
    0 0 0 1px rgba(245,242,235,.16),
    0 0 20px -4px rgba(0,0,0,.95);
}
.vinyl__label img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pushes in a little so the portrait reads at label size. */
  transform: scale(1.4);
  transform-origin: 50% 34%;
}
/* Logo variant: the label carries the Listrich wordmark on black, shown whole
   rather than cropped like a cover photo. */
.vinyl__label--logo{ background: #0a0a0a; }
.vinyl__label--logo img{
  object-fit: contain;
  transform: none;
  padding: 22%;
}
/* No spindle hole punched through the wordmark on the logo label. */
.vinyl__label--logo::after{ display: none; }
/* Spindle hole. */
.vinyl__label::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #050504;
  box-shadow: 0 0 0 1px rgba(245,242,235,.22);
}

/* Reduced motion: the record is presented as a still object. Everything else
   about it, grooves, sheen, label, is unchanged. */
@media (prefers-reduced-motion: reduce){
  .vinyl__disc{ animation: none; }
}

.notify{
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.notify input{
  flex: 1 1 190px;
  background: var(--bg-raised);
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 0.5px var(--line-strong);
  border-radius: 999px;
  padding: 13px 20px;
  color: var(--ink);
  font-size: .95rem;
  transition: box-shadow .2s var(--ease);
}
.notify input:focus{ box-shadow: inset 0 0 0 0.5px var(--accent); }
.notify input:focus-visible{ outline: none; }

/* ---- Table (about / services) ----------------------------------------------- */

.table-wrap{ overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.table{ width: 100%; border-collapse: collapse; min-width: 560px; }
.table th, .table td{
  text-align: left;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
}
.table th{
  color: var(--ink-faint);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--bg-raised);
}
.table tr:last-child td{ border-bottom: none; }
.table td:first-child{ font-weight: 600; color: var(--ink); }

/* ---- Contact ----------------------------------------------------------------- */

.toggle{
  position: relative;
  display: inline-flex;
  gap: 4px;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 0.5px var(--line-strong);
  border-radius: 999px;
  padding: 4px;
  margin-top: 20px;
}
.toggle__thumb{
  position: absolute;
  top: 4px; left: 4px;
  height: calc(100% - 8px);
  border-radius: 999px;
  background: var(--accent);
  transition: transform .35s var(--ease), width .35s var(--ease);
}
.toggle__btn{
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-weight: 600;
  font-size: .88rem;
  padding: 9px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .25s var(--ease);
}
.toggle__btn:hover{ color: var(--ink); }
.toggle__btn.is-active{ color: var(--accent-ink); }
.toggle__btn.is-active:hover{ color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce){
  .toggle__thumb{ transition: none; }
}

.form{ display: grid; gap: 18px; }
/* The submit button is the one grid item that should size to its label rather
   than stretch across the row. Once main.js wraps it, .submit-shell below is
   the grid item and carries the same rule. */
.form > .btn{ justify-self: start; }
.form__mode{ display: grid; gap: 18px; }
.form__mode[hidden]{ display: none; }
.field{ display: grid; gap: 8px; }
.field label{ font-size: .85rem; font-weight: 600; color: var(--ink-dim); }
.field input, .field select, .field textarea{
  background: var(--bg-raised);
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 0.5px var(--line-strong);
  border-radius: var(--radius);
  padding: 13px 16px;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  transition: box-shadow .2s var(--ease);
}
.field select{
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23a8a39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 13px;
}
.field input:focus, .field select:focus, .field textarea:focus{ box-shadow: inset 0 0 0 0.5px var(--accent); }
/* The box-shadow change above is enough of a focus cue on its own; the
   global :focus-visible ring on top of it read as a second, floating outline. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline: none; }
.field textarea{ min-height: 130px; resize: vertical; }
.field .help{ font-size: .8rem; color: var(--ink-faint); }
/* Shared by the contact form and the releases notify form, so it is not scoped
   to .form: the notify status sits outside its form element. */
/* One full line is held open, so a single-line result appears without nudging
   whatever sits under it. */
.status{ font-size: .88rem; min-height: 1.55em; }
.status.ok{ color: var(--accent); }

/* The success line is revealed rather than cut in: .status--enter parks it just
   below its resting position with no transition, and .status--in, added on the
   next frame, carries it home. See createSubmitFeedback() in main.js. */
.status--enter{ opacity: 0; transform: translateY(5px); }
.status--in{
  opacity: 1;
  transform: none;
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}
/* Added once the success line's own hold timer expires (see vanish() in
   main.js), so it eases back out rather than being cut. */
.status--out{
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}

/* ---- Submit feedback (waveform, then check) ---------------------------------
   The submit button is wrapped in this shell at run time and the animation is
   laid over it at inset 0, so the two share one box: the button fades out, the
   waveform fades in exactly where it was, and nothing around them moves.

   The bars pulse on their own timings so the row never re-syncs into a single
   sweep, then the whole row is squeezed horizontally into the middle of the
   stage while the ring is drawn around that same point and the tick is stroked
   inside it, which is what makes the two shapes read as one turning into the
   other rather than as a swap. */
.submit-shell{
  position: relative;
  display: inline-flex;
  justify-self: start;
}
.submit-shell.is-sending > .btn{ opacity: 0; }

.submit-fx{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s var(--ease);
}
.submit-shell.is-sending .submit-fx{ opacity: 1; transition: opacity .22s var(--ease) .08s; }

/* Both layers share this box, so the bars collapse to the exact centre the ring
   is then drawn around. */
.submit-fx__stage{
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-fx__wave{
  display: flex;
  align-items: center;
  gap: 3px;
  transform-origin: 50% 50%;
  transition: transform .85s cubic-bezier(.66,0,.34,1), opacity .65s linear .1s;
}
.submit-fx__wave i{
  width: 2px;
  height: 20px;
  border-radius: 1px;
  background: var(--accent);
  transform-origin: 50% 50%;
  animation: submit-wave .9s cubic-bezier(.45,0,.55,1) infinite;
  /* Idle between runs: a paused animation costs nothing, and the negative
     delays below mean each bar is already part-way through its cycle when it
     starts running, so the row never begins flat. */
  animation-play-state: paused;
}
.submit-shell.is-sending .submit-fx__wave i{ animation-play-state: running; }

@keyframes submit-wave{
  0%, 100%{ transform: scaleY(.22); }
  50%{ transform: scaleY(1); }
}

/* Mismatched durations as well as offsets, so no two bars stay in step. */
.submit-fx__wave i:nth-child(1){ animation-duration: .82s; animation-delay: -.06s; }
.submit-fx__wave i:nth-child(2){ animation-duration: .96s; animation-delay: -.41s; }
.submit-fx__wave i:nth-child(3){ animation-duration: .74s; animation-delay: -.19s; }
.submit-fx__wave i:nth-child(4){ animation-duration: .90s; animation-delay: -.55s; }
.submit-fx__wave i:nth-child(5){ animation-duration: 1.02s; animation-delay: -.28s; }
.submit-fx__wave i:nth-child(6){ animation-duration: .78s; animation-delay: -.47s; }

.submit-fx.is-mark .submit-fx__wave{
  transform: scaleX(.05) scaleY(.5);
  opacity: 0;
}

.submit-fx__mark{
  position: absolute;
  width: 30px;
  height: 30px;
  opacity: 0;
}
.submit-fx__mark circle,
.submit-fx__mark path{
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Drawn rather than faded in: the ring starts at the top and closes clockwise
   around the collapsing bars, and the tick is stroked once the ring is most of
   the way round. */
.submit-fx__mark circle{
  stroke-dasharray: 79;
  stroke-dashoffset: 79;
  transform: rotate(-90deg);
  transform-origin: 16px 16px;
}
.submit-fx__mark path{ stroke-dasharray: 17; stroke-dashoffset: 17; }

.submit-fx.is-mark .submit-fx__mark{ opacity: 1; transition: opacity .35s linear .2s; }
.submit-fx.is-mark .submit-fx__mark circle{
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.05s var(--ease) .2s;
}
.submit-fx.is-mark .submit-fx__mark path{
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .55s var(--ease) 1.05s;
}

@media (prefers-reduced-motion: reduce){
  /* The sequence is skipped outright under this query (see
     createSubmitFeedback in main.js), which never shows the waveform at all.
     This only guarantees it if the preference changes mid-run. */
  .submit-shell > .btn,
  .submit-fx,
  .submit-fx__wave,
  .submit-fx__wave i,
  .submit-fx__mark,
  .submit-fx__mark circle,
  .submit-fx__mark path,
  .status--in,
  .status--out{ animation: none; transition: none; }
}

/* ---- Homepage loader ---------------------------------------------------------
   A brief branded splash on the homepage only, same pulsing-waveform language
   as the form submit feedback above, at hero scale. Sits above everything and
   fades out once initSiteLoader() (main.js) is done holding it. */
.site-loader{
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s var(--ease);
}
.site-loader.is-hiding{ opacity: 0; pointer-events: none; }

body.is-loading{ overflow: hidden; }

.site-loader__bars{ display: flex; align-items: center; gap: 7px; }
.site-loader__bars i{
  width: 4px;
  height: 46px;
  border-radius: 2px;
  background: var(--accent);
  animation: site-loader-wave 1s cubic-bezier(.45,0,.55,1) infinite;
}
.site-loader__bars i:nth-child(1){ animation-duration: .9s; animation-delay: -.05s; }
.site-loader__bars i:nth-child(2){ animation-duration: 1.05s; animation-delay: -.42s; }
.site-loader__bars i:nth-child(3){ animation-duration: .82s; animation-delay: -.22s; }
.site-loader__bars i:nth-child(4){ animation-duration: 1s; animation-delay: -.62s; }
.site-loader__bars i:nth-child(5){ animation-duration: 1.12s; animation-delay: -.32s; }
.site-loader__bars i:nth-child(6){ animation-duration: .86s; animation-delay: -.52s; }

@keyframes site-loader-wave{
  0%, 100%{ transform: scaleY(.25); }
  50%{ transform: scaleY(1); }
}

/* The loader is skipped outright under this query (see initSiteLoader in
   main.js, which removes the element rather than just freezing it). Belt and
   braces in case the preference changes mid-hold. */
@media (prefers-reduced-motion: reduce){
  .site-loader{ display: none; }
}

.socials-builder{ display: grid; gap: 10px; margin-bottom: 12px; }
.social-field{ display: flex; gap: 10px; }
.social-field select{ flex: 0 0 128px; min-width: 0; }
.social-field input{ flex: 1; min-width: 0; }
.social-remove{
  flex: none;
  width: 46px;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 0.5px var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-faint);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--ease), box-shadow .2s var(--ease);
}
.social-remove:hover{ color: var(--accent); box-shadow: inset 0 0 0 0.5px var(--accent); }

@media (max-width: 480px){
  .social-field{ flex-wrap: wrap; }
  .social-field select{ flex: 1 1 auto; }
  .social-field input{ flex: 1 1 100%; }
}

/* ---- CTA band ------------------------------------------------------------------ */

.cta-band{
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--bg-raised), var(--bg-raised-2));
  padding: clamp(36px, 6vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::after{
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  right: -100px; top: -140px;
  background: radial-gradient(circle, rgba(255,90,54,.25), transparent 70%);
  pointer-events: none;
}
.cta-band__actions{ display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Footer --------------------------------------------------------------------- */

.footer{
  background: #080707;
  padding: 56px 0 34px;
  /* The footer already separates itself with a darker ground and 56px of its
     own top padding, so this only has to keep the last section off it. */
  margin-top: clamp(24px, 3vw, 40px);
}
.footer__top{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
@media (max-width: 760px){ .footer__top{ grid-template-columns: 1fr; gap: 32px; } }

.footer__brand .brand{ margin-bottom: 14px; }
.footer__brand p{ color: var(--ink-dim); max-width: 34ch; font-size: .93rem; }

.footer h4{
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin-bottom: 16px;
}
.footer ul{ display: grid; gap: 10px; }
.footer ul li{ color: var(--ink-dim); font-size: .93rem; }
.footer a{ color: inherit; transition: color .2s var(--ease); }
.footer a:hover{ color: var(--accent); }

@media (max-width: 760px){
  /* Footer links are plain inline text at desktop sizes, which is fine with
     a mouse. On touch, give each one a real tap target (~40px) without
     touching the desktop look. */
  .footer ul li a{
    display: inline-block;
    padding: 12px 0;
    line-height: 1.3;
  }
}

.footer__bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--ink-faint);
}
.footer__social{ display: flex; gap: 10px; }
.footer__social a{
  width: 38px; height: 38px;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 0.5px var(--line-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
}
.footer__social a:hover{ box-shadow: inset 0 0 0 0.5px var(--accent); color: var(--accent); }
.footer__social svg{ width: 16px; height: 16px; }

/* ---- Page hero variants (inner pages) --------------------------------------- */

.page-hero{ padding: clamp(48px, 8vw, 84px) 0 clamp(28px, 5vw, 48px); }
.page-hero .h1{ max-width: 18ch; }
.page-hero .lead{ margin-top: 18px; }