/* ==========================================================================
   Cbet Casino Canada — frame-prime.css
   Design system: TYPO-03 · SPACE-02 · CONT-05 · GEO-10 · BP-05 · NAME-02
   Token names are site-local (short-family / stepped) — see RANDOM_SPEC.
   Rule order: by-component.
   ========================================================================== */

/* --- Self-hosted fonts (Inter display, Roboto body) fontsource --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fontes/inter-vf-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fontes/roboto-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fontes/roboto-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fontes/roboto-latin-700-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   :root — design tokens (site-local names)
   -------------------------------------------------------------------------- */
:root {
  /* colours (colors.X.final, after ±2% shift) */
  --tone-main: #2bc579;
  --tone-highlight: #ffffff;
  --tone-key-active: #e9e9e9;
  --tone-surface: #0f1624;
  --tone-above: #18223a;
  --tone-body: #ffffff;
  --tone-dim: #bebebe;
  --tone-border: rgba(255, 255, 255, 0.12);
  --tone-line-strong: rgba(255, 255, 255, 0.22);
  --tone-grad-1: #ffffff;
  --tone-grad-2: #ffffff;
  --tone-notice: #c0392b;

  /* typography */
  --typ-banner: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --typ-reading: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ts-title: clamp(29px, 4.6vw, 42px);
  --ts-head: clamp(23px, 3.2vw, 31px);
  --ts-display-3: clamp(18px, 2vw, 21px);
  --ts-sub-2: 18px;
  --ts-sm-2: 16px;
  --ts-xs-2: 13px;
  --ts-copy: 16px;
  --ts-fine: 14px;
  --ts-micro: 12px;
  --ld-close: 1.16;
  --ld-even: 1.55;
  --ld-open: 1.78;
  --wt-base: 400;
  --wt-semi: 600;
  --wt-strong: 800;
  --ls-narrow: -0.02em;
  --ls-normal: 0;
  --ls-open: 0.08em;

  /* spacing (SPACE-02) */
  --sp-step-0: 4px;
  --sp-step-1: 8px;
  --sp-step-2: 12px;
  --sp-step-3: 16px;
  --sp-step-4: 24px;
  --sp-step-5: 32px;
  --sp-step-6: 48px;
  --sp-step-7: 64px;

  /* geometry (GEO-10) */
  --crn-step-0: 2px;
  --crn-step-1: 4px;
  --crn-step-2: 6px;
  --crn-step-3: 10px;
  --crn-step-4: 14px;
  --crn-step-5: 18px;
  --crn-step-6: 24px;
  --crn-step-7: 32px;
  --crn-capsule: 999px;
  --crn-dot: 50%;
  --bd-fine: 1px;
  --bd-even: 2px;
  --bd-heavy: 3px;

  /* shadows */
  --dep-step-0: 0 1px 1px rgba(0, 0, 0, 0.2);
  --dep-step-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --dep-step-2: 0 2px 6px rgba(0, 0, 0, 0.3);
  --dep-step-3: 0 6px 16px rgba(0, 0, 0, 0.35);
  --dep-step-4: 0 12px 32px rgba(0, 0, 0, 0.42);
  --dep-step-5: 0 18px 46px rgba(0, 0, 0, 0.48);
  --dep-step-6: 0 24px 60px rgba(0, 0, 0, 0.5);
  --dep-step-7: 0 32px 80px rgba(0, 0, 0, 0.55);

  /* motion (exact numbers from spec — do not round) */
  --tm-swift: 193ms;
  --tm-regular: 380ms;
  --tm-long: 579ms;
  --bz-exit: cubic-bezier(0.32, 0.66, 0.36, 1);
  --bz-even: cubic-bezier(0.53, 0.07, 0.47, 0.93);
  --bz-spring: cubic-bezier(0.36, 0.9, 0.66, 1.05);

  /* containers (CONT-05) */
  --shl-page: 1040px;
  --shl-column: 1040px;
  --shl-inset-desktop: 24px;
  --shl-inset-tablet: 20px;
  --shl-padding-mobile: 16px;

  /* header */
  --bar-h-lg: 88px;
  --bar-h-sm: 64px;
  --rg-height: 40px;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body { overflow-x: clip; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--typ-reading);
  font-size: var(--ts-copy);
  line-height: var(--ld-even);
  color: var(--tone-body);
  background: var(--tone-surface);
  padding-top: var(--bar-h-lg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--typ-banner);
  line-height: var(--ld-close);
  margin: 0;
  overflow-wrap: anywhere;
}

p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; }

:focus-visible {
  outline: 2px solid var(--tone-main);
  outline-offset: 2px;
}

/* Skip link (off-screen until focused) */
.skiplink {
  position: fixed;
  left: var(--sp-step-3);
  top: -200px;
  z-index: 200;
  padding: var(--sp-step-2) var(--sp-step-4);
  background: var(--tone-main);
  color: var(--tone-surface);
  border-radius: var(--crn-step-2);
  font-weight: var(--wt-semi);
  text-decoration: none;
}
.skiplink:not(:focus) { top: -200px !important; }
.skiplink:focus { top: var(--sp-step-3); }

.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;
}

/* shared inner width — SAME max-width across every section (verify-widths) */
.arabesque-core,
.parapet-core,
.threshold-core,
.nave-core,
.parquet-core,
.mantle-core,
.crown-core,
.banner-core,
.hallway-core,
.beacon-core,
.antechamber-core,
.slab-core,
.spandrel-core,
.turret-core,
.barrow-core,
.filigree-core,
.grotto-core,
.rg-core {
  width: 100%;
  max-width: calc(var(--shl-page) + 2 * var(--shl-inset-desktop));
  margin-inline: auto;
  padding-inline: var(--shl-inset-desktop);
}

.section-pad { padding-block: var(--sp-step-6); }

/* content image row */
.shotrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-step-4);
  margin: var(--sp-step-5) auto 0;
  max-width: var(--shl-column);
}
.shotrow figure { margin: 0; }
.shotrow img {
  width: 100%;
  height: auto;
  max-height: 56vh;
  object-fit: cover;
  object-position: center;
  border-radius: var(--crn-step-4);
  border: var(--bd-fine) solid var(--tone-border);
}

/* near-top / mid offer button row */
.offer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-step-3);
  align-items: center;
  margin-top: var(--sp-step-4);
}

/* quiet header button (offer-free pages) */
.arabesque-quiet {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--tone-body);
  border: var(--bd-fine) solid var(--tone-line-strong);
  border-radius: var(--crn-capsule);
  padding: var(--sp-step-2) var(--sp-step-4);
  font-family: var(--typ-banner);
  font-size: 14px;
  font-weight: var(--wt-semi);
  transition: color var(--tm-swift) var(--bz-exit), border-color var(--tm-swift) var(--bz-exit);
}
.arabesque-quiet:hover { color: var(--tone-main); border-color: var(--tone-main); }

/* --------------------------------------------------------------------------
   RG banner (RG-03 — content-width band, in flow below sticky header)
   -------------------------------------------------------------------------- */
.rg-band {
  background: transparent;
  padding-top: var(--sp-step-3);
}
.rg-core { }
.rg-note {
  background: var(--tone-notice);
  color: #ffffff;
  border-radius: var(--crn-step-3);
  padding: var(--sp-step-2) var(--sp-step-4);
  font-size: var(--ts-fine);
  line-height: var(--ld-even);
  text-align: center;
}
.rg-note a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: var(--wt-semi);
}

/* --------------------------------------------------------------------------
   HEADER — HEAD-RIGHT (logo left, nav pushed right, one outline offer button)
   sticky_strategy STICKY-01 (fixed-top)
   -------------------------------------------------------------------------- */
.arabesque {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 88px;
  background: var(--tone-surface);
  border-bottom: var(--bd-fine) solid var(--tone-border);
}
.arabesque-core {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-step-4);
}
.arabesque-brand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.arabesque-brand img,
.arabesque-shot {
  flex-shrink: 0;
  height: 52px;
  width: auto;
}
.arabesque-tap {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--sp-step-1);
  background: rgba(43, 197, 121, 0.12);
  color: var(--tone-body);
  border: var(--bd-fine) solid var(--tone-border);
  border-radius: var(--crn-step-2);
  padding: var(--sp-step-1) var(--sp-step-3);
  font-family: var(--typ-banner);
  font-size: var(--ts-fine);
  font-weight: var(--wt-semi);
  cursor: pointer;
}
.arabesque-index {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}
.arabesque-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-step-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.arabesque-one {
  position: relative;
  display: flex;
  align-items: center;
}
.arabesque-one + .arabesque-one::before {
  content: '';
  position: absolute;
  left: calc(var(--sp-step-3) / -2);
  width: 3px; height: 3px;
  border-radius: var(--crn-dot);
  background: var(--tone-dim);
  opacity: 0.6;
}
.arabesque-route {
  white-space: nowrap;
  text-decoration: none;
  color: var(--tone-body);
  font-family: var(--typ-banner);
  font-size: 14px;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.01em;
  padding-block: var(--sp-step-1);
  transition: color var(--tm-swift) var(--bz-exit);
}
.arabesque-route:hover { color: var(--tone-main); }
.arabesque-route[aria-current='page'] { color: var(--tone-main); }
.arabesque-acts {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-step-2);
}

/* priority+ "More" overflow */
.arabesque-more { position: relative; }
.arabesque-more-tap {
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: var(--bd-fine) solid var(--tone-border);
  color: var(--tone-body);
  font-family: var(--typ-banner);
  font-size: 14px;
  font-weight: 600;
  font-variant: small-caps;
  border-radius: var(--crn-step-2);
  padding: var(--sp-step-0) var(--sp-step-2);
}
.arabesque-more-tap:hover { color: var(--tone-main); }
.arabesque-more-pane {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-step-2));
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-step-1);
  list-style: none;
  margin: 0;
  padding: var(--sp-step-2);
  background: var(--tone-above);
  border: var(--bd-fine) solid var(--tone-border);
  border-radius: var(--crn-step-3);
  box-shadow: var(--dep-step-3);
  z-index: 30;
}
.arabesque-more-pane[hidden] { display: none; }
.arabesque-more-pane .arabesque-one::before { display: none; }
.arabesque-more-pane .arabesque-route { font-variant: normal; }

/* Mobile drawer (flat full list) */
.arabesque-tray {
  display: none;
  position: fixed;
  top: var(--bar-h-lg);
  left: 0; right: 0;
  bottom: 0;
  background: var(--tone-surface);
  border-top: var(--bd-fine) solid var(--tone-border);
  padding: var(--sp-step-4);
  overflow-y: auto;
  z-index: 99;
}
.arabesque-tray.is-open { display: block; }
.arabesque-tray-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-step-1);
  list-style: none;
  padding: 0;
  margin: 0;
}
.arabesque-tray-list a {
  display: block;
  text-decoration: none;
  color: var(--tone-body);
  font-family: var(--typ-banner);
  font-size: 18px;
  font-weight: 600;
  padding: var(--sp-step-3) var(--sp-step-2);
  border-radius: var(--crn-step-2);
}
.arabesque-tray-list a[aria-current='page'] { color: var(--tone-main); }
.arabesque-tray-list a:hover { background: rgba(255, 255, 255, 0.04); }
.arabesque-tray-invite { margin-top: var(--sp-step-4); }

/* --------------------------------------------------------------------------
   HERO — HERO-09 (Two-Column Card Stack)
   -------------------------------------------------------------------------- */
.threshold { padding-block: var(--sp-step-6); }
.threshold-core {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--sp-step-6);
  align-items: center;
}
.threshold-stuff {
  display: flex;
  flex-direction: column;
  gap: var(--sp-step-4);
}
.threshold-title {
  font-size: var(--ts-title);
  font-weight: var(--wt-strong);
  letter-spacing: var(--ls-narrow);
}
.threshold-kicker {
  font-size: var(--ts-sub-2);
  line-height: var(--ld-open);
  color: var(--tone-dim);
  max-width: var(--shl-column);
}
.threshold-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-step-3);
  align-items: center;
}
.threshold-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-step-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.threshold-one {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-step-3);
  align-items: start;
  padding: var(--sp-step-4);
  background: var(--tone-above);
  border: var(--bd-fine) solid var(--tone-border);
  border-radius: var(--crn-step-4);
}
.threshold-num {
  font-family: var(--typ-banner);
  font-size: var(--ts-head);
  font-weight: var(--wt-strong);
  color: var(--tone-main);
  line-height: 1;
}
.threshold-head {
  font-family: var(--typ-banner);
  font-size: var(--ts-sub-2);
  font-weight: var(--wt-semi);
  color: var(--tone-body);
}
.threshold-note {
  grid-column: 2;
  color: var(--tone-dim);
  font-size: var(--ts-fine);
  line-height: var(--ld-even);
  margin-top: var(--sp-step-1);
}

/* --------------------------------------------------------------------------
   PAGE HEADER — PHEAD-08 (Tag Cluster + Title)
   -------------------------------------------------------------------------- */
.nave { padding-block: var(--sp-step-6) var(--sp-step-4); }
.nave-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-step-2);
  margin-bottom: var(--sp-step-4);
  padding: 0;
  list-style: none;
}
.nave-badge {
  display: inline-block;
  background: var(--tone-main);
  color: var(--tone-surface);
  border-radius: var(--crn-capsule);
  padding: var(--sp-step-0) var(--sp-step-3);
  font-family: var(--typ-banner);
  font-size: var(--ts-micro);
  font-weight: var(--wt-semi);
  text-transform: uppercase;
  letter-spacing: var(--ls-open);
}
.nave-title {
  font-size: var(--ts-title);
  font-weight: var(--wt-strong);
  letter-spacing: var(--ls-narrow);
}
.nave-note {
  margin-top: var(--sp-step-3);
  color: var(--tone-dim);
  font-size: var(--ts-sub-2);
  line-height: var(--ld-open);
  max-width: var(--shl-column);
}

/* --------------------------------------------------------------------------
   PROSE — PROSE-18 (framed heading); knobs: headScale/normal, headWeight/normal,
   boxWidth/text, density/roomy, align/start, lineWeight/hair
   -------------------------------------------------------------------------- */
.hallway { padding-block: var(--sp-step-6); }
.hallway-core { }
.hallway-head {
  display: block;
  width: fit-content;               /* boxWidth: text */
  max-width: 100%;
  font-size: var(--ts-head);        /* headScale: normal */
  font-weight: var(--wt-semi);      /* headWeight: normal */
  text-align: start;                /* align: start */
  border: var(--bd-fine) solid var(--tone-line-strong);  /* lineWeight: hair */
  border-radius: var(--crn-step-3);
  padding: var(--sp-step-3) var(--sp-step-4);
  margin-bottom: var(--sp-step-5);  /* density: roomy */
}
.hallway-note {
  max-width: var(--shl-column);
  color: var(--tone-body);
  font-size: var(--ts-copy);
  line-height: var(--ld-open);       /* density: roomy */
  margin-bottom: var(--sp-step-4);
}
.hallway-note:last-child { margin-bottom: 0; }
.hallway-note a {
  color: var(--tone-main);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--tm-swift) var(--bz-exit);
}
.hallway-note a:hover { text-decoration-thickness: 3px; }
.hallway-note strong { font-weight: var(--wt-strong); color: var(--tone-body); }
.hallway-list {
  max-width: var(--shl-column);
  margin: 0 0 var(--sp-step-4);
  padding-left: var(--sp-step-5);
  color: var(--tone-body);
  line-height: var(--ld-open);
}
.hallway-list li { margin-bottom: var(--sp-step-1); }

/* --------------------------------------------------------------------------
   ITEMS GRID — GRID-03 (Two-Column Asymmetric Widths) + meaning-matched icons
   -------------------------------------------------------------------------- */
.parquet { padding-block: var(--sp-step-6); }
.parquet-title {
  font-size: var(--ts-head);
  font-weight: var(--wt-strong);
  margin-bottom: var(--sp-step-5);
}
.parquet-list {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-step-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.parquet-one:nth-child(4n + 3) { grid-column: 1 / 2; }
.parquet-one:nth-child(4n + 4) { grid-column: 2 / 3; }
.parquet-list { grid-auto-flow: row; }
.parquet-one {
  display: flex;
  flex-direction: column;
  gap: var(--sp-step-2);
  padding: var(--sp-step-4);
  background: var(--tone-above);
  border: var(--bd-fine) solid var(--tone-border);
  border-radius: var(--crn-step-4);
  transition: transform var(--tm-regular) var(--bz-exit);
}
.parquet-one:hover { transform: translateY(-7px); }
.parquet-shot {
  width: 32px; height: 32px;
  color: var(--tone-main);
  flex-shrink: 0;
}
.parquet-shot svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.parquet-head {
  font-family: var(--typ-banner);
  font-size: var(--ts-display-3);
  font-weight: var(--wt-semi);
  color: var(--tone-body);
}
.parquet-note {
  color: var(--tone-dim);
  font-size: var(--ts-fine);
  line-height: var(--ld-even);
}

/* asymmetric row rhythm: even rows flip the wide column */
.parquet-list > .parquet-one:nth-child(4n + 3) { order: 0; }

/* --------------------------------------------------------------------------
   REVIEWS — REV-04 (Featured + List)
   -------------------------------------------------------------------------- */
.crown { padding-block: var(--sp-step-6); }
.crown-title {
  font-size: var(--ts-head);
  font-weight: var(--wt-strong);
  margin-bottom: var(--sp-step-5);
}
.crown-lead {
  padding: var(--sp-step-6);
  background: var(--tone-above);
  border: var(--bd-fine) solid var(--tone-border);
  border-radius: var(--crn-step-5);
  margin-bottom: var(--sp-step-5);
}
.crown-lead .crown-say {
  font-size: var(--ts-sub-2);
  font-style: italic;
  line-height: var(--ld-open);
  color: var(--tone-body);
  margin-bottom: var(--sp-step-3);
}
.crown-stars { color: var(--tone-main); font-size: 22px; letter-spacing: 2px; }
.crown-byname {
  display: block;
  margin-top: var(--sp-step-2);
  font-style: normal;
  font-weight: var(--wt-semi);
  color: var(--tone-dim);
  font-size: var(--ts-fine);
}
.crown-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-step-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.crown-one {
  padding: var(--sp-step-4);
  border-top: var(--bd-even) solid var(--tone-border);
}
.crown-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-step-2);
  margin-bottom: var(--sp-step-2);
}
.crown-one .crown-byname { margin: 0; }
.crown-one .crown-stars { font-size: 16px; }
.crown-note {
  color: var(--tone-dim);
  font-size: var(--ts-fine);
  line-height: var(--ld-even);
}

/* --------------------------------------------------------------------------
   FAQ — FAQ-06 (Anchored Linked List)
   -------------------------------------------------------------------------- */
.mantle { padding-block: var(--sp-step-6); }
.mantle-title {
  font-size: var(--ts-head);
  font-weight: var(--wt-strong);
  margin-bottom: var(--sp-step-5);
}
.mantle-toc {
  padding: var(--sp-step-4);
  background: var(--tone-above);
  border: var(--bd-fine) solid var(--tone-border);
  border-radius: var(--crn-step-4);
  margin-bottom: var(--sp-step-6);
}
.mantle-toc ol {
  margin: 0;
  padding-left: var(--sp-step-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-step-1);
}
.mantle-toc a {
  color: var(--tone-dim);
  text-decoration: none;
  transition: color var(--tm-swift) var(--bz-exit);
}
.mantle-toc a:hover { color: var(--tone-body); }
.mantle-list { margin: 0; }
.mantle-term {
  font-family: var(--typ-banner);
  font-size: var(--ts-display-3);
  font-weight: var(--wt-semi);
  color: var(--tone-body);
  scroll-margin-top: calc(var(--bar-h-lg) + var(--sp-step-4));
  padding-top: var(--sp-step-4);
  border-top: var(--bd-fine) solid var(--tone-border);
}
.mantle-list > .mantle-term:first-of-type { border-top: 0; padding-top: 0; }
.mantle-say {
  margin: var(--sp-step-2) 0 var(--sp-step-4);
  color: var(--tone-dim);
  line-height: var(--ld-open);
}

/* --------------------------------------------------------------------------
   TABLE — TABLE-01 (Striped Rows Classic)
   -------------------------------------------------------------------------- */
.beacon { padding-block: var(--sp-step-6); }
.beacon-title {
  font-size: var(--ts-head);
  font-weight: var(--wt-strong);
  margin-bottom: var(--sp-step-5);
}
.beacon-scroll {
  overflow-x: auto;
  border-radius: var(--crn-step-4);
  border: var(--bd-fine) solid var(--tone-border);
}
.beacon table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background: var(--tone-above);
}
.beacon thead { background: var(--tone-main); }
.beacon th {
  text-align: left;
  color: var(--tone-surface);
  font-family: var(--typ-banner);
  font-size: var(--ts-xs-2);
  font-weight: var(--wt-strong);
  text-transform: uppercase;
  letter-spacing: var(--ls-open);
  padding: var(--sp-step-3) var(--sp-step-4);
}
.beacon td {
  padding: var(--sp-step-3) var(--sp-step-4);
  color: var(--tone-dim);
  font-size: var(--ts-fine);
  border-top: var(--bd-fine) solid var(--tone-border);
}
.beacon td:first-child { color: var(--tone-body); font-weight: var(--wt-semi); }
.beacon tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

/* --------------------------------------------------------------------------
   CTA BLOCK — CTA-08 (Inverted Dark Block, full-bleed)
   -------------------------------------------------------------------------- */
.banner {
  margin-block: var(--sp-step-6);
  padding-block: var(--sp-step-6);
  background: var(--tone-main);
}
.banner-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-step-4);
}
.banner-title {
  font-size: var(--ts-head);
  font-weight: var(--wt-strong);
  color: var(--tone-surface);
  text-transform: uppercase;
  letter-spacing: var(--ls-narrow);
}
.banner-note {
  color: var(--tone-surface);
  opacity: 0.82;
  font-size: var(--ts-sub-2);
  line-height: var(--ld-even);
  max-width: var(--shl-column);
}

/* --------------------------------------------------------------------------
   INLINE CTA — INLINE-CTA-07 (Icon-Headlined Centered Block)
   -------------------------------------------------------------------------- */
.filigree { padding-block: var(--sp-step-5); }
.filigree-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-step-3);
  max-width: 620px;
  margin-inline: auto;
  padding: var(--sp-step-6) var(--sp-step-4);
  background: var(--tone-above);
  border: var(--bd-fine) solid var(--tone-border);
  border-radius: var(--crn-step-5);
}
.filigree-icon { font-size: var(--ts-title); color: var(--tone-main); line-height: 1; }
.filigree-head { font-size: var(--ts-display-3); font-weight: var(--wt-strong); color: var(--tone-body); }
.filigree-note { color: var(--tone-dim); font-size: var(--ts-fine); line-height: var(--ld-even); }

/* --------------------------------------------------------------------------
   LEGAL — LEGAL-05 (Definition List Style)
   -------------------------------------------------------------------------- */
.antechamber { padding-block: var(--sp-step-6); }
.antechamber-intro {
  max-width: var(--shl-column);
  color: var(--tone-dim);
  font-size: var(--ts-sub-2);
  line-height: var(--ld-open);
  margin-bottom: var(--sp-step-6);
}
.antechamber-list { margin: 0; max-width: var(--shl-column); }
.antechamber-term {
  font-family: var(--typ-banner);
  font-size: var(--ts-sub-2);
  font-weight: var(--wt-strong);
  color: var(--tone-body);
  margin-top: var(--sp-step-6);
  padding-top: var(--sp-step-2);
}
.antechamber-term::before {
  content: '';
  display: block;
  width: 30px; height: 2px;
  background: var(--tone-main);
  margin-bottom: var(--sp-step-2);
}
.antechamber-def {
  margin: var(--sp-step-2) 0 0;
  color: var(--tone-dim);
  line-height: var(--ld-open);
}
.antechamber-def p { margin-bottom: var(--sp-step-3); }
.antechamber-def p:last-child { margin-bottom: 0; }
.antechamber-disclaimer {
  max-width: var(--shl-column);
  margin-top: var(--sp-step-6);
  padding-top: var(--sp-step-4);
  border-top: var(--bd-fine) solid var(--tone-border);
  color: var(--tone-dim);
  font-size: var(--ts-fine);
  line-height: var(--ld-even);
}

/* --------------------------------------------------------------------------
   CONTACT FORM — FORM-08 (Asymmetric Wide Submit)
   -------------------------------------------------------------------------- */
.slab { padding-block: var(--sp-step-6); }
.slab-box { max-width: 760px; margin-inline: auto; }
.slab-intro {
  color: var(--tone-dim);
  font-size: var(--ts-sub-2);
  line-height: var(--ld-open);
  margin-bottom: var(--sp-step-5);
}
.slab-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-step-4);
  padding: var(--sp-step-5);
  background: var(--tone-above);
  border: var(--bd-fine) solid var(--tone-border);
  border-radius: var(--crn-step-4);
}
.slab-group { display: flex; flex-direction: column; gap: var(--sp-step-1); }
.slab-badge {
  font-family: var(--typ-banner);
  font-size: var(--ts-fine);
  font-weight: var(--wt-semi);
  color: var(--tone-body);
}
.slab-slot {
  font-family: var(--typ-reading);
  font-size: var(--ts-copy);
  color: var(--tone-body);
  background: var(--tone-surface);
  border: var(--bd-fine) solid var(--tone-line-strong);
  border-radius: var(--crn-step-2);
  padding: var(--sp-step-3);
}
.slab-slot:focus { outline: 2px solid var(--tone-main); outline-offset: 1px; }
textarea.slab-slot { min-height: 150px; resize: vertical; }
.slab-submit {
  width: 100%;
  min-height: 68px;
  border: 0;
  cursor: pointer;
  background: var(--tone-highlight);
  color: var(--tone-surface);
  font-family: var(--typ-banner);
  font-size: var(--ts-sub-2);
  font-weight: var(--wt-strong);
  text-transform: uppercase;
  letter-spacing: var(--ls-open);
  border-radius: var(--crn-step-3);
  transition: background var(--tm-regular) var(--bz-exit);
}
.slab-submit:hover { background: var(--tone-key-active); color: var(--tone-surface); }
.slab-say {
  padding: var(--sp-step-4);
  background: rgba(43, 197, 121, 0.12);
  border: var(--bd-fine) solid var(--tone-main);
  border-radius: var(--crn-step-3);
  color: var(--tone-body);
}
.slab-say[hidden] { display: none; }

/* --------------------------------------------------------------------------
   AUTHOR BYLINE — BYLINE-07 (Expertise Tags Block)
   -------------------------------------------------------------------------- */
.grotto { padding-block: var(--sp-step-6); }
.grotto-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-step-3);
  padding: var(--sp-step-5);
  background: var(--tone-above);
  border: var(--bd-fine) solid var(--tone-border);
  border-radius: var(--crn-step-4);
  box-shadow: var(--dep-step-2);
}
.grotto-tier { display: flex; align-items: center; gap: var(--sp-step-3); }
.grotto-portrait {
  width: 72px; height: 72px;
  border-radius: var(--crn-dot);
  object-fit: cover;
  object-position: center 20%;
  background: var(--tone-above);
  border: var(--bd-even) solid var(--tone-border);
  box-sizing: content-box;
  flex-shrink: 0;
}
.grotto-byname { font-family: var(--typ-banner); font-size: var(--ts-sub-2); font-weight: var(--wt-strong); }
.grotto-byname a { color: var(--tone-body); text-decoration: none; }
.grotto-byname a:hover { color: var(--tone-main); }
.grotto-credit { color: var(--tone-dim); font-size: var(--ts-fine); }
.grotto-note { color: var(--tone-dim); line-height: var(--ld-open); }
.grotto-tags { display: flex; flex-wrap: wrap; gap: var(--sp-step-2); }
.grotto-badge {
  font-size: var(--ts-micro);
  color: var(--tone-body);
  background: rgba(43, 197, 121, 0.14);
  border: var(--bd-fine) solid var(--tone-main);
  border-radius: var(--crn-capsule);
  padding: var(--sp-step-0) var(--sp-step-3);
}
.grotto-route {
  align-self: flex-start;
  color: var(--tone-main);
  font-weight: var(--wt-semi);
  text-decoration: none;
}
.grotto-route:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   AUTHOR CARD — AUTH-08 (Minimal Avatar + Name) + articles list
   -------------------------------------------------------------------------- */
.spandrel { padding-block: var(--sp-step-6); }
.spandrel-tile {
  display: flex;
  gap: var(--sp-step-5);
  align-items: flex-start;
  padding: var(--sp-step-5);
  background: var(--tone-above);
  border: var(--bd-fine) solid var(--tone-border);
  border-radius: var(--crn-step-5);
}
.spandrel-portrait {
  width: 140px; height: 140px;
  border-radius: var(--crn-step-5);
  object-fit: cover;
  object-position: center 20%;
  flex-shrink: 0;
}
.spandrel-stuff { display: flex; flex-direction: column; gap: var(--sp-step-2); }
.spandrel-byname { font-family: var(--typ-banner); font-size: var(--ts-head); font-weight: var(--wt-strong); }
.spandrel-credit { color: var(--tone-main); font-weight: var(--wt-semi); }
.spandrel-note { color: var(--tone-dim); line-height: var(--ld-open); }
.spandrel-tags { display: flex; flex-wrap: wrap; gap: var(--sp-step-2); margin-top: var(--sp-step-2); }
.spandrel-badge {
  font-size: var(--ts-micro);
  color: var(--tone-body);
  background: rgba(43, 197, 121, 0.14);
  border: var(--bd-fine) solid var(--tone-main);
  border-radius: var(--crn-capsule);
  padding: var(--sp-step-0) var(--sp-step-3);
}
.spandrel-articles { margin-top: var(--sp-step-6); }
.spandrel-articles-head {
  font-size: var(--ts-display-3);
  font-weight: var(--wt-strong);
  margin-bottom: var(--sp-step-4);
}
.spandrel-articles-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-step-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.spandrel-articles-one a {
  color: var(--tone-body);
  text-decoration: none;
  border-bottom: var(--bd-fine) solid var(--tone-border);
  display: block;
  padding-block: var(--sp-step-2);
  transition: color var(--tm-swift) var(--bz-exit);
}
.spandrel-articles-one a:hover { color: var(--tone-main); }

/* --------------------------------------------------------------------------
   ERROR — ERR-02 (Split Editorial)
   -------------------------------------------------------------------------- */
.barrow { padding-block: var(--sp-step-7); }
.barrow-core {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-step-6);
  align-items: center;
}
.barrow-stuff { display: flex; flex-direction: column; gap: var(--sp-step-4); align-items: flex-start; }
.barrow-title { font-size: var(--ts-title); font-weight: var(--wt-strong); }
.barrow-note { color: var(--tone-dim); line-height: var(--ld-open); }
.barrow-mark {
  font-family: var(--typ-banner);
  font-weight: var(--wt-strong);
  font-size: clamp(120px, 24vw, 260px);
  line-height: 0.9;
  background: linear-gradient(135deg, var(--tone-main), var(--tone-highlight));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  justify-self: end;
}
.barrow-route {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--sp-step-5);
  background: var(--tone-main);
  color: var(--tone-surface);
  font-family: var(--typ-banner);
  font-weight: var(--wt-strong);
  border-radius: var(--crn-capsule);
  text-decoration: none;
  transition: background var(--tm-regular) var(--bz-exit);
}
.barrow-route:hover { background: #26b06d; color: var(--tone-surface); }

/* --------------------------------------------------------------------------
   COOKIE — COOK-07 (Discrete Toast)
   -------------------------------------------------------------------------- */
.turret {
  position: fixed;
  right: var(--sp-step-4);
  bottom: var(--sp-step-4);
  max-width: 340px;
  z-index: 90;
  background: var(--tone-above);
  border-left: var(--bd-heavy) solid var(--tone-main);
  border-radius: var(--crn-step-2);
  padding: var(--sp-step-4);
  box-shadow: var(--dep-step-3);
  transition: opacity var(--tm-regular) var(--bz-exit), transform var(--tm-regular) var(--bz-exit);
}
.turret[hidden] { display: none; }
.turret.is-hiding { opacity: 0; transform: translateY(20px); pointer-events: none; }
.turret-say { color: var(--tone-body); font-size: var(--ts-fine); line-height: var(--ld-even); margin-bottom: var(--sp-step-3); }
.turret-acts { display: flex; gap: var(--sp-step-2); }
.turret-allow, .turret-later {
  cursor: pointer;
  font-family: var(--typ-banner);
  font-size: var(--ts-fine);
  font-weight: var(--wt-semi);
  border-radius: var(--crn-step-2);
  padding: var(--sp-step-1) var(--sp-step-3);
  border: var(--bd-fine) solid var(--tone-border);
}
.turret-allow { background: var(--tone-main); color: var(--tone-surface); border-color: var(--tone-main); }
.turret-later { background: transparent; color: var(--tone-body); }

/* --------------------------------------------------------------------------
   FOOTER — FOOT-02 (Two-Row Brand + Nav)
   -------------------------------------------------------------------------- */
.parapet {
  background: var(--tone-surface);
  border-top: var(--bd-fine) solid var(--tone-line-strong);
  padding-block: var(--sp-step-6);
}
.parapet-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-step-4);
  flex-wrap: wrap;
}
.parapet-tier--top { padding-bottom: var(--sp-step-4); }
.parapet-tier--bottom {
  margin-top: var(--sp-step-4);
  padding-top: var(--sp-step-4);
  border-top: var(--bd-fine) solid var(--tone-border);
}
.parapet-brand img { height: 48px; width: auto; }
.parapet-index ul,
.parapet-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-step-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.parapet-route {
  color: var(--tone-dim);
  text-decoration: none;
  font-size: var(--ts-fine);
  transition: color var(--tm-swift) var(--bz-exit);
}
.parapet-route:hover { color: var(--tone-body); }
.parapet-copy { color: var(--tone-dim); font-size: var(--ts-fine); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .arabesque-index { display: none; }
  .arabesque-acts { display: none; }
  .arabesque-tap { display: inline-flex; }
}

@media (min-width: 1081px) {
  .arabesque-tray { display: none !important; }
}

@media (max-width: 900px) {
  .threshold-core { grid-template-columns: 1fr; gap: var(--sp-step-5); }
  .barrow-core { grid-template-columns: 1fr; }
  .barrow-mark { justify-self: start; }
  .crown-list { grid-template-columns: 1fr; }
  .parquet-list { grid-template-columns: 1fr; }
  .parquet-one:nth-child(4n + 3),
  .parquet-one:nth-child(4n + 4) { grid-column: auto; }
  .spandrel-tile { flex-direction: column; }
}

@media (max-width: 720px) {
  :root { --shl-inset-desktop: var(--shl-padding-mobile); }
  body { padding-top: var(--bar-h-sm); }
  .arabesque { height: var(--bar-h-sm); }
  .arabesque-tray { top: var(--bar-h-sm); }
  .arabesque-brand img, .arabesque-shot { height: 44px; }
  .nave-title, .threshold-title, .barrow-title { font-size: clamp(26px, 8vw, 34px); }
  .turret {
    left: var(--sp-step-3);
    right: var(--sp-step-3);
    bottom: var(--sp-step-3);
    max-width: none;
  }
  .parapet-tier--top,
  .parapet-tier--bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .parquet-one:hover { transform: none; }
}
.frieze-hit{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--sp-step-5);min-height:48px;border-radius:var(--crn-capsule);font-weight:var(--wt-strong)}
.frieze-hit{position:relative;
  background:#65A30D;color:#0F1624;text-decoration:none;
  transition:background 0.16s ease-in-out;}
.frieze-hit.frieze-hit{color:#0F1624;text-decoration:none;}
.frieze-hit:hover{background:#4D7C0F;color:#FFFFFF;animation:none}
.frieze-hit.frieze-hit:hover{color:#FFFFFF;text-decoration:none}
.frieze-hit:hover::after{animation:none}
.frieze-hit:active{background:#3F6212;color:#FFFFFF}
.frieze-hit:focus-visible{outline:3px solid #0F1624;outline-offset:3px}
@keyframes frieze-tide{0%{box-shadow:0 0 0 0 currentColor;opacity:.55}70%,100%{box-shadow:0 0 0 4px transparent;opacity:0}}
.frieze-hit::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:frieze-tide 2s linear infinite}
@media (prefers-reduced-motion:reduce){.frieze-hit,.frieze-hit::after{animation:none!important;transition:none!important}}
.frieze-slab{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:var(--sp-step-5);background:var(--tone-above);border-radius:var(--crn-step-4);border:var(--bd-fine) solid var(--tone-border);box-shadow:var(--dep-step-2);margin:var(--sp-step-4) 0}
.frieze-line.frieze-line{margin:0;border:0;padding:0;font-weight:600;font-size:0.9em}
.frieze-foot.frieze-foot{margin:0;border:0;padding:0;font-size:0.9em;opacity:.75}

@media (max-width: 1118px) {
  .arabesque-index,
  .arabesque-list,
  .arabesque-route,
  .arabesque-acts { display: none !important; }
  .arabesque-tap { display: flex !important; }
}