/* ============================================================
   Lucky Dreams Casino — plate.css
   Design system: TYPO-10 / SPACE-10 / CONT-04 / BP-05 / GEO-07 / MOTION-04
   Palette: cold navy base + warm gold accents. Dashed editorial geometry.
   ============================================================ */

/* --- Design tokens ------------------------------------------------ */
:root {
    /* colours (post ±2% shift) */
    --main-color: #091526;
    --highlight: #caa44b;
    --accent-pressed: #b39437;
    --background: #0c1b31;
    --surface-raised: #142845;
    --gradient-start: #7f60a5;
    --grad-mid: #193859;
    --text: #ffffff;
    --muted: #c1c1c1;
    --color-text-rgb-x: 255, 255, 255;
    --banner-bg: #dc2626;

    /* typography — TYPO-10 (desktop) */
    --font-title: 'Montserrat', 'Arial Black', sans-serif;
    --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --text-h1: 60px;
    --type-h2: 34px;
    --size-h3: 24px;
    --text-h4: 19px;
    --type-h5: 16px;
    --type-h6: 14px;
    --text-base: 16px;
    --size-sm: 13px;
    --type-micro: 11px;
    --line-tight: 1.1;
    --leading-normal: 1.5;
    --leading-loose: 1.65;
    --tracking-tight: -0.02em;
    --letter-wide: 0.06em;
    --weight-regular: 400;
    --font-medium: 600;
    --font-bold: 800;

    /* spacing — SPACE-10 */
    --gap-2xs: 4px;
    --gap-xs: 7px;
    --gap-sm: 11px;
    --gap-md: 17px;
    --gap-lg: 26px;
    --gap-xl: 40px;
    --gap-2xl: 60px;
    --gutter-3xl: 90px;

    /* container — CONT-04 (site + readable per spec) */
    --max-width: 1280px;
    --text-width: 720px;
    --pad-desktop: 32px;
    --pad-mobile: 16px;

    /* geometry — GEO-07 (dashed editorial) */
    --rounded-xs: 4px;
    --round-sm: 8px;
    --radius: 12px;
    --rounded-lg: 16px;
    --corner-pill: 9999px;
    --border-hair-x: rgba(var(--color-text-rgb-x), 0.10);
    --elevation-3: 0 8px 24px rgba(0, 0, 0, 0.35);

    /* motion — MOTION-04 (sharp snappy) */
    --transition-fast: 80ms;
    --duration-base: 120ms;
    --transition-slow: 180ms;
    --timing: cubic-bezier(0.5, 0, 0.5, 1);
}

/* --- Reset / base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
    background: var(--background);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--highlight); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-title); line-height: var(--line-tight); margin: 0; }
ul, ol { margin: 0; }
button { font-family: inherit; }

/* --- Accessibility helpers --------------------------------------- */
.skip-link {
    background: var(--highlight);
    color: var(--main-color);
    left: var(--gap-md);
    padding: var(--gap-xs) var(--gap-md);
    position: fixed;
    top: var(--gap-md);
    z-index: 200;
    border-radius: var(--round-sm);
}
.skip-link:not(:focus) { top: -200px !important; }
.sr-only {
    clip: rect(0 0 0 0); clip-path: inset(50%);
    height: 1px; width: 1px; overflow: hidden; position: absolute; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* --- Shared section wrapper (single width — anti-footprint canon) - */
.alcove-inner, .crochet-inner, .arbor-inner, .transom-inner, .nave-inner,
.buttress-inner, .ledge-inner, .pier-inner, .catwalk-inner, .pediment-inner,
.court-inner, .beacon-inner, .beacon-articles-inner, .vista-inner,
.quatrefoil-inner, .spire-inner, .slab-inner {
    margin-inline: auto;
    max-width: calc(var(--max-width) + 2 * var(--pad-desktop));
    padding-inline: var(--pad-desktop);
    width: 100%;
}
/* readable columns keep their own narrow measure (prose / legal — allowed exception) */
.spandrel-col, .cartouche-col {
    margin-inline: auto;
    max-width: var(--text-width);
    padding-inline: var(--pad-desktop);
    width: 100%;
}

/* ============================================================
   HEADER — HEAD-10 (tall editorial, two rows) + NAV-03 + AUTH-REGISTER
   ============================================================ */
.alcove {
    background: var(--background);
    border-bottom: 1px solid var(--border-hair-x);
    position: sticky;
    top: 0;
    transition: padding var(--duration-base) var(--timing);
    z-index: 100;
}
.alcove-inner { padding-block: var(--gap-md); }
.alcove-row { align-items: center; display: flex; }
.alcove-row--top { justify-content: space-between; }
.alcove-row--bottom {
    border-top: 1px solid var(--border-hair-x);
    gap: var(--gap-lg);
    justify-content: space-between;
    margin-top: var(--gap-sm);
    padding-top: var(--gap-sm);
}
.alcove-logo { display: inline-flex; flex-shrink: 0; }
.alcove-logo-pill {
    align-items: center;
    background: #ffffff;
    border-radius: var(--radius);
    display: inline-flex;
    padding: 6px 14px;
}
.alcove-logo-img {
    flex-shrink: 0;
    height: 88px;
    transition: height var(--duration-base) var(--timing);
    width: auto;
}
.alcove.is-shrunk .alcove-inner { padding-block: var(--gap-xs); }
.alcove.is-shrunk .alcove-logo-img { height: 72px; }
.alcove-toggle {
    background: none;
    border: 0;
    cursor: pointer;
    display: none;
    flex-direction: column;
    gap: 5px;
    margin-left: auto !important;
    padding: var(--gap-xs);
}
.alcove-toggle-bar { background: var(--text); display: block; height: 2px; width: 26px; }
.alcove-nav { display: flex; flex-direction: column; gap: var(--gap-2xs); }
.alcove-nav-list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap-md);
    list-style: none;
    margin: 0;
    padding: 0;
}
.alcove-nav-list--bottom { border-top: 1px solid var(--border-hair-x); padding-top: var(--gap-2xs); }
.alcove-nav-item { white-space: nowrap; }
.alcove-link {
    color: var(--text);
    font-family: var(--font-title);
    font-size: var(--size-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--letter-wide);
    text-transform: uppercase;
    transition: color var(--transition-fast);
    white-space: nowrap;
}
.alcove-link:hover { color: var(--highlight); }
.alcove-link--active { color: var(--highlight); }
.alcove-auth { display: flex; flex-shrink: 0; }
.alcove-auth-btn {
    background: var(--highlight);
    border: 1px solid var(--highlight);
    border-radius: var(--radius);
    color: var(--main-color);
    flex-shrink: 0;
    font-family: var(--font-title);
    font-size: var(--size-sm);
    font-weight: var(--font-bold);
    letter-spacing: var(--letter-wide);
    padding: var(--gap-sm) var(--gap-lg);
    text-transform: uppercase;
    white-space: nowrap;
}
.alcove-auth-btn:hover { background: var(--accent-pressed); border-color: var(--accent-pressed); color: var(--main-color); }
.alcove-drawer { display: none; padding: var(--gap-md) var(--pad-mobile) var(--gap-lg); }
.alcove-drawer-list { display: flex; flex-direction: column; gap: var(--gap-xs); list-style: none; margin: 0 0 var(--gap-md); padding: 0; }
.alcove-drawer-link {
    color: var(--text);
    display: block;
    font-family: var(--font-title);
    font-size: var(--type-h5);
    letter-spacing: var(--letter-wide);
    padding: var(--gap-xs) 0;
    text-transform: uppercase;
}
.alcove-drawer-link:hover { color: var(--highlight); }
.alcove-drawer-register { display: inline-block; }

/* ============================================================
   HERO — HERO-11 (compact, image right)
   ============================================================ */
.crochet { padding-block: var(--gap-2xl); }
.crochet-inner { align-items: center; display: grid; gap: var(--gap-2xl); grid-template-columns: 1.6fr 1fr; }
.crochet-eyebrow {
    color: var(--highlight);
    font-family: var(--font-sans);
    font-size: var(--size-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--letter-wide);
    margin: 0 0 var(--gap-sm);
    text-transform: uppercase;
}
.crochet-title { color: var(--text); font-size: var(--text-h1); font-weight: var(--font-bold); margin: 0; }
.crochet-subtitle { color: var(--muted); font-size: var(--type-h5); margin: var(--gap-md) 0 0; max-width: 480px; }
.crochet-cta {
    background: var(--highlight);
    border-radius: var(--radius);
    color: var(--main-color);
    display: inline-block;
    font-family: var(--font-title);
    font-weight: var(--font-bold);
    letter-spacing: var(--letter-wide);
    margin-top: var(--gap-lg);
    padding: var(--gap-md) var(--gap-xl);
    text-transform: uppercase;
    transition: background var(--duration-base) var(--timing);
}
.crochet-cta:hover { background: var(--accent-pressed); color: var(--main-color); }
.crochet-figure { margin: 0; }
.crochet-image { aspect-ratio: 3 / 2; border-radius: var(--rounded-lg); object-fit: cover; width: 100%; }

/* ============================================================
   PAGE HEADER — PHEAD-06 (subtle editorial)
   ============================================================ */
.arbor { padding-block: var(--gap-xl); }
.arbor-title { color: var(--text); font-size: var(--text-h1); font-weight: var(--font-bold); }
.arbor-divider { background: rgba(var(--color-text-rgb-x), 0.2); height: 1px; margin: var(--gap-md) 0; width: 48px; }
.arbor-description { color: var(--muted); font-size: var(--type-h5); font-style: italic; margin: 0; max-width: 640px; }

/* ============================================================
   BREADCRUMBS — BREAD-05
   ============================================================ */
.transom { padding-block: var(--gap-md); }
.transom-list { align-items: center; display: flex; flex-wrap: wrap; gap: var(--gap-xs); list-style: none; margin: 0; padding: 0; }
.transom-item { font-family: var(--font-title); font-size: var(--type-h6); letter-spacing: var(--letter-wide); text-transform: uppercase; }
.transom-link { color: var(--muted); transition: color var(--transition-fast); }
.transom-link:hover { color: var(--highlight); }
.transom-separator { color: var(--highlight); }
.transom-current { color: var(--text); }

/* ============================================================
   INLINE CTA — INLINE-CTA-02
   ============================================================ */
.nave { padding-block: var(--gap-xl); }
.nave-card {
    background: var(--surface-raised);
    border: 1px solid var(--border-hair-x);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-inline: auto;
    max-width: 600px;
    padding: var(--gap-xl);
    text-align: center;
}
.nave-heading { color: var(--text); font-size: var(--text-h4); font-weight: var(--font-bold); margin: 0; }
.nave-subtext { color: var(--muted); font-size: var(--text-base); margin: 0; }
.nave-btn {
    align-self: center;
    background: var(--highlight);
    border-radius: var(--radius);
    color: var(--main-color);
    font-family: var(--font-title);
    font-weight: var(--font-bold);
    letter-spacing: var(--letter-wide);
    margin-top: var(--gap-xs);
    padding: var(--gap-sm) var(--gap-xl);
    text-transform: uppercase;
    transition: background var(--duration-base) var(--timing);
}
.nave-btn:hover { background: var(--accent-pressed); color: var(--main-color); }

/* ============================================================
   PROSE — PROSE-05 (readable measure)
   ============================================================ */
.spandrel { padding-block: var(--gap-md); }
.spandrel-h2 {
    color: var(--text);
    font-family: var(--font-title);
    font-size: var(--type-h2);
    font-weight: var(--font-bold);
    margin-block-start: var(--gap-lg);
    padding-left: 56px;
    position: relative;
}
.spandrel-h2::before {
    background: var(--highlight);
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    top: 0.6em;
    width: 40px;
}
.spandrel-h3 { color: var(--text); font-size: var(--size-h3); font-weight: var(--font-bold); margin-block-start: var(--gap-lg); }
.spandrel-p { color: var(--muted); font-size: var(--text-base); line-height: var(--leading-loose); margin-block: var(--gap-md); }
.spandrel-ul, .spandrel-ol { color: var(--muted); line-height: var(--leading-loose); margin-block: var(--gap-md); padding-left: var(--gap-lg); }
.spandrel-ul li, .spandrel-ol li { margin-block: var(--gap-2xs); }
.spandrel-blockquote {
    border-left: 3px solid var(--highlight);
    color: var(--text);
    font-style: italic;
    margin: var(--gap-md) 0;
    padding-left: var(--gap-md);
}
.spandrel-col a { color: var(--highlight); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.spandrel-col a:hover { color: var(--accent-pressed); }

/* ============================================================
   ITEMS GRID — GRID-01 (bordered cards, three columns)
   ============================================================ */
.buttress { padding-block: var(--gap-xl); }
.buttress-heading { color: var(--text); font-size: var(--type-h2); font-weight: var(--font-bold); margin-bottom: var(--gap-lg); }
.buttress-list { display: grid; gap: var(--gap-lg); grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.buttress-item {
    background: var(--surface-raised);
    border: 1px solid var(--border-hair-x);
    border-radius: var(--radius);
    padding: var(--gap-lg);
    transition: border-color var(--duration-base);
}
.buttress-item:hover { border-color: var(--highlight); }
.buttress-item-title { color: var(--text); font-family: var(--font-title); font-size: var(--text-h4); font-weight: var(--font-bold); margin-bottom: var(--gap-sm); }
.buttress-item-text { color: var(--muted); font-size: var(--text-base); line-height: var(--leading-normal); margin: 0; }

/* ============================================================
   REVIEWS — REV-02 (quote-style editorial, no dates)
   ============================================================ */
.ledge { padding-block: var(--gap-xl); }
.ledge-heading { color: var(--text); font-size: var(--type-h2); font-weight: var(--font-bold); margin-bottom: var(--gap-lg); }
.ledge-list { display: grid; gap: var(--gap-lg); grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
.ledge-item {
    border-left: 3px solid var(--highlight);
    padding: var(--gap-md) 0 var(--gap-md) var(--gap-lg);
    position: relative;
}
.ledge-quote { margin: 0; }
.ledge-quote p { color: var(--text); font-family: var(--font-sans); font-size: var(--type-h5); font-style: italic; line-height: var(--leading-normal); margin: 0; }
.ledge-attribution { color: var(--muted); font-size: var(--size-sm); margin-top: var(--gap-sm); }
.ledge-author { color: var(--text); font-style: normal; font-weight: var(--font-medium); }
.ledge-sep { color: var(--highlight); margin: 0 var(--gap-2xs); }
.ledge-rating { color: var(--highlight); font-weight: var(--font-medium); }

/* ============================================================
   FAQ — FAQ-01 (accordion)
   ============================================================ */
.pier { padding-block: var(--gap-xl); }
.pier-heading { color: var(--text); font-size: var(--type-h2); font-weight: var(--font-bold); margin-bottom: var(--gap-lg); }
.pier-list { margin: 0; }
.pier-item { border-bottom: 1px solid var(--border-hair-x); }
.pier-term { margin: 0; }
.pier-question {
    align-items: center;
    background: none;
    border: 0;
    color: var(--text);
    cursor: pointer;
    display: flex;
    font-family: var(--font-title);
    font-size: var(--type-h5);
    font-weight: var(--font-bold);
    gap: var(--gap-md);
    justify-content: space-between;
    padding: var(--gap-md) 0;
    text-align: left;
    width: 100%;
}
.pier-question:hover { color: var(--highlight); }
.pier-icon { color: var(--highlight); font-size: var(--size-h3); line-height: 1; transition: transform var(--duration-base) var(--timing); }
.pier-question.is-open .pier-icon { transform: rotate(45deg); }
.pier-answer { color: var(--muted); font-size: var(--text-base); line-height: var(--leading-loose); padding: 0 0 var(--gap-md); }
.pier-answer p { margin: 0; }

/* ============================================================
   DATA TABLE — TABLE-05 (compact dense)
   ============================================================ */
.pediment { padding-block: var(--gap-xl); }
.pediment-scroll { overflow-x: auto; }
.pediment-table { border-collapse: collapse; min-width: 480px; width: 100%; }
.pediment-thead { background: var(--surface-raised); }
.pediment-th { color: var(--text); font-size: var(--type-micro); font-weight: var(--font-bold); letter-spacing: var(--letter-wide); padding: var(--gap-sm); text-align: left; text-transform: uppercase; }
.pediment-td { border-bottom: 1px solid var(--border-hair-x); color: var(--muted); font-size: var(--size-sm); padding: var(--gap-xs) var(--gap-sm); }

/* ============================================================
   CTA BLOCK — CTA-04 (minimal text link)
   ============================================================ */
.catwalk { padding-block: var(--gap-xl); text-align: center; }
.catwalk-title { color: var(--text); font-size: var(--type-h2); font-weight: var(--font-bold); }
.catwalk-description { color: var(--muted); font-size: var(--text-base); line-height: var(--leading-loose); margin: var(--gap-md) auto; max-width: 580px; }
.catwalk-link {
    color: var(--highlight);
    display: inline-block;
    font-family: var(--font-title);
    font-size: var(--type-h6);
    letter-spacing: var(--letter-wide);
    text-decoration: underline;
    text-transform: uppercase;
    transition: color var(--duration-base);
}
.catwalk-link:hover { color: var(--accent-pressed); }

/* ============================================================
   CONTEXT / DETAIL IMAGES — page media band
   ============================================================ */
.vista-band { padding-block: var(--gap-xl); }
.vista-inner { display: grid; gap: var(--gap-lg); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vista { margin: 0; }
.vista-image { border: 1px solid var(--border-hair-x); border-radius: var(--rounded-lg); width: 100%; }

/* ============================================================
   AUTHOR CARD — AUTH-06 + articles list
   ============================================================ */
.beacon { padding-block: var(--gap-xl); }
.beacon-inner { background: linear-gradient(135deg, var(--main-color), var(--background)); border-radius: var(--rounded-lg); padding-block: var(--gap-2xl); }
.beacon-grid { align-items: start; display: grid; gap: var(--gap-2xl); grid-template-columns: 280px 1fr; }
.beacon-portrait { aspect-ratio: 4 / 5; border-radius: var(--rounded-lg); box-shadow: var(--elevation-3); object-fit: cover; object-position: center 20%; width: 280px; }
.beacon-body { display: flex; flex-direction: column; gap: var(--gap-md); }
.beacon-eyebrow { color: var(--highlight); font-size: var(--size-sm); font-weight: var(--font-medium); letter-spacing: var(--letter-wide); margin: 0; text-transform: uppercase; }
.beacon-name { color: var(--text); font-size: var(--text-h1); font-weight: var(--font-bold); margin: 0; }
.beacon-bio { color: var(--muted); font-size: var(--type-h5); margin: 0; max-width: 560px; }
.beacon-expertise { display: flex; flex-wrap: wrap; gap: var(--gap-xs); list-style: none; margin: 0; padding: 0; }
.beacon-expertise-tag {
    background: var(--main-color);
    border-radius: var(--corner-pill);
    color: var(--text);
    font-size: var(--type-micro);
    letter-spacing: var(--letter-wide);
    padding: var(--gap-2xs) var(--gap-sm);
    text-transform: uppercase;
}
.beacon-articles { padding-block: var(--gap-lg); }
.beacon-articles-heading { color: var(--text); font-size: var(--text-h4); font-weight: var(--font-bold); margin-bottom: var(--gap-md); }
.beacon-articles-list { display: flex; flex-direction: column; gap: var(--gap-xs); list-style: none; margin: 0; padding: 0; }
.beacon-articles-item { border-bottom: 1px solid var(--border-hair-x); color: var(--muted); font-size: var(--text-base); padding-bottom: var(--gap-xs); }

/* ============================================================
   CONTACT FORM — FORM-05 (bordered editorial)
   ============================================================ */
.court { padding-block: var(--gap-xl); }
.court-intro { color: var(--muted); font-size: var(--text-base); line-height: var(--leading-loose); margin-bottom: var(--gap-lg); max-width: 720px; }
.court-success {
    background: rgba(45, 168, 100, 0.14);
    border: 1px solid rgba(45, 168, 100, 0.4);
    border-radius: var(--radius);
    color: var(--text);
    display: none;
    margin-bottom: var(--gap-lg);
    padding: var(--gap-md);
}
.court-success.is-visible { display: block; }
.court-form { border: 2px solid var(--highlight); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--gap-md); max-width: 640px; padding: var(--gap-xl); }
.court-field { display: flex; flex-direction: column; gap: var(--gap-xs); }
.court-label { color: var(--text); font-size: var(--size-sm); font-weight: var(--font-medium); letter-spacing: var(--letter-wide); text-transform: uppercase; }
.court-input, .court-textarea {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-hair-x);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    outline: none;
    padding: var(--gap-sm) 0;
    transition: border-color var(--duration-base);
}
.court-input:focus, .court-textarea:focus { border-bottom-color: var(--highlight); }
.court-textarea { min-height: 120px; resize: vertical; }
.court-submit {
    align-self: flex-start;
    background: var(--highlight);
    border: 0;
    border-radius: var(--radius);
    color: var(--main-color);
    cursor: pointer;
    font-family: var(--font-title);
    font-weight: var(--font-bold);
    letter-spacing: var(--letter-wide);
    padding: var(--gap-sm) var(--gap-xl);
    text-transform: uppercase;
    transition: background var(--duration-base);
}
.court-submit:hover { background: var(--accent-pressed); color: var(--main-color); }

/* ============================================================
   LEGAL — LEGAL-07 (magazine editorial, readable)
   ============================================================ */
.cartouche { padding-block: var(--gap-xl); }
.cartouche-eyebrow { color: var(--highlight); font-size: var(--type-micro); letter-spacing: var(--letter-wide); margin: 0 0 var(--gap-xs); text-transform: uppercase; }
.cartouche-intro { color: var(--text); font-family: var(--font-title); font-size: var(--text-h4); font-style: italic; line-height: var(--leading-normal); margin: 0 0 var(--gap-xl); }
.cartouche-section { margin-block-start: var(--gap-2xl); }
.cartouche-heading { color: var(--text); font-family: var(--font-title); font-size: var(--size-h3); font-style: italic; }
.cartouche-divider { background: var(--highlight); border: 0; height: 2px; margin-block: var(--gap-md); width: 80px; }
.cartouche-paragraph { color: var(--muted); font-size: var(--text-base); line-height: var(--leading-loose); margin-block-end: var(--gap-md); }
.cartouche-list { color: var(--muted); line-height: var(--leading-loose); padding-left: var(--gap-lg); }
.cartouche-disclaimer {
    background: rgba(220, 38, 38, 0.10);
    border-left: 3px solid var(--banner-bg);
    border-radius: var(--rounded-xs);
    color: var(--text);
    font-size: var(--size-sm);
    margin-top: var(--gap-xl);
    padding: var(--gap-md);
}
.cartouche-col a { color: var(--highlight); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   ERROR — ERR-01 (centred hero-style)
   ============================================================ */
.slab { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 260px); padding-block: var(--gutter-3xl); text-align: center; }
.slab-inner { align-items: center; display: flex; flex-direction: column; gap: var(--gap-lg); }
.slab-number { color: var(--highlight); font-family: var(--font-title); font-size: clamp(80px, 18vw, 200px); font-weight: var(--font-bold); line-height: var(--line-tight); }
.slab-title { color: var(--text); font-size: var(--text-h1); font-weight: var(--font-bold); max-width: 720px; }
.slab-text { color: var(--muted); font-size: var(--type-h5); max-width: 600px; }
.slab-button {
    background: var(--highlight);
    border-radius: var(--radius);
    color: var(--main-color);
    font-family: var(--font-title);
    font-weight: var(--font-bold);
    letter-spacing: var(--letter-wide);
    padding: var(--gap-md) var(--gap-xl);
    text-transform: uppercase;
    transition: background var(--duration-base);
}
.slab-button:hover { background: var(--accent-pressed); color: var(--main-color); }

/* ============================================================
   AUTHOR BYLINE — BYLINE-03 (thin strip)
   ============================================================ */
.spire { border-top: 1px solid var(--border-hair-x); margin-top: var(--gap-lg); padding-block: var(--gap-md); }
.spire-inner { align-items: center; display: flex; gap: var(--gap-sm); }
.spire-portrait { border-radius: var(--corner-pill); flex-shrink: 0; height: 48px; object-fit: cover; object-position: center 20%; width: 48px; }
.spire-meta { color: var(--muted); font-size: var(--size-sm); }
.spire-name { color: var(--highlight); text-decoration: underline; }
.spire-name:hover { color: var(--accent-pressed); }
.spire-sep { color: var(--highlight); }
.spire-role { color: var(--muted); }

/* ============================================================
   FOOTER — FOOT-02 (two rows: brand+nav / copyright+legal)
   ============================================================ */
.quatrefoil { background: var(--main-color); border-top: 1px solid var(--border-hair-x); padding-block: var(--gap-2xl); }
.quatrefoil-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--gap-lg); justify-content: space-between; }
.quatrefoil-row--bottom { border-top: 1px solid var(--border-hair-x); margin-top: var(--gap-lg); padding-top: var(--gap-md); }
.quatrefoil-logo { display: inline-flex; }
.quatrefoil-logo-pill { align-items: center; background: #ffffff; border-radius: var(--radius); display: inline-flex; padding: 5px 12px; }
.quatrefoil-logo-img { height: 72px; width: auto; }
.quatrefoil-nav-list, .quatrefoil-legal-list { display: flex; flex-wrap: wrap; gap: var(--gap-md); list-style: none; margin: 0; padding: 0; }
.quatrefoil-nav-link { color: var(--muted); font-size: var(--size-sm); transition: color var(--transition-fast); }
.quatrefoil-nav-link:hover { color: var(--text); }
.quatrefoil-legal-link { color: var(--muted); font-size: var(--type-micro); letter-spacing: var(--letter-wide); text-transform: uppercase; transition: color var(--transition-fast); }
.quatrefoil-legal-link:hover { color: var(--text); }
.quatrefoil-copyright { color: var(--muted); font-size: var(--size-sm); margin: 0; }
.quatrefoil-age { color: var(--highlight); font-weight: var(--font-bold); }
.quatrefoil-disclaimer { color: var(--muted); font-size: var(--type-micro); line-height: var(--leading-normal); margin: var(--gap-lg) 0 0; }

/* ============================================================
   COOKIE BANNER — COOK-06 (fixed panel, preferences link)
   ============================================================ */
.sigil { bottom: var(--gap-md); display: none; left: var(--gap-md); margin-inline: auto; max-width: 760px; position: fixed; right: var(--gap-md); z-index: 90; }
.sigil.is-visible { display: block; }
.sigil-panel {
    align-items: center;
    background: var(--surface-raised);
    border: 1px solid var(--border-hair-x);
    border-radius: var(--radius);
    box-shadow: var(--elevation-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    padding: var(--gap-md);
}
.sigil-message { color: var(--muted); flex: 1 1 280px; font-size: var(--size-sm); line-height: var(--leading-normal); margin: 0; }
.sigil-actions { display: flex; flex-shrink: 0; gap: var(--gap-sm); }
.sigil-link { color: var(--highlight); font-size: var(--size-sm); padding: var(--gap-xs) var(--gap-sm); text-decoration: underline; }
.sigil-button {
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-title);
    font-size: var(--type-micro);
    font-weight: var(--font-bold);
    letter-spacing: var(--letter-wide);
    padding: var(--gap-sm) var(--gap-md);
    text-transform: uppercase;
    transition: background var(--duration-base);
}
.sigil-button--accept-x { background: var(--highlight); color: var(--main-color); }
.sigil-button--accept-x:hover { background: var(--accent-pressed); color: var(--main-color); }
.sigil-button--decline-x { background: transparent; border: 1px solid var(--border-hair-x); color: var(--text); }
.sigil-button--decline-x:hover { background: rgba(var(--color-text-rgb-x), 0.06); color: var(--text); }

/* ============================================================
   RESPONSIVE — desktop-first (BP-05)
   ============================================================ */
@media (max-width: 1040px) {
    .alcove-row--bottom { display: none; }
    .alcove-toggle { display: flex; }
    .alcove-drawer.is-open { display: block; }
    .crochet-inner { grid-template-columns: 1fr; }
    .crochet-figure { order: -1; }
    .buttress-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    :root {
        --text-h1: 36px;
        --type-h2: 26px;
        --size-h3: 20px;
        --text-h4: 17px;
        --text-base: 15px;
        --pad-desktop: 16px;
    }
    .alcove-logo-img { height: 64px; }
    .alcove.is-shrunk .alcove-logo-img { height: 60px; }
    .buttress-list, .ledge-list { grid-template-columns: 1fr; }
    .beacon-inner { padding-inline: var(--gap-lg); }
    .beacon-grid { grid-template-columns: 1fr; }
    .beacon-portrait { width: 200px; }
    .sigil-panel { flex-direction: column; align-items: stretch; }
    .sigil-actions { width: 100%; }
    .sigil-button { flex: 1; }
    .pediment-table { min-width: 0; }
    .quatrefoil-row { flex-direction: column; align-items: flex-start; }
}

/* --- Explicit definitions for structural helper classes (A-14) --- */
.alcove-nav-list--top { margin: 0; }
.alcove-drawer-item { list-style: none; }
.crochet-content { display: flex; flex-direction: column; }
.pier-question-text { flex: 1; }
.pediment-tbody { width: 100%; }
.pediment-row { border-bottom: 0; }
.quatrefoil-row--top { align-items: center; }
.quatrefoil-nav { display: flex; }
.quatrefoil-legal { display: flex; }