/* arcana.css v0.2 (#175): scoped to [data-arcana]. Contract: tests/test_arcana_css.py; notes: Arcana/ARCANA.md */

/* tokens */
[data-arcana] {
  --arc-c-void:#050608; --arc-c-ink:#090a0f; --arc-c-panel:#121420; --arc-c-paper:#f6f0e4;
  --arc-c-muted:#b8bec8; --arc-c-quiet:#808897; --arc-c-cyan:#53d9d4; --arc-c-violet:#b38cff;
  --arc-c-magenta:#ff5ec4; --arc-c-gold:#d7b56d; --arc-c-green:#78d06d; --arc-c-red:#ff4e6a;
  --arc-paper:var(--arc-c-ink); --arc-surface:var(--arc-c-panel);
  --arc-wash:#181b29;
  --arc-ink:var(--arc-c-paper); --arc-muted:var(--arc-c-muted);
  --arc-line:rgba(246, 240, 228, .14);
  --arc-accent:var(--arc-c-cyan); --arc-on-accent:var(--arc-c-void);
  --arc-focus:var(--arc-c-cyan);
  --arc-danger:var(--arc-c-red);
  --arc-display:Georgia, "Times New Roman", serif;
  --arc-body:"Segoe UI", system-ui, Arial, sans-serif;
  --arc-fs-body:1rem; --arc-lh-body:1.6; --arc-fs-caption:.8125rem;
  --arc-fs-lead:clamp(1.2rem, 2vw, 1.5rem);
  --arc-fs-h2:clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --arc-fs-h1:clamp(2.25rem, 1.5rem + 3vw, 4rem); --arc-lh-h1:1.05; --arc-track-h1:-.02em;
  --arc-reading:65ch;
  --arc-s1:.25rem; --arc-s2:.5rem; --arc-s3:.75rem; --arc-s4:1rem; --arc-s6:1.5rem;
  --arc-s8:2rem; --arc-s12:3rem; --arc-s16:4rem; --arc-s24:6rem; --arc-s32:8rem;
  --arc-section-y:var(--arc-s16);
  --arc-grid-max:75rem;
  --arc-gutter:10px;
  --arc-shell-max:82.5rem;
  --arc-radius:0; --arc-rule:1px;
  --arc-ratio-card:2 / 3; --arc-ratio-media:4 / 3; --arc-ratio-wide:16 / 9;
  --arc-shadow-card:none;
  --arc-motion-duration:.2s; --arc-rail-tilt:0deg; --arc-card-tilt:1.5deg; --arc-rail-bleed:var(--arc-s12);
  color:var(--arc-ink); background:var(--arc-paper);
  font:400 var(--arc-fs-body) / var(--arc-lh-body) var(--arc-body);
  overflow-wrap:anywhere;
}
/* tone: pages only, never a card */
[data-arcana][data-tone="paper"], [data-arcana] [data-tone="paper"], [data-arcana] [data-theme="paper"] {
  --arc-paper:#f7f5f0; --arc-surface:#ffffff; --arc-wash:#efece4; --arc-ink:#171717;
  --arc-muted:#5f5d58; --arc-line:#c9c5bc; --arc-accent:#8b1e2d; --arc-on-accent:#ffffff;
  --arc-focus:#2457a6;
  color:var(--arc-ink); background:var(--arc-paper);
}
/* media token overrides: doubled root (0,2,0) beats a later slug hook */
@media (prefers-reduced-motion: reduce) {
  [data-arcana][data-arcana] { --arc-motion-duration:0s; --arc-rail-tilt:0deg; --arc-card-tilt:0deg; }
  [data-arcana] *, [data-arcana] *::before, [data-arcana] *::after { animation-duration:.001ms; animation-iteration-count:1; transition-duration:.001ms; scroll-behavior:auto; }
}
@media screen and (max-width: 47.9375em) {
  [data-arcana][data-arcana] { --arc-rail-tilt:0deg; --arc-card-tilt:0deg; --arc-section-y:var(--arc-s12); }
}
/* The WordPress shell has a fixed header; standalone specimens do not.
   Reserve its 72px desktop height (66px mobile), scaling with enlarged text.
   Keep this offset inside Arcana: no homepage or shared-header selector. */
[data-arcana][data-site-shell] { padding-block-start:max(72px, 4.5rem); scroll-margin-block-start:max(80px, 5rem); }
[data-arcana][data-site-shell] :is([id], a, button, [tabindex]) { scroll-margin-block-start:max(80px, 5rem); }
@media print {
  [data-arcana][data-site-shell] { padding-block-start:0; }
}
/* resets */
[data-arcana] *, [data-arcana] *::before, [data-arcana] *::after { box-sizing:border-box; }
[data-arcana] :is(h1, h2, h3, h4, p, figure, ul, ol, dl, dd) { margin:0; }
[data-arcana] a { color:inherit; text-decoration:underline; text-underline-offset:.2em; }
[data-arcana] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline:3px solid var(--arc-focus); outline-offset:4px; }
[data-arcana] :is(img, video, svg) { max-width:100%; height:auto; display:block; }
[data-arcana] [hidden] { display:none !important; }
[data-arcana] .arcana-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* type */
[data-arcana] .arcana-display { font:400 var(--arc-fs-h1) / var(--arc-lh-h1) var(--arc-display); letter-spacing:var(--arc-track-h1); max-inline-size:18ch; text-wrap:balance; }
[data-arcana] .arcana-heading { font:400 var(--arc-fs-h2) / 1.15 var(--arc-display); max-inline-size:24ch; text-wrap:balance; }
[data-arcana] .arcana-lead { font-size:var(--arc-fs-lead); line-height:1.5; max-inline-size:48ch; }
[data-arcana] .arcana-kicker { font:600 .875rem / 1.4 var(--arc-body); color:var(--arc-muted); }
[data-arcana] .arcana-caption { font-size:var(--arc-fs-caption); line-height:1.5; color:var(--arc-muted); }
[data-arcana] :is(.arcana-measure, .arcana-prose) { max-inline-size:var(--arc-reading); }
[data-arcana] :is(.arcana-flow, .arcana-prose) > * + * { margin-block-start:var(--arc-flow, var(--arc-s4)); }
[data-arcana] [data-flow="tight"] { --arc-flow:var(--arc-s2); }
[data-arcana] [data-flow="loose"] { --arc-flow:var(--arc-s8); }

/* actions */
[data-arcana] .arcana-actions { display:flex; flex-wrap:wrap; gap:var(--arc-s4); }
[data-arcana] :is(.arcana-action, .alcor-section__cta) { display:inline-flex; align-items:center; min-block-size:2.75rem; padding:var(--arc-s2) var(--arc-s6); border:var(--arc-rule) solid var(--arc-accent); border-radius:var(--arc-radius); background:var(--arc-accent); color:var(--arc-on-accent); font-weight:600; text-decoration:none; white-space:normal; }
[data-arcana] :is(.arcana-action[data-kind="secondary"], .alcor-section__cta--secondary) { background:transparent; color:var(--arc-accent); }
[data-arcana] :is(.arcana-action, .alcor-section__cta):hover { text-decoration:underline; }
[data-arcana] .arcana-action:is(:disabled, [aria-disabled="true"]) { border-color:var(--arc-muted); background:var(--arc-surface); color:var(--arc-muted); cursor:not-allowed; }

/* layout */
[data-arcana] .arcana-shell { width:min(var(--arc-shell-max), 100% - 2rem); margin-inline:auto; }
[data-arcana] .arcana-section { padding-block:var(--arc-section-y); }
[data-arcana] .arcana-key .grid-container { row-gap:var(--arc-s8); }
[data-arcana] .arcana-key .grid-container > * { display:grid; gap:var(--arc-s4); align-content:start; }
[data-arcana] .alcor-breadcrumbs ol { display:flex; flex-wrap:wrap; gap:var(--arc-s2); margin:0; padding:0; list-style:none; font-size:var(--arc-fs-caption); color:var(--arc-muted); }
[data-arcana] .alcor-breadcrumbs li + li::before { content:"/"; margin-inline-end:var(--arc-s2); }
[data-arcana] .alcor-breadcrumbs [aria-current="page"] { color:var(--arc-ink); }
[data-arcana] .arcana-evidence { border-inline-start:4px solid var(--arc-accent); padding-inline-start:var(--arc-s4); }
[data-arcana] .arcana-status { display:inline-block; padding:var(--arc-s2) var(--arc-s4); border:var(--arc-rule) solid var(--arc-line); background:var(--arc-surface); font-size:var(--arc-fs-caption); }
[data-arcana] .arcana-status[data-kind="error"] { border-color:var(--arc-danger); }
[data-arcana] .arcana-status[data-kind="empty"] { color:var(--arc-muted); }
[data-arcana] .arcana-notice { padding:var(--arc-s2) var(--arc-s4); border-block:var(--arc-rule) solid var(--arc-line); background:var(--arc-wash); font-size:var(--arc-fs-caption); text-align:center; }
[data-arcana] .arcana-rows > div { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap:var(--arc-s2) var(--arc-s4); padding-block:var(--arc-s3); border-block-start:var(--arc-rule) solid var(--arc-line); }
[data-arcana] .arcana-rows dt { color:var(--arc-muted); }
[data-arcana] .arcana-steps { padding:0; list-style:none; counter-reset:arcana-step; }
[data-arcana] .arcana-steps > li { position:relative; padding-block:var(--arc-s3); padding-inline-start:var(--arc-s12); border-block-start:var(--arc-rule) solid var(--arc-line); counter-increment:arcana-step; }
[data-arcana] .arcana-steps > li::before { content:counter(arcana-step, upper-roman); position:absolute; inset-inline-start:0; font:400 var(--arc-fs-lead) / 1.2 var(--arc-display); color:var(--arc-accent); }
[data-arcana] .arcana-disclosure { border-block:var(--arc-rule) solid var(--arc-line); }
[data-arcana] .arcana-disclosure > summary { display:flex; justify-content:space-between; gap:var(--arc-s4); padding-block:var(--arc-s3); list-style:none; font-weight:600; cursor:pointer; }
[data-arcana] .arcana-disclosure > summary::after { content:"+"; color:var(--arc-accent); }
[data-arcana] .arcana-disclosure[open] > summary::after { content:"-"; }
[data-arcana] .arcana-dialog { max-inline-size:min(40rem, 100% - 2rem); padding:var(--arc-s8); border:var(--arc-rule) solid var(--arc-line); background:var(--arc-surface); color:var(--arc-ink); }
[data-arcana] .arcana-dialog:target { display:block; } /* no JS: the opener's plain fragment link reveals it inline */
[data-arcana] .arcana-dialog::backdrop { background:rgba(5, 6, 8, .72); }

/* media */
[data-arcana] :is(.arcana-frame, .arcana-media, [data-arcana-key-art]) { display:block; aspect-ratio:var(--arc-ratio, var(--arc-ratio-card)); background:var(--arc-wash); }
[data-arcana] :is(.arcana-frame, .arcana-media, [data-arcana-key-art]) > :is(img, video, svg) { width:100%; height:100%; object-fit:cover; }
[data-arcana] :is([data-ratio="2:3"], [data-arcana-key-art]) { --arc-ratio:var(--arc-ratio-card); }
[data-arcana] :is(.arcana-media, [data-ratio="4:3"]) { --arc-ratio:var(--arc-ratio-media); }
[data-arcana] [data-ratio="16:9"] { --arc-ratio:var(--arc-ratio-wide); }
[data-arcana] [data-ratio="1:1"] { --arc-ratio:1; }

/* rail and card */
[data-arcana] .arcana-rail-nav .arcana-heading { max-inline-size:32ch; }
[data-arcana] .arcana-rail-wrap { overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scroll-padding-inline:var(--arc-s6); padding-block:var(--arc-rail-bleed); scrollbar-gutter:stable; }
[data-arcana] .arcana-rail { display:flex; gap:var(--arc-s6); width:max-content; margin:0; padding:0 var(--arc-s6); list-style:none; transform:rotate(var(--arc-rail-tilt)); transform-origin:center; }
[data-arcana] .arcana-rail > li { display:grid; gap:var(--arc-s2); justify-items:center; scroll-snap-align:center; }
[data-arcana] .arcana-card { display:block; inline-size:clamp(9rem, 14vw, 13rem); aspect-ratio:var(--arc-ratio-card); border:var(--arc-rule) solid var(--arc-line); border-radius:var(--arc-radius); background:var(--arc-surface); box-shadow:var(--arc-shadow-card); text-decoration:none; transition:transform var(--arc-motion-duration) ease; }
[data-arcana] .arcana-card__art { display:block; block-size:100%; background:var(--arc-wash); }
[data-arcana] .arcana-card__art > img { width:100%; height:100%; object-fit:cover; }
[data-arcana] .arcana-card__caption { font:400 .9375rem / 1.2 var(--arc-display); text-align:center; }
@media screen and (min-width: 48em) and (hover: hover) {
  [data-arcana] .arcana-rail > li:nth-child(3n+2) .arcana-card { transform:rotate(var(--arc-card-tilt)); }
  [data-arcana] .arcana-rail > li:nth-child(3n) .arcana-card { transform:rotate(calc(var(--arc-card-tilt) * -.67)); }
  [data-arcana] .arcana-rail > li:is(:focus-within, :hover) .arcana-card { transform:none; }
}

/* renderer bridge: re-declares every property sections.css sets here (the preview loads no sections.css) */
[data-arcana] .alcor-section { --alcor-section-bg:var(--arc-paper); --alcor-section-fg:var(--arc-ink); --alcor-section-muted:var(--arc-muted); --alcor-section-line:var(--arc-line); padding-block:var(--arc-section-y); background:var(--arc-paper); color:var(--arc-ink); }
[data-arcana] .alcor-section__inner { width:auto; max-inline-size:var(--arc-grid-max); margin-inline:auto; padding:0 max(var(--arc-gutter), 1rem); }
[data-arcana] .alcor-section__eyebrow { font:600 .875rem / 1.4 var(--arc-body); color:var(--arc-muted); letter-spacing:0; text-transform:none; }
[data-arcana] .alcor-section__title { max-width:none; font:400 var(--arc-fs-h2) / 1.15 var(--arc-display); letter-spacing:0; color:var(--arc-ink); overflow-wrap:anywhere; text-wrap:balance; }
[data-arcana] .alcor-section--hero .alcor-section__title { font:400 var(--arc-fs-h1) / var(--arc-lh-h1) var(--arc-display); letter-spacing:var(--arc-track-h1); max-inline-size:18ch; }
[data-arcana] :is(.alcor-section__body, .alcor-section__list) { max-inline-size:var(--arc-reading); color:var(--arc-ink); line-height:1.6; }
[data-arcana] .alcor-section__body { margin-block-start:var(--arc-s4); font-size:1.0625rem; }
[data-arcana] .alcor-section__body > * + * { margin-block-start:var(--arc-s4); }
[data-arcana] .alcor-section__list { display:grid; gap:var(--arc-s3); margin:var(--arc-s6) 0 0; padding:0; list-style:none; }
[data-arcana] .alcor-section__list > li { border-block-start:var(--arc-rule) solid var(--arc-line); padding-block:var(--arc-s3); }
[data-arcana] .alcor-section__cta { margin:var(--arc-s6) var(--arc-s4) 0 0; }
[data-arcana][data-section-library] { --as-paper:var(--arc-paper); --as-ink:var(--arc-ink); --as-muted:var(--arc-muted); --as-line:var(--arc-line); --as-accent:var(--arc-accent); --as-on-accent:var(--arc-on-accent); --as-focus:var(--arc-focus); --as-display:var(--arc-display); --as-body:var(--arc-body); --as-width:var(--arc-grid-max); }

/* print: ink on paper, actions outlined (browsers drop backgrounds) */
@media print {
  [data-arcana][data-arcana] { --arc-rail-tilt:0deg; --arc-card-tilt:0deg; --arc-motion-duration:0s; --arc-paper:var(--arc-c-paper); --arc-surface:var(--arc-c-paper); --arc-wash:var(--arc-c-paper); --arc-ink:var(--arc-c-ink); --arc-muted:var(--arc-c-ink); --arc-line:var(--arc-c-quiet); --arc-accent:var(--arc-c-ink); --arc-on-accent:var(--arc-c-paper); --arc-focus:var(--arc-c-ink); }
  [data-arcana] :is(.arcana-action, .alcor-section__cta) { background:transparent; color:var(--arc-ink); border-color:var(--arc-ink); }
  [data-arcana] .arcana-rail-wrap { overflow:visible; }
  [data-arcana] .arcana-rail { flex-wrap:wrap; width:auto; }
  [data-arcana] .arcana-card { break-inside:avoid; }
}

/* per-Arcana hooks, LAST: --arc-* values only, colours as var(--arc-c-*) */
[data-arcana="hub"] { --arc-accent:var(--arc-c-cyan); --arc-on-accent:var(--arc-c-void); }
/* #176 the-fool */
[data-arcana="the-fool"] { --arc-accent:var(--arc-c-cyan); --arc-section-y:var(--arc-s24); }
/* #177 the-magician */
[data-arcana="the-magician"] { --arc-accent:var(--arc-c-green); --arc-radius:2px; }
/* #178 the-high-priestess */
[data-arcana="the-high-priestess"] { --arc-accent:var(--arc-c-violet); --arc-section-y:var(--arc-s24); }
/* #179 the-empress */
[data-arcana="the-empress"] { --arc-accent:var(--arc-c-magenta); --arc-radius:4px; }
/* #180 the-emperor */
[data-arcana="the-emperor"] { --arc-accent:var(--arc-c-gold); --arc-card-tilt:0deg; }
/* #181 the-hierophant */
[data-arcana="the-hierophant"] { --arc-accent:var(--arc-c-cyan); --arc-line:var(--arc-c-quiet); }
/* #182 the-lovers */
[data-arcana="the-lovers"] { --arc-accent:var(--arc-c-magenta); --arc-lh-h1:1.1; }
/* #183 the-chariot */
[data-arcana="the-chariot"] { --arc-accent:var(--arc-c-red); --arc-track-h1:-.03em; }
/* #184 strength */
[data-arcana="strength"] { --arc-accent:var(--arc-c-gold); --arc-track-h1:-.01em; }
/* #185 the-hermit */
[data-arcana="the-hermit"] { --arc-accent:var(--arc-c-violet); --arc-fs-h1:clamp(2rem, 1.4rem + 2vw, 3rem); }
/* #186 wheel-of-fortune */
[data-arcana="wheel-of-fortune"] { --arc-accent:var(--arc-c-green); --arc-section-y:var(--arc-s12); }
/* #187 justice */
[data-arcana="justice"] { --arc-accent:var(--arc-c-gold); --arc-card-tilt:0deg; }
/* #188 the-hanged-man */
[data-arcana="the-hanged-man"] { --arc-accent:var(--arc-c-violet); --arc-card-tilt:-1.5deg; }
/* #189 death */
[data-arcana="death"] { --arc-accent:var(--arc-c-red); --arc-surface:var(--arc-c-void); }
/* #190 temperance */
[data-arcana="temperance"] { --arc-accent:var(--arc-c-green); --arc-card-tilt:1deg; }
/* #191 the-devil */
[data-arcana="the-devil"] { --arc-accent:var(--arc-c-magenta); --arc-wash:var(--arc-c-void); }
/* #192 the-tower */
[data-arcana="the-tower"] { --arc-accent:var(--arc-c-red); --arc-track-h1:-.04em; --arc-card-tilt:0deg; }
/* #193 the-star */
[data-arcana="the-star"] { --arc-accent:var(--arc-c-cyan); --arc-section-y:var(--arc-s24); }
/* #195 the-moon */
[data-arcana="the-moon"] { --arc-accent:var(--arc-c-violet); --arc-wash:var(--arc-c-void); }
/* #197 the-sun */
[data-arcana="the-sun"] { --arc-accent:var(--arc-c-gold); --arc-lh-h1:1; }
/* #198 judgement */
[data-arcana="judgement"] { --arc-accent:var(--arc-c-green); --arc-line:var(--arc-c-quiet); }
/* #201 the-world */
[data-arcana="the-world"] { --arc-accent:var(--arc-c-cyan); --arc-section-y:var(--arc-s12); }

/* ---------- Phone density for archetype brand pages (owner 2026-09-28: "a bit crowded on mobile") ----------
   Layout only: each brand keeps its colours, faces, shadows and button style. Selectors start at
   main[data-brand] so they outrank arcana-brand.css and the brands/<name>.css files that load after this. */
@media (max-width: 40em) {
  main[data-brand] .abr-head { padding-block: 1.25rem 1.75rem; }
  main[data-brand] .abr-head .alcor-breadcrumbs ol { margin-block-end: .85rem; font-size: .8125rem; }
  main[data-brand] .abr-card { gap: .45rem; font-size: .66rem; letter-spacing: .1em; }
  main[data-brand] .abr-card__num { min-inline-size: 2em; block-size: 2em; }
  main[data-brand] .abr-title { margin-block-start: .7rem; font-size: min(var(--brand-title-size), 12.5vw); line-height: min(var(--brand-title-lh), 1.02); }
  main[data-brand] .abr-title__icon { inline-size: 2.25rem; margin-block-end: .3rem; }
  main[data-brand] .abr-tagline { margin-block-start: .65rem; font-size: clamp(1.1rem, 5vw, 1.35rem); }
  main[data-brand] .abr-head__row { gap: 1rem; margin-block-start: 1.25rem; }
  main[data-brand] .abr-goodfor { font-size: .9375rem; line-height: 1.5; }
  main[data-brand] .abr-goodfor strong { margin-block-end: .15rem; font-size: .68rem; }
  main[data-brand] .abr-actions { gap: .6rem; }
  main[data-brand] a.abr-button { min-block-size: 2.75rem; padding: .6rem 1rem; font-size: .78rem; letter-spacing: .06em; }
  main[data-brand] .abr-swatches { gap: .35rem .85rem; margin-block-start: 1.15rem; }
  main[data-brand] .abr-swatches li { gap: .4rem; font-size: .75rem; }
  main[data-brand] .abr-swatches__chip { inline-size: 1rem; block-size: 1rem; }
  main[data-brand] .abr-section { padding-block: 2.5rem; }
  main[data-brand] .abr-heading { font-size: min(2rem, 9vw); }
}