/* ============================================================
   Shared styles for the Articles index and article pages.
   Mirrors the design tokens used across CaseMargin (see index.html).
   Edit here once to restyle every article.
   ============================================================ */
:root {
    --canvas:        #F7F6F3;
    --surface:       #FFFFFF;
    --ink:           #23211C;
    --ink-muted:     #8A8276;
    --border:        #E6E3DC;
    --border-strong: #D8D4CB;
    --accent:        #3E5C76;
    --pill-bg:       #FBF3DB;
    --pill-ink:      #8A6A1F;
    --font-serif: "Newsreader", Georgia, serif;
    --font-sans:  "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --font-mono:  "Geist Mono", ui-monospace, monospace;
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
}
.wrap-narrow {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
}

/* ================= MOTION ================= */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms var(--ease-expo), transform 800ms var(--ease-expo);
}
.reveal.inview { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ================= NAV ================= */
nav.site {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: clamp(20px, 3vw, 32px) 0;
    flex-wrap: wrap;
    gap: 12px;
}
.wordmark {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}
.nav-links { display: flex; gap: clamp(16px, 3vw, 32px); align-items: baseline; flex-wrap: wrap; }
.nav-links a {
    font-size: 0.85rem;
    color: var(--ink-muted);
    text-decoration: none;
    transition: color 140ms ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-cta {
    font-weight: 500;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
}

/* ================= INDEX HEADER ================= */
.page-head { padding: clamp(32px, 7vh, 72px) 0 clamp(28px, 5vh, 48px); }
.page-head .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 14px;
}
.page-head h1 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 0 0 16px;
}
.page-head h1 em { font-style: italic; font-weight: 400; }
.page-head p {
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    color: var(--ink-muted);
    max-width: 52ch;
    margin: 0;
}

/* ================= ARTICLE GRID ================= */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
    padding-bottom: clamp(48px, 9vh, 96px);
}
.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 22px 20px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(35, 33, 28, 0.03);
    transition: transform 400ms var(--ease-expo), box-shadow 400ms var(--ease-expo), border-color 160ms ease;
}
.card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: 0 4px 12px rgba(35, 33, 28, 0.06), 0 18px 44px rgba(35, 33, 28, 0.09);
}
.card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.pill {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pill-ink);
    background: var(--pill-bg);
    padding: 3px 9px;
    border-radius: 9999px;
}
.card-date {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-muted);
}
.card h2 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.32rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
}
.card p {
    font-size: 0.9rem;
    color: var(--ink-muted);
    margin: 0 0 18px;
}
.card .read {
    margin-top: auto;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink);
    transition: color 140ms ease;
}
.card:hover .read { color: var(--accent); }
.card .read::after { content: " \2192"; }

/* ================= ARTICLE PAGE ================= */
.article-wrap { padding: clamp(12px, 3vh, 28px) 0 clamp(56px, 9vh, 100px); }
.back-link {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    text-decoration: none;
    margin-bottom: clamp(24px, 5vh, 44px);
    transition: color 140ms ease;
}
.back-link:hover { color: var(--ink); }
.back-link::before { content: "\2190  "; }

article header.article-head { margin-bottom: clamp(28px, 5vh, 48px); }
.article-head .meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.article-head h1 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 16px;
}
.article-head .dek {
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.5;
    color: var(--ink-muted);
    margin: 0;
    max-width: 60ch;
}
.byline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-muted);
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.byline strong { color: var(--ink); font-weight: 500; }

/* Prose */
.prose { font-size: 1.02rem; line-height: 1.75; color: var(--ink); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin-top: 1.8em;
    margin-bottom: 0.1em;
}
.prose h3 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.25rem;
    margin-top: 1.5em;
    margin-bottom: 0.1em;
}
.prose p { margin: 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; }
.prose li { margin: 0.35em 0; }
.prose blockquote {
    margin: 1.4em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--accent);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink);
}
.prose code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 6px;
}
.prose pre {
    background: var(--ink);
    color: var(--canvas);
    border-radius: 10px;
    padding: 18px 20px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.6;
}
.prose pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
.prose img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
.prose figure { margin: 1.6em 0; }
.prose figcaption {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-muted);
    margin-top: 8px;
    text-align: center;
}

/* Data tables inside prose. Wrap in .table-scroll so wide tables scroll
   instead of pushing the page sideways on mobile. */
.table-scroll { overflow-x: auto; margin: 1.5em 0; }
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.prose th, .prose td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.prose thead th {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-muted);
    background: var(--canvas);
}
.prose tbody tr:last-child td { border-bottom: none; }

/* ================= IN-ARTICLE BLOCKS ================= */
/* Jump-links list under the dek. Gives readers (and crawlers) the shape of
   the page before they scroll. */
.toc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 22px;
    margin: 0 0 clamp(24px, 4vh, 36px);
}
.toc h2 {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-muted);
    margin: 0 0 10px;
}
.toc ol { margin: 0; padding-left: 1.15em; }
.toc li { margin: 5px 0; font-size: 0.92rem; }
.toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.toc a:hover { color: var(--accent); border-color: var(--accent); }

/* Short "what you need to know" summary. Placed high so the answer is
   available without reading the whole piece. */
.key-points {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 18px 22px;
}
.key-points h2 {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-muted);
    margin: 0 0 10px;
}
.key-points ul { padding-left: 1.15em; }
.key-points li { font-size: 0.95rem; }

/* Good/bad example pairs (ticket notes, handoff wording). */
.example {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 0.95rem;
}
.example.bad  { border-left: 3px solid #B4552F; }
.example.good { border-left: 3px solid #3F7A55; }
.example .label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 8px;
}
.example p { margin: 0; }
.example p + p { margin-top: 0.7em; }

/* FAQ block. Mirrors the FAQPage JSON-LD at the bottom of the page —
   keep the two in sync when editing questions. */
.faq { margin-top: 1.8em; }
.faq h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.02rem;
    margin-top: 1.5em;
    margin-bottom: 0.3em;
}

/* Closing conversion block at the end of an article. */
.article-cta {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 24px;
    margin-top: 2em;
}
.article-cta h2 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    margin: 0 0 8px;
}
.article-cta p { font-size: 0.95rem; color: var(--ink-muted); margin: 0 0 16px !important; }
.article-cta .btn {
    display: inline-block;
    background: var(--ink);
    color: var(--surface);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    padding: 10px 18px;
    transition: background 160ms ease, transform 160ms var(--ease-expo);
}
.article-cta .btn:hover { background: #37342C; transform: translateY(-1px); }

/* Topic tags under the article body — internal links Google can follow. */
.related {
    margin-top: 2em;
    padding-top: 1.4em;
    border-top: 1px solid var(--border);
}
.related h2 {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-muted);
    margin: 0 0 10px;
}
.related ul { list-style: none; padding: 0; }
.related li { margin: 7px 0; font-size: 0.95rem; }

/* Article footer nav */
.article-foot-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: clamp(40px, 7vh, 72px);
    padding-top: clamp(24px, 4vh, 36px);
    border-top: 1px solid var(--border);
}
.article-foot-nav a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: color 140ms ease;
}
.article-foot-nav a:hover { color: var(--accent); }

/* ================= SITE FOOTER ================= */
footer.site {
    padding: clamp(32px, 5vh, 56px) 0;
    border-top: 1px solid var(--border);
}
.foot-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
}
.foot-brand {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
}
.foot-brand strong { font-weight: 600; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-muted);
    text-decoration: none;
}
.foot-links a:hover { color: var(--ink); }

/* Byline can link to the author page */
.byline a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.byline a:hover { border-color: var(--ink); }

/* ================= AUTHOR PAGE ================= */
.author-hero {
    display: flex;
    align-items: center;
    gap: clamp(20px, 4vw, 32px);
    padding: clamp(20px, 5vh, 44px) 0 clamp(20px, 4vh, 32px);
}
.author-avatar {
    flex: none;
    width: clamp(72px, 14vw, 104px);
    height: clamp(72px, 14vw, 104px);
    border-radius: 50%;
    background: var(--accent);
    color: var(--surface);
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
}
.author-headings h1 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}
.author-role {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    margin: 0;
}
/* Topic clusters under the article grid on /articles/. The grid is a full-
   width layout; this reverts to a reading column so the prose does not run
   to 1000px line lengths. */
.index-topics {
    max-width: 62ch;
    margin: clamp(40px, 8vh, 76px) 0 0;
    padding-top: clamp(28px, 5vh, 44px);
    border-top: 1px solid var(--border);
}

.author-bio { font-size: 1.02rem; line-height: 1.75; color: var(--ink); max-width: 62ch; }
.author-bio > * + * { margin-top: 1.1em; }
.author-bio p { margin: 0; }
/* The bio grew past two paragraphs into real sections, so it needs the same
   heading and list treatment the article prose has — matched to .prose h2
   but a step smaller, since this sits under an h1 that is already large. */
.author-bio h2 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.25rem, 2.1vw, 1.5rem);
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 1.7em 0 0;
}
.author-bio h2 + p { margin-top: 0.5em; }
.author-bio ul { margin: 0; padding-left: 1.3em; }
.author-bio li { margin: 0.45em 0; }

.author-links { display: flex; gap: 12px; flex-wrap: wrap; margin: clamp(20px, 4vh, 28px) 0 clamp(28px, 6vh, 48px); }
.btn-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--surface);
    background: var(--ink);
    border-radius: 8px;
    padding: 10px 18px;
    transition: background 160ms ease, transform 160ms var(--ease-expo);
}
.btn-linkedin:hover { background: #37342C; transform: translateY(-1px); }
.btn-linkedin svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

.author-articles-head {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    letter-spacing: -0.015em;
    margin: 0 0 6px;
    padding-top: clamp(20px, 4vh, 32px);
    border-top: 1px solid var(--border);
}

.author-article-list { list-style: none; margin: 20px 0 clamp(48px, 9vh, 90px); padding: 0; }
.author-article-list li { border-top: 1px solid var(--border); }
.author-article-list li:last-child { border-bottom: 1px solid var(--border); }
.author-article-list a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 15px 0;
    text-decoration: none;
    color: var(--ink);
    transition: color 140ms ease;
}
.author-article-list a:hover { color: var(--accent); }
.author-article-list .t { font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: -0.01em; }
.author-article-list .d { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-muted); flex: none; }

@media (max-width: 620px) {
    .article-grid { grid-template-columns: 1fr; }
    .author-hero { flex-direction: column; text-align: center; align-items: center; }
    .author-article-list a { flex-direction: column; gap: 4px; }
}

/* ================= CODE TOKEN COLOURS =================
   `.prose pre` already carries the block itself (dark ink, rounded, its
   own horizontal scroller), so these only add syntax tint on top of it.
   Tuned for that dark ground, not for use on the canvas. */
.prose pre .c-key { color: #9DB4C8; }
.prose pre .c-str { color: #C9BE93; }
.prose pre .c-dim { color: rgba(247,246,243,0.45); }

/* ================= ESCALATION SCORE CARD =================
   Renders a real scoring run inline rather than as a screenshot: it
   stays readable on a phone, and the numbers are indexable text. */
.score-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 2px 8px rgba(35,33,28,0.05), 0 12px 40px rgba(35,33,28,0.06);
    padding: 24px;
}
.sc-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.sc-num { font-family: var(--font-serif); font-size: 2.7rem; line-height: 1; letter-spacing: -0.02em; }
.sc-num span { font-size: 1.1rem; color: var(--ink-muted); }
.sc-band {
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
    text-transform: uppercase; border-radius: 999px; padding: 4px 11px;
    background: var(--pill-bg); color: var(--pill-ink);
}
.sc-sub { font-size: 0.85rem; color: var(--ink-muted); margin: 0 0 20px; }
.sc-dim { margin-bottom: 14px; }
.sc-dim-top {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-family: var(--font-mono); font-size: 0.68rem; margin-bottom: 5px;
}
.sc-dim-top .n { letter-spacing: 0.04em; color: var(--ink); }
.sc-dim-top .v { color: var(--ink-muted); flex: none; }
.sc-bar { height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
.sc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.sc-dim.low .sc-bar i { background: #B4552F; }
.sc-dim.high .sc-bar i { background: #3F7A55; }
.sc-note { font-size: 0.84rem; color: var(--ink-muted); margin: 6px 0 0; line-height: 1.5; }
.sc-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.sc-foot h4 {
    font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-muted); font-weight: 500; margin: 0 0 8px;
}
.sc-foot ul { margin: 0 0 16px; padding-left: 1.15em; }
.sc-foot li { font-size: 0.88rem; margin: 0.3em 0; }
.sc-foot ul:last-child { margin-bottom: 0; }
.mock-caption {
    font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-muted);
    margin: 12px 0 0; text-align: center;
}