/* Hallmark · genre: editorial · macrostructure: Photographic · H6 knobs: area=2:1 band, caption=tipped-in plate card, alternating lower-left/lower-right
 * theme: custom (tuned) · vibe: "printed prospectus, warm paper, discreet"
 * paper: oklch(97.2% 0.008 62) · accent: oklch(39% 0.136 13) — Cardinal burgundy, preserved
 * display: Newsreader (roman, self-hosted) · body: IBM Plex Sans (self-hosted)
 * axes: light / roman-serif / warm · nav: N6 masthead · footer: Ft4 colophon
 * enrichment: none — the clinic's own photography carries the folds
 * studied: no · context: user-provided · scope: home page + shared chrome
 * pre-emit critique: P5 H4 E4 S5 R5 V5
 */

/* Self-hosted so no visitor IP reaches a third-party font CDN (GDPR — this is a medical site). */
@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/newsreader-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("/assets/fonts/plexsans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("/assets/fonts/plexsans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: light;

    /* Paper — warm parchment, tinted; never pure white */
    --color-paper-0: oklch(99.0% 0.004 70);
    --color-paper: oklch(97.2% 0.008 62);
    --color-paper-2: oklch(94.6% 0.014 62);
    --color-paper-3: oklch(91.2% 0.020 62);

    /* Ink — warm near-black, tinted toward the accent; never pure black */
    --color-ink: oklch(22.5% 0.022 20);
    --color-ink-2: oklch(34.0% 0.018 20);
    --color-muted: oklch(52.0% 0.014 25);
    --color-on-ink: oklch(95.5% 0.008 62);
    --color-on-ink-muted: oklch(78.0% 0.012 45);
    --color-on-ink-soft: oklch(95.5% 0.008 62 / 0.62);

    /* Rules — hairlines only */
    --color-rule: oklch(87.0% 0.014 55);
    --color-rule-2: oklch(92.5% 0.010 60);
    --color-rule-ink: oklch(38.0% 0.016 25);

    /* Accent — Cardinal burgundy, unchanged in hue and chroma */
    --color-accent: oklch(39.0% 0.136 13);
    --color-accent-2: oklch(31.5% 0.115 13);
    --color-accent-wash: oklch(94.5% 0.020 10);
    --color-accent-ink: oklch(97.2% 0.008 62);
    --color-focus: oklch(45.0% 0.185 13);

    /* Type */
    --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
    --font-body: "IBM Plex Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.375rem;
    --text-xl: 1.75rem;
    --text-2xl: clamp(1.5rem, 1.8vw + 0.7rem, 2.1rem);
    --text-display: clamp(1.75rem, 2.4vw + 0.9rem, 2.6rem);

    /* Space — 4pt scale */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 7rem;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-short: 180ms;
    --dur-med: 260ms;

    --rule-hair: 1px;
    --measure: 62ch;

    /* Legacy aliases — the other pages (portal, resources, TV admin) still read these. */
    --brand: var(--color-accent);
    --brand-dark: var(--color-accent-2);
    --brand-soft: var(--color-accent-wash);
    --ink: var(--color-ink);
    --text: var(--color-ink-2);
    --muted: var(--color-muted);
    --bg: var(--color-paper);
    --surface: var(--color-paper-0);
    --warm: var(--color-paper-2);
    --warm-deep: var(--color-paper-3);
    --line: var(--color-rule);
    --teal: oklch(43.0% 0.060 194);
    --teal-dark: oklch(33.8% 0.048 195);
    --sage: oklch(91.5% 0.020 150);
    --blue-soft: oklch(93.0% 0.014 235);
    --shadow: 0 18px 50px oklch(22.5% 0.022 20 / 0.10);
    --shadow-strong: 0 30px 80px oklch(22.5% 0.022 20 / 0.16);
    --radius: 8px;
    --gutter: clamp(20px, 4vw, 72px);
    --serif: var(--font-display);
    --sans: var(--font-body);
}
html, body { overflow-x: clip; }
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-ink-2);
    background: var(--color-paper);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-2); text-decoration: underline; }
:focus-visible {
    /* Never transitioned — the ring must be there the instant focus lands. */
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: 1px;
}
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

/* ── Portal rail ──────────────────────────────────────────────────────
   The masthead below is a letterhead and deliberately doesn't stick.
   This hairline rail takes over once the letterhead has scrolled away,
   so the portal is always one tap from anywhere on the page. Hidden with
   `visibility` as well as `transform`, so it stays out of the tab order
   until it is actually on screen. */
.portal-rail {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    background: var(--color-paper);
    border-bottom: var(--rule-hair) solid var(--color-rule);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.portal-rail.is-visible { transform: translateY(0); visibility: visible; }
.portal-rail__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 46px;
}
.portal-rail__mark {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--color-ink);
    white-space: nowrap;
}
.portal-rail__mark:hover { color: var(--color-accent); text-decoration: none; }
.portal-rail__link {
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    padding-block: var(--space-2xs);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-short) var(--ease-out);
}
.portal-rail__link:hover { border-bottom-color: var(--color-accent); text-decoration: none; }
.portal-rail__link .cc-arrow { display: inline-block; transition: transform var(--dur-short) var(--ease-out); }
.portal-rail__link:hover .cc-arrow { transform: translateX(3px); }

/* ── N6 · Newspaper masthead ──────────────────────────────────────────
   A clinic letterhead, not a product nav: wordmark centred, standing
   details beneath it, link row under that, closed by a double rule.
   Deliberately not sticky — a letterhead sits at the top of the page. */
.site-header {
    background: var(--color-paper);
    border-bottom: var(--rule-hair) solid var(--color-rule);
    box-shadow: 0 3px 0 -2px var(--color-rule);
}
.masthead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) 0 var(--space-sm);
    text-align: center;
}
.wordmark {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
}
.wordmark:hover { color: var(--color-accent); text-decoration: none; }
.masthead__standing {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
}
.masthead__standing a { color: var(--color-muted); }
.masthead__standing a:hover { color: var(--color-accent); }
.nav {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-md);
    margin-top: var(--space-3xs);
    padding-top: var(--space-2xs);
    border-top: var(--rule-hair) solid var(--color-rule-2);
    width: 100%;
    font-size: var(--text-sm);
    font-weight: 500;
}
.nav a {
    color: var(--color-ink-2);
    white-space: nowrap;
    padding: var(--space-3xs) 0;
    border-bottom: 1px solid transparent;
    transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.nav a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); text-decoration: none; }
.nav .portal-link { color: var(--color-accent); }
.nav .portal-link::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 0.5em;
    vertical-align: 0.15em;
    background: var(--color-accent);
    border-radius: 50%;
}
.hero { padding: 72px 0 48px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: 32px; align-items: center; }
.kicker { color: var(--teal); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; margin: 0 0 10px; }
h1, h2, h3 {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -0.005em;
    margin: 0 0 var(--space-xs);
    text-wrap: balance;
    overflow-wrap: anywhere;
    min-width: 0;
}
h1 { font-size: var(--text-display); line-height: 1.12; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); font-weight: 500; }
.lede { font-size: var(--text-md); color: var(--color-ink-2); max-width: 52ch; line-height: 1.6; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 20px;
    border-radius: 0;
    font-size: .88rem;
    font-weight: 650;
    border: 1px solid var(--line);
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn::after,
.text-link::after,
.pathway-card a::after,
.split-title a::after,
.resource-card a::after { content: " ->"; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn-primary:hover { color: var(--color-accent-ink); background: var(--color-accent-2); text-decoration: none; }
.btn-secondary { color: var(--ink); background: var(--surface); }
.btn-secondary:hover { color: var(--brand); border-color: var(--brand); text-decoration: none; }
.btn-on-dark { color: var(--color-on-ink); border-color: var(--color-on-ink-soft); background: transparent; }
.btn-on-dark:hover { background: var(--color-on-ink); color: var(--color-accent-2); text-decoration: none; }
.panel, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel { padding: 26px; }
.section { padding: clamp(48px, 5.6vw, 84px) 0; }
.section-warm { background: var(--warm); }
.two-col { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: 32px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-two { grid-template-columns: repeat(2, 1fr); }
.card { padding: 22px; box-shadow: none; }
.card p:last-child, .panel p:last-child { margin-bottom: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; color: var(--muted); font-size: .92rem; }
.meta span { border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; background: var(--color-paper-0); }
.timetable { display: grid; grid-template-columns: repeat(7, minmax(170px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.day { min-width: 170px; background: #f8f6f1; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.day h3 { font-family: var(--font-body); font-size: 1rem; border-bottom: 2px solid var(--brand); padding-bottom: 8px; }
.activity { background: var(--color-paper-0); border-left: 4px solid var(--brand); border-radius: 6px; padding: 12px; margin: 10px 0; }
.activity-time { font-weight: 800; color: var(--brand); font-size: .88rem; }
.activity-name { font-weight: 750; color: var(--ink); }
.site-footer {
    margin-top: var(--space-2xl);
    padding: var(--space-lg) 0 var(--space-xl);
    background: var(--color-ink);
    color: var(--color-on-ink);
}
/* The home page already closes on a full-bleed ink band — no cream sliver between them. */
main:has(.cc-close) + .site-footer { margin-top: 0; }
.site-footer a { color: var(--color-on-ink); }
.site-footer :focus-visible { outline-color: var(--color-on-ink); }
.small { font-size: var(--text-sm); color: var(--color-muted); }
.resource-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
    gap: 12px;
    margin-bottom: 22px;
}
.resource-filters input,
.resource-filters select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px 14px;
    font: inherit;
    background: var(--surface);
    color: var(--text);
}
.resource-grid .btn { margin-top: 8px; }
.resource-card[hidden] { display: none; }
.resource-meta-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
    text-transform: uppercase;
}
.manual-content {
    max-width: 860px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: clamp(22px, 4vw, 48px);
}
.manual-content h2 {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.manual-content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.manual-content h3 { margin-top: 26px; }
.manual-content ul { padding-left: 22px; }
.journal-page .journal-notice { margin-bottom: 24px; border-left: 5px solid var(--brand); }
.journal-page .journal-grid { margin-top: 28px; }
.journal-form { margin: 28px 0; }
.journal-form label { display: block; margin: 18px 0 8px; font-weight: 800; color: var(--ink); }
.journal-form input,
.journal-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px 14px;
    font: inherit;
    color: var(--text);
    background: var(--surface);
}
.journal-form textarea { min-height: 180px; resize: vertical; }
.journal-guidance { margin: 24px 0; }
.journal-guidance li { margin: 8px 0; }
.journal-entry-row { padding: 12px 0; border-top: 1px solid var(--line); }
.journal-entry-row:first-child { border-top: 0; }

/* ══ Home page · Photographic macrostructure ═══════════════════════════
   Three of the clinic's own photographs carry the page. Between them,
   quiet typographic bands and hairline registers carry the information.
   No cards, no icon tiles, no gradients, no scroll reveals.
   Everything below is scoped to .cc so the portal, resources and TV
   pages keep the rules above untouched. */

.cc { --plate-lift: clamp(3rem, 9vw, 8.5rem); }

/* ── Photographic fold + tipped-in caption plate ─────────────────────── */
.cc-plate { position: relative; }
.cc-plate__figure { position: relative; margin: 0; }
.cc-plate__figure img {
    display: block;
    width: 100%;
    height: min(46vh, 430px);
    object-fit: cover;
    background: var(--color-paper-3);
}
/* The opening fold gets more room; the interior folds are letterbox bands. */
.cc > .cc-plate:first-child .cc-plate__figure img { height: min(58vh, 560px); }
.cc-plate__figure figcaption {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: var(--color-paper);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--space-3xs) var(--space-2xs);
}
.cc-plate__card {
    position: relative;
    z-index: 2;
    width: min(100%, 33rem);
    margin-top: calc(var(--plate-lift) * -1);
    padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.35rem, 2.4vw, 2rem);
    background: var(--color-paper);
    border: var(--rule-hair) solid var(--color-rule);
}
.cc-plate--right .cc-plate__card { margin-left: auto; }
.cc-plate__card > :last-child { margin-bottom: 0; }
.cc-plate__card p { color: var(--color-ink-2); }
.cc-plate__card .lede { margin: 0 0 var(--space-md); }
.cc-plate__where {
    margin: var(--space-md) 0 0;
    padding-top: var(--space-xs);
    border-top: var(--rule-hair) solid var(--color-rule-2);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

/* ── Actions ─────────────────────────────────────────────────────────── */
.cc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
    margin: 0;
}
.cc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-2xs) var(--space-md);
    border: var(--rule-hair) solid var(--color-accent);
    color: var(--color-accent);
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.cc-chip:hover { background: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; }
.cc-chip--solid { background: var(--color-accent); color: var(--color-accent-ink); }
.cc-chip--solid:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); color: var(--color-accent-ink); }
.cc-chip--on-ink { border-color: var(--color-on-ink); color: var(--color-on-ink); }
.cc-chip--on-ink:hover { background: var(--color-on-ink); color: var(--color-ink); }

.cc-link {
    display: inline-block;
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: 500;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--color-rule);
    transition: border-color var(--dur-short) var(--ease-out);
}
.cc-link:hover { border-bottom-color: var(--color-accent); text-decoration: none; }
.cc-link .cc-arrow { transition: transform var(--dur-short) var(--ease-out); display: inline-block; }
.cc-link:hover .cc-arrow { transform: translateX(3px); }

/* ── Typographic bands ───────────────────────────────────────────────── */
.cc-band { padding-block: var(--space-3xl) var(--space-2xl); }
.cc-band--tight { padding-block: var(--space-2xl); }
.cc-band--closing { padding-block: var(--space-2xl) var(--space-3xl); }
.cc-band__intro { max-width: var(--measure); margin-bottom: var(--space-xl); }
.cc-band__intro > :last-child { margin-bottom: 0; }
.cc-split .cc-band__intro { margin-bottom: var(--space-md); }
.cc-band__intro p { color: var(--color-ink-2); }

/* S4 · run-in headings — the heading lives inside the paragraph flow */
.cc-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-2xl);
}
.cc-note {
    padding-top: var(--space-sm);
    border-top: var(--rule-hair) solid var(--color-rule);
    max-width: 46ch;
}
.cc-note h3 {
    display: inline;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: 0;
}
.cc-note h3::after {
    content: " — ";
    font-weight: 400;
    color: var(--color-muted);
}
.cc-note p {
    display: inline;
    margin: 0;
    color: var(--color-ink-2);
}

/* ── F3 · Register (the three pathways) ──────────────────────────────── */
.cc-register {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--rule-hair) solid var(--color-rule);
}
.cc-register li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.cc-register a {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto;
    gap: var(--space-sm) var(--space-lg);
    align-items: baseline;
    padding: var(--space-md) var(--space-2xs);
    margin-inline: calc(var(--space-2xs) * -1);
    color: var(--color-ink-2);
    transition: background-color var(--dur-short) var(--ease-out);
}
.cc-register a:hover { background: var(--color-paper-2); text-decoration: none; }
.cc-register__name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--color-ink);
    transition: color var(--dur-short) var(--ease-out);
}
.cc-register a:hover .cc-register__name { color: var(--color-accent); }
.cc-register__desc { color: var(--color-ink-2); max-width: 52ch; }
.cc-register__go {
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
}
.cc-register a:hover .cc-arrow { transform: translateX(3px); }

/* ── Resources + timetable ───────────────────────────────────────────── */
.cc-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-2xl);
    align-items: start;
}
.cc-inset {
    margin: 0 0 var(--space-md);
}
.cc-inset img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--color-paper-3);
}
.cc-featured {
    padding-top: var(--space-sm);
    border-top: var(--rule-hair) solid var(--color-rule);
}
.cc-featured h3 { margin-bottom: var(--space-3xs); }
.cc-featured p { color: var(--color-ink-2); margin-bottom: var(--space-sm); }

.cc-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: var(--text-sm);
}
.cc-table caption {
    text-align: left;
    color: var(--color-ink-2);
    font-size: var(--text-base);
    margin-bottom: var(--space-sm);
}
.cc-table th,
.cc-table td {
    text-align: left;
    padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
    border-bottom: var(--rule-hair) solid var(--color-rule);
    vertical-align: baseline;
}
.cc-table thead th {
    color: var(--color-muted);
    font-weight: 500;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom-color: var(--color-ink);
}
.cc-table tbody th {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--color-ink);
    white-space: nowrap;
}
.cc-table td:last-child, .cc-table th:last-child { padding-right: 0; }
.cc-table .cc-table__session { color: var(--color-ink); }
.cc-table .cc-table__places { color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; }
.cc-fineprint { color: var(--color-muted); font-size: var(--text-xs); margin: var(--space-sm) 0 var(--space-md); }

/* ── Closing contact band ────────────────────────────────────────────── */
.cc-close {
    background: var(--color-ink);
    color: var(--color-on-ink);
    padding-block: var(--space-2xl);
}
.cc-close__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-lg) var(--space-2xl);
    align-items: end;
}
.cc-close h2 { color: var(--color-on-ink); margin-bottom: var(--space-2xs); }
.cc-close p { color: var(--color-on-ink-muted); margin: 0; max-width: 46ch; }
.cc-close :focus-visible { outline-color: var(--color-on-ink); }
.cc-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-lg);
}
.cc-contact a:not(.cc-chip) {
    color: var(--color-on-ink);
    font-size: var(--text-sm);
    white-space: nowrap;
    border-bottom: 1px solid var(--color-rule-ink);
    padding-bottom: 2px;
    transition: border-color var(--dur-short) var(--ease-out);
}
.cc-contact a:not(.cc-chip):hover { border-bottom-color: var(--color-on-ink); text-decoration: none; }

/* ── Footer · Ft4 colophon, with urgent help given its own weight ────── */
.footer-urgent {
    padding: var(--space-lg) 0;
    border-bottom: var(--rule-hair) solid var(--color-rule-ink);
}
.footer-urgent h2 {
    color: var(--color-on-ink);
    font-size: var(--text-lg);
    margin-bottom: var(--space-3xs);
}
.footer-urgent p {
    margin: 0;
    max-width: 68ch;
    color: var(--color-on-ink);
    font-size: var(--text-sm);
}
.footer-urgent a {
    color: var(--color-on-ink);
    border-bottom: 1px solid var(--color-on-ink-muted);
}
.footer-colophon { padding-top: var(--space-lg); }
.footer-colophon p {
    margin: 0 0 var(--space-2xs);
    color: var(--color-on-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.7;
    max-width: 78ch;
}
.footer-colophon b { color: var(--color-on-ink); font-weight: 500; }
.footer-colophon a { color: var(--color-on-ink-muted); }
.footer-colophon a:hover { color: var(--color-on-ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); }
.footer-links a { white-space: nowrap; }
.footer-fine { color: var(--color-on-ink-muted); opacity: 0.8; font-size: var(--text-xs); margin-top: var(--space-sm); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
    .cc-notes { gap: var(--space-md) var(--space-xl); }
    .cc-register a { grid-template-columns: minmax(0, 1fr) auto; }
    .cc-register__desc { grid-column: 1 / -1; }
    .cc-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
    .cc-close__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 40rem) {
    .cc { --plate-lift: 0px; }
    .cc-plate__figure img,
    .cc > .cc-plate:first-child .cc-plate__figure img { height: min(52vh, 340px); }
    .cc-plate__card {
        width: 100%;
        margin-top: 0;
        border-inline: 0;
        border-top: 0;
    }
    .cc-plate__figure figcaption { top: auto; bottom: var(--space-2xs); right: var(--space-2xs); }
    .cc-notes { grid-template-columns: minmax(0, 1fr); }
    .cc-band { padding-block: var(--space-2xl) var(--space-xl); }
    .cc-band--closing { padding-block: var(--space-xl) var(--space-2xl); }
    .cc-band__intro { margin-bottom: var(--space-lg); }
    .cc-register a { padding-block: var(--space-sm); }
    .cc-table { font-size: var(--text-xs); }
    .cc-table th, .cc-table td { padding-right: var(--space-2xs); }
    .cc-contact { gap: var(--space-sm); }
    .cc-contact li { width: 100%; }
    .cc-chip { width: 100%; }

    /* Touch targets — anything standalone and tappable clears 44px.
       Links inline in running prose keep their natural height (WCAG 2.5.8
       exempts inline text links; padding them would break the paragraph). */
    .nav a { padding-block: 12px; }
    .wordmark { padding-block: var(--space-3xs); }
    .cc-link { padding-block: 10px; }
    .portal-rail__inner { min-height: 48px; }
    .portal-rail__link { padding-block: 12px; }
    .cc-contact a:not(.cc-chip) { display: inline-block; padding-block: 11px; }
    .footer-links a { display: inline-block; padding-block: 10px; }
}

/* ── Legacy layout collapse — still needed by the other pages ────────── */
@media (max-width: 860px) {
    .hero-grid, .two-col, .grid, .grid-two, .footer-grid,
    .resource-filters { grid-template-columns: minmax(0, 1fr); }
    .hero { padding-top: var(--space-xl); }
    .container { width: min(100% - 32px, 1120px); }
    .masthead { padding: var(--space-sm) 0 var(--space-2xs); }
    .nav { gap: var(--space-3xs) var(--space-sm); font-size: var(--text-xs); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}