/* ==========================================================================
   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: 200px;
  max-width: 42%;
  margin: .2em 0 1em 26px;
}
.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;
}