/* Article page looks. Each article carries one look (body[data-art-style]) beside its palette (see build/article_themes.py).
   "playbook" is the site's own look and adds nothing. The others change the shape of the page, not just its colour:
   hero treatment, borders and shadows, labels, headings and the background. Palette tokens come from the article's own style tag. */

/* ---------- shared hooks ---------- */
body[data-art-style="editorial"],
body[data-art-style="soft"],
body[data-art-style="blueprint"] { --a-line: color-mix(in srgb, var(--brand-primary) 22%, transparent); }

/* ================= EDITORIAL: magazine page. No boxes, no shadows, thin rules, big serif ================= */
body[data-art-style="editorial"] { background-image: none; }
body[data-art-style="editorial"] .vh-top { --h-ink: var(--ink-deep); --h-muted: var(--muted-strong); --h-tone: var(--brand-primary); --h-chip-bg: transparent; --h-chip-ink: var(--brass); border-bottom: 1px solid var(--brand-primary); }
body[data-art-style="editorial"] .vh-top, body[data-art-style="editorial"] .vh-top .vh__bg { background: var(--ground) !important; background-image: none !important; }
body[data-art-style="editorial"] .vh-top .vh__bg::before, body[data-art-style="editorial"] .vh-top .vh__bg::after { display: none !important; }
body[data-art-style="editorial"] .vh__title { font-weight: 400; letter-spacing: -0.035em; font-size: clamp(2.4rem, 5.6vw, 4.5rem); line-height: 1; max-width: 17ch; }
body[data-art-style="editorial"] .vh__title .ahero__tone { font-style: italic; background-image: none !important; }
body[data-art-style="editorial"] .vh__dek { font-family: var(--serif); font-size: 1.3rem; max-width: 36ch; }
body[data-art-style="editorial"] .vh__chip { border-radius: 0; padding: 0 0 0.45rem; border-bottom: 2px solid var(--brass); letter-spacing: 0.22em; text-transform: uppercase; box-shadow: none !important; background: none !important; }
body[data-art-style="editorial"] .vh__chip .spot { display: none; }
body[data-art-style="editorial"] .vh__art { opacity: 0.95; filter: grayscale(0.25); }
body[data-art-style="editorial"] .crumbs a, body[data-art-style="editorial"] .crumbs li { color: var(--muted); }
body[data-art-style="editorial"] .article-body .sechead__n { background: none; color: var(--brass); padding: 0; font-family: var(--serif); font-style: italic; letter-spacing: 0.02em; font-size: 0.95rem; }
body[data-art-style="editorial"] .article-body .sechead__n::before { content: "No. " counter(sec); }
body[data-art-style="editorial"] .article-body .block-head { font-weight: 400; letter-spacing: -0.02em; }
body[data-art-style="editorial"] .article-body .note.callout,
body[data-art-style="editorial"] .article-body .example,
body[data-art-style="editorial"] .pbbar,
body[data-art-style="editorial"] .pbcol { border: 0; border-left: 3px solid var(--brass); box-shadow: none; background: transparent; color: var(--ink); padding-left: 1.2rem; }
body[data-art-style="editorial"] .article-body .note.callout .note__title, body[data-art-style="editorial"] .article-body .note.callout .note__body p,
body[data-art-style="editorial"] .article-body .note.callout .callout__kicker, body[data-art-style="editorial"] .pbbar { color: var(--ink); }
body[data-art-style="editorial"] .pbbar__tag { background: none; color: var(--brass); padding: 0; }
body[data-art-style="editorial"] .article-body .table-wrap { border: 0; border-top: 2px solid var(--brand-primary); border-bottom: 1px solid var(--brand-primary); box-shadow: none; }
body[data-art-style="editorial"] .article-body table.data thead th { background: none; font-family: var(--sans); border-bottom: 1px solid var(--brand-primary); }

/* ================= SOFT: rounded, airy, pill labels, drifting shadows ================= */
body[data-art-style="soft"] { background-image: none; --a-r: 20px; --a-sh: 0 18px 40px -22px color-mix(in srgb, var(--brand-primary) 55%, transparent); }
body[data-art-style="soft"] .vh-top { --h-ink: var(--ink-deep); --h-muted: var(--muted-strong); --h-tone: var(--brand-primary); --h-chip-bg: color-mix(in srgb, var(--brand-primary) 12%, transparent); --h-chip-ink: var(--brand-primary); border-bottom: 0; border-radius: 0 0 44px 44px; }
body[data-art-style="soft"] .vh-top, body[data-art-style="soft"] .vh-top .vh__bg { background: linear-gradient(160deg, color-mix(in srgb, var(--brand-accent) 26%, var(--surface-sunk)), var(--ground) 72%) !important; background-image: none !important; border-radius: 0 0 44px 44px; }
body[data-art-style="soft"] .vh-top .vh__bg::before, body[data-art-style="soft"] .vh-top .vh__bg::after { display: none !important; }
body[data-art-style="soft"] .vh__title { font-weight: 600; letter-spacing: -0.025em; }
body[data-art-style="soft"] .vh__title .ahero__tone { background-image: linear-gradient(transparent 62%, color-mix(in srgb, var(--brand-accent) 55%, transparent) 62%) !important; }
body[data-art-style="soft"] .vh__chip { box-shadow: none !important; border: 0 !important; }
body[data-art-style="soft"] .vh__art { filter: drop-shadow(0 24px 30px color-mix(in srgb, var(--brand-primary) 30%, transparent)); }
body[data-art-style="soft"] .crumbs a, body[data-art-style="soft"] .crumbs li { color: var(--muted); }
body[data-art-style="soft"] .article-body .sechead__n { border-radius: 999px; background: color-mix(in srgb, var(--brand-accent) 55%, var(--surface)); color: var(--brand-primary); font-family: var(--sans); padding: 0.3rem 0.8rem; }
body[data-art-style="soft"] .article-body .note.callout,
body[data-art-style="soft"] .article-body .example,
body[data-art-style="soft"] .pbbar,
body[data-art-style="soft"] .pbcol,
body[data-art-style="soft"] .article-body .table-wrap { border: 0; border-radius: var(--a-r); box-shadow: var(--a-sh); }
body[data-art-style="soft"] .article-body .note.callout, body[data-art-style="soft"] .pbbar { background: color-mix(in srgb, var(--brand-accent) 42%, var(--surface)); color: var(--brand-primary); }
body[data-art-style="soft"] .pbbar__tag, body[data-art-style="soft"] .pbtag { border-radius: 999px; }
body[data-art-style="soft"] .article-body table.data thead th { font-family: var(--sans); background: var(--surface-sunk); }

/* ================= BOLD: colour-block hero, heavy sans type, offset colour shadows ================= */
body[data-art-style="bold"] { background-image: none; }
body[data-art-style="bold"] .article-body .block-head { font-family: var(--sans); font-weight: 800; letter-spacing: -0.025em; }
body[data-art-style="bold"] .vh-top { --h-ink: #fff; --h-muted: rgba(255,255,255,0.88); --h-tone: var(--brand-accent); --h-chip-bg: var(--brand-accent); --h-chip-ink: var(--brand-primary); border-bottom: 10px solid var(--brand-accent) !important; }
body[data-art-style="bold"] .vh-top, body[data-art-style="bold"] .vh-top .vh__bg { background: var(--brand-primary) !important; background-image: none !important; }
body[data-art-style="bold"] .vh-top .vh__bg::before, body[data-art-style="bold"] .vh-top .vh__bg::after { display: none !important; }
body[data-art-style="bold"] .vh__title { font-family: var(--sans); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1; max-width: 16ch; }
body[data-art-style="bold"] .vh__title .ahero__tone { background-image: none !important; }
body[data-art-style="bold"] .vh__chip { border-radius: 0; font-weight: 800; box-shadow: 5px 5px 0 rgba(0,0,0,0.35) !important; border: 0 !important; }
body[data-art-style="bold"] .crumbs a, body[data-art-style="bold"] .crumbs li { color: rgba(255,255,255,0.78); } body[data-art-style="bold"] .crumbs li[aria-current] { color: #fff; }
body[data-art-style="bold"] .article-body .sechead__n { background: var(--brand-accent); color: var(--brand-primary); font-weight: 800; }
body[data-art-style="bold"] .article-body .note.callout, body[data-art-style="bold"] .pbbar { background: var(--brand-primary); color: #fff; border: 0; box-shadow: 9px 9px 0 var(--brand-accent); }
body[data-art-style="bold"] .article-body .note.callout .note__title, body[data-art-style="bold"] .article-body .note.callout .note__body p,
body[data-art-style="bold"] .article-body .note.callout .callout__kicker { color: #fff; }
body[data-art-style="bold"] .pbbar__tag { background: var(--brand-accent); color: var(--brand-primary); }
body[data-art-style="bold"] .article-body .example, body[data-art-style="bold"] .pbcol, body[data-art-style="bold"] .article-body .table-wrap { border: 3px solid var(--brand-primary); box-shadow: 9px 9px 0 var(--brand-accent); }
body[data-art-style="bold"] .article-body table.data thead th { background: var(--brand-primary); color: #fff; }

/* ================= BLUEPRINT: dark grid hero, dashed technical boxes, mono labels ================= */
body[data-art-style="blueprint"] { background-image: linear-gradient(color-mix(in srgb, var(--brand-primary) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
body[data-art-style="blueprint"] .vh-top { --h-ink: #fff; --h-muted: rgba(255,255,255,0.86); --h-tone: var(--brand-accent); --h-chip-bg: transparent; --h-chip-ink: var(--brand-accent); border-bottom: 2px dashed var(--brand-accent) !important; }
body[data-art-style="blueprint"] .vh-top, body[data-art-style="blueprint"] .vh-top .vh__bg { background-color: var(--brand-primary) !important; background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px) !important; background-size: 22px 22px !important; }
body[data-art-style="blueprint"] .vh-top .vh__bg::before, body[data-art-style="blueprint"] .vh-top .vh__bg::after { display: none !important; }
body[data-art-style="blueprint"] .vh__title { font-weight: 500; letter-spacing: -0.02em; }
body[data-art-style="blueprint"] .vh__title .ahero__tone { background-image: none !important; }
body[data-art-style="blueprint"] .vh__chip { border: 1px dashed var(--brand-accent) !important; border-radius: 0; font-family: var(--pb-mono); letter-spacing: 0.14em; text-transform: uppercase; box-shadow: none !important; }
body[data-art-style="blueprint"] .vh__art { outline: 2px dashed color-mix(in srgb, var(--brand-accent) 70%, transparent); outline-offset: 10px; }
body[data-art-style="blueprint"] .crumbs a, body[data-art-style="blueprint"] .crumbs li { color: rgba(255,255,255,0.78); } body[data-art-style="blueprint"] .crumbs li[aria-current] { color: #fff; }
body[data-art-style="blueprint"] .article-body .sechead__n { background: none; border: 1px dashed var(--brand-primary); color: var(--brand-primary); }
body[data-art-style="blueprint"] .article-body .sechead__n::before { content: "FIG. " counter(sec, decimal-leading-zero); }
body[data-art-style="blueprint"] .article-body .note.callout, body[data-art-style="blueprint"] .article-body .example, body[data-art-style="blueprint"] .pbbar,
body[data-art-style="blueprint"] .pbcol, body[data-art-style="blueprint"] .article-body .table-wrap { border: 2px dashed var(--brand-primary); box-shadow: none; background: var(--surface); color: var(--ink); }
body[data-art-style="blueprint"] .article-body .note.callout .note__title, body[data-art-style="blueprint"] .article-body .note.callout .note__body p,
body[data-art-style="blueprint"] .article-body .note.callout .callout__kicker { color: var(--ink); }
body[data-art-style="blueprint"] .pbbar__tag { background: none; color: var(--brand-primary); border: 1px dashed var(--brand-primary); }
body[data-art-style="blueprint"] .article-body table.data thead th { background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface)); }