/* ============================================================
   HOME PAGE — direction A, "The Score". Added 30 Sep 2026.
   Used by index.html only. The other pages still use styles.css
   until the second pass carries this look across the site.
   ============================================================ */
:root {
  --paper:    #F4EFE4;
  --paper-2:  #FBF8F1;
  --ink:      #1E1B16;
  --ink-2:    #3A342B;
  --ink-3:    #5A5144;
  --rule:     #D9CFBC;
  --oxblood:  #7A2E22;
  --oxblood-dark: #4E1C14;
  --gold:     #C9A77A;
  --night-rule: #4A4336;
  --night-text: #CFC6B5;
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: 'Source Serif 4', Georgia, serif;
  --pad: clamp(20px, 6vw, 80px);
  /* 2 Oct 2026: reading width for the centred sections */
  --measure: 1120px;
  --pad-wide: max(var(--pad), calc((100% - var(--measure)) / 2));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--oxblood); text-decoration: none; }
a:hover { color: var(--oxblood-dark); }
img { max-width: 100%; display: block; }

/* ---------- header ---------- */
.h-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--pad-wide);
  border-bottom: 1px solid var(--rule);
}
.h-brand { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.h-brand img { width: 40px; height: auto; }
.h-brand span { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: 0.02em; }
.h-nav { display: flex; flex-wrap: wrap; gap: 8px 30px; font-size: 15px; letter-spacing: 0.04em; }
.h-nav a { padding: 6px 0; }

/* ---------- hero ---------- */
.h-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: 72px var(--pad-wide) 24px;
}
.h-hero-text { display: flex; flex-direction: column; gap: 26px; }
.h-kicker { margin: 0; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oxblood); }
.h-title { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(56px, 7.5vw, 96px); line-height: 0.98; }
.h-tagline { margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.25; color: var(--ink-2); }
.h-rule { width: 64px; height: 1px; background: var(--oxblood); }
.h-question { margin: 0; font-size: 22px; line-height: 1.55; }
.h-lead { margin: 0; font-size: 19px; line-height: 1.65; color: var(--ink-2); }
.h-hero-img img { width: 100%; height: auto; border: 1px solid #CDBFA4; }
.h-hero-img--cover { display: flex; justify-content: center; }
.h-hero-img--cover img { max-width: 400px; }

/* ---------- the curve ---------- */
.h-curve { display: block; width: 100%; height: clamp(64px, 9vw, 140px); }

/* ---------- reading sections ---------- */
.h-section {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 48px;
  padding: 88px var(--pad-wide);
}
.h-section--tint { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.h-section-head { display: flex; flex-direction: column; gap: 12px; }
.h-numeral { margin: 0; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oxblood); }
.h-h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 48px; line-height: 1.05; }
.h-prose { max-width: 700px; font-size: 21px; line-height: 1.65; }
.h-prose p { margin: 0 0 28px; }
.h-prose p:last-child { margin-bottom: 0; }

.h-close { padding: 8px var(--pad) 96px; text-align: center; }
.h-close::before { content: ""; display: block; width: 64px; height: 1px; margin: 0 auto 40px; background: var(--oxblood); }
.h-close p {
  margin: 0 auto;
  max-width: 900px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.35;
  color: var(--ink-2);
}

/* ---------- the book ---------- */
.h-book { padding: 96px var(--pad-wide); background: var(--ink); color: var(--paper); }
.h-book-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 48px; }
.h-book-head .h-h2 { font-size: 56px; }
.h-book-head p { margin: 0; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.h-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 36px; }
.h-online { margin-top: 64px; }
/* 2 Oct 2026: short notes inside The Book (status, publisher contact, Substack) */
.h-book-note { margin: -24px 0 40px; font-size: 16px; line-height: 1.55; color: var(--night-text); }
.h-parts + .h-book-note { margin: 40px 0 0; }
.h-extras + .h-book-note { margin: 24px 0 0; }
.h-book-note a { color: var(--gold); }
.h-book-note a:hover { color: #FFFFFF; }
.h-online-head { margin: 0 0 20px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.h-online-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 36px; }
.h-online .h-part { border-top-style: dashed; }
.h-part, .h-extra {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--paper);
}
.h-part { padding-top: 20px; border-top: 1px solid var(--night-rule); }
.h-part:hover, .h-extra:hover { color: #FFFFFF; }
.h-part:hover .h-part-title, .h-extra:hover .h-part-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.h-part-label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.h-part-title { font-family: var(--display); font-size: 30px; line-height: 1.1; }
.h-part-sub { font-size: 16px; line-height: 1.55; color: var(--night-text); }
.h-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; margin-top: 64px; }
.h-extra { padding: 28px; border: 1px solid var(--night-rule); }

/* ---------- companion ---------- */
.h-companion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
  padding: 96px var(--pad-wide);
  background: var(--oxblood);
  color: var(--paper-2);
}
.h-companion .h-kicker { color: #F0D9C4; }
.h-companion .h-h2 { font-size: clamp(38px, 4.4vw, 54px); margin-top: 18px; }
.h-companion-text p.h-body { margin: 22px 0 0; font-size: 20px; line-height: 1.6; color: #F6E8DC; }
.h-asks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.h-asks li { font-family: var(--display); font-style: italic; font-size: 24px; line-height: 1.3; padding-left: 20px; border-left: 1px solid #C98C7E; }
.h-cta {
  display: inline-block;
  margin-top: 30px;
  padding: 16px 28px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 17px;
  letter-spacing: 0.04em;
}
.h-cta:hover { background: #FFFFFF; color: var(--ink); }

/* ---------- evidence ---------- */
.h-evidence { padding: 88px var(--pad-wide); }
.h-evidence-head { margin-bottom: 40px; }
.h-evidence-head p { margin: 10px 0 0; font-size: 18px; color: var(--ink-3); }
.h-evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.h-ev { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 2px solid var(--ink); color: var(--ink); }
.h-ev-title { font-family: var(--display); font-size: 32px; }
.h-ev-sub { font-size: 16px; line-height: 1.55; color: var(--ink-3); }
.h-ev:hover .h-ev-title { color: var(--oxblood); }

/* ---------- footer ---------- */
.h-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 36px var(--pad-wide);
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-3);
}
.h-footer nav { display: flex; gap: 24px; }

/* ---------- narrower screens ---------- */
@media (max-width: 1200px) {
  .h-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .h-hero, .h-companion { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .h-hero { padding-top: 56px; }
  .h-section { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 72px var(--pad); }
  .h-parts, .h-online-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-evidence-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
  .h-header { flex-direction: column; align-items: flex-start; }
  .h-nav { gap: 4px 20px; }
  .h-prose { font-size: 19px; }
  .h-parts, .h-extras, .h-online-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .h-book-head .h-h2, .h-h2 { font-size: 40px; }
  .h-companion { padding: 72px var(--pad); }
}