/* Site stylesheet. Plain CSS, no framework, no third-party fonts (the CSP
 * allows only same-origin assets). Tokens first, then layout, then components.
 * No inline style="" anywhere in templates: put utilities here instead.
 *
 * Brand: the Kassis Karate Academy logo -- crimson #d31939, ink #231f20 and
 * grey #a7a9ac. Display type is Oswald (self-hosted, OFL; static/fonts/).
 * Kerala accents: kasavu gold (the zari border of the Kerala sari) for thin
 * border bands, a faint kolam dot grid on alternate sections, and Malayalam
 * set in the visitor's system Malayalam font. */

@font-face {
    font-family: "Oswald";
    src: url("../fonts/oswald-latin-wght-normal.16cba75f4b99.woff2") format("woff2");
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-jp: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", "Noto Serif JP", serif;
    --font-ml: "Noto Sans Malayalam", "Manjari", "Nirmala UI", "Kartika", "Malayalam Sangam MN", sans-serif;
    --font-ta: "Noto Sans Tamil", "Nirmala UI", "Latha", "Tamil Sangam MN", sans-serif;
    --color-text: #231f20;
    --color-muted: #5d5759;
    --color-bg: #ffffff;
    --color-bg-alt: #f7f4f1;
    --color-border: #e6e0dc;
    --color-primary: #231f20;
    --color-primary-contrast: #ffffff;
    --color-accent: #d31939;
    --color-accent-dark: #a9122c;
    --color-ink: #1b1718;
    --color-ink-2: #2a2526;
    --color-on-ink: #f4f0ee;
    --color-on-ink-muted: #bdb5b3;
    --color-grey: #a7a9ac;
    --color-gold: #c9a24b;
    --kasavu: linear-gradient(to bottom, var(--color-gold) 0 2px, transparent 2px 5px, var(--color-gold) 5px 10px);
    --color-success: #15803d;
    --color-error: #b91c1c;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(27, 23, 24, 0.06), 0 8px 24px rgba(27, 23, 24, 0.08);
    --shadow-lg: 0 2px 4px rgba(27, 23, 24, 0.06), 0 24px 48px rgba(27, 23, 24, 0.14);
    --container: 75rem;
    --container-narrow: 46rem;
    --space: 1rem;
    --header-h: 5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-dark); }
h1, h2, h3, h4 {
    font-family: var(--font-display); line-height: 1.12; margin: 0 0 0.5em; font-weight: 600;
    letter-spacing: 0.005em; text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.5rem); text-transform: uppercase; }
h3 { font-size: 1.35rem; font-weight: 500; }
p { margin: 0 0 1em; }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--color-bg-alt); padding: 0.1em 0.35em; border-radius: 3px; }
.lead { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); color: var(--color-muted); line-height: 1.6; }
.meta, .muted { color: var(--color-muted); font-size: 0.95rem; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 0.9rem;
    font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--color-accent);
}
.eyebrow::before { content: ""; width: 2rem; height: 2px; background: currentColor; }
.text-accent { color: var(--color-accent); }

/* --- layout --------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--space), var(--container)); margin-inline: auto; }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(3rem, 7vw, 6rem); position: relative; }
.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.section--alt {
    background-color: var(--color-bg-alt);
    background-image: radial-gradient(circle, rgba(201, 162, 75, 0.22) 1.2px, transparent 1.7px);
    background-size: 26px 26px;
}
[lang="ml"] { font-family: var(--font-ml); }
[lang="ta"] { font-family: var(--font-ta); }
.section--ink { background: var(--color-ink); color: var(--color-on-ink); }
.section--ink .lead, .section--ink .muted { color: var(--color-on-ink-muted); }
.section--ink a:not(.btn) { color: #fff; }
.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .eyebrow::after { content: ""; width: 2rem; height: 2px; background: currentColor; }
.section-head p:last-child { margin-bottom: 0; }
.flow > * + * { margin-top: 1em; }
.flow h2, .flow h3 { margin-top: 1.6em; }
.flow h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.flow img { border-radius: var(--radius); }
.flow ul, .flow ol { padding-left: 1.25rem; }
.flow li + li { margin-top: 0.35em; }
.flow blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 4px solid var(--color-accent); color: var(--color-muted); }
.flow figure { margin: 2em 0; }
.flow figcaption { font-size: 0.9rem; color: var(--color-muted); margin-top: 0.5rem; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--top { align-items: start; }
@media (max-width: 56em) { .split { grid-template-columns: 1fr; } }

/* --- accessibility helpers ------------------------------------------------ */
.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
    position: fixed !important; top: 0.5rem; left: 0.5rem; width: auto; height: auto; margin: 0;
    padding: 0.5rem 1rem; clip: auto; background: var(--color-accent); color: #fff; z-index: 1000;
}
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.section--ink :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible { outline-color: #fff; }
.u-hidden { display: none !important; }

/* --- top bar -------------------------------------------------------------- */
.topbar { background: var(--color-ink); color: var(--color-on-ink-muted); font-size: 0.875rem; }
.topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.5rem; }
.topbar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.topbar a:hover { color: #fff; }
.topbar svg { flex: none; color: var(--color-accent); }
.topbar .social a { border: 0; padding: 0.2rem; color: var(--color-on-ink-muted); }
.topbar .social a:hover { color: #fff; }
.topbar .social svg { color: currentColor; width: 18px; height: 18px; }
.topbar .social li:has(a[aria-label="WhatsApp"]) { display: none; }
@media (max-width: 48em) {
    .topbar__item--email, .topbar .social { display: none; }
    .topbar__row { justify-content: center; }
}

/* --- header --------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--color-border); backdrop-filter: saturate(1.4) blur(8px);
}
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); flex-wrap: wrap; }
.site-brand { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--color-text); }
.site-brand img { width: auto; height: 56px; }
.site-brand__sub {
    font-family: var(--font-display); font-size: 0.9rem; font-weight: 500; line-height: 1.15;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted);
    padding-left: 0.85rem; border-left: 2px solid var(--color-accent);
}
.site-brand__sub strong { display: block; font-size: 1.15rem; font-weight: 600; color: var(--color-text); letter-spacing: 0.18em; }
.site-nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.site-nav__list a {
    font-family: var(--font-display); font-size: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--color-text); text-decoration: none; padding-block: 0.35rem; border-bottom: 2px solid transparent;
}
.site-nav__list a:hover { color: var(--color-accent); }
.site-nav__list a.is-current { border-bottom-color: var(--color-accent); }
.site-search { display: flex; }
.site-search input {
    border: 1px solid var(--color-border); border-radius: 999px 0 0 999px; padding: 0.45rem 0.85rem; width: 7.5rem;
    font: inherit; font-size: 0.92rem; background: var(--color-bg-alt);
}
.site-search button {
    border: 1px solid var(--color-border); border-left: 0; border-radius: 0 999px 999px 0; background: var(--color-bg-alt);
    padding: 0 0.75rem 0 0.55rem; cursor: pointer; display: inline-flex; align-items: center; color: var(--color-text);
}
.site-header__cta { padding: 0.6rem 1.15rem; }
.nav-toggle { display: none; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.6rem; cursor: pointer; flex-direction: column; gap: 4px; }
.nav-toggle > span:not(.screen-reader-text) { display: block; width: 22px; height: 2px; background: var(--color-text); transition: transform 0.2s, opacity 0.2s; }
.nav-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 72em) {
    .nav-toggle { display: inline-flex; }
    .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 1rem; padding: 0.5rem 0 1.25rem; }
    .site-nav.is-open { display: flex; }
    .site-nav__list { flex-direction: column; gap: 0; }
    .site-nav__list a { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--color-border); }
    .site-nav__list a.is-current { color: var(--color-accent); border-bottom-color: var(--color-border); }
    .site-search input { flex: 1; width: auto; }
    .site-header__cta { text-align: center; }
}
@media (max-width: 26em) {
    .site-brand img { height: 46px; }
    .site-brand__sub { font-size: 0.75rem; padding-left: 0.6rem; }
    .site-brand__sub strong { font-size: 0.95rem; }
}

/* --- boosted navigation progress bar ------------------------------------- */
#page-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--color-accent); z-index: 1001; transition: width 0.3s ease; }
html.is-navigating #page-progress { width: 80%; }

/* --- buttons -------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.8rem 1.5rem;
    border-radius: 999px; border: 2px solid var(--color-accent); background: var(--color-accent); color: #fff;
    font-family: var(--font-display); font-size: 1rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
    line-height: 1.2; text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.btn:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; transform: translateY(-1px); }
.btn svg { flex: none; }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.08rem; }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: currentColor; color: inherit; }
.btn--light { background: #fff; border-color: #fff; color: var(--color-ink); }
.btn--light:hover { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.btn--dark { background: var(--color-ink); border-color: var(--color-ink); }
.btn--dark:hover { background: var(--color-accent); border-color: var(--color-accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.link-arrow {
    display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.95rem; text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform 0.15s; }
.link-arrow:hover::after { transform: translateX(4px); }

/* --- crest motif ---------------------------------------------------------- */
.crest { color: var(--color-accent); }
.crest path, .crest rect { fill: currentColor; }

/* --- home hero ------------------------------------------------------------ */
.hero {
    position: relative; overflow: hidden; color: var(--color-on-ink);
    background:
        radial-gradient(ellipse 60% 70% at 78% 45%, rgba(211, 25, 57, 0.32), transparent 70%),
        radial-gradient(ellipse 50% 60% at 0% 100%, rgba(211, 25, 57, 0.12), transparent 70%),
        var(--color-ink);
}
.hero__grid {
    position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-block: clamp(3.5rem, 7vw, 6rem) clamp(6rem, 10vw, 8rem);
}
.hero h1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.2rem); line-height: 1; margin-bottom: 1.25rem; color: #fff; }
.hero h1 .text-accent { display: block; }
.hero .eyebrow { color: #ff5a73; }
.hero .lead { color: var(--color-on-ink-muted); max-width: 34rem; margin-bottom: 2rem; }
.hero__badges { list-style: none; margin: 2.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; color: var(--color-on-ink-muted); font-size: 0.95rem; }
.hero__badges li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__badges svg { color: var(--color-accent); flex: none; }
.hero__media { position: relative; justify-self: center; width: min(100%, 30rem); }
.hero__media::before {
    content: ""; position: absolute; inset: 8% 4%; border-radius: 50%;
    background: radial-gradient(circle, rgba(211, 25, 57, 0.55), rgba(211, 25, 57, 0) 70%);
}
.hero__media .crest { position: absolute; width: 124%; left: -12%; top: 50%; transform: translateY(-50%); opacity: 0.3; }
.hero__media img {
    position: relative; width: 100%; height: auto;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
}
.hero__kanji {
    display: none; position: absolute; z-index: 0; top: 50%; left: 0.75rem; transform: translateY(-50%); writing-mode: vertical-rl;
    font-family: var(--font-jp); font-size: 6rem; line-height: 1; white-space: nowrap; color: rgba(255, 255, 255, 0.05);
    pointer-events: none; user-select: none;
}
@media (min-width: 92em) { .hero__kanji { display: block; } }
@media (max-width: 56em) {
    .hero__grid { grid-template-columns: 1fr; text-align: left; padding-bottom: 7rem; }
    .hero__media { width: min(80%, 22rem); order: -1; }
}

/* --- stats ---------------------------------------------------------------- */
.stats {
    position: relative; z-index: 2; margin: -4rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden;
}
.stat { padding: 1.6rem 1.5rem; border-left: 1px solid var(--color-border); }
.stat:first-child { border-left: 0; }
.stat__value { display: block; font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 600; line-height: 1; color: var(--color-accent); margin-bottom: 0.4rem; }
.stat__label { display: block; font-size: 0.95rem; color: var(--color-muted); line-height: 1.4; }
@media (max-width: 56em) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(3) { border-left: 0; }
    .stat:nth-child(n + 3) { border-top: 1px solid var(--color-border); }
}

/* --- programs (cards) ----------------------------------------------------- */
.program-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 64em) { .program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34em) { .program-grid { grid-template-columns: 1fr; } }
.program-card {
    position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s;
}
.program-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.program-card__media { position: relative; overflow: hidden; background: #f2f2f2; }
.program-card__media img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.4s; }
.program-card:hover .program-card__media img { transform: scale(1.04); }
.chip {
    display: inline-block; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--color-accent); color: #fff;
    font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.program-card .chip { position: absolute; top: 0.9rem; left: 0.9rem; }
.program-card__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.program-card__body h3 { font-size: 1.45rem; text-transform: uppercase; margin-bottom: 0.4rem; }
.program-card__body h3 a { color: inherit; text-decoration: none; }
.program-card__body h3 a::after { content: ""; position: absolute; inset: 0; }
.program-card__body p { color: var(--color-muted); font-size: 0.98rem; }
.program-card__body .link-arrow { margin-top: auto; }
.more-programs { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.more-programs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.more-programs a {
    display: inline-block; padding: 0.45rem 1rem; border: 1px solid var(--color-border); border-radius: 999px;
    background: #fff; color: var(--color-text); text-decoration: none; font-size: 0.95rem;
}
.more-programs a:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* --- benefits ------------------------------------------------------------- */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 2rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 56em) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34em) { .benefits { grid-template-columns: 1fr; } }
.benefit { display: grid; grid-template-columns: auto 1fr; gap: 0 1.1rem; }
.benefit__icon {
    grid-row: span 2; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center;
    background: rgba(211, 25, 57, 0.08); color: var(--color-accent);
}
.section--ink .benefit__icon { background: rgba(211, 25, 57, 0.18); color: #ff5a73; }
.benefit h3 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 0.35rem 0 0.35rem; }
.benefit p { margin: 0; color: var(--color-muted); font-size: 0.98rem; }
.section--ink .benefit p { color: var(--color-on-ink-muted); }

/* --- lineage timeline ----------------------------------------------------- */
.lineage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; position: relative; }
.lineage::before { content: ""; position: absolute; top: 1.4rem; left: 1.4rem; right: 1.4rem; height: 2px; background: linear-gradient(90deg, var(--color-accent), rgba(211, 25, 57, 0.25)); }
.lineage__item { position: relative; }
.lineage__dot { position: relative; width: 2.8rem; height: 2.8rem; padding: 0.35rem; border-radius: 50%; background: var(--color-bg); margin-bottom: 1rem; }
.section--alt .lineage__dot { background: var(--color-bg-alt); }
.section--ink .lineage__dot { background: var(--color-ink); }
.lineage__years { display: block; font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.lineage__item h3 { font-size: 1.25rem; margin: 0.2rem 0 0.15rem; }
.lineage__role { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; }
.lineage__item p { font-size: 0.95rem; color: var(--color-muted); margin: 0; }
.section--ink .lineage__item p { color: var(--color-on-ink-muted); }
.lineage__item:last-child .lineage__dot { background: var(--color-accent); }
.lineage__item:last-child .crest { color: #fff; }
@media (max-width: 64em) {
    .lineage { grid-template-columns: 1fr; gap: 0; }
    .lineage::before { top: 0.5rem; bottom: 0.5rem; left: 1.4rem; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--color-accent), rgba(211, 25, 57, 0.25)); }
    .lineage__item { padding: 0 0 2rem 4.25rem; }
    .lineage__dot { position: absolute; left: 0; top: 0; }
}

/* --- media frames ---------------------------------------------------------- */
.framed { margin: 0; }
.framed__media { position: relative; }
.framed__media img { position: relative; z-index: 1; width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.framed__media::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 2px solid var(--color-accent); border-radius: var(--radius); }
.framed figcaption { position: relative; z-index: 1; margin-top: 1.75rem; font-size: 0.9rem; color: var(--color-muted); }
.section--ink .framed figcaption { color: var(--color-on-ink-muted); }
@media (max-width: 34em) { .framed__media::before { inset: 0.75rem -0.6rem -0.75rem 0.6rem; } }
.checklist { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.checklist li { position: relative; padding-left: 2rem; }
.checklist li::before {
    content: ""; position: absolute; left: 0; top: 0.3em; width: 1.2rem; height: 1.2rem; border-radius: 50%;
    background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
.checklist + p { margin-top: 1.75rem; }
.checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.5rem; }
@media (max-width: 34em) { .checklist--2 { grid-template-columns: 1fr; } }

/* --- quote band ----------------------------------------------------------- */
.quote-band { position: relative; overflow: hidden; text-align: center; }
.quote-band .crest { position: absolute; width: 34rem; max-width: 90%; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.07; color: #fff; }
.quote-band blockquote { position: relative; margin: 0 auto; max-width: 52rem; }
.quote-band blockquote p { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.9rem); font-weight: 500; line-height: 1.2; text-transform: uppercase; margin-bottom: 1rem; }
.quote-band cite { font-style: normal; color: var(--color-on-ink-muted); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.9rem; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; cursor: pointer;
    list-style: none; font-weight: 600; font-size: 1.08rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--color-bg-alt); color: var(--color-accent); font-size: 1.3rem; font-weight: 400; transition: transform 0.2s, background 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--color-accent); color: #fff; }
.faq summary:hover { color: var(--color-accent); }
.faq details p { margin: 0 0 1.25rem; color: var(--color-muted); max-width: 46rem; }

/* --- call to action band -------------------------------------------------- */
.cta-band {
    position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(ellipse 60% 120% at 100% 0%, rgba(255, 255, 255, 0.14), transparent 60%), linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
}
.cta-band .crest { position: absolute; right: -6rem; top: 50%; width: 26rem; transform: translateY(-50%); color: #fff; opacity: 0.1; }
.cta-band__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-band h2 { margin-bottom: 0.35rem; color: #fff; }
.cta-band p { margin: 0; opacity: 0.92; font-size: 1.1rem; }

/* --- inner page hero ------------------------------------------------------ */
.page-hero {
    position: relative; overflow: hidden; color: var(--color-on-ink);
    background: radial-gradient(ellipse 50% 90% at 90% 20%, rgba(211, 25, 57, 0.3), transparent 70%), var(--color-ink);
}
.page-hero__body { position: relative; z-index: 1; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); max-width: 50rem; }
.page-hero h1 { color: #fff; margin-bottom: 0.9rem; }
.page-hero .eyebrow { color: #ff5a73; }
.page-hero .lead { color: var(--color-on-ink-muted); margin: 0; }
.page-hero__kanji {
    position: absolute; right: 3%; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-family: var(--font-jp);
    font-size: clamp(3.5rem, 7vw, 6.5rem); line-height: 1; white-space: nowrap; color: rgba(255, 255, 255, 0.05); pointer-events: none; user-select: none;
}
.page-hero .crest { position: absolute; right: -4rem; bottom: -6rem; width: 22rem; color: var(--color-accent); opacity: 0.18; }
.page-hero .breadcrumb { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: relative; z-index: 1; }
.page-hero .breadcrumb a { color: var(--color-on-ink); }
.page-hero .breadcrumb [aria-current], .page-hero .breadcrumb li + li::before { color: var(--color-on-ink-muted); }

/* --- breadcrumb ----------------------------------------------------------- */
.breadcrumb { font-size: 0.9rem; padding-block: 0.75rem; background: var(--color-bg-alt); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumb a { color: var(--color-text); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb li + li::before { content: "›"; margin-right: 0.4rem; color: var(--color-muted); }
.breadcrumb [aria-current] { color: var(--color-muted); }

/* --- people (about) ------------------------------------------------------- */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.5rem; }
.person { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem; border-top: 4px solid var(--color-accent); }
.person__mark {
    width: 3.75rem; height: 3.75rem; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1rem;
    background: var(--color-ink); color: #fff; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: 0.04em;
}
.person__mark, .person__photo { width: 6rem; height: 6rem; font-size: 1.75rem; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--color-accent); }
.person__photo { display: block; border-radius: 50%; object-fit: cover; margin-bottom: 1.1rem; background: var(--color-bg-alt); }
.person h3 { font-size: 1.35rem; margin-bottom: 0.15rem; }
.person__role { display: block; color: var(--color-accent); font-weight: 600; font-size: 0.95rem; margin-bottom: 0.85rem; }
.person p { color: var(--color-muted); font-size: 0.98rem; margin: 0; }
.person ul { margin: 0.75rem 0 0; padding-left: 1.1rem; color: var(--color-muted); font-size: 0.95rem; }

/* --- gallery -------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(8rem, 14vw, 11rem); gap: 1rem; }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--color-ink-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.gallery figure:hover img { transform: scale(1.03); }
.gallery figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1rem 0.85rem; font-size: 0.88rem; color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
}
.gallery__a { grid-column: span 4; grid-row: span 2; }
.gallery__b { grid-column: span 2; grid-row: span 2; }
.gallery__b img { object-position: center 15%; }
.gallery__c { grid-column: span 3; grid-row: span 2; }
/* A wide group photo shown whole (letterboxed) instead of losing people at the edges. */
.gallery__whole img { object-fit: contain; }
@media (max-width: 48em) {
    .gallery { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .gallery__a, .gallery__b, .gallery__c { grid-column: auto; grid-row: auto; }
    .gallery img { height: auto; aspect-ratio: 4 / 3; }
}

/* --- feature crest, pull quote --------------------------------------------- */
.feature-crest { display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.feature-crest .crest {
    width: min(100%, 20rem); height: auto; padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-lg);
}
.section--alt .feature-crest .crest { background: #fff; }
.pull-quote { margin: 1.75rem 0 0; padding: 1.5rem 1.75rem; border-left: 4px solid var(--color-accent); background: #fff; border-radius: 0 var(--radius) var(--radius) 0; }
.pull-quote p { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.35; margin-bottom: 0.5rem; }
.pull-quote cite { font-style: normal; color: var(--color-muted); font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase; }
.framed--portrait { max-width: 24rem; justify-self: center; width: 100%; }
@media (min-width: 56.01em) {
    .section-head--sticky { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.benefits--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.benefits--4 .benefit { grid-template-columns: 1fr; }
.benefits--4 .benefit__icon { grid-row: auto; margin-bottom: 0.75rem; }
@media (max-width: 64em) { .benefits--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34em) { .benefits--4 { grid-template-columns: 1fr; } }

/* --- program rows (programs page) ----------------------------------------- */
.program-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--color-border); }
.program-row:last-child { border-bottom: 0; }
.program-row:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.program-row:nth-child(even) .program-row__media { order: 2; }
.program-row__media { position: relative; }
.program-row__media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.program-row__media .chip { position: absolute; top: 1rem; left: 1rem; }
.program-row h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-bottom: 0.6rem; }
.program-row .lead { font-size: 1.1rem; }
@media (max-width: 48em) {
    .program-row, .program-row:nth-child(even) { grid-template-columns: 1fr; }
    .program-row:nth-child(even) .program-row__media { order: 0; }
    .program-row__media { max-width: 26rem; }
}
.jump-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.jump-nav a {
    display: inline-block; padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff; text-decoration: none; font-size: 0.92rem;
}
.jump-nav a:hover { background: var(--color-accent); border-color: var(--color-accent); }
.page-hero .jump-nav { margin-top: 1.75rem; }

/* --- steps ---------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; counter-reset: step; }
@media (max-width: 48em) { .steps { grid-template-columns: 1fr; } }
.steps li { counter-increment: step; background: #fff; border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); }
.steps li::before {
    content: "0" counter(step); display: block; font-family: var(--font-display); font-size: 2.6rem; font-weight: 600;
    line-height: 1; color: var(--color-accent); margin-bottom: 0.75rem;
}
.steps h3 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.03em; }
.steps p { margin: 0; color: var(--color-muted); font-size: 0.98rem; }

/* --- kata ----------------------------------------------------------------- */
.kata-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 56em) { .kata-groups { grid-template-columns: 1fr; } }
.kata-group { background: var(--color-ink-2); border-radius: var(--radius); padding: 1.75rem; border-top: 4px solid var(--color-accent); }
.kata-group h3 { color: #fff; font-size: 1.4rem; text-transform: uppercase; margin-bottom: 0.15rem; }
.kata-group__by { display: block; color: var(--color-on-ink-muted); font-size: 0.92rem; margin-bottom: 1.1rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.92rem; }

/* --- name panel (shito-ryu) ----------------------------------------------- */
.name-panel { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 2.5rem); flex-wrap: wrap; text-align: center; }
.name-panel__part { min-width: 7rem; }
.name-panel__kanji { display: block; font-family: var(--font-jp); font-size: clamp(3.2rem, 2rem + 4vw, 5rem); line-height: 1.1; color: var(--color-text); }
.name-panel__part:first-child .name-panel__kanji, .name-panel__part:nth-child(3) .name-panel__kanji { color: var(--color-accent); }
.name-panel__reading { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 1.1rem; margin-top: 0.5rem; }
.name-panel__note { display: block; font-size: 0.9rem; color: var(--color-muted); }
.name-panel__plus { font-family: var(--font-display); font-size: 2rem; color: var(--color-grey); }

/* --- contact -------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 56em) { .contact-grid { grid-template-columns: 1fr; } }
.contact-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.contact-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border-radius: var(--radius); background: var(--color-bg-alt); }
.contact-card__icon { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent); color: #fff; }
.contact-card h2 { font-size: 1.05rem; letter-spacing: 0.08em; margin: 0.1rem 0 0.2rem; }
.contact-card p { margin: 0; }
.contact-card a { color: var(--color-text); font-weight: 600; text-decoration: none; }
.contact-card a:hover { color: var(--color-accent); }
.form-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 4vw, 2.5rem); border-top: 4px solid var(--color-accent); }
.form-card h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

/* --- cards (blog) --------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.75rem; }
.card { border-radius: var(--radius); overflow: hidden; background: var(--color-bg); display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card--flat { box-shadow: none; border-bottom: 1px solid var(--color-border); border-radius: 0; padding-block: 1rem; }
.card--flat:hover { transform: none; box-shadow: none; }
.card__media { display: block; overflow: hidden; }
.card__media img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; transition: transform 0.4s; }
.card:hover .card__media img { transform: scale(1.03); }
.card__body { padding: 1.25rem 1.4rem 1.5rem; }
.card__title { font-size: 1.35rem; margin: 0.25rem 0 0.5rem; text-transform: none; }
.card__title a { color: var(--color-text); text-decoration: none; }
.card__title a:hover { color: var(--color-accent); }
.card .meta a { color: var(--color-accent); text-decoration: none; }
.card p:last-child { margin-bottom: 0; }

/* --- post ----------------------------------------------------------------- */
.post__header { margin-bottom: 1.75rem; }
.post__header h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); text-transform: none; }
.post__cover { margin: 0 0 2.25rem; }
.post__cover img { border-radius: var(--radius); width: 100%; box-shadow: var(--shadow); }

/* --- forms ---------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: 0.95rem; }
.form-field input, .form-field textarea {
    font: inherit; padding: 0.75rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-bg-alt); width: 100%; transition: border-color 0.15s, background 0.15s;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--color-accent); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(211, 25, 57, 0.15); }
.contact-form .btn { margin-top: 1.25rem; }
.form-notice { padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid; }
.form-notice--success { color: var(--color-success); border-color: currentColor; background: #f0fdf4; }
.form-notice--error { color: var(--color-error); border-color: currentColor; background: #fef2f2; }
@media (max-width: 40em) { .form-grid { grid-template-columns: 1fr; } }

/* --- pagination ----------------------------------------------------------- */
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.5rem; }

/* --- social --------------------------------------------------------------- */
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.6rem; }
.social a { display: inline-flex; padding: 0.5rem; border: 1px solid currentColor; border-radius: 50%; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.site-footer .social a:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* --- footer --------------------------------------------------------------- */
.site-footer { background: var(--color-ink); color: var(--color-on-ink-muted); font-size: 0.97rem; }
.site-footer a { color: var(--color-on-ink); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4.5rem); }
@media (max-width: 64em) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34em) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__logo { width: 180px; height: auto; margin-bottom: 1.25rem; }
.site-footer__heading { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.14em; color: #fff; margin-bottom: 1.1rem; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.site-footer__contact li { display: flex; gap: 0.65rem; align-items: flex-start; }
.site-footer__contact svg { flex: none; margin-top: 0.2rem; color: var(--color-accent); }
.site-footer .social { margin-top: 1.25rem; color: var(--color-on-ink); }
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 1.25rem; font-size: 0.88rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }
.site-footer__bottom p { margin: 0; }


/* --- Kerala accents --------------------------------------------------------- */
.hero::after, .page-hero::after, .site-footer::before {
    content: ""; position: absolute; left: 0; right: 0; height: 10px; background: var(--kasavu); z-index: 1;
}
.hero::after, .page-hero::after { bottom: 0; }
.site-footer { position: relative; }
.site-footer::before { top: 0; }
.hero__native { margin: -0.4rem 0 1.25rem; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); color: var(--color-gold); letter-spacing: 0.02em; }
.page-hero__native {
    position: absolute; right: 3%; top: 50%; transform: translateY(-50%); font-family: var(--font-ml);
    font-size: clamp(3rem, 8vw, 7rem); line-height: 1; white-space: nowrap; color: rgba(201, 162, 75, 0.12);
    pointer-events: none; user-select: none;
}
.eyebrow svg { flex: none; color: var(--color-gold); }
.section-head--center .eyebrow svg + * { margin-left: 0; }
.area-cloud { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.area-chip {
    display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 1.25rem; height: 100%; border-radius: var(--radius);
    background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--color-gold); box-shadow: var(--shadow);
    color: var(--color-text); text-decoration: none; font-family: var(--font-display); font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase; transition: transform 0.15s, border-color 0.15s;
}
.area-chip:hover { transform: translateY(-2px); border-color: var(--color-accent); color: var(--color-text); }
.area-chip span { font-size: 1.35rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-accent); }
.area-cloud li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* --- locations -------------------------------------------------------------- */
.location-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; align-items: start; }
@media (max-width: 56em) { .location-grid { grid-template-columns: 1fr; } }
.location { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.location__head { position: relative; padding: 1.5rem 1.75rem 1.75rem; background: radial-gradient(ellipse 70% 120% at 100% 0%, rgba(211, 25, 57, 0.35), transparent 70%), var(--color-ink); color: #fff; }
.location__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--kasavu); }
.location__native { display: block; font-size: 1.6rem; line-height: 1.3; color: var(--color-gold); }
.location__head h2 { color: #fff; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem); margin: 0.1rem 0 0.15rem; }
.location__district { color: var(--color-on-ink-muted); font-size: 0.92rem; }
.venue-list { list-style: none; margin: 0; padding: 0.5rem 1.75rem 1rem; }
.venue-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.85rem; align-items: start; padding: 0.95rem 0; border-bottom: 1px solid var(--color-border); }
.venue-list li:last-child { border-bottom: 0; }
.venue-list svg { color: var(--color-accent); margin-top: 0.2rem; }
.venue-list strong { display: block; line-height: 1.35; }
.venue-list div span { color: var(--color-muted); font-size: 0.92rem; }
.venue-list__when { text-align: right; padding-top: 0.15rem; }
.venue-list__days { display: block; font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); white-space: nowrap; }
.venue-list__time { display: block; font-size: 0.88rem; color: var(--color-muted); white-space: nowrap; }
.timetable { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1.25rem; align-items: start; }
.timetable__day { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.timetable__day h3 {
    margin: 0; padding: 0.8rem 1.25rem; background: var(--color-ink); color: #fff; font-size: 1.1rem;
    text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 3px solid var(--color-gold);
}
.timetable__day ul { list-style: none; margin: 0; padding: 0.35rem 1.25rem 0.75rem; }
.timetable__day li { padding: 0.65rem 0; border-bottom: 1px solid var(--color-border); line-height: 1.35; }
.timetable__day li:last-child { border-bottom: 0; }
.timetable__time { display: block; font-family: var(--font-display); font-size: 0.92rem; letter-spacing: 0.04em; color: var(--color-accent); }
.timetable__day a { color: var(--color-text); font-weight: 600; text-decoration: none; }
.timetable__day a:hover { color: var(--color-accent); }
.timetable__place { display: block; font-size: 0.88rem; color: var(--color-muted); }
@media (max-width: 34em) { .venue-list li { grid-template-columns: auto minmax(0, 1fr); } .venue-list__when { grid-column: 2; text-align: left; } }
.note {
    display: flex; gap: 0.7rem; align-items: flex-start; margin: 2rem 0 0; padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--color-bg-alt); border-left: 4px solid var(--color-gold);
}
.note svg { flex: none; margin-top: 0.2rem; color: var(--color-accent); }

/* --- journey timeline (about) ---------------------------------------------- */
.journey { list-style: none; margin: 0; padding: 0; position: relative; }
.journey::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--color-gold), var(--color-accent)); }
.journey__item { position: relative; width: 50%; padding: 0 3.25rem 3rem 0; }
.journey__item:nth-child(even) { margin-left: 50%; padding: 0 0 3rem 3.25rem; }
.journey__year {
    position: absolute; z-index: 1; top: 0; right: -2.25rem; width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--color-ink); color: var(--color-gold); font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
    box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 6px var(--color-gold);
}
.journey__item:nth-child(even) .journey__year { right: auto; left: -2.25rem; }
.journey__card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border-top: 4px solid var(--color-accent); }
.journey__card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.journey__body { padding: 1.25rem 1.5rem 1.5rem; }
.journey__body h3 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.35rem; }
.journey__body p { margin: 0; color: var(--color-muted); font-size: 0.98rem; }
@media (max-width: 48em) {
    .journey::before { left: 2.25rem; }
    .journey__item, .journey__item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 2.25rem 5.75rem; }
    .journey__year, .journey__item:nth-child(even) .journey__year { left: 0; right: auto; }
}

/* --- committee list (about) ------------------------------------------------- */
.team-heading { margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.25rem; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.04em; }
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.team li { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.15rem; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); border-left: 4px solid var(--color-gold); }
.team__mark { flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-ink); color: var(--color-gold); font-family: var(--font-display); font-weight: 500; letter-spacing: 0.04em; }
.team strong { display: block; font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; line-height: 1.25; }
.team li span:not(.team__mark) { color: var(--color-muted); font-size: 0.9rem; }

/* --- reveal on scroll (static/js/app.js adds the classes) ------------------ */
.reveal-pending { opacity: 0; transform: translateY(18px); }
.reveal-in { transition: opacity 0.7s ease, transform 0.7s ease; }
:is(.program-grid, .benefits, .lineage, .people, .steps, .kata-groups) > :nth-child(2).reveal-in { transition-delay: 0.08s; }
:is(.program-grid, .benefits, .lineage, .people, .steps, .kata-groups) > :nth-child(3).reveal-in { transition-delay: 0.16s; }
:is(.program-grid, .benefits, .lineage, .people, .steps, .kata-groups) > :nth-child(4).reveal-in { transition-delay: 0.24s; }
:is(.program-grid, .benefits, .lineage, .people, .steps, .kata-groups) > :nth-child(5).reveal-in { transition-delay: 0.32s; }
:is(.program-grid, .benefits, .lineage, .people, .steps, .kata-groups) > :nth-child(6).reveal-in { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal-pending { opacity: 1; transform: none; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}