/* ============================================================
   Padmanabhaswamy.in — Global Foundation
   Colours allowed sitewide: #000, #fff, #F9EEEE, #8B0000
   No box-shadow. No transform. No font-weight at all. Radius fixed at 5px.
   Headings: Columbia Serial Bold. All other text: Roboto.
   ============================================================ */

/* ----------------------------------------------------------
   1. FONTS — self-hosted, no CDN
---------------------------------------------------------- */
@font-face {
  font-family: 'Columbia Serial';
  src: url('../fonts/columbia-serial-bold.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto.woff2') format('woff2-variations');
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------
   2. ROOT VARIABLES
---------------------------------------------------------- */
:root {
  /* Colours — the only four permitted anywhere on this site */
  --c-black: #000;
  --c-white: #fff;
  --c-section: #F9EEEE;
  --c-main: #8B0000;

  /* Font families */
  --ff-heading: 'Columbia Serial', serif;
  --ff-body: 'Roboto', sans-serif;

  /* Heading sizes — one per level, h1 through h6 */
  --fs-h1: clamp(1.45rem, 1.1rem + 1.5vw, 2.6rem);
  --fs-h2: clamp(1.3rem, 1.1rem + 0.85vw, 1.85rem);
  --fs-h3: clamp(1.18rem, 1.06rem + 0.5vw, 1.45rem);
  --fs-h4: clamp(1.08rem, 1.02rem + 0.28vw, 1.25rem);
  --fs-h5: clamp(1.05rem, 1rem + 0.22vw, 1.25rem);
  --fs-h6: clamp(0.98rem, 0.95rem + 0.14vw, 1.1rem);

  /* Text size — ONE size for every non-heading element on the site */
  --fs-text: clamp(0.875rem, 0.845rem + 0.13vw, 0.95rem);

  /* Line heights */
  --lh-tight: 1.2;
  --lh-mid: 1.4;
  --lh-loose: 1.7;

  /* Gaps — used with the gap property, never as margin */
  --gap-xs: clamp(0.35rem, 0.3rem + 0.25vw, 0.5rem);
  --gap-sm: clamp(0.6rem, 0.5rem + 0.4vw, 0.85rem);
  --gap-md: clamp(0.85rem, 0.75rem + 0.45vw, 1.15rem);
  --gap-lg: clamp(1.2rem, 1.03rem + 0.75vw, 1.75rem);
  --gap-xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.6rem);

  /* Section spacing — one fluid value covers mobile through desktop */
  --section-y: clamp(2.5rem, 1.8rem + 3.2vw, 5rem);

  /* Container */
  --container-w: 1360px;
  --container-pad: clamp(1rem, 0.7rem + 1.4vw, 2rem);

  /* Radius — the only radius value permitted sitewide */
  --radius: 5px;

  /* Border width */
  --border-w: 1px;

  /* Motion */
  --ease: 0.25s ease;
}

/* ----------------------------------------------------------
   3. RESET — every element starts at margin 0
---------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-synthesis: none;
  font-family: var(--ff-body);
  font-size: var(--fs-text);
  line-height: var(--lh-loose);
  color: var(--c-black);
  background: var(--c-white);
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--c-main);
  text-decoration: none;
  transition: color var(--ease), background var(--ease), border-color var(--ease);
}

a:hover {
  color: var(--c-black);
}

/* Inline links inside body copy carry an underline, colour alone is not enough */
p a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ----------------------------------------------------------
   4. TYPOGRAPHY
   Headings: six sizes, one per level.
   Everything else: a single size, no exceptions.
---------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-heading);
  line-height: var(--lh-tight);
  color: var(--c-black);
}

/* Inline spans and links inside a heading follow the heading, not the text size */
h1 span, h2 span, h3 span,
h4 span, h5 span, h6 span,
h1 a, h2 a, h3 a,
h4 a, h5 a, h6 a {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p,
a,
span,
li,
td,
th,
label,
figcaption,
small,
strong,
b,
em,
button,
input,
textarea,
select,
blockquote,
address,
time,
cite,
code {
  font-family: var(--ff-body);
  font-size: var(--fs-text);
  line-height: var(--lh-loose);
}

/* ----------------------------------------------------------
   5. CONTAINER — identical on every page
---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  padding-inline: var(--container-pad);
  margin-inline: auto;
}

/* ----------------------------------------------------------
   6. SECTION SPACING
---------------------------------------------------------- */
.section {
  padding-block: var(--section-y);
}

.section-alt {
  background: var(--c-section);
}

/* ----------------------------------------------------------
   7. GAP METHOD — spacing comes from the parent, never margin
---------------------------------------------------------- */
/* ----------------------------------------------------------
   8. BUTTONS — solid main colour, black on hover
---------------------------------------------------------- */
.btn {
  display: inline-block;
  font-size: var(--fs-text);
  line-height: var(--lh-mid);
  padding: var(--gap-sm) var(--gap-md);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-main);
  color: var(--c-white);
  text-align: center;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.btn:hover {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}

.btn-outline {
  background: var(--c-white);
  color: var(--c-main);
}

.btn-outline:hover {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}

/* ----------------------------------------------------------
   9. HEADER
   Single bar: logo, navigation and booking CTA.
---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-main);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding-block: var(--gap-md);
}

/* Right-hand group: navigation beside the CTA */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img {
  width: 230px;
  height: 30px;
}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}

.nav a {
  line-height: var(--lh-mid);
  color: var(--c-white);
  white-space: nowrap;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--c-white), var(--c-white));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--border-w);
  transition: background-size var(--ease), color var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--c-white);
  background-size: 100% var(--border-w);
}

/* Header CTA */
.header-cta {
  display: inline-block;
  flex-shrink: 0;
  line-height: var(--lh-mid);
  padding: var(--gap-xs) var(--gap-md);
  border: var(--border-w) solid var(--c-white);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-main);
  white-space: nowrap;
  transition: background var(--ease), color var(--ease);
}

.header-cta:hover {
  background: var(--c-main);
  border-color: var(--c-white);
  color: var(--c-white);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-white);
  cursor: pointer;
  transition: color var(--ease);
}

.nav-toggle:hover {
  color: var(--c-section);
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

/* --- Drawer overlay --- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--c-black);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ease), visibility var(--ease);
}

.nav-overlay.is-open {
  opacity: 0.5;
  visibility: visible;
}

.nav-close {
  display: none;
  align-self: flex-end;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-white);
  cursor: pointer;
  transition: color var(--ease);
}

.nav-close:hover {
  color: var(--c-section);
}

.nav-close svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* --- Tablet and below: slide-in side drawer --- */
@media (max-width: 1099px) {
  .nav-toggle { display: flex; }

  .nav-close { display: block; }

  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    bottom: 0;
    z-index: 60;
    width: 300px;
    max-width: 82vw;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--gap-xs);
    padding: var(--gap-md) var(--gap-md) var(--gap-xl);
    background: var(--c-main);
    overflow-y: auto;
    transition: right var(--ease);
  }

  .nav.is-open { right: 0; }

  .nav a {
    padding: var(--gap-sm) 0;
    background-image: none;
  }

  .nav a:hover,
  .nav a[aria-current="page"] {
    color: var(--c-section);
  }
}

/* --- Small mobile --- */
@media (max-width: 599px) {



  .header-cta { display: none; }

  .logo img {
    width: 180px;
    height: 24px;
  }
}

/* ----------------------------------------------------------
   10. FOOTER — same dark treatment as the header
---------------------------------------------------------- */
.site-footer {
  background: var(--c-main);
  color: var(--c-white);
  padding-top: var(--gap-xl);
  padding-bottom: var(--gap-md);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.footer-grid {
  display: grid;
  gap: var(--gap-xl) var(--gap-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.footer-col h2,
.footer-col h3,
.footer-col h4,
.footer-col h5,
.footer-col h6 {
  color: var(--c-white);
}

.footer-brand {
  gap: var(--gap-sm);
}

.footer-brand img {
  width: 230px;
  height: 30px;
}

.footer-col p,
.footer-col span,
.footer-col li {
  color: var(--c-white);
}

/* Footer links carry the same underline behaviour as the header nav */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.footer-col a {
  align-self: flex-start;
  line-height: var(--lh-mid);
  color: var(--c-white);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--c-white), var(--c-white));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--border-w);
  transition: background-size var(--ease), color var(--ease);
}

.footer-col a:hover {
  color: var(--c-white);
  background-size: 100% var(--border-w);
}

.footer-contact {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.footer-contact svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-white);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm) var(--gap-md);
  padding-top: var(--gap-md);
  border-top: var(--border-w) solid var(--c-white);
}

@media (max-width: 599px) {
  .footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
}

.footer-bottom p,
.footer-bottom a {
  color: var(--c-white);
  line-height: var(--lh-mid);
}

.footer-bottom a {
  padding-bottom: 3px;
  background-image: linear-gradient(var(--c-white), var(--c-white));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--border-w);
  transition: background-size var(--ease);
}

.footer-bottom a:hover {
  background-size: 100% var(--border-w);
}

/* ----------------------------------------------------------
   11. HERO
---------------------------------------------------------- */
.hero {
  background: var(--c-section);
  padding-block: var(--section-y);
}

.hero-inner {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1fr 1fr; }
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-md);
}

/* Second half of a heading, carried in the main colour */
.text-main { color: var(--c-main); }

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

.hero-tag {
  line-height: var(--lh-mid);
  padding: var(--gap-xs) var(--gap-sm);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-main);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.hero-media {
  position: relative;
  aspect-ratio: 4 / 3;
  order: -1;
}

.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

/* On desktop the image runs a little taller than the content column */
@media (min-width: 900px) {
  .hero-media {
    aspect-ratio: auto;
    min-height: 420px;
    order: 0;
  }
}

/* Quick facts strip under the hero */
.facts {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
}

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-md);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.fact svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fact-label {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.fact-value {
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  line-height: var(--lh-mid);
  color: var(--c-black);
}


/* ----------------------------------------------------------
   12. SECTION HEAD — reused by every content section
---------------------------------------------------------- */
/* Every section is ONE stack with ONE gap. Nothing nests a second gap. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.section-eyebrow {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.section-head p {
  color: var(--c-black);
}

/* ----------------------------------------------------------
   13. GUIDE CARDS — internal link hub
---------------------------------------------------------- */
.guide-grid {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .guide-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .guide-grid { grid-template-columns: repeat(3, 1fr); }

  /* four cards fill one row instead of leaving two dead cells */
  .guide-grid.is-four { grid-template-columns: repeat(4, 1fr); }
}

.guide-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-lg);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-black);
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}

.guide-card svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--ease);
}

.guide-card h3 {
  line-height: var(--lh-tight);
  color: var(--c-black);
  transition: color var(--ease);
}

.guide-card p {
  color: var(--c-black);
  transition: color var(--ease);
}

.guide-more {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  line-height: var(--lh-mid);
  color: var(--c-main);
  transition: color var(--ease);
}

.guide-more svg {
  width: 18px;
  height: 18px;
}

.guide-card:hover {
  border-color: var(--c-black);
  background: var(--c-black);
  color: var(--c-white);
}

.guide-card:hover h3,
.guide-card:hover p,
.guide-card:hover .guide-more {
  color: var(--c-white);
}

.guide-card:hover svg { stroke: var(--c-white); }


/* ----------------------------------------------------------
   14. ABOUT — image and story side by side
---------------------------------------------------------- */
.about-inner {
  display: grid;
  gap: var(--gap-xl);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 900px) {
  .about-inner { grid-template-columns: 1fr 1fr; }
}

.about-media {
  position: relative;
  aspect-ratio: 4 / 3;
}

.about-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (min-width: 900px) {
  .about-media {
    aspect-ratio: auto;
    min-height: 570px;
  }
}

.about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-md);
}

.about-points {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  list-style: none;
}

.about-point {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  line-height: var(--lh-loose);
}

.about-point svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ----------------------------------------------------------
   15. TABLE — reused by every page that lists timings or fees
---------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: var(--gap-md);
  line-height: var(--lh-mid);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  background: var(--c-main);
  color: var(--c-white);
}

.table tbody tr {
  border-top: var(--border-w) solid var(--c-main);
}

.table th + th,
.table td + td {
  border-left: var(--border-w) solid var(--c-main);
}

.table thead th + th {
  border-left-color: var(--c-white);
}

/* Below 700px each row becomes a compact card, no repeated column labels */
@media (max-width: 700px) {
  .table thead { display: none; }

  .table,
  .table tbody { display: block; }

  .table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--gap-xs) var(--gap-sm);
    padding: var(--gap-md);
    border-top: var(--border-w) solid var(--c-main);
  }

  .table tbody tr:first-child { border-top: 0; }

  .table td,
  .table td + td {
    display: block;
    padding: 0;
    border-left: 0;
  }

  /* the first cell keeps stacking its time and description */
  .table-fees td:first-child {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .table td[data-label]::before { display: none; }

  /* two column tables: name on the left, value on the right */
  .table-fees td:last-child {
    width: auto;
    text-align: right;
    align-self: center;
  }

  /* schedule: time and description, session underneath, entry as a badge */
  .table-schedule td:nth-child(1) { grid-column: 1; grid-row: 1; }

  .table-schedule td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    line-height: var(--lh-mid);
    color: var(--c-main);
  }

  .table-schedule td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: max-content;
    align-self: start;
    justify-self: end;
    padding: var(--gap-xs) var(--gap-sm);
    border: var(--border-w) solid var(--c-main);
    border-radius: var(--radius);
    text-align: center;
    white-space: nowrap;
  }
}


/* ----------------------------------------------------------
   16. NOTE — small highlighted advisory block
---------------------------------------------------------- */
.note {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  padding: var(--gap-md);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
  line-height: var(--lh-loose);
}

.note svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------------------------------------
   17. DARSHAN SLOTS — colour alternates by position
---------------------------------------------------------- */
.slot-grid {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}

@media (min-width: 560px) {
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  /* six tiles fill two rows of three instead of five plus one */
  .slot-grid.is-three { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .slot-grid { grid-template-columns: repeat(5, 1fr); }
  .slot-grid.is-three { grid-template-columns: repeat(3, 1fr); }
}

.slot {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-md);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.slot-status {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.slot-status svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slot-time {
  font-family: var(--ff-heading);
  font-size: var(--fs-h4);
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.slot-name,
.slot-desc {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

/* Colour alternates by position so the grid reads as one clean sequence.
   Open or closed is carried by the tick or cross and its label. */
.slot:nth-child(odd) {
  background: var(--c-main);
}

.slot:nth-child(odd) .slot-status,
.slot:nth-child(odd) .slot-time,
.slot:nth-child(odd) .slot-name,
.slot:nth-child(odd) .slot-desc {
  color: var(--c-white);
}

.slot:nth-child(odd) .slot-status svg { stroke: var(--c-white); }

/* ----------------------------------------------------------
   18. FAQ — native details, no script, no transform
---------------------------------------------------------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.faq-item {
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: var(--gap-md);
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item h3 {
  line-height: var(--lh-mid);
  color: var(--c-black);
  transition: color var(--ease);
}

.faq-item summary:hover h3 { color: var(--c-main); }

.faq-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.faq-item.is-open .faq-plus { display: none; }
.faq-item:not(.is-open) .faq-minus { display: none; }

/* Panel stays in the DOM and animates on height, so no transform is needed */
.faq-answer {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  overflow: hidden;
  max-height: 0;
  padding-inline: var(--gap-md);
  padding-bottom: 0;
  transition: max-height var(--ease), padding-bottom var(--ease);
}

.faq-item.is-open .faq-answer {
  max-height: 400px;
  padding-bottom: var(--gap-md);
}

.faq-answer p {
  line-height: var(--lh-loose);
  color: var(--c-black);
}

/* ----------------------------------------------------------
   19. VAULT — panel on the left, image on the right
---------------------------------------------------------- */
.vault-compose {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: stretch;
}

.vault-media {
  position: relative;
  aspect-ratio: 16 / 10;
}

.vault-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.vault-panel {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: var(--gap-lg);
  border-radius: var(--radius);
  background: var(--c-main);
}

@media (min-width: 900px) {
  .vault-compose { grid-template-columns: 1fr 1fr; }

  /* Panel leads on the left, image sits on the right */
  .vault-panel {
    order: -1;
    padding: var(--gap-xl);
  }

  .vault-media { aspect-ratio: auto; }
}

.vault-panel .section-eyebrow,
.vault-panel h2 {
  color: var(--c-section);
}

.vault-panel h2 .text-main,
.vault-panel p {
  color: var(--c-white);
}

.vault-panel .btn {
  border-color: var(--c-white);
  background: var(--c-white);
  color: var(--c-main);
}

.vault-panel .btn-outline {
  background: var(--c-main);
  color: var(--c-white);
}

.vault-panel .btn:hover,
.vault-panel .btn-outline:hover {
  border-color: var(--c-black);
  background: var(--c-black);
  color: var(--c-white);
}

/* Figures sit inside the panel as white tiles */
.figure-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-sm);
}

@media (min-width: 620px) {
  .figure-row { grid-template-columns: repeat(2, 1fr); }
}

.figure {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-md);
  border: var(--border-w) solid var(--c-white);
  border-radius: var(--radius);
  background: var(--c-white);
}

.figure-value {
  font-family: var(--ff-heading);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--c-main);
}

.figure-label {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

/* ----------------------------------------------------------
   20. RULES — allowed against refused, side by side
---------------------------------------------------------- */
.rules-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: stretch;
}

@media (min-width: 900px) {
  .rules-split { grid-template-columns: 1fr 1fr; }
}

.rule-panel {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: var(--gap-lg);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.rule-panel.is-dark { background: var(--c-main); }

.rule-head {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.rule-head h3 {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.rule-head svg,
.rule-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rule-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.rule-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  line-height: var(--lh-loose);
  color: var(--c-black);
}

.rule-panel.is-dark .rule-head h3,
.rule-panel.is-dark .rule-item {
  color: var(--c-white);
}

.rule-panel.is-dark .rule-head svg,
.rule-panel.is-dark .rule-item svg {
  stroke: var(--c-white);
}

/* ----------------------------------------------------------
   21. FEES — the price table, built on the shared .table
---------------------------------------------------------- */
.table-fees td:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.fee-name {
  font-family: var(--ff-heading);
  font-size: var(--fs-h6);
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.fee-who {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.table-fees th:last-child,
.table-fees td:last-child {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.table-fees td:last-child {
  font-family: var(--ff-heading);
  font-size: var(--fs-h6);
}

/* text columns read left aligned, prices stay right */
.table.is-left th:last-child,
.table.is-left td:last-child {
  text-align: left;
}


/* ----------------------------------------------------------
   22. REACH — heading column beside a list of arrival points
---------------------------------------------------------- */
.reach-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xl);
  align-items: start;
}

@media (min-width: 900px) {
  .reach-split { grid-template-columns: 0.85fr 1.15fr; }

  /* heading column sits centred against the taller list */
  .reach-intro { align-self: center; }
}

.reach-intro {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.reach-list {
  display: flex;
  flex-direction: column;
}

/* Name and distance share the top line at every width,
   the how-to line runs full width underneath on small screens */
.reach-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--gap-md);
  row-gap: var(--gap-sm);
  padding-block: var(--gap-lg);
  border-top: var(--border-w) solid var(--c-main);
}

.reach-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.reach-name { grid-column: 1; grid-row: 1; }
.reach-how  { grid-column: 1 / -1; grid-row: 2; }
.reach-dist { grid-column: 2; grid-row: 1; }

@media (min-width: 560px) {
  .reach-row { column-gap: var(--gap-lg); }

  .reach-how  { grid-column: 1; }
  .reach-dist { grid-row: 1 / span 2; align-self: center; }
}

.reach-name {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.reach-name svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reach-how {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.reach-dist {
  font-family: var(--ff-heading);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--c-main);
  white-space: nowrap;
}

@media (min-width: 560px) {
  .reach-dist {
    font-size: var(--fs-h3);
    text-align: right;
  }
}


/* ----------------------------------------------------------
   23. NEARBY — borderless photo cards, the pictures carry it
---------------------------------------------------------- */
.nearby-grid {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .nearby-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .nearby-grid { grid-template-columns: repeat(4, 1fr); }
}

.nearby-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.nearby-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}

.nearby-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nearby-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.nearby-dist {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.nearby-name {
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.nearby-desc {
  line-height: var(--lh-mid);
  color: var(--c-black);
}


/* ----------------------------------------------------------
   24. FESTIVALS — a year ruler. One hairline runs the width of
   the section and each festival hangs a marker off it.
---------------------------------------------------------- */
.year-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}

@media (min-width: 560px) {
  .year-strip {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0;
    row-gap: var(--gap-xl);
  }
}

@media (min-width: 1000px) {
  .year-strip { grid-template-columns: repeat(4, 1fr); }
}

.year-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding-top: var(--gap-lg);
  border-top: var(--border-w) solid var(--c-main);
}

@media (min-width: 560px) {
  .year-item { padding-right: var(--gap-xl); }
  .year-item:last-child { padding-right: 0; }
}

/* the marker sits on the rule, not beside it */
.year-item::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: var(--radius);
  background: var(--c-main);
}

.year-month {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.year-name {
  font-family: var(--ff-heading);
  font-size: var(--fs-h4);
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.year-desc {
  line-height: var(--lh-loose);
  color: var(--c-black);
}


/* ----------------------------------------------------------
   25. CLOSING CTA — heading on the left, actions on the right
---------------------------------------------------------- */
.cta-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: center;
}

@media (min-width: 900px) {
  .cta-inner { grid-template-columns: 1fr auto; }
}

.cta-text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}


/* ----------------------------------------------------------
   26. BREADCRUMB — inner pages only
---------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-xs);
}

.crumbs a,
.crumbs span {
  line-height: var(--lh-mid);
}

.crumbs a { color: var(--c-main); }
.crumbs a:hover { color: var(--c-black); }
.crumbs [aria-current] { color: var(--c-black); }

.crumbs svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------------------------------------
   27. PAGE HERO — smaller opener for inner pages
---------------------------------------------------------- */
.page-hero {
  background: var(--c-section);
  padding-block: var(--section-y);
}


.page-hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.page-updated {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

/* ----------------------------------------------------------
   28. TOC — image left, solid contents panel right, equal height
---------------------------------------------------------- */
.toc-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: stretch;
}

@media (min-width: 900px) {
  .toc-split { grid-template-columns: 0.9fr 1.1fr; }
}

.toc-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}

.toc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .toc-media {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

.toc-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-md);
  padding: var(--gap-lg);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-main);
}

.toc-title {
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  line-height: var(--lh-mid);
  color: var(--c-section);
}

.toc-box p { color: var(--c-white); }

.toc-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-sm) var(--gap-lg);
}

@media (min-width: 600px) {
  .toc-list { grid-template-columns: repeat(2, 1fr); }
}

.toc-list a {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  line-height: var(--lh-mid);
  color: var(--c-white);
}

.toc-list svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-white);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--ease);
}

.toc-list a:hover { color: var(--c-section); }
.toc-list a:hover svg { stroke: var(--c-section); }

/* ----------------------------------------------------------
   29. PROSE — long form copy blocks
---------------------------------------------------------- */
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* Long copy runs in two columns so the line length stays readable */
.prose-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}

@media (min-width: 900px) {
  .prose-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gap-xl);
  }
}

.prose-block {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding-top: var(--gap-md);
  border-top: var(--border-w) solid var(--c-main);
}

.prose-block h3 {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.prose-block p {
  line-height: var(--lh-loose);
  color: var(--c-black);
}

.prose h3 {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.prose-grid ul,
.prose ul {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding-left: var(--gap-md);
}

.prose-grid li,
.prose li {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  line-height: var(--lh-loose);
  color: var(--c-black);
}

.prose-grid li::before,
.prose li::before {
  content: '';
  position: relative;
  top: 0.62em;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--c-main);
}

/* Anchored sections must not hide under the sticky header */
[id] { scroll-margin-top: 90px; }

/* ----------------------------------------------------------
   30. BLOG — listing grid, load more, article layout
   Same four colours, same radius, same gap tokens as the rest
   of the site. The only two transforms in this stylesheet live
   in the keyframes below, because the brief asked for a fade-up
   reveal and a spinner; both stop under prefers-reduced-motion.
---------------------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}

@media (min-width: 600px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

.blog-card {
  display: flex;
  flex-direction: column;
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
  overflow: hidden;
  transition: border-color var(--ease), background var(--ease);
}

.blog-media {
  display: block;
  border-bottom: var(--border-w) solid var(--c-main);
}

.blog-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.blog-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-lg);
  flex: 1 1 auto;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-xs) var(--gap-sm);
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.blog-meta span {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.blog-meta svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-card h2,
.blog-card h3 {
  line-height: var(--lh-mid);
  color: var(--c-black);
  transition: color var(--ease);
}

.blog-card h2 a,
.blog-card h3 a { color: inherit; }

.blog-excerpt {
  color: var(--c-black);
  flex: 1 1 auto;
}

.blog-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  align-self: flex-start;
  padding: var(--gap-xs) var(--gap-md);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-main);
  color: var(--c-white);
  line-height: var(--lh-mid);
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.blog-view svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-card:hover { border-color: var(--c-black); background: var(--c-section); }
.blog-card:hover .blog-view { background: var(--c-black); border-color: var(--c-black); }
.blog-view:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }

/* Cards past the first nine stay hidden until Load more runs.
   Both rules are needed: the author display value would otherwise
   win over the hidden attribute and the element would stay visible. */
.blog-card[hidden],
.blog-more-wrap[hidden] { display: none; }

/* ---- Load more ---- */
.blog-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  padding-top: var(--gap-xl);
}

.blog-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  min-height: 46px;
  padding: var(--gap-sm) var(--gap-xl);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-main);
  font-family: var(--ff-body);
  line-height: var(--lh-mid);
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.blog-more:hover { background: var(--c-main); color: var(--c-white); }
.blog-more[disabled] { cursor: default; }

/* Spinner sits to the right of the label, visible only while loading */
.blog-spinner {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid var(--c-section);
  border-top-color: var(--c-main);
  border-radius: 50%;
}

.blog-more.is-loading .blog-spinner { display: block; animation: blog-spin 0.7s linear infinite; }
.blog-more.is-loading:hover .blog-spinner { border-top-color: var(--c-white); }

.blog-count { line-height: var(--lh-mid); color: var(--c-black); }

@keyframes blog-spin { to { transform: rotate(360deg); } }

@keyframes blog-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.blog-card.is-revealed { animation: blog-fade-up 0.45s ease both; }

@media (prefers-reduced-motion: reduce) {
  .blog-card.is-revealed { animation: none; }
  .blog-more.is-loading .blog-spinner { animation: none; }
}

/* ----------------------------------------------------------
   31. ARTICLE — blog detail: header-width container, sticky
   sidebar, and one extra text size for long-form reading.
---------------------------------------------------------- */

:root {
  --article-col: 820px;
  --aside-col: 320px;
  --sticky-top: 74px;
}

/* Tighter than a landing page throughout; a long read does not need
   80px between every block. Scoped to the article pages only, so the
   rest of the site keeps its original rhythm. */
.article-page .section { padding-block: var(--gap-xl); }
.article-page .page-hero { padding-block: var(--gap-xl); }
.article-page .section-head { gap: var(--gap-sm); }

.article-page .faq-item summary { padding-block: var(--gap-sm); }

.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xl);
  align-items: start;
}

.article-intro,
.article-main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  min-width: 0;
}

.article-main { gap: var(--gap-xl); }

@media (min-width: 1000px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) var(--aside-col);
    column-gap: var(--gap-xl);
    row-gap: var(--gap-xl);
  }
  .article-intro { grid-column: 1; grid-row: 1; }
  .article-main  { grid-column: 1; grid-row: 2; }
  .article-aside {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: var(--sticky-top);
    align-self: start;
    max-height: calc(100vh - var(--sticky-top) - var(--gap-md));
    overflow-y: auto;
  }
}

.article-hero-media {
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  overflow: hidden;
}

.article-hero-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.article-figcaption {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.article-figcaption a { color: var(--c-main); }

.article-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  scroll-margin-top: calc(var(--sticky-top) + var(--gap-sm));
}

.article-section h2 {
  line-height: var(--lh-mid);
  color: var(--c-black);
  padding-top: var(--gap-xs);
}

.article-section h3 {
  line-height: var(--lh-mid);
  color: var(--c-main);
  padding-top: var(--gap-xs);
}

.article-section p,
.article-section li {
  line-height: var(--lh-loose);
  color: var(--c-black);
}

.article-section ul,
.article-section ol {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding-left: 0;
}

/* Block, not flex: a leading <strong> must stay inline with the text
   that follows it instead of becoming its own column. */
.article-section li {
  display: block;
  position: relative;
  /* 6px dot + one --gap-sm of breathing room, so the space between the
     dot and the text matches the flex lists in .prose exactly. */
  padding-left: calc(6px + var(--gap-sm));
}

.article-section li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius);
  background: var(--c-main);
}

/* Numbered steps keep a counter instead of a dot */
.article-section ol { counter-reset: step; }

/* Same rule, but the counter chip is 22px wide instead of a 6px dot */
.article-section ol li { padding-left: calc(22px + var(--gap-sm)); }

.article-section ol li::before {
  counter-increment: step;
  content: counter(step);
  top: 0.1em;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--c-main);
  color: var(--c-white);
  line-height: 1;
}

/* Answer-first summary directly under the hero */
.answer-box {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-lg);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-section);
}

.answer-box h2,
.answer-box h3 {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.answer-box p,
.answer-box li {
  color: var(--c-black);
}

.key-points {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-lg);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.key-points h2 {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.key-points ul {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding-left: 0;
}

.key-points li {
  display: block;
  position: relative;
  padding-left: calc(6px + var(--gap-sm));
  line-height: var(--lh-loose);
  color: var(--c-black);
}

.key-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius);
  background: var(--c-main);
}

/* Byline strip under the H1 */
.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-xs) var(--gap-lg);
  padding-top: var(--gap-xs);
}

.article-byline span {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.article-byline svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Sidebar table of contents ----
   The shared .toc-box styling stays; these only make it work as a
   narrow rail rather than a full-width band. */
.article-aside .toc-box {
  justify-content: flex-start;
  gap: var(--gap-sm);
  padding: var(--gap-md);
}

.article-aside .toc-list {
  grid-template-columns: 1fr;
  gap: var(--gap-xs);
}

.article-aside .toc-list a { align-items: flex-start; }

.article-aside .toc-list a svg { margin-top: 0.15em; }