/* ============================================================
   Theme: Art Deco (1925)
   Tokens from 60-styles/art-deco.md — gold on near-black, one
   jewel field (navy), symmetry is law, gold is a line, slow
   confident 300–400ms fades.
   Detail layer: scallop ground, stepped octagon cards, diamond
   dividers, double gold frames, ziggurat buttons.
   ============================================================ */

html[data-style="art-deco"] {
  --bg: #0E0E10;             /* near-black */
  --bg-soft: #121215;        /* charcoal step */
  --surface: #1A1A1E;
  --ink: #F2EDE0;            /* ivory text */
  --muted: #B9B4A6;

  --accent: #D4AF37;         /* gold — lines, frames, large display */
  --accent-fg: #0E0E10;      /* ink on gold ≈9:1 */
  --accent-ink: #D4AF37;     /* gold text >=7:1 on near-black */
  --accent-2: #14203E;       /* navy — the one jewel field */
  --accent-3: #D4AF37;

  --line: #D4AF37;
  --border-w: 1px;
  --radius: 0px;
  --chip-radius: 0px;

  --font-display: 'Poiret One', 'Manrope', sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --h1-weight: 400;
  --h1-transform: uppercase;
  --h1-tracking: .1em;
  --h1-lh: 1.18;
  --h2-weight: 400;
  --h2-transform: uppercase;
  --h2-tracking: .1em;

  --kicker-weight: 700;
  --kicker-transform: uppercase;
  --kicker-tracking: .3em;

  --btn-weight: 600;
  --btn-transform: uppercase;
  --btn-tracking: .18em;
  --btn-radius: 0px;
  --btn-border-w: 1px;

  --card-border-w: 1px;
  --card-radius: 0px;

  --focus: #D4AF37;
  --speed: 350ms;
  --hero-dur: 380ms;

  --cal-cell-border-w: 1px;
  --cal-cell-line: rgba(212, 175, 55, .35);
  --brand-accent: #D4AF37;
  --sel-bg: #D4AF37;
  --sel-fg: #0E0E10;

  --title-rule: block;
  --orn-h: 20px;
  /* classic deco divider: — ◆ —  with stepped lines */
  --orn-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20'%3E%3Cg stroke='%23D4AF37' fill='none'%3E%3Cpath d='M0 10 H92' stroke-width='1.2'/%3E%3Cpath d='M148 10 H240' stroke-width='1.2'/%3E%3Cpath d='M84 10 H92 M148 10 H156' stroke-width='2.4'/%3E%3Cpath d='M120 2 L128 10 L120 18 L112 10 Z' stroke-width='1.2'/%3E%3Cpath d='M100 10 l6 -6 6 6 -6 6 Z M134 10 l6 -6 6 6 -6 6 Z' stroke-width='1'/%3E%3C/g%3E%3Ccircle cx='120' cy='10' r='1.8' fill='%23D4AF37'/%3E%3C/svg%3E") no-repeat center / 240px 20px;
}

/* --- page ground: gold scallop arcs + top sheen on near-black --- */
html[data-style="art-deco"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgba(212,175,55,.07), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M-12 24 A24 24 0 0 1 36 24'/%3E%3Cpath d='M12 24 A24 24 0 0 1 60 24'/%3E%3Cpath d='M36 24 A24 24 0 0 1 84 24'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 48px 24px;
}

/* gold links on dark (navy fails on near-black) */
html[data-style="art-deco"] a { color: #D4AF37; }

/* R1: symmetry is law — hero, section heads, CTA on the center axis */
html[data-style="art-deco"] .hero__in {
  grid-template-columns: 1fr; justify-items: center; text-align: center;
}
html[data-style="art-deco"] .hero__copy { max-width: 760px; }
html[data-style="art-deco"] .lead { margin-inline: auto; }
html[data-style="art-deco"] .hero__actions,
html[data-style="art-deco"] .cta__actions { justify-content: center; }
html[data-style="art-deco"] .section-head { margin-inline: auto; text-align: center; }
html[data-style="art-deco"] .section-sub { margin-inline: auto; }

/* header: double gold rule */
html[data-style="art-deco"] .site-header {
  border-bottom: 1px solid #D4AF37;
  box-shadow: 0 4px 0 -3px rgba(212, 175, 55, .55);
}

/* --- hero visual: jewel field + marquee double rule (rays live in the SVG) --- */
html[data-style="art-deco"] .hero__visual {
  max-width: 560px;
  border: 1px solid #D4AF37;
  box-shadow: inset 0 0 0 4px #14203E, inset 0 0 0 5px #D4AF37;
  background: #14203E;
}

/* --- cards: stepped octagon silhouette + inner gold frame --- */
html[data-style="art-deco"] .card {
  position: relative;
  border-color: rgba(212, 175, 55, .5);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px), 0 14px);
}
html[data-style="art-deco"] .card::before {
  content: ""; position: absolute; inset: 5px;
  border: 1px solid rgba(212, 175, 55, .55);
  pointer-events: none;
}
html[data-style="art-deco"] .card:hover { transform: translateY(-3px); }
html[data-style="art-deco"] .card:hover::before { border-color: #D4AF37; }

/* --- medallions: gold double frame + diamond base --- */
html[data-style="art-deco"] .medallion {
  border: 1px solid #D4AF37;
  box-shadow: inset 0 0 0 3px #1A1A1E, inset 0 0 0 4px rgba(212, 175, 55, .8);
  color: #D4AF37;
}
html[data-style="art-deco"] .medallion::after {
  content: ""; position: absolute; bottom: -11px; left: 50%;
  width: 7px; height: 7px; margin-left: -3.5px;
  background: #D4AF37; transform: rotate(45deg);
}

/* buttons: ziggurat corner cuts, gold-framed cells (R2); primary = gold field */
html[data-style="art-deco"] .btn {
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px,
    100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%,
    0 calc(100% - 9px), 0 9px);
}
html[data-style="art-deco"] .btn--primary {
  background: linear-gradient(180deg, #E8C96A 0%, #C9A53A 55%, #B8912E 100%);
  color: #0E0E10;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(14,14,16,.35);
}
html[data-style="art-deco"] .btn--primary:hover {
  background: linear-gradient(180deg, #F2EDE0 0%, #E4D9B8 100%);
  color: #0E0E10;
}
html[data-style="art-deco"] .btn--ghost { border-color: #D4AF37; color: #F2EDE0; }
html[data-style="art-deco"] .btn--ghost:hover { background: #D4AF37; color: #0E0E10; }

/* step numbers: gold double-rule squares, gold numerals (display >=24px) */
html[data-style="art-deco"] .step__num {
  width: 60px; height: 60px;
  background: var(--surface); color: #D4AF37;
  border: 1px solid #D4AF37; border-radius: 0;
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px #D4AF37;
  font-weight: 400; font-size: 1.6rem;
  font-family: 'Poiret One', cursive;
}
html[data-style="art-deco"] .step__ic { color: #D4AF37; opacity: .9; }

/* chips: dark cells, gold rules; s = gold field with ink text */
html[data-style="art-deco"] .chip { border-width: 1px; border-color: #D4AF37; }
html[data-style="art-deco"] .chip--s { background: linear-gradient(180deg, #E8C96A, #C9A53A); color: #0E0E10; }
html[data-style="art-deco"] .chip--c { background: #14203E; color: #F2EDE0; }
html[data-style="art-deco"] .chip--a { background: transparent; color: #D4AF37; }
html[data-style="art-deco"] .chip--d { background: #F2EDE0; color: #0E0E10; }

/* quote: centered, diamond marker, framed blockquote (fixed motif set R3) */
html[data-style="art-deco"] .quote { text-align: center; }
html[data-style="art-deco"] .quote blockquote {
  max-width: 640px; margin-inline: auto;
  padding: 1.6rem 2rem;
  border-top: 1px solid rgba(212, 175, 55, .55);
  border-bottom: 1px solid rgba(212, 175, 55, .55);
  position: relative;
}
html[data-style="art-deco"] .quote blockquote::before,
html[data-style="art-deco"] .quote blockquote::after {
  content: ""; position: absolute; top: -5px; left: 50%; margin-left: -4.5px;
  width: 9px; height: 9px; background: #D4AF37; transform: rotate(45deg);
}
html[data-style="art-deco"] .quote blockquote::after { top: auto; bottom: -5px; }
html[data-style="art-deco"] .quote p { margin-inline: auto; font-weight: 400; }
html[data-style="art-deco"] .quote figcaption {
  color: #B9B4A6; font-size: .9rem; margin-top: 1.2rem;
  letter-spacing: .12em; text-transform: uppercase; font-size: .78rem;
}

/* stats: gold display numerals + diamond bullets */
html[data-style="art-deco"] .stat { border-top: 1px solid rgba(212, 175, 55, .55); }
html[data-style="art-deco"] .stat__val {
  color: #D4AF37; font-weight: 400;
  font-family: 'Poiret One', cursive;
  font-size: 2.8rem;
}
html[data-style="art-deco"] .stat__ic { color: #D4AF37; opacity: .9; }

/* CTA: the ivory ballroom inversion with stepped gold frame */
html[data-style="art-deco"] .cta {
  background: #F2EDE0; position: relative;
}
html[data-style="art-deco"] .cta h2 { color: #0E0E10; }
html[data-style="art-deco"] .cta p { color: #44413A; }
html[data-style="art-deco"] .cta::after {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid #B8912E;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px,
    100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%,
    0 calc(100% - 18px), 0 18px);
  pointer-events: none;
}
html[data-style="art-deco"] .cta .btn--ghost { border-color: #0E0E10; color: #0E0E10; }
html[data-style="art-deco"] .cta .btn--ghost:hover { background: #0E0E10; color: #F2EDE0; }

/* calendar: marquee frame + gold center diamond + letterspaced day caps */
html[data-style="art-deco"] .cal {
  position: relative;
  background: var(--surface);
  box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 5px #D4AF37;
  border: 1px solid #D4AF37;
}
html[data-style="art-deco"] .cal::before {
  content: ""; position: absolute; top: -6px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; background: #D4AF37; transform: rotate(45deg);
}
html[data-style="art-deco"] .cal__day {
  color: #D4AF37;
  letter-spacing: .22em;
  font-family: 'Poiret One', cursive;
  font-size: .95rem;
}
html[data-style="art-deco"] .cal__chan { color: #F2EDE0; }

/* footer: gold hairline */
html[data-style="art-deco"] .site-footer { border-top-color: rgba(212, 175, 55, .4); }
html[data-style="art-deco"] .footer__ic { color: #D4AF37; }