/* ==========================================================================
   House of Rhodri: base styles
   1. Fonts  2. Design tokens  3. Base  4. Layout  5. Components
   ========================================================================== */

/* 1. Fonts (self-hosted, SIL OFL 1.1; licences alongside in /assets/fonts) */

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Design tokens */

:root {
  color-scheme: light;

  /* Brand palette */
  --slate: #2f3640;
  --welsh-red: #9b1c1f;
  --parchment: #f6f0e1;
  --gold: #b08d3c;       /* decorative only: too light for text on parchment */
  --dark-green: #2e4a3a;

  /* Semantic colours (light) */
  --color-bg: var(--parchment);
  --color-surface: #fbf8f0;
  --color-text: var(--slate);
  --color-text-muted: #545c66;
  --color-heading: #1f252c;
  --color-link: var(--welsh-red);
  --color-link-hover: #6f1416;
  --color-accent: var(--gold);
  --color-rule: #d9ccaa;
  --color-focus: var(--dark-green);
  --color-header-bg: var(--color-footer-bg);   /* header matches the footer (dark green) */
  --color-header-text: #f6f0e1;
  --color-header-link: #f0e2bd;
  --color-footer-bg: var(--dark-green);
  --color-footer-text: #eef0e8;
  --color-hero-bg: #38414c;
  --hero-wash: 56 65 76;        /* --color-hero-bg as RGB, for the image wash */
  --color-hero-text: #f6f0e1;
  --color-hero-eyebrow: #e6d3a3;
  --color-button-bg: var(--welsh-red);
  --color-button-hover: #7d1518;
  --color-button-text: #fbf8f0;
  --color-tag-documented: #2e5a40;
  --color-tag-genealogies: #2f4d6b;
  --color-tag-tradition: #7a4a10;
  --color-tag-inferred: #545c66;
  --color-verify-bg: #fde68a;
  --color-verify-text: #3b2a00;

  /* Type */
  --font-heading: "EB Garamond", Garamond, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
  --step-0:  clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.55rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --step-4:  clamp(2.5rem, 1.8rem + 3.5vw, 4.25rem);

  /* Space */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1.25rem;
  --space-l: 2rem;
  --space-xl: 3.25rem;
  --space-2xl: 5rem;

  /* Layout */
  --measure: 68ch;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-bg: #1b1f24;
    --color-surface: #23282e;
    --color-text: #e6dfcf;
    --color-text-muted: #b5ae9f;
    --color-heading: #f6f0e1;
    --color-link: #ef9a9a;
    --color-link-hover: #f8c4c4;
    --color-accent: #c9a75a;
    --color-rule: #3c434b;
    --color-focus: #9fd3b4;
    --color-header-bg: var(--color-footer-bg);
    --color-header-text: #f6f0e1;
    --color-header-link: #e6d3a3;
    --color-footer-bg: #18261e;
    --color-footer-text: #dfe3d8;
    --color-hero-bg: #23282e;
    --hero-wash: 35 40 46;
    --color-hero-text: #f6f0e1;
    --color-hero-eyebrow: #e6d3a3;
    --color-button-bg: #a8282b;
    --color-button-hover: #8c1f22;
    --color-button-text: #fbf8f0;
    --color-tag-documented: #9fd3b4;
    --color-tag-genealogies: #a9c6e8;
    --color-tag-tradition: #e6b877;
    --color-tag-inferred: #b5ae9f;
    --color-verify-bg: #5c4800;
    --color-verify-text: #fff0b3;
  }
}

/* 3. Base */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-heading);
  margin: var(--space-l) 0 var(--space-s);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); margin-top: 0; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, ul, ol { margin: 0 0 var(--space-m); }

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius);
}
main:focus { outline: none; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 4. Layout */

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

main {
  flex: 1;
  padding-block: var(--space-xl) var(--space-2xl);
}

.prose { max-width: var(--measure); }

/* 5. Components */

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100px;
  z-index: 100;
  padding: var(--space-xs) var(--space-m);
  background: var(--color-surface);
  color: var(--color-link);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-s); }

/* Header */
.site-header {
  background: var(--color-header-bg);
  color: var(--color-header-text);
  border-bottom: 3px solid var(--color-accent);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-l);
  padding-block: var(--space-m);
}
.wordmark {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-header-text);
  text-decoration: none;
}
.wordmark:hover { color: var(--color-header-text); }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
}
.site-nav a {
  display: inline-block;
  padding-block: var(--space-2xs); /* comfortable touch target */
  color: var(--color-header-link);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-nav a:hover,
.site-nav a[aria-current] {
  color: var(--color-header-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.site-header :focus-visible { outline-color: var(--color-header-link); }

/* Footer */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding-block: var(--space-xl);
  font-size: var(--step--1);
  border-top: 3px solid var(--color-accent);
}
.site-footer a { color: var(--color-footer-text); }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: var(--color-footer-text); }
.site-footer__name {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  margin-bottom: var(--space-xs);
}
.site-footer__small { opacity: 0.85; margin: 0; }

/* Small label above a heading */
.eyebrow {
  margin: 0 0 var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Section divider: gold rule with a central diamond. A knotwork motif can replace it later. */
.divider,
.page-body > hr,
.story__body > hr {
  border: 0;
  height: 1px;
  margin: var(--space-xl) auto;
  max-width: 12rem;
  background: var(--color-accent);
  overflow: visible;
  position: relative;
}
.divider::after,
.page-body > hr::after,
.story__body > hr::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Utilities */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Text awaiting real content from David */
.placeholder {
  padding: var(--space-s) var(--space-m);
  border: 1px dashed var(--color-text-muted);
  border-radius: var(--radius);
  background: var(--color-surface);
}

main.main--flush { padding-top: 0; }
.section { padding-block: var(--space-xl) 0; }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem; /* 44px touch target */
  padding: var(--space-xs) var(--space-l);
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--color-button-bg);
  color: var(--color-button-text);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.button:hover {
  background: var(--color-button-hover);
  color: var(--color-button-text);
  text-decoration: none;
}
.button--light {
  background: var(--color-bg);
  color: var(--color-link);
  border-color: var(--color-link);
}
.button--light:hover {
  background: var(--color-link);
  color: var(--color-bg);
}

/* Home: hero band */
.hero {
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.12), transparent 40%),
    var(--color-hero-bg);
  color: var(--color-hero-text);
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--color-accent);
}
.hero__eyebrow { color: var(--color-hero-eyebrow); }
.hero__title {
  color: var(--color-hero-text);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-m);
}
.hero__lead {
  max-width: 40ch;
  font-size: var(--step-1);
  line-height: 1.5;
  margin-bottom: var(--space-l);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m) var(--space-l);
}
.hero__secondary { color: var(--color-hero-eyebrow); }
.hero__secondary:hover { color: var(--color-hero-text); }
.hero :focus-visible { outline-color: var(--color-hero-eyebrow); }

/* Home: section cards */
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-m);
}
.card {
  position: relative;
  padding: var(--space-m) var(--space-m) var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
}
.card__title { margin: 0 0 var(--space-xs); font-size: var(--step-1); }
.card__title a { color: var(--color-heading); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.card:hover { border-color: var(--color-link); border-top-color: var(--color-link); }
.card:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.card__title a:focus-visible { outline: none; }

/* Home: members' archive panel */
.archive-panel { padding-block: var(--space-xl) 0; }
.archive-panel__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m) var(--space-l);
  padding: var(--space-l) var(--gutter);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-left: 5px solid var(--color-link);
  border-radius: var(--radius);
}
.archive-panel__inner p:last-child { margin-bottom: 0; }
.archive-panel__title { margin: 0 0 var(--space-xs); font-size: var(--step-2); }
.archive-panel__eyebrow { margin-bottom: var(--space-2xs); }

/* Content pages */
.page-header { margin-bottom: var(--space-l); }
.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--color-text);
}
.prose section { margin-top: var(--space-l); }
.prose li { margin-bottom: var(--space-xs); }

/* Evidence tags: how we know a statement */
.tag {
  display: inline-block;
  padding: 0 0.45em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.6;
  vertical-align: 0.12em;
  white-space: nowrap;
}
.tag--documented  { color: var(--color-tag-documented); }
.tag--genealogies { color: var(--color-tag-genealogies); }
.tag--tradition   { color: var(--color-tag-tradition); }
.tag--inferred    { color: var(--color-tag-inferred); border-style: dashed; }

/* Unverified claim marker (remove once David has checked) */
.verify {
  padding: 0 0.3em;
  border-radius: var(--radius);
  background: var(--color-verify-bg);
  color: var(--color-verify-text);
  font-size: 0.85em;
  font-weight: 600;
}

/* At-a-glance facts panel */
.facts {
  margin-block: var(--space-l);
  padding: var(--space-m) var(--space-m) var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
}
.facts__title {
  margin: 0 0 var(--space-s);
  font-size: var(--step-1);
}
.facts dl { margin: 0; }
.facts dl > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-m);
  padding-block: var(--space-xs);
  border-top: 1px solid var(--color-rule);
}
@media (min-width: 30rem) {
  .facts dl > div { grid-template-columns: 6rem 1fr; }
}
.facts dt {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 0.15em;
}
.facts dd { margin: 0; }

/* Simple vertical timeline */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-m);
  border-left: 2px solid var(--color-accent);
}
.timeline li {
  position: relative;
  padding-left: var(--space-s);
  margin-bottom: var(--space-s);
}
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-m) - 6px);
  top: 0.55em;
  width: 10px;
  height: 10px;
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
  transform: rotate(45deg);
}
.timeline__year {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.2;
}

/* Key explaining the tags */
.tag-key { margin: 0; }
.tag-key > div { margin-bottom: var(--space-s); }
.tag-key dt { margin-bottom: var(--space-2xs); }
.tag-key dd { margin: 0; }

/* ==========================================================================
   Lineage descent chart (nested lists from src/lineage.php)
   Mobile: left-aligned, branches hang off a vertical spine.
   Wide screens: branches side by side as columns under the root.
   ========================================================================== */

.lineage { margin-block: var(--space-xl); }
.lineage__chart { margin-top: var(--space-m); }

.tree,
.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tree li { margin: 0; }

/* Person card */
.person {
  display: block;
  max-width: 22rem;
  padding: var(--space-s) var(--space-m);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  line-height: 1.35;
}
.person__welsh,
.person__meta,
.person__evidence { display: block; }
.person__name {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--color-heading);
}
.person__epithet { display: block; font-family: var(--font-heading); font-size: var(--step-0); font-style: italic; color: var(--color-heading); }
.person__welsh { font-style: italic; color: var(--color-text-muted); font-size: var(--step--1); }
.person__meta { font-size: var(--step--1); margin-top: var(--space-2xs); }
.person__evidence { margin-top: var(--space-xs); font-size: var(--step--1); }
.person .verify { display: inline; font-size: 0.8rem; }

.tree__node--root > .person {
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 1px 0 var(--color-rule);
}
.tree__node--root > .person .person__name { font-size: var(--step-2); }

/* Connectors */
:root { --tree-line: 2px solid var(--color-accent); --tree-gap: 2px dashed var(--color-accent); }

/* Branches off the root: vertical spine with a tick to each son */
.tree__branches {
  margin-left: var(--space-m) !important;
  padding-left: var(--space-m) !important;
  border-left: var(--tree-line);
}
.tree__branches > li {
  position: relative;
  padding-top: var(--space-l);
}
.tree__branches > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-m));
  top: calc(var(--space-l) + 1.1rem);
  width: var(--space-m);
  border-top: var(--tree-line);
}
/* Stop the spine at the last son's tick */
.tree__branches > li:last-child::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-m) - 2px);
  top: calc(var(--space-l) + 1.1rem + 2px);
  bottom: 0;
  width: 2px;
  background: var(--color-bg);
}

/* Father to son within a line */
.tree__line > li {
  position: relative;
  padding-top: var(--space-l);
}
.tree__line > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-l);
  height: var(--space-l);
  border-left: var(--tree-line);
}
.tree__line > li.tree__node--gap { padding-top: calc(var(--space-l) * 1.8); }
.tree__line > li.tree__node--gap::before {
  height: calc(var(--space-l) * 1.8);
  border-left: var(--tree-gap);
}
.tree__gap {
  position: absolute;
  top: calc(var(--space-l) * 0.55);
  left: calc(var(--space-l) + var(--space-s));
  font-size: var(--step--1);
  font-style: italic;
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (min-width: 60rem) {
  .person { text-align: center; margin-inline: auto; }

  .tree__branches {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    margin: var(--space-l) 0 0 !important;
    padding: 0 !important;
    border-left: 0;
  }
  /* Root down to the crossbar */
  .tree__branches::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--space-l));
    left: 50%;
    height: var(--space-l);
    border-left: var(--tree-line);
  }
  .tree__branches > li { padding-inline: var(--space-xs); }
  /* Crossbar and drop to each son */
  .tree__branches > li::before {
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    border-top: var(--tree-line);
  }
  .tree__branches > li:first-child::before { left: 50%; }
  .tree__branches > li:last-child::before { right: 50%; }
  .tree__branches > li::after,
  .tree__branches > li:last-child::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    bottom: auto;
    width: 0;
    height: var(--space-l);
    background: none;
    border-left: var(--tree-line);
    transform: translateX(-1px);
  }

  .tree__line > li::before { left: 50%; transform: translateX(-1px); }
  .tree__gap { left: calc(50% + var(--space-s)); }
}

/* Stories */
.story-list {
  margin-top: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); /* room for the thumbnail */
}
/* Card with a square thumbnail on the left: 5rem on phones, 8rem from 40rem up */
.card--thumb {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--space-s);
  align-items: start;
  padding-bottom: var(--space-m);
}
.card--thumb .thumb { display: block; }
.card--thumb .thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}
.card__body > :last-child { margin-bottom: 0; }
@media (min-width: 40rem) {
  .card--thumb { grid-template-columns: 8rem 1fr; gap: var(--space-m); }
}
.card__eyebrow {
  margin: 0 0 var(--space-2xs);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.card__flags { margin: 0 0 var(--space-xs); }
.flag {
  display: inline-block;
  padding: 0 0.5em;
  border-radius: var(--radius);
  background: var(--color-verify-bg);
  color: var(--color-verify-text);
  font-size: var(--step--1);
  font-weight: 600;
}
.flag--draft { background: var(--color-text-muted); color: var(--color-bg); }

.back-link { font-size: var(--step--1); font-weight: 600; margin-bottom: var(--space-l); }
.story .page-header + .notice,
.notice {
  padding: var(--space-s) var(--space-m);
  border-left: 4px solid var(--color-verify-bg);
  background: var(--color-surface);
  font-size: var(--step--1);
}
.story__byline { color: var(--color-text-muted); font-size: var(--step--1); }

/* Long-form text elements */
blockquote {
  margin: var(--space-l) 0;
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-m);
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--color-heading);
}
blockquote p:last-child { margin-bottom: 0; }
code {
  padding: 0.05em 0.3em;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  font-size: 0.88em;
}

/* About: contact panel */
.contact__panel {
  padding: var(--space-m) var(--space-l);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-left: 5px solid var(--color-link);
  border-radius: var(--radius);
}
.contact__panel p:last-child { margin-bottom: 0; }
.contact__label {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.contact__address {
  margin: 0 0 var(--space-s);
  font-family: var(--font-heading);
  font-size: var(--step-2);
  overflow-wrap: anywhere;
}

/* Footer links */
.site-footer__links {
  list-style: none;
  margin: 0 0 var(--space-m);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-l);
}

/* Images in stories (see src/media.php) */
.media { margin: var(--space-l) 0; }
.media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--color-surface);
}
.media figcaption {
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.media__caption { color: var(--color-text); }
.media__credit a { color: inherit; }

/* Editable content pages (pages/_content-page.php) */
.page-body--wide > :not(.lineage__chart):not(.facts) { max-width: var(--measure); }
.page-body .lineage__chart { margin-block: var(--space-m) var(--space-xl); }
.page-body .contact__panel { max-width: var(--measure); }

/* Evidence tags on the dark hero band: use the hero's light text colours */
.hero .tag { color: var(--color-hero-eyebrow); }
.hero .verify { background: var(--color-verify-bg); color: var(--color-verify-text); }

/* Click-to-play videos (src/video.php, assets/js/video.js) */
.video { margin: var(--space-l) 0; }
.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgb(255 255 255 / 0.06), transparent 60%),
    var(--color-hero-bg);
}
.video__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  color: var(--color-hero-text);
  text-decoration: none;
}
.video__icon { width: 4.25rem; height: 3rem; }
.video__icon rect { fill: var(--welsh-red); stroke: var(--color-hero-text); stroke-width: 2; transition: fill 0.15s; } /* light outline: the red alone is too close to the dark box */
.video__icon path { fill: #fff; }
.video__play:hover .video__icon rect, .video__play:focus-visible .video__icon rect { fill: #c4262a; }
.video__play:hover { color: var(--color-hero-text); }
.video__label { font-weight: 600; letter-spacing: 0.04em; }
.video__play:focus-visible { outline-offset: -6px; outline-color: var(--color-hero-eyebrow); }
.video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { margin-top: var(--space-xs); font-size: var(--step--1); color: var(--color-text-muted); }
.video__notice a { color: inherit; }
.video .media__caption { display: block; margin-bottom: var(--space-2xs); }
/* Video thumbnail (served from our own server) under the play button */
.video__thumb, .video__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; }
.video__thumb img { object-fit: cover; }
.video__thumb + .video__play {
  /* darken the picture so the button and label stay readable on any thumbnail */
  background: radial-gradient(ellipse at center, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.25) 55%, rgb(0 0 0 / 0.1) 100%);
}
.video__thumb + .video__play .video__label { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 0.8); }
.video__thumb + .video__play:hover { background: radial-gradient(ellipse at center, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0.15) 60%, transparent 100%); }

/* Home hero image (Admin → Pages → Home): behind the text, or beside it */
.hero { position: relative; overflow: hidden; }
.hero__inner { position: relative; z-index: 1; }

.hero__credit { margin: var(--space-xs) 0 0; font-size: 0.75rem; color: var(--color-hero-text); }
.hero__credit a { color: inherit; }

/* "Behind the text", phones and upright tablets: the whole picture above the text, uncropped,
   on the plain hero band (a wide picture can't fill a tall, narrow screen without losing most of it). */
.hero--background { padding-top: 0; }
.hero__bg { display: block; margin: 0 0 var(--space-l); }
.hero__bg img { display: block; width: 100%; height: auto; }
.hero__credit--bg {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-xs);
  z-index: 1;
  margin: 0;
  padding: 0.1em 0.5em;
  border-radius: var(--radius);
  background: rgb(var(--hero-wash) / 0.88);
}

/* "Behind the text", wide screens (landscape tablets and up): the picture fills a taller hero.
   The darkening sits behind the words on the left and fades out to the right, so most of the
   picture keeps its colour. Below 60rem (phones, upright tablets) the picture sits above the text. */
@media (min-width: 60rem) {
  .hero--background {
    --wash-a: 0.75;  /* behind the words */
    --wash-b: 0.15;  /* far right */
    display: flex;
    align-items: center;
    min-height: min(75vh, 46rem);
    padding-block: var(--space-2xl) calc(var(--space-2xl) + var(--space-m));
  }
  .hero--wash-light  { --wash-a: 0.6;  --wash-b: 0.05; }
  .hero--wash-strong { --wash-a: 0.88; --wash-b: 0.45; }
  .hero--background .hero__inner { width: 100%; }
  .hero__bg { position: absolute; inset: 0; margin: 0; }
  .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
  .hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      rgb(var(--hero-wash) / var(--wash-a)) 0%,
      rgb(var(--hero-wash) / var(--wash-a)) 45%,
      rgb(var(--hero-wash) / var(--wash-b)) 85%);
  }
  /* A soft shadow keeps the words crisp when the darkening is light */
  .hero--wash-light .hero__text,
  .hero--wash-medium .hero__text { text-shadow: 0 1px 3px rgb(0 0 0 / 0.65), 0 0 14px rgb(0 0 0 / 0.4); }
  .hero--background .button { text-shadow: none; }

  .hero--focus-center .hero__bg img { object-position: 50% 50%; }
  .hero--focus-top    .hero__bg img { object-position: 50% 12%; }
  .hero--focus-bottom .hero__bg img { object-position: 50% 88%; }
  .hero--focus-left   .hero__bg img { object-position: 15% 50%; }
  .hero--focus-right  .hero__bg img { object-position: 85% 50%; }
}

/* "Beside the text" */
@media (min-width: 60rem) {
  .hero--beside .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xl);
  }
}
.hero__figure { margin: var(--space-l) 0 0; }
@media (min-width: 60rem) { .hero__figure { margin: 0; } }
.hero__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid rgb(255 255 255 / 0.15);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.25);
}
.hero__caption { font-style: italic; }
@media (max-width: 59.99rem) { .hero__credit--bg { max-width: calc(100% - 2 * var(--gutter)); } }

/* Text links to other websites open in a new tab (bootstrap.php external_links()): a small arrow says so.
   The "/ ''" gives the arrow empty alt text, so screen readers rely on the "opens in a new tab" note instead. */
main a[target="_blank"]:not(.button):not(.video__play):not(:has(img))::after,
.site-footer a[target="_blank"]::after {
  content: "\2197";
  content: "\2197" / "";
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.8em;
  text-decoration: none;
}