/* ═══════════════════════════════════════════════════════════════
   djinn — site-wide styles
   Dark, restrained club energy. Single acid-lime accent, near-black
   ground, Syne display type, Space Grotesk body.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:         #07070a;
  --bg-soft:    #0d0d12;
  --surface:    #131318;
  --surface-2:  #1a1a21;
  --ink:        #f4f5f7;
  --muted:      #9496a1;
  --faint:      #5c5e68;
  --acid:       #b6ff3a;
  --acid-dim:   rgba(182, 255, 58, .14);
  --acid-glow:  rgba(182, 255, 58, .35);
  --acid-ink:   #06231f;
  --line:       rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);
  --red:        #ff5c6c;
  --green:      #34d399;

  --font-display: "Syne", sans-serif;
  --font-body:    "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius:    18px;
  --radius-sm: 11px;
  --shadow:    0 25px 55px -18px rgba(0, 0, 0, .65);
  --ease:      cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--acid); color: var(--acid-ink); padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 2.4rem); }
.container--narrow { max-width: 760px; }
/* The decks need more room than the site's 1180 text column to look like real
   1210s rather than tall oblongs — the mixer sits between them, so the three
   together want ~1500. */
.container--booth { max-width: 1480px; }  /* enough for ~500px decks beside a 380px mixer */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
  text-transform: uppercase;
}
p { line-height: 1.7; color: var(--muted); margin: 0; }

.eyebrow {
  font-size: .78rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--acid); font-weight: 600; margin-bottom: 1rem; display: block;
}

.icon { width: 1.15em; height: 1.15em; vertical-align: -0.22em; flex-shrink: 0; }
.icon--lg { width: 28px; height: 28px; }
.fc-icon .icon, .socials .icon, .lightbox-close .icon { width: 22px; height: 22px; }
.alert .icon { flex-shrink: 0; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .92rem;
  text-decoration: none; border: 1px solid var(--line-strong); color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
  cursor: pointer; background: transparent; font-family: var(--font-body);
}
.btn:hover { border-color: var(--acid); transform: translateY(-1px); }
.btn--primary { background: var(--acid); color: var(--acid-ink); border-color: var(--acid); }
.btn--primary:hover { background: #c8ff62; }
.btn--block { width: 100%; justify-content: center; }
.btn--sm { padding: .55rem 1.1rem; font-size: .82rem; }

/* ─── Header / nav ─── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7, 7, 10, .78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1.1rem; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid); flex-shrink: 0; }
.brand__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  letter-spacing: .02em; text-transform: uppercase;
}
.main-nav { display: flex; align-items: center; gap: 2rem; }
.main-nav a {
  text-decoration: none; color: var(--muted); font-size: .92rem; font-weight: 500;
  position: relative; padding-block: .3rem; transition: color .2s;
}
.main-nav a:hover, .main-nav a.is-active { color: var(--ink); }
.main-nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--acid);
}
.header-actions { display: flex; align-items: center; gap: 1rem; }
.icon-btn {
  display: none; background: none; border: 1px solid var(--line-strong); color: var(--ink);
  width: 42px; height: 42px; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer;
}
.mobile-nav {
  display: none; flex-direction: column; gap: .25rem; padding: 1rem clamp(1.2rem, 4vw, 2.4rem) 1.5rem;
  border-top: 1px solid var(--line); background: var(--bg);
}
.mobile-nav a {
  text-decoration: none; color: var(--ink); font-size: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.mobile-nav.is-open { display: flex; }
@media (max-width: 860px) {
  .main-nav { display: none; }
  .icon-btn { display: flex; }
  .header-actions .hide-sm { display: none; }
}

/* ─── Hero (inner pages) ─── */
.page-hero { padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem); text-align: center; }
.page-hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); line-height: .92; }
.page-hero p { max-width: 42ch; margin: 1.4rem auto 0; font-size: 1.05rem; }

/* ─── Sections ─── */
section { padding-block: clamp(3.5rem, 8vw, 6rem); }
section.tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.divider { height: 1px; background: var(--line); border: none; margin: 0; }

/* ─── Bio / content blocks ─── */
.bio-block { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bio-block p { font-size: 1.08rem; color: #c9cad2; white-space: pre-line; }
.bio-portrait {
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; background: var(--surface);
  border: 1px solid var(--line);
}
.bio-portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 780px) { .bio-block { grid-template-columns: 1fr; } .bio-portrait { order: -1; max-width: 340px; margin-inline: auto; } }

/* ─── Gallery ─── */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.gallery-item {
  position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/5;
  background: var(--surface); border: 1px solid var(--line); cursor: pointer;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item .cap {
  position: absolute; inset: auto 0 0 0; padding: 1.4rem .9rem .8rem;
  background: linear-gradient(0deg, rgba(0,0,0,.8), transparent);
  font-size: .84rem; color: var(--ink); opacity: 0; transition: opacity .25s;
}
.gallery-item:hover .cap { opacity: 1; }
.empty-state { text-align: center; padding: 3.5rem 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--faint); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center;
  background: rgba(4,4,6,.92); padding: 2rem;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 10px; }
.lightbox-close {
  position: absolute; top: 1.4rem; right: 1.4rem; background: rgba(255,255,255,.06); border: 1px solid var(--line-strong);
  color: var(--ink); width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* ─── Gigs list ─── */
.gig-list { display: flex; flex-direction: column; }
.gig-row {
  display: flex; align-items: center; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.gig-date {
  font-family: var(--font-display); font-weight: 800; color: var(--acid); min-width: 7rem; font-size: 1rem; text-transform: uppercase;
}
.gig-info { flex: 1; min-width: 200px; }
.gig-info .name { font-weight: 600; font-size: 1.05rem; }
.gig-info .venue { color: var(--muted); font-size: .9rem; margin-top: .2rem; }

/* ─── Cards ─── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; }

/* ─── Forms ─── */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .45rem; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: .8rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: .95rem;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--acid); }
.field textarea { resize: vertical; min-height: 120px; }
.alert { padding: .9rem 1.2rem; border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 1.2rem; }
.alert--success { background: rgba(52, 211, 153, .12); color: var(--green); border: 1px solid rgba(52,211,153,.3); }
.alert--error { background: rgba(255, 92, 108, .12); color: var(--red); border: 1px solid rgba(255,92,108,.3); }

/* ─── Socials ─── */
.socials { display: flex; gap: .7rem; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--muted);
  transition: color .2s, border-color .2s;
}
.socials a:hover { color: var(--acid); border-color: var(--acid); }

/* ─── Footer ─── */
.site-footer { border-top: 1px solid var(--line); padding-block: 3rem 2rem; margin-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.footer-col h4 { font-size: .8rem; letter-spacing: .12em; color: var(--faint); margin-bottom: 1rem; font-weight: 700; }
.footer-col a, .footer-contact span { display: block; color: var(--muted); text-decoration: none; font-size: .92rem; margin-bottom: .7rem; }
.footer-col a:hover { color: var(--acid); }
.footer-brand p { margin-top: 1rem; max-width: 32ch; font-size: .9rem; }
.footer-brand .socials { margin-top: 1.4rem; }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.8rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--faint);
}
.footer-bar a { color: var(--faint); text-decoration: none; }
.footer-bar a:hover { color: var(--acid); }
.footer-legal { display: flex; gap: 1.2rem; }
.footer-credit .credit-link { color: var(--muted); border-bottom: 1px solid var(--line-strong); }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ─── Home hero ─── */
.hero-home {
  position: relative; overflow: hidden; min-height: min(84vh, 780px);
  display: flex; align-items: center; border-bottom: 1px solid var(--line);
}
.hero-home canvas#wave { position: absolute; inset: 0; z-index: 1; display: block; height: 100%; }
.hero-home .glow {
  position: absolute; left: 50%; bottom: -30%; width: 120vmax; height: 70vmax; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--acid-dim), transparent 70%); z-index: 0; pointer-events: none; filter: blur(10px);
}
.hero-portrait {
  position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: no-repeat; background-image: var(--portrait-url); background-size: cover; background-position: 38% 22%;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 20%, transparent 92%);
}
.hero-home .container { position: relative; z-index: 3; }
.hero-home h1 { font-size: clamp(3.2rem, 11vw, 7.5rem); line-height: .84; }
.hero-home h1 .g {
  background: linear-gradient(180deg, #fff 0%, #d6d8de 55%, #6f7178 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-home .tag { margin-top: 1.6rem; font-size: clamp(1.05rem, 2.4vw, 1.35rem); color: #cfd1d8; max-width: 34ch; }
.hero-home .tag b { color: #fff; font-weight: 600; }
.hero-home .hero-actions { display: flex; gap: 1rem; margin-top: 2.2rem; flex-wrap: wrap; }
@media (min-width: 880px) {
  .hero-portrait { inset: 0 0 0 auto; width: 54vw; background-position: 40% 24%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
  .hero-home .container { max-width: 1180px; }
  .hero-home .hero-copy { max-width: 640px; }
}

/* Feature cards (home) */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.feature-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; text-decoration: none; color: var(--ink); transition: border-color .25s var(--ease), transform .25s var(--ease);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.feature-card:hover { border-color: var(--acid); transform: translateY(-3px); }
.feature-card .fc-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--acid-dim); color: var(--acid);
  display: flex; align-items: center; justify-content: center;
}
.feature-card h3 { font-size: 1.3rem; }
.feature-card p { font-size: .92rem; }
.feature-card .fc-link { color: var(--acid); font-size: .85rem; font-weight: 600; margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; }
@media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr; } }

/* ─── Blog ─── */
.blog-list { display: flex; flex-direction: column; gap: 1.2rem; }
.blog-card {
  display: flex; gap: 1.4rem; align-items: stretch; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.blog-card:hover { border-color: var(--acid); transform: translateY(-2px); }
.blog-card__cover { flex-shrink: 0; width: 220px; }
.blog-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { flex: 1; min-width: 0; padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .4rem; }
.blog-card__date { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.blog-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; }
.blog-card__excerpt { color: var(--muted); font-size: .92rem; line-height: 1.6; }
.blog-card .fc-link { margin-top: .4rem; }
@media (max-width: 620px) { .blog-card { flex-direction: column; } .blog-card__cover { width: 100%; aspect-ratio: 16/9; } }

.blog-post-cover { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/7; }
.blog-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.blog-post-body { font-size: 1.08rem; color: #c9cad2; line-height: 1.8; white-space: pre-line; }

/* ─── Utility ─── */
.mt-lg { margin-top: 3rem; }
.text-center { text-align: center; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Releases (EP / album / single feature blocks on the music page) ─────────
   Built from the mock Daz picked (Option A): the release is the hero — cover,
   tracklist, play/queue. The rows drive the existing playlist rows, so the
   decks and queue behave identically whether you start a track here or below. */
.releases { margin: 0 0 2rem; }
.release {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 14px; margin-top: 1rem; overflow: hidden;
}
/* The bar is always visible; the panel is what collapses. display lives here,
   never inline, or every release would render open. */
.release__bar {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  padding: .8rem 1rem; background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}
.release__bar:hover { background: rgba(255,255,255,.03); }
.release__caret {
  width: 0; height: 0; flex-shrink: 0;
  border-left: 6px solid var(--acid);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .2s;
}
.release.is-open .release__caret { transform: rotate(90deg); }
.release__thumb {
  width: 38px; height: 38px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(150deg, #1a1030, #07070a); border: 1px solid var(--line);
}
.release__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.release__bar-text { flex: 1; min-width: 0; }
.release__count { flex-shrink: 0; font-size: .78rem; color: var(--muted, #9aa0a8); }
.release__panel { display: none; grid-template-columns: 220px 1fr; gap: 1.6rem; padding: 0 1.4rem 1.4rem; }
.release.is-open .release__panel { display: grid; }

/* Panel contents. NOTE: these were accidentally deleted when the collapsing
   styles were written over this block — the tracklist then fell back to raw
   browser <button> chrome (white boxes in a wrapping row) while every
   assertion still passed, because they counted rows and read text rather than
   looking at it. Anything visual needs the screenshot checked. */
.release__art {
  aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-strong);
  background: linear-gradient(150deg, #1a1030, #07070a);
  display: flex; align-items: center; justify-content: center;
}
.release__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.release__noart {
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800; font-size: .85rem;
  text-align: center; color: rgba(255,255,255,.6); padding: .8rem;
}
.release__type {
  display: inline-block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acid); border: 1px solid var(--acid); border-radius: 999px;
  padding: .1rem .55rem; margin-bottom: .3rem;
}
.release__title {
  display: block; font-size: 1.1rem; line-height: 1.25; margin: 0;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.release__meta { color: var(--muted, #9aa0a8); font-size: .84rem; margin: 0 0 1rem; }
.release__tracks { display: grid; gap: 2px; min-width: 0; }
.release__row, .release__body { min-width: 0; }
.release__row {
  display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
  padding: .6rem .7rem; border-radius: 8px; cursor: pointer;
  background: none; border: 0; color: inherit; font: inherit;
}
.release__row:hover, .release__row:focus-visible { background: rgba(255,255,255,.05); outline: none; }
.release__n { width: 1.4rem; color: var(--muted, #9aa0a8); font-size: .8rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.release__play {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; flex-shrink: 0;
}
.release__play::after {
  content: ""; border-left: 7px solid var(--acid);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px;
}
.release__row:hover .release__play { border-color: var(--acid); }
.release__track-title { flex: 1; min-width: 0; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.release__genre { font-size: .72rem; color: var(--muted, #9aa0a8); flex-shrink: 0; }
.release__actions { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
@media (max-width: 560px) {
  /* the genre chip is the least useful thing on a phone row, and it was the
     last thing making the tracklist wider than the screen */
  .release__genre { display: none; }
}
@media (max-width: 720px) {
  .release__panel { grid-template-columns: 1fr; gap: 1.1rem; padding: 0 1rem 1rem; }
  .release__art { max-width: 190px; }
  .release__bar { padding: .7rem .8rem; gap: .6rem; }
  .release__title { font-size: 1rem; }
  .release__count { font-size: .72rem; }
}

/* ── Production studio listings (music and samples, kept apart) ───────────── */
.studio-block { margin-top: 2.4rem; }
.studio-list { display: grid; gap: .5rem; margin-top: .9rem; }
.studio-item {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 12px; padding: .75rem .9rem;
}
.studio-cover {
  width: 46px; height: 46px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(150deg, #1a1030, #07070a); border: 1px solid var(--line);
}
.studio-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.studio-meta { display: grid; gap: .15rem; flex: 1 1 12rem; min-width: 0; }
.studio-title { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-artist { font-size: .8rem; color: var(--muted, #9aa0a8); }
.studio-item audio { flex: 1 1 16rem; min-width: 0; max-width: 100%; height: 36px; }
@media (max-width: 560px) { .studio-item audio { flex-basis: 100%; } }

/* ── Video grid (DJing and Production pages) ─────────────────────────────── */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.2rem; margin-top: 1.1rem; }
.video-item { margin: 0; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.video-item video { width: 100%; aspect-ratio: 16/9; display: block; background: #000; }
.video-item figcaption { padding: .7rem .9rem .85rem; font-size: .85rem; color: var(--muted, #9aa0a8); }
@media (max-width: 560px) { .video-grid { grid-template-columns: 1fr; } }

/* ── Legal links in the footer bar, and the legal pages themselves ────────── */
.footer-legal { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.footer-legal a { color: var(--muted, #9aa0a8); font-size: .82rem; text-decoration: none; }
.footer-legal a:hover { color: var(--ink); }
.prose h2 { font-size: 1.05rem; margin: 2rem 0 .5rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted, #9aa0a8); margin: 0 0 .9rem; }
.prose a { color: var(--acid); }
@media (max-width: 560px) { .footer-bar { flex-wrap: wrap; gap: .6rem; } }

/* Very narrow phones (320px, e.g. an older SE).
   The hero clamps have a FLOOR of 2.6rem/3.2rem, and a floor does not scale, so
   at 320px a single long word ("Cookies") was painted wider than the screen and
   pushed the whole page sideways. Measured, not guessed: 20px of overflow on the
   legal pages and 55px on the 404. Only this narrow band is touched, so the
   normal phone size is visually unchanged. */
@media (max-width: 380px) {
    .page-hero h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
    .hero-home h1 { font-size: clamp(2.4rem, 12vw, 3.2rem); }
    /* Belt and braces for any future long word or pasted URL. */
    .page-hero h1, .hero-home h1 { overflow-wrap: break-word; }
}

/* A grid/flex child defaults to min-width:auto, so its track is stretched to its
   min-content width and it can end up WIDER than the track it sits in. At 320px
   the feature cards measured 310px inside a 282px track and pushed the page 9px
   sideways. This is the same root cause as every other overflow bug on this
   platform, so it is worth fixing at the source rather than per breakpoint. */
.feature-card { min-width: 0; }
@media (max-width: 380px) {
    .feature-card { padding-left: 1.25rem; padding-right: 1.25rem; }
}