/* ============================================================================
   sambadiagne.com — design system
   Archetype C ("hybride founder"): Apple-grade restraint, white dominant,
   ONE accent = the locked Orijins gold.

   Palette note (contrast-checked against #FFF, WCAG 2.1):
     --gold      #C9A24B  2.40:1  → DECORATIVE ONLY (rules, seal, borders, on-dark)
     --gold-ink  #7A5C10  6.24:1  → gold used as TEXT on white (AA)
   Never set body text in --gold on a light background.
   ========================================================================= */

:root {
  /* ink */
  --ink:        #1D1D1F;   /* 16.83:1 — headings, body */
  --ink-2:      #424245;   /* 10.01:1 — secondary prose */
  --ink-3:      #6E6E73;   /*  5.07:1 — muted, still AA */
  --hairline:   #E3E3E6;

  /* surfaces */
  --paper:      #FFFFFF;
  --paper-2:    #F5F5F7;   /* Apple's off-white band */
  --noir:       #0A0A0A;   /* the brand's locked base, used for accent blocks */
  --noir-2:     #161616;

  /* accent — the single one */
  --gold:       #C9A24B;
  --gold-warm:  #D4A537;
  --gold-ink:   #7A5C10;

  /* type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* rhythm */
  --measure: 68ch;
  --shell: 1120px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(5rem, 12vh, 9.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: var(--gold-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: 0.7rem 1.1rem; z-index: 200; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; top: 0; }

/* ------------------------------------------------------------- typography -- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.75rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); letter-spacing: -0.022em; }
h4 { font-size: 1.0625rem; letter-spacing: -0.015em; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1875rem, 2.1vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.018em;
}

/* the small gold label above a heading */
.kicker {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.15rem;
}

.muted { color: var(--ink-3); }

.serif { font-family: var(--serif); }

/* ORIJINS wordmark — serif, caps, generous tracking (locked brand rule) */
.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

/* --------------------------------------------------------------- layout -- */

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

section { padding-block: var(--section-y); }

.band { background: var(--paper-2); }

.band--dark {
  background: var(--noir);
  color: #F2F2F2;
}
.band--dark h1, .band--dark h2, .band--dark h3 { color: #FFF; }
.band--dark .kicker { color: var(--gold); }
.band--dark .lede { color: #C9C9CE; }
.band--dark a { color: var(--gold); }

.split {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--narrow-first { grid-template-columns: 5fr 7fr; }
}

.stack > * + * { margin-top: 1.5rem; }

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}

.nav__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: 56px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav__brand {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-right: auto;
  white-space: nowrap;
}
.nav__brand:hover { text-decoration: none; opacity: 0.65; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav__links a {
  font-size: 0.8125rem;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.nav__links a:hover { color: var(--ink); text-decoration: none; }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 500; }

.nav__lang {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__lang:hover { border-color: var(--gold); color: var(--ink); }

.nav__burger {
  display: none;
  font-size: 1.15rem;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  padding: 0.25rem;
}

@media (max-width: 860px) {
  .nav__burger { display: block; order: 3; }
  .nav__links {
    order: 4;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 0.75rem;
  }
  .nav__inner { flex-wrap: wrap; height: auto; padding-block: 0.6rem; }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 0.6rem 0; font-size: 0.95rem; }
}

/* --------------------------------------------------------------- button -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  padding: 0.78rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease), color 0.2s var(--ease);
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--ink); color: #FFF; }
.btn--primary:hover { background: #000; }

.btn--ghost { border-color: var(--hairline); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }

.band--dark .btn--primary { background: var(--gold); color: var(--noir); }
.band--dark .btn--primary:hover { background: var(--gold-warm); }
.band--dark .btn--ghost { border-color: rgba(255, 255, 255, 0.28); color: #FFF; }
.band--dark .btn--ghost:hover { border-color: var(--gold); }

/* text link with a trailing arrow */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 500;
}
.arrow-link::after {
  content: "→";
  transition: transform 0.2s var(--ease);
}
.arrow-link:hover { text-decoration: none; }
.arrow-link:hover::after { transform: translateX(4px); }

/* ----------------------------------------------------------------- hero -- */

.hero {
  padding-top: clamp(3.5rem, 8vh, 6rem);
  padding-bottom: var(--section-y);
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* Editorial masthead headline — Playfair Display, tight leading. Scoped to the
   hero so sections below are untouched in this pass. Colours unchanged. */
.hero h1 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.005em;
  margin-bottom: 1.5rem;
}
/* One emphasised word, in the site's EXISTING accent (gold used as text = gold-ink). */
.hero h1 em {
  font-style: italic;
  font-weight: 800;
  color: var(--gold-ink);
}

.hero__facets {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--ink-2);          /* was --ink-3: higher contrast, easier to read */
  font-weight: 500;
  letter-spacing: -0.008em;
  margin-bottom: 2.25rem;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Social proof baked into the CTA, just above the field. */
.capture__proof {
  margin: 0 0 0.7rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -0.006em;
}

/* Slim trust row under the hero CTA. Inter 600, muted, existing colours only. */
.hero__trust {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.003em;
  color: var(--ink-3);
}
.hero__trust b { font-weight: 600; color: var(--ink-2); }

/* Branded hero visual — the abundance (golden) spiral. Fills the .portrait as a
   finished graphic until a real photo (/.portrait__img) drops in on top. */
.hero-figure {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 92% at 34% 44%, rgba(201, 162, 75, 0.10), transparent 62%),
    linear-gradient(158deg, var(--paper) 0%, var(--paper-2) 100%);
}
.hero-figure::after {           /* whisper-faint grain for depth */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(29, 29, 31, 0.05) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
  opacity: 0.55;
}
.hero-figure__spiral { width: 84%; height: 84%; }

/* --------------------------------------------------- portrait + slots --- */

/* A portrait slot. Until the real shoot lands it renders as an HONEST
   placeholder (see .slot__note) — never a fake image. */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-2);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Real photo overlays the honest placeholder; onerror removes it so a missing
   file falls back to the .slot rather than a broken-image icon. */
.portrait__img { position: absolute; inset: 0; z-index: 1; }

.portrait--wide { aspect-ratio: 3 / 2; }

/* Moments gallery — a balanced pair, each an honest .portrait slot. */
.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1.6rem;
}
@media (min-width: 720px) {
  .gallery { grid-template-columns: 1fr 1fr; }
}
.gallery .portrait { aspect-ratio: 1 / 1; }

.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  height: 100%;
  padding: 2rem;
  text-align: center;
  border: 1px dashed #D2D2D7;
  border-radius: 14px;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 11px,
      rgba(201, 162, 75, 0.05) 11px 22px
    );
}
.slot__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.slot__note {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 30ch;
  margin: 0;
}

/* ----------------------------------------------------------------- seal -- */

/* The Orijins seal: concentric gold rings, drawn in CSS (zero assets). */
.seal {
  position: relative;
  width: clamp(180px, 26vw, 280px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.55);
}
.seal::before,
.seal::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.4);
}
.seal::after { inset: 30%; border-color: rgba(201, 162, 75, 0.75); }

.seal__core {
  position: absolute;
  inset: 44%;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 34px 6px rgba(201, 162, 75, 0.35);
}

/* --------------------------------------------------------------- proof --- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-top: 3.25rem;
}

.stat__n {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 0.55rem;
}
.stat__l {
  font-size: 0.875rem;
  color: var(--ink-3);
  line-height: 1.45;
  margin: 0;
}
.band--dark .stat__l { color: #9E9EA6; }

/* pull quote */
.quote {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.32;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0;
}
.quote + .quote__by {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.band--dark .quote__by { color: var(--gold); }

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

/* Every .cards grid on the site holds 4 items, so the min track must let all
   four sit on one row inside the shell's 1024px content box
   (1120 max-width − 2×48 gutter): 4×225 + 3×28 gap = 984. Raising the min
   above 235px silently drops the fourth card onto its own row. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: 3.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.75rem;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--paper);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.card:hover { border-color: var(--gold); transform: translateY(-2px); }

.card p { font-size: 0.9375rem; color: var(--ink-2); margin: 0; }
.card .arrow-link { margin-top: auto; padding-top: 0.9rem; }

.card__domain {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.band--dark .card {
  background: var(--noir-2);
  border-color: rgba(255, 255, 255, 0.1);
}
.band--dark .card p { color: #A9A9B0; }

/* ---------------------------------------------------- empty / pending ---- */

/* Used wherever the real content (essays, books, tracks) does not exist yet.
   The site says so plainly rather than shipping invented placeholders. */
.pending {
  margin-top: 3rem;
  padding: clamp(2.25rem, 5vw, 3.5rem);
  border: 1px dashed #D2D2D7;
  border-radius: 16px;
  background: var(--paper-2);
  text-align: center;
}
.pending h3 { margin-bottom: 0.85rem; }
.pending p { margin-inline: auto; color: var(--ink-3); font-size: 0.9375rem; }
.pending .btn { margin-top: 1.6rem; }

/* --------------------------------------------------------------- forms --- */

.capture {
  max-width: 560px;
  margin-top: 2.5rem;
}

.field {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.field input[type="email"] {
  flex: 1 1 260px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  padding: 0.78rem 1.15rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--paper);
  transition: border-color 0.2s var(--ease);
}
.field input[type="email"]:focus { border-color: var(--gold); }
.field input[type="email"]::placeholder { color: #A1A1A8; }

.band--dark .field input[type="email"] {
  background: var(--noir-2);
  border-color: rgba(255, 255, 255, 0.16);
  color: #FFF;
}

.form__note {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.band--dark .form__note { color: #8E8E96; }

.form__status {
  margin-top: 0.9rem;
  font-size: 0.875rem;
  min-height: 1.4em;
}
.form__status[data-state="err"] { color: #B3261E; }
.form__status[data-state="ok"] { color: var(--gold-ink); }
.band--dark .form__status[data-state="ok"] { color: var(--gold); }
.band--dark .form__status[data-state="err"] { color: #F2B8B5; }

/* -------------------------------------------------------------- player --- */

.track {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline);
}
.track:first-of-type { border-top: 1px solid var(--hairline); }

.track__play {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.track__play:hover { border-color: var(--gold); }

.track__meta { flex: 1 1 auto; min-width: 0; }
.track__title { font-weight: 500; font-size: 0.9375rem; }
.track__sub { font-size: 0.8125rem; color: var(--ink-3); }

/* -------------------------------------------------------------- footer --- */

.footer {
  background: var(--noir);
  color: #A9A9B0;
  padding-block: clamp(3.5rem, 8vh, 5.5rem) 2.5rem;
  font-size: 0.875rem;
}

.footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer h4 {
  color: #FFF;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: 0.6rem; }
.footer a { color: #A9A9B0; }
.footer a:hover { color: var(--gold); text-decoration: none; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-size: 0.8125rem;
  color: #76767E;
}

/* ------------------------------------------------------------- reveal ---- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- prose --- */

/* Long-form pages (histoire, essays) */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 3.25rem; margin-bottom: 1.1rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2.25rem; margin-bottom: 0.75rem; }
.prose p { color: var(--ink-2); }
.prose blockquote {
  margin: 2.25rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
}

/* page header for the sub-pages */
.page-head {
  padding-top: clamp(3rem, 7vh, 5rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}
.page-head h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); margin-bottom: 1.25rem; }

/* ------------------------------------------------------------- law list -- */

/* The 13 / 21 laws on /livres/. A list rather than a table: 13 rows of three
   columns is unreadable under 700px, and this degrades cleanly to one column. */
.laws { list-style: none; margin: 2.25rem 0 0; padding: 0; }

.laws li {
  display: grid;
  gap: 0.15rem 1.25rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--hairline);
}
.laws li:last-child { border-bottom: 1px solid var(--hairline); }

@media (min-width: 720px) {
  .laws li { grid-template-columns: 3.5rem 1fr 1fr; align-items: baseline; }
}

.laws__n {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold-ink);
  letter-spacing: 0.04em;
}
.laws__name { font-weight: 500; letter-spacing: -0.012em; }
.laws__why { font-size: 0.9375rem; color: var(--ink-3); }

@media (max-width: 719px) {
  .laws__n { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; }
}

/* ------------------------------------------------------- social buttons -- */

/* Icon row. Adding a network = one <a> with an inline <svg>; no asset, no
   icon font. Labels stay in aria-label so the row reads as buttons, not text. */
.social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

/* Inside a .card the icons are the card's closing element, so they must sit on
   the same baseline as the .arrow-link in the sibling cards — otherwise the row
   floats mid-card and the grid reads as crooked. */
.card .social { margin-top: auto; padding-top: 0.9rem; }

/* In the footer the row follows a <ul>, whose bottom margin would otherwise
   double up with the row's own. Keep one consistent gap. */
.footer .social { margin-top: 1.15rem; }
.footer .social li { margin-top: 0; }

.social a {
  width: 44px;               /* 44px = the minimum comfortable touch target */
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
              transform 0.2s var(--ease), background 0.2s var(--ease);
}
.social a:hover {
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
  text-decoration: none;
}
.social svg { width: 19px; height: 19px; fill: currentColor; display: block; }

/* on the dark footer */
.footer .social a { border-color: rgba(255,255,255,.18); color: #A9A9B0; }
.footer .social a:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,162,75,.08); }

/* ------------------------------------------------------ rhythm modifiers -- */

/* Every homepage section landed within 557–839px, so nothing stood out and the
   page read flat over 7.5 screens. These let the two "big idea" beats breathe
   and the connective sections get out of the way. */
.section--wide  { padding-block: clamp(7.5rem, 21vh, 16rem); }
.section--tight { padding-block: clamp(2.75rem, 6vh, 4.5rem); }

/* A card title that is also a link must still read as a title. Without this it
   inherits the gold link colour and the essay cards look like link lists next to
   the book cards two sections below. */
.card h3 a { color: inherit; }
.card h3 a:hover { color: var(--gold-ink); text-decoration: none; }
.band--dark .card h3 a:hover { color: var(--gold); }

/* ---------------------------------------------------------- trust strip -- */

/* Proof above the fold. Deliberately a thin line of facts, not cards — the
   Receipts section three screens down is where they get room. Only claims that
   can be checked go here. */
.trust {
  border-block: 1px solid var(--hairline);
  background: var(--paper-2);
  padding-block: 1.1rem;
}
.trust__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-align: center;
}
/* No gap on the li itself — it would also push the <b> away from its own text.
   Spacing between items comes from the ul's gap; the dot carries its own margin. */
.trust__row li { display: flex; align-items: center; }
.trust__row li + li::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
  margin-right: 1.6rem;
}
.trust b { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------- inline capture -- */

/* A second, contextual capture mid-page. Same single list — the ask changes to
   match what the reader just read, the destination never does. */
.capture--inline {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
  max-width: 620px;
}
.band--dark .capture--inline { border-top-color: rgba(255,255,255,.14); }

/* the hero form sits tighter than a standalone block */
.hero .capture { margin-top: 2rem; max-width: 460px; }
.hero .form__note { margin-top: 0.75rem; }

/* ------------------------------------------------------------------ quiz -- */

.quiz { max-width: 780px; }
.quiz fieldset { border: 0; margin: 0 0 2.5rem; padding: 0; }
.quiz legend {
  display: block;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 1.1rem;
  padding: 0;
}
.quiz__n {
  font-family: var(--serif);
  color: var(--gold-ink);
  margin-right: 0.5rem;
  font-weight: 600;
}

.opt {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--ink-2);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.opt + .opt { margin-top: 0.6rem; }
.opt:hover { border-color: var(--gold); }
.opt input { margin: 0.25rem 0 0; accent-color: var(--gold-ink); flex: 0 0 auto; }
.opt:has(input:checked) { border-color: var(--ink); background: var(--paper-2); color: var(--ink); }
/* fallback for engines without :has() — the accent ring still shows the state */
.opt input:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

.quiz__actions { margin-top: 2.5rem; }

.quiz__result {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--gold);
  border-radius: 16px;
  background: var(--paper-2);
  max-width: 780px;
}
.quiz__result h3 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin: 0.5rem 0 0.9rem;
}
.quiz__result:focus { outline: none; }

/* --------------------------------------------------------------- callout -- */

/* A block that asks for an action, given real visual weight — used for the
   quiz, which was previously a text link five screens down and effectively
   invisible. */
.callout {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--gold);
  border-radius: 16px;
  background: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}
.callout__text { flex: 1 1 320px; }
.callout h3 { margin-bottom: 0.6rem; }
.callout p { font-size: 0.9375rem; color: var(--ink-2); margin: 0; }
.band--dark .callout { background: var(--noir-2); }
.band--dark .callout p { color: #A9A9B0; }

/* ── Mobile optimisation ──────────────────────────────────────────────────
   Phones carried the full desktop rhythm — ~100px of section padding each side
   and large stacked hero gaps, so the CTA and portrait sat far down and every
   section demanded extra scrolling. Tighten that vertical rhythm, and lift form
   inputs to 16px so iOS Safari doesn't zoom in on focus. Palette + content
   unchanged; placed last so these win by source order over the base rules. */
@media (max-width: 700px) {
  :root { --section-y: clamp(2.75rem, 7vh, 4.25rem); }   /* was ~100px → ~60px */
  .hero { padding-top: 1.5rem; }
  .hero__grid { gap: 2rem; }
  .hero h1 { margin-bottom: 1.15rem; }
  .hero__facets { margin-bottom: 1.35rem; }
  .hero .capture { margin-top: 1.4rem; }
  .hero__trust { margin-top: 1.2rem; }
  .field input[type="email"],
  .band--dark .field input[type="email"] { font-size: 16px; }  /* no zoom-on-focus */
}