/* ============================================================
   Book1A — Obsidian Editorial (v2)
   Matches book1a.com: floating pill nav, gold ledger language.
   Dark is the default reading surface; light is warm paper.
   ============================================================ */

/* ---------- Tokens ----------------------------------------- */
:root {
    /* brand constants */
    --gold:        #d4af37;
    --gold-deep:   #b8860b;
    --gold-bright: #e9c763;

    --f-display: var(--gh-font-heading, "Fraunces"), Georgia, "Times New Roman", serif;
    --f-sans:    var(--gh-font-body, "DM Sans"), -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --f-mono:    ui-monospace, "SF Mono", Menlo, monospace;

    --ease:     cubic-bezier(0.2, 0.7, 0.1, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --colw: 720px;
    --navw: 960px;

    --ghost-accent-color: #d4af37 !important;

    /* dark (default) — obsidian */
    --bg:    #070708;
    --bg2:   #101013;
    --panel: rgba(255, 255, 255, 0.028);
    --line:  rgba(255, 255, 255, 0.1);
    --line2: rgba(255, 255, 255, 0.055);
    --tx:    #bcb8ae;
    --tx2:   #efebe0;
    --tx3:   #94907f;
    --tx4:   #7f7b71;
    --au:    #e9c763;
    --au2:   #d4af37;
    --aud:   rgba(212, 175, 55, 0.38);
    --bgfx:  radial-gradient(ellipse 70% 42% at 50% -8%, rgba(212, 175, 55, 0.13), transparent 64%),
             radial-gradient(ellipse 50% 38% at 96% 100%, rgba(184, 134, 11, 0.07), transparent 60%);
}

html[data-theme="light"] {
    --bg:    #f7f2e6;
    --bg2:   #fdf9ef;
    --panel: rgba(23, 18, 8, 0.035);
    --line:  rgba(23, 18, 8, 0.15);
    --line2: rgba(23, 18, 8, 0.09);
    --tx:    #413a2f;
    --tx2:   #171410;
    --tx3:   #6e6450;
    --tx4:   #857960;
    --au:    #8a6508;
    --au2:   #b8860b;
    --aud:   rgba(184, 134, 11, 0.45);
    --bgfx:  radial-gradient(ellipse 70% 42% at 50% -8%, rgba(212, 175, 55, 0.18), transparent 64%),
             radial-gradient(ellipse 50% 38% at 96% 100%, rgba(184, 134, 11, 0.08), transparent 60%);
}

/* ---------- Reset & base ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
    font-family: var(--f-sans);
    font-size: 1.04rem;
    line-height: 1.78;
    color: var(--tx);
    background: var(--bg);
    min-height: 100vh;
    overflow-x: clip;
    max-width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    transition: background-color 0.35s var(--ease), color 0.25s var(--ease);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: var(--bgfx);
}
.site-main, .site-footer { position: relative; z-index: 1; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

::selection { background: var(--au2); color: #0b0a06; }
:focus-visible { outline: 2px solid var(--au2); outline-offset: 3px; border-radius: 4px; }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px; left: 50%;
    transform: translateX(-50%);
    background: var(--au2);
    color: #0b0a06;
    padding: 0.75rem 1.25rem;
    z-index: 9999;
    border-radius: 0 0 12px 12px;
    font-weight: 600;
    transition: top 0.2s var(--ease);
}
.skip-link:focus-visible { top: 0; outline: none; }

.eyebrow {
    font: 700 0.66rem/1.3 var(--f-sans);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--au);
}
.dot { color: var(--aud); }

/* ---------- Reading progress -------------------------------- */
.reading-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 1000;
    pointer-events: none;
}
.reading-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}

/* ---------- Pill nav — always obsidian ---------------------- */
.pillnav {
    position: fixed;
    top: 14px; left: 12px; right: 12px;
    z-index: 900;
    margin-inline: auto;
    max-width: var(--navw);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 1.1rem 0.55rem 0.9rem;
    background: rgba(8, 8, 10, 0.74);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.pillnav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.15rem 0.3rem;
}
.pillnav__home { display: inline-flex; }
.pillnav__logo { height: 30px; width: auto; }
.pillnav__tag {
    font: 500 0.92rem/1 var(--f-sans);
    letter-spacing: 0.01em;
    color: #b6b3aa;
    padding-left: 0.8rem;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}
.pillnav__tag:hover { color: #fff; }

.pillnav__links ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    gap: 0.25rem;
}
.pillnav__links a {
    position: relative;
    display: block;
    padding: 0.45rem 0.8rem;
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    color: #b6b3aa;
    transition: color 0.2s var(--ease);
}
.pillnav__links a:hover { color: #fff; }
.pillnav__links a::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0.15rem;
    transform: translateX(-50%);
    width: 0; height: 1px;
    background: var(--gold);
    transition: width 0.3s var(--ease-out);
}
.pillnav__links a:hover::after { width: 60%; }

.pillnav__actions { display: flex; align-items: center; gap: 0.4rem; }

.theme-tgl {
    width: 36px; height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #b6b3aa;
    position: relative;
}
.theme-tgl:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.theme-tgl svg { grid-area: 1 / 1; transition: opacity 0.25s var(--ease), transform 0.35s var(--ease); }
.theme-tgl .i-sun { opacity: 0; transform: rotate(-40deg) scale(0.5); }
.theme-tgl .i-moon { opacity: 1; transform: none; }
html[data-theme="light"] .theme-tgl .i-sun { opacity: 1; transform: none; }
html[data-theme="light"] .theme-tgl .i-moon { opacity: 0; transform: rotate(40deg) scale(0.5); }

.pillnav__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.5rem 1.05rem;
    border-radius: 999px;
    background: var(--gold);
    color: #0b0a06;
    font-weight: 600;
    font-size: 0.84rem;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.25);
    transition: box-shadow 0.25s var(--ease);
}
.pillnav__cta:hover { box-shadow: 0 6px 26px rgba(212, 175, 55, 0.4); }
.pillnav__cta .shimmer {
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transition: transform 0.7s var(--ease);
}
.pillnav__cta:hover .shimmer { transform: translateX(110%); }
.pillnav__cta svg { transition: transform 0.3s var(--ease-out); }
.pillnav__cta:hover svg { transform: translateX(3px); }
.pillnav__cta--mobile { padding: 0.42rem 0.85rem; font-size: 0.78rem; }

.pillnav__burger {
    display: none;
    width: 36px; height: 36px;
    border-radius: 999px;
    place-items: center;
    color: #cfccc4;
}
.pillnav__burger:hover { background: rgba(255, 255, 255, 0.08); }

.pillnav__menu {
    position: fixed;
    top: 74px; left: 12px; right: 12px;
    z-index: 899;
    margin-inline: auto;
    max-width: var(--navw);
    border-radius: 22px;
    padding: 0.6rem;
    background: rgba(10, 10, 12, 0.97);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.16);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.pillnav__menu[hidden] { display: none; }
.pillnav__menu ul { list-style: none; padding: 0; margin: 0; }
.pillnav__menu a {
    display: block;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    color: #d6d3cc;
}
.pillnav__menu a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.pillnav__menu-cta { color: var(--gold-bright) !important; font-weight: 600 !important; }

@media (max-width: 760px) {
    .pillnav__links, .pillnav__cta--desktop { display: none; }
    .pillnav__burger { display: grid; }
}
@media (min-width: 761px) {
    .pillnav__cta--mobile { display: none; }
    .pillnav__menu { display: none !important; }
}

/* ---------- Shared gold button ------------------------------ */
.goldbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    background: var(--gold);
    color: #0b0a06;
    font: 600 0.92rem/1 var(--f-sans);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 22px rgba(212, 175, 55, 0.3);
    transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.goldbtn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.45); }

/* ---------- Masthead (home / tag / author / error) ---------- */
.masthead {
    max-width: var(--colw);
    margin-inline: auto;
    padding: clamp(6.4rem, 5vw + 4rem, 8.4rem) 1.4rem 0;
    position: relative;
    z-index: 1;
}
.masthead--paged { padding-bottom: 0.5rem; }
.masthead__title {
    margin-top: 1.1rem;
    font-family: var(--f-display);
    font-weight: 410;
    font-variation-settings: "opsz" 144, "SOFT" 45;
    font-size: clamp(2.7rem, 7vw + 0.5rem, 4.8rem);
    line-height: 0.98;
    letter-spacing: -0.034em;
    color: var(--tx2);
    text-wrap: balance;
}
.masthead__title > span { display: block; }
.masthead__title em, .masthead__title--sm em {
    font-style: italic;
    color: var(--au);
    font-variation-settings: "opsz" 144, "SOFT" 90;
}
.masthead__title--sm {
    font-size: clamp(2rem, 4vw + 0.6rem, 3.1rem);
    line-height: 1.02;
}
.masthead--home { padding-bottom: 0.4rem; }
.masthead__title--quiet {
    margin-top: 0.8rem;
    font-size: clamp(1.4rem, 1.6vw + 0.8rem, 1.9rem);
    line-height: 1.15;
    font-weight: 440;
    letter-spacing: -0.02em;
}
.masthead__lede {
    margin-top: 1.5rem;
    font-size: clamp(1.02rem, 0.5vw + 0.9rem, 1.18rem);
    line-height: 1.65;
    color: var(--tx3);
    max-width: 52ch;
}
.masthead__count {
    margin-top: 1.4rem;
    font: 600 0.66rem/1.3 var(--f-sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tx4);
}

.author-hero { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.2rem; }
.author-hero__avatar { width: 84px; height: 84px; border-radius: 999px; object-fit: cover; border: 1px solid var(--line); }

.error-page { text-align: left; padding-bottom: 4rem; }
.error-page__action { margin-top: 2.2rem; }

/* ---------- The Lead (home feature) ------------------------- */
.lead-block {
    max-width: var(--colw);
    margin: clamp(2.6rem, 5vw, 4rem) auto 0;
    padding-inline: 1.4rem;
    position: relative;
    z-index: 1;
}
.lead-block__link {
    display: block;
    text-decoration: none;
    padding: 1.9rem 0.1rem 2rem;
    border-block: 1px solid var(--aud);
    position: relative;
}
.lead-block__kicker {
    display: flex;
    align-items: center;
    gap: 1rem;
    font: 700 0.64rem/1.3 var(--f-sans);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}
.lead-block__badge { color: var(--au); }
.lead-block__tag { color: var(--tx4); display: inline-flex; align-items: center; gap: 0.7em; }
.lead-block__tag::before { content: ""; width: 1.3rem; height: 1px; background: var(--line); }
.lead-block__title {
    font-family: var(--f-display);
    font-weight: 430;
    font-variation-settings: "opsz" 96, "SOFT" 35;
    font-size: clamp(1.7rem, 3vw + 0.7rem, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.026em;
    color: var(--tx2);
    text-wrap: balance;
    transition: color 0.2s var(--ease);
}
.lead-block__link:hover .lead-block__title { color: var(--au); }
.lead-block__excerpt {
    margin-top: 1rem;
    color: var(--tx3);
    line-height: 1.7;
    font-size: 0.99rem;
    max-width: 60ch;
}
.lead-block__image {
    margin-top: 1.6rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line2);
}
.lead-block__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lead-block__date { color: var(--tx4); display: inline-flex; align-items: center; gap: 0.7em; }
.lead-block__date::before { content: ""; width: 1.3rem; height: 1px; background: var(--line); }
.lead-block__meta {
    margin-top: 1.4rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tx4);
}
.lead-block__cta {
    margin-left: auto;
    font-weight: 600;
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    color: var(--au);
}
.lead-block__cta span { display: inline-block; transition: transform 0.25s var(--ease-out); }
.lead-block__link:hover .lead-block__cta span { transform: translateX(4px); }

/* ---------- Latest essays: numbered editorial grid ----------- */
.essays {
    max-width: var(--colw);
    margin-inline: auto;
    padding: clamp(2.2rem, 4vw, 3.2rem) 1.4rem 2rem;
    position: relative;
    z-index: 1;
}
.essays__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line2);
}
.essays__title {
    font-family: var(--f-display);
    font-weight: 440;
    font-variation-settings: "opsz" 72, "SOFT" 30;
    font-size: clamp(1.4rem, 1.8vw + 0.7rem, 1.8rem);
    letter-spacing: -0.02em;
    color: var(--tx2);
}
.essays__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 4vw, 3rem);
    counter-reset: essay;
}
.essay__num::before {
    counter-increment: essay;
    content: counter(essay, decimal-leading-zero);
}
@media (max-width: 760px) { .essays__grid { grid-template-columns: 1fr; } }
.essay { border-bottom: 1px solid var(--line2); }
.essay__link {
    display: flex;
    gap: 1.1rem;
    padding: 1.6rem 0.1rem 1.7rem;
    text-decoration: none;
    height: 100%;
}
.essay__num {
    font-family: var(--f-display);
    font-weight: 420;
    font-variation-settings: "opsz" 72, "SOFT" 40;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--au);
    opacity: 0.85;
    flex: 0 0 auto;
    padding-top: 0.15rem;
    font-variant-numeric: lining-nums;
}
.essay__kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    font: 700 0.6rem/1.4 var(--f-sans);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.essay__tag { color: var(--au); }
.essay__date { color: var(--tx4); }
.essay__title {
    font-family: var(--f-display);
    font-weight: 450;
    font-variation-settings: "opsz" 60, "SOFT" 30;
    font-size: clamp(1.18rem, 1vw + 0.9rem, 1.38rem);
    line-height: 1.16;
    letter-spacing: -0.016em;
    color: var(--tx2);
    text-wrap: balance;
    transition: color 0.2s var(--ease);
}
.essay__link:hover .essay__title { color: var(--au); }
.essay__excerpt {
    margin-top: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--tx3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.essay__meta {
    margin-top: 0.75rem;
    font: 600 0.62rem/1.4 var(--f-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tx4);
}

/* ---------- Archive rows ------------------------------------ */
.archive {
    max-width: var(--colw);
    margin-inline: auto;
    padding: clamp(2.4rem, 5vw, 3.6rem) 1.4rem 2rem;
    position: relative;
    z-index: 1;
}
.archive__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}
.archive__title {
    font-family: var(--f-display);
    font-weight: 440;
    font-variation-settings: "opsz" 72, "SOFT" 30;
    font-size: clamp(1.5rem, 2vw + 0.7rem, 1.95rem);
    letter-spacing: -0.02em;
    color: var(--tx2);
}

.archive-rows { border-top: 1px solid var(--line2); }
.row { border-bottom: 1px solid var(--line2); }
.row__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.4rem;
    padding: 1.5rem 0.1rem;
    text-decoration: none;
    position: relative;
}
.row--has-image .row__link { grid-template-columns: minmax(0, 1fr) 168px auto; }
.row__kicker {
    display: flex;
    align-items: center;
    gap: 1rem;
    font: 700 0.62rem/1.3 var(--f-sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
}
.row__tag { color: var(--au); }
.row__date { color: var(--tx4); }
.row__title {
    font-family: var(--f-display);
    font-weight: 440;
    font-variation-settings: "opsz" 60, "SOFT" 30;
    font-size: clamp(1.22rem, 1.2vw + 0.85rem, 1.5rem);
    line-height: 1.14;
    letter-spacing: -0.018em;
    color: var(--tx2);
    text-wrap: balance;
    transition: color 0.2s var(--ease);
}
.row__link:hover .row__title { color: var(--au); }
.row__excerpt {
    margin-top: 0.55rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--tx3);
    max-width: 60ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.row__meta {
    margin-top: 0.7rem;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tx4);
}
.row__image {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line2);
}
.row__image img { width: 168px; aspect-ratio: 3 / 2; object-fit: cover; }
.row__arr {
    color: var(--tx4);
    font-size: 1.1rem;
    transition: transform 0.25s var(--ease-out), color 0.2s var(--ease);
}
.row__link:hover .row__arr { transform: translateX(4px); color: var(--au); }
@media (max-width: 640px) {
    .row--has-image .row__link { grid-template-columns: minmax(0, 1fr) auto; }
    .row__image { display: none; }
}

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.6rem;
    font-size: 0.86rem;
    font-weight: 500;
}
.pager__link { color: var(--au); text-decoration: none; }
.pager__link:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.pager__state {
    font: 600 0.64rem/1.3 var(--f-sans);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tx4);
}

/* ---------- Post hero --------------------------------------- */
.hero {
    max-width: var(--colw);
    margin-inline: auto;
    padding: clamp(5.6rem, 4vw + 4rem, 7.2rem) 1.4rem 0;
    position: relative;
    z-index: 1;
}
.crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-bottom: 1.8rem;
    font: 600 0.66rem/1 var(--f-sans);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.crumb-back {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    color: var(--tx4);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}
.crumb-back .arr { transition: transform 0.25s var(--ease-out); }
.crumb-back:hover { color: var(--tx2); }
.crumb-back:hover .arr { transform: translateX(-3px); }
.crumb-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    color: var(--au);
    text-decoration: none;
}
.crumb-cat::before { content: ""; width: 1.5rem; height: 1px; background: var(--aud); }
.crumb-cat:hover { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }

.post-title {
    font-family: var(--f-display);
    font-weight: 430;
    font-variation-settings: "opsz" 144, "SOFT" 40;
    font-size: clamp(2.3rem, 5.4vw + 0.6rem, 3.9rem);
    line-height: 1.02;
    letter-spacing: -0.028em;
    color: var(--tx2);
    text-wrap: balance;
}
.post-lede {
    margin-top: 1.4rem;
    font-size: clamp(1.02rem, 0.5vw + 0.9rem, 1.2rem);
    line-height: 1.65;
    color: var(--tx3);
    max-width: 58ch;
}
.post-meta {
    margin-top: 1.9rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line2);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tx4);
}
.who {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--tx);
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.9rem;
    font-weight: 500;
}
.who__avatar { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; border: 1px solid var(--line); }
.who__mono, .author-card__avatar--mono {
    width: 30px; height: 30px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font-style: normal;
    font-family: var(--f-display);
    font-size: 0.8rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #0b0a06;
}
.who__name { color: inherit; text-decoration: none; }
.who__name:hover { color: var(--au); }

.post-cover {
    max-width: var(--colw);
    margin: 2.4rem auto 0;
    padding-inline: 1.4rem;
    position: relative;
    z-index: 1;
}
.post-cover img {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--line2);
}
.post-cover figcaption {
    margin-top: 0.8rem;
    font-size: 0.8rem;
    color: var(--tx4);
    text-align: center;
}

/* ---------- Reading rail ------------------------------------ */
/* ≥1340px: labeled Contents + Share on the left.
   1180–1339px: compact dot rail on the right (labels on hover).
   Below: hidden. JS adds .has-items / .rail--off near the footer. */
.rail {
    position: fixed;
    z-index: 150;
    display: none;
    transition: opacity 0.3s var(--ease);
}
.rail--off { opacity: 0; pointer-events: none; }
.rail__label {
    font: 700 0.6rem/1.3 var(--f-sans);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--tx4);
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--line2);
    margin-bottom: 0.7rem;
}
.rail__list a b {
    font: 600 0.58rem/1.7 var(--f-sans);
    letter-spacing: 0.08em;
    color: var(--au2);
    opacity: 0.85;
    flex: 0 0 auto;
}
.rail__share { margin-top: 1.6rem; }
.rail__share a {
    display: block;
    padding: 0.28rem 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--tx4);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}
.rail__share a:hover { color: var(--au); }
.rail__share a.is-copied { color: #93ab84; }

@media (min-width: 1340px) {
    .rail.has-items {
        display: block;
        left: calc(50vw - 640px);
        top: 50%;
        transform: translateY(-50%);
        width: 232px;
    }
    .rail__list { max-height: 56vh; overflow-y: auto; scrollbar-width: thin; }
    .rail__list::-webkit-scrollbar { width: 4px; }
    .rail__list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
    .rail__list a {
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
        padding: 0.3rem 0 0.3rem 0.75rem;
        margin-left: -0.75rem;
        border-left: 2px solid transparent;
        font-size: 0.82rem;
        line-height: 1.35;
        color: var(--tx4);
        text-decoration: none;
        transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
    }
    .rail__list a:hover { color: var(--tx2); }
    .rail__list a.on { color: var(--tx2); border-left-color: var(--au2); }
    .rail__list a.on span { font-weight: 500; }
}

@media (min-width: 1180px) and (max-width: 1339.98px) {
    .rail.has-items {
        display: block;
        right: 18px; left: auto;
        top: 50%;
        transform: translateY(-50%);
    }
    .rail__label, .rail__share { display: none; }
    .rail__list { display: flex; flex-direction: column; gap: 10px; }
    .rail__list a {
        position: relative;
        width: 9px; height: 9px;
        border-radius: 999px;
        background: var(--line);
        transition: background 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .rail__list a:hover { background: var(--tx4); }
    .rail__list a.on { background: var(--au2); transform: scale(1.25); }
    .rail__list a b { display: none; }
    .rail__list a span {
        position: absolute;
        right: 20px; top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        font-size: 0.72rem;
        font-weight: 500;
        color: #0b0a06;
        background: var(--gold-bright);
        padding: 0.35em 0.8em;
        border-radius: 999px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s var(--ease);
    }
    .rail__list a:hover span { opacity: 1; }
}

/* ---------- Engage rail (right, wide desktops) --------------- */
.erail {
    position: fixed;
    z-index: 150;
    display: none;
    right: calc(50vw - 640px);
    top: 50%;
    transform: translateY(-50%);
    width: 232px;
    transition: opacity 0.3s var(--ease);
}
.erail.rail--off { opacity: 0; pointer-events: none; }
@media (min-width: 1340px) { .erail { display: block; } }
.erail__pitch {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--tx3);
    margin-bottom: 0.9rem;
}
.erail__form { display: flex; flex-direction: column; gap: 0.5rem; }
.erail__form input {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--tx2);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s var(--ease);
}
.erail__form input:focus { border-color: var(--au2); }
.erail__form input::placeholder { color: var(--tx4); }
.erail__btn { padding: 0.6rem 1rem; font-size: 0.82rem; }
.erail__form .newsletter__meta { margin-top: 0.1rem; min-height: 0; font-size: 0.76rem; }
.erail__next { margin-top: 1.8rem; }
.erail__next-link { display: block; text-decoration: none; }
.erail__next-title {
    display: block;
    font-family: var(--f-display);
    font-weight: 450;
    font-variation-settings: "opsz" 40, "SOFT" 30;
    font-size: 0.98rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--tx2);
    transition: color 0.2s var(--ease);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.erail__next-link:hover .erail__next-title { color: var(--au); }
.erail__next-meta {
    display: block;
    margin-top: 0.45rem;
    font: 600 0.62rem/1.3 var(--f-sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tx4);
}
.erail__next-meta i { font-style: normal; color: var(--au2); transition: transform 0.25s var(--ease-out); display: inline-block; }
.erail__next-link:hover .erail__next-meta i { transform: translateX(3px); }

/* ---------- Featured card promo ------------------------------ */
/* One module, two homes: stacked inside the engage rail (≥1340px),
   horizontal panel inline after the article below that. */
.cardpromo__art {
    display: grid;
    place-items: center;
    min-height: 9rem;
    padding: 0.9rem;
    border-radius: 14px;
    background:
        radial-gradient(80% 95% at 50% 0%, rgba(212, 175, 55, 0.13), transparent 70%),
        var(--panel);
    box-shadow: inset 0 0 0 1px var(--line2);
}
.cardpromo__art img {
    width: auto;
    height: auto;
    max-width: 100%;
    /* hard cap in rem — portrait card art (e.g. Scapia, 494×785) must
       never set the panel height, or the rail outgrows the viewport */
    max-height: 7.25rem;
    border-radius: 8px;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
    transition: transform 0.3s var(--ease-out);
}
html[data-theme="light"] .cardpromo__art img { filter: drop-shadow(0 10px 22px rgba(23, 18, 8, 0.22)); }
.cardpromo__art:hover img { transform: translateY(-2px) rotate(-1deg); }
.cardpromo__name {
    margin-top: 0.85rem;
    font-family: var(--f-display);
    font-weight: 480;
    font-variation-settings: "opsz" 40, "SOFT" 30;
    font-size: 1.06rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--tx2);
}
.cardpromo__name a { text-decoration: none; transition: color 0.2s var(--ease); }
.cardpromo__name a:hover { color: var(--au); }
.cardpromo__facts {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--tx3);
}
.cardpromo__btn { margin-top: 0.8rem; width: 100%; padding: 0.6rem 1rem; font-size: 0.82rem; }
.cardpromo__meta {
    margin-top: 0.55rem;
    font: 500 0.7rem/1.4 var(--f-sans);
    color: var(--tx4);
}
.erail__block--card .cardpromo { margin-bottom: 1.7rem; }
/* Short desktop viewports: keep the centered rail clear of the pill nav */
@media (min-width: 1340px) and (max-height: 860px) {
    .erail .cardpromo__art { min-height: 0; padding: 0.7rem; }
    .erail .cardpromo__art img { max-height: 5.75rem; }
    .erail__next { display: none; }
}

/* Inline variant after the article (hidden once the rail takes over) */
.post-cardpromo {
    max-width: var(--colw);
    margin-inline: auto;
    padding: 0 1.4rem;
    position: relative;
    z-index: 1;
}
.post-cardpromo .cardpromo {
    margin-top: 2.6rem;
    padding: 1.4rem;
    border-radius: 18px;
    background: var(--panel);
    box-shadow: inset 0 0 0 1px var(--line2);
}
.post-cardpromo .cardpromo__label { margin-bottom: 1.1rem; }
.post-cardpromo .cardpromo__main {
    display: grid;
    grid-template-columns: minmax(170px, 220px) 1fr;
    gap: 1.4rem;
    align-items: center;
}
.post-cardpromo .cardpromo__name { margin-top: 0; font-size: 1.3rem; }
.post-cardpromo .cardpromo__btn { width: auto; }
@media (max-width: 560px) {
    .post-cardpromo .cardpromo__main { display: block; }
    .post-cardpromo .cardpromo__body { margin-top: 1rem; }
    .post-cardpromo .cardpromo__btn { width: 100%; }
}
@media (min-width: 1340px) {
    .post-cardpromo { display: none; }
}

/* ---------- Mobile dock (post pages, ≤760px) ------------------ */
/* Obsidian chrome in both themes, like the pill nav: a reading-progress
   hairline plus the card Apply CTA (or Dispatch subscribe) and an
   expandable subscribe sheet. theme.js adds .dock--ready / .dock--show. */
.dock {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 850;
    display: none;
    border-radius: 22px;
    background: rgba(10, 10, 12, 0.88);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
@media (max-width: 760px) {
    html.js .dock.dock--ready { display: block; }
}
.dock.dock--show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dock [hidden] { display: none !important; }
.dock__progress {
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    overflow: hidden;
    pointer-events: none;
}
.dock__progress b {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
}
.dock__bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.62rem 0.62rem 0.62rem 0.85rem;
}
.dock__card {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}
.dock__thumb {
    height: 38px;
    width: auto;
    max-width: 56px;
    border-radius: 5px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}
.dock__txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: left;
}
.dock__txt strong {
    font: 600 0.84rem/1.2 var(--f-sans);
    color: #efebe0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dock__txt span {
    font: 600 0.56rem/1.3 var(--f-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a857a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dock__btn { flex: 0 0 auto; padding: 0.52rem 0.95rem; font-size: 0.78rem; }
.dock__nl {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0;
}
.dock--nl .dock__mail { display: none; }
.dock__mail {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #bcb8ae;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    transition: color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.dock__mail:hover,
.dock--open .dock__mail { color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.5); }
.dock__sheet {
    padding: 1.05rem 1.1rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    animation: dock-sheet-in 0.28s var(--ease-out);
}
@keyframes dock-sheet-in {
    from { opacity: 0; transform: translateY(8px); }
}
.dock__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dock__sheet-label {
    font: 700 0.6rem/1.3 var(--f-sans);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #8a857a;
}
.dock__close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #bcb8ae;
    transition: color 0.2s var(--ease);
}
.dock__close:hover { color: #efebe0; }
.dock__pitch {
    margin-top: 0.45rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: #bcb8ae;
}
.dock__form {
    margin-top: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dock__form input {
    width: 100%;
    padding: 0.62rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #efebe0;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s var(--ease);
}
.dock__form input:focus { border-color: var(--gold); }
.dock__form input::placeholder { color: #7f7b71; }
.dock__formbtn { padding: 0.62rem 1rem; font-size: 0.84rem; }
.dock__form .newsletter__meta { margin: 0.15rem 0 0; min-height: 0; font-size: 0.76rem; color: #94907f; }
.dock__form .nl__reset { color: #8a857a; }
.dock__form .nl__reset:hover { color: #efebe0; }

/* ---------- Article content --------------------------------- */
.post-content {
    max-width: var(--colw);
    margin-inline: auto;
    padding: 2.6rem 1.4rem 4rem;
    counter-reset: chap;
    position: relative;
    z-index: 1;
    overflow-wrap: break-word;
}
.post-content > * + * { margin-top: 1.3em; }
.post-content p strong, .post-content li strong { color: var(--tx2); font-weight: 600; }
.post-content em { color: var(--tx2); }
.post-content a {
    color: var(--au);
    text-decoration: underline;
    text-decoration-color: var(--aud);
    text-underline-offset: 0.18em;
    transition: text-decoration-color 0.2s var(--ease);
}
.post-content a:hover { text-decoration-color: var(--au); }

.post-content h2 {
    counter-increment: chap;
    font-family: var(--f-display);
    font-weight: 440;
    font-variation-settings: "opsz" 72, "SOFT" 25;
    font-size: clamp(1.55rem, 1.8vw + 0.9rem, 2.05rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--tx2);
    margin-top: 3em;
    padding-top: 1.4em;
    position: relative;
    text-wrap: balance;
}
.post-content h2::before {
    content: "0" counter(chap);
    position: absolute;
    top: 0; left: 0;
    font: 600 0.68rem/1 var(--f-sans);
    letter-spacing: 0.3em;
    color: var(--au2);
    opacity: 0.9;
}
.post-content h2::after {
    content: "";
    position: absolute;
    top: 0.95em; left: 0;
    width: 2.6rem; height: 1px;
    background: linear-gradient(90deg, var(--au2), transparent);
}
.post-content h3 {
    font-family: var(--f-display);
    font-weight: 480;
    font-size: 1.22rem;
    color: var(--tx2);
    margin-top: 1.6em;
    line-height: 1.2;
}
.post-content h4 {
    font-family: var(--f-sans);
    font-weight: 650;
    font-size: 1.02rem;
    color: var(--tx2);
    margin-top: 1.5em;
}

.post-content ul, .post-content ol { padding-left: 1.3em; }
.post-content li { margin-bottom: 0.45em; }
.post-content li::marker { color: var(--au2); }

.post-content blockquote {
    margin-block: 2.2em;
    padding: 0.3em 0 0.3em 1.6rem;
    border-left: 2px solid var(--au2);
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--tx2);
    font-variation-settings: "opsz" 40, "SOFT" 70;
}
.post-content blockquote p { font-style: inherit; }

.post-content hr {
    border: none;
    margin-block: 3em;
    height: 1px;
    background: var(--line);
}

.post-content img { border-radius: 12px; }
.post-content figure { margin-block: 2.2em; }
.post-content .kg-width-wide {
    width: min(92vw, 1000px);
    margin-inline: calc((100% - min(92vw, 1000px)) / 2);
    max-width: none;
}
.post-content .kg-width-full {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    max-width: none;
}
.post-content .kg-width-full img { border-radius: 0; }
.post-content figcaption, .post-content .kg-image-caption {
    margin-top: 0.8em;
    text-align: center;
    font-size: 0.8rem;
    color: var(--tx4);
}

.post-content code {
    font-family: var(--f-mono);
    font-size: 0.85em;
    background: var(--panel);
    box-shadow: inset 0 0 0 1px var(--line2);
    padding: 0.15em 0.4em;
    border-radius: 5px;
    color: var(--au);
}
.post-content pre {
    background: var(--bg2);
    box-shadow: inset 0 0 0 1px var(--line2);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.6;
}
.post-content pre code { background: none; box-shadow: none; padding: 0; color: var(--tx); }

/* ---------- Tables: ruled ledger + stacked on mobile --------- */
.twrap { position: relative; margin-block: 2.2em; }
.twrap__scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border-radius: 12px; }
.twrap table { width: 100%; border-collapse: collapse; margin: 0; }
.twrap__hint {
    position: absolute;
    top: -0.7rem; right: 0;
    display: none;
    align-items: center;
    gap: 0.35em;
    font: 600 0.62rem/1 var(--f-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.35em 0.7em;
    border-radius: 999px;
    background: var(--au2);
    color: #0b0a06;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
    z-index: 3;
}
.twrap.can-scroll .twrap__hint { display: inline-flex; }
.twrap.was-scrolled .twrap__hint { opacity: 0; }
.twrap__fade {
    position: absolute;
    top: 0; bottom: 0;
    width: 44px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s var(--ease);
    z-index: 2;
}
.twrap__fade--l { left: 0; background: linear-gradient(90deg, var(--bg), transparent); border-radius: 12px 0 0 12px; }
.twrap__fade--r { right: 0; background: linear-gradient(270deg, var(--bg), transparent); border-radius: 0 12px 12px 0; }
.twrap.can-scroll:not(.at-start) .twrap__fade--l { opacity: 1; }
.twrap.can-scroll:not(.at-end) .twrap__fade--r { opacity: 1; }

.twrap--data { border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line2); }
.twrap--data table { min-width: 540px; font-size: 0.88rem; }
.twrap--data thead th {
    position: sticky;
    top: 0;
    text-align: left;
    padding: 0.85rem 1.1rem;
    font: 600 0.62rem/1.3 var(--f-sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--au);
    background: var(--bg2);
    border-bottom: 1px solid var(--aud);
    white-space: nowrap;
}
.twrap--data tbody td {
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--line2);
    color: var(--tx);
    font-variant-numeric: tabular-nums lining-nums;
    vertical-align: top;
}
.twrap--data tbody tr:last-child td { border-bottom: none; }
.twrap--data tbody td strong { color: var(--au); font-weight: 600; }
/* category group headers exist only for the stacked mobile view */
.twrap__group { display: none; }

@media (max-width: 640px) {
    .twrap--data { background: transparent; box-shadow: none; border-radius: 0; border-block: 1px solid var(--aud); }
    .twrap--data .twrap__scroller { overflow: visible; border-radius: 0; }
    .twrap--data table { min-width: 0; }
    .twrap--data table, .twrap--data tbody, .twrap--data tr, .twrap--data td { display: block; width: 100%; }
    .twrap--data thead { display: none; }
    .twrap--data tbody tr { padding: 0.35rem 0 0.55rem; border-bottom: 1px solid var(--line); }
    .twrap--data tbody tr:last-child { border-bottom: none; }
    .twrap--data tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1.2rem;
        text-align: right;
        padding: 0.5rem 0.1rem;
        border-bottom: 1px dotted var(--line2);
    }
    .twrap--data tbody td:last-child { border-bottom: none; }
    .twrap--data tbody td::before {
        content: attr(data-label);
        flex: 0 0 44%;
        text-align: left;
        font: 600 0.6rem/1.5 var(--f-sans);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--tx4);
    }
    .twrap--data tbody td:first-child {
        display: block;
        text-align: left;
        padding: 0.6rem 0.1rem 0.5rem;
        color: var(--tx2);
        font-weight: 600;
        font-size: 0.97rem;
    }
    .twrap--data tbody td:first-child::before { display: none; }
    .twrap--data .twrap__hint, .twrap--data .twrap__fade { display: none !important; }

    /* grouped tables: one section header per category run; the second
       column takes over as each row's heading */
    .twrap--data tr.twrap__group {
        display: block;
        padding: 1.3rem 0 0;
        border-bottom: none;
    }
    .twrap--data tbody tr.twrap__group:first-child { padding-top: 0.35rem; }
    .twrap--data tr.twrap__group td {
        display: block;
        text-align: left;
        padding: 0 0.1rem 0.4rem;
        border-bottom: 1px solid var(--aud);
        font: 700 0.64rem/1.3 var(--f-sans);
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--au);
    }
    .twrap--data tr.twrap__group td::before { display: none; }
    .twrap--data table.twrap-grouped tbody tr:not(.twrap__group) td:first-child { display: none; }
    .twrap--data table.twrap-grouped tbody tr:not(.twrap__group) td:nth-child(2) {
        display: block;
        text-align: left;
        padding: 0.6rem 0.1rem 0.5rem;
        color: var(--tx2);
        font-weight: 600;
        font-size: 0.97rem;
        border-bottom: 1px dotted var(--line2);
    }
    .twrap--data table.twrap-grouped tbody tr:not(.twrap__group) td:nth-child(2)::before { display: none; }
}

/* receipt tables (inside the gold callout) — never scroll, never stack */
.twrap--plain { margin: 1.4em 0 0; }
.twrap--plain .twrap__scroller { overflow: visible; border-radius: 0; }
.twrap--plain table { min-width: 0; font-size: 0.92rem; }
.twrap--plain thead th {
    text-align: left;
    padding: 0.55rem 0;
    font: 600 0.62rem/1.3 var(--f-sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--au);
    border-bottom: 1px solid var(--aud);
}
.twrap--plain thead th:last-child { text-align: right; }
.twrap--plain tbody td {
    padding: 0.7rem 0;
    border-bottom: 1px dotted var(--line);
    color: var(--tx);
    font-variant-numeric: tabular-nums lining-nums;
}
.twrap--plain tbody td:last-child { text-align: right; color: var(--tx2); white-space: nowrap; }
.twrap--plain tbody tr:last-child td { border-bottom: none; border-top: 1px solid var(--aud); padding-top: 0.85rem; }
.twrap--plain tbody tr:last-child td strong { color: var(--au); }
.twrap--plain tbody td strong { color: var(--tx2); }
.twrap--plain .twrap__hint, .twrap--plain .twrap__fade { display: none !important; }

/* ---------- Stat ledger ------------------------------------- */
.post-content .stat-grid {
    padding: 0;
    list-style: none;
    margin-block: 2.2em;
    border-block: 1px solid var(--aud);
}
.post-content .stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label value" "desc value";
    column-gap: 1.6rem;
    align-items: baseline;
    padding: 1.05rem 0.15rem;
    margin: 0;
    border-bottom: 1px dotted var(--line);
}
.post-content .stat:last-child { border-bottom: none; }
.post-content .stat__label {
    grid-area: label;
    font: 600 0.64rem/1.3 var(--f-sans);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tx3);
    margin-bottom: 0.35rem;
}
.post-content .stat__value {
    grid-area: value;
    align-self: center;
    justify-self: end;
    font-family: var(--f-display);
    font-weight: 430;
    font-size: clamp(1.45rem, 1.4vw + 0.9rem, 1.85rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--au);
    font-variant-numeric: lining-nums;
    white-space: nowrap;
}
.post-content .stat__value em { font-style: italic; color: inherit; }
.post-content .stat__desc {
    grid-area: desc;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--tx4);
    max-width: 48ch;
}

/* ---------- Bar rows ---------------------------------------- */
.post-content .bar-row {
    display: grid;
    grid-template-columns: minmax(120px, auto) minmax(0, 1fr) minmax(54px, auto);
    align-items: center;
    gap: 0.9rem;
    margin-block: 0.8em;
    font-size: 0.84rem;
}
.post-content .bar-row__label { color: var(--tx2); font-weight: 500; }
.post-content .bar-row__track {
    height: 8px;
    border-radius: 999px;
    background: var(--line2);
    overflow: hidden;
}
.post-content .bar-row__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}
.post-content .bar-row__value {
    justify-self: end;
    font-weight: 600;
    color: var(--au);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
}
@media (max-width: 520px) {
    .post-content .bar-row { grid-template-columns: minmax(0, 1fr) minmax(50px, auto); }
    .post-content .bar-row__label { grid-column: 1 / -1; margin-bottom: -0.4em; }
}

/* ---------- Callouts: margin notes -------------------------- */
.post-content .callout {
    margin-block: 2em;
    padding: 0.4rem 0 0.4rem 1.5rem;
    border-left: 2px solid var(--aud);
    background: transparent;
    position: relative;
}
.post-content .callout--success { border-left-color: #7e9470; }
.post-content .callout--info { border-left-color: #7799ad; }
.post-content .callout > * + *, .post-content .callout > div > * + * { margin-top: 0.8em; }
.post-content .callout .kicker {
    font: 700 0.62rem/1.2 var(--f-sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--au);
    margin-bottom: 0.6rem;
}
.post-content .callout--success .kicker { color: #93ab84; }
.post-content .callout--info .kicker { color: #92b2c5; }
html[data-theme="light"] .post-content .callout--success .kicker { color: #55683f; }
html[data-theme="light"] .post-content .callout--info .kicker { color: #3c647e; }
.post-content .callout h2, .post-content .callout h3 { margin-top: 0; padding-top: 0; }
.post-content .callout h2::before, .post-content .callout h2::after { display: none; }
.post-content .callout p, .post-content .callout li { font-size: 0.97rem; line-height: 1.7; }

/* the gold "deal sheet" gets framing rules instead of a card */
.post-content .callout--gold {
    border-left: none;
    padding: 1.7rem 0.1rem 1.8rem;
    border-block: 1px solid var(--aud);
}

.post-content .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-block: 2.2em;
}
.post-content .split .callout { margin-block: 0; }
@media (max-width: 680px) {
    .post-content .split { grid-template-columns: 1fr; gap: 1.4rem; }
}

.post-content .chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    list-style: none;
    padding: 0;
    margin-block: 1.4em;
}
.post-content .chip {
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--tx);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--line);
    margin: 0;
}

/* ---------- Verdict: closing editorial section --------------- */
.post-content .verdict {
    margin-block: 3.6em 0;
    padding: 2.2rem 0 0.2rem;
    position: relative;
    background: transparent;
    border-top: 1px solid var(--aud);
}
.post-content .verdict::before {
    content: "";
    position: absolute;
    top: 4px; left: 0; right: 0;
    height: 1px;
    background: var(--aud);
}
.post-content .verdict .kicker {
    color: var(--au);
    font: 700 0.62rem/1.2 var(--f-sans);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.post-content .verdict h2 {
    counter-increment: none;
    margin: 0 0 1rem;
    padding: 0;
    font-family: var(--f-display);
    font-weight: 430;
    font-size: clamp(1.7rem, 2.4vw + 0.8rem, 2.4rem);
    line-height: 1.06;
    letter-spacing: -0.022em;
    color: var(--tx2);
    text-wrap: balance;
}
.post-content .verdict h2::before, .post-content .verdict h2::after { display: none; }
.post-content .verdict p { color: var(--tx); }
.post-content .verdict p + p { margin-top: 1em; }
.post-content .verdict strong { color: var(--au); }
.post-content .verdict ul {
    list-style: none;
    padding: 0;
    margin-block: 1.5em;
    border-top: 1px solid var(--line2);
    color: var(--tx2);
}
.post-content .verdict li {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.75em 0.1rem;
    margin: 0;
    border-bottom: 1px solid var(--line2);
}
.post-content .verdict li::before { content: "—"; color: var(--au2); flex: 0 0 auto; }

/* ---------- Ghost cards compat ------------------------------- */
.kg-bookmark-card, .kg-bookmark-container { margin-block: 2.2em; }
.kg-bookmark-container {
    display: flex;
    text-decoration: none !important;
    border-radius: 12px;
    background: var(--panel) !important;
    box-shadow: inset 0 0 0 1px var(--line2) !important;
    color: var(--tx) !important;
    overflow: hidden;
}
.kg-bookmark-content { padding: 1.1rem 1.25rem !important; }
.kg-bookmark-title { color: var(--tx2) !important; font-weight: 600; }
.kg-bookmark-description { color: var(--tx3) !important; }
.kg-bookmark-metadata { color: var(--tx4) !important; }
.kg-bookmark-thumbnail img { border-radius: 0; }
.post-content .kg-callout-card { border-radius: 12px; }
.post-content .kg-embed-card { margin-block: 2.2em; }

/* ---------- Post footnote ------------------------------------ */
.post-footnote {
    max-width: var(--colw);
    margin: 0 auto;
    padding: 0 1.4rem 1rem;
    position: relative;
    z-index: 1;
}
.post-footnote > div {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    padding: 0.9rem 0.1rem;
    border-bottom: 1px solid var(--line2);
    font-size: 0.86rem;
}
.post-footnote > div:last-child { border-bottom: none; }
.post-footnote__label {
    font: 600 0.62rem/1.5 var(--f-sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tx4);
    margin-right: 0.4rem;
}
.post-footnote a { color: var(--tx); text-decoration: none; font-weight: 500; }
.post-footnote a:hover { color: var(--au); }
.post-footnote .tag-link { color: var(--au); }
.post-footnote .tag-link:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.post-footnote__share a[data-share].is-copied { color: #93ab84; }
.post-footnote__date { color: var(--tx4); font-size: 0.78rem; }

/* ---------- Author card -------------------------------------- */
.author-card {
    max-width: var(--colw);
    margin: 0 auto;
    padding: 1.6rem 1.4rem 2.4rem;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}
.author-card__avatar {
    width: 56px; height: 56px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--line);
    flex: 0 0 auto;
}
.author-card__avatar--mono { width: 56px; height: 56px; font-size: 1.3rem; }
.author-card__name {
    margin-top: 0.35rem;
    font-family: var(--f-display);
    font-weight: 460;
    font-size: 1.3rem;
    letter-spacing: -0.015em;
    color: var(--tx2);
}
.author-card__name a { text-decoration: none; color: inherit; }
.author-card__name a:hover { color: var(--au); }
.author-card__bio { margin-top: 0.4rem; font-size: 0.92rem; line-height: 1.65; color: var(--tx3); max-width: 56ch; }

/* ---------- Related ------------------------------------------ */
.related {
    max-width: var(--colw);
    margin-inline: auto;
    padding: 1.6rem 1.4rem 2rem;
    position: relative;
    z-index: 1;
}
.related__head { margin-bottom: 0.5rem; }

/* ---------- Footer -------------------------------------------- */
.site-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--line2);
    background: var(--panel);
}
.foot__inner {
    max-width: var(--navw);
    margin-inline: auto;
    padding: 3rem 1.4rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
}
@media (max-width: 760px) { .foot__inner { grid-template-columns: 1fr; } }
.foot__title {
    margin-top: 0.7rem;
    font-family: var(--f-display);
    font-weight: 420;
    font-size: clamp(1.4rem, 2vw + 0.6rem, 1.9rem);
    line-height: 1.15;
    color: var(--tx2);
}
.foot__small { margin-top: 0.8rem; color: var(--tx3); font-size: 0.92rem; }

.nl { display: flex; gap: 0.5rem; }
.nl input {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--tx2);
    outline: none;
    transition: border-color 0.2s var(--ease);
}
.nl input:focus { border-color: var(--au2); }
.nl input::placeholder { color: var(--tx4); }

.newsletter__meta {
    min-height: 1.2rem;
    margin-top: 0.6rem;
    font-size: 0.84rem;
    color: var(--tx3);
}
.newsletter__form.success .newsletter__meta::before { content: "You're on the list ✓"; color: #93ab84; }
html[data-theme="light"] .newsletter__form.success .newsletter__meta::before { color: #55683f; }
.newsletter__form.error .newsletter__meta::before { content: "That didn't work — please check the address and try again."; color: var(--au); }
.newsletter__form.loading .goldbtn { opacity: 0.6; pointer-events: none; }

/* on success the form morphs: input row out, quiet next-step CTA in */
.nl__joincta { display: none; margin-top: 0.4rem; }
.newsletter__form.success .nl,
.newsletter__form.success input[type="email"],
.newsletter__form.success button[type="submit"] { display: none; }
.newsletter__form.success .nl__joincta { display: inline-flex; }
.nl__reset {
    display: none;
    margin-top: 0.6rem;
    padding: 0;
    font: 500 0.74rem/1.3 var(--f-sans);
    color: var(--tx4);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    transition: color 0.2s var(--ease);
}
.nl__reset:hover { color: var(--tx2); }
.newsletter__form.success .nl__reset { display: block; }

.colo {
    max-width: var(--navw);
    margin-inline: auto;
    padding: 0 1.4rem 2.2rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
}
.colo__wordmark {
    font-family: var(--f-display);
    font-weight: 420;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    color: var(--tx2);
    text-decoration: none;
}
.colo__wordmark em { font-style: italic; color: var(--au); }
.colo__note { margin-top: 0.5rem; font-size: 0.82rem; color: var(--tx4); max-width: 34ch; }
.colo__nav { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1rem; }
.colo__nav ul { list-style: none; display: flex; gap: 1rem; padding: 0; margin: 0; }
.colo__nav a {
    font-size: 0.84rem;
    color: var(--tx3);
    text-decoration: none;
}
.colo__nav a:hover { color: var(--au); }
.colo__copy {
    font: 600 0.62rem/1.5 var(--f-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tx4);
}