/* Four Mirrors v5: the tradition pages (saju, vedic, numerology, tzolkin, mayan, humandesign).
   Loaded after site.css on those six pages only. site.css tokens only, no new colours except the
   three BodyGraph key swatches, which are sampled from the chart itself. No em dashes, by house rule.
   Logged in _build/SKILLS-LEDGER-TRADITIONS.md. */

/* ---------- Script subsets: each file downloads only on a page that renders those characters ---------- */
@font-face { font-family: 'FM Han'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/tradition-notoserifkr-saju.woff2') format('woff2'); unicode-range: U+1100-11FF, U+7678, U+AC00-D7A3; }
@font-face { font-family: 'FM Han'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/tradition-notoserifkr-sa.woff2') format('woff2'); unicode-range: U+4E8B; }
@font-face { font-family: 'FM Devanagari'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/tradition-notoserifdeva.woff2') format('woff2'); unicode-range: U+0900-097F; }
@font-face { font-family: 'FM Greek'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/tradition-ebgaramond-greek.woff2') format('woff2'); unicode-range: U+03A6; }
.trad [lang="ko"] { font-family: 'FM Han', var(--font-text); font-size: 0.84em; letter-spacing: 0; margin-inline: -0.06em; }
.trad [lang="sa"] { font-family: 'FM Devanagari', var(--font-text); font-size: 0.9em; letter-spacing: 0; }
.trad .glyph-greek { font-family: 'FM Greek', var(--font-text); font-style: normal; }
.trad { font-synthesis: none; } /* five faces only: never a faux bold or faux italic */
.trad strong { font-weight: 400; color: var(--color-display-bright); }
.trad .h3 em, .trad .title em { font-style: italic; font-weight: 400; }

/* ---------- Title page ---------- */
.trad .page-head { padding-top: calc(var(--head-h) + clamp(28px, 5vw, 72px)); padding-bottom: clamp(56px, 7vw, 96px); }
/* The running head: where the reader stands (back to the book, and which mirror this is). It replaces
   a tracked-caps kicker over the h1, so the title carries itself. */
.trad-crumb {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px;
  margin: 0 auto clamp(32px, 4.5vw, 56px);
  font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.1875rem; line-height: 1.3;
}
/* the back link is the same quiet link, size and chevron as the other inner pages' crumb (pages.css .legal__crumb) */
.trad-crumb__back { gap: 10px; font-size: 1.1875rem; }
.icon-chev { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--color-accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base) var(--ease-out); }
.icon-chev--back { transform: rotate(180deg); }
.trad-crumb__back:hover .icon-chev--back { transform: rotate(180deg) translateX(3px); }
.trad-crumb__star { width: 9px; height: 9px; flex: none; fill: var(--gold-600); }
.trad-crumb__here { color: var(--color-accent); }
@media (max-width: 479.98px) {
  .trad-crumb { flex-direction: column; gap: 0; }
  .trad-crumb__star { display: none; }
}
.trad-seal { margin: 0 auto var(--space-6); }

/* The title is set like a book's title page: the name, then its subtitle in italic */
.trad-title { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1vw, 12px); }
.trad-title__name { display: block; line-height: 1; color: var(--color-display); } /* size from .page-head__title */
.trad-title__sub {
  display: block; max-width: 20em;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--text-statement); line-height: 1.16; letter-spacing: 0;
  color: var(--color-ink); text-wrap: balance;
}
.trad .page-head__lead { max-width: 32em; margin-top: clamp(24px, 3vw, 32px); }
/* Prose on these pages never leaves a two-letter tail on a line ("astrologic-al") */
.trad .prose p { hyphenate-limit-chars: 7 4 3; }

/* The imprint: three facts in one ruled band, like the foot of a title page */
.trad-imprint { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin: clamp(44px, 5.5vw, 72px) auto 0; }
.trad-imprint > div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px clamp(14px, 2vw, 26px); text-align: center; }
.trad-imprint > div + div::before { content: ""; position: absolute; left: 0; top: 4%; bottom: 4%; width: 1px; background: linear-gradient(180deg, transparent, var(--gold-600), transparent); }
.trad-imprint dt { font-family: var(--font-caps); font-size: var(--text-label); letter-spacing: 0.26em; text-transform: uppercase; color: var(--color-accent); padding-left: 0.26em; }
.trad-imprint dd { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-h4); line-height: 1.3; color: var(--color-ink); text-wrap: balance; }
@media (max-width: 699.98px) {
  .trad-imprint { grid-template-columns: 1fr; max-width: 340px; }
  .trad-imprint > div { padding: 18px 8px; gap: 8px; }
  .trad-imprint > div + div::before { left: 12%; right: 12%; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-600), transparent); }
}

/* ---------- Chapter heads with a lead sentence ---------- */
.trad .chapter__head .lead { max-width: 34em; margin: var(--space-6) auto 0; color: var(--color-ink); }
.trad .chapter__head .title + .lead { margin-top: var(--space-6); }

/* ---------- The lens plate: the tradition's own engraved vignette, the same ring the homepage method shows ---------- */
.trad-plate { --d: clamp(132px, 96px + 5vw, 168px); position: relative; width: var(--d); margin: 0 auto clamp(32px, 4vw, 44px); }
.trad-plate::before { content: ""; position: absolute; inset: -55%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(227, 199, 126, 0.11), rgba(107, 30, 36, 0.05) 55%, rgba(4, 7, 14, 0)); }
.trad-plate__ring { position: relative; width: var(--d); height: var(--d); }
.trad-plate__ring picture, .trad-plate__ring img { position: absolute; left: 7px; top: 7px; width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 50%; }
.trad-plate__ring img { object-fit: cover; object-position: 50% 30%; }
.trad-plate__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trad-plate__ring circle { fill: none; stroke: url(#fmGold); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* ---------- What it reveals: set like a contents page, numeral, name, then the line about it ---------- */
.trad-contents { list-style: none; max-width: 660px; margin: clamp(48px, 6vw, 72px) auto 0; text-align: center; }
.trad-contents > li + li { margin-top: clamp(44px, 5vw, 60px); }
.trad-contents__num { display: block; margin-bottom: 10px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-h4); line-height: 1; color: var(--color-accent); }
.trad-contents .h3 { max-width: 22em; margin-inline: auto; }
.trad-contents p { max-width: 54ch; margin: var(--space-3) auto 0; color: var(--color-ink); text-align: justify; text-align-last: center; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 4 3; text-wrap: pretty; }
@media (max-width: 479.98px) { .trad-contents p { text-align: center; text-align-last: auto; hyphens: manual; } }

/* ---------- What it sounds like: a page of a reading, in the gold frame (the one frame on the page) ---------- */
.trad-excerpt { max-width: 920px; margin: clamp(44px, 5.5vw, 64px) auto 0; text-align: center; }
.trad-excerpt figcaption { margin-bottom: clamp(28px, 3.6vw, 44px); font-size: var(--text-label); } /* nothing read sits under 13px */
.trad-excerpt blockquote { margin: 0; }
.trad-excerpt blockquote p {
  max-width: 58ch; margin-inline: auto;
  font-size: var(--text-lead); line-height: 1.62; color: var(--color-ink);
  text-align: justify; text-align-last: center; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 4 3; text-wrap: pretty;
}
@media (max-width: 479.98px) { .trad-excerpt blockquote p { text-align: left; text-align-last: auto; hyphens: manual; } }

/* ---------- Questions inside a chapter (Tzolk'in) ---------- */
.trad-faq { margin-top: clamp(56px, 7vw, 88px); }
.trad-faq > .label { margin-bottom: clamp(28px, 3.5vw, 40px); }

/* ---------- The next mirror: one ruled line of wayfinding, with the next lens ---------- */
.trad-next { padding-block: clamp(40px, 5vw, 64px); }
.trad-next__link {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 560px; margin: 0 auto; padding: clamp(36px, 4.4vw, 48px) 24px; overflow: hidden;
  border-top: 1px solid var(--color-line-faint); border-bottom: 1px solid var(--color-line-faint);
  text-align: center; text-decoration: none;
}
.trad-next__link::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(227, 199, 126, 0.1), rgba(227, 199, 126, 0) 70%); transition: opacity var(--dur-slow) var(--ease-out); }
.trad-next__link:hover::before, .trad-next__link:focus-visible::before { opacity: 1; }
.trad-next__ring { position: relative; width: 76px; height: 76px; margin-bottom: 6px; }
.trad-next__ring picture, .trad-next__ring img { position: absolute; left: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%; }
.trad-next__ring img { object-fit: cover; object-position: 50% 30%; }
.trad-next__ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trad-next__ring circle { fill: none; stroke: url(#fmGold); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke-width var(--dur-base) var(--ease-out); }
.trad-next__ring > .trad-next__mark { left: 17px; top: 17px; width: calc(100% - 34px); height: calc(100% - 34px); } /* an svg never sizes itself from inset */
.trad-next__label { font-family: var(--font-caps); font-size: var(--text-label); letter-spacing: 0.26em; text-transform: uppercase; color: var(--color-accent); padding-left: 0.26em; }
.trad-next__name { position: relative; display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 500; font-size: var(--text-h3); line-height: 1.2; color: var(--color-display); transition: color var(--dur-fast) var(--ease-out); }
.trad-next__name .arrow { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--color-accent); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base) var(--ease-out); }
.trad-next__name .glyph-sun { width: 0.62em; height: 0.62em; fill: none; stroke: currentColor; stroke-width: 1.6; }
.trad-next__name .glyph-sun .dot { fill: currentColor; stroke: none; }
.trad-next__link:hover .trad-next__name { color: var(--color-display-bright); }
.trad-next__link:hover .arrow { transform: translateX(4px); }
.trad-next__link:hover .trad-next__ring circle { stroke-width: 1.6; }

/* ---------- Closing invitation: the one fine line under the sentence ---------- */
/* The live pages set this line as a pull quote; it keeps that voice (statement italic) and so holds to two lines on a phone */
.trad .cta-band .title { font-style: italic; font-weight: 400; font-size: var(--text-statement); line-height: 1.24; max-width: 21em; }
.trad .cta-band .note { margin-top: var(--space-4); }
.trad .cta-band .btn { margin-top: var(--space-6); }

/* ---------- Human Design: the BodyGraph plate and its key ---------- */
.trad--hd { --hd-gold: #D4A041; --hd-red: #B0371C; --hd-line: #E6D4A6; } /* sampled from the chart, used only to key it */
.trad-chart { width: min(520px, 100%); margin: clamp(44px, 5.5vw, 64px) auto 0; }
.trad-chart .page-figure__page { aspect-ratio: 900 / 1352; background: var(--color-ground); }
.trad-chart .page-figure__page img { object-fit: contain; }
.trad-key { list-style: none; max-width: 620px; margin: clamp(44px, 5.5vw, 64px) auto 0; display: grid; gap: 22px; }
.trad-key li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 18px; align-items: start; }
.trad-key svg { width: 34px; height: 26px; margin-top: 2px; overflow: visible; }
.trad-key p { color: var(--color-ink); text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 4 3; }
.trad-key .sw-def { fill: var(--hd-gold); stroke: var(--hd-line); stroke-width: 1; }
.trad-key .sw-open { fill: none; stroke: var(--hd-line); stroke-width: 1; }
.trad-key .sw-chan { fill: var(--hd-red); stroke: var(--hd-line); stroke-width: 0.8; }
.trad-key .sw-gate { fill: var(--hd-red); stroke: var(--hd-gold); stroke-width: 1.2; }
/* the note belongs to the key: it sits on the key's text column, not centred under left-set rows */
.trad-key-note { max-width: 620px; margin: clamp(28px, 3.5vw, 40px) auto 0; padding-left: 52px; text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 4 3; text-wrap: pretty; }
@media (max-width: 479.98px) { .trad-key p, .trad-key-note { text-align: left; hyphens: manual; } .trad-key li { column-gap: 14px; } .trad-key-note { padding-left: 48px; } }

/* ---------- Reduced motion: hover colour stays, travel goes ---------- */
@media (prefers-reduced-motion: reduce) {
  .trad-crumb__back:hover .icon-chev--back { transform: rotate(180deg); }
  .trad-next__link:hover .arrow { transform: none; }
}

/* ---------- Forced colours: gradient strokes and image rings fall back to system colours ---------- */
@media (forced-colors: active) {
  .trad-plate__ring circle, .trad-next__ring circle { stroke: CanvasText; }
  .trad-imprint > div + div::before { background: CanvasText; }
  .trad-key svg * { forced-color-adjust: none; }
}