/* ============================================================
   Joe Bond Consulting — design tokens + global styles
   Dark, gold-accented, editorial. Newsreader display + Inter body.
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Palette — ink + gold + paper */
    --color-ink-900: #111316;
    --color-ink-800: #16191c;
    --color-ink-700: #1c1f23;
    --color-ink-600: #22262b;
    --color-ink-500: #2a2f35;

    --color-gold-500: #c9a96e;
    --color-gold-400: #d6b882;
    --color-gold-300: #e6cf9e;

    --color-paper-100: #f0ede8;
    --color-paper-300: #c9c5bd;
    --color-paper-500: #a0a0a0;

    /* Semantic */
    --bg:            var(--color-ink-800);
    --bg-raised:     var(--color-ink-700);
    --surface:       var(--color-ink-600);
    --surface-hover: var(--color-ink-500);

    --fg:        var(--color-paper-100);
    --fg-subtle: var(--color-paper-300);
    --fg-muted:  var(--color-paper-500);

    --accent:        var(--color-gold-500);
    --accent-hover:  var(--color-gold-400);
    --accent-soft:   var(--color-gold-300);

    --border:          rgba(201, 169, 110, 0.15);
    --border-strong:   rgba(201, 169, 110, 0.4);
    --border-hairline: rgba(240, 237, 232, 0.08);

    /* Type families */
    --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Motion */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur:  0.25s;

    /* Layout */
    --container: 1200px;
    --container-narrow: 760px;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--fg);
    font-optical-sizing: auto;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 40px;
}

/* ---------- Eyebrow ---------- */
.eyebrow {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 22px;
}

/* ---------- Grain overlay ---------- */
.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.035;
    mix-blend-mode: screen;
    background-size: 240px 240px;
}

/* ---------- Reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Animated section rules (drawn-in hairlines) ---------- */
/* Progressive enhancement: only activates when JS sets html.js-on,
   so no-JS users still see the original border-bottom/top rules. */
html.js-on .section-rule,
html.js-on .section-rule-top {
    position: relative;
}
html.js-on .section-rule { border-bottom-color: transparent; }
html.js-on .section-rule-top { border-top-color: transparent; }

html.js-on .section-rule::after,
html.js-on .section-rule-top::after {
    content: "";
    position: absolute;
    left: 0;
    height: 1px;
    width: 100%;
    background: var(--border);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}
html.js-on .section-rule::after { bottom: -1px; }
html.js-on .section-rule-top::after { top: -1px; }

html.js-on .section-rule.rule-in::after,
html.js-on .section-rule-top.rule-in::after {
    animation: jb-draw-rule 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes jb-draw-rule {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    html.js-on .section-rule::after,
    html.js-on .section-rule-top::after {
        transform: scaleX(1);
        animation: none;
    }
}

/* ---------- Nav ---------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(22, 25, 28, 0.85);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-bottom: 1px solid var(--border);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: var(--accent);
}

.wordmark-mark {
    width: 32px;
    height: 32px;
    display: block;
    transition: opacity var(--dur) var(--ease);
    transform-origin: 50% 50%;
    overflow: visible;
}

.wordmark-mark path { fill: currentColor; }

.wordmark:hover .wordmark-mark { opacity: 0.85; }

/* Logo intro animations — one is picked at random per page load (see script.js).
   All complete in under 1s. Per-path animations target ray-* classes. */
@media (prefers-reduced-motion: no-preference) {
    .wordmark-mark.intro-morph {
        animation: logo-morph 720ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
    }
    .wordmark-mark.intro-spin {
        animation: logo-spin 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    .wordmark-mark.intro-compass {
        animation: logo-compass 950ms cubic-bezier(0.65, 0, 0.35, 1) both;
    }
    .wordmark-mark.intro-ratchet {
        animation: logo-ratchet 950ms cubic-bezier(0.65, 0, 0.35, 1) both;
    }
    .wordmark-mark.intro-ignite {
        animation: logo-ignite 700ms ease-out both;
    }
    .wordmark-mark.intro-converge .ray-top    { animation: logo-converge-top    560ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
    .wordmark-mark.intro-converge .ray-right  { animation: logo-converge-right  560ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 70ms; }
    .wordmark-mark.intro-converge .ray-bottom { animation: logo-converge-bottom 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 140ms; }
    .wordmark-mark.intro-converge .ray-left   { animation: logo-converge-left   560ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 210ms; }
    .wordmark-mark.intro-assemble .ray-top,
    .wordmark-mark.intro-assemble .ray-right,
    .wordmark-mark.intro-assemble .ray-bottom,
    .wordmark-mark.intro-assemble .ray-left {
        transform-box: fill-box;
        transform-origin: 50% 50%;
        animation: logo-assemble 480ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
    }
    .wordmark-mark.intro-assemble .ray-right  { animation-delay: 110ms; }
    .wordmark-mark.intro-assemble .ray-bottom { animation-delay: 220ms; }
    .wordmark-mark.intro-assemble .ray-left   { animation-delay: 330ms; }
}

@keyframes logo-morph {
    from { transform: scale(0) rotate(-180deg); opacity: 0; }
    to   { transform: scale(1) rotate(0);       opacity: 1; }
}
@keyframes logo-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}
@keyframes logo-compass {
    from { transform: rotate(0); }
    to   { transform: rotate(180deg); }
}
@keyframes logo-ratchet {
    0%        { transform: rotate(0deg); }
    18%, 25%  { transform: rotate(90deg); }
    43%, 50%  { transform: rotate(180deg); }
    68%, 75%  { transform: rotate(270deg); }
    93%, 100% { transform: rotate(360deg); }
}
@keyframes logo-ignite {
    from { opacity: 0; filter: brightness(0.4) saturate(0.2); }
    55%  { opacity: 1; filter: brightness(1.45) saturate(1.25); }
    to   { opacity: 1; filter: brightness(1) saturate(1); }
}
@keyframes logo-converge-top    { from { transform: translateY(-560px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes logo-converge-right  { from { transform: translateX(560px);  opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes logo-converge-bottom { from { transform: translateY(560px);  opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes logo-converge-left   { from { transform: translateX(-560px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes logo-assemble {
    from { transform: scale(0) rotate(-45deg); opacity: 0; }
    to   { transform: scale(1) rotate(0);      opacity: 1; }
}

.nav-links {
    display: flex;
    gap: 36px;
    align-items: center;
}

.nav-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--fg);
    transition: color var(--dur) var(--ease);
}
.nav-link:hover { color: var(--accent); }

.nav-cta {
    font-size: 14px;
    font-weight: 500;
    color: var(--bg);
    background: var(--accent);
    padding: 10px 20px;
    border-radius: 4px;
    transition: background var(--dur) var(--ease);
}
.nav-cta:hover { background: var(--accent-hover); }

/* ---------- Hero (Breathing, no chrome) ---------- */
.hero {
    padding: 140px 0 120px;
    border-bottom: 1px solid var(--border);
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 7.2vw, 5.6rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 440;
    margin-bottom: 48px;
    font-variation-settings: "wght" 440, "opsz" 144;
}

.hero h1 .line-1 {
    display: block;
    color: var(--fg);
}
.hero h1 .line-2 {
    display: block;
    color: var(--accent);
    font-style: italic;
    font-weight: 440;
}

.hero-deck {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    max-width: 900px;
}

.hero-lead {
    font-size: 18px;
    line-height: 1.7;
    color: var(--fg-muted);
}

.hero-aside {
    font-size: 14px;
    line-height: 1.7;
    color: var(--fg-muted);
    border-left: 1px solid var(--border);
    padding-left: 20px;
    font-style: italic;
}

/* ---------- Results ---------- */
.results {
    padding: 72px 0;
    border-bottom: 1px solid var(--border);
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 12px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 6px;
}

.stat-detail {
    font-size: 13px;
    line-height: 1.55;
    color: var(--fg-muted);
}

/* ---------- Section header (eyebrow + H2 in 1fr/2fr) ---------- */
.section-head {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    margin-bottom: 56px;
    align-items: baseline;
}

.section-head h2 {
    font-family: var(--font-display);
    font-size: 38px;
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.02em;
    max-width: 24ch;
    color: var(--fg);
}
.section-head h2 .accent { color: var(--accent); }

/* ---------- Services ---------- */
.services {
    padding: 112px 0;
    border-bottom: 1px solid var(--border);
}

/* Services uses a stacked left-aligned header (matches the hero pattern),
   not the 2-col .section-head pattern used by Approach + Testimonials. */
.services .section-head {
    display: block;
    margin: 0 0 32px;
}
.services .section-head .eyebrow { margin: 0 0 22px; }
.services .section-head h2 {
    max-width: 24ch;
    margin: 0;
}

.services-intro {
    font-size: 17px;
    line-height: 1.7;
    color: var(--fg-subtle);
    max-width: 64ch;
    margin: 0 0 56px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.services-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.service {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 32px 28px;
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.service:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.service-step {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.14em;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.service h3 {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 400;
    margin-bottom: 14px;
    color: var(--fg);
}

.service-body {
    color: var(--fg-subtle);
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 22px;
}

.service-points {
    list-style: none;
    padding: 0;
    margin: auto 0 0;
    display: grid;
    gap: 8px;
}

.service-points li {
    color: var(--fg-muted);
    font-size: 13.5px;
    line-height: 1.55;
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 8px;
}
.service-points li::before {
    content: "→";
    color: var(--accent);
}

/* ---------- Story (Audrey case study) ---------- */
.story {
    padding: 112px 0;
    border-bottom: 1px solid var(--border);
    background: rgba(15, 18, 22, 0.4);
}

.story-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 72px;
    align-items: start;
}

.story-sublabel {
    font-size: 13px;
    color: var(--fg-muted);
    margin-bottom: 16px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.story h2 {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
    color: var(--fg);
}

.story-body p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--fg-subtle);
    margin-bottom: 18px;
}

.story-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 500;
    margin-top: 8px;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
}
.story-link:hover { border-bottom-color: var(--accent); }

.story-aside {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 32px 30px;
}

.story-aside .eyebrow { margin-bottom: 18px; }

.story-aside-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: grid;
    gap: 16px;
}

.story-aside-list dt {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 4px;
}

.story-aside-list dd {
    color: var(--fg-muted);
    font-size: 13.5px;
    line-height: 1.55;
}

.story-quote {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    margin: 0;
}

.story-quote p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg);
    margin-bottom: 14px;
}

.story-quote footer {
    font-size: 12px;
    color: var(--fg-muted);
    font-weight: 500;
    border-top: none;
    padding: 0;
    text-align: left;
}

/* ---------- Approach ---------- */
.approach {
    padding: 112px 0;
    border-bottom: 1px solid var(--border);
}

.approach .section-head { margin-bottom: 56px; }

.approach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.approach-step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 28px 24px;
}

.approach-step .service-step { margin-bottom: 14px; }

.approach-step h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
    color: var(--fg);
}

.approach-step p {
    color: var(--fg-subtle);
    font-size: 13.5px;
    line-height: 1.65;
}

/* ---------- Testimonials ---------- */
.testimonials {
    padding: 112px 0;
    border-bottom: 1px solid var(--border);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.testimonial {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 32px 30px;
    border-radius: 10px;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.testimonial blockquote {
    color: var(--fg);
    font-size: 15.5px;
    line-height: 1.7;
    margin: 0 0 24px;
    flex: 1;
    quotes: none;
}

.testimonial figcaption {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.testimonial figcaption strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
}

.testimonial figcaption span {
    color: var(--fg-muted);
    font-size: 13px;
    font-weight: 400;
}

/* ---------- About ---------- */
.about {
    padding: 112px 0;
    border-bottom: 1px solid var(--border);
}

.about-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 64px;
    align-items: start;
}

.about-portrait {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 20%;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: block;
}

.about-bio h2 {
    font-family: var(--font-display);
    font-size: 36px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    color: var(--fg);
}

.about-bio p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--fg-subtle);
    margin-bottom: 18px;
}

.about-stamp {
    font-size: 13.5px;
    color: var(--fg-muted);
    margin-top: 8px;
}

/* ---------- CTA ---------- */
.cta {
    padding: 128px 0;
    text-align: center;
    position: relative;
}

.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(201,169,110,0.07), transparent 60%);
    z-index: 0;
}

.cta .container {
    max-width: 860px;
    position: relative;
    z-index: 1;
}

.cta h2 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: var(--fg);
}

.cta-sub {
    color: var(--fg-subtle);
    font-size: 17px;
    line-height: 1.7;
    max-width: 56ch;
    margin: 0 auto 40px;
}

.cta-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.btn {
    font-size: 14px;
    font-weight: 500;
    padding: 16px 28px;
    border-radius: 6px;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    display: inline-block;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--accent);
    color: var(--bg);
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
    border-color: var(--accent);
    color: var(--fg);
    background: transparent;
}
.btn-secondary:hover { background: var(--accent); color: var(--bg); }

.cta-location {
    color: var(--fg-muted);
    font-size: 13px;
}

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 28px 0;
}

.site-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--fg-muted);
    flex-wrap: wrap;
    gap: 12px;
}

.site-footer a {
    color: var(--fg-muted);
    transition: color var(--dur) var(--ease);
}
.site-footer a:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .container { padding: 0 28px; }
    .approach-grid { grid-template-columns: repeat(2, 1fr); }
    .results-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
}

@media (max-width: 900px) {
    .hero { padding: 96px 0 84px; }
    .hero-deck { grid-template-columns: 1fr; gap: 28px; max-width: 60ch; }
    .section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }

    .services-grid,
    .services-grid-2,
    .testimonial-grid { grid-template-columns: 1fr; }

    .story-grid { grid-template-columns: 1fr; gap: 48px; }
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .about-portrait { max-width: 220px; }

    .results { padding: 56px 0; }
    .services, .approach, .testimonials, .about, .story { padding: 80px 0; }
    .cta { padding: 96px 0; }
}

@media (max-width: 600px) {
    .container { padding: 0 20px; }
    .hero { padding: 72px 0 64px; }
    .hero h1 { margin-bottom: 32px; }
    .results-grid { grid-template-columns: 1fr; gap: 32px; }
    .approach-grid { grid-template-columns: 1fr; }
    .nav-links { gap: 20px; }
    .nav-link[data-secondary] { display: none; }

    /* Mobile testimonials → horizontal scroll */
    .testimonial-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 86%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 20px;
        gap: 14px;
        margin: 0 -20px;
        padding: 0 20px 8px;
    }
    .testimonial { scroll-snap-align: start; }
}

/* ============================================================
   /writing/ — editor's letter
   ============================================================ */

/* Writing index */
.writing-header {
    padding: 120px 0 64px;
    border-bottom: 1px solid var(--border);
}

.writing-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 440;
    color: var(--fg);
    max-width: 18ch;
    margin-bottom: 24px;
}
.writing-header h1 em {
    color: var(--accent);
    font-weight: 440;
}

.writing-header .lede {
    font-size: 18px;
    line-height: 1.7;
    color: var(--fg-muted);
    max-width: 56ch;
}

.writing-list {
    padding: 64px 0 120px;
}

.writing-entry {
    padding: 56px 0;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: start;
}

.writing-entry:first-child { padding-top: 24px; }

.writing-entry-date {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin: 0 0 22px;
    position: relative;
    padding-left: 52px;
}

.writing-entry-date::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 36px;
    height: 1px;
    background: var(--accent);
    opacity: 0.6;
}

.writing-entry h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0;
}

.writing-entry h2 a {
    color: var(--fg);
    transition: color var(--dur) var(--ease);
}
.writing-entry h2 a em {
    font-style: italic;
    color: var(--accent);
    font-weight: 440;
}
.writing-entry h2 a:hover { color: var(--accent); }
.writing-entry h2 a:hover em { color: var(--accent-soft); }

.writing-entry-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.writing-entry-excerpt {
    font-size: 16px;
    line-height: 1.7;
    color: var(--fg-subtle);
    margin: 0 0 20px;
}

.writing-entry .read-link {
    color: var(--accent);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
}
.writing-entry .read-link:hover { border-bottom-color: var(--accent); }

.writing-entry .read-link-meta {
    color: var(--fg-muted);
    font-weight: 400;
    margin: 0 4px;
}

@media (max-width: 900px) {
    .writing-entry {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 44px 0;
    }
    .writing-entry:first-child { padding-top: 16px; }
}

/* Single post */
.post-header {
    padding: 96px 0 56px;
    border-bottom: 1px solid var(--border);
}

.post-header .container { max-width: var(--container-narrow); }

.post-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}

.post-back {
    font-size: 13px;
    color: var(--fg-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color var(--dur) var(--ease);
}
.post-back:hover { color: var(--accent); }

.post-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.2vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 440;
    color: var(--fg);
    margin-bottom: 28px;
}

.post-header h1 em {
    font-style: italic;
    color: var(--accent);
    font-weight: 440;
}

.post-byline {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--fg-subtle);
    margin: 0 0 14px;
    font-weight: 400;
}

.post-byline em {
    font-style: italic;
    color: var(--accent);
    font-weight: 500;
}

.post-meta {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin: 0;
    position: relative;
    padding-left: 52px;
}

.post-meta::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 36px;
    height: 1px;
    background: var(--accent);
    opacity: 0.6;
}

.post-body {
    padding: 64px 0 96px;
}

.post-body .container { max-width: var(--container-narrow); }

.post-body p,
.post-body ul,
.post-body ol,
.post-body blockquote {
    font-size: 18px;
    line-height: 1.75;
    color: var(--fg-subtle);
    margin-bottom: 1.4em;
    max-width: 64ch;
}

.post-body .container > p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-size: 4.2em;
    float: left;
    line-height: 0.9;
    padding: 6px 12px 0 0;
    color: var(--accent);
    font-weight: 500;
}

.post-body h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--fg);
    font-weight: 400;
    margin: 2.4em 0 0.6em;
    position: relative;
}

.post-body h2::before {
    content: "";
    display: block;
    width: 36px;
    height: 1px;
    background: var(--accent);
    opacity: 0.55;
    margin-bottom: 22px;
}

.post-body h3 {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.25;
    color: var(--fg);
    font-weight: 500;
    margin: 1.6em 0 0.4em;
    letter-spacing: -0.01em;
}

.post-body strong { color: var(--fg); font-weight: 600; }
.post-body em { color: var(--fg); font-style: italic; }

.post-body ul,
.post-body ol {
    padding-left: 1.4em;
}

.post-body li { margin-bottom: 0.6em; }
.post-body li::marker { color: var(--accent); }

.post-body blockquote {
    border-left: 2px solid var(--accent);
    padding: 4px 0 4px 24px;
    color: var(--fg);
    font-style: italic;
    margin-left: 0;
}

/* Editorial numbered outline — drop on any <ol class="numbered-points">.
   Items can wrap an h3 + p pair or just paragraphs. */
.post-body .numbered-points {
    list-style: none;
    counter-reset: numpoint;
    padding: 0;
    margin: 1.6em 0 2em;
    max-width: 64ch;
}

.post-body .numbered-points > li {
    counter-increment: numpoint;
    position: relative;
    padding-left: 72px;
    margin-bottom: 2.2em;
    min-height: 56px;
}

.post-body .numbered-points > li:last-child { margin-bottom: 0; }

.post-body .numbered-points > li::before {
    content: counter(numpoint, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -4px;
    font-family: var(--font-display);
    font-size: 38px;
    line-height: 1;
    color: var(--accent);
    font-weight: 400;
    letter-spacing: -0.02em;
    font-variant-numeric: lining-nums tabular-nums;
}

.post-body .numbered-points > li h3 {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.25;
    color: var(--fg);
    font-weight: 500;
    margin: 0 0 0.4em;
    letter-spacing: -0.01em;
}

.post-body .numbered-points > li > p {
    margin-bottom: 0;
    max-width: none;
}

@media (max-width: 600px) {
    .post-body .numbered-points > li {
        padding-left: 56px;
    }
    .post-body .numbered-points > li::before {
        font-size: 30px;
    }
}

.post-body a {
    color: var(--accent);
    border-bottom: 1px solid var(--border-strong);
    transition: border-color var(--dur) var(--ease);
}
.post-body a:hover { border-bottom-color: var(--accent); }

.post-body hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 3em auto;
    max-width: 8ch;
}

.post-body .pull {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    line-height: 1.3;
    color: var(--fg);
    font-style: italic;
    border-left: 2px solid var(--accent);
    padding-left: 24px;
    margin: 2.4em 0;
    max-width: none;
}

.post-sign-off {
    margin-top: 3em;
    padding-top: 32px;
    border-top: 1px solid var(--border);
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    font-size: 22px;
    letter-spacing: -0.01em;
}

.post-author {
    padding: 56px 0 96px;
    border-top: 1px solid var(--border);
}

.post-author .container {
    max-width: var(--container-narrow);
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    align-items: start;
}

.post-author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

.post-author-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 4px;
}

.post-author-bio {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--fg-muted);
    margin-bottom: 10px;
    max-width: 56ch;
}

.post-author-link {
    font-size: 13px;
    color: var(--accent);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
}
.post-author-link:hover { border-bottom-color: var(--accent); }

.post-more {
    padding: 0 0 96px;
}

.post-more .container {
    max-width: var(--container-narrow);
}

.post-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--fg-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color var(--dur) var(--ease);
}
.post-more-link:hover { color: var(--accent); }

@media (max-width: 600px) {
    .post-header { padding: 64px 0 40px; }
    .post-body { padding: 48px 0 72px; }
    .post-body p,
    .post-body ul,
    .post-body ol,
    .post-body blockquote { font-size: 16.5px; }
    .post-body .container > p:first-of-type::first-letter {
        font-size: 3.6em;
    }
    .post-author .container {
        grid-template-columns: 64px 1fr;
        gap: 18px;
    }
    .post-author-avatar { width: 64px; height: 64px; }
}