/* Wonder Luck Casino DE — TYPO-05 display + SPACE-01 4px modular + GEO-03 pill-heavy + MOTION-03 dynamic */
:root {
  --color-primary: #040b12;
  --color-accent: #f9d56c;
  --color-accent-pressed: #f7c93a;
  --color-bg: #050e15;
  --color-bg-elevated: #0c1923;
  --color-gradient-light: #a58a59;
  --color-gradient-mid: #d0c1a9;
  --color-text: #ffffff;
  --color-text-muted: #bfbfbf;
  --color-rg-banner: #dc2626;

  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Cinzel", "Cormorant Garamond", "Times New Roman", serif;

  /* TYPO-05 display-heavy */
  --fs-h1: 72px;
  --fs-h2: 44px;
  --fs-h3: 28px;
  --fs-h4: 20px;
  --fs-h5: 16px;
  --fs-h6: 14px;
  --fs-body: 18px;
  --fs-small: 15px;
  --fs-micro: 12px;
  --lh-tight: 1.0;
  --lh-normal: 1.5;
  --lh-loose: 1.7;
  --ls-tight: -0.03em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* SPACE-01 modular 4px */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  --container-site: 1440px;
  --container-readable: 720px;
  --container-padding-mobile: 16px;
  --container-padding-tablet: 24px;
  --container-padding-desktop: 32px;

  /* BP-10 */
  --bp-sm: 488px;
  --bp-md: 832px;
  --bp-lg: 1136px;
  --bp-xl: 1488px;

  /* GEO-03 pill-heavy */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --radius-circle: 50%;
  --shadow-xs: none;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.13);
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 3px;

  /* MOTION-03 dynamic */
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 832px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 30px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-h5: 14px;
    --fs-h6: 12px;
    --fs-body: 17px;
    --fs-small: 14px;
    --fs-micro: 11px;
  }
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: 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-normal); margin: 0; min-height: 100vh; overflow-x: hidden; padding-top: 96px; }
@media (max-width: 832px) { body { padding-top: 64px; } }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-accent-pressed); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; }
p { margin: 0; }
button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; }
.skip-link { background: var(--color-accent); color: var(--color-bg); font-weight: var(--fw-bold); left: var(--space-sm); padding: var(--space-2xs) var(--space-sm); position: absolute; top: -100px; z-index: 200; }
.skip-link:focus { top: var(--space-sm); }
.sr-only { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* Header HEAD-03 Compact Top Bar + Main Bar (.crest) + STICKY-03 blur */
.crest { inset-block-start: 0; inset-inline: 0; position: fixed; transition: background var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out); width: 100%; z-index: 100; }
.crest.is-blurred .crest-main { background: rgba(5, 14, 21, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.crest-topbar { background: var(--color-primary); height: 32px; }
.crest-topbar-inner { align-items: center; color: var(--color-text-muted); display: flex; font-family: var(--font-display); font-size: var(--fs-small); gap: var(--space-md); height: 100%; justify-content: space-between; margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.crest-info { letter-spacing: var(--ls-wide); text-transform: uppercase; }
.crest-cta-mini { background: var(--color-accent); border-radius: var(--radius-pill); color: var(--color-bg); font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); padding: var(--space-2xs) var(--space-sm); text-transform: uppercase; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.crest-cta-mini:hover { background: var(--color-accent-pressed); color: var(--color-bg); }
.crest-main { background: var(--color-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.08); height: 64px; }
.crest-main-inner { align-items: center; display: flex; gap: var(--space-md); height: 100%; justify-content: space-between; margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.crest-logo img { height: 48px; width: auto; }
.crest-nav { display: flex; gap: var(--space-md); }
.crest-nav a { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.crest-nav a:hover { color: var(--color-accent); }
body[data-current="/"] .crest-nav a[href="/"],
body[data-current="/bonus/"] .crest-nav a[href="/bonus/"],
body[data-current="/slots/"] .crest-nav a[href="/slots/"],
body[data-current="/app/"] .crest-nav a[href="/app/"],
body[data-current="/promo-code/"] .crest-nav a[href="/promo-code/"],
body[data-current="/login/"] .crest-nav a[href="/login/"],
body[data-current="/author/"] .crest-nav a[href="/author/"],
body[data-current="/contact/"] .crest-nav a[href="/contact/"] { color: var(--color-accent); }
.crest-auth { display: flex; flex-shrink: 0; gap: var(--space-sm); }
.crest-login,
.crest-register { border-radius: var(--radius-pill); font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); padding: var(--space-xs) var(--space-md); text-transform: uppercase; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.crest-login { background: transparent; border: 1px solid var(--color-text); color: var(--color-text); }
.crest-login:hover { background: rgba(255, 255, 255, 0.06); color: var(--color-text); }
.crest-register { background: var(--color-accent); color: var(--color-bg); }
.crest-register:hover { background: var(--color-accent-pressed); color: var(--color-bg); }
.crest-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--space-xs); }
@media (max-width: 1px) { .crest-toggle { display: none; } }
.crest-toggle span { background: var(--color-text); display: block; height: 2px; width: 24px; }
.crest-mobile { background: var(--color-bg); display: none; inset-block-start: 96px; inset-inline: 0; padding: var(--space-md); position: absolute; box-shadow: var(--shadow-lg); }
.crest-mobile.is-open { display: block; }
.crest-mobile-backdrop { background: rgba(0, 0, 0, 0.6); display: none; inset: 96px 0 -2000px 0; position: absolute; z-index: -1; }
.crest-mobile-backdrop.is-open { display: block; }
.crest-mobile ul { display: flex; flex-direction: column; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.crest-mobile a { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h5); }
@media (max-width: 1136px) {
  .crest-nav, .crest-auth { display: none; }
  .crest-toggle { display: flex; }
  .crest-main { height: 56px; }
  .crest-mobile, .crest-mobile-backdrop { inset-block-start: 88px; }
  .crest-logo img { height: 36px; }
}

/* Hero HERO-02 Split Photo Right (.sconce) */
.sconce { background: var(--color-bg); padding-block: var(--space-xl); }
.sconce-inner { display: grid; gap: var(--space-xl); grid-template-columns: 55fr 45fr; margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); min-height: 480px; padding-inline: var(--container-padding-desktop); }
.sconce-text { align-self: center; display: flex; flex-direction: column; gap: var(--space-md); }
.sconce-eyebrow { color: var(--color-accent); font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.sconce h1 { color: var(--color-text); font-size: var(--fs-h1); }
.sconce-subtitle { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-h5); line-height: var(--lh-normal); }
.sconce-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.sconce-cta-primary { background: var(--color-accent); border-radius: var(--radius-pill); color: var(--color-bg); font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); padding: var(--space-md) var(--space-xl); text-transform: uppercase; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.sconce-cta-primary:hover { background: var(--color-accent-pressed); color: var(--color-bg); }
.sconce-cta-secondary { background: transparent; border: 1px solid var(--color-text); border-radius: var(--radius-pill); color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); padding: var(--space-md) var(--space-xl); text-transform: uppercase; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.sconce-cta-secondary:hover { background: rgba(255, 255, 255, 0.06); color: var(--color-text); }
.sconce-figure { align-self: stretch; margin: 0; }
.sconce-figure img { border-radius: var(--radius-lg); height: 100%; object-fit: cover; width: 100%; }
@media (max-width: 832px) {
  .sconce-inner { grid-template-columns: 1fr; }
}

/* Page-header PHEAD-07 Number + Title (.buttress) */
.buttress { padding-block: var(--space-xl); }
.buttress-inner { display: grid; gap: var(--space-lg); grid-template-columns: 120px 1fr; margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.buttress-number { color: var(--color-accent); font-family: var(--font-display); font-size: calc(var(--fs-h1) * 1.4); font-weight: var(--fw-bold); line-height: 0.9; }
.buttress-title { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h1); margin-block-end: var(--space-sm); }
.buttress-description { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-h5); line-height: var(--lh-normal); }
@media (max-width: 832px) { .buttress-inner { grid-template-columns: 1fr; } .buttress-number { font-size: var(--fs-h1); } }

/* Items-grid GRID-12 Initial-Block + Text (.grove) */
.grove { padding-block: var(--space-xl); }
.grove-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.grove h2 { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h2); margin-block-end: var(--space-lg); }
.grove-list { display: flex; flex-direction: column; }
.grove-item { align-items: flex-start; border-block-end: 1px solid rgba(255, 255, 255, 0.08); display: flex; gap: var(--space-lg); padding: var(--space-lg) 0; }
.grove-initial { align-items: center; aspect-ratio: 1/1; background: var(--color-accent); border-radius: var(--radius-md); color: var(--color-bg); display: flex; flex-shrink: 0; font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-bold); justify-content: center; width: 120px; }
.grove-title { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h3); margin-block-end: var(--space-xs); }
.grove-text { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); }
@media (max-width: 832px) { .grove-initial { font-size: var(--fs-h2); width: 80px; } }

/* FAQ FAQ-04 Side-Numbered Accordion (.keystone) */
.keystone { padding-block: var(--space-xl); }
.keystone-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.keystone h2 { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h2); margin-block-end: var(--space-lg); }
.keystone-list { display: flex; flex-direction: column; gap: var(--space-md); }
.keystone-item { border-block-end: 1px solid rgba(255, 255, 255, 0.08); display: grid; gap: var(--space-md); grid-template-columns: 60px 1fr; padding-block-end: var(--space-md); }
.keystone-num { color: var(--color-accent); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.keystone-question { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-bold); margin-block-end: var(--space-sm); }
.keystone-answer { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-body); grid-column: 2; line-height: var(--lh-loose); }

/* Reviews REV-06 Compact List (.quatrefoil) */
.quatrefoil { padding-block: var(--space-xl); }
.quatrefoil-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.quatrefoil h2 { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h2); margin-block-end: var(--space-lg); }
.quatrefoil-item { border-block-end: 1px solid rgba(255, 255, 255, 0.06); padding-block: var(--space-md); }
.quatrefoil-meta { color: var(--color-text); display: grid; font-family: var(--font-display); gap: var(--space-md); grid-template-columns: 1fr auto; margin-block-end: var(--space-xs); }
.quatrefoil-author { color: var(--color-text); font-weight: var(--fw-bold); }
.quatrefoil-rating { color: var(--color-accent); font-weight: var(--fw-bold); }
.quatrefoil-date { color: var(--color-text-muted); font-size: var(--fs-small); }
.quatrefoil-text { color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); max-width: 720px; }

/* CTA-block CTA-08 Inverted Dark (.glyph) */
.glyph { background: var(--color-primary); color: var(--color-text); padding-block: var(--space-xl); }
.glyph-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); text-align: center; }
.glyph-title { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h1); margin-block-end: var(--space-md); text-transform: uppercase; }
.glyph-text { color: rgba(255, 255, 255, 0.75); font-family: var(--font-body); font-size: var(--fs-h5); line-height: var(--lh-normal); margin: 0 auto var(--space-lg); max-width: 720px; }
.glyph-btn { background: var(--color-accent); border-radius: var(--radius-pill); color: var(--color-bg); display: inline-block; font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-bold); height: 64px; letter-spacing: var(--ls-wide); line-height: 64px; padding-inline: var(--space-2xl); text-transform: uppercase; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.glyph-btn:hover { background: var(--color-accent-pressed); color: var(--color-bg); }

/* Prose PROSE-03 Bordered Sidebar Notes (.brazier) */
.brazier { padding-block: var(--space-xl); }
.brazier-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.brazier h2 { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h2); margin-block-start: var(--space-xl); margin-block-end: var(--space-md); }
.brazier h2:first-child { margin-block-start: 0; }
.brazier h3 { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h3); margin-block: var(--space-md) var(--space-sm); }
.brazier p,
.brazier ul,
.brazier ol { border-left: 3px solid rgba(191, 191, 191, 0.15); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); margin: 0 0 var(--space-md); padding-inline-start: var(--space-lg); }
.brazier ul, .brazier ol { padding-inline-start: var(--space-lg); }
.brazier li { margin-block-end: var(--space-2xs); }
.brazier a { color: var(--color-accent); text-decoration: underline; }
.brazier strong { color: var(--color-text); font-weight: var(--fw-bold); }

/* Data-table TABLE-01 Striped (.lectern) */
.lectern { padding-block: var(--space-xl); }
.lectern-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.lectern-wrap { background: var(--color-bg-elevated); border-radius: var(--radius-md); overflow: hidden; }
.lectern table { border-collapse: collapse; width: 100%; }
.lectern thead { background: var(--color-primary); }
.lectern th { color: var(--color-accent); font-family: var(--font-display); font-size: var(--fs-h6); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); padding: var(--space-md); text-align: left; text-transform: uppercase; }
.lectern td { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-body); padding: var(--space-md); }
.lectern td:first-child { color: var(--color-text); font-weight: var(--fw-medium); }
.lectern tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }

/* Legal LEGAL-01 Continuous (.foyer) */
.foyer { padding-block: var(--space-xl); }
.foyer-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.foyer-intro { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h5); line-height: var(--lh-normal); margin-block-end: var(--space-lg); }
.foyer-updated { color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); margin-block-end: var(--space-xl); text-transform: uppercase; }
.foyer-section { border-block-start: 1px solid rgba(255, 255, 255, 0.06); margin-block-start: var(--space-xl); padding-block-start: var(--space-xl); }
.foyer-section:first-of-type { border: 0; margin-block-start: 0; padding-block-start: 0; }
.foyer-section h3 { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h3); margin-block-end: var(--space-md); }
.foyer-section p { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); margin-block-end: var(--space-md); }
.foyer-support { background: var(--color-bg-elevated); border-radius: var(--radius-md); margin-block-start: var(--space-xl); padding: var(--space-lg); }
.foyer-support h3 { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h4); margin-block-end: var(--space-sm); }
.foyer-support ul { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); list-style: none; margin: 0; padding: 0; }
.foyer-disclaimer { background: rgba(220, 38, 38, 0.08); border-inline-start: 3px solid var(--color-rg-banner); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-normal); margin-block-start: var(--space-lg); padding: var(--space-md); }

/* Contact-form FORM-06 Floating Labels (.armoire) */
.armoire { padding-block: var(--space-xl); }
.armoire-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.armoire-card { background: var(--color-bg-elevated); border-radius: var(--radius-md); margin-inline: auto; max-width: 720px; padding: var(--space-xl); }
.armoire-intro { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); margin-block-end: var(--space-lg); }
.armoire-form { display: flex; flex-direction: column; gap: var(--space-md); }
.armoire-field { position: relative; }
.armoire-input,
.armoire-textarea { background: var(--color-bg); border: var(--border-thin) solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-md); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); padding: var(--space-lg) var(--space-md) var(--space-xs); width: 100%; }
.armoire-input { height: 64px; }
.armoire-textarea { min-height: 140px; resize: vertical; }
.armoire-input:focus, .armoire-textarea:focus { border-color: var(--color-accent); outline: 0; }
.armoire-label { color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--fs-body); inset-block-start: 50%; inset-inline-start: var(--space-md); pointer-events: none; position: absolute; transform: translateY(-50%); transition: top var(--dur-fast) var(--ease-out), font-size var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.armoire-input:focus + .armoire-label,
.armoire-input:not(:placeholder-shown) + .armoire-label,
.armoire-textarea:focus + .armoire-label,
.armoire-textarea:not(:placeholder-shown) + .armoire-label { color: var(--color-accent); font-size: var(--fs-micro); inset-block-start: var(--space-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; transform: translateY(0); }
.armoire-field--textarea .armoire-label { inset-block-start: var(--space-md); transform: none; }
.armoire-submit { background: var(--color-accent); border-radius: var(--radius-pill); color: var(--color-bg); font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); height: 52px; letter-spacing: var(--ls-wide); padding-inline: var(--space-xl); text-transform: uppercase; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.armoire-submit:hover { background: var(--color-accent-pressed); color: var(--color-bg); }
.armoire-success { background: rgba(249, 213, 108, 0.1); border-inline-start: 4px solid var(--color-accent); color: var(--color-text); display: none; margin-block-end: var(--space-md); padding: var(--space-sm) var(--space-md); }
.armoire-success.is-visible { display: block; }

/* Cookie COOK-01 Bottom Floating Pill (.cornice) */
.cornice { background: var(--color-bg-elevated); border: var(--border-thin) solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-md); box-shadow: var(--shadow-md); bottom: var(--space-md); display: none; inset-inline: var(--space-md); margin-inline: auto; max-width: 720px; padding: var(--space-md); position: fixed; z-index: 90; }
.cornice.is-visible { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.cornice-message { color: var(--color-text-muted); flex: 1 1 280px; font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-normal); }
.cornice-actions { display: flex; gap: var(--space-sm); }
.cornice-btn { border-radius: var(--radius-pill); font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); height: 36px; letter-spacing: var(--ls-wide); padding-inline: var(--space-md); text-transform: uppercase; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.cornice-btn--accept { background: var(--color-accent); color: var(--color-bg); }
.cornice-btn--accept:hover { background: var(--color-accent-pressed); color: var(--color-bg); }
.cornice-btn--decline { background: transparent; border: 1px solid var(--color-text); color: var(--color-text); }
.cornice-btn--decline:hover { background: rgba(255, 255, 255, 0.04); color: var(--color-text); }

/* Error ERR-08 Search-Suggestion Style (.canopy) */
.canopy { padding-block: var(--space-xl); text-align: center; }
.canopy-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.canopy-title { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h1); margin-block-end: var(--space-md); }
.canopy-text { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); margin: 0 auto var(--space-lg); max-width: 600px; }
.canopy-btn { background: var(--color-accent); border-radius: var(--radius-pill); color: var(--color-bg); display: inline-block; font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); padding: var(--space-md) var(--space-xl); text-transform: uppercase; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.canopy-btn:hover { background: var(--color-accent-pressed); color: var(--color-bg); }
.canopy-suggestions { background: var(--color-bg-elevated); border-radius: var(--radius-md); margin-block-start: var(--space-xl); padding: var(--space-xl); }
.canopy-suggestions h2 { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h4); margin-block-end: var(--space-md); }
.canopy-suggestions ul { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; list-style: none; margin: 0; padding: 0; }
.canopy-suggestions a { color: var(--color-accent); font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.canopy-suggestions a:hover { color: var(--color-accent-pressed); }

/* Author-byline BYLINE-07 Expertise Tags Block (.gable) */
.gable { padding-block: var(--space-lg); }
.gable-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.gable-card { background: var(--color-bg-elevated); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-inline: auto; max-width: 760px; padding: var(--space-lg); }
.gable-header { align-items: center; display: flex; gap: var(--space-sm); margin-block-end: var(--space-md); }
.gable-portrait { border-radius: var(--radius-circle); flex-shrink: 0; height: 72px; object-fit: cover; object-position: center top; width: 72px; }
.gable-name { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-bold); margin: 0; }
.gable-name a { color: var(--color-text); }
.gable-role { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-small); }
.gable-bio { color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); margin-block-end: var(--space-md); }
.gable-expertise { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-md); }
.gable-tag { background: var(--color-primary); border-radius: var(--radius-pill); color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); padding: var(--space-2xs) var(--space-sm); text-transform: uppercase; }
.gable-link { color: var(--color-accent); font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-decoration: underline; text-transform: uppercase; }

/* Author-card AUTH-07 Quote-Style w/ Portrait (.strip) */
.strip { padding-block: var(--space-xl); }
.strip-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.strip-card { background: var(--color-bg-elevated); border-inline-start: 4px solid var(--color-accent); border-radius: var(--radius-md); display: grid; gap: var(--space-lg); grid-template-columns: 100px 1fr; padding: var(--space-xl); }
.strip-portrait { border-radius: var(--radius-circle); height: 100px; object-fit: cover; width: 100px; }
.strip-quote-mark { color: var(--color-accent); font-family: var(--font-display); font-size: var(--fs-h1); line-height: 0.5; }
.strip-bio { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h5); font-style: italic; line-height: var(--lh-normal); margin-block: var(--space-sm) var(--space-md); }
.strip-attribution { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-small); letter-spacing: var(--ls-wide); }
@media (max-width: 488px) { .strip-card { grid-template-columns: 1fr; } }

/* Footer FOOT-03 Massive Centered (.cloister) */
.cloister { background: var(--color-bg); padding-block: var(--space-xl); }
.cloister-inner { align-items: center; display: flex; flex-direction: column; gap: var(--space-lg); margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); text-align: center; }
.cloister-logo img { height: 88px; width: auto; }
.cloister-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: center; list-style: none; margin: 0; padding: 0; }
.cloister-nav a { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.cloister-nav a:hover { color: var(--color-accent); }
.cloister-tagline { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-loose); max-width: 480px; }
.cloister-legal-row { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
.cloister-legal-row a { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.cloister-disclaimer { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-micro); line-height: var(--lh-loose); max-width: 720px; }
.cloister-copyright { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-micro); }