/* Shankill.ie: granite neutrals, Killiney Bay ink, gorse highlight. Light theme only (daylight phone use). */
:root {
  --paper: oklch(97.4% 0.005 80);
  --paper-2: oklch(94.2% 0.007 80);
  --line: oklch(86.5% 0.008 80);
  --ink: oklch(25% 0.032 240);
  --ink-2: oklch(43% 0.022 240);
  --sea: oklch(44% 0.105 235);
  --sea-deep: oklch(34% 0.09 235);
  --bay: oklch(27% 0.035 240);
  --bay-text: oklch(95% 0.008 80);
  --bay-muted: oklch(80% 0.02 220);
  --gorse: oklch(86% 0.155 92);
  --gorse-soft: oklch(94% 0.07 95);
  --closed: oklch(48% 0.14 35);
  --focus: oklch(44% 0.105 235);

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: 1.8rem;
  --step-4: 2.4rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;

  --radius: 6px;
  --wrap: 72rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.55;
}
img, svg { max-width: 100%; }
a { color: var(--sea); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--sea-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--space-3); font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 var(--space-4); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-4); }
.section { padding-block: var(--space-6); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: var(--space-2) var(--space-4); z-index: 10; }
.skip:focus { left: var(--space-2); top: var(--space-2); }

/* Masthead */
.masthead { background: var(--bay); color: var(--bay-text); }
.masthead-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-block: var(--space-3); }
.wordmark { display: flex; align-items: baseline; gap: var(--space-2); color: inherit; text-decoration: none; }
.wordmark-name { font-size: var(--step-2); font-weight: 800; letter-spacing: -0.02em; }
.wordmark-sub { font-size: var(--step--1); color: var(--gorse); font-weight: 600; }
.masthead nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.masthead nav a { color: var(--bay-text); text-decoration: none; padding: var(--space-2) 0; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { border-bottom-color: var(--gorse); color: var(--bay-text); }

/* Hero + search */
.hero { background: var(--paper-2); border-bottom: 1px solid var(--line); padding-block: var(--space-6) var(--space-5); }
.hero h1 { max-width: 18ch; }
.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 60ch; }
.search { max-width: 40rem; margin-top: var(--space-5); }
.search input {
  width: 100%; font: inherit; font-size: var(--step-1); padding: var(--space-3) var(--space-4);
  border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper); color: var(--ink); min-height: 52px;
}
.search input:focus { outline: none; box-shadow: 0 0 0 4px var(--gorse); }
.search-hint { font-size: var(--step--1); color: var(--ink-2); margin: var(--space-2) 0 0; }
.results { max-width: 40rem; }
.results:empty { display: none; }
.results ol { list-style: none; margin: var(--space-3) 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.results li + li { border-top: 1px solid var(--line); }
.results a { display: block; padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--ink); }
.results a:hover, .results a:focus-visible { background: var(--gorse-soft); }
.results strong { display: block; color: var(--sea); }
.results span { font-size: var(--step--1); color: var(--ink-2); }
.results p { padding: var(--space-3) var(--space-4); margin: 0; color: var(--ink-2); }

/* Category index: a dense two-column list, not cards */
.cat-index { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); column-gap: var(--space-6); }
.cat-index li { border-top: 1px solid var(--line); }
.cat-index a { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-3); padding: var(--space-3) 0; text-decoration: none; color: var(--ink); min-height: 44px; }
.cat-index a:hover .cat-name { color: var(--sea); text-decoration: underline; }
.cat-name { font-weight: 600; font-size: var(--step-1); }
.cat-count { font-variant-numeric: tabular-nums; color: var(--ink-2); align-self: center; }
.cat-desc { grid-column: 1 / -1; font-size: var(--step--1); color: var(--ink-2); }

/* History band */
.band { background: var(--bay); color: var(--bay-text); padding-block: var(--space-7); }
.band a { color: var(--gorse); }
.band-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-6); }
.band-text p { max-width: 55ch; line-height: 1.65; }
.band .highlights span { color: var(--bay-muted); }
.band .highlights li { border-color: oklch(40% 0.03 240); }
.button-light, .button {
  display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-5);
  border-radius: var(--radius); font-weight: 600; text-decoration: none; transition: background-color 180ms var(--ease);
}
.band .button-light { background: var(--gorse); color: var(--ink); }
.band .button-light:hover { background: oklch(90% 0.13 92); color: var(--ink); }
.button { background: var(--sea); color: var(--paper); }
.button:hover { background: var(--sea-deep); color: var(--paper); }

.highlights { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.highlights li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.highlights a { font-weight: 600; font-size: var(--step-1); }
.highlights span { color: var(--ink-2); font-size: var(--step--1); align-self: center; }

/* Page heads, crumbs */
.crumbs { font-size: var(--step--1); color: var(--ink-2); margin-bottom: var(--space-4); }
.page-head { margin-bottom: var(--space-5); }
.page-head .lede { margin-bottom: 0; }
.note { background: var(--gorse-soft); padding: var(--space-3) var(--space-4); border-radius: var(--radius); }

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.chip {
  font: inherit; font-size: var(--step--1); min-height: 40px; padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.chip span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--gorse); border-color: var(--gorse); font-weight: 600; }

/* Listing rows */
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.row[hidden] { display: none; }
.row-main { flex: 1 1 22rem; min-width: 0; }
.row-name { font-weight: 600; font-size: var(--step-1); }
.row-meta, .row-address { display: block; font-size: var(--step--1); color: var(--ink-2); }
.row-contact { flex: 0 0 auto; align-self: center; }
.phone { font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; min-height: 44px; align-items: center; }
.badge { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 0 var(--space-2); border-radius: var(--radius); vertical-align: middle; }
.badge-closed { color: var(--closed); border: 1px solid currentColor; }

/* Place page */
.place { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-6); align-items: start; }
.description { font-size: var(--step-1); line-height: 1.6; max-width: 62ch; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-5); }
.facts dt { color: var(--ink-2); font-size: var(--step--1); padding-top: 0.15em; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.hours { border-collapse: collapse; margin-bottom: var(--space-5); }
.hours th, .hours td { text-align: left; padding: var(--space-1) var(--space-5) var(--space-1) 0; font-weight: 400; }
.hours th { color: var(--ink-2); }
.place-map { height: 22rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper-2); }
.nearby { margin-top: var(--space-6); }
.sources { margin-top: var(--space-6); font-size: var(--step--1); color: var(--ink-2); }

/* Map page */
.map-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.map-bar h1 { font-size: var(--step-2); margin: 0 var(--space-4) 0 0; }
.map-bar select { font: inherit; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--ink-2); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.map-full { height: calc(100dvh - 9rem); min-height: 24rem; border-top: 1px solid var(--line); }
.leaflet-popup-content { font-family: inherit; font-size: var(--step--1); }
.leaflet-popup-content a { font-weight: 600; font-size: var(--step-0); }

/* History / prose */
.prose { max-width: 70ch; }
.prose h2 { margin-top: var(--space-6); scroll-margin-top: var(--space-4); }
.prose h3 { margin-top: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose code { font-size: 0.9em; background: var(--paper-2); padding: 0 0.25em; border-radius: 3px; }
.history-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 60rem) {
  .history-layout { grid-template-columns: 15rem minmax(0, 1fr); }
  .toc { position: sticky; top: var(--space-4); align-self: start; max-height: calc(100vh - 2rem); overflow-y: auto; }
}
.toc h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.toc ol { list-style: none; padding: 0; margin: 0; font-size: var(--step--1); }
.toc li { padding: var(--space-1) 0; }
.table-wrap { overflow-x: auto; margin-bottom: var(--space-5); }
.prose table { border-collapse: collapse; font-size: var(--step--1); min-width: 32rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.prose th { background: var(--paper-2); }

/* Footer */
.footer { border-top: 1px solid var(--line); margin-top: var(--space-6); padding-block: var(--space-6); background: var(--paper-2); }
.footer-inner p { max-width: 65ch; }
.footer-small { font-size: var(--step--1); color: var(--ink-2); }

@media (max-width: 40rem) {
  h1 { font-size: var(--step-3); }
  .section { padding-block: var(--space-5); }
  .band { padding-block: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Home: full-screen map on desktop, with the content panel floating over Killiney Bay.
   Phones never show the map (home-map.js does not even load Leaflet there). */
.home-map { display: none; }
.map-status { background: var(--gorse-soft); padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-size: var(--step--1); }
.link-button { font: inherit; color: var(--sea); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.link-button:hover { color: var(--sea-deep); }
.cat-index a[aria-current="true"] { background: var(--gorse-soft); }
.cat-index a[aria-current="true"] .cat-name { color: var(--ink); text-decoration: none; }

@media (min-width: 64rem) {
  .home { position: relative; height: calc(100dvh - 68px); min-height: 36rem; }
  .home-map { display: block; position: absolute; inset: 0; background: var(--paper-2); }
  .home-panel {
    position: absolute; top: var(--space-5); right: var(--space-5); bottom: var(--space-5); z-index: 1000;
    width: min(27rem, 36vw); overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 16px 40px -16px oklch(25% 0.03 240 / 0.45);
  }
  .home-panel .wrap { max-width: none; padding-inline: var(--space-5); }
  .home-panel .hero { background: none; padding-block: var(--space-5) var(--space-4); }
  .home-panel h1 { font-size: var(--step-3); }
  .home-panel .lede { font-size: var(--step-0); }
  .home-panel .search { margin-top: var(--space-4); }
  .home-panel .search input { font-size: var(--step-0); min-height: 48px; }
  .home-panel .section { padding-block: var(--space-4); }
  .home-panel h2 { font-size: var(--step-1); }
  .home-panel .cat-index { grid-template-columns: 1fr; margin-top: var(--space-2); }
  .home-panel .cat-index a { padding: var(--space-2) var(--space-2); margin-inline: calc(var(--space-2) * -1); border-radius: var(--radius); min-height: 40px; }
  .home-panel .cat-name { font-size: var(--step-0); }
  .home-panel .cat-desc { display: none; }
  .home-panel .band { padding-block: var(--space-5); }
  .home-panel .band-inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .home-panel .highlights a { font-size: var(--step-0); }
  .home + .footer, main:has(.home) + .footer { margin-top: 0; }
}

/* Contact form */
.contact-form { max-width: 36rem; display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.field { display: grid; gap: var(--space-1); }
.field label { font-weight: 600; }
.optional { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--ink-2); border-radius: var(--radius);
  padding: var(--space-2) var(--space-3); min-height: 44px;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px var(--gorse); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--closed); }
.button:disabled { opacity: 0.6; cursor: progress; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-status { max-width: 36rem; padding: var(--space-3) var(--space-4); border-radius: var(--radius); }
.contact-status[data-kind="ok"] { background: var(--gorse-soft); }
.contact-status[data-kind="error"] { border: 1px solid var(--closed); color: var(--closed); }