/* ════════════════════════════════════════════════════════════
   AL MILLENNIUM — atelier.css
   The Atelier interaction & component system. Loaded on every public
   page (after motion.css) and on the vault-bare auth pages. This is the
   single home for the reusable interface pieces the site leans on
   everywhere, so the whole experience feels like ONE hand drew it.

   Pairs with atelier.js. Everything here is, like motion.css:
     · token-only  — no raw hex, no new fonts (DESIGN_SYSTEM safe)
     · progressive — feature-detected; old engines see a static page
     · reduced-motion-safe — all motion collapses to an instant state
   Composed and slow. Never bounces or springs (DESIGN_SYSTEM §7).

   Prefix: every class is `atl-`; behaviours hook `[data-*]` attributes
   so nothing here collides with the rest of the site.

   ── INDEX ────────────────────────────────────────────────────
     1 · Flanked eyebrow            8 · Sliding tab bar
     2 · Living hairline            9 · Accordion
     3 · Vault-seal button         10 · Tooltip
     4 · Triangle loader + bar     11 · Dispatch toast
     5 · Field (float / underline) 12 · Modal dialog
     6 · Access-code · strength    13 · Stat bar  · Acts timeline
     7 · Segmented control         14 · Ambient layers (embers/dust/stars)
   ════════════════════════════════════════════════════════════ */

:root {
  --atl-ease:  cubic-bezier(0.16, 1, 0.3, 1);   /* long cinematic decel */
  --atl-snap:  cubic-bezier(0.7, 0, 0.3, 1);     /* CTA-fill snap        */
  --atl-z-toast: 600;
  --atl-z-modal: 620;
}

/* ─────────────────────────────────────────────────────
   1 · FLANKED EYEBROW  (DESIGN_SYSTEM §3, formalised)
   The single label vocabulary for every section. Cinzel,
   wide tracking, gold, flanked by short hairline rules. Drop
   `data-decode` (atelier wires it) for the signal-resolve pass.
───────────────────────────────────────────────────── */
.atl-eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
}
.atl-eyebrow::before,
.atl-eyebrow::after {
  content: ''; display: block; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.atl-eyebrow::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }
.atl-eyebrow--solo::before,
.atl-eyebrow--lead::before { display: none; }   /* left-aligned variant: rule only after */
.atl-eyebrow--lead { gap: 16px; }

/* ─────────────────────────────────────────────────────
   2 · LIVING HAIRLINE
   A gold divider that is quietly alive: a faint travelling
   glint rides along it forever. Combine with [data-rule]
   (motion.css) to also have it draw in from the centre on view.
───────────────────────────────────────────────────── */
.atl-hairline {
  position: relative; height: 1px; width: 100%; border: 0;
  background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
  overflow: visible;
}
.atl-hairline::after {
  content: ''; position: absolute; top: 0; left: 0; height: 1px; width: 26%;
  background: linear-gradient(90deg, transparent,
    color-mix(in oklab, var(--gold-bright) 85%, transparent), transparent);
  filter: blur(0.3px);
  animation: atl-glint 7s var(--atl-ease) infinite;
}
@keyframes atl-glint {
  0%   { left: -28%; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { left: 102%; opacity: 0; }
}
.atl-hairline--short { width: 56px; margin: 0 auto; }
.atl-hairline--node::before {           /* a tiny diamond centred on the line */
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px; transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold-light); box-shadow: 0 0 10px var(--gold-light);
}

/* ─────────────────────────────────────────────────────
   3 · VAULT-SEAL BUTTON
   The site's signature action: the triangle sigil "seals" (its
   inner mark draws in) while a gold panel slide-fills the button.
   Built on the slide-fill CTA grammar (DESIGN_SYSTEM §6.6).
───────────────────────────────────────────────────── */
.atl-seal {
  --atl-seal-fill: var(--gold-light);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-bright); text-decoration: none; cursor: pointer;
  padding: 14px 26px; background: transparent;
  border: 1px solid var(--gold-light);
  transition: color 0.4s var(--atl-snap);
}
.atl-seal::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--atl-seal-fill); transform: translateX(-101%);
  transition: transform 0.5s var(--atl-snap);
}
.atl-seal:hover, .atl-seal:focus-visible { color: var(--bg); outline: none; }
.atl-seal:hover::before, .atl-seal:focus-visible::before { transform: translateX(0); }
.atl-seal-sigil { width: 17px; height: 17px; display: block; flex: none; overflow: visible; }
.atl-seal-sigil polygon { fill: none; stroke: currentColor; }
.atl-seal-sigil .atl-seal-out  { stroke-width: 1.6; }
.atl-seal-sigil .atl-seal-in {
  stroke-width: 1; stroke-dasharray: 64; stroke-dashoffset: 64;
  transition: stroke-dashoffset 0.6s var(--atl-ease) 0.05s;
}
.atl-seal:hover .atl-seal-sigil .atl-seal-in,
.atl-seal:focus-visible .atl-seal-sigil .atl-seal-in { stroke-dashoffset: 0; }
.atl-seal--lg { padding: 17px 34px; font-size: 11px; }
.atl-seal--block { display: flex; width: 100%; justify-content: center; }

/* ─────────────────────────────────────────────────────
   4 · TRIANGLE LOADER  +  INDETERMINATE BAR
   Loading states in the brand language: the sigil draws itself
   on a loop, or a slim gold bar sweeps under a working surface.
───────────────────────────────────────────────────── */
.atl-loader { display: inline-block; width: 44px; height: 44px; color: var(--gold-light); }
.atl-loader svg { width: 100%; height: 100%; overflow: visible; }
.atl-loader polygon {
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-dasharray: 96; stroke-dashoffset: 96;
  animation: atl-draw 2.4s var(--atl-ease) infinite;
}
.atl-loader .atl-loader-in { animation-delay: 0.25s; opacity: 0.6; }
@keyframes atl-draw {
  0%   { stroke-dashoffset: 96; opacity: 0.15; }
  45%  { stroke-dashoffset: 0;  opacity: 1; }
  75%  { stroke-dashoffset: 0;  opacity: 1; }
  100% { stroke-dashoffset: -96; opacity: 0.15; }
}
.atl-loader-label {
  display: block; margin-top: 12px; text-align: center;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--text-muted);
}

.atl-bar { position: relative; height: 2px; width: 100%; overflow: hidden;
  background: color-mix(in oklab, var(--gold-dim) 60%, transparent); }
.atl-bar::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent,
    var(--gold-light), var(--gold-bright), var(--gold-light), transparent);
  animation: atl-bar-slide 1.25s var(--atl-ease) infinite;
}
@keyframes atl-bar-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}
/* fixed page-top variant (atelier.js shows it during navigations) */
.atl-bar--page { position: fixed; top: 0; left: 0; right: 0; z-index: 640; height: 2px;
  opacity: 0; transition: opacity 0.25s ease; }
.atl-bar--page.is-on { opacity: 1; }

/* ─────────────────────────────────────────────────────
   5 · FIELD — floating label + animated underline
   One field grammar for every form on the site. Default = the
   label floats; `.atl-field--static` keeps the label fixed above
   (the "underline field"). The underline always sweeps on focus.
───────────────────────────────────────────────────── */
.atl-field { position: relative; display: block; padding-top: 18px; margin-bottom: 6px; }
.atl-field-input,
.atl-field textarea,
.atl-field select {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--border);
  padding: 9px 2px; color: var(--text);
  font-family: var(--font-body); font-size: 14px; line-height: 1.4;
  transition: border-color 0.3s ease;
}
.atl-field textarea { resize: vertical; min-height: 92px; }
.atl-field-input:focus,
.atl-field textarea:focus,
.atl-field select:focus { outline: none; }
.atl-field-input::placeholder { color: transparent; }   /* placeholder is the float trigger */
.atl-field-label {
  position: absolute; left: 2px; top: 27px; pointer-events: none;
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
  transition: top 0.3s var(--atl-ease), font-size 0.3s var(--atl-ease), color 0.3s ease;
}
.atl-field-input:focus ~ .atl-field-label,
.atl-field-input:not(:placeholder-shown) ~ .atl-field-label,
.atl-field--static .atl-field-label {
  top: 0; font-size: 9px; letter-spacing: 0.4em; color: var(--gold);
}
.atl-field-input:focus ~ .atl-field-label { color: var(--gold-light); }
/* the underline that sweeps from the left on focus */
.atl-field-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; }
.atl-field-line::after {
  content: ''; position: absolute; inset: 0; background: var(--gold-light);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--atl-ease);
}
.atl-field-input:focus ~ .atl-field-line::after,
.atl-field textarea:focus ~ .atl-field-line::after,
.atl-field select:focus ~ .atl-field-line::after { transform: scaleX(1); }
.atl-field.has-error .atl-field-input { border-bottom-color: var(--accent-rust); }
.atl-field.has-error .atl-field-label { color: var(--accent-rust); }
.atl-field-hint { display: block; margin-top: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-muted); }
.atl-field-hint.is-error { color: var(--accent-rust); }
/* keep browser-autofilled fields on-theme (Chrome paints them pale by default) */
.atl-field-input:-webkit-autofill,
.atl-field-input:-webkit-autofill:hover,
.atl-field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}
/* a filled field keeps its label floated, so autofill never collides with it */
.atl-field-input:-webkit-autofill ~ .atl-field-label { top: 0; font-size: 9px; letter-spacing: 0.4em; color: var(--gold); }

/* ─────────────────────────────────────────────────────
   6 · ACCESS-CODE CELLS  +  PASSWORD STRENGTH
───────────────────────────────────────────────────── */
.atl-code { display: flex; gap: 10px; }
.atl-code-cell {
  width: 46px; height: 56px; text-align: center;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--gold-bright); font-family: var(--font-mono); font-size: 22px;
  caret-color: var(--gold-light);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.atl-code-cell:focus { outline: none; border-color: var(--gold-light);
  box-shadow: 0 0 0 1px var(--gold-light), 0 0 22px -6px var(--gold-light); background: var(--bg3); }
.atl-code-cell.is-filled { border-color: color-mix(in oklab, var(--gold-light) 55%, var(--border)); }
@media (max-width: 480px) { .atl-code-cell { width: 38px; height: 48px; font-size: 18px; } .atl-code { gap: 7px; } }

.atl-pw { margin-top: 12px; }
.atl-pw-track { height: 3px; width: 100%; background: color-mix(in oklab, var(--gold-dim) 55%, transparent); overflow: hidden; }
.atl-pw-fill {
  display: block; height: 100%; width: 0%;
  background: var(--accent-rust);
  transition: width 0.4s var(--atl-ease), background 0.4s ease;
}
.atl-pw[data-score="2"] .atl-pw-fill { width: 50%;  background: var(--status-dev); }
.atl-pw[data-score="3"] .atl-pw-fill { width: 75%;  background: var(--gold-light); }
.atl-pw[data-score="4"] .atl-pw-fill { width: 100%; background: var(--gold-bright); }
.atl-pw[data-score="1"] .atl-pw-fill { width: 25%; }
.atl-pw-label { display: block; margin-top: 7px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--text-muted); }

/* ─────────────────────────────────────────────────────
   7 · SEGMENTED CONTROL
   A compact toggle for 2–4 mutually-exclusive options; a gold
   thumb slides under the active segment (atelier.js positions it).
───────────────────────────────────────────────────── */
.atl-seg {
  position: relative; display: inline-flex; padding: 4px; gap: 2px;
  background: var(--bg2); border: 1px solid var(--border);
}
.atl-seg-btn {
  position: relative; z-index: 1; background: none; border: 0; cursor: pointer;
  padding: 8px 18px; font-family: var(--font-display); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-sub);
  transition: color 0.3s ease;
}
.atl-seg-btn.is-active { color: var(--bg); }
.atl-seg-btn:hover:not(.is-active) { color: var(--gold-bright); }
.atl-seg-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0;
  background: var(--gold-light); pointer-events: none;
  transition: transform 0.4s var(--atl-ease), width 0.4s var(--atl-ease);
}

/* ─────────────────────────────────────────────────────
   8 · SLIDING TAB BAR
   Section tabs with a gold ink-bar that slides under the active
   tab. Panels cross-fade. atelier.js drives both.
───────────────────────────────────────────────────── */
.atl-tabs-bar {
  position: relative; display: flex; gap: 30px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.atl-tab {
  position: relative; background: none; border: 0; cursor: pointer;
  padding: 0 0 14px; font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted);
  transition: color 0.3s ease;
}
.atl-tab:hover { color: var(--gold-light); }
.atl-tab.is-active { color: var(--gold-bright); }
.atl-tabs-ink {
  position: absolute; bottom: -1px; left: 0; height: 1px; width: 0;
  background: var(--gold-light); box-shadow: 0 0 12px -2px var(--gold-light);
  transition: transform 0.45s var(--atl-ease), width 0.45s var(--atl-ease);
}
.atl-panel { display: none; }
.atl-panel.is-active { display: block; animation: atl-fade-in 0.6s var(--atl-ease) both; }
@keyframes atl-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ─────────────────────────────────────────────────────
   9 · ACCORDION
   Gold-hairline rows; the body opens with a true height ease
   (grid 0fr→1fr) and a corner mark rotates from + to ×.
───────────────────────────────────────────────────── */
.atl-acc { border-top: 1px solid var(--border); }
.atl-acc-item { border-bottom: 1px solid var(--border); }
.atl-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 20px 4px; color: var(--text-sub);
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.06em;
  text-transform: uppercase; transition: color 0.3s ease;
}
.atl-acc-head:hover { color: var(--gold-bright); }
.atl-acc-item.is-open .atl-acc-head { color: var(--gold-bright); }
.atl-acc-mark { position: relative; flex: none; width: 13px; height: 13px; }
.atl-acc-mark::before,
.atl-acc-mark::after {
  content: ''; position: absolute; top: 50%; left: 50%; background: var(--gold-light);
  transition: transform 0.4s var(--atl-ease), opacity 0.4s ease;
}
.atl-acc-mark::before { width: 13px; height: 1px; transform: translate(-50%, -50%); }
.atl-acc-mark::after  { width: 1px; height: 13px; transform: translate(-50%, -50%); }
.atl-acc-item.is-open .atl-acc-mark::before { transform: translate(-50%, -50%) rotate(180deg); }
.atl-acc-item.is-open .atl-acc-mark::after  { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.atl-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--atl-ease); }
.atl-acc-item.is-open .atl-acc-body { grid-template-rows: 1fr; }
.atl-acc-inner { overflow: hidden; }
.atl-acc-inner > * { padding-bottom: 4px; }
.atl-acc-prose { padding: 0 4px 22px; color: var(--text-sub); font-size: 13.5px; line-height: 1.75; }

/* ─────────────────────────────────────────────────────
   10 · TOOLTIP  [data-tooltip]
   A small Cinzel bubble on hover/focus. CSS-only; no layout cost
   until shown. Pos via [data-tip-pos="top|bottom"] (default top).
───────────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after,
[data-tooltip]::before { opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s var(--atl-ease); }
[data-tooltip]::after {
  content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 9px);
  transform: translate(-50%, 4px); white-space: nowrap; z-index: 610;
  background: var(--bg-glass); border: 1px solid var(--border);
  color: var(--gold-bright); padding: 7px 11px;
  font-family: var(--font-display); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  box-shadow: 0 14px 30px -16px rgba(0,0,0,0.9);
}
[data-tooltip]::before {           /* little pointer */
  content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px);
  transform: translate(-50%, 4px) rotate(45deg); width: 7px; height: 7px; z-index: 611;
  background: var(--bg-glass); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after,
[data-tooltip]:hover::before, [data-tooltip]:focus-visible::before { opacity: 1; transform: translate(-50%, 0) ; }
[data-tooltip]:hover::before, [data-tooltip]:focus-visible::before { transform: translate(-50%, 0) rotate(45deg); }
[data-tooltip][data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 9px); }
[data-tooltip][data-tip-pos="bottom"]::before { bottom: auto; top: calc(100% + 4px);
  border: 0; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
[data-tooltip=""]::after, [data-tooltip=""]::before { content: none; }

/* ─────────────────────────────────────────────────────
   11 · DISPATCH TOAST  (atelier.js: window.Atelier.toast)
   A gilded "Dispatch received" slip slides in bottom-right and
   self-dismisses. One stack, polite live region.
───────────────────────────────────────────────────── */
.atl-toasts {
  position: fixed; right: 22px; bottom: 22px; z-index: var(--atl-z-toast);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
  pointer-events: none; max-width: min(360px, calc(100vw - 32px));
}
.atl-toast {
  position: relative; pointer-events: auto; overflow: hidden;
  min-width: 240px; max-width: 100%;
  background: linear-gradient(180deg, var(--surface), var(--bg-glass));
  border: 1px solid var(--border-hover);
  box-shadow: 0 24px 50px -22px rgba(0,0,0,0.92), inset 0 1px 0 rgba(196,185,152,0.08);
  padding: 15px 18px 15px 17px;
  transform: translateY(14px); opacity: 0;
  transition: transform 0.5s var(--atl-ease), opacity 0.5s ease;
}
.atl-toast.is-in { transform: none; opacity: 1; }
.atl-toast.is-out { transform: translateX(20px); opacity: 0; }
.atl-toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold-light); }
.atl-toast--err::before { background: var(--accent-rust); }
.atl-toast-eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
  font-family: var(--font-display); font-size: 8px; letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--gold);
}
.atl-toast-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-light);
  box-shadow: 0 0 8px var(--gold-light); animation: atl-pulse 2s ease-in-out infinite; }
.atl-toast--err .atl-toast-eyebrow { color: var(--accent-rust); }
.atl-toast--err .atl-toast-eyebrow .dot { background: var(--accent-rust); box-shadow: 0 0 8px var(--accent-rust); }
.atl-toast-msg { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--text); }
.atl-toast-msg strong { color: var(--gold-bright); font-weight: 500; }
.atl-toast-life { position: absolute; left: 0; bottom: 0; height: 1px; background: var(--gold-dim); width: 100%; transform-origin: left; }
@keyframes atl-pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: 0.45; transform: scale(0.82);} }
@media (max-width: 600px) { .atl-toasts { left: 16px; right: 16px; bottom: 16px; align-items: stretch; max-width: none; } }

/* ─────────────────────────────────────────────────────
   12 · MODAL DIALOG  (atelier.js opens [data-modal] targets)
   A gilded card on a scrim, with corner brackets. Esc / scrim /
   close-button dismiss; focus is trapped while open.
───────────────────────────────────────────────────── */
.atl-modal { position: fixed; inset: 0; z-index: var(--atl-z-modal);
  display: grid; place-items: center; padding: 24px; }
.atl-modal[hidden] { display: none; }
.atl-modal-scrim { position: absolute; inset: 0; background: var(--bg-scrim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.4s ease; }
.atl-modal.is-open .atl-modal-scrim { opacity: 1; }
.atl-modal-card {
  position: relative; z-index: 1; width: min(560px, 100%); max-height: min(86vh, 760px); overflow: auto;
  background: linear-gradient(180deg, var(--surface), var(--bg-glass));
  border: 1px solid var(--border-hover);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.95);
  padding: 38px 36px 34px;
  transform: translateY(18px) scale(0.98); opacity: 0;
  transition: transform 0.5s var(--atl-ease), opacity 0.45s ease;
}
.atl-modal.is-open .atl-modal-card { transform: none; opacity: 1; }
.atl-modal-card--wide { width: min(880px, 100%); }
.atl-modal-card--media { padding: 0; background: var(--bg); overflow: hidden; }
.atl-modal-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: 1px solid var(--border); color: var(--text-sub); cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--atl-ease);
}
.atl-modal-x:hover { color: var(--gold-bright); border-color: var(--border-hover); transform: rotate(90deg); }
.atl-modal-eyebrow { margin-bottom: 14px; }
.atl-modal-title {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 30px);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-bright); line-height: 1.04; margin-bottom: 12px;
}
.atl-modal-title em { font-style: italic; font-weight: 400; color: var(--gold-light); }
.atl-modal-body { font-family: var(--font-body); font-size: 14px; line-height: 1.75; color: var(--text-sub); }
.atl-modal-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.atl-modal-embed { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.atl-modal-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.atl-modal-open { overflow: hidden; }

/* ─────────────────────────────────────────────────────
   13 · STAT BAR  +  ACTS TIMELINE
───────────────────────────────────────────────────── */
.atl-stats { display: flex; flex-wrap: wrap; gap: 14px 46px; }
.atl-stat { min-width: 86px; }
.atl-stat-num {
  font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 4vw, 46px); line-height: 1; color: var(--gold-bright);
  display: inline-flex; align-items: baseline;
}
.atl-stat-num .atl-stat-suffix { font-size: 0.5em; margin-left: 3px; color: var(--gold-light); letter-spacing: 0.1em; }
.atl-stat-rule { display: block; height: 1px; width: 100%; margin: 11px 0 9px;
  background: linear-gradient(90deg, var(--gold-light), transparent); }
.atl-stat-label {
  font-family: var(--font-display); font-size: 8.5px; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--text-muted);
}

/* Acts / chapter ledger — DESIGN_SYSTEM §6.11, formalised + a drawn spine */
.atl-acts { position: relative; counter-reset: atl-act; list-style: none; padding-left: 26px; }
.atl-acts::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-dim) 12%, var(--gold-dim) 88%, transparent);
  transform: scaleY(0); transform-origin: top; transition: transform 1.1s var(--atl-ease); }
.atl-acts.in::before { transform: scaleY(1); }
.atl-act { position: relative; padding: 0 0 26px 18px; }
.atl-act::before {           /* hollow square node on the spine */
  content: ''; position: absolute; left: -26px; top: 3px; width: 9px; height: 9px;
  border: 1px solid var(--gold-light); background: var(--bg);
  transform: translateX(-4px) rotate(45deg); transition: background 0.3s ease, box-shadow 0.3s ease;
}
.atl-act:hover::before { background: var(--gold-light); box-shadow: 0 0 12px var(--gold-light); }
.atl-act-no { counter-increment: atl-act; font-family: var(--font-display); font-size: 9px;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); }
.atl-act-no::before { content: 'Act ' counter(atl-act, upper-roman); }
.atl-act-title { display: block; margin-top: 5px; font-family: var(--font-display); font-size: 16px;
  letter-spacing: 0.04em; color: var(--gold-bright); }
.atl-act-desc { margin-top: 5px; font-size: 12.5px; line-height: 1.65; color: var(--text-muted); }

/* ─────────────────────────────────────────────────────
   14 · AMBIENT LAYERS — embers · dust · starfield
   Container-scoped atmosphere (atelier.js paints a canvas into
   any [data-embers] / [data-dust] / [data-starfield] element).
   The host must be position:relative; the canvas sits behind its
   content. Use sparingly on hero / section backdrops.
───────────────────────────────────────────────────── */
/* The canvas sits ABOVE the host as a sparse screen-blend overlay (mirrors the
   site's global gold-particle layer), so it never restacks the hero's own
   layers and can't break any layout — it only lightens, never blocks (pointer-
   events:none). The host just needs a positioning context. */
.atl-amb { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2; }
.atl-amb--screen { mix-blend-mode: screen; }
[data-embers], [data-dust], [data-starfield] { position: relative; }

/* ─────────────────────────────────────────────────────
   ADOPTION HOOKS — shared components that consume the Atelier
   vocabulary (so the whole site inherits it from one place).
───────────────────────────────────────────────────── */
.sec-head--alive { position: relative; border-bottom-color: transparent; }
.sec-head-rule { position: absolute; left: 0; right: 0; bottom: -1px; }
.sec-head-group { display: flex; flex-direction: column; gap: 9px; }

/* ─────────────────────────────────────────────────────
   15 · MOTION SAFETY
───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .atl-hairline::after,
  .atl-loader polygon,
  .atl-bar::before,
  .atl-toast-eyebrow .dot { animation: none !important; }
  .atl-acts::before { transform: scaleY(1) !important; transition: none !important; }
  .atl-seal::before, .atl-field-line::after, .atl-seg-thumb, .atl-tabs-ink,
  .atl-acc-body, .atl-acc-mark::before, .atl-acc-mark::after,
  .atl-toast, .atl-modal-card, .atl-modal-scrim { transition: none !important; }
  .atl-panel.is-active { animation: none !important; }
  .atl-loader polygon { stroke-dashoffset: 0 !important; opacity: 1 !important; }
}