@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700&family=Noto+Serif+Devanagari:wght@400;500&display=swap');
/* Gurukul Redevelopment Initiative — shared page scaffolding.
   Derived from the Classical landing template: 28px leading unit, Cormorant
   display over justified Lora, hairline rules, gold as stroke. All colors,
   fonts, radii from the design system's styles.css tokens. */
:root {
  /* modern editorial pairing over the system's tokens */
  --font-heading: "Instrument Serif", "Noto Serif Devanagari", serif;
  --font-body: "Manrope", sans-serif;
  --font-dev: "Noto Serif Devanagari", serif;
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
}
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }

.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
.nav a.nav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 40px; height: 40px; flex: none; object-fit: contain; mix-blend-mode: multiply; }
.foot-mark { width: 24px; height: 24px; vertical-align: -7px; margin-right: 8px; object-fit: contain; mix-blend-mode: multiply; }
.nav a[aria-current='page'] { color: var(--color-accent); }


.rule { height: 1px; border: 0; margin: 0; background: var(--color-divider); }

.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* — hero — */
.hero { padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); position: relative; }
/* ghost word — gold as stroke, a Devanagari watermark behind the display */
.ghost { position: absolute; right: -0.35em; top: 58%; transform: translateY(-50%);
  font-family: var(--font-dev); font-weight: 400;
  font-size: clamp(140px, 20vw, 300px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--color-accent) 30%, transparent);
  pointer-events: none; user-select: none; white-space: nowrap; }
@media (max-width: 900px) { .ghost { display: none; } }
/* Krishna line-silhouette ghosts — gold as stroke, never fill */
.krishna-ghost { position: absolute; pointer-events: none; user-select: none; height: auto;
  color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.hero .krishna-ghost { right: 2%; top: 50%; transform: translateY(-50%);
  width: clamp(180px, 22vw, 320px); aspect-ratio: 1; }
@media (max-width: 900px) { .hero .krishna-ghost { display: none; } }
.colophon .krishna-ghost { right: var(--edge); top: 50%; transform: translateY(-50%);
  width: clamp(150px, 18vw, 260px); aspect-ratio: 1;
  color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
/* small Krishna-motif icons above headings and cards */
.col-icon { display: block; width: 26px; height: 26px; color: var(--color-accent); margin: 0 0 var(--half); }
.hero.compact { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.display {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(46px, 6.6vw, 92px);
  line-height: clamp(49.5px, 7.13vw, 99.5px);
  letter-spacing: -0.01em; margin: 0; margin-left: -0.042em;
  text-box: trim-both cap alphabetic;
}
.display.page { font-size: clamp(38px, 5vw, 68px); line-height: clamp(41px, 5.4vw, 73.5px); }
.display .line { display: block; }
.hero .sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.75 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic; }
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* — sanskrit accent line (Lora carries Devanagari fallback to system serif) — */
.shloka { font-family: var(--font-dev); font-weight: 400; font-size: 21px;
  line-height: var(--leading); color: var(--color-accent-700); margin: 0; }
.shloka-gloss { font-size: 14px; line-height: var(--half);
  letter-spacing: 0.04em; color: color-mix(in srgb, var(--color-text) 62%, transparent);
  margin: var(--half) 0 0; }

/* — stat row — */
.stats { padding: calc(2.5 * var(--leading)) 0; }
.stats .grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: calc(1.5 * var(--leading)) var(--leading); }
.stat-num { font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(36px, 3.6vw, 52px); line-height: calc(2 * var(--leading));
  font-feature-settings: "tnum" 1; color: var(--color-text);
  margin: 0; margin-left: -0.042em;
  text-box: trim-both cap alphabetic; }
.stat-num.gilt { color: var(--color-accent); }
.stat-num.lead-one { margin-left: -0.129em; }
.stat-label { font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--half) 0 0; max-width: 22ch; }

/* — justified columns parted by hairlines — */
.features { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.cols { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  --col-gap: calc(2 * var(--leading));
  gap: calc(1.5 * var(--leading)) var(--col-gap);
  margin-top: calc(var(--leading) - var(--half)); }
.cols::before, .cols::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--color-divider); }
.cols::before { left: calc((100% - 2 * var(--col-gap)) / 3 + var(--col-gap) / 2 - 0.5px); }
.cols::after { left: calc(2 * (100% - 2 * var(--col-gap)) / 3 + 1.5 * var(--col-gap) - 0.5px); }
.cols.two { grid-template-columns: repeat(2, 1fr); }
.cols.two::before { left: calc((100% - var(--col-gap)) / 2 + var(--col-gap) / 2 - 0.5px); }
.cols.two::after { content: none; }
.col h2 { font-family: var(--font-heading); font-weight: 400;
  font-size: 26px; line-height: var(--leading); letter-spacing: -0.005em;
  margin: 0; text-box: trim-both cap alphabetic; }
.col h2 .num { color: var(--color-accent); font-feature-settings: "tnum" 1; margin-right: 0.35em; }
.col p { font-size: 15.5px; line-height: var(--leading); margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  text-box: trim-both cap alphabetic; }

/* — imagery split — */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.split.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split-title { font-family: var(--font-heading); font-weight: 400;
  font-size: 34px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.008em;
  margin: 0; text-box: trim-both cap alphabetic; }
.split-copy .note { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch;
  text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  text-box: trim-both cap alphabetic; }
.split-figure { margin: 0; width: min(420px, 100%); justify-self: end; }
.split.flip .split-figure { justify-self: start; }
.split-figure image-slot { width: 100%; aspect-ratio: 4 / 5; }
.split-figure.wide image-slot { aspect-ratio: 3 / 2; }
.split-figure figcaption { font-size: 13px; line-height: var(--half);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  margin: var(--half) 0 0; }

/* — quote — */
.quote { padding: calc(2.5 * var(--leading)) 0 calc(3.5 * var(--leading)); }
.quote blockquote {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(26px, 2.8vw, 36px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.005em; max-width: 34ch; margin: 0;
  text-indent: -0.340em;
  text-box: trim-both cap alphabetic;
}
.quote blockquote.sanskrit { color: var(--color-accent-700); text-indent: 0; font-family: var(--font-dev); }
.quote figcaption { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: calc(2 * var(--leading) - 1cap) 0 0;
  text-indent: -1.104em;
  text-box: trim-both cap alphabetic; }
@media (max-width: 720px) {
  .quote blockquote, .quote figcaption { text-indent: 0; }
}

/* — colophon band — the deck's dark divider grammar on the page: paper type
   on deep warm near-black, gold as stroke in a ghost mark — */
.colophon { background: color-mix(in oklab, var(--color-neutral-900) 82%, black);
  color: var(--color-bg); position: relative; overflow: clip;
  padding: calc(3.5 * var(--leading)) 0; }
.colophon .wrap { position: relative; }
.colophon .ghost-mark { position: absolute; right: var(--edge); top: 50%; transform: translateY(-50%);
  font-family: var(--font-dev); font-size: clamp(140px, 18vw, 260px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--color-accent) 60%, transparent);
  pointer-events: none; user-select: none; }
.colophon .kicker { color: var(--color-accent-400); }
.colophon .shloka { color: var(--color-accent-300); font-size: clamp(24px, 2.6vw, 34px); line-height: calc(1.5 * var(--leading)); max-width: 26ch; }
.colophon .shloka-gloss { color: color-mix(in srgb, var(--color-bg) 72%, transparent); font-size: 15px; line-height: var(--leading); max-width: 52ch; }

/* — yuga band (history): the four ages drawn to proportion, stroke only — */
.yugas { display: flex; gap: 6px; margin-top: calc(1.5 * var(--leading)); }
.yuga { border-top: 2px solid var(--color-accent); padding-top: var(--half); min-width: 0; }
.yuga .y-name { font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text); margin: 0; white-space: nowrap; }
.yuga .y-len { font-size: 12px; line-height: var(--half); font-feature-settings: "tnum" 1;
  color: color-mix(in srgb, var(--color-text) 62%, transparent); margin: 6px 0 0; white-space: nowrap; }
.yuga-caption { font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 62%, transparent); margin: var(--half) 0 0; }
@media (max-width: 640px) { .yuga .y-len { display: none; } }

/* — scroll reveal (site.js adds .rv / .in; motion-reduced users see none) — */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* — prose sections (long-form pages) — */
.prose { padding: calc(2.5 * var(--leading)) 0; }
.prose h2.section { font-family: var(--font-heading); font-weight: 400;
  font-size: 34px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.008em;
  margin: 0; text-box: trim-both cap alphabetic; }
.prose p { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure);
  text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  text-box: trim-both cap alphabetic; }
.prose p strong { color: var(--color-text); font-weight: 600; }

/* — timeline (history page): era numerals in the margin, hairline spine — */
.timeline { list-style: none; margin: calc(1.5 * var(--leading)) 0 0; padding: 0; }
.timeline li { position: relative; display: grid;
  grid-template-columns: 170px 1fr; gap: 0 calc(2 * var(--leading));
  padding: calc(1.5 * var(--leading)) 0; border-top: 1px solid var(--color-divider); }
.timeline .era.dev { font-family: var(--font-dev); }
.timeline .era { font-family: var(--font-heading); font-weight: 400;
  font-size: 30px; line-height: var(--leading); letter-spacing: -0.005em;
  font-feature-settings: "tnum" 1; color: var(--color-accent);
  margin: 0; text-box: trim-both cap alphabetic; }
.timeline .era small { display: block; font-family: var(--font-body); font-size: 12px;
  line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent); margin-top: var(--half); }
.timeline h3 { font-family: var(--font-heading); font-weight: 400;
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.005em;
  margin: 0; text-box: trim-both cap alphabetic; }
.timeline .body { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 62ch;
  text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  text-box: trim-both cap alphabetic; }

/* — day-in-the-life schedule (methodology page) — */
.schedule { list-style: none; margin: calc(1.5 * var(--leading)) 0 0; padding: 0; max-width: 720px; }
.schedule li { display: grid; grid-template-columns: 130px 1fr; gap: 0 calc(1.5 * var(--leading));
  padding: var(--half) 0; border-top: 1px solid var(--color-divider); align-items: baseline; }
.schedule .hour { font-family: var(--font-heading); font-weight: 400; font-size: 20px;
  line-height: var(--leading); font-feature-settings: "tnum" 1; color: var(--color-accent-700); margin: 0; }
.schedule .act { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 0; }
.schedule .act em { font-style: normal; color: var(--color-text); }

/* — donation tiers — */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.5 * var(--leading));
  margin-top: calc(1.5 * var(--leading)); align-items: stretch; }
.tier-amt { font-family: var(--font-heading); font-weight: 400;
  font-size: 40px; line-height: calc(1.5 * var(--leading));
  font-feature-settings: "tnum" 1; margin: var(--half) 0 0; }
.tier-amt small { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 62%, transparent); margin-left: 0.4em; }

/* — close — */
.close { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.close h3 { font-family: var(--font-heading); font-weight: 400;
  font-size: 26px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.close .sub { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure); text-box: trim-both cap alphabetic; }
.close .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

footer.site { padding: calc(2 * var(--leading)) 0; font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
footer.site .foot-row { display: flex; flex-wrap: wrap; gap: var(--half) calc(2 * var(--leading)); justify-content: space-between; }

/* — pager (previous / next chapter links at page foot) — */
.pager { display: flex; justify-content: space-between; gap: var(--leading);
  padding: calc(1.5 * var(--leading)) 0; border-top: 1px solid var(--color-divider); }
.pager a { font-family: var(--font-heading); font-size: 20px; line-height: var(--leading); }

/* — responsive — */
@media (max-width: 1108px) {
  .cols { grid-template-columns: 1fr; }
  .cols::before, .cols::after { content: none; }
  .col { max-width: 62ch; }
}
@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(2.5 * var(--leading)); }
  .stats .grid { grid-template-columns: repeat(2, 1fr); justify-content: start; }
  .split, .split.flip { grid-template-columns: 1fr; }
  .split-figure, .split.flip .split-figure { order: -1; justify-self: start; }
  .timeline li { grid-template-columns: 1fr; gap: var(--half) 0; }
  .schedule li { grid-template-columns: 90px 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════
   Orange revival — warmer palette, temple motifs, hanging bells,
   yellow gurukul silhouettes, glyph spring physics.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --color-bg: #fdf6ea;
  --color-surface: #fffaf3;
  --color-text: #2b1e13;
  --color-divider: #e8d5b8;
  --color-accent: #cf5f14;
  --color-accent-100: #fdeeddff;
  --color-accent-200: #f9d6b0;
  --color-accent-300: #f2b77c;
  --color-accent-400: #e59248;
  --color-accent-500: #cf5f14;
  --color-accent-600: #b74f0d;
  --color-accent-700: #8f3d0b;
  --color-accent-800: #6a2d08;
  --color-accent-900: #431c05;
  --color-accent-2: #cf5f14;
  --color-accent-2-300: #f2b77c;
  --color-accent-2-400: #e59248;
  --color-accent-2-700: #8f3d0b;
  /* the wider festival palette — used as stroke, tint and small marks */
  --clr-marigold: #f0a91c;
  --clr-saffron: #e8721c;
  --clr-turmeric: #f0b429;
  --clr-vermilion: #b5241f;
  --clr-leaf: #4d7a3c;
  --clr-brass: #c98a22;
}
body { background: var(--color-bg); }

/* — the mark and the wordmark, given their due — */
.nav { padding-block: 18px; flex-wrap: nowrap; position: relative; z-index: 20; background:
    linear-gradient(180deg, color-mix(in srgb, var(--clr-marigold) 12%, transparent), transparent), var(--color-bg); }
.nav a.nav-brand { gap: 16px; margin-right: auto; }
.logo-mark { width: 76px; height: 76px; }
.nav a.nav-brand {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(20px, 2vw, 30px); line-height: 1.06;
  letter-spacing: -0.005em; color: var(--color-accent-800);
  flex: none; max-width: none; white-space: nowrap;
}
.nav a.nav-brand:hover { color: var(--color-accent); }
.nav a:not(.nav-brand) { font-size: 14.5px; }

.nav a[aria-current='page'] { color: var(--color-accent); border-bottom: 2px solid var(--clr-marigold); }
.foot-mark { width: 40px; height: 40px; vertical-align: -14px; }
@media (max-width: 900px) {
  .logo-mark { width: 56px; height: 56px; }
  .nav a.nav-brand { font-size: 19px; }
}

/* — colour in the small parts — */
.kicker { color: var(--color-accent-700); display: flex; align-items: center; gap: 8px; }
.kicker .mini-temple { width: 16px; height: 16px; flex: none; color: var(--clr-saffron); }
.rule { background: linear-gradient(90deg,
    var(--clr-marigold), var(--clr-saffron) 28%, var(--color-divider) 65%, transparent); height: 2px; }
.stat-num.gilt { color: var(--clr-saffron); }
.yuga:nth-child(1) { border-top-color: var(--clr-vermilion); }
.yuga:nth-child(2) { border-top-color: var(--clr-saffron); }
.yuga:nth-child(3) { border-top-color: var(--clr-marigold); }
.yuga:nth-child(4) { border-top-color: var(--clr-leaf); }
.col h2 .num { color: var(--clr-saffron); }
.shloka { color: var(--color-accent-700); }
.quote blockquote.sanskrit { color: var(--color-accent-700); }
.quote figure { position: relative; padding-left: clamp(0px, 4vw, 40px);
  border-left: 3px solid color-mix(in srgb, var(--clr-marigold) 55%, transparent); }
@media (max-width: 720px) { .quote figure { padding-left: 20px; } }

/* — timeline gets a temple marker on the spine and a warm tint on hover — */
.timeline li { padding-left: 44px; transition: background 0.35s ease; border-radius: var(--radius-md, 4px); }
.timeline li .spine-temple { position: absolute; left: 0; top: calc(1.5 * 28px - 4px);
  width: 28px; height: 28px; color: var(--clr-saffron); opacity: 0.85; transition: transform 0.4s ease, color 0.3s ease; }
.timeline li:hover { background: linear-gradient(90deg,
    color-mix(in srgb, var(--clr-marigold) 13%, transparent), transparent 62%); }
.timeline li:hover .spine-temple { transform: translateY(-3px) scale(1.12); color: var(--clr-vermilion); }
@media (max-width: 720px) { .timeline li { padding-left: 36px; } .timeline li .spine-temple { top: 22px; width: 24px; height: 24px; } }

/* — cards and tiers, tinted rather than filled — */
.tiers .card, .cards .card { background:
    linear-gradient(180deg, color-mix(in srgb, var(--clr-marigold) 9%, var(--color-surface)), var(--color-surface));
  border-top: 3px solid var(--clr-saffron); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.tiers .card:nth-child(2) { border-top-color: var(--clr-marigold); }
.tiers .card:nth-child(3) { border-top-color: var(--clr-leaf); }
.tiers .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tier-amt { color: var(--color-accent-700); }

/* — plates warm up, and lift a little on hover — */
.plate { transition: transform 0.4s ease, box-shadow 0.4s ease; }
.split-figure.plate:hover { transform: translateY(-4px) rotate(-0.35deg); box-shadow: var(--shadow-md); }

/* — colophon keeps the dark band but gains a marigold edge — */
.colophon { border-top: 3px solid var(--clr-saffron); border-bottom: 3px solid var(--clr-marigold); }

/* — yellow gurukul silhouette: a sketched skyline of huts, temples, groves — */
.skyline { display: block; width: 100%; height: clamp(96px, 13vw, 168px);
  margin: calc(1.5 * var(--leading)) 0 0; color: var(--clr-turmeric);
  pointer-events: none; user-select: none; }
.skyline svg { display: block; width: 100%; height: 100%; overflow: visible; }
.skyline .fillp { fill: currentColor; fill-opacity: 0.52; }
.skyline .sketch { fill: none; stroke: color-mix(in srgb, var(--clr-saffron) 70%, transparent);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.skyline .ground { stroke: color-mix(in srgb, var(--clr-saffron) 55%, transparent); stroke-width: 1.6; }
.skyline-cap { font-size: 13px; line-height: var(--half); letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 66%, transparent); margin: var(--half) 0 0; }

/* — the torana: a string of temple bells that swing to the cursor — */
.torana { position: relative; z-index: 5; height: 118px; margin: 0 0 calc(-0.5 * var(--leading));
  overflow: visible; pointer-events: none; }
.torana .rope { position: absolute; left: 0; right: 0; top: 8px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-brass) 6%, var(--clr-brass) 94%, transparent);
  opacity: 0.6; }
.bell { position: absolute; top: 0; pointer-events: auto; cursor: pointer;
  transform: translateX(-50%); filter: drop-shadow(0 2px 3px rgba(90,45,10,0.18)); }
.bell svg { display: block; width: 100%; height: auto; overflow: visible; }
.bell .b-body { fill: var(--clr-brass); fill-opacity: 0.92; stroke: var(--color-accent-800); stroke-width: 2.2; }
.bell .b-rim { fill: var(--clr-marigold); stroke: var(--color-accent-800); stroke-width: 2.2; }
.bell .b-line { fill: none; stroke: var(--color-accent-800); stroke-width: 1.8; stroke-linecap: round; }
.bell .b-clap { fill: var(--color-accent-700); }
.bell:hover .b-body { fill: var(--clr-saffron); }
.bell.edge { position: fixed; z-index: 30; }
@media (max-width: 1180px) { .bell.edge { display: none; } }
@media (prefers-reduced-motion: reduce) { .bell { cursor: default; } }
.bell-hint { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  position: absolute; right: 0; top: 96px; margin: 0; }
@media (max-width: 720px) { .bell-hint { display: none; } }

/* — glyph springs: letters set by site.js react to the cursor — */
.gl { display: inline-block; will-change: transform; }
.gw { display: inline-block; white-space: nowrap; }


/* — navigation: always reachable; a menu button takes over on narrow screens — */
.nav { position: relative; }
.nav-links { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.nav-links a { white-space: nowrap; }
.nav-toggle { display: none; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent-800); background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: var(--radius-md, 4px); padding: 9px 14px; }
.nav-toggle:hover { background: color-mix(in srgb, var(--clr-marigold) 16%, transparent); }
.nav-toggle .bars { display: grid; gap: 3px; }
.nav-toggle .bars i { display: block; width: 18px; height: 2px; background: currentColor; }
@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .nav-links { position: absolute; top: calc(100% - 1px); right: var(--edge); z-index: 30;
    flex-direction: column; align-items: stretch; gap: 0; min-width: 236px;
    background: var(--color-surface); border: 1px solid var(--color-divider);
    border-top: 3px solid var(--clr-saffron); border-radius: var(--radius-md, 4px);
    box-shadow: var(--shadow-md); padding: 6px 0; display: none; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 20px; font-size: 16px; }
  .nav-links a:hover { background: color-mix(in srgb, var(--clr-marigold) 15%, transparent); }
  .nav-links a[aria-current='page'] { border-bottom: 0; color: var(--color-accent); }
}

/* — registration: the record, set as a register — */
.registry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 calc(2 * var(--leading)); margin: calc(1.5 * var(--leading)) 0 0; max-width: 900px; }
.registry > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0 var(--leading);
  padding: var(--half) 0; border-top: 1px solid var(--color-divider); align-items: baseline; min-width: 0; }
.registry dt { font-size: 12.5px; line-height: var(--half); letter-spacing: 0.07em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent); margin: 0; }
.registry dd { margin: 0; font-size: 15.5px; line-height: var(--leading); color: var(--color-text);
  font-feature-settings: "tnum" 1; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .registry { grid-template-columns: 1fr; }
  .registry > div { grid-template-columns: 150px 1fr; }
}

.docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(1.5 * var(--leading)); margin-top: calc(1.75 * var(--leading)); max-width: 900px; }
.doc-card { display: grid; gap: 6px; text-decoration: none; padding: calc(1.25 * var(--leading));
  border: 1px solid var(--color-divider); border-top: 3px solid var(--clr-saffron);
  border-radius: var(--radius-md, 4px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--clr-marigold) 9%, var(--color-surface)), var(--color-surface));
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.doc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-top-color: var(--clr-vermilion); }
.doc-card .doc-kind { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); }
.doc-card .doc-title { font-family: var(--font-heading); font-size: 25px; line-height: var(--leading); color: var(--color-text); }
.doc-card .doc-meta { font-size: 13.5px; line-height: var(--leading); font-feature-settings: "tnum" 1;
  color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.doc-card .doc-open { font-size: 14px; line-height: var(--leading); color: var(--color-accent-700); margin-top: var(--half); }
.doc-note { font-size: 14px; line-height: var(--leading); max-width: 62ch;
  color: color-mix(in srgb, var(--color-text) 62%, transparent); margin: calc(1.25 * var(--leading)) 0 0; }
@media (max-width: 720px) { .docs { grid-template-columns: 1fr; } }

/* — nav on small screens: the mark, the menu and the mantra button must all fit.
   The brand is the only element allowed to shrink; toggle and button never do. — */
.nav { gap: 12px; }
.nav .btn.btn-primary { white-space: nowrap; }
@media (max-width: 1000px) {
  .nav { gap: 10px; overflow: visible; }
  .nav a.nav-brand { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .nav-toggle, .nav .btn.btn-primary { flex: 0 0 auto; }
  .nav .btn.btn-primary { padding: 9px 14px; font-size: 14px; }
}
@media (max-width: 700px) {
  .nav { padding-block: 10px; gap: 8px 10px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand mantra" "brand menu"; align-items: center; justify-items: end; }
  .nav a.nav-brand { grid-area: brand; justify-self: start; font-size: 0; gap: 0; flex: 0 0 auto; }
  .nav .btn.btn-primary { grid-area: mantra; }
  .nav-toggle { grid-area: menu; padding: 8px 11px; font-size: 13px; }
  .nav-toggle .bars { display: none; }
  .logo-mark { width: 52px; height: 52px; }
  .nav .btn.btn-primary { padding: 8px 12px; font-size: 13px; letter-spacing: 0.02em; }
  .nav-links { top: calc(100% - 1px); }
}
@media (max-width: 380px) {
  .logo-mark { width: 44px; height: 44px; }
  .nav .btn.btn-primary, .nav-toggle { padding: 7px 10px; font-size: 12.5px; }
}

/* the bar rides the scroll */
.nav { position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, color-mix(in srgb, var(--clr-marigold) 12%, var(--color-bg)), var(--color-bg));
  box-shadow: 0 1px 0 var(--color-divider), 0 10px 24px -24px rgba(90,45,10,0.55); }
html { scroll-padding-top: 120px; }