/* ============================================================
   AN SRUTHÁN SAUNA — design system
   Fire. Water. Earth.
   ============================================================ */

:root {
  /* Earth — the dominant register of the whole site */
  --earth-950: #0A1712;
  --earth-900: #0F2018;
  --earth-850: #13291F;
  --earth-800: #17321F;
  --earth-700: #1E4032;
  --earth-600: #2B5443;

  /* Gold — decorative / editorial layer. Used sparingly. */
  --gold-300: #EFDBA4;
  --gold-400: #D9BA76;
  --gold-500: #C6A055;
  --gold-600: #A47F3A;

  /* Ember — fire accent, reserved for booking / primary conversion */
  --ember-400: #E08A4E;
  --ember-500: #C96A34;
  --ember-600: #A6532A;

  /* Water — used only as a whisper: icon strokes, small accents */
  --water-300: #AEC9C6;
  --water-500: #6F918D;

  /* Stone / parchment — rare light inlays for editorial contrast */
  --stone-100: #F3EEE2;
  --stone-300: #D9D2BF;

  --cream: #F4EFE4;
  --cream-dim: rgba(244, 239, 228, 0.74);
  --cream-faint: rgba(244, 239, 228, 0.46);
  --ink: #0A1712;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1200px;
  --container-narrow: 780px;
  --radius: 3px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--earth-950);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; color: var(--cream); }
p { max-width: 62ch; }
:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }

.section-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}
.section-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Typography helpers ---------- */
/* Hierarchy, largest to smallest: h1 (hero only) > h2 (primary section heading)
   > .subhead (supporting line) > h3 (component/card title) > body > .eyebrow (label) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 10px;
}
.eyebrow.ember { color: var(--ember-400); }
.center { text-align: center; }
h2 { font-size: clamp(2.1rem, 4.3vw, 3.15rem); letter-spacing: -0.004em; }
h3 { font-size: clamp(1.22rem, 2vw, 1.5rem); }
/* Supporting line directly beneath a primary heading — clearly subordinate to h2,
   clearly senior to body copy */
.subhead {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-300);
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  line-height: 1.4;
  margin: 10px 0 4px;
}
.section-lede {
  max-width: 620px;
  margin: 20px auto 0;
  color: var(--cream-dim);
  font-size: 1.05rem;
  line-height: 1.7;
}
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all 0.35s var(--ease);
  white-space: nowrap;
  min-height: 48px;
}
.btn-ember {
  background: linear-gradient(160deg, var(--ember-400), var(--ember-600));
  color: #1A0D06;
  font-weight: 500;
  box-shadow: 0 8px 24px -8px rgba(201, 106, 52, 0.55);
}
.btn-ember:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn-ghost {
  border-color: rgba(244, 239, 228, 0.35);
  color: var(--cream);
}
.btn-ghost:hover { border-color: var(--gold-400); color: var(--gold-300); }
.btn-outline {
  border-color: var(--gold-500);
  color: var(--gold-300);
}
.btn-outline:hover { background: var(--gold-500); color: var(--ink); }
.btn-block { width: 100%; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 20px 0;
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled,
.site-header.solid {
  background: rgba(10, 23, 18, 0.94);
  backdrop-filter: blur(10px);
  padding: 12px 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(198,160,85,0.14);
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(198,160,85,0.4); flex-shrink: 0; }
.brand-word { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-display); font-size: 1.2rem; color: var(--cream); letter-spacing: 0.01em; }
.brand-sub { font-size: 0.58rem; letter-spacing: 0.38em; color: var(--gold-400); margin-top: 3px; }

.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a:not(.nav-cta) {
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cream-dim);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s;
}
.main-nav a.is-active:not(.nav-cta) { color: var(--cream); }
.main-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold-400);
  transition: width 0.3s var(--ease);
}
.main-nav a:not(.nav-cta):hover { color: var(--cream); }
.main-nav a:not(.nav-cta):hover::after,
.main-nav a.is-active:not(.nav-cta)::after { width: 100%; }
.nav-cta {
  border: 1px solid var(--ember-500);
  padding: 9px 20px;
  border-radius: var(--radius);
  color: var(--ember-400) !important;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav-cta:hover { background: var(--ember-500); color: #1A0D06 !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 30px;
  z-index: 600;
}
.nav-toggle span { height: 1px; background: var(--cream); width: 100%; transition: all 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   STICKY MOBILE BOOKING BAR
   ============================================================ */


/* ============================================================
   HERO (with video)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--earth-950); }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,18,14,0.6) 0%, rgba(8,18,14,0.32) 38%, rgba(8,18,14,0.58) 70%, rgba(8,18,14,0.97) 100%),
    linear-gradient(90deg, rgba(8,18,14,0.45) 0%, transparent 30%, transparent 70%, rgba(8,18,14,0.45) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hero-emblem { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 20px; opacity: 0.95; box-shadow: 0 0 40px rgba(198,160,85,0.2); }
.hero-content .eyebrow { color: var(--gold-300); }
.hero h1 {
  font-size: clamp(2.4rem, 7.5vw, 4.6rem);
  color: var(--cream);
  letter-spacing: 0.02em;
}
.hero-tagline { margin-top: 22px; font-size: clamp(1rem, 2vw, 1.18rem); color: var(--cream-dim); max-width: 560px; font-weight: 300; }
.hero-tagline em { color: var(--gold-300); font-style: italic; }
.hero-actions { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.scroll-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 36px; border: 1px solid rgba(244,239,228,0.5); border-radius: 20px; z-index: 2;
}
.scroll-cue span {
  position: absolute; top: 7px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  background: var(--gold-400); border-radius: 50%; animation: scrollDot 1.8s infinite;
}
@keyframes scrollDot {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 0; }
}

/* Page header (non-home hero, shorter, still image) */
.page-hero {
  position: relative;
  min-height: 62svh;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  padding-top: 120px;
}
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,18,14,0.5) 0%, rgba(8,18,14,0.35) 45%, rgba(8,18,14,0.97) 100%);
}
.page-hero-content { position: relative; z-index: 1; text-align: center; padding: 0 24px 56px; max-width: 760px; }
.page-hero-content h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.page-hero-content .section-lede { margin-top: 14px; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
/* Content first, animation second. Elements are visible by default; the
   hidden start state applies only when JavaScript is running, and the flag
   is set in <head> so there is never a flash of visible-then-hidden. If the
   script fails or is slow, the copy simply stays readable. */
.reveal { opacity: 1; transform: none; }
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); will-change: auto; }

/* Mobile: a shorter, quicker movement. The long 26px/0.9s travel is what
   read as laggy pop-in on a phone, where sections are tall relative to the
   viewport and compositing budget is smaller. */
@media (max-width: 760px) {
  .js-reveal .reveal { transform: translateY(10px); transition-duration: 0.45s; }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   GENERIC SECTION LAYOUTS
   ============================================================ */
.section { padding: 108px 0; }
.section-tight { padding: 72px 0; }
.section-alt { background: var(--earth-900); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media img, .split-media video { border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); width: 100%; object-fit: cover; }
.split-media.ratio-4-5 img, .split-media.ratio-4-5 video { aspect-ratio: 4/5; }
.split-media.ratio-3-2 img, .split-media.ratio-3-2 video { aspect-ratio: 3/2; }
.split-media.ratio-1-1 img { aspect-ratio: 1/1; }
.split-copy h2 { margin-bottom: 20px; }
.split-copy p { color: var(--cream-dim); margin-bottom: 15px; max-width: 48ch; }
.split-copy strong { color: var(--gold-300); font-weight: 500; }
.split-copy .btn { margin-top: 10px; }

/* Elements triad (Fire/Water/Earth) */
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(198,160,85,0.14); border: 1px solid rgba(198,160,85,0.14); margin-top: 56px; }
.triad-card { background: var(--earth-900); padding: 46px 32px; text-align: center; }
.triad-icon { width: 38px; height: 38px; margin: 0 auto 20px; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.triad-card.fire .triad-icon { stroke: var(--ember-400); }
.triad-card.water .triad-icon { stroke: var(--water-300); }
.triad-card.earth .triad-icon { stroke: var(--gold-400); }
.triad-card h3 { margin-bottom: 10px; }
.triad-card p { color: var(--cream-dim); font-size: 0.94rem; margin: 0 auto; }

/* Duo grid — Sauna + Plunge shown side by side (Home) */
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 40px); margin-top: 50px; }
.duo-item { text-align: center; }
.duo-item .split-media { margin-bottom: 22px; }
.duo-item h3 { margin-bottom: 6px; }
.duo-item p { color: var(--cream-dim); font-size: 0.9rem; }

/* Small inline symbol row (Home Dúchas teaser) */
.mini-symbols { display: flex; justify-content: center; gap: clamp(22px, 5vw, 56px); flex-wrap: wrap; margin: 40px 0 6px; }
.mini-symbol { display: block; text-align: center; width: 96px; }
.mini-symbol img { width: 88px; height: 88px; object-fit: contain; margin-bottom: 10px; border-radius: var(--radius); opacity: 0.92; transition: opacity 0.35s var(--ease), filter 0.35s var(--ease), transform 0.5s var(--ease); }
.mini-symbol span { display: block; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); transition: color 0.3s; }
.mini-symbol:hover img { opacity: 1; filter: drop-shadow(0 0 10px rgba(198,160,85,0.28)); transform: scale(1.06); }
.mini-symbol:hover span { color: var(--gold-300); }

/* Understated editorial text-link CTA (secondary actions site-wide on Home) */
.text-link {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-400);
  transition: color 0.3s;
}
.text-link:hover { color: var(--gold-300); }

/* Localized translucent readability panel for text-over-image banners */
.banner-copy-panel {
  background: rgba(10, 23, 18, 0.6);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(198,160,85,0.16);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 34px);
}

/* Follow the Stream: horizontal photo carousel */
.stream-gallery { position: relative; margin-top: 44px; display: flex; align-items: center; gap: 14px; }
.stream-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 4px 2px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(198,160,85,0.35) transparent;
}
.stream-track::-webkit-scrollbar { height: 6px; }
.stream-track::-webkit-scrollbar-thumb { background: rgba(198,160,85,0.3); border-radius: 6px; }
.stream-item { flex: 0 0 auto; height: 380px; scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; display: block; }
.stream-item img { height: 100%; width: auto; display: block; object-fit: cover; transition: transform 0.6s var(--ease), filter 0.6s var(--ease); filter: saturate(0.96); }
.stream-item:hover img { transform: scale(1.035); filter: saturate(1.05) brightness(1.03); }
.stream-arrow {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border: 1px solid rgba(198,160,85,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: var(--gold-400);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.stream-arrow:hover { border-color: var(--gold-400); color: var(--gold-300); background: rgba(198,160,85,0.08); }

/* Full-bleed feature banner */
.banner { position: relative; min-height: 460px; display: flex; align-items: center; }
.banner img, .banner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,18,14,0.94) 0%, rgba(8,18,14,0.72) 42%, rgba(8,18,14,0.2) 78%, transparent 100%); }
.banner.reverse::before { background: linear-gradient(270deg, rgba(8,18,14,0.94) 0%, rgba(8,18,14,0.72) 42%, rgba(8,18,14,0.2) 78%, transparent 100%); }
.banner-copy { position: relative; z-index: 1; max-width: 480px; padding: 48px clamp(24px, 6vw, 90px); }
.banner.reverse .banner-copy { margin-left: auto; }
.banner-copy h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 14px; }
.banner-copy p { color: var(--cream-dim); max-width: 42ch; }

/* Card grids (craftsmanship details, etc.) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; margin-top: 48px; }
.detail-card {
  background: var(--earth-900);
  border: 1px solid rgba(198,160,85,0.12);
  border-radius: var(--radius);
  padding: 30px 26px;
}
.detail-card h4 { font-size: 1.1rem; color: var(--gold-300); margin-bottom: 10px; font-family: var(--font-display); font-weight: 500; }
.detail-card p { color: var(--cream-dim); font-size: 0.92rem; }

/* Numbered step list (the ritual: heat/cold/rest/repeat) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(198,160,85,0.14); border: 1px solid rgba(198,160,85,0.14); margin-top: 52px; }
.step-card { background: var(--earth-900); padding: 40px 28px; position: relative; }
.step-index { font-family: var(--font-display); font-size: 0.8rem; color: rgba(244,239,228,0.28); position: absolute; top: 36px; right: 28px; }
.step-card h3 { margin-bottom: 10px; font-size: 1.3rem; }
.step-card p { color: var(--cream-dim); font-size: 0.92rem; }

/* Quote / pull-statement */
.pull-quote {
  text-align: center; max-width: 760px; margin: 0 auto;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2rem); color: var(--gold-300); line-height: 1.5;
}

/* ============================================================
   DÚCHAS CARDS
   ============================================================ */
.duchas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; }
.duchas-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 340px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  cursor: pointer;
  padding: 34px 22px 30px;
  border: 1px solid rgba(198,160,85,0.16);
  background:
    radial-gradient(ellipse at 50% 34%, rgba(198,160,85,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 40%, var(--earth-850) 0%, var(--earth-950) 78%);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.duchas-card:hover { border-color: rgba(198,160,85,0.4); }
button.duchas-card { width: 100%; font: inherit; }
.duchas-card[aria-expanded="true"] {
  border-color: var(--gold-500);
  background:
    radial-gradient(ellipse at 50% 34%, rgba(198,160,85,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 40%, var(--earth-850) 0%, var(--earth-950) 78%);
}
.duchas-card[aria-expanded="true"] .duchas-symbol svg {
  opacity: 1; stroke: var(--gold-300);
  filter: drop-shadow(0 0 14px rgba(198,160,85,0.3));
}
.duchas-symbol { width: 108px; height: 108px; margin-bottom: 18px; flex-shrink: 0; }
.duchas-symbol svg {
  width: 100%; height: 100%;
  fill: none; stroke: var(--gold-500);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.85;
  transition: opacity 0.4s var(--ease), filter 0.4s var(--ease), transform 0.6s var(--ease);
}
.duchas-card:hover .duchas-symbol svg {
  opacity: 1;
  stroke: var(--gold-300);
  filter: drop-shadow(0 0 14px rgba(198,160,85,0.3));
  transform: scale(1.04);
}
.duchas-card-copy { position: relative; z-index: 1; }
.duchas-card-copy .eyebrow { margin-bottom: 8px; }
.duchas-card-copy h3 { font-size: 1.3rem; margin-bottom: 6px; }
.duchas-card-copy p { color: var(--cream-dim); font-size: 0.86rem; max-width: 40ch; margin: 0 auto; letter-spacing: 0.04em; text-transform: uppercase; }
.duchas-card-cta { display: block; margin-top: 16px; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); }
.duchas-card-cta-close { display: none; }
.duchas-card[aria-expanded="true"] .duchas-card-cta-open { display: none; }
.duchas-card[aria-expanded="true"] .duchas-card-cta-close { display: block; color: var(--gold-300); }

#duchas-stories { margin-top: 8px; }
.duchas-detail {
  border-top: 1px solid rgba(198,160,85,0.16);
}
.duchas-detail-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.duchas-detail-media img { border-radius: var(--radius); aspect-ratio: 4/5; object-fit: cover; position: sticky; top: 110px; }
.duchas-detail-copy h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 4px; }
.duchas-detail-copy .irish { font-family: var(--font-display); font-style: italic; color: var(--gold-400); font-size: 1.1rem; margin-bottom: 22px; display: block; }
.duchas-block { margin-bottom: 26px; }
.duchas-block h4 { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 10px; }
.duchas-block p { color: var(--cream-dim); margin-bottom: 10px; }
.duchas-line { font-family: var(--font-display); font-style: italic; color: var(--gold-300); font-size: 1.2rem; margin-top: 8px; }

/* Click-to-open story panels: collapsed by default, expand under the selected card */
.duchas-story-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
  transition: max-height 0.7s var(--ease), opacity 0.5s var(--ease), padding 0.7s var(--ease), border-color 0.7s var(--ease);
}
.duchas-story-panel.is-open {
  max-height: 3200px;
  opacity: 1;
  padding-top: 64px;
  padding-bottom: 64px;
  border-top-color: rgba(198,160,85,0.16);
}
.duchas-story-close {
  margin-top: 30px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.duchas-story-close:hover { color: var(--gold-300); }

/* ============================================================
   ACCORDION (FAQ, mobile Dúchas, craftsmanship)
   ============================================================ */
.accordion-group { margin-top: 40px; }
.accordion-group + .accordion-group { margin-top: 52px; }
.accordion-heading {
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-400);
  margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid rgba(198,160,85,0.18);
}
.accordion-item { border-bottom: 1px solid rgba(244,239,228,0.1); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 2px; text-align: left; font-size: 1rem; color: var(--cream); font-family: var(--font-body);
  min-height: 48px;
}
.accordion-trigger:hover { color: var(--gold-300); }
.accordion-plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.accordion-plus::before, .accordion-plus::after {
  content: ""; position: absolute; background: var(--gold-400); transition: transform 0.3s var(--ease);
}
.accordion-plus::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.accordion-plus::after { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.accordion-item[aria-expanded="true"] .accordion-plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.accordion-panel-inner { padding: 0 2px 22px; color: var(--cream-dim); font-size: 0.95rem; max-width: 62ch; }
.accordion-panel-inner p + p { margin-top: 10px; }

/* ============================================================
   INFO / POLICY STRIP
   ============================================================ */
.info-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: rgba(198,160,85,0.14); border: 1px solid rgba(198,160,85,0.14); margin-top: 48px; }
.info-strip-item { background: var(--earth-900); padding: 26px 24px; }
.info-strip-item h4 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 8px; }
.info-strip-item p { color: var(--cream-dim); font-size: 0.9rem; }

/* ============================================================
   GALLERY / "FROM THE STREAM"
   ============================================================ */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 44px; }
.gallery-item { overflow: hidden; border-radius: var(--radius); aspect-ratio: 1/1; position: relative; }
.gallery-item:nth-child(3n+1) { aspect-ratio: 1/1.25; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); filter: saturate(0.95); }
.gallery-item:hover img { transform: scale(1.07); filter: saturate(1.08) brightness(1.04); }

/* ============================================================
   MAP / GETTING HERE
   ============================================================ */
.getting-here-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.address-block { font-family: var(--font-display); font-size: 1.3rem; color: var(--cream); margin: 18px 0 26px; line-height: 1.5; }
.route-note { background: var(--earth-900); border: 1px solid rgba(198,160,85,0.14); border-radius: var(--radius); padding: 22px 24px; margin-top: 20px; }
.route-note h4 { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-400); margin-bottom: 8px; }
.route-note p { color: var(--cream-dim); font-size: 0.9rem; }

/* ============================================================
   GIFT VOUCHER (placeholder link, disabled until configured)
   ============================================================ */
a[data-gift-voucher-link].is-placeholder,
a[data-footer-gift-voucher-link].is-placeholder {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ============================================================
   EMAIL SIGNUP FORM
   ============================================================ */
.signup-form { max-width: 480px; margin: 34px auto 0; }
.signup-row { display: flex; gap: 12px; flex-wrap: wrap; }
.signup-input {
  flex: 1 1 200px;
  min-width: 0;
  background: var(--earth-900);
  border: 1px solid rgba(198,160,85,0.22);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.signup-input::placeholder { color: var(--cream-faint); }
.signup-input:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.signup-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  margin: 18px 0 24px;
  font-size: 0.82rem;
  color: var(--cream-dim);
  cursor: pointer;
}
.signup-consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--gold-500); }
.signup-status { margin-top: 16px; font-size: 0.88rem; color: var(--gold-300); min-height: 1.4em; }
.signup-status.is-error { color: var(--ember-400); }
.signup-form.is-done .signup-row,
.signup-form.is-done .signup-consent,
.signup-form.is-done button[type="submit"] { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--earth-950); border-top: 1px solid rgba(198,160,85,0.12); padding: 56px 0 0; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; padding-bottom: 40px; }
.footer-col h5 { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 16px; }
.footer-nav { display: flex; flex-direction: column; gap: 12px; }
.footer-nav a { font-size: 0.88rem; color: var(--cream-dim); }
.footer-nav a:hover { color: var(--gold-400); }
.footer-address { color: var(--cream-dim); font-size: 0.88rem; line-height: 1.7; }
.footer-bottom { border-top: 1px solid rgba(244,239,228,0.08); padding: 20px clamp(20px, 5vw, 48px); text-align: center; margin-top: 8px; }
.footer-bottom p { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--cream-faint); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .split, .getting-here-grid { grid-template-columns: 1fr; }
  .split-media { order: -1; }
  .split.reverse .split-media { order: -1; }
  .triad { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .duchas-grid { grid-template-columns: repeat(2, 1fr); }
  .duchas-detail-grid { grid-template-columns: 1fr; }
  .duchas-detail-media img { position: static; aspect-ratio: 16/10; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .stream-item { height: 300px; }
}

@media (max-width: 760px) {

  .main-nav {
    position: fixed; top: 0; right: 0; height: 100svh; width: min(80vw, 340px);
    background: rgba(8,18,14,0.98); backdrop-filter: blur(12px);
    flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px;
    padding: 40px; transform: translateX(100%); transition: transform 0.45s var(--ease);
    border-left: 1px solid rgba(198,160,85,0.15);
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav a:not(.nav-cta) { font-size: 1.05rem; }
  .main-nav .nav-cta { margin-top: 10px; }
  .nav-toggle { display: flex; }

  .steps { grid-template-columns: 1fr; }
  .duchas-grid { grid-template-columns: 1fr; }
  .duo-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item, .gallery-item:nth-child(3n+1) { aspect-ratio: 1/1; }
  .info-strip { grid-template-columns: 1fr; }

  .footer-inner { flex-direction: column; }

  .stream-item { height: 230px; }
  .stream-arrow { width: 38px; height: 38px; font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue span { animation: none; }
}

/* ============================================================
   EXPERIENCE PAGE — scoped refinements
   Scoped to .page-experience so Home, Our Story, Dúchas, Visit
   and FAQ are untouched.
   ============================================================ */

/* Hero eyebrow was losing legibility against the lit plunge photo */
.page-experience .page-hero-content .eyebrow {
  color: var(--gold-300);
  font-size: 0.72rem;
}
.page-experience .page-hero-content .eyebrow,
.page-experience .page-hero-content h1,
.page-experience .page-hero-content .section-lede {
  text-shadow: 0 2px 18px rgba(6, 14, 11, 0.75);
}

/* HUUM banner: the copy here is long, so it needs a wider, calmer
   measure and real spacing between paragraphs */
.page-experience .banner { min-height: 560px; }
/* No brightness damping and no page-specific scrim: the shared banner
   gradient plus the panel carry readability, so the fire stays legible as
   an image. The copy column is a little wider than the homepage's because
   this section carries four paragraphs rather than two. */
.page-experience .banner-copy {
  max-width: 640px;
  padding-right: clamp(24px, 3vw, 48px);
}
/* The fire media is already dark, so this panel needs no diffusion behind
   the text. Removing the blur keeps the stove clearly identifiable and drops
   an expensive compositing layer on mobile. */
.page-experience .banner-copy-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(10, 23, 18, 0.68);
}
.page-experience .banner-copy p { max-width: 54ch; }
.page-experience .banner-copy p + p { margin-top: 15px; }

/* Between Rounds: paragraphs were running together inside the strip */
.page-experience .info-strip-item p + p { margin-top: 12px; }

/* Details Behind the Heat: keep the fire loop alongside the three
   cards instead of stranding it in the middle of an empty column */
@media (min-width: 861px) {
  .page-experience .details-split { align-items: start; }
  .page-experience .details-media {
    position: sticky;
    top: 104px;
    max-width: 380px;
    margin: 0 auto;
  }
}

/* Details copy column: restore left alignment (the shared .section-lede
   auto margins were centring it against the eyebrow above) and give the
   three cards consistent rhythm */
.page-experience .details-copy { display: flex; flex-direction: column; gap: 22px; }
.page-experience .details-copy .eyebrow { margin-bottom: 0; }
.page-experience .details-copy .section-lede { margin: 0; max-width: 52ch; }
.page-experience .details-media video {
  aspect-ratio: 9/16;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}

/* Hero scrim: hold the canopy bright at the top but darken behind the
   headline block, which was sitting directly on the string lights */
.page-experience .page-hero-scrim {
  background:
    radial-gradient(ellipse 72% 34% at 50% 74%, rgba(8,18,14,0.72) 0%, rgba(8,18,14,0.34) 55%, rgba(8,18,14,0) 78%),
    linear-gradient(180deg,
      rgba(8,18,14,0.46) 0%,
      rgba(8,18,14,0.30) 34%,
      rgba(8,18,14,0.66) 60%,
      rgba(8,18,14,0.90) 82%,
      rgba(8,18,14,0.99) 100%);
}

/* On narrow screens the banner copy spans the full width, so the
   horizontal scrim no longer protects it. Wash the whole image instead:
   the fire still glows through, but the text stays readable. */
@media (max-width: 860px) {
  .page-experience .banner::before {
    background: linear-gradient(180deg,
      rgba(8,18,14,0.34) 0%,
      rgba(8,18,14,0.26) 50%,
      rgba(8,18,14,0.40) 100%);
  }
  .page-experience .banner-copy { padding-top: 44px; padding-bottom: 48px; }
}

/* Centred narrow sections: p is capped at 62ch, so without auto side
   margins the box hugs the left edge and its centred text reads as
   off-centre against the headings above it */
.page-experience .section-narrow.center > p { margin-left: auto; margin-right: auto; }

/* ============================================================
   OUR STORY PAGE — scoped refinements
   Scoped to .page-story so Home, Experience, Dúchas, Visit and
   FAQ are untouched.
   ============================================================ */

/* Same centring fix as the Experience page: p is capped at 62ch, so
   without auto side margins a centred block hugs the left edge */
.page-story .section-narrow.center > p { margin-left: auto; margin-right: auto; }

/* The brand mark sits directly on the page, not in a photo frame:
   no rounded corners, no drop shadow, no rectangular boundary */
.page-story .story-mark img {
  border-radius: 0;
  box-shadow: none;
  background: none;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  object-fit: contain;
}

/* "Hazel. Iron. Jute." reads as a cadence line, not body copy */
.page-story .craft-triad {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--gold-300);
  letter-spacing: 0.01em;
  margin: 6px 0 18px;
}

/* The closing statement is given room to breathe */
.page-story .story-ending { padding-top: 40px; padding-bottom: 130px; }

/* A subhead following body copy needs a little more separation than one
   sitting directly beneath a heading */
.page-story .split-copy p + .subhead { margin-top: 18px; }

/* ============================================================
   DÚCHAS PAGE — scoped refinements
   Scoped to .page-duchas so no other page is affected.
   ============================================================ */

/* Supplied stencil artwork replaces the inline SVG symbols. Square,
   contained, so no artwork is stretched whatever its source ratio. */
.page-duchas .duchas-symbol img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.4s var(--ease), filter 0.4s var(--ease), transform 0.6s var(--ease);
}
.page-duchas .duchas-card:hover .duchas-symbol img {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(198,160,85,0.3));
  transform: scale(1.04);
}
.page-duchas .duchas-card[aria-expanded="true"] .duchas-symbol img {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(198,160,85,0.3));
}

/* The header is position:fixed, so a scrolled-to story would otherwise
   sit underneath it. scroll-margin-top keeps the heading clear. */
.page-duchas .duchas-story-panel,
.page-duchas .duchas-grid { scroll-margin-top: 84px; }

/* Lets a story be opened without animation when arriving via a direct
   hash, so its final position can be measured immediately. */
.page-duchas .duchas-story-panel.no-transition { transition: none; }

/* The closing statement reads as the conclusion of the four stories */
.page-duchas .section-narrow.center > p { margin-left: auto; margin-right: auto; }
.page-duchas .duchas-closing { padding-top: 96px; padding-bottom: 120px; }
.page-duchas .duchas-closing .section-lede { margin-top: 18px; }

/* ---- Dúchas: stencil emblem beside each expanded story ------------------
   Replaces the photographs. Treated as carved artwork with real scale and
   negative space, not an icon dropped into a photo frame. */
.page-duchas .duchas-emblem {
  position: sticky;
  top: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  padding: clamp(20px, 4vw, 46px);
  border-radius: var(--radius);
  border: 1px solid rgba(198,160,85,0.14);
  background:
    radial-gradient(ellipse at 50% 44%, rgba(198,160,85,0.07) 0%, transparent 62%),
    radial-gradient(ellipse at 50% 46%, var(--earth-850) 0%, var(--earth-950) 80%);
}
.page-duchas .duchas-emblem img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
  aspect-ratio: auto;
  position: static;
  filter: drop-shadow(0 0 26px rgba(198,160,85,0.14));
}

/* ---- Dúchas: stronger presence for the four selection cards ------------
   Restrained: deeper tonal separation, a hairline gold edge, quiet depth
   and a small lift on hover. No gloss, no heavy borders. */
.page-duchas .duchas-grid { gap: 24px; }
.page-duchas .duchas-card {
  min-height: 380px;
  padding: 44px 24px 34px;
  border-color: rgba(198,160,85,0.22);
  background:
    radial-gradient(ellipse at 50% 32%, rgba(198,160,85,0.09) 0%, transparent 62%),
    linear-gradient(180deg, var(--earth-850) 0%, var(--earth-950) 82%);
  box-shadow: 0 18px 40px -26px rgba(0,0,0,0.75);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease),
              box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.page-duchas .duchas-card:hover,
.page-duchas .duchas-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(198,160,85,0.5);
  box-shadow: 0 30px 56px -26px rgba(0,0,0,0.85);
}
.page-duchas .duchas-card[aria-expanded="true"] {
  transform: translateY(-2px);
  box-shadow: 0 26px 50px -26px rgba(0,0,0,0.8);
}
/* more air around the stencil, and a clearer Irish name -> English title step */
.page-duchas .duchas-symbol { width: 124px; height: 124px; margin-bottom: 26px; }
.page-duchas .duchas-card-copy .eyebrow { margin-bottom: 10px; opacity: 0.9; }
.page-duchas .duchas-card-copy h3 { font-size: 1.45rem; }
/* a quiet, deliberate affordance that the card opens something */
.page-duchas .duchas-card-cta {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(198,160,85,0.16);
  display: inline-block;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.page-duchas .duchas-card:hover .duchas-card-cta {
  color: var(--gold-300);
  border-top-color: rgba(198,160,85,0.4);
}

/* Declared after the .duchas-card-cta rule above: equal specificity, so
   source order decides which of the two labels is shown. */
.page-duchas .duchas-card-cta-close { display: none; }
.page-duchas .duchas-card[aria-expanded="true"] .duchas-card-cta-open { display: none; }
.page-duchas .duchas-card[aria-expanded="true"] .duchas-card-cta-close { display: inline-block; color: var(--gold-300); }

/* Stacked layouts: the emblem sits above the text, so a tall portrait
   frame would push the story heading below the fold on landing. Keep it
   present but compact so title, Irish title and opening copy are all
   visible as soon as a story opens. */
@media (max-width: 980px) {
  .page-duchas .duchas-emblem {
    position: static;
    aspect-ratio: 16 / 7;
    max-height: 300px;
    padding: clamp(16px, 3vw, 26px);
  }
}

/* ============================================================
   VISIT PAGE — scoped refinements
   Scoped to .page-visit so no other page is affected.
   ============================================================ */

/* Getting Here: address and arrival guidance read as one section,
   separated by a hairline rather than split into two cards */
.page-visit .visit-arrive {
  display: grid;
  grid-template-columns: minmax(200px, 0.62fr) 1.38fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  margin-top: 28px;
}
.page-visit .visit-address {
  font-style: normal;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.85;
  color: var(--cream);
  padding-right: clamp(20px, 3vw, 40px);
  border-right: 1px solid rgba(198,160,85,0.18);
}
.page-visit .visit-arrive-copy p { max-width: 54ch; }

/* The gate is line artwork, not a photograph: no frame, no crop */
.page-visit .visit-gate-media img {
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  padding: clamp(8px, 2vw, 24px) 0;
}

/* Centred narrow blocks: p is capped at 62ch, so without auto side
   margins the box hugs the left edge (same fix as the other pages) */
.page-visit .section-narrow.center > p { margin-left: auto; margin-right: auto; }

/* Inline phone link inside body copy */
.page-visit .text-link-inline { color: var(--gold-400); border-bottom: 1px solid rgba(198,160,85,0.35); }
.page-visit .text-link-inline:hover { color: var(--gold-300); }

/* Practical strips: paragraphs need spacing, and the closing gets room */
.page-visit .info-strip-item p + p { margin-top: 12px; }
.page-visit .visit-contact { padding-top: 96px; padding-bottom: 120px; }

@media (max-width: 760px) {
  .page-visit .visit-arrive { grid-template-columns: 1fr; }
  .page-visit .visit-address {
    border-right: 0;
    border-bottom: 1px solid rgba(198,160,85,0.18);
    padding-right: 0;
    padding-bottom: 22px;
  }
}

/* Hero eyebrow was losing legibility against the bright path photograph */
.page-visit .page-hero-content .eyebrow { color: var(--gold-300); font-size: 0.72rem; }
.page-visit .page-hero-content .eyebrow,
.page-visit .page-hero-content h1,
.page-visit .page-hero-content .section-lede {
  text-shadow: 0 2px 18px rgba(6, 14, 11, 0.7);
}
.page-visit .page-hero-scrim {
  background:
    radial-gradient(ellipse 72% 34% at 50% 74%, rgba(8,18,14,0.66) 0%, rgba(8,18,14,0.3) 55%, rgba(8,18,14,0) 78%),
    linear-gradient(180deg, rgba(8,18,14,0.46) 0%, rgba(8,18,14,0.32) 34%, rgba(8,18,14,0.68) 60%, rgba(8,18,14,0.9) 82%, rgba(8,18,14,0.99) 100%);
}

/* ============================================================
   FAQ PAGE — scoped refinements
   ============================================================ */
.page-faq .section-narrow.center > p { margin-left: auto; margin-right: auto; }
.page-faq .page-hero-content .eyebrow { color: var(--gold-300); font-size: 0.72rem; }
.page-faq .page-hero-content .eyebrow,
.page-faq .page-hero-content h1,
.page-faq .page-hero-content .section-lede { text-shadow: 0 2px 18px rgba(6,14,11,0.72); }
.page-faq .page-hero-scrim {
  background:
    radial-gradient(ellipse 74% 36% at 50% 62%, rgba(8,18,14,0.7) 0%, rgba(8,18,14,0.32) 55%, rgba(8,18,14,0) 78%),
    linear-gradient(180deg, rgba(8,18,14,0.5) 0%, rgba(8,18,14,0.36) 40%, rgba(8,18,14,0.82) 78%, rgba(8,18,14,0.99) 100%);
}

/* ============================================================
   HOMEPAGE — scoped refinements
   ============================================================ */

/* Centred blocks: p is capped at 62ch, so without auto side margins the
   box hugs the left edge and its centred content (the Explore Dúchas and
   Gift Voucher CTAs) reads as off-centre against the headings above. */
.page-home .section-narrow.center > p,
.page-home .section-inner > p.center { margin-left: auto; margin-right: auto; }

/* Dúchas choices: a real card each, so all four respond identically.
   The previous hover relied on drop-shadow over the artwork, which only
   showed up on the one asset that had an opaque background. */
.page-home .mini-symbols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  max-width: 860px;
  margin: 44px auto 6px;
}
.page-home .mini-symbol {
  width: auto;
  padding: 26px 16px 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(198,160,85,0.16);
  background:
    radial-gradient(ellipse at 50% 34%, rgba(198,160,85,0.06) 0%, transparent 62%),
    linear-gradient(180deg, var(--earth-850) 0%, var(--earth-950) 84%);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease),
              transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.page-home .mini-symbol img {
  width: 118px;
  height: 118px;
  margin: 0 auto 14px;
  opacity: 0.9;
  border-radius: 0;
  transition: opacity 0.4s var(--ease), filter 0.4s var(--ease), transform 0.5s var(--ease);
}
.page-home .mini-symbol span { font-size: 0.68rem; }

/* One shared hover/focus treatment for all four */
.page-home .mini-symbol:hover,
.page-home .mini-symbol:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(198,160,85,0.46);
  box-shadow: 0 26px 48px -28px rgba(0,0,0,0.8);
}
.page-home .mini-symbol:hover img,
.page-home .mini-symbol:focus-visible img {
  opacity: 1;
  filter: brightness(1.16) saturate(1.04);
  transform: scale(1.05);
}
.page-home .mini-symbol:hover span,
.page-home .mini-symbol:focus-visible span { color: var(--gold-300); }
.page-home .mini-symbol:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }

@media (max-width: 760px) {
  .page-home .mini-symbols { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
  .page-home .mini-symbol img { width: 104px; height: 104px; }
}

/* Poster stands in behind the element so the page background can never
   show through while a clip buffers */
.page-home .split-media video { background-color: var(--earth-950); }

/* Footer: directions link beneath the address */
.footer-directions {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--gold-400);
  border-bottom: 1px solid rgba(198,160,85,0.35);
  padding-bottom: 2px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.footer-directions:hover { color: var(--gold-300); border-bottom-color: rgba(198,160,85,0.7); }

/* Dúchas page: give the stencils more presence inside their cards */
.page-duchas .duchas-symbol { width: 160px; height: 160px; margin-bottom: 22px; }
@media (max-width: 980px) { .page-duchas .duchas-symbol { width: 148px; height: 148px; } }
@media (max-width: 760px) { .page-duchas .duchas-symbol { width: 156px; height: 156px; } }

/* ============================================================
   DÚCHAS CARDS — subtle refinement
   ============================================================ */

/* Optically balanced stencils. The symbol box stays one uniform size on all
   four cards so the Irish name, concept and divider keep a shared baseline;
   only the artwork inside it is scaled, by visual weight rather than to equal
   width or height. Against the previous 160px: salmon and tree +9%, swans
   +10%, and the ogham stone, which already reads tall, only +2%. */
.page-duchas .duchas-symbol { width: 178px; height: 178px; margin-bottom: 22px; }
.page-duchas .duchas-card[data-story="salmon"] .duchas-symbol img,
.page-duchas .duchas-card[data-story="fairy-tree"] .duchas-symbol img { width: 98%; height: 98%; }
.page-duchas .duchas-card[data-story="children-of-lir"] .duchas-symbol img { width: 99%; height: 99%; }
.page-duchas .duchas-card[data-story="ogham"] .duchas-symbol img { width: 92%; height: 92%; }
.page-duchas .duchas-symbol img { margin: 0 auto; }

@media (max-width: 980px) {
  .page-duchas .duchas-symbol { width: 164px; height: 164px; }
}

/* Surface: four overlapping, very wide tonal washes at slightly different
   angles and centres. Nothing repeats and nothing depicts a material, so the
   green simply stops reading as one flat fill and starts to look like pigment
   that settled unevenly. Roughly 5% strength, all CSS, no image, no filter. */
.page-duchas .duchas-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(115% 85% at 18% 12%, rgba(222,238,226,0.055) 0%, rgba(222,238,226,0) 55%),
    radial-gradient(95% 120% at 88% 30%, rgba(198,160,85,0.030) 0%, rgba(198,160,85,0) 52%),
    radial-gradient(140% 110% at 72% 96%, rgba(0,0,0,0.075) 0%, rgba(0,0,0,0) 58%),
    linear-gradient(163deg, rgba(255,255,255,0.022) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0.030) 100%);
  transition: opacity 0.4s var(--ease);
}
.page-duchas .duchas-card > * { position: relative; z-index: 1; }

/* Gold: the artwork is hand-cut, so the border and divider are given the same
   slight unevenness of tone rather than one uniform value. Still a thin
   rectangle, still elegant, just not perfectly consistent edge to edge. */
.page-duchas .duchas-card {
  border-color: rgba(198,160,85,0.20);
  border-top-color: rgba(198,160,85,0.34);
  border-bottom-color: rgba(198,160,85,0.15);
  border-left-color: rgba(198,160,85,0.26);
  /* A broad, low dark grounding rather than a web card shadow: no visible
     edge, it simply darkens the wall immediately around the card. */
  box-shadow:
    0 2px 3px rgba(0,0,0,0.20),
    0 18px 44px -30px rgba(0,0,0,0.85),
    0 40px 90px -60px rgba(0,0,0,0.75);
}
.page-duchas .duchas-card-cta {
  border-top-color: rgba(198,160,85,0.22);
  border-image: linear-gradient(90deg, rgba(198,160,85,0.10) 0%, rgba(198,160,85,0.30) 45%, rgba(198,160,85,0.14) 100%) 1;
}

/* Hover: a touch more alive, same treatment on all four. */
.page-duchas .duchas-card:hover,
.page-duchas .duchas-card:focus-visible {
  border-color: rgba(198,160,85,0.40);
  border-top-color: rgba(198,160,85,0.58);
  border-bottom-color: rgba(198,160,85,0.34);
  box-shadow:
    0 2px 3px rgba(0,0,0,0.22),
    0 26px 56px -30px rgba(0,0,0,0.9),
    0 52px 110px -60px rgba(0,0,0,0.8);
}
.page-duchas .duchas-card:hover::before { opacity: 0.88; }

/* Open story: quietly illuminated, identifiable without reading the label. */
.page-duchas .duchas-card[aria-expanded="true"] {
  border-color: rgba(198,160,85,0.46);
  border-top-color: rgba(198,160,85,0.66);
  border-bottom-color: rgba(198,160,85,0.40);
}
.page-duchas .duchas-card[aria-expanded="true"]::before {
  background:
    radial-gradient(115% 85% at 18% 12%, rgba(226,240,230,0.075) 0%, rgba(226,240,230,0) 55%),
    radial-gradient(95% 120% at 88% 30%, rgba(198,160,85,0.055) 0%, rgba(198,160,85,0) 52%),
    radial-gradient(140% 110% at 72% 96%, rgba(0,0,0,0.055) 0%, rgba(0,0,0,0) 58%),
    linear-gradient(163deg, rgba(255,255,255,0.030) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0.022) 100%);
}
.page-duchas .duchas-card[aria-expanded="true"] .duchas-symbol img {
  filter: brightness(1.07) saturate(1.03);
  opacity: 1;
}
.page-duchas .duchas-card[aria-expanded="true"] .duchas-card-cta {
  border-image: linear-gradient(90deg, rgba(198,160,85,0.16) 0%, rgba(198,160,85,0.46) 45%, rgba(198,160,85,0.20) 100%) 1;
}
/* Active plus hover must not stack into something bright. */
.page-duchas .duchas-card[aria-expanded="true"]:hover .duchas-symbol img {
  filter: brightness(1.10) saturate(1.04);
}

/* The poster still is painted behind every video (applied by script from each
   element's own poster), so a dropped frame at a loop boundary shows the
   matching image rather than the page background. */
video {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--earth-950);
}