/* =============================================================================
   FIRM FOUNDATIONS — Siraj Association
   Design system and layout.

   Contents
   01 Tokens
   02 Reset and base
   03 Typography primitives
   04 Utilities
   05 Buttons, links, status
   06 Header, wordmark, navigation, mobile menu
   07 Sticky enquiry bar
   08 Homepage — hero, facts, purpose, triptych
   09 Syllabus, rhythm, place, documentary sequences
   10 Course blocks
   11 Stay, beginners, leaders, closing CTA
   12 Internal page furniture — page hero, prospectus
   13 Programme — timetable, prayer, slots, weekends, fortnight
   14 Experiences — journal
   15 Stay & Travel — routes
   16 FAQs
   17 Enquire — selector and panels
   18 Footer
   19 Motion and reduced motion
   ========================================================================== */

/* ----------------------------------------------------------- 01 TOKENS -- */
:root {
  /* Palette */
  --canvas: #f4efe5;
  --paper: #efe8db;
  --sand: #d8c3a5;
  --sand-soft: #e6d9c3;
  --clay: #a66243;
  --clay-deep: #8a4c31; /* text-safe clay: 5.8:1 on canvas */
  --palm: #294a3b;
  --palm-deep: #1e3931;
  --ink: #202621;
  --ink-soft: #4a5049;
  --night: #263b48;
  --brass: #a88752;
  --brass-deep: #6e572f; /* text-safe brass: 5.97:1 on canvas, holds on tinted panels */
  --rule: #d7cab4;
  --rule-strong: #c2b198;

  /* Type */
  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --step-1: clamp(1.15rem, 1.09rem + 0.3vw, 1.32rem);
  --step-2: clamp(1.38rem, 1.26rem + 0.55vw, 1.75rem);
  --step-3: clamp(1.65rem, 1.42rem + 1.1vw, 2.4rem);
  --step-4: clamp(1.95rem, 1.55rem + 1.9vw, 3.2rem);
  --step-5: clamp(2.3rem, 1.7rem + 2.9vw, 4.1rem);

  /* Space */
  --gutter: clamp(1.15rem, 0.7rem + 2vw, 2.75rem);
  --shell: 76rem;
  --shell-narrow: 44rem;
  --shell-wide: 92rem;
  --section-y: clamp(3.25rem, 2rem + 5.5vw, 6.5rem);

  --dur: 220ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------- 02 RESET AND BASE -- */
*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--canvas);
  /* Extremely subtle earthen grain. Kept faint enough not to affect reading. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.62;
  overflow-x: hidden;
  /* Large browser text settings and very long words must wrap, not widen. */
  overflow-wrap: break-word;
}

html.menu-open,
html.menu-open body { overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1.05em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--clay-deep);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--sand); color: var(--ink); }

main:focus { outline: none; }

/* Every anchor target clears the sticky header. Without this, deep links such as
   /enquire/#block-two or /faqs/#prohibited land underneath it. */
[id] { scroll-margin-top: 5.5rem; }

/* --------------------------------------- 03 TYPOGRAPHY PRIMITIVES ------ */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 1.1em;
  max-width: none;
}
.eyebrow--light { color: var(--sand); }

.lead {
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.34;
  color: var(--ink);
  max-width: 42ch;
  text-wrap: pretty;
}
.lead--light { color: var(--sand-soft); }

.pull {
  font-family: var(--serif);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule-strong);
  padding-top: 1.1rem;
  max-width: 30ch;
}

.note {
  font-size: var(--step--1);
  color: var(--ink-soft);
  border-left: 2px solid var(--sand);
  padding-left: 0.9rem;
  max-width: 58ch;
}

.sub {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 2rem 0 0.6rem;
}

.section-head { margin-bottom: clamp(1.75rem, 3vw, 3rem); max-width: 46rem; }
.section-head h2 { margin-bottom: 0.4em; }
.section-number {
  display: block;
  font-family: var(--serif);
  font-size: var(--step-1);
  color: var(--brass-deep);
  margin-bottom: 0.35rem;
}

/* ------------------------------------------------------- 04 UTILITIES -- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--shell-narrow); }
.shell--wide { max-width: var(--shell-wide); }

.section { padding-block: var(--section-y); }
.section--paper { background: var(--paper); border-block: 1px solid var(--rule); }
.section__more { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.plain { list-style: none; margin: 0; padding: 0; }

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

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 100;
  background: var(--palm);
  color: var(--canvas);
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0.75rem; }

.ph { background: var(--sand-soft); }
.ph--cover { width: 100%; height: auto; object-fit: cover; }
/* Components that genuinely need a filled box opt in explicitly. Never set
   height:100% globally: inside an auto-height grid track it beats aspect-ratio,
   the image eats the row, and the figcaption overflows onto the next element. */
.ph--fill { height: 100%; }
.ph--frame { border: 1px solid var(--rule-strong); }

.fig { margin: 0; }
.fig img { width: 100%; }
.fig figcaption,
figure figcaption {
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  margin-top: 0.7rem;
  max-width: 52ch;
}

.band-image { margin-block: clamp(2rem, 4vw, 3.5rem); }
.band-image img { aspect-ratio: 21 / 9; }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1rem 0 0; }
.chips li {
  font-size: var(--step--1);
  border: 1px solid var(--rule-strong);
  padding: 0.28rem 0.7rem;
  color: var(--ink-soft);
  background: var(--canvas);
}

.ticks { margin: 1rem 0 0; }
.ticks li {
  padding: 0.55rem 0 0.55rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15em;
  width: 0.7rem; height: 1px;
  background: var(--brass);
}

.packing {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0 1.75rem;
}
.packing li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
}

.callout {
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--clay);
  background: var(--canvas);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  margin: 1.75rem 0;
}
.callout h3 { font-size: var(--step-1); margin-bottom: 0.45em; }
.callout__small { font-size: var(--step--1); color: var(--ink-soft); }
.callout--plain { border-left-color: var(--brass); }
.callout__list { margin: 0 0 1rem; }
.callout__list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
}
.callout--attention { border-left-color: var(--palm); background: var(--sand-soft); }

.notes-list li { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 6rem; }
.notes-list h3 { font-size: var(--step-0); margin-bottom: 0.3em; }
.notes-list p { font-size: var(--step--1); color: var(--ink-soft); }

.rule-num {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--brass-deep);
  margin-bottom: 0.5rem;
}
.rule-title { font-size: var(--step-2); margin: 0; }

/* --------------------------------- 05 BUTTONS, LINKS, STATUS ----------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.95rem;
  padding: 0.72rem 1.35rem;
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.btn--primary { background: var(--palm); color: var(--canvas); border-color: var(--palm); }
.btn--primary:hover { background: var(--palm-deep); border-color: var(--palm-deep); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--ink); background: var(--sand-soft); }

.btn--quiet {
  background: transparent;
  color: var(--clay-deep);
  border-color: var(--clay);
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  font-size: var(--step--1);
}
.btn--quiet:hover { background: var(--clay); color: var(--canvas); }

.btn--wide { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  /* Standalone "read more" links are real controls, so give them a full
     44px tap target rather than the height of their text. */
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  color: var(--clay-deep);
  box-shadow: inset 0 -1px 0 0 var(--clay);
  transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.link-arrow::after { content: "\00a0\2192"; }
.link-arrow:hover { color: var(--ink); box-shadow: inset 0 -1px 0 0 var(--ink); }
.link-arrow--light { color: var(--sand); box-shadow: inset 0 -1px 0 0 var(--brass); }
.link-arrow--light:hover { color: var(--canvas); box-shadow: inset 0 -1px 0 0 var(--canvas); }

.status {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.status--open { color: var(--palm); }
.status--limited { color: var(--clay-deep); }
.status--full,
.status--completed { color: var(--ink-soft); }
.status--large { font-size: var(--step--1); padding: 0.35rem 0.75rem; }

/* --------------------------------------- 06 HEADER AND NAVIGATION ------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--rule);
  background: color-mix(in srgb, var(--canvas) 97%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--canvas); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 4.1rem;
  /* Flex items refuse to shrink past their content width by default, which
     pushed the menu button off-screen at very narrow effective viewports —
     280px devices, 400% zoom, and large browser font sizes all hit this. */
  min-width: 0;
}
.site-header__brand { min-width: 0; flex-shrink: 1; }
.site-header__brand .wordmark__text { min-width: 0; }

.site-header__brand {
  display: flex;
  /* Not `baseline`: .wordmark is itself a flex container whose first item is
     the icon SVG, which has no text baseline. Browsers then synthesise the
     wordmark's baseline from the icon's bottom edge, not from the "Firm"
     text — so the wordmark and the programme name drifted out of alignment
     instead of sitting flush. Centering both blocks sidesteps that. */
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  padding-block: 0.5rem;
  min-width: 0;
  overflow: hidden;
}
.site-header__programme {
  font-family: var(--serif);
  font-size: var(--step-0);
  letter-spacing: 0.01em;
  color: var(--ink);
  padding-left: 0.85rem;
  border-left: 1px solid var(--rule-strong);
}
@media (max-width: 26rem) {
  .site-header__programme { display: none; }
}

/* Wordmark */
.wordmark { display: inline-flex; align-items: center; gap: 0.5rem; }
.wordmark__mark svg { display: block; }
.wordmark__mark .wm-brick { fill: var(--palm-deep); }
.wordmark__mark .wm-cap { fill: var(--brass); }
.wordmark__text { display: flex; align-items: baseline; gap: 0.34rem; }
.wordmark__name {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.wordmark__sub {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.wordmark--footer .wordmark__name { color: var(--canvas); }
.wordmark--footer .wordmark__sub { color: var(--sand); }
.wordmark--footer .wordmark__mark .wm-brick { fill: var(--sand-soft); }
.wordmark--footer .wordmark__mark .wm-cap { fill: var(--brass); }

/* Programme lock-up */
.lockup { display: block; }
.lockup__presents {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 0.5rem;
}
.lockup__name {
  display: block;
  font-family: var(--serif);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--clay-deep);
}
.lockup--hero { margin-bottom: 1.4rem; }
.lockup--hero .lockup__name { font-size: var(--step-3); }
.lockup--menu .lockup__name { font-size: var(--step-2); }

/* Desktop navigation */
.nav--desktop { display: none; align-items: center; gap: 1.45rem; }
@media (min-width: 68rem) { .nav--desktop { display: flex; } }

.nav__link {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  padding-block: 0.4rem;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.05rem;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--clay-deep); }

.nav__cta {
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--canvas);
  background: var(--palm);
  border: 1px solid var(--palm);
  padding: 0.55rem 1.05rem;
  transition: background-color var(--dur) var(--ease);
}
.nav__cta:hover { background: var(--palm-deep); }

/* Menu toggle */
.menu-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  padding: 0.5rem 0.85rem 0.5rem 0.7rem;
  background: transparent;
  border: 1px solid var(--rule-strong);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
@media (min-width: 68rem) { .menu-toggle { display: none; } }
@media (max-width: 22rem) {
  .menu-toggle__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-toggle { padding-inline: 0.7rem; }
  .site-header__programme { display: none; }
}
.menu-toggle__bars { display: grid; gap: 4px; width: 1.05rem; }
.menu-toggle__bars span { display: block; height: 1.5px; background: var(--ink); }

/* Mobile menu panel */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--palm);
  color: var(--canvas);
  overflow-y: auto;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.menu.is-open { opacity: 1; }
.menu[hidden] { display: none; }

.menu__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 5vw, 3rem);
  padding: var(--gutter);
  padding-block: 1.1rem clamp(2rem, 6vw, 3rem);
}
.menu__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.menu__head .lockup__presents { color: var(--sand); }
.menu__head .lockup__name { color: var(--canvas); }
.menu__close {
  background: transparent;
  border: 1px solid rgba(244, 239, 229, 0.4);
  color: var(--canvas);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 2.9rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.menu__close:hover { background: rgba(244, 239, 229, 0.12); }

.menu__nav { display: grid; }
.menu__nav .nav__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--serif);
  font-size: var(--step-2);
  color: var(--canvas);
  padding-block: 0.85rem;
  border-bottom: 1px solid rgba(244, 239, 229, 0.16);
}
.menu__nav .nav__link::after { display: none; }
.menu__nav .nav__link[aria-current="page"] { color: var(--sand); }
.nav__cta--menu {
  margin-top: 1.25rem;
  justify-self: start;
  background: var(--canvas);
  color: var(--palm);
  border-color: var(--canvas);
  font-size: var(--step-0);
  padding: 0.8rem 1.4rem;
}
.nav__cta--menu:hover { background: var(--sand); }

.menu__blocks { border-top: 1px solid rgba(244, 239, 229, 0.22); padding-top: 1.4rem; }
.menu__blocks-title {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 0.9rem;
}
.menu-block {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  align-items: center;
  text-decoration: none;
  color: var(--canvas);
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(244, 239, 229, 0.16);
  min-height: 44px;
}
.menu-block__label { font-family: var(--serif); font-size: var(--step-1); }
.menu-block__dates { grid-column: 1; font-size: var(--step--1); color: var(--sand); }
.menu-block__status { grid-column: 2; grid-row: 1 / span 2; color: var(--sand); }
.menu__note { font-size: var(--step--1); color: var(--sand); margin-top: 1rem; }

/* ------------------------------------------- 07 STICKY ENQUIRY BAR ----- */
.sticky-enquire {
  position: fixed;
  transform: translateY(0);
  transition: transform 260ms var(--ease);
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: var(--palm);
  border-top: 1px solid var(--palm-deep);
  padding: 0.55rem var(--gutter) calc(0.55rem + env(safe-area-inset-bottom));
}
@media (min-width: 68rem) { .sticky-enquire { display: none; } }
html.menu-open .sticky-enquire { display: none; }

/* Tucked away until the visitor scrolls, so it never covers the hero on first
   paint. JS removes the tuck past 320px of scroll; with JS off it simply shows.
   MUST come after the base .sticky-enquire rule — same specificity, so source
   order decides which transform applies. */
.sticky-enquire--tucked { transform: translateY(110%); }

.sticky-enquire__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  text-decoration: none;
  color: var(--canvas);
}
.sticky-enquire__label { font-weight: 600; font-size: 0.95rem; }
.sticky-enquire__meta { font-size: var(--step--1); color: var(--sand); white-space: nowrap; }

body { padding-bottom: 3.9rem; }
@media (min-width: 68rem) { body { padding-bottom: 0; } }
.page--enquire { padding-bottom: 0; }

/* ------------------------------------------------------- 08 HOMEPAGE --- */
.hero { padding-block: clamp(2.25rem, 5vw, 4.75rem) clamp(2rem, 4vw, 3.5rem); }
.hero__inner { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60rem) {
  .hero__inner { grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); align-items: start; }
}

/* Deliberately a shade below --step-5: at tablet widths the hero is a single
   column, and the full display size pushed the actions past the fold. */
.hero__title {
  font-size: clamp(2.05rem, 1.5rem + 2.05vw, 3.55rem);
  max-width: 20ch;
  margin-bottom: 0.5em;
}
@media (min-width: 60rem) { .hero__title { max-width: 16ch; } }
.hero__lead {
  font-family: var(--serif);
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 40ch;
}
.hero__place {
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--brass-deep);
  border-top: 1px solid var(--rule);
  padding-top: 0.85rem;
  margin-top: 1.4rem;
  max-width: 44ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.hero__media { display: grid; gap: 0.6rem; }
.hero__media-main img { aspect-ratio: 3 / 4; width: 100%; }
.hero__media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.hero__media-pair img { aspect-ratio: 1 / 1; width: 100%; }
@media (max-width: 60rem) {
  .hero__media-main img { aspect-ratio: 16 / 10; }
}

/* Quick facts */
.facts { border-block: 1px solid var(--rule); padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.facts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  margin: 0;
}
@media (min-width: 48rem) { .facts__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68rem) { .facts__grid { grid-template-columns: repeat(6, 1fr); } }

.facts__item { border-left: 1px solid var(--rule); padding-left: 1rem; min-width: 0; }
.facts__item dt {
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.98rem + 0.12vw, 1.16rem);
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}
.facts__item dd {
  margin: 0.3rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* Purpose */
.purpose { padding-top: var(--section-y); }
.purpose__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 60rem) {
  .purpose__grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .purpose__aside { padding-top: 4.5rem; }
}
.purpose__copy h2 { font-size: var(--step-4); max-width: 14ch; }
.purpose__image {
  margin-top: clamp(2.25rem, 5vw, 4rem);
  margin-bottom: calc(var(--section-y) * -0.45);
  position: relative;
  z-index: 1;
  width: min(100%, var(--shell-wide));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.purpose__image img { aspect-ratio: 2 / 1; width: 100%; }

/* Triptych */
.triptych { padding-block: calc(var(--section-y) + 2.5rem) var(--section-y); }
.triptych__parts { display: grid; gap: clamp(2.25rem, 5vw, 3.25rem); }
@media (min-width: 58rem) {
  .triptych__parts { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.tri__media { margin-bottom: 1.25rem; }
/* Differing crops are the asymmetry. They start level, so the eye reads it as a
   composition rather than as three columns that failed to line up. */
.tri--1 .tri__media img { aspect-ratio: 4 / 3; }
.tri--2 .tri__media img { aspect-ratio: 3 / 4; }
.tri--3 .tri__media img { aspect-ratio: 1 / 1; }
.tri__num {
  display: block;
  font-family: var(--serif);
  font-size: var(--step-2);
  color: var(--brass-deep);
  border-top: 1px solid var(--rule-strong);
  padding-top: 0.6rem;
  margin-bottom: 0.5rem;
}
.tri__copy h3 { font-size: var(--step-2); }
.tri__copy p { font-size: 0.98rem; color: var(--ink-soft); margin-bottom: 1rem; }

/* --------------------------- 09 SYLLABUS, RHYTHM, PLACE, SEQUENCES ----- */
.syllabus { border-top: 1px solid var(--rule-strong); }
.syllabus__item {
  display: grid;
  grid-template-columns: minmax(0, 2.75rem) minmax(0, 1fr);
  gap: 0 1rem;
  padding: clamp(1.25rem, 2.5vw, 1.9rem) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 52rem) {
  .syllabus__item { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 1.75rem; }
}
.syllabus__num {
  font-family: var(--serif);
  font-size: var(--step-1);
  color: var(--brass-deep);
  line-height: 1.4;
}
.syllabus__title { margin-bottom: 0.15em; }
.syllabus__author {
  font-size: var(--step--1);
  color: var(--brass-deep);
  letter-spacing: 0.04em;
  margin-bottom: 0.7em;
}
.syllabus__desc { color: var(--ink-soft); margin-bottom: 0; }

.syllabus__item--primary {
  background: var(--canvas);
  border-bottom-color: var(--rule-strong);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
.syllabus__item--primary .syllabus__title { font-size: var(--step-3); }
.syllabus__item--primary .syllabus__desc { font-size: var(--step-1); color: var(--ink); }
.syllabus__item--primary .syllabus__num { font-size: var(--step-2); color: var(--clay-deep); }

.syllabus__meta { display: flex; flex-wrap: wrap; gap: 1.75rem; margin: 1.1rem 0 0; }
.syllabus__meta dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.syllabus__meta dd { margin: 0.15rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }

.syllabus__image { grid-column: 1 / -1; margin-top: 1.5rem; }
@media (min-width: 62rem) {
  .syllabus__item--primary { grid-template-columns: 3.5rem minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .syllabus__image { grid-column: 3; grid-row: 1; margin-top: 0; padding-left: 2rem; }
  .syllabus__image img { aspect-ratio: 4 / 3; }
}

/* Rhythm preview */
.section--rhythm { background: var(--paper); border-block: 1px solid var(--rule); }
.rhythm { border-top: 1px solid var(--rule-strong); max-width: 46rem; }
.rhythm__item {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) 1.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.rhythm__time {
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.rhythm__dot {
  width: 7px; height: 7px;
  background: var(--brass);
  justify-self: center;
}
.rhythm__title { font-family: var(--serif); font-size: var(--step-1); }
.rhythm__item--night .rhythm__dot { background: var(--night); }
.rhythm__item--dawn .rhythm__dot { background: var(--clay); }
.rhythm__item--day .rhythm__dot { background: var(--brass); }
.rhythm__item--afternoon .rhythm__dot { background: var(--sand); border: 1px solid var(--brass); }
.rhythm__item--evening .rhythm__dot { background: var(--palm); }

/* Place */
.place {
  display: grid;
  background: var(--night);
  color: var(--sand-soft);
  margin-block: var(--section-y);
}
@media (min-width: 58rem) {
  .place { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}
.place__wide img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 58rem) { .place__wide img { aspect-ratio: 16 / 10; } }
.place__copy {
  padding: clamp(2rem, 5vw, 4.5rem);
  align-self: center;
  max-width: 40rem;
}
.place__copy h2 { color: var(--canvas); font-size: var(--step-4); }
.place__copy p { color: var(--sand-soft); }
.place__geo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  border-top: 1px solid rgba(216, 195, 165, 0.25);
  padding-top: 1rem;
  margin-block: 1.5rem;
}

/* Documentary sequences */
.doc-seq { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-bottom: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 58rem) {
  .doc-seq { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; }
}
.doc-seq figure { margin: 0; }
.doc-seq__lead img { aspect-ratio: 16 / 9; width: 100%; }
.doc-seq__side { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.doc-seq__side img { aspect-ratio: 4 / 3; width: 100%; }
.doc-seq--row { grid-template-columns: 1fr; }
@media (min-width: 58rem) {
  .doc-seq--row { grid-template-columns: repeat(3, 1fr); }
}
.doc-seq--row img { aspect-ratio: 3 / 2; width: 100%; }

/* ------------------------------------------------ 10 COURSE BLOCKS ----- */
.block-list { border-top: 1px solid var(--rule-strong); }
.block-row {
  display: grid;
  gap: 0.75rem 1.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.9rem) 0;
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--dur) var(--ease);
}
.block-row:hover { background: color-mix(in srgb, var(--sand) 22%, transparent); }
@media (min-width: 56rem) {
  .block-row {
    grid-template-columns: minmax(0, 10rem) minmax(0, 1.5fr) minmax(0, 1fr) auto;
    align-items: center;
  }
}
.block-row__label {
  display: block;
  font-family: var(--serif);
  font-size: var(--step-1);
  margin-bottom: 0.4rem;
}
.block-row__range { font-family: var(--serif); font-size: var(--step-1); margin-bottom: 0.25rem; }
.block-row__meta { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.block-row__fee {
  font-family: var(--serif);
  font-size: var(--step-2);
  margin-bottom: 0.1rem;
  font-variant-numeric: tabular-nums;
}
.block-row__alt,
.block-row__deposit { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.block-row__closed { font-size: var(--step--1); color: var(--ink-soft); }

/* ------------------------- 11 STAY, BEGINNERS, LEADERS, CLOSING CTA ---- */
.stay__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 58rem) {
  .stay__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}
.stay__media { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.stay__media img { width: 100%; }
.stay__media .fig:first-child img { aspect-ratio: 3 / 2; }
.stay__media .fig:last-child img { aspect-ratio: 4 / 3; }

.section--green { background: var(--palm); color: var(--sand-soft); }
.section--green h2 { color: var(--canvas); font-size: var(--step-4); }
.section--green p { color: var(--sand-soft); }

.beginner__grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 58rem) {
  .beginner__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
.beginner__list { margin: 0 0 1.5rem; display: grid; gap: 1.25rem; }
.beginner__list li { border-top: 1px solid rgba(216, 195, 165, 0.3); padding-top: 1rem; }
.beginner__list h3 { color: var(--canvas); font-size: var(--step-1); margin-bottom: 0.3em; }
.beginner__list p { font-size: 0.97rem; margin: 0; }
.beginner__closing { font-size: 0.97rem; }
.beginner__list--light li { border-top-color: var(--rule); }
.beginner__list--light h3 { color: var(--ink); }
.beginner__list--light p { color: var(--ink-soft); }

.leaders { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 58rem) {
  /* 1.35fr gives the list room for two cards side by side. With only one
     leader (the current line-up) that reserves far more width than a single
     card needs, so the section leans a big empty gap on the right — the
     :has() rule below narrows that column to fit the one card instead. */
  .leaders { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }
  .leaders:has(.leaders__list > .leader:only-child) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
  }
}
.leaders__list { display: grid; gap: 1.5rem; }
/* auto-fit rather than a fixed 1fr 1fr: with two leaders this still lays out
   as two columns, but with only one, the empty second track collapses
   instead of leaving a blank gap beside the card. */
@media (min-width: 40rem) {
  .leaders__list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
    justify-self: start;
  }
}
.leader { border-top: 1px solid var(--rule-strong); padding-top: 1rem; }
.leader__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 1rem; }
.leader__role {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 0.4rem;
}
.leader__name { font-size: var(--step-1); margin-bottom: 0.3em; }
.leader__resp { font-size: var(--step--1); color: var(--ink-soft); }
.leader__bio { font-size: 0.97rem; color: var(--ink-soft); margin-top: 0.6rem; }

/* Closing CTA */
/* Image sits above the panel rather than behind the text: nothing is ever set
   over a photograph, so contrast holds whatever image is supplied. */
.cta { background: var(--palm); color: var(--sand-soft); }
.cta__image { display: block; }
.cta__image img { width: 100%; height: auto; aspect-ratio: 24 / 7; object-fit: cover; }
@media (max-width: 44rem) { .cta__image img { aspect-ratio: 16 / 9; } }
.cta__panel { position: relative; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.cta h2 { color: var(--canvas); font-size: var(--step-4); }
.cta__lead {
  font-family: var(--serif);
  font-size: var(--step-1);
  color: var(--sand-soft);
  max-width: 44ch;
}
.cta__facts {
  display: grid;
  gap: 1rem 1.75rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid rgba(216, 195, 165, 0.3);
  padding-top: 1.5rem;
}
@media (min-width: 40rem) { .cta__facts { grid-template-columns: 1fr 1fr; } }
.cta__facts dt {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 0.25rem;
}
.cta__facts dd { margin: 0; font-family: var(--serif); font-size: var(--step-1); color: var(--canvas); }
.cta__alt { font-family: var(--sans); font-size: var(--step--1); color: var(--sand); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.75rem; }
.cta .btn--primary { background: var(--canvas); color: var(--palm); border-color: var(--canvas); }
.cta .btn--primary:hover { background: var(--sand); border-color: var(--sand); }
.cta .btn--ghost { color: var(--canvas); border-color: rgba(244, 239, 229, 0.45); }
.cta .btn--ghost:hover { background: rgba(244, 239, 229, 0.12); border-color: var(--canvas); }
.cta__small { font-size: var(--step--1); color: var(--sand); max-width: 60ch; }

/* -------------------------------------- 12 PAGE HERO AND PROSPECTUS ---- */
.page-hero { padding-block: clamp(2.25rem, 5vw, 4rem) 0; }
.page-hero h1 { font-size: var(--step-4); max-width: 18ch; }
.page-hero__lead {
  font-family: var(--serif);
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 52ch;
}
.page-hero__image { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.page-hero__image img { aspect-ratio: 21 / 9; width: 100%; }

.prospectus { padding-top: clamp(2.5rem, 5vw, 4rem); }
.pro-block {
  display: grid;
  gap: 0.85rem 2.5rem;
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  border-top: 1px solid var(--rule-strong);
  /* Several FAQ answers now deep-link straight into a specific section
     (e.g. #food, #accommodation) — without this, the sticky site header
     covers the top of whichever block the visitor lands on. */
  scroll-margin-top: 6rem;
}
.pro-block:first-of-type { border-top: none; padding-top: 0; }
@media (min-width: 58rem) {
  .pro-block { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .pro-block__head { position: sticky; top: 5.5rem; align-self: start; }
}
.pro-media {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 1.75rem;
}
@media (min-width: 44rem) {
  .pro-media:has(> * + *) { grid-template-columns: 1fr 1fr; }
}
.pro-media img { aspect-ratio: 3 / 2; width: 100%; }
.pro-syllabus { margin-block: clamp(1rem, 2vw, 1.5rem) clamp(2rem, 4vw, 3rem); }

/* ------------------------------------------------- 13 PROGRAMME -------- */
.timetable { display: grid; gap: 1.75rem; }
@media (min-width: 62rem) {
  .timetable {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-left: 1px solid var(--rule);
  }
}
.tt-group { border-top: 2px solid var(--brass); padding-top: 0.85rem; }
@media (min-width: 62rem) {
  .tt-group { border-right: 1px solid var(--rule); padding: 0.85rem 1.1rem 1.25rem; }
}
.tt-group--night { border-top-color: var(--night); }
.tt-group--dawn { border-top-color: var(--clay); }
.tt-group--day { border-top-color: var(--brass); }
.tt-group--afternoon { border-top-color: var(--sand); }
.tt-group--evening { border-top-color: var(--palm); }

.tt-group--night { background: color-mix(in srgb, var(--night) 5%, transparent); }
.tt-group--dawn { background: color-mix(in srgb, var(--clay) 4%, transparent); }
.tt-group--afternoon { background: color-mix(in srgb, var(--sand) 12%, transparent); }
.tt-group--evening { background: color-mix(in srgb, var(--palm) 5%, transparent); }

.tt-group__label {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 0.9rem;
}
.tt-list { display: grid; gap: 0.15rem; }
.tt-entry {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0 0.6rem 0.75rem;
  border-left: 2px solid var(--rule-strong);
}
.tt-entry__time {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.tt-entry__title { font-family: var(--serif); font-size: 1.02rem; line-height: 1.25; }
.tt-entry__note { font-size: var(--step--1); color: var(--ink-soft); }
.tt-entry--prayer { border-left-color: var(--palm); }
.tt-entry--prayer .tt-entry__title { color: var(--palm); font-weight: 600; }
.tt-entry--quran { border-left-color: var(--clay); }
.tt-entry--quran .tt-entry__title { color: var(--clay-deep); }
.tt-entry--study { border-left-color: var(--brass); }
.tt-entry--meal { border-left-color: var(--sand); }
.tt-entry--break,
.tt-entry--rest { border-left-color: var(--rule); }
.tt-entry--break .tt-entry__title,
.tt-entry--rest .tt-entry__title { color: var(--ink-soft); font-family: var(--sans); font-size: 0.95rem; }
.note--timetable { margin-top: 1.75rem; }
.pro-media + .note, .fig + .note { margin-top: 1.5rem; }

.prayer-row { display: grid; gap: 0; border-top: 1px solid var(--rule-strong); }
@media (min-width: 56rem) {
  .prayer-row { grid-template-columns: repeat(5, 1fr); border-top: none; }
}
.prayer {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 56rem) {
  .prayer { border-top: 2px solid var(--palm); border-bottom: none; padding: 1rem 1.25rem 1rem 0; }
}
.prayer__name { font-family: var(--serif); font-size: var(--step-1); color: var(--palm); }
.prayer__time { font-variant-numeric: tabular-nums; font-size: var(--step-1); }
.prayer__note { font-size: var(--step--1); color: var(--ink-soft); }

.weekend { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 58rem) {
  .weekend { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
.weekend__day { border-top: 2px solid var(--clay); padding-top: 1rem; }
.weekend__when {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 0.5rem;
}
.weekend__day h3 { font-size: var(--step-1); }
.weekend__lead { color: var(--ink-soft); font-size: 0.97rem; }

.itinerary { counter-reset: step; margin-top: 1rem; }
.itinerary li {
  counter-increment: step;
  position: relative;
  padding: 0.4rem 0 0.4rem 2rem;
  font-size: var(--step--1);
  border-bottom: 1px solid var(--rule);
}
.itinerary li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--brass-deep);
  font-variant-numeric: tabular-nums;
}

.fortnight { display: grid; gap: 0; border-top: 1px solid var(--rule-strong); }
@media (min-width: 44rem) { .fortnight { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.fortnight__day {
  display: grid;
  grid-template-columns: minmax(0, 4rem) minmax(0, 3rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
  padding-left: 0.75rem;
}
.fortnight__day--study { border-left-color: var(--brass); }
.fortnight__day--friday { border-left-color: var(--clay); }
.fortnight__day--away { border-left-color: var(--palm); background: color-mix(in srgb, var(--palm) 4%, transparent); }
.fortnight__n { font-variant-numeric: tabular-nums; font-size: var(--step--1); color: var(--ink-soft); }
.fortnight__dow { font-family: var(--serif); font-size: var(--step-0); }
.fortnight__label { font-size: var(--step--1); }

/* ---------------------------------------------- 14 EXPERIENCES --------- */
.journal-list { display: grid; }
.journal { padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--rule); }
.journal:first-child { border-top: none; padding-top: clamp(1rem, 2vw, 2rem); }
.journal__when {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 0.6rem;
}
.journal h2 { font-size: var(--step-3); }
.journal__lead { font-family: var(--serif); font-size: var(--step-1); color: var(--ink); max-width: 40ch; }
.journal__copy p { color: var(--ink-soft); }
.journal__copy .journal__lead { color: var(--ink); }

.journal__pair { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 58rem) {
  .journal__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .journal--wide-left .journal__copy { order: 2; }
  .journal--wide-left .journal__media { order: 1; }
}
.journal__media img { aspect-ratio: 4 / 3; width: 100%; }

/* Multi-photo entries: a small collage inside the same media column — a
   lead image plus one or two smaller ones stacked beside it — rather than
   switching to a wider full-bleed layout, so the alternating rhythm of
   .journal__pair isn't broken by the entries that happen to have more
   than one photo. */
.journal__collage { display: grid; gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.journal__collage img { width: 100%; }
.journal__collage > .fig:first-child img { aspect-ratio: 4 / 3; }
.journal__collage-sub { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.journal__collage-sub .fig img { aspect-ratio: 1 / 1; }
.journal__collage-sub:has(> .fig:only-child) { grid-template-columns: 1fr; }
.journal__trio img { aspect-ratio: 3 / 2; width: 100%; }

/* ------------------------------------------------ 15 STAY & TRAVEL ----- */
.routes { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); margin-block: 1.5rem; }
@media (min-width: 52rem) { .routes { grid-template-columns: 1fr 1fr; } }
.route { border-top: 2px solid var(--night); padding-top: 1rem; }
.route__label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 0.4rem;
}
.route h3 { font-size: var(--step-1); }
.route__steps { counter-reset: rstep; margin-bottom: 1rem; }
.route__steps li {
  counter-increment: rstep;
  position: relative;
  padding: 0.4rem 0 0.4rem 1.9rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
}
.route__steps li::before {
  content: counter(rstep);
  position: absolute; left: 0;
  color: var(--brass-deep);
  font-variant-numeric: tabular-nums;
}
.route__cost { font-size: var(--step--1); }
.route__support { font-size: var(--step--1); color: var(--ink-soft); }

/* ------------------------------------------------------- 16 FAQS ------- */
.faq-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 58rem) { .faq-layout { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } }

.faq-nav__title {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 0.8rem;
}
@media (min-width: 58rem) { .faq-nav { position: sticky; top: 5.5rem; } }
.faq-nav ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
@media (min-width: 58rem) { .faq-nav ul { display: grid; gap: 0; } }
.faq-nav a {
  display: block;
  text-decoration: none;
  font-size: var(--step--1);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.faq-nav a:hover { color: var(--clay-deep); }

.faq-cat { margin-bottom: clamp(2rem, 4vw, 3rem); scroll-margin-top: 6rem; }
.faq-cat__title {
  font-size: var(--step-2);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 0;
}
.faq {
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 6rem;
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--clay-deep); }
.faq__icon {
  flex: none;
  position: relative;
  width: 0.85rem; height: 0.85rem;
  margin-top: 0.4rem;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--clay);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq__icon::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.faq__icon::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
.faq[open] .faq__icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.faq__a { padding-bottom: 1.2rem; max-width: 62ch; }
.faq__a p { font-size: 0.97rem; color: var(--ink-soft); }

/* --------------------------------------------------- 17 ENQUIRE -------- */
.selector { display: block; }
.selector__options {
  border: none;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  padding: 0;
  min-width: 0;
}
.selector__grid { display: grid; gap: 0.6rem; }
@media (min-width: 46rem) { .selector__grid { grid-template-columns: repeat(3, 1fr); } }
.selector__legend {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass-deep);
  padding: 0;
  margin-bottom: 0.9rem;
}
.opt {
  display: grid;
  gap: 0.2rem;
  padding: 0.95rem 1.1rem;
  min-height: 44px;
  border: 1px solid var(--rule-strong);
  background: var(--canvas);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.opt:hover { border-color: var(--palm); }
.opt__label { font-family: var(--serif); font-size: var(--step-1); }
.opt__dates { font-size: var(--step--1); }
.opt__status {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.selector__radio:focus-visible ~ .selector__options label {
  /* Keyboard users see which control has focus even though the radio is hidden. */
  outline: none;
}
#opt-block-one:focus-visible ~ .selector__options label[for="opt-block-one"],
#opt-block-two:focus-visible ~ .selector__options label[for="opt-block-two"],
#opt-block-three:focus-visible ~ .selector__options label[for="opt-block-three"] {
  outline: 2px solid var(--clay-deep);
  outline-offset: 3px;
}

.panel { display: none; }
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  border-top: 2px solid var(--palm);
  padding-top: 1.25rem;
  margin-bottom: 1.75rem;
}
.panel__eyebrow {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 0.5rem;
}
.panel h2 { font-size: var(--step-3); margin-bottom: 0.2em; }
.panel__dates { font-family: var(--serif); font-size: var(--step-1); color: var(--ink-soft); margin: 0; }

.panel__facts {
  display: grid;
  gap: 1.1rem 1.75rem;
  margin: 0 0 1.75rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}
@media (min-width: 40rem) { .panel__facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .panel__facts { grid-template-columns: repeat(4, 1fr); } }
.panel__facts dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 0.25rem;
}
.panel__facts dd { margin: 0; font-size: 0.97rem; }
.panel__alt { display: block; font-size: var(--step--1); color: var(--ink-soft); }

.panel__excludes {
  background: var(--paper);
  border-left: 3px solid var(--clay);
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.75rem;
}
.panel__excludes h3 { font-size: var(--step-0); margin-bottom: 0.5em; }
.panel__excludes li { padding: 0.3rem 0; font-size: var(--step--1); border-bottom: 1px solid var(--rule); }
.panel__excludes li:last-child { border-bottom: none; }

.panel__action { max-width: 34rem; }
.panel__closed,
.panel__pending { font-size: var(--step--1); color: var(--ink-soft); }

.msg { margin-top: 1rem; }
.msg summary {
  cursor: pointer;
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding: 0.6rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.msg__text {
  margin: 0.4rem 0 0.5rem;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--sand);
  background: var(--paper);
  font-family: var(--serif);
  font-size: 0.97rem;
  color: var(--ink-soft);
}
.msg__note { font-size: var(--step--1); color: var(--ink-soft); }

.steps { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.steps li {
  display: grid;
  grid-template-columns: minmax(0, 2.75rem) minmax(0, 1fr);
  gap: 1rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}
.steps__n { font-family: var(--serif); font-size: var(--step-1); color: var(--brass-deep); }
.steps h3 { font-size: var(--step-0); margin-bottom: 0.3em; }
.steps p { font-size: var(--step--1); color: var(--ink-soft); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.1em 0.35em;
}

/* -------------------------------------------------------- 18 FOOTER ---- */
.site-footer {
  background: var(--ink);
  color: var(--sand-soft);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  margin-top: 0;
}
.site-footer__top {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid rgba(216, 195, 165, 0.22);
}
@media (min-width: 46rem) { .site-footer__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) {
  .site-footer__top { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
}
.site-footer__org { font-family: var(--serif); font-size: var(--step-0); color: var(--canvas); margin: 1rem 0 0.4rem; }
.site-footer__prog { font-size: var(--step--1); color: var(--sand); }
.site-footer__col h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.9rem;
}
.site-footer__col li a,
.site-footer__col p a {
  color: var(--sand-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-footer__col li a { display: inline-block; padding: 0.35rem 0; }
.site-footer__col li a:hover,
.site-footer__col p a:hover { color: var(--canvas); border-bottom-color: var(--brass); }
.site-footer__col address { font-style: normal; font-size: var(--step--1); line-height: 1.7; }
.site-footer__col p { font-size: var(--step--1); margin-bottom: 0.5rem; }
.footer__k {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}
.footer__pending { color: var(--sand); }
.site-footer__muted { color: rgba(216, 195, 165, 0.72); font-size: var(--step--1); }
.site-footer__bottom {
  padding-top: 1.5rem;
  display: grid;
  gap: 0.5rem;
}
.site-footer__bottom p { font-size: var(--step--1); max-width: 70ch; }

/* ------------------------------------- 20 VENUE, OASIS STRIP, TOWNS ---- */
.venue__grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 58rem) {
  .venue__grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: start; }
}
.venue__main { margin: 0; }
.venue__main img { width: 100%; aspect-ratio: 5 / 4; }
.venue__side { display: grid; gap: clamp(1rem, 2vw, 1.5rem); align-content: start; }
.venue__side img { width: 100%; aspect-ratio: 3 / 2; }
@media (max-width: 58rem) {
  .venue__side { grid-template-columns: 1fr 1fr; }
}
.venue__foot { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; }
@media (min-width: 58rem) {
  .venue__foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
.venue__note p { color: var(--ink-soft); }
.venue__foot img { width: 100%; aspect-ratio: 16 / 9; }

.oasis-strip { padding-top: 0; }
.oasis-strip__grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 52rem) { .oasis-strip__grid { grid-template-columns: repeat(3, 1fr); } }
.oasis-strip__grid img { width: 100%; aspect-ratio: 3 / 2; }
.oasis-strip__note { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.towns { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 58rem) { .towns { grid-template-columns: 1fr 1fr; } }
.town { border-top: 2px solid var(--brass); padding-top: 1rem; }
.town h3 { font-size: var(--step-2); }
.town__lead { font-family: var(--serif); font-size: var(--step-1); color: var(--ink); }
.town p { color: var(--ink-soft); font-size: 0.97rem; }
.town__honesty {
  border-left: 2px solid var(--sand);
  padding-left: 0.9rem;
  font-size: var(--step--1);
}

.place__lead {
  font-family: var(--serif);
  font-size: var(--step-1);
  color: var(--canvas);
  margin-bottom: 1em;
}

.block-row__note {
  grid-column: 1 / -1;
  font-size: var(--step--1);
  color: var(--clay-deep);
  border-left: 2px solid var(--clay);
  padding-left: 0.75rem;
  margin: 0.6rem 0 0;
  max-width: 62ch;
}
.panel__note { margin-top: 0; }

/* ---------------------------------------------------------- 21 VIDEO --- */
.video-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 52rem) { .video-grid { grid-template-columns: repeat(3, 1fr); } }

.video { position: relative; aspect-ratio: 16 / 9; background: var(--night); overflow: hidden; }
.video__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.75rem;
  width: 100%;
  padding: 1.1rem;
  background: var(--night);
  border: none;
  color: var(--sand-soft);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.video__play:hover { background: #2e4757; }
.video__icon {
  position: relative;
  width: 2.9rem; height: 2.9rem;
  flex: none;
  border: 1px solid var(--sand);
  border-radius: 50%;
}
.video__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.8rem;
  border-color: transparent transparent transparent var(--sand);
}
.video__play:hover .video__icon { border-color: var(--canvas); }
.video__play:hover .video__icon::after { border-left-color: var(--canvas); }
.video__label { line-height: 1.35; }
.video__frame { width: 100%; height: 100%; border: 0; display: block; }
.video__fallback { padding: 1.1rem; color: var(--sand-soft); font-size: var(--step--1); }
.video__fallback a { color: var(--canvas); }

/* -------------------------------------------------------- 19 MOTION ---- */
.will-reveal { opacity: 0; transform: translateY(14px); }
.will-reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .will-reveal { opacity: 1; transform: none; }
}

/* Landscape phones: a sticky header plus a sticky bar leaves too little room to
   read anything. Give the content the whole screen back. */
@media (orientation: landscape) and (max-height: 460px) {
  .sticky-enquire { display: none; }
  body { padding-bottom: 0; }
  .site-header { position: static; }
  [id] { scroll-margin-top: 1rem; }
}

@media print {
  .site-header, .menu, .sticky-enquire, .cta__image { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
}

/* ------------------------------------------------------------ 22 404 ---- */
.notfound { padding-block: clamp(3rem, 7vw, 6rem); }
.notfound h1 { font-size: var(--step-4); }
.notfound h2 {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 0.9rem;
}
.notfound__nav { margin-top: clamp(2rem, 4vw, 3rem); }
.notfound__list {
  display: grid;
  gap: 0 1.75rem;
  border-top: 1px solid var(--rule-strong);
}
@media (min-width: 34rem) { .notfound__list { grid-template-columns: 1fr 1fr; } }
.notfound__list li { border-bottom: 1px solid var(--rule); }
.notfound__list .link-arrow { width: 100%; }

.notfound__blocks { margin-top: clamp(2rem, 4vw, 3rem); }
.notfound__block { border-bottom: 1px solid var(--rule); }
.notfound__block a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  min-height: 44px;
  padding: 0.75rem 0;
  text-decoration: none;
}
.notfound__block a:hover .notfound__block-label { color: var(--clay-deep); }
.notfound__block-label { font-family: var(--serif); font-size: var(--step-1); }
.notfound__block-dates { font-size: var(--step--1); color: var(--ink-soft); flex: 1; }

/* --------------------------------------------- 23 NO-SCRIPT NAVIGATION -- */
/* Rendered inside <noscript>, so it only ever appears when the scripted menu
   cannot work. Below 1088px the desktop nav is hidden and the panel cannot
   open, which would otherwise leave the header with no navigation at all. */
.nav-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  padding: 0.6rem var(--gutter) 0.9rem;
  border-top: 1px solid var(--rule);
  max-width: var(--shell);
  margin-inline: auto;
}
.nav-fallback a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 0.45rem 0;
  border-bottom: 1px solid transparent;
}
.nav-fallback a:hover { border-bottom-color: var(--clay); }
.nav-fallback a[aria-current="page"] { color: var(--clay-deep); border-bottom-color: var(--clay); }
@media (min-width: 68rem) { .nav-fallback { display: none; } }