/* ==========================================================================
   adamfisher.click — shared site styles
   The canonical page shell is "The Addressable Enterprise" (June 2026):
   paper-gray page, white panels, ink text, teal accent with amber and plum
   secondaries, Fraunces headings, IBM Plex Sans body, one 980px column,
   sticky .bar, 56px sections split by rules, kicker/h1/lede/byline hero.
   Every white paper repeats this shell exactly; papers that carry their own
   inline styles copy the SHELL block below verbatim.
   ========================================================================== */

:root {
    --paper: #EEF1F5;
    --paper-2: #FFFFFF;
    --ink: #0F1B2D;
    --ink-2: #3B4759;
    --mute: #6B7686;
    --rule: #CFD6DF;
    --teal: #0E7C86;
    --teal-soft: #D5EDEF;
    --amber: #D9A21B;
    --amber-soft: #F7ECCB;
    --plum: #6B4C9A;
    --plum-soft: #E6DEF3;

    /* Semantic aliases used by page-level styles */
    --bg-primary: var(--paper);
    --bg-secondary: var(--paper);
    --bg-card: var(--paper-2);
    --bg-card-hover: var(--teal-soft);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--mute);
    --accent: var(--teal);
    --accent-soft: var(--teal-soft);
    --accent-glow: var(--teal-soft);
    --accent-strong: var(--ink);
    --accent-strong-soft: var(--amber-soft);
    --accent-alt: var(--plum);
    --accent-alt-soft: var(--plum-soft);
    --border-subtle: var(--rule);
    --border-strong: var(--rule);
    --border-hover: var(--teal);

    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-lede: var(--font-body);
    --font-mono: var(--font-body);
    --font-code: "IBM Plex Mono", ui-monospace, Menlo, monospace;

    --gutter: 20px;
    --content-width: 980px;
    --wide-width: 980px;

    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --paper: #0D1420; --paper-2: #152033; --ink: #E9EEF5; --ink-2: #C2CBD8; --mute: #8C98AA; --rule: #2A3648;
        --teal: #39B2BC; --teal-soft: #123A40; --amber: #E7B53A; --amber-soft: #3F3415; --plum: #A98BD8; --plum-soft: #2E2444;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #0D1420; --paper-2: #152033; --ink: #E9EEF5; --ink-2: #C2CBD8; --mute: #8C98AA; --rule: #2A3648;
    --teal: #39B2BC; --teal-soft: #123A40; --amber: #E7B53A; --amber-soft: #3F3415; --plum: #A98BD8; --plum-soft: #2E2444;
}

/* ============================== SHELL ==================================== */
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 64px); scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: 17px; line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--paper); z-index: 30; }
h1, h2, h3 { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: clamp(2rem, 5.5vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-top: .2em; }
h3 { font-size: 1.25rem; margin-top: 1.6em; margin-bottom: .4em; }
p { margin: .8em 0; }
a { color: var(--teal); }
strong { font-weight: 600; }
ul, ol { padding-left: 1.2em; }
li { margin: .35em 0; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.wide { max-width: 980px; margin: 0 auto; padding: 0 20px; }
main > section, body > section { padding: 56px 0; }
main > section + section, body > section + section { border-top: 1px solid var(--rule); }

.kicker { font-family: "Fraunces", Georgia, serif; font-style: italic; color: var(--mute); font-size: 1.05rem; margin: 0 0 .3em; }
.lede { font-size: 1.2rem; line-height: 1.5; color: var(--ink-2); }
.byline { color: var(--mute); font-size: .95rem; }

/* top bar: home link + this page's section links */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.bar nav { max-width: 980px; margin: 0 auto; padding: 10px 20px; display: flex; gap: 18px; overflow-x: auto; font-size: .85rem; white-space: nowrap; scrollbar-width: none; }
.bar nav::-webkit-scrollbar { display: none; }
.bar a { color: var(--ink-2); text-decoration: none; padding: 4px 0; }
.bar a:hover { color: var(--teal); }
.bar a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width:1000px){ .bar nav{-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}}
.bar a.home { font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--ink); padding-right: 18px; border-right: 1px solid var(--rule); }

/* hero */
.hero { padding: 40px 0 20px; border-top: none; }

/* footer */
footer { padding: 40px 0 60px; color: var(--mute); font-size: .9rem; border-top: 1px solid var(--rule); }
footer a { color: var(--ink-2); }
/* ============================ END SHELL ================================== */

/* --------------------------------------------------------------------------
   Legacy hero classes (older papers) — rendered identically to .hero
   -------------------------------------------------------------------------- */
.article-hero { max-width: 980px; width: 100%; margin: 0 auto; padding: 40px 20px 20px; }
.article-title { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-size: clamp(2rem, 5.5vw, 4rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.article-title em { font-style: normal; color: inherit; }
.article-lede { font-size: 1.2rem; line-height: 1.5; color: var(--ink-2); max-width: 62ch; margin: .8em 0; }
.eyebrow { font-family: "Fraunces", Georgia, serif; font-style: italic; color: var(--mute); font-size: 1.05rem; margin: 0 0 .3em; }

/* --------------------------------------------------------------------------
   Shared components
   -------------------------------------------------------------------------- */
.prose { color: var(--ink); }
.prose strong { color: inherit; }

.prose blockquote,
.pull-quote {
    margin: 28px 0;
    padding: 14px 18px;
    border-left: 4px solid var(--teal);
    background: var(--paper-2);
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-style: normal;
    line-height: 1.4;
    color: var(--ink);
}

.panel { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; padding: 24px 26px; }

figure { margin: 28px 0; }
figcaption { font-size: .9rem; color: var(--mute); margin-top: 10px; line-height: 1.45; }
.fig { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px; padding: 16px; overflow-x: auto; }

.stat-value { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; line-height: 1.05; color: var(--ink); }
.stat-label { font-size: .88rem; line-height: 1.45; color: var(--mute); margin-top: 6px; }
.label { font-size: .8rem; font-weight: 600; color: var(--mute); }

.btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .9rem; font-weight: 500; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.btn:hover { border-color: var(--teal); color: var(--teal); }
.btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-primary:hover { color: #fff; filter: brightness(1.08); }
.btn-ghost { background: var(--paper-2); }

table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 1em 0; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--mute); font-weight: 600; font-size: .85rem; }
.tscroll { overflow-x: auto; }

code { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: .9em; background: var(--teal-soft); color: var(--ink); padding: 1px 5px; border-radius: 4px; }
pre, pre * { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}