/* ============================================================
   Family History Directory — Design Generation
   Motif: Editorial Magazine (heritage/archival voice)
   Palette: Warm Archival (parchment + dark ink + gold + terracotta)
   Typography: Cormorant Garamond (display) + Source Sans 3 (body)
   GRT: font=Cormorant Garamond, size=18, width=672
   ============================================================ */

/* ── 1. :root ─────────────────────────────────────────── */
:root {
  /* GRT scale — sourced from grtcalculator.com/api (rem, base 16px browser default) */
  --f1: 2.9375rem;  --g1: 1.489;
  --f2: 2.3125rem;  --g2: 1.514;
  --f3: 1.8125rem;  --g3: 1.552;
  --f4: 1.4375rem;  --g4: 1.565;
  --f5: 1.125rem;   --g5: 1.667;
  --f6: 0.875rem;   --g6: 1.714;
  --x1: 3.0625rem;  --x2: 1.875rem;  --x3: 1.1875rem;
  --x4: 0.75rem;    --x5: 0.4375rem; --x6: 0.25rem;

  /* Layout */
  --w-content: 672px;
  --w-total:  1200px;
  --gutter-full:   3rem;
  --gutter-mobile: 1.25rem;
  --phi: 1.61803398875;

  /* Breakpoints */
  --b1: 400px;
  --b2: 640px;
  --b3: 768px;
  --b4: 1024px;
  --b5: 1280px;

  /* Palette — Warm Archival */
  --bg1:           #EAE2D4;   /* warm parchment cream */
  --bg2:           #DDD5C3;   /* deeper cream for alternate sections */
  --hero-bg:       #1C1411;   /* dark warm near-black (hero & footer) — near-black floor: all channels ≥ 0x11 */
  --c1:            #1E1A13;   /* warm near-black ink */
  --c2:            #635C52;   /* muted warm gray — darkened for WCAG AA (5.3:1 on bg1) */
  --ca:            #9E3D25;   /* terracotta — links and CTAs */
  --gold:          #C9A44A;   /* gold italic display accent */
  --border1:       #CEC6B2;   /* hairline warm tint */
  --hero-text:     #EAE2D4;   /* primary text on hero/footer dark bg */
  --hero-subdued:  #A89E8E;   /* subdued text on dark bg */
  --hero-border:   #3A2E1E;   /* border hairline on dark bg */

  /* Callout complement variants (H+120°, H+180°, H+240° from $ca ~14°) */
  --callout-bg:          #E9F0E7;   /* sage green tint (134°) */
  --callout-text:        #2B4A2F;   /* dark sage */
  --callout-note-bg:     #E3ECEE;   /* muted teal tint (194°) */
  --callout-note-text:   #1B3A40;   /* dark teal */
  --callout-alert-bg:    #F0E5E2;   /* warm red tint */
  --callout-alert-text:  #6B1C12;   /* deep red-brown */

  /* Button variant backgrounds */
  --btn-save-bg:    #3A5C3A;   /* forest green */
  --btn-delete-bg:  #8B1C1C;   /* warning red */
  --btn-action-bg:  #8A6A1A;   /* amber */
  --btn-update-bg:  #1C4A5C;   /* slate teal */

  /* Fonts */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;

  /* Spacing tokens */
  --section-padding: var(--x1);
}


/* ── 2. Reset / base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

::selection {
  background: color-mix(in srgb, var(--ca) 20%, transparent);
  color: var(--c1);
}

:focus-visible {
  outline: 2px solid var(--ca);
  outline-offset: 3px;
}

img, svg, video { display: block; max-width: 100%; }


/* ── 3. Body / structural ─────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
  background-color: var(--bg1);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--gutter-mobile);
  top: var(--x4);
  background: var(--ca);
  color: var(--bg1);
  font-family: var(--font-body);
  font-size: var(--f6);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--x5) var(--x3);
  text-decoration: none;
  border: none;
  z-index: 1000;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Container */
.container {
  width: calc(100% - 2 * var(--gutter-mobile));
  max-width: var(--w-total);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .container {
    width: calc(100% - 2 * var(--gutter-full));
  }
}


/* ── 4. Typography base ───────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--c1);
}

h1 { font-size: var(--f2); line-height: var(--g2); }
h2 { font-size: var(--f3); line-height: var(--g3); }
h3 { font-size: var(--f4); line-height: var(--g4); }
h4 { font-size: var(--f5); line-height: var(--g5); font-weight: 600; }

p { margin-bottom: var(--x2); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

em { font-style: italic; }

/* Display italic accent (gold, used in hero/section two-tone headlines) */
.fhd-display-gold {
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
  display: block;
}


/* ── 5. Links ─────────────────────────────────────────── */
/* Base link style: classical-underline (Editorial Magazine default) */
a {
  color: var(--ca);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
a:hover {
  text-decoration: none;
  color: color-mix(in srgb, var(--ca) 75%, var(--c1));
}

/* Nav and footer links — simpler treatment */
.site-nav a,
.site-footer a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}
.site-nav a:hover  { color: var(--gold); }
.site-footer a:hover { color: var(--hero-text); }

/* Button elements reset link styling */
.fhd-button,
.fhd-button:hover {
  text-decoration: none;
  border-bottom: none;
  background-image: none;
}


/* ── 6. Buttons ───────────────────────────────────────── */
.fhd-button {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--f6);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg1);
  background-color: var(--ca);
  border: 1.5px solid var(--ca);
  padding: var(--x4) var(--x2);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.fhd-button:hover {
  background-color: color-mix(in srgb, var(--ca) 85%, var(--c1));
  border-color: color-mix(in srgb, var(--ca) 85%, var(--c1));
  color: var(--bg1);
}

/* Ghost/outline variant used on dark hero bg */
.fhd-button.outline {
  background-color: transparent;
  color: var(--hero-text);
  border-color: var(--hero-border);
}
.fhd-button.outline:hover {
  background-color: color-mix(in srgb, var(--hero-text) 18%, transparent);
  border: 1.5px solid var(--hero-text);
  color: var(--hero-text);
}

.fhd-button.save {
  background-color: var(--btn-save-bg);
  border-color: var(--btn-save-bg);
  color: #EAE2D4;
}
.fhd-button.save:hover {
  background-color: color-mix(in srgb, var(--btn-save-bg) 80%, #1E1A13);
  border-color: color-mix(in srgb, var(--btn-save-bg) 80%, #1E1A13);
}

.fhd-button.delete {
  background-color: var(--btn-delete-bg);
  border-color: var(--btn-delete-bg);
  color: #EAE2D4;
}
.fhd-button.delete:hover {
  background-color: color-mix(in srgb, var(--btn-delete-bg) 80%, #1E1A13);
  border-color: color-mix(in srgb, var(--btn-delete-bg) 80%, #1E1A13);
}

.fhd-button.action {
  background-color: var(--btn-action-bg);
  border-color: var(--btn-action-bg);
  color: #EAE2D4;
}
.fhd-button.action:hover {
  background-color: color-mix(in srgb, var(--btn-action-bg) 80%, #1E1A13);
  border-color: color-mix(in srgb, var(--btn-action-bg) 80%, #1E1A13);
}

.fhd-button.update {
  background-color: var(--btn-update-bg);
  border-color: var(--btn-update-bg);
  color: #EAE2D4;
}
.fhd-button.update:hover {
  background-color: color-mix(in srgb, var(--btn-update-bg) 80%, #1E1A13);
  border-color: color-mix(in srgb, var(--btn-update-bg) 80%, #1E1A13);
}


/* ── 7. Formatting primitives ─────────────────────────── */
/* .fhd-callout */
.fhd-callout {
  background: var(--callout-bg);
  color: var(--callout-text);
  border-left: 3px solid hsl(134, 35%, 45%);
  padding: var(--x3) var(--x2);
  margin-bottom: var(--x2);
  font-size: var(--f6);
  line-height: var(--g6);
}

.fhd-callout.alert {
  background: var(--callout-alert-bg);
  color: var(--callout-alert-text);
  border-left-color: var(--btn-delete-bg);
}

.fhd-callout.note {
  background: var(--callout-note-bg);
  color: var(--callout-note-text);
  border-left-color: hsl(194, 40%, 40%);
}

.fhd-callout ul,
.fhd-callout ol {
  margin-top: var(--x4);
  margin-bottom: 0;
  padding-left: var(--x2);
}

.fhd-callout p,
.page-content .fhd-callout p { margin-bottom: 0; }
.fhd-callout li { margin-bottom: 0; }
.fhd-callout li + li { margin-top: var(--x5); }

/* .fhd-caption */
.fhd-caption {
  font-family: var(--font-body);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
  margin-bottom: var(--x2);
}

/* .fhd-small */
.fhd-small {
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
}

/* .fhd-highlight */
.fhd-highlight {
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  padding: 0.1em 0.25em;
  border-radius: 1px;
}

/* .fhd-impact */
.fhd-impact {
  font-family: var(--font-display);
  font-size: var(--f1);
  line-height: var(--g1);
  font-weight: 700;
  color: var(--ca);
  display: block;
  margin-bottom: var(--x4);
}

/* .fhd-pop */
.fhd-pop {
  font-weight: 700;
  color: var(--c1);
  position: relative;
}

/* .fhd-drop-cap */
.fhd-drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: calc(var(--f3) * 1.5);
  font-weight: 700;
  color: var(--ca);
  float: left;
  line-height: 0.75;
  margin-right: var(--x5);
  margin-top: var(--x6);
}

/* blockquote */
blockquote {
  font-family: var(--font-display);
  font-style: normal;   /* reset — motif uses upright blockquotes */
  font-size: var(--f4);
  line-height: var(--g4);
  font-weight: 400;
  color: var(--c1);
  border-top: 1px solid var(--border1);
  border-bottom: 1px solid var(--border1);
  padding: var(--x3) 0;
  margin: var(--x2) 0;
}
blockquote > :last-child { margin-bottom: 0; }

/* pre */
pre {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--f6);
  line-height: var(--g6);
  background: var(--bg2);
  color: var(--c1);
  border: 1px solid var(--border1);
  padding: var(--x3);
  overflow-x: auto;
  margin-bottom: var(--x2);
}
pre > :last-child { margin-bottom: 0; }


/* ── 8. Kicker / eyebrow labels ───────────────────────── */
/* Style: classical small-caps */
.fhd-kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--f6);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ca);
  margin-bottom: var(--x4);
}

/* Kicker with flanking rules (used in hero) */
.fhd-kicker-rule {
  display: flex;
  align-items: center;
  gap: var(--x3);
  margin-bottom: var(--x3);
}
.fhd-kicker-rule::before,
.fhd-kicker-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.fhd-kicker-rule .fhd-kicker {
  color: var(--gold);
  margin-bottom: 0;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .fhd-kicker-rule { display: block; text-align: center; }
  .fhd-kicker-rule::before,
  .fhd-kicker-rule::after { display: none; }
  .fhd-kicker-rule .fhd-kicker { letter-spacing: 0.12em; }
}


/* ── 9. Section heading treatment ─────────────────────── */
/* Section intros: kicker + heading + intro paragraph centered */
.section .container > .fhd-kicker {
  display: block;
  text-align: center;
}

.section .container > h2 {
  text-align: center;
  margin-bottom: var(--x2);
}

.record-types-intro,
.featured-intro,
.browse-intro {
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--x2);
  text-align: center;
}


/* ── 10. Visual language marks ────────────────────────── */
/* Archive divider — shared SVG mark, gold color anchor */
.fhd-archive-divider {
  display: block;
  width: 160px;
  height: auto;
  color: var(--gold);
  margin: var(--x3) auto;
  opacity: 0.7;
}

/* Record category icons */
.record-icon {
  width: 40px;
  height: 40px;
  color: var(--gold);
  margin-bottom: var(--x4);
  stroke-linecap: round;
}


/* ── 11. Forms ────────────────────────────────────────── */
form input,
form textarea,
form select,
form fieldset {
  margin-bottom: var(--x2);
}

label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--f6);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c2);
  margin-bottom: var(--x5);
}

input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
  background: var(--bg1);
  border: 1px solid var(--border1);
  padding: var(--x4) var(--x3);
  appearance: none;
  transition: border-color 0.2s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--ca);
  outline-offset: 0;
  border-color: var(--ca);
}

fieldset {
  border: 1px solid var(--border1);
  padding: var(--x3);
}


/* ── 12. Header ───────────────────────────────────────── */
.site-header {
  background: var(--hero-bg);
  border-bottom: 1px solid var(--hero-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--x4);
  padding-bottom: var(--x4);
  gap: var(--x3);
}

.site-logo {
  display: flex;
  flex-direction: column;
  gap: var(--x6);
  text-decoration: none;
}
.site-logo .logo-name {
  font-family: var(--font-display);
  font-size: var(--f4);
  font-weight: 700;
  color: var(--hero-text);
  line-height: 1;
}

.site-nav {
  display: none;
}
.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--x2);
}
.site-nav a {
  font-family: var(--font-body);
  font-size: var(--f6);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-subdued);
}
.site-nav a:hover { color: var(--hero-text); }


.nav-toggle {
  background: none;
  border: none;
  color: var(--hero-text);
  cursor: pointer;
  padding: var(--x5);
  font-size: var(--f4);
  line-height: 1;
}

/* Mobile nav open */
.site-header.nav-open .site-nav {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--hero-bg);
  border-bottom: 1px solid var(--hero-border);
  padding: var(--x3) var(--gutter-mobile);
}
.site-header.nav-open .site-nav ul {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--x3);
}

@media (min-width: 960px) {
  .site-nav { display: flex; align-items: center; }
  .nav-toggle { display: none; }
  .site-header.nav-open .site-nav {
    display: flex;
    position: static;
    background: none;
    border: none;
    padding: 0;
  }
  .site-header.nav-open .site-nav ul {
    flex-direction: row;
    gap: var(--x2);
  }
}


/* ── 13. Footer ───────────────────────────────────────── */
.site-footer {
  background: var(--hero-bg);
  border-top: 1px solid var(--hero-border);
  padding-top: calc(var(--x1) * 1.2);
  padding-bottom: var(--x2);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x2);
  margin-bottom: var(--x2);
  padding-bottom: var(--x2);
  border-bottom: 1px solid var(--hero-border);
}

.footer-brand .logo-name {
  font-family: var(--font-display);
  font-size: var(--f3);
  font-weight: 700;
  color: var(--hero-text);
  margin-bottom: var(--x5);
}
.footer-brand p {
  font-size: var(--f6);
  color: var(--hero-subdued);
  max-width: 36ch;
}

.footer-col-heading {
  font-family: var(--font-body);
  font-size: var(--f6);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--x3);
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: var(--x5); }
.footer-col a {
  font-size: var(--f6);
  color: var(--hero-subdued);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--hero-text); }

.footer-base {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--x3);
  flex-wrap: wrap;
}
.footer-base p {
  font-size: var(--f6);
  color: var(--hero-subdued);
  margin-bottom: 0;
}
.footer-base a {
  font-size: var(--f6);
  color: var(--hero-subdued);
  text-decoration: none;
}
.footer-base a:hover { color: var(--gold); }

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}


/* ── 14. Bleed sections ───────────────────────────────── */
.bleed { width: 100%; }

.bleed.stone {
  background: hsl(38, 18%, 84%);
  color: hsl(38, 15%, 25%);
}
.bleed.stone .fhd-kicker { color: hsl(38, 18%, 38%); }
.bleed.stone h2 { color: hsl(38, 15%, 20%); }
.bleed.stone a { color: hsl(38, 18%, 32%); }
.bleed.stone a:hover { color: hsl(38, 18%, 22%); }
.bleed.stone .fhd-button {
  background: hsl(38, 15%, 30%);
  border-color: hsl(38, 15%, 30%);
  color: hsl(38, 12%, 92%);
}
.bleed.stone .fhd-button:hover {
  background: hsl(38, 15%, 22%);
  border-color: hsl(38, 15%, 22%);
}
/* Interior elements on bleed — transparent backgrounds */
.bleed.stone .fhd-callout {
  background: color-mix(in srgb, hsl(38, 15%, 25%) 8%, transparent);
  border-left-color: hsl(38, 15%, 40%);
  color: inherit;
}


/* ── 15. Section: Hero ────────────────────────────────── */
.hero {
  background-color: var(--hero-bg);
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--x1) * 1.8);
  padding-bottom: calc(var(--x1) * 1.8);
  display: flex;
  align-items: center;
}

/* Subtle grain overlay — archival sensory texture */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: var(--w-content);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--f2);
  line-height: 1.1;
  font-weight: 700;
  color: var(--hero-text);
  margin-bottom: var(--x3);
}

.hero .fhd-display-gold {
  font-size: calc(var(--f2) * 1.05);
  line-height: 1.05;
  margin-top: var(--x6);
}

.hero .hero-lead {
  font-family: var(--font-body);
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--hero-subdued);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--x2);
}


@media (min-width: 768px) {
  .hero h1 { font-size: var(--f1); line-height: var(--g1); }
  .hero .fhd-display-gold { font-size: calc(var(--f1) * 1.05); }
}

/* Hero reveal animation */
@media (prefers-reduced-motion: no-preference) {
  .hero-reveal {
    opacity: 0;
    transform: translateY(24px);
    animation: fadeUp 0.8s ease forwards;
  }
  .hero-reveal:nth-child(1) { animation-delay: 0.1s; }
  .hero-reveal:nth-child(2) { animation-delay: 0.25s; }
  .hero-reveal:nth-child(3) { animation-delay: 0.4s; }
  .hero-reveal:nth-child(4) { animation-delay: 0.55s; }
  .hero-reveal:nth-child(5) { animation-delay: 0.7s; }
}


/* ── 16. Section: Intro ───────────────────────────────── */
.intro {
  background: var(--bg1);
  padding-top: calc(var(--section-padding) * 1.4);
  padding-bottom: calc(var(--section-padding) * 1.4);
}

.intro .container {
  max-width: var(--w-content);
}


.intro-lead {
  font-size: var(--f4);
  line-height: var(--g4);
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--c1);
  text-align: center;
  margin-bottom: var(--x2);
}

.intro-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  border-top: 1px solid var(--border1);
  border-bottom: 1px solid var(--border1);
  margin: var(--x2) 0;
  flex-wrap: wrap;
}

.intro-stat {
  flex: 1;
  min-width: 120px;
  text-align: center;
  padding: var(--x3) var(--x2);
  border-right: 1px solid var(--border1);
}
.intro-stat:last-child { border-right: none; }

.intro-stat .fhd-impact {
  font-size: var(--f2);
  line-height: 1;
  color: var(--ca);
  margin-bottom: var(--x5);
}
.intro-stat .stat-label {
  font-size: var(--f6);
  color: var(--c2);
  text-align: center;
}


/* ── 17. Section: Record Types ────────────────────────── */
.record-types {
  background: var(--bg2);
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}


.record-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--x3);
  margin-top: var(--x3);
}

.record-card {
  background: var(--bg1);
  border: 1px solid var(--border1);
  padding: var(--x3) var(--x2);
  text-decoration: none;
  color: var(--c1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  display: block;
}
.record-card:hover {
  border-color: var(--ca);
  color: var(--c1);
  text-decoration: none;
}

.record-card h3 {
  margin-bottom: var(--x5);
  color: var(--c1);
}
.record-card p {
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
  margin-bottom: 0;
}
.record-card .card-link {
  display: inline-block;
  margin-top: var(--x4);
  font-size: var(--f6);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ca);
  text-decoration: none;
}
.record-card .card-link:hover { text-decoration: underline; }

@media (min-width: 640px) {
  .record-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .record-grid { grid-template-columns: repeat(5, 1fr); }
}


/* ── 18. Section: Featured Resources (bleed.yellow) ──── */
.featured {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}


.featured-list {
  list-style: none;
  display: grid;
  gap: var(--x3);
  margin-top: var(--x3);
}

.featured-item {
  display: flex;
  gap: var(--x3);
  align-items: flex-start;
  padding-bottom: var(--x3);
  border-bottom: 1px solid color-mix(in srgb, hsl(38, 15%, 25%) 20%, transparent);
}
.featured-item:last-child { border-bottom: none; }

.featured-item-num {
  font-family: var(--font-display);
  font-size: var(--f2);
  font-weight: 700;
  color: color-mix(in srgb, hsl(38, 15%, 25%) 25%, transparent);
  line-height: 1;
  min-width: 2ch;
  flex-shrink: 0;
}

.featured-item-body h3 {
  margin-bottom: var(--x5);
}
.featured-item-body h3 a {
  color: inherit;
  text-decoration: none;
}
.featured-item-body h3 a:hover { color: var(--ca); }

.featured-item-body p {
  font-size: var(--f6);
  line-height: var(--g6);
  color: inherit;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .featured-list { grid-template-columns: 1fr 1fr; }
}


/* ── 19. Section: Browse by Place ─────────────────────── */
.browse-place {
  background: var(--bg1);
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}


.place-nation {
  font-size: var(--f4);
  color: var(--c2);
  margin-top: var(--x2);
  margin-bottom: var(--x4);
  padding-bottom: var(--x5);
  border-bottom: 1px solid var(--border1);
}


/* ── 20. Section: Homepage nation cards ───────────────── */
.browse-nations {
  padding-top: var(--section-padding);
  padding-bottom: calc(var(--section-padding) * 1.5);
}

.fhd-nation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--x4);
  margin-top: var(--x2);
}

@media (max-width: 959px) {
  .fhd-nation-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .fhd-nation-grid { grid-template-columns: 1fr; }
}

.fhd-nation-card {
  background: var(--bg1);
  border: 1px solid var(--border1);
  border-radius: 2px;
  padding: var(--x4) var(--x3);
  display: flex;
  align-items: center;
  gap: var(--x3);
  text-decoration: none;
  color: var(--c1);
  font-family: var(--font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.fhd-nation-card:hover {
  border-color: var(--ca);
  box-shadow: 0 3px 12px rgba(30, 26, 19, 0.12);
  transform: translateY(-2px);
}

.nation-abbr {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--bg2);
  color: var(--ca);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.nation-name {
  font-size: var(--f5);
}

/* ── 21. Section: Homepage category cards ─────────────── */
.featured-categories {
  background: var(--bg2);
  padding-top: var(--section-padding);
  padding-bottom: calc(var(--section-padding) * 1.5);
}

.fhd-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--x4);
  margin-top: var(--x2);
}

@media (max-width: 959px) {
  .fhd-cat-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 440px) {
  .fhd-cat-grid { grid-template-columns: 1fr; }
}

.fhd-cat-card {
  background: var(--bg1);
  border: 1px solid var(--border1);
  border-radius: 2px;
  padding: var(--x3) var(--x2);
  display: flex;
  flex-direction: column;
  gap: var(--x5);
  text-decoration: none;
  color: var(--c1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.fhd-cat-card:hover {
  border-color: var(--ca);
  box-shadow: 0 3px 12px rgba(30, 26, 19, 0.12);
  transform: translateY(-2px);
}

.cat-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--f5);
  color: var(--c1);
}

.cat-desc {
  font-family: var(--font-body);
  font-size: var(--f6);
  color: var(--c1);
  line-height: 1.4;
}

/* ── 20. Section: Getting Started ─────────────────────── */
.getting-started {
  background: var(--bg2);
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.getting-started .container {
  max-width: var(--w-content);
}


.step-list {
  list-style: none;
  counter-reset: steps;
  margin-top: var(--x3);
}

.step-item {
  counter-increment: steps;
  display: flex;
  gap: var(--x3);
  margin-bottom: var(--x3);
  padding-bottom: var(--x3);
  border-bottom: 1px solid var(--border1);
}
.step-item:last-child { border-bottom: none; }

.step-num {
  font-family: var(--font-display);
  font-size: var(--f2);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  min-width: 1.5ch;
  flex-shrink: 0;
  opacity: 0.7;
}

.step-body h3 {
  margin-bottom: var(--x5);
}
.step-body p {
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c2);
  margin-bottom: 0;
}


/* ── 21. Section: Page hero (interior page) ───────────── */
.page-hero {
  background: var(--bg1);
  border-bottom: 1px solid var(--border1);
  padding-top: var(--x2);
  padding-bottom: var(--x2);
  text-align: center;
}

.breadcrumb {
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--x5);
  flex-wrap: wrap;
  margin-bottom: var(--x4);
}

.breadcrumb a {
  font-size: var(--f6);
  color: var(--c2);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--ca); text-decoration: underline; }
.breadcrumb .sep {
  font-size: var(--f6);
  color: var(--c2);
}
.breadcrumb .current {
  font-size: var(--f6);
  color: var(--c2);
}

.page-hero h1 {
  font-size: var(--f2);
  margin-bottom: var(--x5);
}
.page-hero .page-subtitle {
  font-family: var(--font-display);
  font-size: var(--f3);
  font-style: italic;
  font-weight: 300;
  color: #7C5C14;   /* dark amber — 4.9:1 on bg1, WCAG AA large text */
  line-height: var(--g3);
  margin-bottom: 0;
}


/* ── 21b. Section: Nation hub (England / Scotland / Wales / Ireland) ── */
.nation-hub {
  background: var(--bg1);
  padding-top: var(--x2);
  padding-bottom: calc(var(--x1) * 1.5);
}

.nation-inner .nation-intro {
  max-width: var(--w-content);
  margin-bottom: var(--x2);
}

/* h2 is a grandchild of .container here, so .section .container > h2 doesn't fire */
.nation-inner h2 {
  text-align: left;
  font-size: var(--f3);
  margin-top: var(--x2);
  margin-bottom: var(--x4);
  padding-top: var(--x2);
  border-top: 1px solid var(--border1);
}

.nation-inner h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.nation-inner .fhd-small {
  margin-bottom: var(--x3);
}


/* ── 22a. Utility: floated images in prose ────────────── */
.fhd-clearfix { overflow: hidden; }

.alignright {
  float: right;
  margin: 0 0 var(--x2) var(--x3);
  max-width: 50%;
}

@media (max-width: 540px) {
  .alignright { display: none; }
}

/* ── 22. Section: Page body (.page-content) ───────────── */
.page-body {
  background: var(--bg1);
  padding-top: var(--x2);
  padding-bottom: calc(var(--x1) * 1.5);
}

.page-body .container {
  max-width: var(--w-content);
}

.page-content h2 {
  margin-top: var(--x1);
  margin-bottom: var(--x3);
  padding-top: var(--x4);
  border-top: 1px solid var(--border1);
  scroll-margin-top: 4rem;
}
.page-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.page-content h3 {
  margin-top: var(--x2);
  margin-bottom: var(--x4);
}

/* Resource link list — the site's primary content pattern */
.page-content ul.fhd-list {
  list-style: none;
  margin-bottom: var(--x2);
}

.page-content .fhd-list li {
  padding: var(--x4) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x6);
}

.page-content .fhd-list .fhd-link {
  font-weight: 700;
  font-size: var(--f5);
}
.page-content .fhd-list .fhd-text {
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
  margin-bottom: 0;
}

/* Sub-list — grouped items under a parent fhd-list entry */
.page-content .fhd-list .fhd-sub-list {
  list-style: none;
  padding-left: var(--x3);
  margin-top: var(--x4);
  margin-bottom: 0;
  border-left: 2px solid var(--border1);
  display: flex;
  flex-direction: column;
  gap: var(--x5);
}

.page-content .fhd-list .fhd-sub-list li {
  padding: 0;
  display: block;
  margin-bottom: 0;
}

.page-content .fhd-list .fhd-sub-list .fhd-link {
  font-size: var(--f6);
  font-weight: 600;
}


/* Standard content flow margins */
.page-content p,
.page-content ul,
.page-content ol,
.page-content blockquote,
.page-content pre,
.page-content img,
.page-content figure,
.page-content .fhd-callout,
.page-content .fhd-caption {
  margin-bottom: var(--x2);
}

.page-content img + .fhd-caption {
  margin-top: calc(var(--x5) - var(--x2));
  margin-bottom: var(--x3);
}

.page-content ul:not(.fhd-list),
.page-content ol {
  padding-left: var(--x2);
}

.page-content li { margin-bottom: var(--x5); }


/* ── 23. Scroll reveal ────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: none;
  }
  .reveal-delay-1 { transition-delay: 0.08s; }
  .reveal-delay-2 { transition-delay: 0.16s; }
  .reveal-delay-3 { transition-delay: 0.24s; }
  .reveal-delay-4 { transition-delay: 0.32s; }
  .reveal-delay-5 { transition-delay: 0.40s; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}


/* ── 24. Utilities ────────────────────────────────────── */
.section-cta {
  text-align: center;
  margin-top: var(--x2);
}

.primitive-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x4);
  align-items: center;
  margin-bottom: var(--x2);
}

/* ── 25. Keyframes ────────────────────────────────────── */
@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}


/* ── 26. Section: Listing page ────────────────────────── */

/* Bleed.stone padding */
.bleed.stone {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

/* Category jump navigation */
.listing-toc {
  background: var(--bg2);
  border: 1px solid var(--border1);
  padding: var(--x3) var(--x2);
  margin-bottom: var(--x2);
}
.listing-toc-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--f6);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c2);
  margin-bottom: var(--x4);
}
.listing-toc ul,
.listing-toc .skip-links-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--x5) var(--x2);
  padding: 0;
  margin: 0;
}
.listing-toc li { margin: 0; }
.page-content .listing-toc ul,
.page-content .listing-toc .skip-links-list { padding-left: 0; }
.listing-toc a {
  font-family: var(--font-body);
  font-size: var(--f6);
  font-weight: 600;
  color: var(--ca);
  text-decoration: none;
  white-space: nowrap;
}
.listing-toc a:hover { text-decoration: underline; }

/* Inline status badges */
.my-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: calc(var(--f6) * 0.78);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1em 0.45em;
  border-radius: 2px;
  vertical-align: middle;
  line-height: 1.5;
  margin-left: var(--x5);
  text-decoration: none;
}
.my-tag.old { background: #F0E5D8; color: #7A4A20; }
.my-tag.docs      { background: var(--callout-note-bg); color: var(--callout-note-text); }

/* details / summary — expandable sub-lists */
.fhd-list details { margin-top: var(--x4); }

.fhd-list summary {
  display: inline-flex;
  align-items: center;
  gap: var(--x5);
  padding: var(--x6) var(--x4);
  border: 1px solid var(--border1);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--f6);
  font-weight: 600;
  color: var(--c2);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.fhd-list summary::-webkit-details-marker { display: none; }
.fhd-list summary:hover { border-color: var(--ca); color: var(--ca); }
.fhd-list summary::after { content: '▾'; font-size: 0.7em; }
.fhd-list details[open] summary::after { content: '▴'; }
.fhd-list details ul {
  list-style: none;
  margin-top: var(--x3);
  padding-left: var(--x3);
  border-left: 2px solid var(--border1);
  columns: 2;
  column-gap: var(--x2);
}
@media (max-width: 480px) {
  .fhd-list details ul { columns: 1; }
}
.fhd-list details li {
  font-size: var(--f6);
  color: var(--c2);
  padding: var(--x6) 0;
  border-bottom: 1px dotted var(--border1);
  break-inside: avoid;
  margin: 0;
}
.fhd-list details li:last-child { border-bottom: none; }

/* County context panel — constrain to reading width */
.county-context .container {
  max-width: var(--w-content);
}

/* About county — two-column grid */
.cs-flex-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--x2);
  margin-top: var(--x2);
}
@media (min-width: 640px) {
  .cs-flex-grid { grid-template-columns: 1fr 1fr; }
}
.cs-col h3 {
  font-size: var(--f5);
  margin-top: var(--x2);
  margin-bottom: var(--x4);
  padding-top: var(--x3);
  border-top: 1px solid color-mix(in srgb, hsl(38, 15%, 25%) 20%, transparent);
  color: hsl(38, 15%, 20%);
}
.cs-col h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.cs-col ul,
.cs-col ol {
  font-size: var(--f6);
  line-height: var(--g6);
  padding-left: var(--x2);
  margin-bottom: 0;
}
.cs-col li {
  margin-bottom: var(--x5);
  color: hsl(38, 15%, 28%);
}


/* ── 27. Component: County / location cards ──────────── */
.fhd-display-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--x4);
  margin-top: var(--x2);
}

.fhd-county-card {
  background: var(--bg1);
  border: 1px solid var(--border1);
  padding: var(--x3);
  color: var(--c1);
  font-family: var(--font-body);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--x4);
  border-radius: 2px;
  white-space: nowrap;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.fhd-county-card:hover {
  border-color: var(--ca);
  box-shadow: 0 3px 12px rgba(30, 26, 19, 0.12);
  transform: translateY(-2px);
}

.fhd-county-card.fhd-cat-card {
  justify-content: center;
  text-align: center;
  white-space: normal;
}

.fhd-county-icon {
  width: 2rem;
  height: 2rem;
  background: var(--bg2);
  color: var(--ca);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}


/* ── 28. Component: District / sub-list badges ────────── */
.fhd-district-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x5);
  margin-top: var(--x5);
}

.fhd-district {
  display: inline-block;
  padding: var(--x6) var(--x4);
  background: var(--bg2);
  border: 1px solid var(--border1);
  border-radius: 4px;
  font-size: var(--f6);
  color: var(--c1);
}


/* ── 29. Blog listing ─────────────────────────────────── */

.blog-featured {
  max-width: var(--w-content);
  margin-inline: auto;
}

.blog-featured-title {
  font-family: var(--font-display);
  font-size: var(--f2);
  font-weight: 600;
  line-height: 1.15;
  color: var(--c1);
  max-width: var(--w-content);
  margin-bottom: var(--x3);
}

.blog-post-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--w-content);
}

.blog-post-item {
  padding: var(--x2) 0;
  border-bottom: 1px solid var(--border1);
}

.blog-post-item:first-child {
  border-top: 1px solid var(--border1);
}

.post-meta {
  font-family: var(--font-body);
  font-size: var(--f6);
  color: var(--c2);
  margin-bottom: var(--x5);
  display: block;
}

.blog-post-item h2 {
  font-family: var(--font-display);
  font-size: var(--f3);
  font-weight: 600;
  line-height: var(--g3);
  margin-bottom: var(--x4);
}

.blog-post-item h2 a {
  color: var(--c1);
  text-decoration: none;
}

.blog-post-item h2 a:hover {
  color: var(--ca);
}

.blog-post-item p {
  color: var(--c2);
  margin-bottom: var(--x4);
}


/* ── 30. Style guide ──────────────────────────────────── */
.sg-label {
  font-family: 'Courier New', Courier, monospace;
  font-size: calc(var(--f6) * 0.85);
  color: var(--c2);
  letter-spacing: 0.04em;
  margin-bottom: var(--x4);
  display: block;
  opacity: 0.75;
}
.sg-swatch {
  background: var(--hero-bg);
  padding: var(--x3) var(--x2);
  display: inline-flex;
  align-items: center;
  gap: var(--x3);
  margin-bottom: var(--x4);
}
.sg-rule {
  border: none;
  border-top: 1px dashed var(--border1);
  margin: var(--x2) 0;
  opacity: 0.5;
}

/* Normal Table */
.table {
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.table th,
.table td {
  border: 1px solid black;
  padding: 0.375rem 0.625rem;
}

.table td:last-child,
.table th:last-child {
  white-space: nowrap;
}

.table tr:nth-child(even) {
  background-color: #f3f3f3;
}