/* ═══════════════════════════════════════════════════════════
   iLINDY V3 — CONTENT PAGES
   Loaded after v3.css by ContentLayout.astro.

   These pages (blog, archives, FAQ, contact, music, legal…)
   were built against the old token set. Rather than rewrite
   every rule, the old token names are re-declared here mapped
   onto V3 values, and the shared primitives are restyled in
   the V3 language. Page-level CSS keeps working and inherits
   the Savoy look.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── old token names → V3 values ── */
  --color-gold:           var(--gold);
  --color-indigo:         var(--indigo);
  --color-light-purple:   var(--purple);
  --color-medium-blue:    var(--blue);
  --color-white:          var(--white);
  --color-light-gray:     #D9D5CC;
  --color-black:          #000000;

  --color-cta:            var(--cta);
  --color-cta-hover:      var(--cta-hover);
  --color-cta-text:       var(--ink);

  --color-bg:             var(--cream);
  --color-bg-dark:        var(--night);
  --color-bg-warm:        var(--gold);
  --color-text:           var(--ink);
  --color-text-muted:     var(--ink-muted);
  --color-text-on-dark:   var(--white);
  --color-text-on-gold:   var(--indigo);
  --color-link:           var(--blue);
  --color-link-hover:     var(--purple);

  --text-base: 1rem;   --text-lg: 1.125rem; --text-xl: 1.25rem;
  --text-2xl: 1.5rem;  --text-3xl: 1.875rem; --text-4xl: 2.25rem;
  --text-5xl: 3rem;    --text-6xl: 3.75rem;

  --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65;

  --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2rem;   --space-2xl: 3rem;
  --space-3xl: 4rem;  --space-4xl: 6rem;  --space-5xl: 8rem;

  --max-width: var(--max);
  --max-width-narrow: var(--max-narrow);
  --max-width-wide: var(--max-wide);

  --radius-sm: 0.6rem; --radius-md: 1rem; --radius-lg: 1.4rem;
  --radius-xl: 2rem;   --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(26,26,46,0.08);
  --shadow-md: 0 8px 30px rgba(26,26,46,0.08);
  --shadow-lg: 0 24px 60px rgba(26,26,46,0.14);

  /* The nav is position:fixed and 82px tall, so it covers the top of the
     page rather than pushing it down. Anything that opens a content page
     has to clear it — and clear it generously, because clearing a header
     by a pixel still reads as a title jammed against it.

     One variable rather than five numbers: the pages own their own hero
     spacing (their scoped styles outrank anything global), so the shared
     part has to be the value, not the rule. */
  --nav-clearance: clamp(7rem, 12vw, 9rem);

  --ease-out: var(--ease);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
}

/* ── nav ──
   The V3 nav is transparent until scrolled, which only works because the
   homepage has a dark hero behind it. Content pages start on cream, so the
   nav carries its solid treatment from the top. */
.nav {
  background: rgba(15, 13, 30, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(249, 202, 71, 0.18);
}

/* ── content pages sit on warm daylight paper, not the night ── */
body {
  background: var(--cream);
  color: var(--ink);
  line-height: var(--leading-relaxed);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); transition: color 0.2s var(--ease); }
a:hover { color: var(--purple); }

/* The link colour above is for page CONTENT only. The site chrome sits on a
   near-black ground, and letting the blue leak in made footer links almost
   invisible.

   The footer and the nav need different treatment, which is the subtlety that
   bit twice. `.footer` sets `color: var(--white)` itself, so anchors inside it
   inherit white and all they need is to stop taking the content blue. `.nav`
   sets no colour at all, so `inherit` there climbs past it to `body` — which
   on content pages is dark ink on cream. That painted the blog's nav links
   near-black on a near-black bar.

   So the nav gets an explicit colour to inherit from, matching the one v3.css
   uses for .nav-links a. */
.nav { color: rgba(255, 255, 255, 0.85); }

/* Buttons are exempt, and that exemption is the whole point of the :not().
   `.nav a` is specificity 0,1,1 and this sheet loads after v3.css, so it beat
   `.btn-gold`'s 0,1,0 and made "Start free" white-on-gold — but only on
   content pages, because only they load this sheet. A button carries its own
   colour with its own background; nothing here should be telling it what to
   be. */
.nav a:not(.btn), .footer a:not(.btn) { color: inherit; }
.footer li a:hover, .footer-bottom a:hover { color: var(--gold); }

/* ── layout primitives ── */
.container--narrow { max-width: var(--max-narrow); }
.container--wide { max-width: var(--max-wide); }

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--dark { background: var(--night); color: var(--white); }
.section--gold { background: var(--gold); color: var(--ink); }

.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark a:not(.btn-cta):not(.btn-secondary) { color: var(--gold); }

/* ── headings take the V3 display treatment ── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 800; line-height: 1.15; }

h1 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.04;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
}

h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); color: var(--indigo); }
.section--dark h2, .section--gold h2 { color: inherit; }
.section--gold h2 { color: var(--indigo); }

h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

/* ── the old .section-tag becomes the V3 gold kicker ── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: var(--space-md);
}
.section-tag::before {
  content: '';
  width: 2rem;
  height: 2px;
  background: var(--gold);
}
.section--dark .section-tag { color: var(--gold); }

/* ── buttons match the V3 pill set ── */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  background: var(--cta);
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.2s;
}
.btn-cta:hover {
  background: var(--cta-hover);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(249,202,71,0.32);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  background: transparent;
  color: var(--indigo);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  border: 1.5px solid rgba(50,45,143,0.35);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s var(--ease);
}
.btn-secondary:hover { border-color: var(--indigo); background: rgba(50,45,143,0.06); color: var(--indigo); transform: translateY(-2px); }

.btn-secondary--light { color: var(--gold); border-color: rgba(249,202,71,0.5); }
.btn-secondary--light:hover { background: rgba(249,202,71,0.12); color: var(--gold); }

.btn-secondary--on-gold { color: var(--indigo); border-color: var(--indigo); }
.btn-secondary--on-gold:hover { background: var(--indigo); color: var(--white); }

/* ── page hero for content pages: night ground, gold kicker ── */
.content-hero {
  background: var(--night);
  color: var(--white);
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem);
  position: relative;
}
.content-hero h1 { color: var(--white); }
.content-hero p { color: rgba(255,255,255,0.78); font-size: 1.12rem; max-width: 62ch; margin-top: 1rem; }
.content-hero a { color: var(--gold); }

/* ── prose ── */
.prose { font-size: 1.09rem; line-height: 1.75; color: #33334a; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.6rem; margin-bottom: 0.4rem; }
.prose h3 { margin-top: 2rem; margin-bottom: 0.3rem; color: var(--indigo); }
.prose img { border-radius: var(--radius-lg); margin-block: 1.8rem; box-shadow: var(--shadow-md); }
.prose blockquote {
  border-left: 3px solid var(--gold);
  padding: 0.2rem 0 0.2rem 1.4rem;
  margin-block: 1.8rem;
  font-style: italic;
  color: var(--indigo);
}
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose hr { border: none; border-top: 1px solid rgba(50,45,143,0.15); margin-block: 2.4rem; }
.prose code { background: rgba(50,45,143,0.07); padding: 0.15em 0.4em; border-radius: 0.35rem; font-size: 0.92em; }

/* ── video embeds (see src/lib/remark-embeds.mjs) ── */
.embed--video { position: relative; aspect-ratio: 16 / 9; margin-block: 1.8rem; border-radius: var(--radius-lg); overflow: hidden; background: var(--night); box-shadow: var(--shadow-md); }
.embed--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── cards ── */
.v3-card {
  background: var(--white);
  border: 1px solid rgba(50,45,143,0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.v3-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

@media (max-width: 768px) {
  :root { --text-5xl: 2.25rem; --text-4xl: 1.875rem; --text-3xl: 1.5rem; --space-4xl: 4rem; --space-5xl: 5rem; }
  .btn-cta, .btn-secondary { width: 100%; text-align: center; }
}