/* ─────────────────────────────────────────────────────────────────────────
   Blog Post — Editorial layout
   ─────────────────────────────────────────────────────────────────────────
   Aesthetic: quietly luxurious print magazine. Cream paper background.
   EB Garamond for body and headings; Inter for eyebrow / TOC / meta.
   Asymmetric three-column rhythm on desktop:

      [ TOC sidebar | body column | quiet right margin ]

   Auto-numbered Roman section markers float in the left margin of the body
   column. A scroll-driven progress bar runs along the very top of the
   viewport. First paragraph after the H1 carries a 4-line drop cap.

   Everything degrades gracefully on mobile: TOC collapses to a <details>
   block at the top, section numerals inline next to their headings, drop
   cap scales down.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* The body of the essay reads on a slightly warmer paper than the rest of
       the site so it feels like a printed page on a cream desk. */
    --essay-paper: #faf7f1;
    --essay-paper-edge: #f1ede4;
    --essay-ink: #1c1917;
    --essay-ink-soft: #44403c;
    --essay-ink-muted: #78716c;
    --essay-rule: #d6d3d1;
    --essay-rule-soft: #e7e5e4;
    --essay-accent: #d99566; /* peach, slightly deeper than --cs-gradient-peach for ink-on-paper feel */
    --essay-accent-soft: #f4c5a8;

    /* Vertical rhythm — every blockish element snaps to one of these,
       so the whole article settles into a quiet music. */
    --essay-step-1: 0.5rem;
    --essay-step-2: 1rem;
    --essay-step-3: 1.5rem;
    --essay-step-4: 2.5rem;
    --essay-step-5: 4rem;
    --essay-step-6: 6rem;
}

/* ─── 1. Page canvas ──────────────────────────────────────────────────── */

/* The article sits on a full-bleed cream "page" wrapper rather than on the
   body, so this layout doesn't leak background colour into the rest of the
   site (the navbar above and the footer below keep their own white/grey). */
.essay-page {
    position: relative;
    background: var(--essay-paper);
    color: var(--essay-ink-soft);
    overflow: hidden;
}

/* Subtle paper grain. Inline data-uri so we don't ship a separate asset.
   Position absolute on the wrapper so the texture scrolls with the page —
   fixed would make the grain stand still while the type moves, which kills
   the printed-paper illusion. */
.essay-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ─── 2. Reading progress bar ────────────────────────────────────────── */

.essay-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    z-index: 1100;
    pointer-events: none;
}
.essay-progress__fill {
    height: 100%;
    width: var(--essay-progress, 0%);
    background: var(--essay-accent);
    transition: width 80ms linear;
}

/* ─── 3. Layout shell ─────────────────────────────────────────────────── */

.essay {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--essay-step-5) var(--essay-step-3) var(--essay-step-6);
    display: grid;
    grid-template-columns: 200px minmax(0, 640px) 1fr;
    column-gap: var(--essay-step-5);
}

@media (max-width: 980px) {
    .essay {
        grid-template-columns: 1fr;
        padding: var(--essay-step-4) var(--essay-step-3) var(--essay-step-5);
        column-gap: 0;
    }
}

/* ─── 4. Folio + nav strip ────────────────────────────────────────────── */

.essay__nav {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--essay-step-5);
    padding-bottom: var(--essay-step-2);
    border-bottom: 1px solid var(--essay-rule-soft);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--essay-ink-muted);
}
.essay__folio {
    font-variant-numeric: tabular-nums;
}
.essay__back {
    text-decoration: none;
    color: var(--essay-ink-muted);
    transition: color 200ms ease, transform 200ms ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.essay__back:hover {
    color: var(--essay-accent);
    transform: translateX(-2px);
}
.essay__back::before {
    content: "←";
    font-size: 0.875rem;
}

/* ─── 5. Table of contents (sticky left rail) ─────────────────────────── */

.essay__toc {
    grid-column: 1;
    align-self: start;
    position: sticky;
    top: var(--essay-step-3);
    padding-right: var(--essay-step-2);
    border-right: 1px solid var(--essay-rule-soft);
    /* Fade in after the page has settled — feels less aggressive than a
       hard pop-in when JS finishes building the list. */
    animation: essay-fade 600ms ease-out 200ms both;
}
.essay__toc-label {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--essay-ink-muted);
    margin: 0 0 var(--essay-step-2);
    font-weight: 600;
}
.essay-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: tocsec;
}
.essay-toc__item {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}
.essay-toc__item--h2 {
    counter-increment: tocsec;
    margin-top: 0.875rem;
}
.essay-toc__item--h2:first-child {
    margin-top: 0;
}
.essay-toc__item--h3 {
    padding-left: 1.25rem;
    margin-top: 0.25rem;
}
.essay-toc__link {
    display: block;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.8125rem;
    color: var(--essay-ink-muted);
    text-decoration: none;
    padding: 0.25rem 0;
    border-left: 1px solid transparent;
    margin-left: -0.75rem;
    padding-left: 0.625rem;
    transition: color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.essay-toc__item--h2 > .essay-toc__link::before {
    content: counter(tocsec, upper-roman) " · ";
    color: var(--essay-ink-muted);
    font-variant-numeric: tabular-nums;
    opacity: 0.5;
    transition: opacity 200ms ease, color 200ms ease;
}
.essay-toc__link:hover {
    color: var(--essay-ink);
    transform: translateX(2px);
}
.essay-toc__link.is-active {
    color: var(--essay-ink);
    border-left-color: var(--essay-accent);
    font-weight: 500;
}
.essay-toc__item--h2 > .essay-toc__link.is-active::before {
    color: var(--essay-accent);
    opacity: 1;
}

/* Mobile: TOC becomes a collapsed <details>. The page model wraps the same
   list in a <details> on small screens via the cshtml. */
.essay__toc--mobile {
    display: none;
    grid-column: 1 / -1;
    border: 1px solid var(--essay-rule-soft);
    background: var(--essay-paper-edge);
    border-radius: 4px;
    padding: var(--essay-step-2) var(--essay-step-3);
    margin-bottom: var(--essay-step-4);
}
.essay__toc--mobile summary {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--essay-ink-muted);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.essay__toc--mobile summary::-webkit-details-marker {
    display: none;
}
.essay__toc--mobile summary::after {
    content: "↓";
    transition: transform 200ms ease;
}
.essay__toc--mobile[open] summary::after {
    transform: rotate(180deg);
}
.essay__toc--mobile .essay-toc__list {
    margin-top: var(--essay-step-2);
}
@media (max-width: 980px) {
    .essay__toc {
        display: none;
    }
    .essay__toc--mobile {
        display: block;
    }
}

/* ─── 6. Article header ───────────────────────────────────────────────── */

.essay__head {
    grid-column: 2;
}
@media (max-width: 980px) {
    .essay__head {
        grid-column: 1 / -1;
    }
}

.essay__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--essay-accent);
    margin-bottom: var(--essay-step-3);
}
.essay__eyebrow::before,
.essay__eyebrow::after {
    content: "";
    flex: 0 0 auto;
    width: 24px;
    height: 1px;
    background: var(--essay-accent);
    opacity: 0.6;
}
.essay__eyebrow::after {
    flex: 1 1 auto;
    max-width: 80px;
}

.essay__title {
    font-family: "EB Garamond", "Times New Roman", serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--essay-ink);
    margin: 0 0 var(--essay-step-3);
    text-wrap: balance;
}

.essay__dek {
    font-family: "EB Garamond", "Times New Roman", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.375rem;
    line-height: 1.45;
    color: var(--essay-ink-soft);
    margin: 0 0 var(--essay-step-4);
    max-width: 36em;
}

.essay__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--essay-ink-muted);
    padding-bottom: var(--essay-step-4);
    margin-bottom: var(--essay-step-5);
    border-bottom: 1px solid var(--essay-rule-soft);
}
.essay__meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--essay-ink-muted);
    opacity: 0.5;
}
.essay__meta-author {
    color: var(--essay-ink);
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* ─── 7. Article body ─────────────────────────────────────────────────── */

.essay__body {
    grid-column: 2;
    counter-reset: section;
    /* Body type. EB Garamond reads beautifully at 1.0625rem with 1.7 leading
       on the cream paper — slightly larger than typical web body, just shy
       of "book" comfortable. */
    font-family: "EB Garamond", "Times New Roman", serif;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--essay-ink-soft);
}
@media (max-width: 980px) {
    .essay__body {
        grid-column: 1 / -1;
        font-size: 1.0625rem;
    }
}

.essay__body p {
    margin: 0 0 var(--essay-step-3);
    text-wrap: pretty;
}

/* Drop cap on the first paragraph. The "Adobe Caslon"-style large initial
   is the single most magazine-y move in the whole layout. Selector picks
   the first <p> that's a direct child of the body (after Markdig strips
   wrapping). */
.essay__body > p:first-of-type::first-letter {
    font-family: "EB Garamond", "Times New Roman", serif;
    font-weight: 500;
    color: var(--essay-accent);
    float: left;
    font-size: 5.25em;
    line-height: 0.85;
    padding: 0.05em 0.12em 0 0;
    margin-top: 0.05em;
    /* The drop-cap "T" / "I" / "W" all need their own kerning to sit right;
       we tighten letter-spacing generally and accept the small per-glyph drift. */
    letter-spacing: -0.02em;
}
@media (max-width: 980px) {
    .essay__body > p:first-of-type::first-letter {
        font-size: 4.25em;
    }
}

/* H2 — auto-numbered Roman section headings. The numeral sits in the left
   margin on desktop; collapses to inline on mobile. */
.essay__body h2 {
    counter-increment: section;
    font-family: "EB Garamond", "Times New Roman", serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--essay-ink);
    margin: var(--essay-step-5) 0 var(--essay-step-3);
    padding-top: var(--essay-step-3);
    border-top: 1px solid var(--essay-rule-soft);
    position: relative;
    text-wrap: balance;
}
.essay__body h2::before {
    content: counter(section, upper-roman) ".";
    position: absolute;
    /* The numeral lives in the left margin of the body column. Width gives
       us a stable column for the marker so I, II, III, IV, … right-align
       against the heading without drifting. */
    left: -90px;
    width: 70px;
    text-align: right;
    top: calc(var(--essay-step-3) + 0.625rem);
    font-family: "EB Garamond", "Times New Roman", serif;
    font-style: italic;
    font-size: 1.75rem;
    color: var(--essay-accent);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
}
@media (max-width: 980px) {
    .essay__body h2 {
        font-size: 1.625rem;
    }
    .essay__body h2::before {
        position: static;
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
    }
}

.essay__body h3 {
    font-family: "EB Garamond", "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.3;
    color: var(--essay-ink);
    margin: var(--essay-step-4) 0 var(--essay-step-2);
}

.essay__body a {
    color: var(--essay-ink);
    text-decoration: underline;
    text-decoration-color: var(--essay-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 200ms ease, text-decoration-color 200ms ease;
}
.essay__body a:hover {
    color: var(--essay-accent);
    text-decoration-color: var(--essay-ink);
}

.essay__body strong {
    color: var(--essay-ink);
    font-weight: 600;
}
.essay__body em {
    font-style: italic;
}

/* Lists — refined typographic detail. Markers in accent color. */
.essay__body ul,
.essay__body ol {
    margin: 0 0 var(--essay-step-3);
    padding-left: 1.5em;
}
.essay__body ul li,
.essay__body ol li {
    margin-bottom: 0.5rem;
}
.essay__body ul li::marker {
    color: var(--essay-accent);
}
.essay__body ol li::marker {
    color: var(--essay-accent);
    font-variant-numeric: tabular-nums;
}

/* Blockquotes — magazine pull-quote treatment. Large italic display
   with a thin vertical rule + accent ornament. */
.essay__body blockquote {
    margin: var(--essay-step-4) 0 var(--essay-step-4) 0;
    padding: 0 0 0 var(--essay-step-3);
    border-left: 2px solid var(--essay-accent);
    font-family: "EB Garamond", "Times New Roman", serif;
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--essay-ink);
}
.essay__body blockquote p:last-child {
    margin-bottom: 0;
}

/* Inline code and code blocks. We keep monospace functional but warm. */
.essay__body code {
    font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.875em;
    background: var(--essay-paper-edge);
    color: var(--essay-ink);
    padding: 0.125em 0.375em;
    border-radius: 3px;
    border: 1px solid var(--essay-rule-soft);
}
.essay__body pre {
    background: var(--essay-paper-edge);
    border: 1px solid var(--essay-rule-soft);
    border-radius: 6px;
    padding: var(--essay-step-2) var(--essay-step-3);
    overflow-x: auto;
    margin: 0 0 var(--essay-step-3);
    font-size: 0.875rem;
    line-height: 1.6;
}
.essay__body pre code {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    color: var(--essay-ink);
}

/* Tables — light editorial chrome. */
.essay__body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--essay-step-3) 0;
    font-size: 1rem;
}
.essay__body th,
.essay__body td {
    padding: 0.625rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--essay-rule-soft);
}
.essay__body th {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--essay-ink-muted);
    font-weight: 600;
    border-bottom-color: var(--essay-rule);
}

/* Markdig anchor links on headings — we don't want the # showing. */
.essay__body .anchor {
    visibility: hidden;
}

/* ─── 8. End-of-essay ornament + author + CTA ─────────────────────────── */

.essay__end {
    grid-column: 2;
    margin-top: var(--essay-step-5);
}
@media (max-width: 980px) {
    .essay__end {
        grid-column: 1 / -1;
    }
}

.essay__ornament {
    text-align: center;
    color: var(--essay-accent);
    font-family: "EB Garamond", serif;
    font-size: 1.5rem;
    letter-spacing: 1.5em;
    padding-left: 1.5em; /* offset for letter-spacing centering */
    margin: var(--essay-step-5) 0 var(--essay-step-4);
    opacity: 0.8;
}

.essay__author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: var(--essay-step-3) 0;
    border-top: 1px solid var(--essay-rule-soft);
    border-bottom: 1px solid var(--essay-rule-soft);
    margin-bottom: var(--essay-step-4);
}
.essay__author-initial {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--essay-accent-soft);
    color: var(--essay-ink);
    display: grid;
    place-items: center;
    font-family: "EB Garamond", serif;
    font-size: 1.25rem;
    font-weight: 500;
    flex: 0 0 auto;
}
.essay__author-name {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.875rem;
    color: var(--essay-ink);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 0.125rem;
}
.essay__author-role {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.75rem;
    color: var(--essay-ink-muted);
    letter-spacing: 0.04em;
    margin: 0;
}

.essay__cta {
    padding: var(--essay-step-4);
    border: 1px solid var(--essay-rule-soft);
    background: var(--essay-paper);
    border-radius: 6px;
    text-align: center;
    /* Subtle shadow that hints at a card lifting off the paper, but without
       the hard edge of the rest of the brand's filled-card pattern. */
    box-shadow: 0 1px 0 var(--essay-paper-edge);
}
.essay__cta-eyebrow {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--essay-accent);
    font-weight: 600;
    margin: 0 0 var(--essay-step-1);
}
.essay__cta-title {
    font-family: "EB Garamond", "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.625rem;
    line-height: 1.3;
    color: var(--essay-ink);
    margin: 0 auto var(--essay-step-3);
    max-width: 24em;
}
.essay__cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.75rem;
    background: var(--essay-ink);
    color: #fff;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background 200ms ease, transform 200ms ease, gap 200ms ease;
}
.essay__cta-button:hover {
    background: var(--essay-accent);
    color: var(--essay-ink);
    gap: 0.875rem;
}
.essay__cta-button::after {
    content: "→";
    font-size: 1rem;
    line-height: 1;
}
.essay__cta-aux {
    margin: var(--essay-step-3) 0 0;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.75rem;
    color: var(--essay-ink-muted);
}
.essay__cta-aux a {
    color: var(--essay-ink);
    text-decoration: underline;
    text-decoration-color: var(--essay-rule);
    text-underline-offset: 0.2em;
}
.essay__cta-aux a:hover {
    color: var(--essay-accent);
    text-decoration-color: var(--essay-accent);
}

/* ─── 9. Entrance animation — one quiet stagger on first paint ────────── */

@keyframes essay-fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.essay__head {
    animation: essay-fade 800ms ease-out 0ms both;
}
.essay__body {
    animation: essay-fade 800ms ease-out 150ms both;
}

/* Respect user motion preferences. The fade is gentle enough that we still
   show it briefly, but the larger scroll-driven progress bar is fine too. */
@media (prefers-reduced-motion: reduce) {
    .essay__head,
    .essay__body,
    .essay__toc {
        animation: none;
    }
}