/* ==========================================================================
   MO THÍR FÉIN — The Small Histories That Made Ireland
   ireland-one.com | assets/css/style.css
   Archive style. Cream and stone base, dark text, green and gold accents.
   Vanilla CSS only. Safe to edit in File Manager.
   ========================================================================== */

/* --- VARIABLES ----------------------------------------------------------- */
:root {
  --rail: #C0430F;
  --rail-dot: #E02020;
  --rail-ring: #7A1C0C;
  /* base */
  --cream:      #FFFFFF;
  --paper:      #FFFFFF;
  --stone:      #E8E1D3;
  --stone-dark: #D6CCB8;
  --ink:        #22201C;

  /* accents */
  --green:      #1B5E3A;
  --green-dark: #123F27;
  --green-pale: #E3EDE5;
  --gold:       #B8892B;
  --gold-pale:  #F3E7CC;
  --rust:       #9A4A26;

  /* text */
  --text:       #22201C;
  --text-dim:   #5F5849;
  --text-faint: #8A8272;

  --border:     #DCD3C1;
  --radius:     8px;
  --nav-height: 62px;
  --maxw:       880px;

  --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body:    'Helvetica Neue', Arial, Helvetica, sans-serif;
}

/* --- RESET --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; margin: 0 0 .5em; }
p { margin: 0 0 1.15em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.wrap-wide { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* --- NAV ----------------------------------------------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-height);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.site-nav .wrap-wide { display: flex; align-items: center; height: 100%; gap: 22px; }
.nav-brand { font-family: var(--font-display); font-size: 1.22rem; color: var(--ink); letter-spacing: .01em; }
.nav-brand:hover { text-decoration: none; color: var(--green); }
.nav-links { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.nav-links a { color: var(--text-dim); font-size: .93rem; letter-spacing: .02em; }
.nav-links a:hover, .nav-links a.active { color: var(--green); text-decoration: none; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.4rem; color: var(--ink); cursor: pointer; margin-left: auto; }

@media (max-width: 700px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: var(--nav-height); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--border);
    padding: 6px 20px 14px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 0; width: 100%; border-bottom: 1px solid var(--border); }
}

/* --- HERO ---------------------------------------------------------------- */
.hero {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: 62px 0 54px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2.3rem, 6vw, 3.4rem);
  margin-bottom: .18em;
  letter-spacing: .01em;
}
.hero .tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-dim);
  font-size: clamp(1.02rem, 2.4vw, 1.24rem);
  margin: 0 0 1.4em;
}
.hero .rule { width: 64px; height: 2px; background: var(--gold); margin: 0 auto 1.5em; }
.hero .standfirst { max-width: 640px; margin: 0 auto; color: var(--text-dim); }

/* --- SECTION HEADINGS ---------------------------------------------------- */
.section { padding: 54px 0; }
.section-head { margin-bottom: 26px; }
.section-head .eyebrow {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin: 0 0 .5em;
}
.section-head h2 { font-size: 1.75rem; margin-bottom: .25em; }
.section-head p { color: var(--text-dim); margin: 0; }

/* --- MAP ----------------------------------------------------------------- */
.map-panel { background: var(--paper); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 46px 0 40px; }
.map-frame { max-width: 780px; margin: 0 auto; }
#ireland-map { width: 100%; height: auto; display: block; touch-action: manipulation; }
.county-shape {
  fill: var(--stone);
  stroke: var(--border);
  stroke-width: 1.2;
  transition: fill .16s ease;
}
.county-label { font-family: Georgia, serif; font-size: 15px; fill: var(--ink); pointer-events: none; }
.county-sub   { font-family: Georgia, serif; font-size: 10.5px; font-style: italic; fill: var(--text-faint); pointer-events: none; }
/* superseded by the map block at the end of this file */

.map-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--text-dim); padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--cream); }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid var(--border); }
.map-note { text-align: center; color: var(--text-faint); font-size: .82rem; margin-top: 16px; }

.county-search { display: block; width: 100%; max-width: 340px; margin: 0 auto 22px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--cream);
  font-family: var(--font-body); font-size: .95rem; color: var(--ink); }
.county-search:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.county.dimmed .county-shape { opacity: .25; }

/* --- CARDS --------------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; }
.card {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; display: block; color: inherit; transition: border-color .16s, transform .16s;
}
.card:hover { text-decoration: none; border-color: var(--gold); transform: translateY(-2px); }
.card h3 { font-size: 1.16rem; margin-bottom: .3em; }
.card p { color: var(--text-dim); font-size: .93rem; margin: 0; }
.card .card-meta { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .7em; }
.card.is-empty { opacity: .68; }
.card.is-empty .card-meta { color: var(--text-faint); }

/* --- COUNTY PAGE --------------------------------------------------------- */
.county-hero { background: var(--paper); border-bottom: 1px solid var(--border); padding: 40px 0 0; }
.county-back { font-size: .84rem; color: var(--text-dim); display: inline-block; margin-bottom: 14px; }
.county-hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: .1em; }
.county-hero .irish { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1.06rem; margin: 0 0 .35em; }
.county-hero .summary { color: var(--text-dim); max-width: 620px; margin: 12px 0 1.4em; }

.meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.meta-chip { background: var(--cream); border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; font-size: .8rem; color: var(--text-dim); }
.meta-chip strong { color: var(--ink); font-weight: 600; }

.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 12px 14px; font-family: var(--font-body); font-size: .9rem; color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--green); border-bottom-color: var(--gold); font-weight: 600; }
.tab-panel { display: none; padding: 34px 0 60px; }
.tab-panel.active { display: block; }

.neighbours { border-top: 1px solid var(--border); padding: 22px 0 46px; }
.neighbours h4 { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .8em; }
.neighbour-list { display: flex; flex-wrap: wrap; gap: 8px; }
.neighbour-list a { background: var(--paper); border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; font-size: .84rem; color: var(--text-dim); }
.neighbour-list a:hover { border-color: var(--gold); color: var(--green); text-decoration: none; }

/* --- CONTENT BLOCKS ------------------------------------------------------ */
.blocks { max-width: 700px; }
.blocks h3 { font-size: 1.32rem; margin: 2rem 0 .6rem; color: var(--green-dark); }
.blocks h3:first-child { margin-top: 0; }

.fact-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 1.6em; padding: 0; list-style: none; }
.fact-chip { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 13px; font-size: .82rem; }
.fact-chip span { display: block; color: var(--text-faint); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.fact-chip strong { font-weight: 600; color: var(--ink); }

.quote-block { border-left: 3px solid var(--gold); background: var(--paper); padding: 18px 22px; margin: 0 0 1.6em; border-radius: 0 var(--radius) var(--radius) 0; }
.quote-block p { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; margin: 0 0 .5em; }
.quote-block cite { font-style: normal; font-size: .82rem; color: var(--text-faint); }

.callout { background: var(--green-pale); border: 1px solid #C9DCCE; border-radius: var(--radius); padding: 18px 20px; margin: 0 0 1.6em; }
.callout h4 { font-size: .95rem; margin-bottom: .4em; color: var(--green-dark); }
.callout p:last-child { margin-bottom: 0; }

.timeline { border-left: 2px solid var(--stone-dark); margin: 0 0 1.6em; padding-left: 0; list-style: none; }
.timeline-entry { position: relative; padding: 0 0 22px 24px; }
.timeline-entry::before { content: ''; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--cream); }
.timeline-entry .t-date { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.timeline-entry h4 { font-size: 1.05rem; margin: .2em 0 .35em; }
.timeline-entry p { margin: 0 0 .5em; font-size: .95rem; }
.timeline-entry .t-place { font-size: .8rem; color: var(--text-faint); }
.timeline-entry .t-place a { color: var(--green); }

.person-card, .place-card, .story-card {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; margin: 0 0 1.2em;
}
.person-card h4, .place-card h4, .story-card h4 { font-size: 1.05rem; margin-bottom: .15em; }
.person-card .p-sub, .place-card .p-sub { font-size: .8rem; color: var(--gold); letter-spacing: .06em; margin-bottom: .6em; }
.person-card p:last-child, .place-card p:last-child, .story-card p:last-child { margin-bottom: 0; }

.image-block { margin: 0 0 1.6em; max-width: 400px; }

/* A picture set into the running text. It floats to the right of the prose and
   the paragraphs wrap around it. flow-root keeps the row tall enough to hold the
   picture, so a tall image never spills onto the paragraph below. */
.figure-wrap { display: flow-root; }
.figure-wrap .image-block {
  float: right;
  width: auto;
  max-width: 38%;
  margin: .2em 0 1em 26px;
}
/* A portrait is far taller than a landscape at the same width, and the text it
   sits beside is a fixed few paragraphs. Bound the height rather than the width
   so a tall picture shrinks instead of towering over the prose. */
.figure-wrap .image-block img { width: auto; max-width: 100%; max-height: 208px; }
.figure-wrap .image-block figcaption { font-size: .76rem; }
@media (max-width: 620px) {
  .figure-wrap .image-block { float: none; width: 100%; max-width: 260px; margin: 0 0 1.2em; }
}
.image-block img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.image-block figcaption { font-size: .82rem; color: var(--text-faint); margin-top: .55em; font-style: italic; }

.source-list { font-size: .85rem; color: var(--text-dim); }
.source-list li { margin-bottom: .35em; }

.placeholder {
  border: 1px dashed var(--stone-dark); border-radius: var(--radius);
  padding: 34px 24px; text-align: center; color: var(--text-faint); background: var(--paper);
}
.placeholder strong { display: block; color: var(--text-dim); margin-bottom: .3em; font-weight: 600; }
.placeholder code { background: var(--cream); padding: 2px 6px; border-radius: 4px; font-size: .84rem; }

/* --- STRAND PAGE --------------------------------------------------------- */
.strand-hero { background: var(--paper); border-bottom: 1px solid var(--border); padding: 44px 0 38px; }
.strand-hero .eyebrow { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.strand-hero h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin: .3em 0 .2em; }
.strand-hero .period { font-family: var(--font-display); font-style: italic; color: var(--text-dim); margin-bottom: 1em; }
.strand-hero .standfirst { max-width: 660px; color: var(--text-dim); margin: 0; }

.strand-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.filter-btn { background: var(--paper); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-family: var(--font-body); font-size: .84rem; color: var(--text-dim); cursor: pointer; }
.filter-btn:hover { border-color: var(--gold); }
.filter-btn.active { background: var(--green); border-color: var(--green); color: #fff; }

/* --- FOOTER -------------------------------------------------------------- */
.site-footer { background: var(--paper); border-top: 1px solid var(--border); padding: 40px 0; margin-top: 20px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: flex-start; }
.site-footer p { color: var(--text-faint); font-size: .85rem; margin: 0; }
.site-footer .foot-brand { font-family: var(--font-display); color: var(--ink); font-size: 1.05rem; }
.site-footer .foot-links { display: flex; gap: 16px; font-size: .85rem; }

/* --- UTILITIES ----------------------------------------------------------- */
.center { text-align: center; }
.muted { color: var(--text-dim); }
.small { font-size: .86rem; }
.mt-2 { margin-top: 1.4rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .section { padding: 40px 0; }
  .county-label { font-size: 14px; }
  .county-sub { display: none; }
}

@media print {
  .site-nav, .site-footer, .tabs, .strand-filters { display: none; }
  .tab-panel { display: block !important; }
  body { background: #fff; }
}

/* ==========================================================================
   THE MAP, THE EXPLORED STATE, AND THE QUIZ ROOM
   Added August 2026 with the traced outline map.
   All colours here are variables. Change them in one place.
   ========================================================================== */

:root {
  /* the map has two states and one line colour, and that is all */
  --county:        #169B62;   /* every county, until it is opened */
  --county-on:     #FF883E;   /* under the pointer, and once explored */
  --county-line:   #FFFFFF;   /* the line between counties */

  /* water. The lakes are bright so they read at a glance. */
  --water:         #17B6E8;
  --water-line:    #0E6E92;
}

/* --- the map ------------------------------------------------------------- */
.map-frame svg { width: 100%; height: auto; display: block; overflow: visible; }

.county-shape {
  fill: var(--county);
  stroke: var(--county-line);
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: fill .16s ease;
}

/* under the pointer, and for good once the county page has been opened */
.county.is-active .county-shape,
.county.explored  .county-shape { fill: var(--county-on); }

.county { cursor: pointer; }
.county:focus-visible .county-shape { stroke-width: 3; }
.county:focus { outline: none; }
.county.dimmed .county-shape { opacity: .22; }

#water { pointer-events: none; }
.lake  { fill: var(--water); stroke: var(--water-line); stroke-width: .9; }
.river { fill: none; stroke: var(--water-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .county-shape { transition: none; }
}

/* --- caption, counter and reset ------------------------------------------ */
.map-caption {
  text-align: center; margin-top: 16px; min-height: 1.7em;
  font-family: var(--font-display); font-size: 1.06rem; color: var(--text-dim);
}
.map-caption strong { color: var(--ink); font-weight: 600; }
.map-caption .irish { font-style: italic; color: var(--gold); }

.map-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 14px; }
.explored-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--cream);
  border-radius: 999px; padding: 5px 14px; font-size: .84rem; color: var(--text-dim);
  font-family: inherit; line-height: 1.2;
}
.explored-badge b { color: var(--county-on); font-weight: 700; }

/* The counter is also the reset. It is a plain readout until there is something
   to clear, and only then does it take the curved arrow and become tappable. */
.explored-badge[disabled] { cursor: default; }
.explored-badge:not([disabled]) { cursor: pointer; }
.explored-badge:not([disabled]):hover,
.explored-badge:not([disabled]):focus-visible {
  border-color: var(--county-on); color: var(--ink);
}
.explored-badge:not([disabled]):active { transform: scale(.97); }
.badge-undo {
  width: 13px; height: 13px; margin-left: -2px; color: var(--text-faint);
  flex: none;
}
.explored-badge:not([disabled]):hover .badge-undo { color: var(--county-on); }
.btn-quiet {
  border: 1px solid var(--border); background: none; border-radius: 999px;
  padding: 5px 14px; font-size: .8rem; color: var(--text-dim);
  cursor: pointer; font-family: inherit;
}
.btn-quiet:hover { border-color: var(--gold); color: var(--ink); }

.prov-key { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }

/* --- the quiz room ------------------------------------------------------- */
.quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.quiz-card {
  display: block; background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 20px 18px; color: inherit;
}
.quiz-card:hover { border-color: var(--gold); text-decoration: none; }
.quiz-card h3 { margin-bottom: .35em; font-size: 1.18rem; }
.quiz-card p { color: var(--text-dim); font-size: .92rem; margin: 0; }
.quiz-card .card-meta { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.quiz-card.is-empty { opacity: .62; }

.quiz-stage { max-width: 620px; margin: 0 auto; }
.quiz-progress { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); text-align: center; margin-bottom: 18px; }
.quiz-prompt { font-family: var(--font-display); font-size: 1.42rem; line-height: 1.4; text-align: center; margin: 0 0 26px; }
.quiz-options { display: grid; gap: 10px; }
.quiz-option {
  width: 100%; text-align: left; font-family: inherit; font-size: 1rem;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 16px; cursor: pointer; color: var(--text); transition: border-color .15s ease;
}
.quiz-option:hover:not(:disabled) { border-color: var(--gold); }
.quiz-option:disabled { cursor: default; }
.quiz-option.is-right { border-color: var(--green); background: var(--green-pale); }
.quiz-option.is-wrong { border-color: var(--rust); background: #F5E6E0; }

.quiz-feedback { margin-top: 18px; text-align: center; color: var(--text-dim); min-height: 3em; font-size: .95rem; }
.quiz-feedback a { text-decoration: underline; }
.quiz-actions { display: flex; gap: 12px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.btn {
  display: inline-block; border: 1px solid var(--green); background: var(--green); color: var(--paper);
  border-radius: 999px; padding: 9px 22px; font-family: inherit; font-size: .92rem; cursor: pointer;
}
.btn:hover { background: var(--green-dark); text-decoration: none; }
.btn-outline { background: none; color: var(--green); }
.btn-outline:hover { background: var(--green-pale); }

.quiz-score { text-align: center; }
.quiz-score .score-line { font-family: var(--font-display); font-size: 2.1rem; margin: 0 0 .2em; }
.quiz-score .score-note { color: var(--text-dim); }

.quiz-map { max-width: 420px; margin: 0 auto 10px; }
.quiz-map .county { cursor: pointer; }
.quiz-map .county.is-answer .county-shape { fill: var(--green-dark); }
.quiz-map .county.is-chosen-wrong .county-shape { fill: var(--rust); }

@media (max-width: 620px) {
  .quiz-prompt { font-size: 1.22rem; }
  .quiz-map { max-width: 320px; }
}

/* ==========================================================================
   THE APP SHELL
   Title bar, map stage, bottom bar. One layout on every screen, built for
   the phone first. Added August 2026.
   ========================================================================== */

@font-face {
  font-family: 'Maragsa';
  src: url('/assets/fonts/maragsa.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Maragsa', Georgia, 'Times New Roman', serif;
  --topbar-h: 62px;
  --bottombar-h: 58px;
}

html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.shell {
  flex: 1 1 auto;
  min-height: 0;
  /* the bar is fixed, so every page reserves its height plus breathing room */
  padding-bottom: 0;
}

/* A real element, so nothing can collapse it away. It holds the last block of
   any page clear of the fixed bar. */
.bar-clear {
  height: calc(var(--bottombar-h) + 44px + env(safe-area-inset-bottom));
}
.page-home .bar-clear { height: 0; }
.page-home .shell {
  /* the map fits the screen, so it reserves the bar height and nothing more */
  padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom));
}

/* --- title bar ----------------------------------------------------------- */
.topbar {
  flex: 0 0 auto;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: 9px 16px calc(9px + env(safe-area-inset-top)) 16px;
  padding-top: calc(9px + env(safe-area-inset-top));
  text-align: center;
}
.topbar-brand { display: block; color: inherit; text-decoration: none; }
.topbar-brand:hover { text-decoration: none; }
.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.72rem;
  line-height: 1.06;
  color: var(--ink);
  letter-spacing: .01em;
}
.brand-tag {
  display: block;
  margin-top: 3px;
  font-size: .62rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --- bottom bar ---------------------------------------------------------- */
.bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  background: var(--paper);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bb-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 9px;
  color: var(--text-faint);
  text-decoration: none;
  border-top: 2px solid transparent;
}
.bb-item:hover { text-decoration: none; color: var(--text-dim); }
.bb-item.is-on { color: var(--green); border-top-color: var(--gold); }
.bb-icon svg { width: 21px; height: 21px; display: block; }
.bb-label { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }

/* --- the home page is one screen, never scrolled ------------------------- */
body.page-home { overflow: hidden; }
.page-home .shell { display: flex; flex-direction: column; }

.mapstage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px 14px;
}
.page-home .map-frame {
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-home .map-frame svg {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* --- the two corner controls --------------------------------------------- */
.map-btn {
  position: absolute;
  top: 10px;
  z-index: 5;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--paper);
  border-radius: 999px;
  color: var(--text-dim);
  cursor: pointer;
}
.map-btn:hover { border-color: var(--gold); color: var(--ink); }
.map-btn svg { width: 18px; height: 18px; }
.map-btn-search { left: 12px; }

.mapstage .explored-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  background: var(--paper);
}

/* --- the county name, in a neat box --------------------------------------- */
.county-tip {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 4px 16px rgba(34, 32, 28, .16);
  padding: 6px 14px 7px;
  white-space: nowrap;
}
.county-tip[hidden] { display: none; }
.tip-name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.2;
  color: var(--ink);
}

/* --- the invitation, on a touch screen only ------------------------------- */
.county-invite {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom));
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--green);
  color: var(--paper);
  font-size: .98rem;
  text-decoration: none;
  border-top: 2px solid var(--gold);
}
.county-invite[hidden] { display: none; }
.county-invite:hover { text-decoration: none; }
.county-invite span:first-of-type { font-family: var(--font-display); font-size: 1.14rem; }
.invite-arrow { font-size: 1.05rem; opacity: .85; }

/* --- the search panel ---------------------------------------------------- */
.search-panel {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 9;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px 10px;
  box-shadow: 0 6px 22px rgba(34, 32, 28, .13);
}
.search-panel[hidden] { display: none; }
.search-row { display: flex; gap: 8px; align-items: center; }
.search-row .county-search { margin: 0; max-width: none; flex: 1 1 auto; }
.search-hint { margin: 8px 2px 0; font-size: .74rem; color: var(--text-faint); }

/* --- pages that are not the map ------------------------------------------ */
.page-explore .section,
.page-quizzes .section { padding-top: 26px; }

/* --- larger screens ------------------------------------------------------ */
@media (min-width: 700px) {
  :root { --topbar-h: 74px; }
  .brand-name { font-size: 2.15rem; }
  .brand-tag { font-size: .68rem; }
  .bb-label { font-size: .72rem; }
  .mapstage { padding: 16px 20px 20px; }
  .county-card { width: 360px; }
  .search-panel { left: 50%; transform: translateX(-50%); width: 460px; right: auto; }
}

/* --- the detailed county map ---------------------------------------------- */
.county-map { margin: 14px 0 10px; }
.county-map svg { width: 100%; height: auto; display: block; }
.county-map figcaption {
  margin-top: 8px;
  font-size: .76rem;
  color: var(--text-faint);
  text-align: center;
}
.cm-neighbour {
  fill: #EAEEEA;
  stroke: #FFFFFF;
  stroke-width: 1.5;
}
.cm-nname {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  fill: #9AA79E;
}
.cm-outline { fill: var(--county); stroke: #FFFFFF; stroke-width: 1.5; }

.cm-water { pointer-events: none; }
/* The lake edge is drawn in the water colour, not in white. On a lough like Upper
   Lough Erne the channels between the islands are only two or three pixels wide,
   and a white outline on each side of a channel leaves no water in the middle.
   Stroking in blue instead keeps the narrow water readable and costs nothing on
   the wide loughs, because blue on green needs no separator. */
.cm-lake { fill: var(--water); stroke: var(--water); stroke-width: 0.9;
           stroke-linejoin: round; }
.cm-lname {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  fill: #FFFFFF;
  letter-spacing: .01em;
}
/* A lake name that falls onto the pale ground outside the county reads in ink,
   the same rule the town labels follow. */
.cm-lname.cm-out { fill: var(--ink); }

/* Sea loughs, bays and estuaries. Tidal water is cut out by the coastline mask and
   drawn as white, so on a county like Down the most important feature on the map
   would otherwise have no name. Ink, letterspaced, no marker. */
.cm-sname {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--water-line);
  letter-spacing: .06em;
}

/* Town labels are white where they sit on the county, and ink where they fall
   off it onto the page. Nothing is haloed, so the type stays sharp. */
.cm-place circle { fill: var(--county-on); stroke: #FFFFFF; stroke-width: 2; }
.cm-place text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  fill: #FFFFFF;
  letter-spacing: .01em;
}
.cm-place.cm-out text { fill: var(--ink); }
/* A named exception carries no special marking. It looks like any other town,
   because on the map it is one. The reason it is there lives in the data. */

.cm-city circle { fill: #FFFFFF; stroke: var(--ink); stroke-width: 2.5; }
.cm-city text { font-size: 18px; font-weight: 700; }

@media (max-width: 620px) {
  .cm-place text { font-size: 19px; }
  .cm-city text  { font-size: 22px; }
  .cm-lname { font-size: 16px; }
}


/* --- headings -------------------------------------------------------------
   The Gaelic face is a display face. It carries the site title and the page
   title, where it is large enough to read cleanly, with a little air between
   the letters. Everything smaller uses the body face, which stays sharp.
   -------------------------------------------------------------------------- */
h1, .brand-name, .tip-name, .card-name {
  font-family: var(--font-display);
  letter-spacing: .022em;
}
.brand-name { letter-spacing: .028em; }
h2, h3, h4 {
  font-family: var(--font-body);
  letter-spacing: -.005em;
  color: var(--ink);
}
h2 { font-size: 1.42rem; }
h3 { font-size: 1.16rem; }
h4 { font-size: 1rem; }

/* --- the island map, Leaflet on OpenStreetMap ----------------------------- */
body.page-atlas { overflow: hidden; }
.page-atlas .bar-clear { height: 0; }
.page-atlas .shell {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom));
}
.atlasstage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 12px 14px;
}
.atlas-frame {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--stone);
}
.leaflet-container { font-family: var(--font-body); }
.leaflet-popup-content { font-size: .92rem; line-height: 1.5; }
.leaflet-popup-content a { color: var(--green); }

/* --- strand library, one block per section -------------------------------- */
.strand-section { margin-top: 40px; }
.strand-section:first-of-type { margin-top: 0; }
.strand-section .section-head { margin-bottom: 18px; }

/* --- strand, two columns ---------------------------------------------------
   A rail of year markers on the left, the narrative on the right. Both scroll
   with the page. Below 860px the rail is hidden and the narrative stands alone,
   which is the reading order on a phone. */
.strand-hero .byline {
  font-family: var(--font-body);
  font-size: .95rem;
  letter-spacing: .01em;
  color: var(--text-dim);
  margin: .35em 0 .2em;
}
.strand-hero .byline::before {
  content: "by";
  margin-right: .38em;
  color: var(--text-faint);
}

.strand-body {
  padding-top: 30px;
  padding-bottom: 40px;
}

/* --- the year rail ---------------------------------------------------------
   One column of rows. Each row is a rail cell and a piece of the article, so a
   date always sits level with the paragraph that names it. The line is drawn on
   the rail cells, which touch, so it reads as one unbroken stroke from the first
   paragraph to the last. */
.flow { display: block; }
.flow-row { display: flex; align-items: stretch; }
.flow-mark {
  position: relative;
  flex: 0 0 96px;
  border-right: 2px solid var(--rail);
}
.flow-text {
  min-width: 0;
  max-width: 720px;
  padding-left: 30px;
}
.flow-text > :first-child { margin-top: 0; }
.flow-row:first-child .flow-text > h3 { margin-top: 0; }

/* the marker: dot on the line, date to the left of it */
.year-mark {
  position: absolute;
  right: 12px;
  top: .18em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.year-mark::after {
  content: "";
  position: absolute;
  right: -19px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--rail-dot);
  border: 2px solid var(--rail-ring);
}
.year-mark:hover, .year-mark[aria-expanded="true"] { color: var(--rail); }
.year-count {
  font-size: .68rem;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--gold-pale);
  color: var(--gold);
  font-weight: 600;
}

/* anything after the article lines up with the text, clear of the rail */
.strand-after { margin-left: 126px; max-width: 720px; }

.strand-narrative { max-width: 720px; }
.strand-narrative h3 { margin-top: 1.6em; }
.strand-narrative h3:first-child { margin-top: 0; }

/* the card list that a year marker opens */
.year-panel {
  position: absolute;
  z-index: 30;
  width: 280px;
}
.year-panel-inner {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 26px rgba(34, 32, 28, .16);
  padding: 12px 14px;
}
.year-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.year-panel ul { list-style: none; margin: 0; padding: 0; }
.year-panel li { border-top: 1px solid var(--border); }
.year-panel li:first-child { border-top: 0; }
.year-panel a { display: block; padding: 8px 0; text-decoration: none; }
.year-panel a:hover .c-title { color: var(--green); }
.year-panel .c-title { display: block; font-size: .92rem; color: var(--ink); }
.year-panel .c-meta { display: block; font-size: .76rem; color: var(--text-faint); }
.year-panel .c-none { padding: 8px 0; font-size: .88rem; color: var(--text-faint); }

@media (max-width: 860px) {
  .flow-mark { display: none; }
  .flow-text { padding-left: 0; max-width: none; }
  .strand-after { margin-left: 0; }
  .year-panel { display: none; }
}

/* --- Cormac Óg asks --------------------------------------------------------
   The one place the guide speaks. Questions only, at the foot of a piece, each
   one carrying a link to the piece that answers it. A question with nothing
   behind it never reaches the page. */
.asks {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.asks-head {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .9em;
}
.asks-list {
  margin: 0;
  padding-left: 1.35em;
  list-style: decimal;
}
.asks-list li {
  margin-bottom: .6em;
  padding-left: .2em;
  color: var(--text-faint);
}
.asks-list a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--stone-dark);
}
.asks-list a:hover { color: var(--green); border-bottom-color: var(--green); }

/* --- the year line on a card ----------------------------------------------
   A card carries the year that places it on a strand rail. The reader sees the
   same year, so the link between article and card is plain. */
.c-year {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--rail);
  margin-bottom: .25em;
}

/* --- the line back to the post --------------------------------------------
   A card belongs to a post. The line says which, and carries the reader there. */
.c-post { margin: .9em 0 .2em; font-size: .88rem; }
.c-post::before { content: "In full: "; color: var(--text-faint); }
.c-post a { color: var(--green); }
.c-post a:hover { color: var(--rail); }

/* A marker beside a subheading. The space above a heading is moved off the
   heading itself and onto the row, so the row top is a known quantity and the
   dot can be dropped by exactly the same amount. Guesswork would drift with the
   font size. */
.flow-row > .flow-text > h3 { margin-top: 0; }
.flow-row:has(> .flow-text > h3) > .flow-text { padding-top: 1.5em; }
.flow-row:has(> .flow-text > h3) .year-mark { top: 1.68em; }
.flow-row:first-child:has(> .flow-text > h3) > .flow-text { padding-top: 0; }
.flow-row:first-child:has(> .flow-text > h3) .year-mark { top: .18em; }

/* --- a card arrived at by a link ------------------------------------------
   The mark fades rather than sticks, so the page settles back to normal once
   the reader has found the card. */
.person-card, .place-card, .story-card { scroll-margin-top: 90px; }
.card-found {
  animation: card-found 2.6s ease-out 1;
}
@keyframes card-found {
  0%, 55% { box-shadow: 0 0 0 3px var(--gold-pale); border-color: var(--gold); }
  100%    { box-shadow: 0 0 0 3px transparent; }
}

/* =============================================================================
   SERIES
   A series is several strands read as one subject. The series page carries the
   high level story and the doors into the articles. Each article carries a rail
   of the whole series, so a reader who lands in the middle can move sideways.
   Added 13 September 2026.
   ========================================================================== */

/* --- the series page ------------------------------------------------------ */
.series-hero .series-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-dim);
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  max-width: 620px;
  margin: .2em 0 .6em;
}

.series-body { padding-top: 34px; padding-bottom: 48px; }
.series-opening { max-width: 720px; }

.series-doors-head { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--border); }

.series-doors { list-style: none; margin: 0; padding: 0; }
.series-doors li { margin: 0 0 10px; }

.door {
  display: flex; gap: 18px; align-items: baseline;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; color: inherit;
  transition: border-color .16s, transform .16s;
}
.door:hover { text-decoration: none; border-color: var(--gold); transform: translateY(-2px); }
.door-no {
  font-family: var(--font-display);
  font-size: 1.5rem; color: var(--gold); line-height: 1;
  min-width: 1.4em; text-align: right; flex: 0 0 auto;
}
.door-text { display: block; }
.door-title { display: block; font-size: 1.12rem; font-weight: 600; line-height: 1.3; }
.door-hook  { display: block; color: var(--text-dim); font-size: .93rem; margin-top: .25em; }
.door-state {
  display: inline-block; margin-top: .45em;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
}
.door.is-empty { opacity: .72; }
.door.is-empty .door-no { color: var(--stone-dark); }

.card.is-series .card-meta { color: var(--green); }

/* --- the rail of articles on one strand ----------------------------------- */
.series-rail {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: 14px 0 4px;
}
.series-rail-head {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin: 0 0 .7em;
}
.series-rail-head a { color: var(--gold); }

.series-rail-list {
  list-style: none; margin: 0; padding: 0 0 10px;
  display: flex; gap: 8px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.series-rail-list li { flex: 0 0 auto; }
.series-rail-list a,
.series-rail-list span {
  display: inline-block; white-space: nowrap;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 14px; font-size: .84rem; color: var(--text-dim);
}
.series-rail-list a:hover { border-color: var(--gold); color: var(--green); text-decoration: none; }
.series-rail-list .r-no { color: var(--gold); font-weight: 600; margin-right: .5em; }
.series-rail-list .is-here span {
  background: var(--green); border-color: var(--green); color: #fff;
}
.series-rail-list .is-here .r-no { color: var(--gold-pale); }
.series-rail-list .is-empty a { opacity: .6; }

/* --- previous and next, kept quiet ---------------------------------------- */
.series-step {
  display: flex; gap: 16px; justify-content: space-between;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border);
}
.step { display: block; max-width: 46%; color: inherit; }
.step-next { text-align: right; margin-left: auto; }
.step-dir {
  display: block; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: .3em;
}
.step-title { display: block; font-size: .98rem; color: var(--text); }
.step:hover { text-decoration: none; }
.step:hover .step-title { color: var(--green); }

/* --- a drawn figure -------------------------------------------------------- */
.figure-block {
  margin: 2.2rem 0;
  padding: 0;
}
.figure-title {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin: 0 0 .7em;
}
.figure-plot {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.figure-plot svg { display: block; width: 100%; height: auto; }
.figure-block figcaption {
  color: var(--text-dim); font-size: .93rem; margin-top: .8em; line-height: 1.6;
}
.figure-source {
  color: var(--text-faint); font-size: .8rem; margin: .35em 0 0;
}

@media (max-width: 620px) {
  .door { gap: 12px; padding: 15px 16px; }
  .door-no { font-size: 1.25rem; }
  .series-step { flex-direction: column; gap: 20px; }
  .step, .step-next { max-width: 100%; text-align: left; margin-left: 0; }

  /* A chart shrunk to phone width loses its labels. Hold the drawing at a size
     that stays readable and let the reader swipe it instead. */
  .figure-plot {
    padding: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .figure-plot svg { min-width: 440px; }
  .figure-block::after {
    content: "Swipe the chart sideways to see all of it.";
    display: block;
    font-size: .74rem;
    color: var(--text-faint);
    margin-top: .5em;
  }
}

/* =============================================================================
   A SERIES OPENING
   The three blocks that carry the front of a series: one hard claim, a row of
   large numbers, and what it was not beside what it was. Added 13 September 2026.
   ========================================================================== */

/* The shared .blocks rule holds prose to 700px. A series opening needs the full
   column for its three wide blocks, so the cap moves onto the elements that
   actually want it. */
.series-opening.blocks { max-width: none; }

/* prose keeps its measure; the three blocks below take the full column */
.series-opening > p,
.series-opening > h3,
.series-opening > ul,
.series-opening > blockquote { max-width: 720px; }
.series-opening > .figure-block { max-width: 820px; }

/* --- the opening claim ----------------------------------------------------- */
.hero-statement {
  max-width: 900px;
  margin: 0 0 2.6rem;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--gold);
}
.hero-statement p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.28;
  color: var(--ink);
  margin: 0 0 .35em;
}
.hero-statement .hero-note {
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 1em 0 0;
}

/* --- the row of numbers ---------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 2.8rem;
}
.stat {
  background: var(--paper);
  padding: 24px 18px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}
.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  color: var(--rust);
  letter-spacing: -.01em;
  white-space: nowrap;          /* a value never breaks across two lines */
}
.stat-label {
  display: block;
  margin-top: .7em;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--text-dim);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* --- what it was not, beside what it was ----------------------------------- */
.myth-record {
  margin: 0 0 3rem;
  border-top: 2px solid var(--ink);
}
.mr-heads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 14px 0 10px;
}
.mr-head {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
}
.mr-head-myth   { color: var(--text-faint); }
.mr-head-record { color: var(--green); }

.mr-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 1px solid var(--border);
  padding: 18px 0;
}
.mr-cell p { margin: 0; }
.mr-myth p {
  color: var(--text-faint);
  font-size: 1rem;
  line-height: 1.55;
}
.mr-record p {
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.55;
  font-weight: 500;
}
.mr-record { border-left: 3px solid var(--green); padding-left: 16px; }
.mr-myth   { border-left: 3px solid var(--stone); padding-left: 16px; }
.mr-tag { display: none; }

@media (max-width: 720px) {
  .mr-heads { display: none; }
  .mr-pair { grid-template-columns: 1fr; gap: 14px; padding: 16px 0; }
  .mr-tag {
    display: block;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: .35em;
  }
  .mr-myth   .mr-tag { color: var(--text-faint); }
  .mr-record .mr-tag { color: var(--green); }
  .hero-statement { padding-left: 16px; margin-bottom: 2rem; }
  .stat { padding: 18px 14px 16px; }
}

/* =============================================================================
   COLOUR LIFT
   The archive palette was there but barely used. Green and the orange family
   now carry the structure of a page: headings, rules, hero, hover and numbers.
   Added 13 September 2026.
   ========================================================================== */

/* --- the top bar gets a gold rule ----------------------------------------- */
.topbar { border-bottom: 2px solid var(--gold); }

/* --- heroes sit on a green wash under a green line ------------------------ */
.strand-hero,
.series-hero,
.county-hero {
  background: linear-gradient(180deg, var(--green-pale) 0%, var(--paper) 92%);
  border-top: 4px solid var(--green);
}
.strand-hero h1,
.series-hero h1,
.county-hero h1 { color: var(--green-dark); }

/* --- article headings in green, with a gold tick above --------------------
   The flow renderer wraps each element in .flow-text, so the heading rule has
   to sit there rather than on .strand-narrative. */
.strand-narrative h3,
.flow-text h3,
.series-body h3 {
  color: var(--green-dark);
  font-size: 1.34rem;
  margin-top: 2.1rem;
}
.strand-narrative h3::before,
.flow-text h3::before,
.series-body h3::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--gold);
  margin-bottom: .62em;
  border-radius: 2px;
}

/* --- section headings on Explore and the series page ---------------------- */
.section-head h2 { color: var(--green-dark); }
.series-doors-head { border-top: 2px solid var(--gold); }

/* --- cards and doors answer in the orange family -------------------------- */
.card:hover { border-color: var(--rust); box-shadow: 0 2px 0 0 var(--gold-pale); }
.card.is-series { border-left: 4px solid var(--green); }
.card.is-series .card-meta { color: var(--rust); }

.door { border-left: 4px solid var(--stone); }
.door:hover { border-color: var(--rust); border-left-color: var(--rust); }
.door-no { color: var(--rust); font-weight: 600; }
.door:hover .door-no { color: var(--green); }

/* --- the two columns get their colours strengthened ----------------------- */
.myth-record { border-top: 3px solid var(--green); }
.mr-head-myth { color: var(--rust); }
.mr-myth { border-left-color: var(--rust); }
.mr-myth p { color: var(--text-dim); }

/* --- figures get a warm frame --------------------------------------------- */
.figure-plot { border-color: var(--stone-dark); background: #FDFCF9; }
.figure-title { color: var(--rust); }

/* --- the series rail ------------------------------------------------------ */
.series-rail { background: var(--green-pale); border-bottom: 1px solid var(--green); }
.series-rail-head a { color: var(--green-dark); }
.series-rail-list a { background: var(--paper); }

/* --- quotes and callouts -------------------------------------------------- */
.quote-block { border-left: 4px solid var(--gold); }
.callout { border-left: 4px solid var(--green); background: var(--green-pale); }

/* =============================================================================
   NOTES
   Sources and the people behind them sit at the foot, out of the way of the
   story. A reader who wants them will look. A reader who does not is not
   detained by them.
   ========================================================================== */
.notes {
  margin: 3rem 0 0;
  padding: 22px 24px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
}
.notes-head {
  font-family: var(--font-body);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 .9em;
}
.notes-list {
  margin: 0;
  padding-left: 1.3em;
  font-size: .89rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.notes-list li { margin-bottom: .55em; }
.notes-list li:last-child { margin-bottom: 0; }

/* The notes heading is furniture, not an article heading. Keep it out of the
   green-and-gold heading rule above. */
.flow-text .notes-head,
.series-body .notes-head,
.strand-narrative .notes-head {
  color: var(--gold);
  font-size: .74rem;
  margin-top: 0;
}
.flow-text .notes-head::before,
.series-body .notes-head::before,
.strand-narrative .notes-head::before { display: none; }

/* ==========================================================================
   THE NOTE BAND
   A full width green band at the head of Explore. White text, a gold rule
   and a gold eyebrow, set left inside the content width.
   ========================================================================== */

.site-note {
  background: var(--green-dark);
  color: #FFFFFF;
  padding: 28px 0 30px;
}

.site-note-rule {
  display: block;
  width: 46px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: 15px;
}

.site-note-eyebrow {
  margin: 0 0 .55em;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-pale);
}

.site-note-text {
  margin: 0;
  max-width: 64ch;
  font-size: 1.02rem;
  line-height: 1.64;
  color: #FFFFFF;
}

@media (max-width: 640px) {
  .site-note { padding: 22px 0 24px; }
  .site-note-text { font-size: .95rem; line-height: 1.6; }
}

/* ==========================================================================
   THE READING STRIP
   A county's doors into the strands and series it belongs to. Sits below the
   tabs and above the bordering counties, so it shows on every tab.
   ========================================================================== */

.read-further {
  border-top: 2px solid var(--gold);
  padding: 24px 0 10px;
}

.read-further h4 {
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .8em;
}

.rf-intro {
  max-width: 62ch;
  margin: 0 0 1.1em;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
}

.rf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.rf-door {
  display: block;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 15px 18px;
  color: inherit;
  transition: border-color .16s, transform .16s;
}

.rf-door:hover {
  text-decoration: none;
  border-color: var(--gold);
  border-left-color: var(--rust);
  transform: translateY(-2px);
}

.rf-text  { display: block; }
.rf-label { display: block; font-size: 1.06rem; font-weight: 600; line-height: 1.3; color: var(--green-dark); }
.rf-note  { display: block; margin-top: .28em; font-size: .9rem; color: var(--text-dim); line-height: 1.45; }

@media (max-width: 640px) {
  .read-further { padding-top: 20px; }
  .rf-intro { font-size: .96rem; }
  .rf-list { grid-template-columns: 1fr; }
}