/* ============================================================
   CosmoBet — core stylesheet
   Tokens: TYPO-07 · SPACE-07 · CONT-09 · BP-10 · GEO-08 · MOTION-03
   Palette: cyan + hot-pink on deep navy (cool sci-fi)
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
:root {
    /* Colour system (final, ±2% shifted) */
    --color-primary: #01d6f2;
    --color-accent: #ea248f;
    --color-accent-pressed: #d01371;
    --color-bg: #0c1829;
    --color-bg-elevated: #122439;
    --color-gradient-light: #f597ce;
    --color-gradient-mid: #ee45a4;
    --color-text: #ffffff;
    --color-text-muted: #bfc4cc;
    --color-rg-banner: #dc2626;
    --color-hairline: rgba(255, 255, 255, 0.12);

    /* Typography — Poppins (display) / Montserrat (body) */
    --font-display: 'Poppins', system-ui, sans-serif;
    --font-body: 'Montserrat', system-ui, sans-serif;

    --fs-h1: 48px;
    --fs-h2: 36px;
    --fs-h3: 26px;
    --fs-h4: 21px;
    --fs-h5: 18px;
    --fs-h6: 16px;
    --fs-body: 19px;
    --fs-small: 16px;
    --fs-micro: 14px;

    --lh-tight: 1.2;
    --lh-normal: 1.7;
    --lh-loose: 2;

    --ls-tight: -0.01em;
    --ls-normal: 0;
    --ls-wide: 0.02em;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 600;

    /* Spacing — Fibonacci-like SPACE-07 */
    --space-2xs: 3px;
    --space-xs: 8px;
    --space-sm: 13px;
    --space-md: 21px;
    --space-lg: 34px;
    --space-xl: 55px;
    --space-2xl: 89px;
    --space-3xl: 144px;

    /* Container — CONT-09 symmetric medium */
    --container-site: 1000px;
    --container-readable: 650px;
    --container-padding-mobile: 16px;
    --container-padding-tablet: 32px;
    --container-padding-desktop: 48px;
    --container-frame: calc(var(--container-site) + 2 * var(--container-padding-desktop));

    /* Geometry — GEO-08 soft top / sharp bottom */
    --radius-xs: 2px 2px 0 0;
    --radius-sm: 6px 6px 0 0;
    --radius-md: 12px 12px 0 0;
    --radius-lg: 20px 20px 0 0;
    --radius-pill: 9999px 9999px 0 0;
    --radius-circle: 50%;
    --shadow-xs: 0 -1px 0 rgba(0, 0, 0, 0.08) inset;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55);
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 3px;

    /* Motion — MOTION-03 dynamic modern */
    --dur-fast: 200ms;
    --dur-base: 300ms;
    --dur-slow: 500ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --header-height-desktop: 112px;
    --header-height-mobile: 84px;
    --rg-height: 30px;
}

/* ---- Reset / base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-loose);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-accent-pressed); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-md); line-height: var(--lh-tight); }
h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); letter-spacing: var(--ls-tight); overflow-wrap: anywhere; max-width: 100%; }
h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); letter-spacing: var(--ls-tight); overflow-wrap: anywhere; max-width: 100%; }
h3 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-h3); overflow-wrap: anywhere; max-width: 100%; }
h4 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-h4); }
h5 { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-h5); }
h6 { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-h6); }
p { margin: 0 0 var(--space-md); }

/* ---- a11y helpers ----------------------------------------- */
.skip-link {
    position: absolute;
    left: var(--space-md);
    top: -200px;
    z-index: 200;
    background: var(--color-accent);
    color: #fff;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
}
.skip-link:not(:focus) { top: -200px !important; }
.skip-link:focus { top: var(--space-xs); }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

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

/* ---- Shared section frame --------------------------------- */
.frame {
    width: 100%;
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
}

.section { padding-block: var(--space-xl); }

/* ---- Responsible-gaming banner ---------------------------- */
.rg-banner {
    position: relative;
    z-index: 5;
    min-height: var(--rg-height);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    background: var(--color-rg-banner);
    color: #fff;
    font-size: var(--fs-micro);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    padding: 6px var(--space-md);
    text-align: center;
}
.rg-banner a { color: #fff; text-decoration: underline; }
.rg-banner a:hover { color: #fff; }

/* ============================================================
   HEADER — HEAD-08 Bordered Plate + NAV-03 two-row
   ============================================================ */
.cloister {
    background: var(--color-bg);
    border-top: var(--border-medium) solid var(--color-accent);
    border-bottom: var(--border-medium) solid var(--color-text);
}
.cloister-bar {
    max-width: 1440px;
    margin-inline: auto;
    padding: var(--space-sm) var(--container-padding-desktop);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}
.cloister-logo, .cloister-logo img { flex-shrink: 0; }
.cloister-logo { display: inline-flex; align-items: center; }
.cloister-logo-img { height: 88px; width: auto; }

.cloister-nav { display: flex; flex-direction: column; gap: var(--space-2xs); }
.cloister-nav-list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}
.cloister-nav-list--top { justify-content: flex-end; }
.cloister-nav-list--bottom {
    justify-content: flex-end;
    padding-top: var(--space-2xs);
    border-top: var(--border-thin) solid var(--color-hairline);
}
.cloister-nav-item { display: flex; align-items: center; gap: var(--space-md); }
.cloister-nav-item + .cloister-nav-item::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}
.cloister-link {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--color-text);
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
}
.cloister-link:hover { color: var(--color-accent); }
.cloister-link[aria-current='page'] { color: var(--color-accent); }

.cloister-actions { display: flex; align-items: center; gap: var(--space-sm); margin-left: var(--space-md); }
.cloister-auth-btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    padding: 10px var(--space-lg);
    border-radius: var(--radius-md);
    transition: background var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring);
}
.cloister-auth-btn:hover { background: var(--color-accent-pressed); color: #fff; transform: scale(1.02); }

.cloister-toggle {
    display: none;
    margin-left: auto;
    background: transparent;
    border: var(--border-thin) solid var(--color-hairline);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    width: 46px; height: 46px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cloister-toggle span {
    display: block; width: 22px; height: 2px;
    background: var(--color-text);
    position: relative;
}
.cloister-toggle span::before, .cloister-toggle span::after {
    content: ''; position: absolute; left: 0; width: 22px; height: 2px;
    background: var(--color-text);
}
.cloister-toggle span::before { top: -7px; }
.cloister-toggle span::after { top: 7px; }

/* Mobile drawer — flat list */
.cloister-drawer {
    display: none;
    background: var(--color-bg-elevated);
    border-bottom: var(--border-thin) solid var(--color-hairline);
}
.cloister-drawer.is-open { display: block; }
.cloister-drawer-list {
    list-style: none;
    margin: 0;
    padding: var(--space-sm) var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}
.cloister-drawer-list a {
    display: block;
    padding: var(--space-sm) var(--space-xs);
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: var(--fs-small);
    color: var(--color-text);
    border-bottom: var(--border-thin) solid var(--color-hairline);
}
.cloister-drawer-list a:hover,
.cloister-drawer-list a[aria-current='page'] { color: var(--color-accent); }

/* ============================================================
   HERO — HERO-02 Split Photo Right
   ============================================================ */
.court { padding-block: var(--space-xl); }
.court-inner {
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
    display: grid;
    grid-template-columns: 55% 45%;
    gap: var(--space-2xl);
    align-items: center;
    min-height: 480px;
}
.court-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}
.court-text h1 { color: var(--color-text); }
.court-subtitle {
    font-size: var(--fs-h5);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
    max-width: 480px;
    margin-top: var(--space-md);
}
.court-actions {
    margin-top: var(--space-lg);
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.court-cta-primary, .court-cta-secondary {
    display: inline-flex;
    align-items: center;
    height: 52px;
    padding-inline: var(--space-lg);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-size: var(--fs-small);
    transition: background var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-out);
}
.court-cta-primary { background: var(--color-accent); color: #fff; }
.court-cta-primary:hover { background: var(--color-accent-pressed); color: #fff; transform: scale(1.02); }
.court-cta-secondary { background: transparent; border: var(--border-thin) solid var(--color-text-muted); color: var(--color-text); }
.court-cta-secondary:hover { border-color: var(--color-text); background: rgba(1, 214, 242, 0.06); color: var(--color-text); }

.court-figure {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.court-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.court-figure:hover img { transform: scale(1.04); }

/* ============================================================
   PAGE HEADER — PHEAD-04 Two-Column
   ============================================================ */
.tile { padding-block: var(--space-xl); border-bottom: var(--border-thin) solid var(--color-hairline); }
.tile-inner {
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-2xl);
    align-items: end;
}
.tile-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}
.tile-desc { color: var(--color-text-muted); font-size: var(--fs-h5); line-height: var(--lh-normal); margin: 0; }

/* ============================================================
   PROSE — PROSE-07 Numbered Section Headers
   ============================================================ */
.shelf { counter-reset: section; }
.shelf-inner {
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
}
.shelf h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); margin-top: var(--space-xl); overflow-wrap: anywhere; max-width: 100%; }
.shelf h2:first-child { margin-top: 0; }
.shelf h2::before {
    counter-increment: section;
    content: counter(section, decimal-leading-zero) ". ";
    color: var(--color-accent);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    margin-right: var(--space-sm);
}
.shelf p { color: var(--color-text-muted); line-height: var(--lh-loose); }
.shelf a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.shelf a:hover { color: var(--color-accent); }

/* Figure inside prose (per-page context/detail images) */
.shelf-figure { margin: var(--space-lg) 0; }
.shelf-figure img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.shelf-figure figcaption { margin-top: var(--space-xs); font-size: var(--fs-small); color: var(--color-text-muted); font-style: italic; }
.shelf-figrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin: var(--space-lg) 0; }
.shelf-figrow img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

/* ============================================================
   ITEMS GRID — GRID-08 Top-Border Accent
   ============================================================ */
.mast { padding-block: var(--space-xl); }
.mast-inner {
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
}
.mast-heading { text-align: left; margin-bottom: var(--space-lg); }
.mast-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
.mast-card {
    background: var(--color-bg-elevated);
    border-top: var(--border-thick) solid var(--color-accent);
    border-radius: 0 0 12px 12px;
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.mast-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.mast-card h3 { font-size: var(--fs-h4); color: var(--color-text); }
.mast-card p { color: var(--color-text-muted); font-size: var(--fs-small); line-height: var(--lh-normal); margin: 0; }

/* ============================================================
   DATA TABLE — TABLE-01 Striped Rows Classic
   ============================================================ */
.pediment { padding-block: var(--space-xl); }
.pediment-inner {
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
}
.pediment-heading { margin-bottom: var(--space-lg); }
.pediment-wrap { overflow-x: auto; border-radius: var(--radius-md); }
.pediment table { width: 100%; min-width: 520px; border-collapse: collapse; background: var(--color-bg-elevated); }
.pediment thead { background: var(--color-primary); }
.pediment th {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    font-size: var(--fs-h6);
    letter-spacing: var(--ls-wide);
    color: var(--color-bg);
    padding: var(--space-md);
    text-align: left;
}
.pediment td { padding: var(--space-md); font-size: var(--fs-body); text-align: left; color: var(--color-text-muted); }
.pediment tbody td:first-child { color: var(--color-text); font-weight: var(--fw-medium); }
.pediment tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.pediment tbody tr:hover { background: rgba(255, 255, 255, 0.05); transition: background var(--dur-fast); }

/* ============================================================
   REVIEWS — REV-09 Magazine Pull-Quote
   ============================================================ */
.slab { padding-block: var(--space-xl); }
.slab-inner {
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
}
.slab-heading { text-align: center; margin-bottom: var(--space-lg); }
.slab-list { list-style: none; margin: 0; padding: 0; }
.slab-item { padding-block: var(--space-xl); text-align: center; }
.slab-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-h3);
    line-height: var(--lh-tight);
    color: var(--color-text);
    max-width: 720px;
    margin: 0 auto var(--space-md); overflow-wrap: anywhere; max-width: 100%; }
.slab-attr {
    display: block;
    font-size: var(--fs-small);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.slab-rating { color: var(--color-accent); font-weight: var(--fw-bold); margin-left: var(--space-sm); }
.slab-divider { width: 80px; height: 1px; border: 0; background: var(--color-hairline); margin: 0 auto; }

/* ============================================================
   FAQ — FAQ-05 Detail-Tag Native
   ============================================================ */
.vault { padding-block: var(--space-xl); }
.vault-inner {
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
}
.vault-heading { margin-bottom: var(--space-lg); }
.vault-list { list-style: none; margin: 0; padding: 0; }
.vault-item { padding-block: var(--space-md); border-bottom: var(--border-thin) solid var(--color-hairline); }
.vault-question {
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    transition: color var(--dur-fast) var(--ease-out);
}
.vault-question::-webkit-details-marker { display: none; }
.vault-question:hover { color: var(--color-accent); }
.vault-question::after {
    content: '›';
    font-size: var(--fs-h3);
    line-height: 1;
    color: var(--color-accent);
    transform: rotate(90deg);
    transition: transform var(--dur-base) var(--ease-out); overflow-wrap: anywhere; max-width: 100%; }
.vault-item[open] .vault-question::after { transform: rotate(-90deg); }
.vault-answer { padding-top: var(--space-sm); }
.vault-answer p { color: var(--color-text-muted); line-height: var(--lh-normal); margin: 0; }

/* ============================================================
   CTA BLOCK — CTA-03 Split Visual + Text
   ============================================================ */
.hutch { padding-block: var(--space-xl); }
.hutch-inner {
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
}
.hutch-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.hutch-content { background: var(--color-bg-elevated); padding: var(--space-2xl); }
.hutch-content h2 { font-size: var(--fs-h2); overflow-wrap: anywhere; max-width: 100%; }
.hutch-content p { color: var(--color-text-muted); line-height: var(--lh-normal); }
.hutch-btn {
    display: inline-flex;
    align-items: center;
    margin-top: var(--space-md);
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    padding: var(--space-md) var(--space-2xl);
    border-radius: var(--radius-md);
    transition: background var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring);
}
.hutch-btn:hover { background: var(--color-accent-pressed); color: #fff; transform: scale(1.02); }
.hutch-visual {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
}
.hutch-figure-num {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 120px;
    color: #ffffff;
    line-height: var(--lh-tight);
}

/* ============================================================
   INLINE CTA — INLINE-CTA-07 Icon-Headlined Centered
   ============================================================ */
.quayside { padding-block: var(--space-xl); }
.quayside-wrap {
    max-width: 540px;
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.quayside-icon { font-size: var(--fs-h1); color: var(--color-accent); margin-bottom: var(--space-md); line-height: 1; overflow-wrap: anywhere; max-width: 100%; }
.quayside-heading { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--color-text); overflow-wrap: anywhere; max-width: 100%; }
.quayside-subtext { font-size: var(--fs-body); color: var(--color-text-muted); line-height: var(--lh-normal); }
.quayside-btn {
    display: inline-block;
    margin-top: var(--space-md);
    background: var(--color-accent);
    color: #fff;
    padding: var(--space-md) var(--space-2xl);
    border-radius: var(--radius-md);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    transition: background var(--dur-base) var(--ease-spring);
}
.quayside-btn:hover { background: var(--color-accent-pressed); color: #fff; }

/* ============================================================
   AUTHOR BYLINE — BYLINE-04 Quote-Style
   ============================================================ */
.pillar { padding-block: var(--space-xl); }
.pillar-inner {
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
}
.pillar-quote {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding-top: var(--space-xl);
    border: 0;
}
.pillar-quote::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    color: var(--color-accent);
    line-height: 1; overflow-wrap: anywhere; max-width: 100%; }
.pillar-quote p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-h4);
    color: var(--color-text);
    margin: 0 0 var(--space-md);
}
.pillar-attribution {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
}
.pillar-portrait { width: 32px; height: 32px; border-radius: var(--radius-circle); object-fit: cover; }
.pillar-name { font-style: normal; }
.pillar-name a { color: var(--color-accent); font-weight: var(--fw-bold); }
.pillar-name a:hover { color: var(--color-accent-pressed); }
.pillar-role { font-size: var(--fs-small); font-style: italic; color: var(--color-text-muted); }

/* ============================================================
   AUTHOR CARD — AUTH-02 Vertical Centered Editorial
   ============================================================ */
.truss { padding-block: var(--space-xl); }
.truss-inner {
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
}
.truss-card { max-width: 600px; margin-inline: auto; text-align: center; }
.truss-portrait { width: 140px; height: 140px; border-radius: var(--radius-circle); object-fit: cover; margin: 0 auto var(--space-lg); }
.truss-role { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-accent); margin-bottom: var(--space-xs); }
.truss-name { font-size: var(--fs-h2); overflow-wrap: anywhere; max-width: 100%; }
.truss-bio { line-height: var(--lh-loose); color: var(--color-text-muted); margin-bottom: var(--space-md); }
.truss-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.truss-tag {
    font-size: var(--fs-small);
    color: var(--color-text);
    background: var(--color-bg-elevated);
    border: var(--border-thin) solid var(--color-hairline);
    border-radius: var(--radius-pill);
    padding: 6px var(--space-md);
}
/* Author articles list */
.truss-articles { max-width: 600px; margin: var(--space-2xl) auto 0; text-align: center; }
.truss-articles-heading { font-size: var(--fs-h4); margin-bottom: var(--space-md); }
.truss-articles-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.truss-articles-item a { color: var(--color-primary); text-decoration: none; }
.truss-articles-item a:hover { color: var(--color-accent); text-decoration: underline; }

/* ============================================================
   CONTACT FORM — FORM-02 Two-Column Side-by-Side
   ============================================================ */
.cresset { padding-block: var(--space-xl); }
.cresset-form { display: block; }
.cresset-inner {
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-xl);
    align-items: start;
}
.cresset-aside {
    padding: var(--space-lg);
    background: rgba(1, 214, 242, 0.05);
    border-radius: var(--radius-md);
}
.cresset-aside h3 { font-size: var(--fs-h4); }
.cresset-aside p { color: var(--color-text-muted); }
.cresset-contacts { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.cresset-contacts li { color: var(--color-text-muted); font-size: var(--fs-small); }
.cresset-contacts a { color: var(--color-primary); }
.cresset-field { margin-bottom: var(--space-md); }
.cresset-field label { display: block; font-size: var(--fs-small); font-weight: var(--fw-medium); margin-bottom: var(--space-xs); }
.cresset-field input, .cresset-field textarea {
    width: 100%;
    background: var(--color-bg-elevated);
    border: var(--border-thin) solid var(--color-hairline);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    padding: var(--space-sm) var(--space-md);
}
.cresset-field input:focus, .cresset-field textarea:focus { outline: 2px solid var(--color-primary); }
.cresset-submit {
    background: var(--color-accent);
    color: #fff;
    border: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    padding: var(--space-md) var(--space-2xl);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-spring);
}
.cresset-submit:hover { background: var(--color-accent-pressed); color: #fff; }
.cresset-success { display: none; padding: var(--space-md); background: rgba(1, 214, 242, 0.08); border-radius: var(--radius-sm); color: var(--color-text); }
.cresset-success.is-visible { display: block; }

/* ============================================================
   LEGAL SECTION — LEGAL-02 Numbered Sections
   ============================================================ */
.niche { padding-block: var(--space-xl); }
.niche-wrap {
    
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
}
.niche-intro { color: var(--color-text-muted); font-size: var(--fs-h5); line-height: var(--lh-normal); margin-bottom: var(--space-xl); }
.niche-body { counter-reset: legal-section; }
.niche-section { counter-increment: legal-section; margin-bottom: var(--space-xl); }
.niche-section h3::before {
    content: counter(legal-section) ". ";
    color: var(--color-accent);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    margin-right: var(--space-xs);
}
.niche-section p { color: var(--color-text-muted); padding-left: var(--space-md); line-height: var(--lh-normal); }
.niche-support { margin-top: var(--space-xl); }
.niche-support ul { padding-left: var(--space-md); color: var(--color-text-muted); }
.niche-disclaimer { margin-top: var(--space-lg); font-size: var(--fs-small); color: var(--color-text-muted); font-style: italic; }

/* ============================================================
   ERROR BLOCK — ERR-02 Split Editorial
   ============================================================ */
.mantle { padding-block: var(--space-3xl); }
.mantle-inner {
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
}
.mantle-text { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
.mantle-btn {
    display: inline-flex;
    align-items: center;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    padding: var(--space-md) var(--space-2xl);
    border-radius: var(--radius-md);
    transition: background var(--dur-base) var(--ease-spring);
}
.mantle-btn:hover { background: var(--color-accent-pressed); color: #fff; }
.mantle-figure {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: clamp(30px, 24vw, 280px);
    line-height: var(--lh-tight);
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    align-self: start; overflow-wrap: anywhere; max-width: 100%; }

/* ============================================================
   FOOTER — FOOT-08 Newspaper Masthead
   ============================================================ */
.filigree { background: var(--color-bg); padding-block: var(--space-xl); }
.filigree-inner {
    max-width: var(--container-frame);
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
}
.filigree-masthead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    border-top: 4px solid var(--color-text);
    border-bottom: 4px solid var(--color-text);
    padding-block: var(--space-lg);
}
.filigree-logo { display: inline-flex; align-items: center; }
.filigree-logo-img { height: 64px; width: auto; }
.filigree-issue {
    font-family: var(--font-display);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
}
.filigree-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    padding-block: var(--space-xl);
}
.filigree-col-heading {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h6);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--color-text);
    margin-bottom: var(--space-md);
}
.filigree-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.filigree-col a { color: var(--color-text-muted); font-size: var(--fs-small); }
.filigree-col a:hover { color: var(--color-accent); }
.filigree-col p { color: var(--color-text-muted); font-size: var(--fs-small); line-height: var(--lh-normal); margin: 0 0 var(--space-sm); }
.filigree-bottom { text-align: center; padding-top: var(--space-lg); border-top: var(--border-thin) solid var(--color-hairline); }
.filigree-bottom small { color: var(--color-text-muted); font-size: var(--fs-micro); }

/* ============================================================
   COOKIE BANNER — COOK-01 Bottom Floating Pill
   ============================================================ */
.bay {
    position: fixed;
    inset-block-end: var(--space-md);
    inset-inline: var(--space-md);
    max-width: 720px;
    margin-inline: auto;
    z-index: 90;
    display: none;
    background: var(--color-bg-elevated);
    border: var(--border-thin) solid var(--color-hairline);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: var(--shadow-md);
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}
.bay.is-visible { display: flex; }
.bay-message { flex: 1 1 280px; font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text-muted); margin: 0; }
.bay-actions { display: flex; gap: var(--space-sm); }
.bay-button {
    height: 36px;
    padding-inline: var(--space-md);
    border: 0;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-size: var(--fs-micro);
    cursor: pointer;
}
.bay-accept { background: var(--color-accent); color: #fff; }
.bay-accept:hover { background: var(--color-accent-pressed); color: #fff; }
.bay-decline { background: transparent; border: var(--border-thin) solid var(--color-hairline); color: var(--color-text); }
.bay-decline:hover { background: rgba(255, 255, 255, 0.05); }

/* ============================================================
   RESPONSIVE — BP-10 (sm 488 / md 832 / lg 1136 / xl 1488)
   ============================================================ */
@media (max-width: 1136px) {
    .cloister-nav, .cloister-actions { display: none; }
    .cloister-toggle { display: inline-flex; }
    .cloister-logo-img { height: 72px; }
    .court-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
    .court-figure { aspect-ratio: 16 / 9; }
    .tile-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
    .mast-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 832px) {
    :root {
        --fs-h1: 32px;
        --fs-h2: 26px;
        --fs-h3: 22px;
        --fs-h4: 19px;
        --fs-h5: 17px;
        --fs-h6: 15px;
        --fs-body: 18px;
        --fs-small: 15px;
        --fs-micro: 13px;
    }
    .frame, .court-inner, .tile-inner, .shelf-inner, .mast-inner,
    .pediment-inner, .slab-inner, .vault-inner, .hutch-inner,
    .quayside-wrap, .pillar-inner, .truss-inner, .cresset-inner,
    .niche-wrap, .mantle-inner, .filigree-inner, .cloister-bar {
        padding-inline: var(--container-padding-tablet);
    }
    .hutch-card { grid-template-columns: 1fr; }
    .hutch-visual { min-height: 200px; }
    .cresset-form { display: block; }
.cresset-inner { grid-template-columns: 1fr; }
    .mantle-inner { grid-template-columns: 1fr; }
    .mast-grid { grid-template-columns: 1fr; }
    .shelf-figrow { grid-template-columns: 1fr; }
}

@media (max-width: 488px) {
    .frame, .court-inner, .tile-inner, .shelf-inner, .mast-inner,
    .pediment-inner, .slab-inner, .vault-inner, .hutch-inner,
    .quayside-wrap, .pillar-inner, .truss-inner, .cresset-inner,
    .niche-wrap, .mantle-inner, .filigree-inner {
        padding-inline: var(--container-padding-mobile);
    }
    .cloister-bar { padding-inline: var(--container-padding-mobile); }
    .cloister-logo-img { height: 60px; }
    .filigree-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .court-figure { aspect-ratio: 4 / 3; }
}

@media (max-width: 720px) {
    .bay, .bay { padding: 12px 14px !important; gap: 8px !important; font-size: 13px !important; line-height: 1.35 !important; }
    .bay-button { padding: 8px 14px !important; font-size: 12px !important; min-height: 36px !important; }
}

[class*='-fig'] img, main figure img, article figure img { width: 100% !important; max-height: 58vh !important; object-fit: cover; object-position: center; }

@media (max-width: 480px) {
  .hutch-content, .hutch-visual { min-width: 0; max-width: 100%; }
  .vault-question, .hutch-btn { overflow-wrap: anywhere; }
}