/* ──────────────────────────────────────────────────────────────
   Rideekanda — long-form pages  ·  rk/page.css
   Layered on rk/rk.css (palette, type, buttons, .sec, .clip, .label,
   .statement, .facts, .rt-list …) for the pages rebuilt in the home
   page's manner: The Monastery and the Retreat Program.
   The header, menu and footer are the shared eco-* ones.
   ────────────────────────────────────────────────────────────── */

/* The shared header sits on a photograph here: light ink until it turns solid. */
html[data-rk~="page"] .eco-header:not(.eco-h-scrolled) { color: #f4efe2; --rkc-line: rgba(244, 239, 226, .32); --rkc-accent: #e39a48; }
html[data-rk~="page"] .eco-header:not(.eco-h-scrolled)::after { background: linear-gradient(rgba(6, 10, 8, .5), transparent); opacity: 1; }

.sec.tint { background: var(--bg-2); }
.dark .sec-lead, .dark .prose p { color: #c3c2b0; }
.sec + .sec.same { padding-top: 0; }

/* ── page hero ── */
.ph { position: relative; z-index: 1; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; color: #f6f1e4; background: #0a100c; }
.ph-bg { position: absolute; inset: -6% 0; }
.ph-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); will-change: transform; }
.ph-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 10, 8, .62), rgba(6, 10, 8, .2) 55%, transparent 80%), linear-gradient(rgba(6, 10, 8, .55), rgba(6, 10, 8, .14) 30%, rgba(6, 10, 8, .42) 60%, rgba(6, 10, 8, .9)); }
.ph-in { position: relative; align-self: end; padding: 140px var(--gut) clamp(34px, 7vh, 80px); max-width: var(--maxw); width: 100%; margin-inline: auto; }
.ph .label { color: #f3eee0; margin-bottom: clamp(1.2rem, 3vh, 2.2rem); }
.ph .label b { color: var(--saffron); }
.ph-title { font-family: var(--f-display); font-weight: 300; font-size: clamp(3.2rem, 11.4vw, 11.5rem); line-height: .9; letter-spacing: -.035em; text-shadow: 0 2px 40px rgba(5, 8, 6, .35); }
.ph-title em { color: var(--saffron); }
.ph-foot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: clamp(1.6rem, 4vh, 3rem); padding-top: 1.4rem; border-top: 1px solid rgba(246, 241, 228, .24); }
.ph-place { max-width: 30em; font-size: clamp(1rem, 1.25vw, 1.2rem); font-weight: 300; opacity: .92; }
.ph .scroll-cue { color: inherit; flex: none; }

/* ── prose ── */
.prose { display: grid; gap: 1.15rem; align-content: start; }
.prose p { color: var(--ink-2); max-width: 34em; }
.prose em { font-family: var(--f-display); font-size: 1.18em; line-height: 1; }
.prose a { color: var(--accent); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 6vw, 7rem); }
.cols.offset { margin-left: clamp(0px, 16vw, 260px); }
.gap-l { margin-top: clamp(56px, 10vh, 130px); }
.gap-m { margin-top: clamp(36px, 6vh, 72px); }
.kicker { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--accent); margin-bottom: .2rem; }
.rule-top { border-top: 1px solid var(--line); padding-top: clamp(30px, 5vh, 52px); }

/* a wide photograph between passages */
.band { margin-top: clamp(60px, 11vh, 140px); aspect-ratio: 21 / 9; }
.band img { object-position: var(--pos, 50% 50%); }

/* pull quote */
.pull { margin: clamp(70px, 13vh, 170px) auto; max-width: 21em; text-align: center; font-family: var(--f-display); font-weight: 300; font-style: italic; font-size: clamp(1.8rem, 4.1vw, 3.9rem); line-height: 1.12; letter-spacing: -.02em; }
.pull cite { display: block; margin-top: 1.6rem; font-family: var(--f-text); font-style: normal; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--mute); }
.pull.left { margin-inline: 0; text-align: left; }

/* image + text */
.duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: center; }
.duo.flip > :first-child { order: 2; }
.duo figure { aspect-ratio: 5 / 4; }
.duo figure.tall { aspect-ratio: 4 / 5; }
.duo-copy { display: grid; gap: 1.4rem; align-content: center; }
.duo + .duo { margin-top: clamp(60px, 11vh, 140px); }
.opts { border-top: 1px solid var(--line); margin-top: .4rem; }
.opts li { display: flex; flex-wrap: wrap; gap: .3em .8em; padding: .9rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .98rem; }
.opts b { font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; line-height: 1.1; color: var(--ink); }
.big-year { font-family: var(--f-display); font-weight: 300; font-size: clamp(5rem, 15vw, 15rem); line-height: .8; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 65%, transparent); font-variant-numeric: lining-nums tabular-nums; }

/* ── teachers: the portrait stays while the life is read ── */
.tch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 110px); align-items: start; }
.tch + .tch { margin-top: clamp(80px, 14vh, 180px); }
.tch.flip > figure { order: 2; }
.tch figure { position: sticky; top: 104px; aspect-ratio: 4 / 5; background: #000; }
.tch figure img { object-position: 50% 18%; }
.tch figure figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: .5em 1em; border-radius: 999px; background: rgba(8, 13, 10, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #f3eee0; }
.tch-copy { display: grid; gap: 1.3rem; padding-top: clamp(0px, 4vh, 60px); }
.tch-copy .h2 { font-size: clamp(2.1rem, 4.2vw, 4rem); }
.tch-cred { padding: 1.1rem 0; border-block: 1px solid var(--line); font-size: .86rem; color: var(--forest-mute); line-height: 1.7; }

/* ── numbered rows (ways to visit) ── */
.ways { border-top: 1px solid var(--line); }
.ways li { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1rem, 4vw, 5rem); align-items: baseline; padding: clamp(1.5rem, 3.6vh, 2.6rem) clamp(.4rem, 1.5vw, 1.6rem); border-bottom: 1px solid var(--line); isolation: isolate; transition: color .45s var(--ease), padding .6s var(--ease); }
.ways li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--ease); }
.ways li > i { font-family: var(--f-display); font-style: italic; font-size: 1.25rem; color: var(--accent); }
.ways h3 { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.7rem, 3.2vw, 2.9rem); line-height: 1.04; letter-spacing: -.02em; }
.ways p { color: var(--ink-2); max-width: 32em; transition: color .45s; }
@media (hover: hover) {
  .ways li:hover { color: var(--bg); padding-inline: clamp(1rem, 2.6vw, 2.8rem); }
  .ways li:hover::before { transform: scaleY(1); }
  .ways li:hover p { color: inherit; }
  .ways li:hover a { color: var(--saffron); }
}
.ways a { color: var(--accent); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }

/* ── three movements ── */
.moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: clamp(30px, 5vh, 56px); }
.moves li { padding: clamp(1.6rem, 3vw, 2.8rem) clamp(1.2rem, 2.4vw, 2.4rem) clamp(1.6rem, 3vw, 2.8rem) 0; display: grid; gap: 1rem; align-content: start; }
.moves li + li { padding-left: clamp(1.2rem, 2.4vw, 2.4rem); border-left: 1px solid var(--line); }
.moves b { font-family: var(--f-display); font-weight: 300; font-style: italic; font-size: clamp(4.4rem, 9vw, 8.4rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 70%, transparent); }
.moves h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.05; letter-spacing: -.015em; }
.moves p { color: var(--ink-2); font-size: .98rem; }
.moves em { font-family: var(--f-display); font-size: 1.18em; line-height: 1; }

/* ── the day, as a line that fills ── */
.tl { position: relative; margin-top: clamp(40px, 7vh, 80px); padding-left: clamp(28px, 4vw, 56px); }
.tl::before, .tl-fill { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.tl-fill { background: var(--accent); transform: scaleY(0); transform-origin: 50% 0; }
.tl li { position: relative; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1rem 2rem; align-items: baseline; padding: clamp(.9rem, 2.2vh, 1.5rem) 0; border-bottom: 1px solid var(--line); opacity: .38; transition: opacity .6s ease; }
.tl li.is-on { opacity: 1; }
.tl li::before { content: ""; position: absolute; left: calc(-1 * clamp(28px, 4vw, 56px)); top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--bg); border: 1px solid var(--mute); transition: background-color .5s, border-color .5s, transform .5s var(--ease); }
.tl li.is-on::before { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.tl time { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--mute); font-variant-numeric: lining-nums tabular-nums; }
.tl h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 2.7vw, 2.5rem); line-height: 1.06; letter-spacing: -.015em; }
.tl h3 small { margin-left: .8em; font-family: var(--f-text); font-size: .86rem; letter-spacing: 0; color: var(--ink-2); }
.tl li.is-now h3::after { content: "now at the monastery"; margin-left: 1rem; padding: .25em .8em; border-radius: 99px; background: var(--saffron); color: #1a1208; font-family: var(--f-text); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }

/* ── closing invitation ── */
.invite { position: relative; z-index: 2; overflow: hidden; text-align: center; padding-block: clamp(110px, 20vh, 240px); }
.invite .breath { width: min(96vmin, 900px); }
.invite-in { position: relative; display: grid; justify-items: center; gap: 1.8rem; }
.invite .logo { width: 74px; color: var(--saffron); }
.invite p { max-width: 34em; color: #c9c7b6; font-size: 1.06rem; }
.invite-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .6rem; }
.invite .rt-list { width: 100%; max-width: 980px; text-align: left; margin-top: clamp(20px, 4vh, 44px); }

.facts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) {
  .ph-in { padding-top: 110px; }
  .ph .label { display: grid; gap: .5rem; }
  .ph .label b::after { display: none; }
  .facts.three { grid-template-columns: 1fr; }
  .facts.three li, .facts.three li + li { padding: 1.4rem 0; border-left: 0; border-top: 0; border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); align-items: baseline; gap: 1rem; }
  .facts.three b { font-size: 2.6rem; flex-wrap: wrap; }
  .pull { margin-block: clamp(56px, 9vh, 90px); }
  .tch-copy { padding-top: 0; }
  .invite { padding-block: 96px; }
  .invite .display { font-size: clamp(2.5rem, 11.5vw, 4rem); }
  .aside-note { padding: 1.1rem 1.2rem; }
  .notes { grid-template-columns: 1fr; }
  .rule-top { padding-top: 28px; }
  .ph-title { font-size: 15.5vw; }
  .ph-foot .scroll-cue { display: none; }
  .cols { grid-template-columns: 1fr; }
  .cols.offset { margin-left: 0; }
  .band { aspect-ratio: 4 / 3; }
  .duo, .tch { grid-template-columns: 1fr; }
  .duo.flip > :first-child, .tch.flip > figure { order: 0; }
  .tch figure { position: relative; top: 0; }
  .ways li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .ways p { grid-column: 2; }
  .moves { grid-template-columns: 1fr; }
  .moves li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .tl li { grid-template-columns: 1fr; gap: .3rem; }
  .tl li.is-now h3::after { display: inline-block; margin: .5rem 0 0; }
}

/* ── cards of short notes (requirements, conduct …) ── */
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border-top: 1px solid var(--line); margin-top: clamp(28px, 5vh, 56px); }
.notes li { padding: clamp(1.5rem, 2.6vw, 2.4rem) clamp(1.2rem, 2.2vw, 2.2rem) clamp(1.5rem, 2.6vw, 2.4rem) 0; display: grid; gap: .9rem; align-content: start; border-bottom: 1px solid var(--line); }
.notes li > i { font-family: var(--f-display); font-style: italic; font-size: 1.25rem; color: var(--accent); }
.notes h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; }
.notes p { color: var(--ink-2); font-size: .98rem; }
.ways.plain li { grid-template-columns: 4.5rem minmax(0, 1fr); }
.ways.plain p { max-width: 52em; font-size: 1.04rem; }
.aside-note { max-width: 46em; padding: 1.4rem 1.6rem; border: 1px solid rgba(246, 241, 228, .22); border-radius: 4px; text-align: left; font-size: .95rem; color: #c9c7b6; }
.invite .contact-line a { color: var(--saffron); }

/* ── Sinhala pages: the script needs room, no tracking and no italics ── */
html[lang="si"] body { font-family: var(--f-si); line-height: 1.95; }
html[lang="si"] .ph-title, html[lang="si"] .display, html[lang="si"] .h1, html[lang="si"] .h2,
html[lang="si"] .statement, html[lang="si"] .ways h3, html[lang="si"] .notes h3, html[lang="si"] .tl h3, html[lang="si"] .pull {
  font-family: var(--f-si); font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.42;
}
html[lang="si"] .ph-title, html[lang="si"] .display, html[lang="si"] .h1, html[lang="si"] .statement { font-weight: 300; }
html[lang="si"] .ph-title { font-size: clamp(2.3rem, 6.6vw, 6.4rem); }
html[lang="si"] .display { font-size: clamp(2.1rem, 5.6vw, 5.4rem); }
html[lang="si"] .h1 { font-size: clamp(1.9rem, 4.4vw, 4.2rem); }
html[lang="si"] .h2, html[lang="si"] .tch-copy .h2 { font-size: clamp(1.6rem, 2.9vw, 2.7rem); }
html[lang="si"] .statement { font-size: clamp(1.45rem, 2.9vw, 2.8rem); line-height: 1.6; max-width: 26em; }
html[lang="si"] .notes h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }
html[lang="si"] .tl h3 { font-size: clamp(1.15rem, 1.8vw, 1.6rem); }
html[lang="si"] em { font-style: normal; }
html[lang="si"] .label, html[lang="si"] .kicker, html[lang="si"] .tl time, html[lang="si"] .pill, html[lang="si"] .tch figure figcaption {
  letter-spacing: .02em; text-transform: none; font-size: .9rem;
}
html[lang="si"] .label b { font-family: var(--f-display); font-size: 1.3em; }
html[lang="si"] .prose p, html[lang="si"] .sec-lead, html[lang="si"] .notes p, html[lang="si"] .ways p { font-size: 1.02rem; max-width: 36em; }
html[lang="si"] .split-line-mask { padding: .22em .08em .3em 0; margin: -.22em -.08em -.3em 0; }
html[lang="si"] .tl li.is-now h3::after { content: "දැන්"; letter-spacing: 0; font-size: .8rem; }
html[lang="si"] .tch-cred { line-height: 1.9; }