/**
 * home-forge.css — the stocks homepage in the 16th-century Forge look. EXPERIMENT (2026-09-22, William).
 *
 *   https://localhost.delvantic.com/pages/stocks/?theme=16th   (was /?theme=16th until / became the world, 2026-09-25 #1059)
 *
 * Opt-in only: pages/stocks/index.php adds the body class `h16` and this sheet when `?theme=16th` is in the URL, so the live
 * homepage is untouched for everyone else and nothing here can leak onto another page. Question being tested: should
 * the Forge look be the house style for every project, Stocks included — "stocks never got like a hardcore unique
 * look … and all the work I do in stocks would upgrade our library of the 16th century look".
 *
 * ── The idea ────────────────────────────────────────────────────────────────────────────────────────────────────
 * A dark hall, and the data on lit parchment plates. That is the Diablo II arrangement (dark stone frame, panels of
 * light) and it is also the honest one for this page: figures stay on the most readable surface there is, while the
 * room around them carries the character. It ties the two halves of the site together — the hero is the same ashlar
 * wall as /pages/delvantic-world/, so the research side and the world side read as one place.
 *
 * ── How it works ────────────────────────────────────────────────────────────────────────────────────────────────
 * Three layers, in order of leverage:
 *   1. The THEME TOKENS are redefined under `body.h16`. The homepage's own sheets use var(--theme-*) widely, so this
 *      one block restyles a great deal before a single component is touched.
 *   2. The SHARED PRIMITIVES (.hp-section, .hp-section-title, and the card/button families of every section) are
 *      restyled together. Eight sections, but only a handful of real shapes between them.
 *   3. A few SECTION-SPECIFIC rules where a section deserves its own treatment — the hero above all.
 *
 * Every selector is prefixed with `body.h16`, which also wins on specificity against the inline <style> blocks the
 * sections carry (those come later in the document, so scoping — not ordering — is what beats them).
 *
 * ── Deliberately NOT touched ────────────────────────────────────────────────────────────────────────────────────
 * Chart colours and anything carrying a sign. Green/red mean up/down here and recolouring them to fit a palette would
 * make the page lie (memory: "color = valence, never velocity"). Gilt is used for emphasis, never for a number.
 */
@import url(/public/assets/css/fonts-forge.css);

/* ══════════════════════════════════════════════════════════════════════
   1. Tokens — the whole page's palette, redefined
   ══════════════════════════════════════════════════════════════════════ */
body.h16 {
    --theme-primary:          #b8892b;
    --theme-primary-light:    #d9b45a;
    --theme-primary-dark:     #8a6914;
    --theme-primary-rgb:      184, 137, 43;
    --theme-gradient-primary: #b8892b;
    --theme-bg-primary:       #f4e9cb;
    --theme-bg-secondary:     #ebdfbe;
    --theme-bg-tertiary:      #e2d4ac;
    --theme-text-primary:     #2e1f0d;
    --theme-text-secondary:   #6b5740;
    --theme-text-muted:       #8a745a;
    --theme-border:           #c6ab7c;
    --theme-border-light:     #dbc8a2;

    /* Forge materials, named locally so the rules below read like a material list. */
    --h16-ink:        #2e1f0d;
    --h16-ink-soft:   #6b5740;
    --h16-gilt:       #b8892b;
    --h16-gold:       #d9b45a;
    --h16-gold-hi:    #f1d58c;
    --h16-wax:        #7a1f1a;
    --h16-oak-dark:   #241a10;
    --h16-caps:  'Cinzel', 'Trajan Pro', 'Palatino Linotype', Georgia, serif;
    --h16-serif: 'EB Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    --h16-parchment: url(/public/assets/images/quarters/forge/parchment.svg);
    --h16-oakgrain:  url(/public/assets/images/quarters/forge/oak-grain.svg);
    --h16-ashlar:    url(/public/assets/images/quarters/forge/ashlar-wall.webp);

    font-family: var(--h16-serif);
    color: #e9dcc0;
    background:
        var(--h16-oakgrain),
        linear-gradient(180deg, #1a120a, #0d0906);
}

/* ══════════════════════════════════════════════════════════════════════
   2. The hall — every band is a dark room; the plates inside carry the light
   ══════════════════════════════════════════════════════════════════════ */
body.h16 .hp-section,
body.h16 .hp-section--alt {
    background:
        linear-gradient(180deg, rgba(14, 10, 6, 0.86), rgba(20, 14, 8, 0.92)),
        var(--h16-ashlar) 50% 38% / 620px 1240px;
    border-top: 1px solid rgba(184, 137, 43, 0.22);
    color: #e9dcc0;
}
/* Alternate bands are the same room seen by less light, so a long page still has rhythm. */
body.h16 .hp-section--alt {
    background:
        linear-gradient(180deg, rgba(8, 6, 3, 0.93), rgba(14, 10, 6, 0.96)),
        var(--h16-ashlar) 50% 12% / 620px 1240px;
}

/* Section headings: gilt inscriptional capitals over a rule with a lozenge. */
body.h16 .hp-section-title,
body.h16 .hrr-headline,
body.h16 .mw-head h2 {
    font-family: var(--h16-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--h16-gold);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
}
body.h16 .hp-section-title { font-size: 26px; }
body.h16 .hp-section-title::after {
    content: "";
    display: block;
    height: 12px;
    margin-top: 9px;
    background:
        url(/public/assets/images/quarters/forge/lozenge.svg) 0 50% / 12px 12px no-repeat,
        linear-gradient(90deg, var(--h16-gilt) 0 0) 16px 50% / calc(100% - 16px) 1.5px no-repeat;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 52%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 52%, transparent 100%);
}
body.h16 .hp-section-subtitle,
body.h16 .hrr-head-sub,
body.h16 .hrl-blurb,
body.h16 .rp-head-sub,
body.h16 .hwr2-sub,
body.h16 .mw-note,
body.h16 .hrl-note {
    font-family: var(--h16-serif);
    font-size: 16px;
    color: #b9a684;
}
body.h16 .hrr-head-ic,
body.h16 .hrl-head-ic,
body.h16 .rp-head-ic,
body.h16 .hwr2-head-ic,
body.h16 .hp-cairn-sechead-ic { color: var(--h16-gilt); }

/* ══════════════════════════════════════════════════════════════════════
   3. The plates — every card family, one material
   ══════════════════════════════════════════════════════════════════════ */
body.h16 .hrr-card,
body.h16 .rp-card,
body.h16 .hp-cairn-card,
body.h16 .rc-card,
body.h16 .hwr2-readout,
body.h16 .hrl-list,
body.h16 .mw-day,
body.h16 .mw-learn {
    position: relative;
    border: 1px solid #8a6f42;
    border-radius: 2px;
    color: var(--h16-ink);
    background:
        radial-gradient(ellipse at 22% -12%, rgba(255, 253, 244, 0.85), transparent 58%),
        var(--h16-parchment) 0 0 / 420px 420px,
        linear-gradient(168deg, #f6ecd2, #ece0bd 58%, #e2d3ad);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 10px 26px rgba(0, 0, 0, 0.55);
}
body.h16 .hrr-card:hover,
body.h16 .rp-card:hover,
body.h16 .hp-cairn-card:hover,
body.h16 .mw-day:hover {
    border-color: var(--h16-gilt);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 0 0 1px rgba(184, 137, 43, 0.5),
        0 12px 30px rgba(0, 0, 0, 0.62);
}
/* Anything written on a plate is ink, whatever the base sheet said. */
body.h16 .hrr-card *,
body.h16 .rp-card *,
body.h16 .hp-cairn-card *,
body.h16 .rc-card *,
body.h16 .hwr2-readout *,
body.h16 .hrl-list *,
body.h16 .mw-day * { border-color: rgba(138, 111, 66, 0.45); }

body.h16 .hrr-ticker,
body.h16 .rp-ticker,
body.h16 .hrl-t,
body.h16 .rc-title,
body.h16 .hwr2-readout-eyebrow,
body.h16 .hp-cairn-eyebrow,
body.h16 .rc-eyebrow {
    font-family: var(--h16-caps);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--h16-ink);
}
body.h16 .hrr-name,
body.h16 .rp-name,
body.h16 .hrr-stamp,
body.h16 .hwr2-stamp,
body.h16 .hrl-date,
body.h16 .hp-cairn-cta-hint { color: var(--h16-ink-soft); font-family: var(--h16-serif); }

/* The report links read as a hand-kept ledger. */
body.h16 .hrl-list { padding: 8px 18px; }
body.h16 .hrl-list li { border-bottom: 1px solid rgba(138, 111, 66, 0.3); }
body.h16 .hrl-list li a { color: #5a3a12; font-family: var(--h16-serif); font-size: 17px; }
body.h16 .hrl-list li a:hover { color: var(--h16-wax); }

/* ══════════════════════════════════════════════════════════════════════
   4. Actions — stone slabs with gold letters, one struck in gilt
   ══════════════════════════════════════════════════════════════════════ */
body.h16 .hrr-more,
body.h16 .rp-more,
body.h16 .hwr2-more,
body.h16 .mw-cta,
body.h16 .hp-cairn-cta {
    font-family: var(--h16-caps);
    font-weight: 700;
    letter-spacing: 0.09em;
    border-radius: 2px;
    color: var(--h16-gold);
    text-decoration: none;
    border: 1px solid #000;
    background:
        linear-gradient(180deg, rgba(26, 18, 10, 0.72), rgba(6, 4, 2, 0.88)),
        var(--h16-ashlar) 50% 38% / 520px 1040px,
        #2a2622;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -3px 0 rgba(0, 0, 0, 0.5),
        0 0 0 2px #3a2c14,
        0 4px 12px rgba(0, 0, 0, 0.6);
}
body.h16 .hrr-more:hover,
body.h16 .rp-more:hover,
body.h16 .hwr2-more:hover,
body.h16 .mw-cta:hover,
body.h16 .hp-cairn-cta:hover {
    color: var(--h16-gold-hi);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -3px 0 rgba(0, 0, 0, 0.5),
        0 0 0 2px var(--h16-gilt),
        0 4px 16px rgba(0, 0, 0, 0.7);
}
/* The arrow chip on a card stays small and gilt — it is a mark, not a button. */
body.h16 .hrr-go,
body.h16 .rp-go {
    color: var(--h16-gilt);
    border: 1px solid rgba(138, 111, 66, 0.6);
    background: rgba(184, 137, 43, 0.1);
    border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   5. The hero — the same wall the world's home page is built of
   ══════════════════════════════════════════════════════════════════════ */
body.h16 .hp-hero {
    background:
        radial-gradient(ellipse at 50% 42%, rgba(120, 88, 34, 0.3), transparent 62%),
        linear-gradient(180deg, rgba(10, 7, 4, 0.78), rgba(6, 4, 2, 0.9)),
        var(--h16-ashlar) 50% 40% / 760px 1520px;
    border-bottom: 3px solid rgba(184, 137, 43, 0.45);
}
body.h16 .hp-hero-line,
body.h16 .hp-hero-inner h1 {
    font-family: var(--h16-caps);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--h16-gold);
    text-shadow: 0 3px 0 #000, 0 0 34px rgba(217, 180, 90, 0.3);
}
body.h16 .hp-hero-subtitle {
    font-family: var(--h16-serif);
    font-size: clamp(18px, 2.1vw, 21px);
    color: #e2d5b8;
}
/* The primary hero action is the gate: light from the far side, rising when you reach for it.
   Same idiom as "Enter the world" on /pages/delvantic-world/ — the two homepages share one door. */
body.h16 .hp-hero-actions > a:first-child,
body.h16 .hp-hero-showcase-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    font-family: var(--h16-caps);
    font-weight: 700;
    letter-spacing: 0.12em;
    border-radius: 2px;
    color: var(--h16-gold-hi);
    border: 1px solid #000;
    background:
        linear-gradient(180deg, rgba(20, 13, 7, 0.8), rgba(5, 3, 1, 0.92)),
        var(--h16-ashlar) 50% 38% / 520px 1040px,
        #2a2622;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -3px 0 rgba(0, 0, 0, 0.55),
        0 0 0 2px var(--h16-gilt),
        0 0 30px rgba(217, 180, 90, 0.26),
        0 6px 18px rgba(0, 0, 0, 0.7);
    transition: box-shadow 0.35s ease, color 0.35s ease;
}
body.h16 .hp-hero-actions > a:first-child::before,
body.h16 .hp-hero-showcase-cta::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -58%;
    z-index: -1;
    width: 150%;
    height: 150%;
    transform: translateX(-50%) scaleY(0.55);
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 216, 145, 0.62), rgba(190, 122, 40, 0.18) 44%, transparent 68%);
    opacity: 0.72;
    transition: opacity 0.35s ease, transform 0.45s ease;
}
body.h16 .hp-hero-actions > a:first-child:hover,
body.h16 .hp-hero-showcase-cta:hover {
    color: #fff3cf;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -3px 0 rgba(0, 0, 0, 0.55),
        0 0 0 2px var(--h16-gold-hi),
        0 0 44px rgba(255, 206, 122, 0.4),
        0 6px 20px rgba(0, 0, 0, 0.7);
}
body.h16 .hp-hero-actions > a:first-child:hover::before,
body.h16 .hp-hero-showcase-cta:hover::before { opacity: 1; transform: translateX(-50%) scaleY(0.9); }

/* The showcase gem sits on its own small plate. */
body.h16 .hp-hero-showcase {
    border: 1px solid #8a6f42;
    border-radius: 2px;
    color: var(--h16-ink);
    background:
        var(--h16-parchment) 0 0 / 420px 420px,
        linear-gradient(168deg, #f6ecd2, #e6d9b4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 12px 30px rgba(0, 0, 0, 0.6);
}
body.h16 .hp-hero-showcase-eyebrow { font-family: var(--h16-caps); color: var(--h16-wax); letter-spacing: 0.16em; }
body.h16 .hp-hero-showcase-ticker,
body.h16 .hp-hero-showcase-name { font-family: var(--h16-caps); color: var(--h16-ink); }

/* ══════════════════════════════════════════════════════════════════════
   6. Market weather — the sky over the hall, so it stays dark
   ══════════════════════════════════════════════════════════════════════ */
body.h16 .mw-head h2 { font-family: var(--h16-caps); }
body.h16 .mw-day-date,
body.h16 .mw-day-reg,
body.h16 .mw-legend,
body.h16 .mw-read { font-family: var(--h16-serif); }
body.h16 .mw-day-date { font-family: var(--h16-caps); letter-spacing: 0.04em; }

/* ══════════════════════════════════════════════════════════════════════
   7. The register callout — a proclamation nailed to the wall
   ══════════════════════════════════════════════════════════════════════ */
body.h16 .rc-card { padding-top: 26px; }
body.h16 .rc-title { font-size: 30px; }
body.h16 .rc-sub { font-family: var(--h16-serif); font-size: 17px; color: var(--h16-ink-soft); }
body.h16 .rc-cta {
    font-family: var(--h16-caps);
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 2px;
    color: #2a1d08;
    border: 1px solid #a9832f;
    background: linear-gradient(180deg, #f0d391, #d8ae55 55%, #c59a3c);
    box-shadow: inset 0 1px 0 rgba(255, 250, 225, 0.85), 0 2px 0 #8a6a1f, 0 4px 10px rgba(0, 0, 0, 0.4);
}
body.h16 .rc-cta:hover { color: #2a1d08; background: linear-gradient(180deg, #f8e2ab, #e2bb63 55%, #cfa444); }
body.h16 .rc-signin { font-family: var(--h16-serif); color: var(--h16-ink-soft); }

@media (prefers-reduced-motion: reduce) {
    body.h16 .hp-hero-actions > a:first-child,
    body.h16 .hp-hero-actions > a:first-child::before,
    body.h16 .hp-hero-showcase-cta,
    body.h16 .hp-hero-showcase-cta::before { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   8. Second pass — what the first screenshots showed (2026-09-22)
   Looking at it rather than reasoning about it is what found all of these.
   ══════════════════════════════════════════════════════════════════════ */

/* "View all …" was a full-width stone bar in the old link teal: it is a line of prose holding a link, not a button.
   Give the LINK the slab and leave the paragraph alone. */
body.h16 .rp-more,
body.h16 .hrr-more,
body.h16 .hwr2-more {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}
body.h16 .rp-more a,
body.h16 .hrr-more a,
body.h16 .hwr2-more a,
body.h16 .mw-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 9px 18px;
    font-family: var(--h16-caps);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    color: var(--h16-gold);
    border: 1px solid #000;
    background:
        linear-gradient(180deg, rgba(26, 18, 10, 0.72), rgba(6, 4, 2, 0.88)),
        var(--h16-ashlar) 50% 38% / 520px 1040px,
        #2a2622;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 2px #3a2c14, 0 4px 12px rgba(0, 0, 0, 0.6);
}
body.h16 .rp-more a:hover,
body.h16 .hrr-more a:hover,
body.h16 .hwr2-more a:hover,
body.h16 .mw-cta:hover { color: var(--h16-gold-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 2px var(--h16-gilt), 0 4px 16px rgba(0, 0, 0, 0.7); }

/* Small print on a plate was still the old grey-on-white greys, which parchment swallows. */
body.h16 .rp-num-k,
body.h16 .hrr-score-k,
body.h16 .rp-foot,
body.h16 .hrr-foot,
body.h16 .rp-foot *,
body.h16 .hrr-foot *,
body.h16 .hrr-px,
body.h16 .rp-num-v { color: var(--h16-ink-soft); }
body.h16 .rp-num-k,
body.h16 .hrr-score-k {
    font-family: var(--h16-caps);
    letter-spacing: 0.12em;
    color: #8a6f42;
}
body.h16 .rp-num-v { font-family: var(--h16-serif); font-weight: 700; color: var(--h16-ink); }

/* The per-card link chip: ink on a gilt hairline, so it reads at a glance. */
body.h16 .rp-go,
body.h16 .hrr-go {
    padding: 4px 9px;
    font-family: var(--h16-caps);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: #5a3a12;
    border: 1px solid rgba(138, 111, 66, 0.7);
    background: rgba(184, 137, 43, 0.14);
}
body.h16 .rp-card:hover .rp-go,
body.h16 .hrr-card:hover .hrr-go { color: var(--h16-wax); border-color: var(--h16-gilt); background: rgba(184, 137, 43, 0.22); }

/* The ledger: dates are struck into an oak strip, the names are legible ink, the tickers keep their weight. */
body.h16 .hrl-date {
    border-radius: 2px;
    color: var(--h16-gold);
    border: 1px solid #000;
    background: var(--h16-oakgrain), linear-gradient(180deg, #4b3522, #2b1c10);
    font-family: var(--h16-caps);
    letter-spacing: 0.14em;
}
body.h16 .hrl-list li a { color: #6b4a1e; font-weight: 600; }
body.h16 .hrl-list li a:hover { color: var(--h16-wax); }
body.h16 .hrl-t { font-family: var(--h16-caps); font-weight: 700; color: var(--h16-ink); }

/* The proclamation's accent rule and its one emphasised phrase were the old green. */
body.h16 .rc-card { border-top: 3px solid var(--h16-gilt); }
body.h16 .rc-sub strong,
body.h16 .rc-sub b,
body.h16 .rc-sub a { color: #8a6914; }

/* The hero's dust: the particle canvas draws pale motes, which read as a starfield on stone. Warmed to embers with a
   filter rather than by touching the script that draws them. */
body.h16 .hp-hero-particle-canvas { filter: sepia(1) saturate(2.4) hue-rotate(-12deg) brightness(1.05); }

/* The hero mark is its own bespoke WebGL script (content/home/hero-logo-3d-script.php), not the shared gilt
   brand-logo module Quarters uses, so its teal metal is shifted to gold here rather than re-authored. If this look is
   adopted, the honest fix is to give that script a gilt material and delete this line. */
body.h16 #hero-logo-canvas { filter: sepia(1) saturate(3.2) hue-rotate(-18deg) brightness(1.08); }

/* ══════════════════════════════════════════════════════════════════════
   9. Third pass — the two families the sweep missed
   ══════════════════════════════════════════════════════════════════════ */

/* "Behind the research" holds two card families: hp-cairn-card (caught above) and hp-wcard-* (not), so the row read
   half-converted — one parchment plate beside two white ones. */
body.h16 .hp-cairn {
    background:
        linear-gradient(180deg, rgba(14, 10, 6, 0.86), rgba(20, 14, 8, 0.92)),
        var(--h16-ashlar) 50% 38% / 620px 1240px;
    border-top: 1px solid rgba(184, 137, 43, 0.22);
}
/* .hp-wcard is the plate; .hp-wcard-body is the text inside it. Styling the body left a parchment panel floating on a
   white card — the wrapper is the one that has to become the plate. */
body.h16 .hp-wcard {
    border: 1px solid #8a6f42;
    border-radius: 2px;
    color: var(--h16-ink);
    background:
        radial-gradient(ellipse at 22% -12%, rgba(255, 253, 244, 0.85), transparent 58%),
        var(--h16-parchment) 0 0 / 420px 420px,
        linear-gradient(168deg, #f6ecd2, #ece0bd 58%, #e2d3ad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 10px 26px rgba(0, 0, 0, 0.55);
}
body.h16 .hp-wcard::before,
body.h16 .hp-wcard::after { background: none; }   /* the old coloured top rule */
body.h16 .hp-wcard:hover { border-color: var(--h16-gilt); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 0 1px rgba(184, 137, 43, 0.5), 0 12px 30px rgba(0, 0, 0, 0.62); }
body.h16 .hp-wcard-body {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 2px;
    color: var(--h16-ink);
    background:
        radial-gradient(ellipse at 22% -12%, rgba(255, 253, 244, 0.85), transparent 58%),
        var(--h16-parchment) 0 0 / 420px 420px,
        linear-gradient(168deg, #f6ecd2, #ece0bd 58%, #e2d3ad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 10px 26px rgba(0, 0, 0, 0.55);
}
body.h16 .hp-wcard-body:hover { border-color: var(--h16-gilt); }
body.h16 .hp-wcard-eyebrow { font-family: var(--h16-caps); letter-spacing: 0.16em; color: var(--h16-wax); }
body.h16 .hp-wcard-title { font-family: var(--h16-caps); font-weight: 700; color: var(--h16-ink); }
body.h16 .hp-wcard-desc { font-family: var(--h16-serif); font-size: 16px; color: var(--h16-ink-soft); }
body.h16 .hp-wcard-facet {
    font-family: var(--h16-serif);
    border-radius: 2px;
    color: #5a3a12;
    border: 1px solid rgba(138, 111, 66, 0.6);
    background: rgba(184, 137, 43, 0.12);
}
body.h16 .hp-wcard-cta {
    font-family: var(--h16-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 13px;
    text-transform: uppercase;
    color: #6b4a1e;
}
body.h16 .hp-wcard-cta:hover { color: var(--h16-wax); }
body.h16 .hp-wcard-emblem,
body.h16 .hp-cairn-emblem {
    border-radius: 2px;
    color: #2a1d08;
    background: linear-gradient(180deg, #e8c46e, #c59a3c);
    box-shadow: inset 0 1px 0 rgba(255, 250, 225, 0.8), 0 2px 0 #6b4a12;
}
/* The emblem strips had a coloured glow behind them from the old palette. */
body.h16 .hp-wcard-glow,
body.h16 .hp-cairn-glow { background: radial-gradient(ellipse at 50% 0%, rgba(184, 137, 43, 0.25), transparent 70%); }
body.h16 .hp-cairn-sechead-sub,
body.h16 .hp-cairn-sechead-sub a { color: #b9a684; }
body.h16 .hp-cairn-sechead-sub a { color: var(--h16-gold); text-decoration-color: rgba(184, 137, 43, 0.5); }

/* A chip that carries a direction keeps its colour — it is a reading, not decoration — but sits on parchment now
   rather than on a white pill (memory: "color = valence, never velocity"). */
body.h16 .rp-dir {
    border-radius: 2px;
    background: rgba(255, 252, 240, 0.72);
    border: 1px solid rgba(138, 111, 66, 0.5);
    font-family: var(--h16-caps);
    font-size: 11.5px;
    letter-spacing: 0.06em;
}

/* Last of the old palette hiding in the Cairn card's prose and its one inline link. */
body.h16 .hp-cairn-msg,
body.h16 .hp-cairn-msg p { color: var(--h16-ink-soft); font-family: var(--h16-serif); font-size: 16px; }
body.h16 .hp-cairn-msg strong { color: var(--h16-ink); }
body.h16 .hp-cairn-sechead-sub a,
body.h16 .hp-cairn-sechead a { color: var(--h16-gold); }