:root {
  --mist: #fbf6ea;       /* page: light cream */
  --mist-deep: #f3ead6;  /* quiet bands: deeper cream */
  --forest: #2a2a1f;     /* ink: warm dark olive */
  --sage: #6e6650;       /* secondary text: warm grey */
  --line: #e4d8bd;       /* hairlines */
  --robe: #b8790f;       /* the one accent: robe gold */
  --robe-ink: #87570a;   /* accent text that must pass contrast */
  --paper: #fffcf4;      /* lightest cream for raised bands */

  --display: "Abhaya Libre", "Noto Serif Sinhala", Georgia, serif;
  --body: "Noto Sans Sinhala", system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
  --measure: 38rem;
}

@media not all /* dark mode switched off: always light cream */ {
  :root {
    --mist: #141c18; --mist-deep: #1b2520; --forest: #e3ebe5; --sage: #9fb2a7;
    --line: #2f3d36; --robe: #d9a441; --robe-ink: #e2b25a; --paper: #18211c;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--mist);
  color: var(--forest);
  font: 400 1.0625rem/1.85 var(--body);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--robe); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.25; margin: 0 0 .6em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; max-width: var(--measure); }
.small { font-size: .9rem; color: var(--sage); }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--forest); color: var(--mist); padding: .5em 1em; z-index: 10; }
.skip:focus { left: 8px; }

/* header */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem var(--gutter);
  color: #f4f7f4;
}
.mark { font-family: var(--display); font-weight: 800; font-size: 1.5rem; text-decoration: none; }
.top nav { display: flex; gap: clamp(1rem, 2.4vw, 2rem); font-size: .95rem; }
.top nav a { text-decoration: none; opacity: .9; }
.top nav a:hover { opacity: 1; text-decoration: underline; }
.menu-btn { display: none; }

/* hero */
.hero { position: relative; min-height: min(100svh, 56rem); display: grid; align-items: end; overflow: hidden; color: #f4f7f4; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16, 28, 22, .78) 0%, rgba(16, 28, 22, .45) 45%, rgba(16, 28, 22, .05) 80%),
              linear-gradient(0deg, rgba(16, 28, 22, .55), transparent 40%);
}
.hero-text { position: relative; z-index: 1; padding: 8rem var(--gutter) clamp(3rem, 9vh, 6rem); max-width: 46rem; }
.hero h1 {
  font-size: clamp(3rem, 9vw, 6.75rem); font-weight: 800; line-height: 1.05;
  letter-spacing: -.01em; margin-bottom: .35em;
  animation: settle 1.6s ease-out both;
}
.lede { font-size: clamp(1.05rem, 1.8vw, 1.25rem); opacity: .95; }
.path { font-family: var(--display); font-size: 1.25rem; color: #f0d79e; margin-bottom: 1.75rem; }
@keyframes settle { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .hero h1 { animation: none; } }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.btn {
  display: inline-block; padding: .7em 1.4em; border-radius: 999px;
  border: 1px solid currentColor; text-decoration: none; font-weight: 500; font-size: .98rem;
}
.btn.primary { background: var(--robe); border-color: var(--robe); color: #1b1407; }
.btn.primary:hover { filter: brightness(1.08); }
.btn:not(.primary):hover { background: rgba(255, 255, 255, .08); }
.link { color: var(--robe-ink); font-weight: 500; }

/* the day of nine sermons */
.day { background: var(--paper); padding: clamp(4rem, 9vw, 7rem) 0; border-bottom: 1px solid var(--line); }
.next { font-size: 1.1rem; color: var(--sage); }
.next strong { font-family: var(--display); font-size: 1.6rem; color: var(--forest); margin: 0 .25em; }
.timeline {
  list-style: none; margin: 3rem 0 1.5rem; padding: 2.2rem 0 0;
  position: relative; display: grid; grid-template-columns: repeat(9, 1fr);
  font-size: .85rem; color: var(--sage);
}
.timeline::before { /* the day as one line, midnight to midnight */
  content: ""; position: absolute; left: 0; right: 0; top: .55rem; height: 1px; background: var(--line);
}
.timeline li { position: relative; text-align: center; white-space: nowrap; }
.timeline li::before {
  content: ""; position: absolute; left: 50%; top: -2.2rem; translate: -50% 0;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--sage);
}
.timeline li.past::before { background: var(--line); border-color: var(--line); }
.timeline li.past { opacity: .6; }
.timeline li.is-next { color: var(--forest); font-weight: 600; }
.timeline li.is-next::before { background: var(--robe); border-color: var(--robe); box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--robe) 18%, transparent); }
.note { font-size: .9rem; color: var(--sage); margin-bottom: 1.5rem; }

@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; padding: 0 0 0 2rem; gap: .9rem; margin-top: 2rem; }
  .timeline::before { left: .55rem; right: auto; top: .4rem; bottom: .4rem; width: 1px; height: auto; }
  .timeline li { text-align: left; font-size: 1rem; }
  .timeline li::before { left: -1.45rem; top: .45rem; translate: -50% 0; width: .9rem; height: .9rem; }
}

/* teachings */
.teachings { padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
.t-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 0 3rem; margin-bottom: 2.5rem; }
.t-head p { color: var(--sage); }
.sermons {
  list-style: none; margin: 0 0 2.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 2.25rem 1.75rem;
}
.sermon {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: .35rem; width: 100%;
}
.sermon img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; margin-bottom: .5rem;
  background: var(--mist-deep); transition: filter .2s;
}
.s-title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.35; }
.s-kind { font-size: .88rem; color: var(--robe-ink); }
.sermon:hover img { filter: brightness(1.06) saturate(1.05); }
.sermon:hover .s-title { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.sermon:focus-visible { outline: 2px solid var(--robe); outline-offset: 6px; border-radius: 6px; }

.player {
  width: min(64rem, 94vw); padding: 0; border: 0; border-radius: 10px;
  background: #0f1713; color: #e3ebe5;
}
.player::backdrop { background: rgba(10, 18, 14, .82); }
.player-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem; font-family: var(--display); font-size: 1.1rem; }
.player-bar button { all: unset; cursor: pointer; font-family: var(--body); font-size: .9rem; padding: .3em .9em; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; }
.player-bar button:focus-visible { outline: 2px solid var(--robe); outline-offset: 2px; }
.player-frame { aspect-ratio: 16 / 9; }
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* the venerable */
.aryan { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--mist-deep); }
.aryan img { width: 100%; height: 100%; object-fit: cover; min-height: 22rem; }
.aryan-text { padding: clamp(3rem, 7vw, 6rem) var(--gutter); align-self: center; }
blockquote {
  margin: 0 0 1.2rem; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.35; color: var(--robe-ink);
}

/* ways to listen */
.listen { padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 6vw, 5rem); margin: 2rem 0 0; }
.ways dt { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin-bottom: .3rem; }
.ways dd { margin: 0; color: var(--sage); max-width: var(--measure); }
.ways dd a { color: var(--forest); }

/* meditation center */
.center { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; background: var(--forest); color: var(--mist); }
.center-media { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4px; }
.center-media img { width: 100%; height: 100%; object-fit: cover; min-height: 20rem; }
.center-text { padding: clamp(3rem, 7vw, 6rem) var(--gutter); align-self: center; }
.center .en { color: #b9c8bf; font-size: .98rem; }
.center .link { color: #f0d79e; }
@media not all /* dark mode switched off: always light cream */ {
  .center { background: #0e1512; color: #e3ebe5; }
}

/* network */
.network { padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
.intro { color: var(--sage); font-size: 1.1rem; }
.places { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(2rem, 6vw, 5rem); margin-top: 2.5rem; }
.places ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: 1.1rem; }
.places .abroad { flex-direction: column; gap: .5rem; }

/* social service */
.service { background: var(--mist-deep); padding: clamp(4rem, 9vw, 7rem) 0; }
.acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 2.5rem 0 2rem; }
.acts > div { border-top: 2px solid var(--robe); padding-top: 1rem; }
.acts p { color: var(--sage); font-size: .98rem; }

/* contact */
.contact { padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
.phones { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 44rem; }
.phones li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .9rem 0; border-top: 1px solid var(--line); }
.phones span { color: var(--sage); }
.phones a { font-family: var(--display); font-size: 1.35rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.phones a:hover { color: var(--robe-ink); }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 3rem 0; font-size: .95rem; }
.foot-inner { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.foot img { width: 120px; }
.sites { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .9rem; }

/* small screens */
@media (max-width: 900px) {
  .aryan, .center, .places { grid-template-columns: 1fr; }
  .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ways { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .menu-btn {
    display: block; background: none; color: inherit; font: inherit;
    border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; padding: .35em 1em;
  }
  .top nav {
    display: none; position: absolute; top: 100%; left: var(--gutter); right: var(--gutter);
    flex-direction: column; gap: 0; background: var(--paper); color: var(--forest);
    border-radius: 12px; padding: .5rem 1.25rem; box-shadow: 0 12px 32px rgba(16, 28, 22, .25);
  }
  .top nav.open { display: flex; }
  .top nav a { padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .top nav a:last-child { border-bottom: 0; }
  .acts { grid-template-columns: 1fr; }
  .center-media { grid-template-columns: 1fr; }
  .center-media img:last-child { display: none; }
}

/* picture styles: light hero (pale image) and minimal hero (no photo) */
.hero-light .top, .hero-none .top { color: var(--forest); }
.hero-light .menu-btn, .hero-none .menu-btn { border-color: var(--line); }
.hero-light .hero, .hero-none .hero { color: var(--forest); }
.hero-light .hero::after {
  background: linear-gradient(90deg, rgba(247, 249, 247, .92) 0%, rgba(247, 249, 247, .7) 42%, rgba(247, 249, 247, 0) 75%);
}
.hero-light .path, .hero-none .path { color: var(--robe-ink); }
.hero-light .hero .btn:not(.primary):hover, .hero-none .hero .btn:not(.primary):hover { background: rgba(31, 46, 40, .06); }

.hero-none .hero { background: radial-gradient(120% 90% at 85% 30%, var(--paper) 0%, var(--mist) 45%, var(--mist-deep) 100%); align-items: center; }
.hero-none .hero::after { display: none; }
.hero-none .hero-text { padding-top: 9rem; }
.lotus-line {
  position: absolute; right: clamp(-6rem, -4vw, 0rem); bottom: -2rem; width: min(46rem, 70vw);
  color: var(--robe); opacity: .55; pointer-events: none;
}
.hero-none .aryan { grid-template-columns: 1fr; }
.hero-none .aryan img { display: none; }
.hero-none .aryan-text { max-width: 52rem; margin: 0 auto; text-align: center; }
.hero-none .aryan-text p { margin-left: auto; margin-right: auto; }

@media not all /* dark mode switched off: always light cream */ {
  .hero-light .hero::after { background: linear-gradient(90deg, rgba(20, 28, 24, .9) 0%, rgba(20, 28, 24, .65) 45%, rgba(20, 28, 24, .1) 80%); }
}
@media (max-width: 760px) {
  .hero-light .hero::after { background: linear-gradient(0deg, rgba(247, 249, 247, .95) 30%, rgba(247, 249, 247, .4) 70%, rgba(247, 249, 247, .2)); }
  .lotus-line { width: 120vw; right: -30vw; opacity: .3; }
}
@media not all /* dark mode switched off */ {
  .hero-light .hero::after { background: linear-gradient(0deg, rgba(20, 28, 24, .95) 30%, rgba(20, 28, 24, .5) 70%, rgba(20, 28, 24, .2)); }
}

/* keep the white menu readable over bright skies */
body:not(.hero-light):not(.hero-none) .hero::after {
  background: linear-gradient(180deg, rgba(16, 28, 22, .55) 0%, transparent 22%),
              linear-gradient(90deg, rgba(16, 28, 22, .78) 0%, rgba(16, 28, 22, .45) 45%, rgba(16, 28, 22, .05) 80%),
              linear-gradient(0deg, rgba(16, 28, 22, .55), transparent 40%);
}

/* Dhamma Abhijna */
.abhijna {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem);
  align-items: center; padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(4rem, 9vw, 7rem);
}
.abhijna img { width: 100%; border-radius: 6px; }
.abhijna .big { font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.55; margin-bottom: 1.75rem; }
.abhijna .btn { color: var(--forest); }

/* latest news */
.news { background: var(--paper); padding: clamp(4rem, 9vw, 7rem) 0; border-top: 1px solid var(--line); }
.news-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; margin-top: 2rem; }
.news-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; margin-bottom: 1rem; }
.news-item h3 { font-size: 1.25rem; line-height: 1.4; margin-bottom: .4rem; }
.news-item h3 a { text-decoration: none; }
.news-item h3 a:hover { text-decoration: underline; }
.news-item p { color: var(--sage); font-size: .98rem; }
.n-date { font-size: .85rem; color: var(--robe-ink); margin-bottom: .3rem; }

/* inner pages */
.page .top { position: static; color: var(--forest); border-bottom: 1px solid var(--line); background: var(--paper); }
.page .menu-btn { border-color: var(--line); }
.article { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 6rem); }
.prose { max-width: 46rem; }
.prose h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.25; }
.prose h2 { font-size: 1.5rem; margin-top: 2rem; }
.prose p, .prose li { font-size: 1.08rem; line-height: 1.95; }
.prose ul { padding-left: 1.2rem; }
.crumb { font-size: .9rem; color: var(--sage); }
.crumb a { color: var(--robe-ink); }
.lead-img { margin: 1.5rem 0 2rem; }
.lead-img img { width: 100%; border-radius: 6px; max-height: 34rem; object-fit: cover; }
.prose .verse { font-family: var(--display); font-size: 1.4rem; line-height: 1.7; }
.prose .account { font-family: var(--display); font-size: 1.2rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.page-actions .btn:not(.primary) { color: var(--forest); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem; margin-top: 2.5rem; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }

@media (max-width: 900px) {
  .abhijna, .news-list { grid-template-columns: 1fr; }
  .abhijna img { max-width: 28rem; }
}

/* ---------- mobile-first refinements (phones are the main audience) ---------- */

/* bottom action bar: always within thumb reach on phones */
.dock { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 4.5rem; }
  .dock {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(8px); border-top: 1px solid var(--line);
  }
  .dock a {
    display: flex; align-items: center; justify-content: center; min-height: 2.9rem;
    border-radius: 999px; text-decoration: none; font-size: .92rem; font-weight: 500;
    border: 1px solid var(--line); color: var(--forest);
  }
  .dock a.go { background: var(--robe); border-color: var(--robe); color: #1b1407; }

  /* Zoom times: a compact 3 x 3 grid instead of a tall list */
  .timeline { grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: 0; margin: 1.5rem 0 1.25rem; }
  .timeline::before { display: none; }
  .timeline li {
    text-align: center; font-size: .95rem; padding: .7rem .25rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  }
  .timeline li::before { display: none; }
  .timeline li.past { opacity: .45; }
  .timeline li.is-next { background: var(--robe); border-color: var(--robe); color: #1b1407; }
  .next strong { display: block; font-size: 2rem; margin: .1rem 0; }

  /* sermons: swipe sideways instead of 12 stacked cards */
  .sermons {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none;
    gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gutter)) 1.5rem; padding: 0 var(--gutter) .75rem;
    scrollbar-width: none;
  }
  .sermons::-webkit-scrollbar { display: none; }
  .sermons li { scroll-snap-align: start; }
  .s-title { font-size: 1.1rem; }
  .t-head { margin-bottom: 1.25rem; }
  .teachings .swipe-hint { display: block; font-size: .85rem; color: var(--sage); margin: -.5rem 0 1rem; }

  /* tighter vertical rhythm on small screens */
  .day, .news, .service { padding: 3rem 0; }
  .teachings, .listen, .network, .contact, .abhijna { padding-top: 3rem; padding-bottom: 3rem; }
  .hero { min-height: 88svh; }
  .hero-text { padding-bottom: 2.5rem; }
  .actions .btn { flex: 1 1 auto; text-align: center; }
  .phones a { font-size: 1.25rem; }
  .phones li { padding: .8rem 0; }
}
.swipe-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .sermons { scroll-behavior: auto; } }

/* visitor's own local time under each Sri Lanka time */
.timeline .local { display: block; font-size: .78em; font-weight: 400; color: var(--sage); margin-top: .15rem; }
.timeline li.is-next .local { color: inherit; opacity: .8; }

/* three organisations in one row */
.orgs { padding: clamp(4rem, 9vw, 7rem) 0; background: var(--mist-deep); }
.org-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2rem; }
.org { display: flex; flex-direction: column; background: var(--paper); border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.org-img img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; display: block; }
.org h3 { margin: 1.25rem 1.25rem .5rem; font-size: 1.3rem; }
.org p { margin: 0 1.25rem 1rem; color: var(--sage); font-size: .98rem; }
.org .org-links { margin-top: auto; padding-bottom: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.org .link.quiet { color: var(--sage); }
@media (max-width: 900px) { .org-row { grid-template-columns: 1fr; max-width: 32rem; } }
@media (max-width: 760px) { .orgs { padding: 3rem 0; } .org-row { gap: 1.25rem; } }

/* pale lotus hero: Buddha on the left, dark text on the right over the soft sky */
.hero-right .hero { justify-items: end; }
.hero-right .hero img { object-position: 30% 50%; }
.hero-right .hero-text { margin-left: auto; }
.hero-right .hero::after {
  background: linear-gradient(270deg, rgba(255, 252, 244, .92) 0%, rgba(255, 252, 244, .72) 38%, rgba(255, 252, 244, 0) 68%);
}
.hero-right .top { color: var(--forest); }
.hero-right .top .mark { color: #fff; text-shadow: 0 1px 12px rgba(60, 40, 70, .35); }
@media (max-width: 760px) {
  .hero-right .hero { justify-items: stretch; }
  .hero-right .hero img { object-position: 22% 30%; }
  .hero-right .hero::after {
    background: linear-gradient(0deg, rgba(255, 252, 244, .97) 0%, rgba(255, 252, 244, .9) 42%, rgba(255, 252, 244, 0) 70%);
  }
  .hero-right .top .menu-btn { color: #fff; border-color: rgba(255, 255, 255, .8); text-shadow: 0 1px 8px rgba(60, 40, 70, .4); }
}

/* phones: show the lotus picture clearly on top, text underneath on cream */
@media (max-width: 760px) {
  .hero-right .hero { display: block; min-height: 0; background: var(--mist); }
  .hero-right .hero img { position: relative; height: 58svh; min-height: 20rem; object-position: 28% 40%; }
  .hero-right .hero::after { top: auto; height: 6rem; bottom: auto; inset: calc(58svh - 6rem) 0 auto 0;
    background: linear-gradient(0deg, var(--mist), rgba(251, 246, 234, 0)); }
  .hero-right .hero-text { padding: 1.25rem var(--gutter) 2.5rem; }
  .hero-right .hero h1 { font-size: clamp(2.6rem, 11vw, 3.4rem); }
}

/* phones: sermons two per row (replaces the sideways swipe) */
@media (max-width: 760px) {
  .sermons {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem .9rem; overflow: visible; scroll-snap-type: none; margin: 0 0 1.5rem; padding: 0;
  }
  .sermon img { aspect-ratio: 4 / 3; margin-bottom: .35rem; }
  .s-title { font-size: .98rem; line-height: 1.4; }
  .teachings .swipe-hint { display: none; }
}
.next .next-local { display: block; font-family: var(--body); font-size: .95rem; font-weight: 400; color: var(--sage); margin-top: .1rem; }
@media (min-width: 761px) { .next .next-local { display: inline; margin-left: .6rem; } }

/* live session */
.timeline li.is-live { color: var(--forest); font-weight: 600; }
.timeline li.is-live::before { background: #c0392b; border-color: #c0392b; box-shadow: 0 0 0 .5rem rgba(192, 57, 43, .18); }
.day.is-live #next-label { color: #b03a2e; font-weight: 600; }
.all-times { display: none; }

/* phones: show only the next (or live) session; the full list opens on request */
@media (max-width: 760px) {
  .day .timeline { display: none; }
  .day.show-all .timeline { display: grid; }
  .timeline li.is-live { background: #c0392b; border-color: #c0392b; color: #fff; }
  .all-times {
    display: inline-block; all: unset; cursor: pointer; display: inline-block;
    color: var(--robe-ink); font-size: .95rem; text-decoration: underline; text-underline-offset: .25em;
    margin: .25rem 0 1rem;
  }
  .all-times:focus-visible { outline: 2px solid var(--robe); outline-offset: 3px; }
  .day .next {
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; margin-top: 1.25rem;
  }
  .day.is-live .next { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
  .day .note { font-size: .85rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .day.is-live #next-label { animation: livepulse 1.6s ease-in-out infinite; }
}
@keyframes livepulse { 50% { opacity: .55; } }

/* smaller hero text */
.hero h1, .hero-right .hero h1 { font-size: clamp(2.1rem, 5.2vw, 4.2rem); margin-bottom: .45em; }
.hero .lede { font-size: clamp(.98rem, 1.4vw, 1.1rem); }
.hero .path { font-size: 1.05rem; margin-bottom: 1.4rem; }
@media (max-width: 760px) {
  .hero h1, .hero-right .hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .hero .lede { font-size: .98rem; line-height: 1.75; }
  .hero .path { font-size: .98rem; }
}

/* section pages (Zoom, sermons, news, network, contact) */
.page-title { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin-bottom: .6em; }
.page-main > section:first-child { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.page-main .day { border-bottom: 0; }

/* ---------- cinematic scroll: the three organisation cards ---------- */
.org-img { display: block; overflow: hidden; }
.org-img img { will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  /* browsers with scroll-driven animations: the motion is tied to the scroll position */
  @supports (animation-timeline: view()) {
    .orgs h2 {
      animation: orgs-title linear both; animation-timeline: view(); animation-range: entry 10% cover 30%;
    }
    .org {
      animation: org-in linear both; animation-timeline: view(); animation-range: entry 0% cover 32%;
    }
    .org:nth-child(2) { animation-range: entry 12% cover 40%; }
    .org:nth-child(3) { animation-range: entry 24% cover 48%; }
    .org-img img {
      animation: org-pan linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
  }
  /* other browsers: the same moves, played once as each card arrives (see main.js) */
  .reveal-fallback .orgs h2, .reveal-fallback .org {
    opacity: 0; transform: translateY(70px) scale(.96); filter: blur(6px);
    transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1), filter 1s ease;
  }
  .reveal-fallback .org:nth-child(2) { transition-delay: .18s; }
  .reveal-fallback .org:nth-child(3) { transition-delay: .36s; }
  .reveal-fallback .orgs h2.in, .reveal-fallback .org.in { opacity: 1; transform: none; filter: none; }
  .reveal-fallback .org-img img { transform: scale(1.15); transition: transform 2.4s cubic-bezier(.2, .7, .2, 1); }
  .reveal-fallback .org.in .org-img img { transform: scale(1.02); }
}

@keyframes orgs-title { from { opacity: 0; transform: translateY(40px); letter-spacing: .04em; } to { opacity: 1; transform: none; letter-spacing: normal; } }
@keyframes org-in {
  from { opacity: 0; transform: translateY(90px) scale(.94); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes org-pan {
  from { transform: scale(1.28) translateY(-7%); }
  to   { transform: scale(1.04) translateY(6%); }
}

/* ---------- cinematic scroll v2: pinned section, one card at a time ---------- */
.orgs.cine { height: 320vh; padding: 0; }
.orgs.cine h2, .orgs.cine .org, .orgs.cine .org-img img { animation: none; }
.orgs.cine > .wrap {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; padding-top: 2rem; padding-bottom: 2rem;
}
.orgs.cine .org-row { position: relative; display: block; height: min(62vh, 34rem); margin-top: 1.5rem; max-width: none; }
.orgs.cine .org {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1.35fr 1fr; align-items: stretch;
  opacity: 0; transform: translateY(60px) scale(.97); pointer-events: none;
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  box-shadow: 0 30px 60px -30px rgba(70, 50, 20, .35);
}
.orgs.cine .org.is-before { transform: translateY(-60px) scale(.97); }
.orgs.cine .org.is-active { opacity: 1; transform: none; pointer-events: auto; }
.orgs.cine .org-img { height: 100%; }
.orgs.cine .org-img img { height: 100%; aspect-ratio: auto; transform: scale(calc(1.14 - var(--step, 0) * .12)); transition: transform .2s linear; }
.orgs.cine .org > :not(.org-img) { grid-column: 2; }
.orgs.cine .org-img { grid-row: 1 / span 4; }
.orgs.cine .org h3 { margin: 2.2rem 2rem .6rem; font-size: clamp(1.4rem, 2.4vw, 2rem); align-self: end; }
.orgs.cine .org p { margin: 0 2rem 1rem; font-size: 1.05rem; }
.orgs.cine .org .org-links { padding-bottom: 2.2rem; }

.org-steps { display: none; }
.orgs.cine .org-steps { display: flex; gap: .6rem; justify-content: center; margin-top: 1.5rem; }
.org-steps button {
  all: unset; cursor: pointer; width: 2.6rem; height: .3rem; border-radius: 99px; background: var(--line);
  transition: background .4s, width .4s;
}
.org-steps button[aria-current="step"] { background: var(--robe); width: 4rem; }
.org-steps button:focus-visible { outline: 2px solid var(--robe); outline-offset: 4px; }

@media (max-width: 760px) {
  .orgs.cine > .wrap { height: calc(100svh - 4.5rem); padding-top: 1.25rem; padding-bottom: 1rem; }
  .orgs.cine h2 { font-size: 1.5rem; margin-bottom: 0; }
  .orgs.cine .org-row { height: min(68svh, 36rem); margin-top: 1rem; }
  .orgs.cine .org { grid-template-columns: 1fr; grid-template-rows: 44% auto auto 1fr; }
  .orgs.cine .org > :not(.org-img) { grid-column: 1; }
  .orgs.cine .org-img { grid-row: 1; }
  .orgs.cine .org h3 { margin: 1rem 1.1rem .4rem; font-size: 1.2rem; align-self: start; }
  .orgs.cine .org p { margin: 0 1.1rem .6rem; font-size: .95rem; }
  .orgs.cine .org .org-links { padding-bottom: 1.1rem; align-self: end; }
  .orgs.cine .org-steps { margin-top: 1rem; }
}

/* ---------- cinematic scroll v3: each card is a full-screen picture with a gradient ---------- */
.orgs.cine { background: #1d1a14; }
.orgs.cine > .wrap {
  max-width: none; padding: 0; justify-content: flex-end; overflow: hidden;
}
.orgs.cine h2 {
  position: absolute; z-index: 3; top: clamp(1.5rem, 5vh, 3rem); left: var(--gutter); margin: 0;
  color: #fffaf0; font-size: clamp(1.3rem, 2.2vw, 1.8rem); text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.orgs.cine .org-row { position: absolute; inset: 0; height: auto; margin: 0; }
.orgs.cine .org {
  display: block; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden;
  transform: scale(1.04); transition: opacity 1s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.orgs.cine .org.is-before { transform: scale(1.04); }
.orgs.cine .org.is-active { transform: none; }
.orgs.cine .org-img { position: absolute; inset: 0; height: auto; }
.orgs.cine .org-img img { width: 100%; height: 100%; object-fit: cover; }
.orgs.cine .org-img::after { /* the gradient that carries the text */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(24, 18, 10, .78) 0%, rgba(24, 18, 10, .45) 38%, rgba(24, 18, 10, 0) 68%),
    linear-gradient(0deg, rgba(24, 18, 10, .7) 0%, rgba(24, 18, 10, 0) 45%),
    linear-gradient(180deg, rgba(24, 18, 10, .45) 0%, rgba(24, 18, 10, 0) 22%);
}
.orgs.cine .org > :not(.org-img) {
  position: relative; z-index: 2; color: #fffaf0; max-width: 36rem; margin-left: var(--gutter); margin-right: var(--gutter);
}
.orgs.cine .org h3 {
  position: absolute; left: 0; bottom: calc(clamp(5rem, 14vh, 8rem) + 7.5rem);
  margin: 0 var(--gutter); font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.2; color: #fffaf0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.orgs.cine .org p {
  position: absolute; left: 0; bottom: calc(clamp(5rem, 14vh, 8rem) + 2.6rem);
  margin: 0 var(--gutter); font-size: clamp(1rem, 1.4vw, 1.2rem); color: rgba(255, 250, 240, .88);
}
.orgs.cine .org .org-links { bottom: clamp(5rem, 14vh, 8rem); top: auto; padding: 0; margin-top: 0; }
.orgs.cine .org .link { color: #f3cf86; font-size: 1.05rem; }
.orgs.cine .org .link.quiet { color: rgba(255, 250, 240, .75); }
.orgs.cine .org-steps {
  position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(2rem, 6vh, 3.5rem); margin: 0; justify-content: flex-start;
}
.org-steps button { background: rgba(255, 250, 240, .35); }
.org-steps button[aria-current="step"] { background: #f3cf86; }

@media (max-width: 760px) {
  .orgs.cine > .wrap { height: calc(100svh - 4.5rem); }
  .orgs.cine h2 { top: 1.25rem; font-size: 1.25rem; }
  .orgs.cine .org-img::after {
    background:
      linear-gradient(0deg, rgba(24, 18, 10, .88) 0%, rgba(24, 18, 10, .55) 40%, rgba(24, 18, 10, 0) 70%),
      linear-gradient(180deg, rgba(24, 18, 10, .5) 0%, rgba(24, 18, 10, 0) 25%);
  }
  .orgs.cine .org h3 { bottom: 10.6rem; font-size: 1.7rem; }
  .orgs.cine .org p { bottom: 5.4rem; font-size: .98rem; }
  .orgs.cine .org .org-links { bottom: 3.3rem; }
  .orgs.cine .org-steps { bottom: 1.4rem; }
}
.orgs.cine .org .org-links { position: absolute; left: 0; display: flex; gap: .5rem 1.5rem; }

/* v3 layout fix: stack the text from the bottom of each full-screen card */
.orgs.cine .org-row { position: absolute; inset: 0; width: 100%; height: 100%; }
.orgs.cine .org {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gutter) clamp(5.5rem, 15vh, 8.5rem);
}
.orgs.cine .org-img { position: absolute; inset: 0; z-index: 0; }
.orgs.cine .org h3, .orgs.cine .org p, .orgs.cine .org .org-links {
  position: relative; inset: auto; z-index: 2; margin: 0 0 .9rem; max-width: 38rem;
}
.orgs.cine .org h3 { margin-bottom: .6rem; }
.orgs.cine .org .org-links { margin: .4rem 0 0; display: flex; }
@media (max-width: 760px) {
  .orgs.cine .org { padding: 0 var(--gutter) 3.6rem; }
  .orgs.cine .org h3 { font-size: 1.6rem; }
}
.orgs.cine .org h3, .orgs.cine .org p, .orgs.cine .org .org-links { align-self: flex-start; margin-left: 0; margin-right: 0; }
.orgs.cine .org-img::after {
  background:
    linear-gradient(90deg, rgba(24, 18, 10, .86) 0%, rgba(24, 18, 10, .6) 35%, rgba(24, 18, 10, .1) 70%, rgba(24, 18, 10, 0) 100%),
    linear-gradient(0deg, rgba(24, 18, 10, .78) 0%, rgba(24, 18, 10, 0) 55%),
    linear-gradient(180deg, rgba(24, 18, 10, .5) 0%, rgba(24, 18, 10, 0) 22%);
}
@media (max-width: 760px) {
  .orgs.cine .org-img::after {
    background:
      linear-gradient(0deg, rgba(24, 18, 10, .9) 0%, rgba(24, 18, 10, .6) 42%, rgba(24, 18, 10, 0) 72%),
      linear-gradient(180deg, rgba(24, 18, 10, .5) 0%, rgba(24, 18, 10, 0) 25%);
  }
}

/* ---------- modern hamburger menu button (phones) ---------- */
.menu-btn .bars { display: none; }
@media (max-width: 760px) {
  .menu-btn { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0; border-radius: 14px;
    background: color-mix(in srgb, var(--paper) 22%, transparent); backdrop-filter: blur(6px); }
  .page .menu-btn { background: var(--mist-deep); }
  .menu-btn .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu-btn .bars { display: block; position: relative; width: 1.35rem; height: .95rem; }
  .menu-btn .bars i { position: absolute; left: 0; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .3s ease, opacity .2s ease, width .3s ease, top .3s ease; }
  .menu-btn .bars i:nth-child(1) { top: 0; width: 100%; }
  .menu-btn .bars i:nth-child(2) { top: calc(50% - 1px); width: 70%; }
  .menu-btn .bars i:nth-child(3) { top: calc(100% - 2px); width: 45%; }
  .menu-btn[aria-expanded="true"] .bars i:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] .bars i:nth-child(3) { top: calc(50% - 1px); width: 100%; transform: rotate(-45deg); }
}

/* ---------- timetable with session names ---------- */
.timeline .t-time { display: block; }
.timeline .t-name { display: block; font-size: .78em; font-weight: 400; color: var(--sage); line-height: 1.35; margin-top: .25rem; white-space: normal; }
.timeline li { white-space: normal; padding: 0 .2rem; }
.timeline { grid-template-columns: repeat(8, 1fr); }
.timeline li.not-today { opacity: .4; }
#next-name { display: block; font-family: var(--display); font-size: 1.15rem; color: var(--forest); margin-top: .2rem; }
@media (max-width: 760px) { .timeline { grid-template-columns: repeat(2, 1fr); } .timeline li { text-align: left; padding: .7rem .8rem; } }

/* ---------- Zoom rooms, broadcasts, YouTube channels ---------- */
.rooms, .channels { padding-top: 1rem; padding-bottom: clamp(3rem, 7vw, 5rem); }
.rooms h2, .channels h2 { margin-top: 2rem; }
.room-list { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.room-list li > a, .room-list li > div {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem 1rem; height: 100%;
  padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); text-decoration: none;
}
.room-list li > a:hover { border-color: var(--robe); }
.r-name { font-family: var(--display); font-weight: 700; font-size: 1.12rem; grid-column: 1; }
.r-sub { font-size: .9rem; color: var(--sage); grid-column: 1; }
.r-go { grid-column: 2; grid-row: 1 / span 2; font-size: .9rem; font-weight: 500; padding: .45em 1em; border-radius: 99px; background: var(--robe); color: #1b1407; }
.yt .r-go { background: #c4302b; color: #fff; }
@media (max-width: 760px) { .room-list { grid-template-columns: 1fr; } }

/* ---------- books ---------- */
.books { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.book-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 1rem; }
.book-tabs a { text-decoration: none; padding: .45em 1em; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); font-size: .95rem; }
.book-tabs a span { color: var(--robe-ink); font-weight: 600; margin-left: .25rem; }
.books h2 { margin-top: 2.5rem; scroll-margin-top: 1rem; }
.shelf { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1.5rem 1.1rem; }
.book { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; }
.book img { width: 100%; aspect-ratio: 7 / 10; object-fit: cover; border-radius: 4px 8px 8px 4px;
  box-shadow: 0 1px 0 var(--line), 0 14px 24px -14px rgba(70, 50, 20, .45); transition: transform .3s ease, box-shadow .3s ease; }
.book:hover img { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), 0 22px 30px -16px rgba(70, 50, 20, .5); }
.b-title { font-size: .88rem; line-height: 1.4; color: var(--forest); }
.mag-cover { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 7 / 10; padding: 1rem;
  border-radius: 4px 8px 8px 4px; background: linear-gradient(160deg, #3b2f1c, #1f2a20); color: #fbe7b5;
  box-shadow: 0 14px 24px -14px rgba(70, 50, 20, .45); }
.mag-cover span { font-size: .8rem; opacity: .8; } .mag-cover strong { font-family: var(--display); font-size: 1.3rem; line-height: 1.2; }
.mag-cover em { font-style: normal; font-size: .85rem; color: #f3cf86; }
@media (max-width: 760px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- the Venerable's page (like the app's teacher screen) ---------- */
.teacher { padding-bottom: clamp(3rem, 7vw, 5rem); }
.t-banner { height: clamp(14rem, 34vw, 22rem); overflow: hidden; position: relative; }
.t-banner img { width: 100%; height: 100%; object-fit: cover; }
.t-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 5, 2, .3) 0%, rgba(8, 5, 2, 0) 40%, var(--mist) 100%); }
.t-head { text-align: center; margin-top: -3.2rem; position: relative; z-index: 1; }
.t-emblem { width: 6rem; height: 6rem; margin: 0 auto; border-radius: 50%; border: 4px solid var(--mist); background: var(--mist-deep);
  display: grid; place-items: center; font-size: 2.6rem; color: var(--robe-ink); }
.t-head h1 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: .8rem 0 .1rem; }
.t-en { margin: 0 auto; color: var(--sage); font-size: .95rem; }
.t-stats { list-style: none; display: flex; justify-content: center; gap: clamp(1.5rem, 5vw, 3rem); margin: 1.4rem 0; padding: 0; }
.t-stats strong { display: block; font-family: var(--display); font-size: 1.6rem; color: var(--robe-ink); }
.t-stats span { font-size: .85rem; color: var(--sage); }
.t-switch { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--mist-deep); }
.t-switch button { all: unset; cursor: pointer; padding: .45em 1.4em; border-radius: 9px; font-size: .92rem; font-weight: 600; color: var(--sage); }
.t-switch button[aria-selected="true"] { background: var(--paper); color: var(--forest); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.t-switch button:focus-visible { outline: 2px solid var(--robe); outline-offset: 2px; }
.t-bio { margin: 1.8rem auto 0; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.25rem, 4vw, 2.5rem); }
.t-bio h2 { font-size: 1.5rem; color: var(--robe-ink); margin-top: 0; }
.t-close { text-align: center; font-family: var(--display); font-weight: 700; color: var(--robe-ink); font-size: 1.15rem; margin-top: 1.5rem; }

/* faded picture at the top of inner pages (same feel as the Venerable's page) */
.page-banner { position: relative; height: clamp(12rem, 30vw, 20rem); overflow: hidden; }
.page-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-banner::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 5, 2, .25) 0%, rgba(251, 246, 234, .15) 45%, var(--mist) 100%); }
.page-main > .page-banner + section { position: relative; z-index: 1; margin-top: -4.5rem; padding-top: 0; }
.page-main > .page-banner + section.day, .page-main > .page-banner + section.news { background: transparent; border-top: 0; }
@media (max-width: 760px) {
  .page-banner { height: 11rem; }
  .page-main > .page-banner + section { margin-top: -3rem; }
}

/* ---------- site footer ---------- */
.site-foot { background: #2a2a1f; color: #e9e2cf; border-top: 0; padding: clamp(3rem, 7vw, 4.5rem) 0 0; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem 2rem; }
.f-mark { font-family: var(--display); font-weight: 800; font-size: 1.7rem; color: #fbf6ea; text-decoration: none; }
.f-brand p { color: #c9c0a8; font-size: .95rem; max-width: 22rem; margin: .7rem 0 1.25rem; }
.f-zoom { font-size: .92rem; }
.f-col { display: flex; flex-direction: column; gap: .55rem; }
.f-col h2 { font-family: var(--body); font-size: .85rem; font-weight: 600; color: #f3cf86; margin: 0 0 .35rem; }
.f-col a { color: #e9e2cf; text-decoration: none; font-size: .95rem; }
.f-col a:hover { color: #fff; text-decoration: underline; }
.f-bottom { margin-top: 2.75rem; padding-top: 1.25rem; padding-bottom: 1.5rem; border-top: 1px solid rgba(233, 226, 207, .15); }
.f-bottom p { color: #a59c84; font-size: .82rem; margin: 0 0 .35rem; max-width: none; }
.site-foot a:focus-visible { outline: 2px solid #f3cf86; outline-offset: 3px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .f-brand { grid-column: 1 / -1; } }
@media (max-width: 760px) { .site-foot { padding-bottom: 0; } .f-bottom { padding-bottom: 1rem; } }

/* Freedom from Mind: one tile that opens its 17 parts (as in the app) */
.set-tile { display: contents; }
.book-set { display: contents; }
.book-set > summary { list-style: none; cursor: pointer; }
.book-set > summary::-webkit-details-marker { display: none; }
.set-cover { position: relative; display: block; }
.set-cover::before, .set-cover::after { /* a stack of covers behind the first */
  content: ""; position: absolute; inset: 0; border-radius: 4px 8px 8px 4px; background: var(--line); z-index: -1;
  transform: translate(6px, -6px) rotate(2deg); }
.set-cover::after { transform: translate(11px, -11px) rotate(4deg); opacity: .6; }
.set-count { position: absolute; right: .5rem; bottom: .5rem; background: var(--robe); color: #1b1407; font-size: .8rem; font-weight: 600;
  padding: .2em .65em; border-radius: 99px; }
.b-sub { font-size: .8rem; color: var(--robe-ink); }
.book-set[open] > summary .b-sub { color: var(--sage); }
.set-parts { grid-column: 1 / -1; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem 1.25rem 1.5rem; }
.set-head { margin: 0 0 1rem; color: var(--sage); }
.set-head strong { color: var(--forest); font-family: var(--display); font-size: 1.2rem; margin-right: .4rem; }
.set-parts ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .6rem; }
.set-parts a { display: flex; flex-direction: column; align-items: center; padding: .7rem .5rem; border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.05rem; background: var(--mist); }
.set-parts a span { font-family: var(--body); font-weight: 400; font-size: .75rem; color: var(--sage); }
.set-parts a:hover { border-color: var(--robe); }
.book-set summary:focus-visible { outline: 2px solid var(--robe); outline-offset: 4px; border-radius: 6px; }

/* a different typeface for the බුද්ධෝත්පාදෝ name */
.mark, .f-mark { font-family: "Gemunu Libre", var(--display); font-weight: 700; letter-spacing: .01em; }
.mark { font-size: 1.75rem; }
.f-mark { font-size: 2.1rem; color: #f3cf86; }

/* turning Dhamma wheel, half over the main picture and half over the Zoom section */
.wheel-divider { position: relative; height: 0; z-index: 4; }
.dhamma-wheel {
  position: absolute; left: 50%; top: 0; width: clamp(5.5rem, 9vw, 7.5rem); height: auto;
  transform: translate(-50%, -50%); filter: drop-shadow(0 10px 22px rgba(80, 55, 15, .28));
}
.w-disc { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.w-rim { fill: none; stroke: var(--robe); stroke-width: 4.5; }
.w-rim.thin { stroke-width: 1.4; opacity: .6; }
.w-hub { fill: none; stroke: var(--robe); stroke-width: 3; }
.w-dot { fill: var(--robe); }
.w-spokes path { fill: var(--robe); }
.w-spokes circle { fill: var(--robe); }
.w-turn { transform-origin: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .w-turn { animation: wheel-turn 36s linear infinite; }
}
@keyframes wheel-turn { to { transform: rotate(360deg); } }
.wheel-divider + .day { padding-top: clamp(5rem, 10vw, 8rem); }
@media (max-width: 760px) { .wheel-divider + .day { padding-top: 4.25rem; } }

/* smaller wheel */
.dhamma-wheel { width: clamp(3.4rem, 5vw, 4.4rem); filter: drop-shadow(0 6px 14px rgba(80, 55, 15, .25)); }
.wheel-divider + .day { padding-top: clamp(4.5rem, 8vw, 6.5rem); }
@media (max-width: 760px) { .wheel-divider + .day { padding-top: 3.75rem; } }

/* yellow බුද්ධෝත්පාදෝ name */
.mark, .hero-right .top .mark { color: #f2b705; text-shadow: 0 1px 2px rgba(60, 40, 10, .35), 0 0 18px rgba(60, 40, 10, .15); }
.page .mark { color: #e0a800; text-shadow: 0 1px 0 rgba(90, 60, 0, .25); }
.f-mark { color: #f2b705; }

/* wheel without the white disc behind it */
.w-disc { fill: none; stroke: none; }
.dhamma-wheel { filter: drop-shadow(0 2px 6px rgba(60, 40, 10, .3)); }

/* shorter scroll for the three cards */
.orgs.cine { height: 260vh; }
@media (max-width: 760px) {
  .orgs.cine { height: 190vh; height: 190svh; }
}

/* the name: Noto Serif Sinhala draws ෝ correctly (Gemunu Libre dropped it) */
.mark, .f-mark { font-family: "Noto Serif Sinhala", "Abhaya Libre", serif; font-weight: 800; letter-spacing: 0; }
.mark { font-size: 1.45rem; }
.f-mark { font-size: 1.8rem; }

/* banner picture focus per page (kept out of inline styles for the security policy) */
.banner-books img { object-position: 60% 45%; }
.banner-contact img { object-position: 50% 50%; }
.banner-network img { object-position: 50% 30%; }
.banner-news img { object-position: 50% 35%; }
.banner-sermons img { object-position: 60% 35%; }
.banner-zoom img { object-position: 50% 40%; }
.notfound { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
.foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
@media (max-width: 1100px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } .f-brand { grid-column: 1 / -1; } }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.f-col .f-mail { color: #f3cf86; font-size: .9rem; word-break: break-all; }
.phones a[href^="mailto:"] { font-size: 1.1rem; }