/* ============================================================
   BLOG POST STYLESHEET — shared by every page in /posts.
   Edit here and every post picks up the change; keep post HTML
   semantic (h2, p, ul, .post-pull, .post-callout, figure).
   ============================================================ */

/* ============ RESET & BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Epilogue', sans-serif;
    color: #E8E4DB;
    line-height: 1.6;
    background: #0A0A0A;
    overflow-x: hidden;
}

/* ============ DESIGN TOKENS ============ */
:root {
    --deep-green: #0A0A0A;
    --mid-green: #F7F4EE;
    --cream: #F0EBE0;
    --cream-muted: rgba(240, 235, 224, 0.6);
    --cream-faint: rgba(240, 235, 224, 0.12);
    --orange: #D8572A;
    --orange-glow: rgba(216, 87, 42, 0.15);
    --orange-hover: #E8633A;
    --text-primary: #F0EBE0;
    --text-secondary: rgba(240, 235, 224, 0.7);
    --text-muted: rgba(240, 235, 224, 0.45);
    --border: rgba(240, 235, 224, 0.1);
    --border-hover: rgba(240, 235, 224, 0.2);
    --card-bg: rgba(240, 235, 224, 0.04);
    --card-bg-hover: rgba(240, 235, 224, 0.07);
}

/* Light section overrides (article body reads on cream) */
.post-body-wrap {
    --cream: #1A1A1A;
    --cream-muted: rgba(26,26,26,0.6);
    --cream-faint: rgba(26,26,26,0.08);
    --text-primary: #1A1A1A;
    --text-secondary: #3D3D3D;
    --text-muted: #6B6B6B;
    --border: rgba(26,26,26,0.1);
    --border-hover: rgba(26,26,26,0.2);
    --card-bg: rgba(255,255,255,0.75);
    --card-bg-hover: #FFFFFF;
}

/* ============ SCROLL REVEAL ============ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }

/* ============ NAVBAR ============ */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 20px 0;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}
nav.scrolled {
    background-color: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}
nav .container {
    padding: 0 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* post pages don't link site.css, so the nav chrome is duplicated here —
   the BB mark's sizing has to be duplicated with it */
.nav-brand {
    font-family: 'Anton', sans-serif;
    font-size: 22px;
    letter-spacing: 1.5px;
    color: var(--cream);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.nav-logo { display: block; height: 34px; width: auto; }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
    letter-spacing: 0.5px;
}
.nav-links a:hover { color: var(--cream); }
.nav-cta {
    background-color: var(--orange) !important;
    color: var(--cream) !important;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.nav-cta:hover {
    background-color: var(--orange-hover) !important;
    transform: translateY(-1px);
}
.hamburger {
    display: none; flex-direction: column; cursor: pointer; gap: 5px;
    background: none; border: 0;
    /* 44x44 hit area without shifting the layout */
    padding: 14px 10px; margin: -14px -10px;
    touch-action: manipulation;
}
.hamburger span {
    width: 24px; height: 2px;
    background-color: var(--cream);
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@keyframes nav-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-links.mobile-open { animation: none; }
    .hamburger span { transition: none; }
}
/* landscape phones: don't let the fixed bar eat the short viewport */
@media (max-height: 520px) {
    nav { padding: 12px 0; }
}

/* ============ POST HEADER (dark) ============ */
.post-head { padding: 180px 24px 88px; background: var(--deep-green); }
.post-head-inner { max-width: 760px; margin: 0 auto; }
.post-eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 34px;
}
.post-eyebrow a {
    color: var(--orange); text-decoration: none;
    transition: color .3s ease;
}
.post-eyebrow a:hover { color: var(--orange-hover); }
.post-eyebrow .sep { margin: 0 10px; color: var(--text-muted); }
.post-head h1 {
    font-family: 'Anton', sans-serif;
    font-size: clamp(34px, 4.6vw, 58px);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.06;
    letter-spacing: -0.5px;
    color: var(--cream);
    margin-bottom: 26px;
}
.post-deck {
    font-size: 19px; line-height: 1.55; font-weight: 300;
    color: var(--text-secondary);
    margin-bottom: 40px;
}
/* Subject tags — written into the page at publish time; each one
   deep-links into the blog index's subject filter. */
.post-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 36px;
}
.post-tag {
    font-size: 11px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; text-decoration: none;
    color: var(--text-secondary);
    padding: 7px 14px; border-radius: 100px;
    border: 1px solid var(--border);
    transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.post-tag:hover {
    color: var(--orange);
    border-color: var(--orange);
    background: var(--orange-glow);
}

.post-byline {
    display: flex; align-items: center; gap: 14px;
    padding-top: 28px; border-top: 1px solid var(--border);
}
.post-byline img {
    width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; filter: grayscale(20%);
}
.byline-name { font-size: 15px; font-weight: 600; color: var(--cream); }
.byline-role { font-size: 13px; color: var(--text-muted); font-weight: 300; }

/* ============ ARTICLE BODY (light) ============ */
.post-body-wrap { background: var(--mid-green); }
.post-body {
    max-width: 720px; margin: 0 auto;
    padding: 88px 24px 32px;
}
.post-body > p {
    font-size: 17.5px; line-height: 1.75; font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 26px;
}
.post-body h2 {
    font-family: 'Anton', sans-serif;
    font-size: 27px; font-weight: 400;
    text-transform: uppercase; letter-spacing: .02em;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 56px 0 22px;
}
.post-body h2:first-child { margin-top: 0; }
.post-body h3 {
    font-family: 'Epilogue', sans-serif;
    font-size: 19px; font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    color: var(--text-primary);
    margin: 40px 0 16px;
}
.post-body a {
    color: var(--orange);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.post-body a:hover { color: var(--orange-hover); }
.post-body strong { font-weight: 600; color: var(--text-primary); }
.post-body em { font-style: italic; }

.post-body ul, .post-body ol {
    list-style: none;
    margin: 0 0 26px;
    display: flex; flex-direction: column; gap: 14px;
    counter-reset: post-ol;
}
.post-body li {
    font-size: 16.5px; line-height: 1.65; font-weight: 400;
    color: var(--text-secondary);
    padding-left: 26px; position: relative;
}
.post-body ul li::before {
    content: ''; position: absolute; left: 2px; top: 11px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--orange);
}
.post-body ol li { counter-increment: post-ol; }
.post-body ol li::before {
    content: counter(post-ol);
    position: absolute; left: 0; top: 1px;
    font-family: 'Anton', sans-serif;
    font-size: 15px; color: var(--orange);
}
.post-body li strong { color: var(--text-primary); }

/* Nested lists — a sub-list sits inside its parent <li>, so the parent's
   padding-left already indents it. Marker changes by depth so level reads. */
.post-body li > ul, .post-body li > ol { margin: 14px 0 0; gap: 10px; }
.post-body li li { font-size: 15.5px; }
.post-body ul ul li::before {                 /* level 2 — hollow ring */
    background: none;
    border: 1.5px solid var(--orange);
    box-sizing: border-box;
}
.post-body ul ul ul li::before {              /* level 3 — dash */
    border: none; background: var(--orange);
    width: 7px; height: 1.5px; border-radius: 0; top: 14px;
}

/* Pull quote */
.post-pull {
    border-left: 3px solid var(--orange);
    padding: 8px 0 8px 28px;
    margin: 46px 0;
    font-family: 'Anton', sans-serif;
    font-size: 25px; font-weight: 400;
    text-transform: uppercase; letter-spacing: .01em;
    line-height: 1.3;
    color: var(--text-primary);
}

/* Callout box */
.post-callout {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(26,26,26,0.1);
    border-radius: 14px;
    padding: 32px 34px;
    margin: 42px 0;
}
.post-callout-title {
    font-size: 12px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--orange);
    margin-bottom: 16px;
}
.post-callout p { font-size: 16px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 14px; }
.post-callout p:last-child, .post-callout ul:last-child, .post-callout ol:last-child { margin-bottom: 0; }
.post-callout li { font-size: 15.5px; }

/* Quotes, figures, rules, code */
.post-body blockquote {
    border-left: 2px solid var(--border-hover);
    padding: 4px 0 4px 24px;
    margin: 36px 0;
    font-size: 17px; font-style: italic; line-height: 1.7;
    color: var(--text-secondary);
}
/* auto margins so a figure narrowed in the editor centres in the column;
   the width itself is set per-image as an inline style */
.post-body figure { margin: 42px auto; }
.post-body figure img { width: 100%; border-radius: 12px; display: block; }
.post-body figcaption {
    font-size: 13px; color: var(--text-muted);
    margin-top: 12px; font-weight: 300; line-height: 1.5;
}

/* ---- interactive embeds ----
   A .post-embed figure is an empty shell in the HTML; the widget in
   posts/embeds/<name>.html is fetched and mounted into it at runtime. Each
   embed namespaces its own styles, so all this needs to do is give it a box
   and stop a slow fetch from collapsing the column. */
.post-body figure.post-embed { margin: 46px auto; min-height: 60px; }
.post-embed-mount svg { width: 100%; height: auto; display: block; }
.post-embed-mount button { font-family: 'Epilogue', sans-serif; }
/* readers get the caption either way; only the widget is missing */
.post-body figure.post-embed.is-failed .post-embed-mount::before {
    content: 'This interactive element couldn’t load.';
    display: block; padding: 22px 24px;
    border: 1px dashed var(--border); border-radius: 12px;
    font-size: 14px; color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
    .post-embed-mount * { animation: none !important; transition: none !important; }
}
.post-body hr {
    border: none; border-top: 1px solid var(--border);
    margin: 52px 0;
}
.post-body code {
    font-family: 'Menlo', 'SF Mono', monospace;
    font-size: 14.5px;
    background: rgba(26,26,26,0.06);
    border-radius: 5px;
    padding: 2px 7px;
}
.post-body pre {
    background: rgba(26,26,26,0.06);
    border: 1px solid rgba(26,26,26,0.08);
    border-radius: 10px;
    padding: 22px 24px;
    margin: 0 0 26px;
    overflow-x: auto;
}
.post-body pre code { background: none; padding: 0; font-size: 13.5px; line-height: 1.7; }

/* ============ END MATTER (light wrap, dark CTA panel) ============ */
.post-end { max-width: 720px; margin: 0 auto; padding: 0 24px 110px; }
/* The newsletter card is the first thing in .post-end, and the space above it
   is three rules stacking: the article's last element's own margin (42px after
   a .post-callout), article's 32px padding-bottom, and .post-end's own 28px —
   102px, against 40px below the card to the share row. The 28px is gone and
   the card is pulled up so the two sides read as a pair rather than a drop. */
.post-end .nl--inline { margin-top: -18px; }
.post-cta {
    background: #0A0A0A;
    border-radius: 18px;
    padding: 60px 48px;
    text-align: center;
    position: relative; overflow: hidden;
}
.post-cta > * { position: relative; z-index: 1; }
.post-cta h2 {
    font-family: 'Anton', sans-serif;
    font-size: clamp(26px, 3vw, 34px); font-weight: 400;
    text-transform: uppercase; line-height: 1.15;
    color: #F0EBE0;
    margin-bottom: 14px;
}
.post-cta p {
    font-size: 16px; line-height: 1.6; font-weight: 300;
    color: rgba(240, 235, 224, 0.7);
    max-width: 480px; margin: 0 auto 32px;
}
.btn-primary {
    background-color: var(--orange);
    color: #F0EBE0;
    padding: 16px 36px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.btn-primary:hover {
    background-color: var(--orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(216, 87, 42, 0.3);
}
.post-back {
    display: flex; justify-content: center;
    margin-top: 40px;
}
.post-back a {
    font-family: 'Anton', sans-serif;
    font-size: 17px; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-secondary); text-decoration: none;
    transition: color .3s ease;
}
.post-back a:hover { color: var(--orange); }

/* ============ FOOTER (dark) ============ */
.site-footer {
    padding: 60px 40px 30px;
    border-top: 1px solid rgba(240, 235, 224, 0.1);
    background: var(--deep-green);
}
.site-footer, .site-footer * { --cream: #F0EBE0; }
.footer-grid {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px;
}
.footer-brand {
    font-family: 'Anton', sans-serif; font-size: 20px;
    letter-spacing: 1px; color: #F0EBE0;
    text-transform: uppercase; margin-bottom: 12px;
}
.footer-tagline { font-size: 14px; color: rgba(240, 235, 224, 0.78); font-weight: 300; }
.footer-col h4 {
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
    color: rgba(240, 235, 224, 0.45); text-transform: uppercase; margin-bottom: 16px;
}
.footer-col a {
    display: flex; align-items: center; gap: 8px; color: rgba(240, 235, 224, 0.7); text-decoration: none;
    font-size: 14px; margin-bottom: 10px; transition: color 0.3s ease;
}
.footer-icon {
    flex: none; width: 15px; height: 15px;
    color: #D8572A;
    transition: color 0.3s ease;
}
.footer-col a:hover .footer-icon { color: #E8633A; }
.footer-col a:hover { color: #F0EBE0; }
.footer-bottom {
    max-width: 1200px; margin: 40px auto 0; padding-top: 20px;
    border-top: 1px solid rgba(240, 235, 224, 0.1);
    display: flex; justify-content: space-between;
    font-size: 13px; color: rgba(240, 235, 224, 0.45);
}
.footer-bottom a { color: rgba(240, 235, 224, 0.45); text-decoration: none; transition: color 0.3s ease; }
.footer-bottom a:hover { color: rgba(240, 235, 224, 0.7); }

/* ============ NEWSLETTER SIGNUP ============
   One component, two frames that ship:
     .nl--wide    light section immediately above the footer (every content page)
     .nl--inline  bordered card at the end of a post
   .nl--band, the centred arrangement, is no longer used by any page —
   blog.html carried it until the pre-footer section went beige and made
   it the same block twice. It stays because preview-newsletter-beige.html
   still draws variants B and C with it.
   Only the frame changes; .nl-* is shared. Behaviour lives in
   partials.js next to the nav, footer and contact modal, because the
   footer variant is on every page and a per-page copy would drift.

   Single opt-in: the POST to /api/subscribe *is* the subscription.
   Nothing here may tell the reader to go and click a confirmation
   link, because no confirmation mail is sent. */
.nl { --nl-gap: 10px; }
.nl-eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--text-muted);
}
.nl-title {
    font-family: 'Anton', sans-serif; font-weight: 400;
    text-transform: uppercase; line-height: 1.08; color: var(--cream);
    letter-spacing: -.2px;
}
.nl-copy {
    font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--text-secondary);
}
.nl-form { display: flex; gap: var(--nl-gap); flex-wrap: wrap; }
.nl-input {
    flex: 1 1 220px; min-width: 0;
    font-family: 'Epilogue', sans-serif; font-size: 15px;
    padding: 13px 15px; border-radius: 6px;
    background: var(--card-bg); border: 1px solid var(--border);
    color: var(--text-primary);
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.nl-input::placeholder { color: var(--text-muted); }
.nl-input:focus {
    outline: none; background: var(--card-bg-hover);
    border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow);
}
.nl.is-error .nl-input { border-color: var(--orange); }
.nl-btn {
    flex: none; font-family: 'Epilogue', sans-serif;
    font-size: 15px; font-weight: 600; padding: 13px 24px;
    border: 0; border-radius: 6px; cursor: pointer;
    background: var(--orange); color: #F0EBE0;
    transition: background-color .25s ease, transform .2s ease, opacity .2s ease;
}
.nl-btn:hover { background: var(--orange-hover); transform: translateY(-1px); }
.nl-btn[disabled] { opacity: .55; cursor: default; transform: none; }
/* Hidden while sending: there is no "one second" message any more, and a
   displayed-but-empty line would jump the layout the moment you submit. */
.nl-status {
    font-size: 13.5px; font-weight: 500; margin-top: 10px;
    color: var(--orange); display: none;
}
.nl.is-error .nl-status { display: block; }
/* Success replaces the form outright — the flow ends, it doesn't linger. */
.nl-done { display: none; align-items: flex-start; gap: 11px; }
.nl.is-done .nl-form, .nl.is-done .nl-status { display: none; }
.nl.is-done .nl-done { display: flex; }
.nl-check { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--orange); }
.nl-done p { font-size: 15px; font-weight: 400; color: var(--text-primary); line-height: 1.6; }
.nl-done p span { display: block; font-size: 13px; font-weight: 300; color: var(--text-muted); margin-top: 4px; }
/* Visually-hidden label — a placeholder is not an accessible name. */
.nl-vh {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- A. PRE-FOOTER BAND: its own light section, above the footer ---- */
.nl--wide {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr minmax(320px, 460px);
    gap: 56px; align-items: center;
}
.nl--wide .nl-title { font-size: clamp(19px, 1.6vw, 24px); margin: 10px 0 12px; }
.nl--wide .nl-copy { font-size: 15.5px; max-width: 54ch; }
.nl--wide .nl-input, .nl--wide .nl-btn { font-size: 15px; padding: 14px 18px; }
.nl--wide .nl-btn { padding-inline: 26px; }
@media (max-width: 1024px) {
    .nl--wide { grid-template-columns: 1fr; gap: 24px; }
}
/* The footer draws its own top rule. Where the light section butts
   straight into it, that rule sits a pixel below the colour change and
   reads as a seam rather than a divider. */
.nl-section + .site-footer { border-top: 0; }

/* ---- B. BLOG BAND: the front-door placement, so it gets the room ---- */
.nl-section {
    padding: clamp(64px, 6vw, 96px) 40px;
    background: var(--mid-green);
    /* LIGHT SECTION OVERRIDES — same token-swap the rest of the site uses */
    --cream: #1A1A1A;
    --cream-faint: rgba(26,26,26,0.08);
    --text-primary: #1A1A1A;
    --text-secondary: #3D3D3D;
    --text-muted: #6B6B6B;
    --border: rgba(26,26,26,0.14);
    --border-hover: rgba(26,26,26,0.25);
    --card-bg: rgba(255,255,255,0.75);
    --card-bg-hover: #FFFFFF;
}
.nl--band { max-width: 640px; margin: 0 auto; }
.nl--band .nl-title { font-size: clamp(28px, 3.2vw, 40px); margin: 14px 0 14px; }
.nl--band .nl-copy { margin-bottom: 26px; }
.nl--band .nl-input, .nl--band .nl-btn { font-size: 16px; padding: 15px 18px; }
.nl--band .nl-btn { padding-inline: 28px; }

/* ---- C. POST INLINE: a card at the end of the article ---- */
.nl--inline {
    max-width: 720px; margin: 0 auto 40px;
    padding: 26px 28px; border-radius: 10px;
    border: 1px solid var(--border); border-left: 3px solid var(--orange);
    background: var(--card-bg);
}
.nl--inline .nl-title { font-size: 21px; margin: 8px 0 10px; }
.nl--inline .nl-copy { font-size: 14.5px; margin-bottom: 18px; }


/* ============ WIDE SCREENS ============ */
@media (min-width: 1800px) {
    nav .container { padding: 0 64px; }
    .nav-brand { font-size: 26px; }
    .nav-logo { height: 38px; }
    .nav-links a { font-size: 16px; }
}

/* ============ MOBILE ============ */
@media (max-width: 768px) {
    nav .container { padding: 0 24px; }
    .nav-logo { height: 30px; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    nav.menu-open { background-color: rgba(10, 10, 10, 0.97); }
    .nav-links.mobile-open {
        display: flex;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 4px 24px 24px;
        background-color: rgba(10, 10, 10, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        max-height: calc(100vh - 64px);
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        animation: nav-menu-in 0.22s ease;
    }
    .nav-links.mobile-open a {
        font-size: 17px;
        padding: 16px 0;
        border-bottom: 1px solid var(--border);
    }
    .nav-links.mobile-open .nav-cta {
        margin-top: 20px;
        padding: 14px 24px;
        border-bottom: 0;
        text-align: center;
    }
    .post-head { padding: 140px 24px 64px; }
    .post-body { padding: 64px 24px 24px; }
    .post-body > p { font-size: 16.5px; }
    .post-pull { font-size: 21px; padding-left: 22px; }
    .post-callout { padding: 26px 24px; }
    .post-cta { padding: 44px 28px; }
    .post-end { padding-bottom: 90px; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 8px; }
    /* tap targets: 34px tag pills and the 27px back link grow to thumb size;
       footer links were 22px rows stacked 10px apart */
    .post-tags a { padding: 14px 16px; }
    .post-back a { display: inline-block; padding: 10px 16px 10px 0; }
    .footer-col a { padding: 8px 0; margin-bottom: 2px; }
}

/* ---- image lightbox ----
   A content image opens full-size on click. Embed figures are live widgets
   with their own click behaviour, so they are excluded. The overlay is built
   on first use and reused, and it lives outside .post-body so the column's
   max-width never constrains it. */
.post-body figure:not(.post-embed) img { cursor: zoom-in; }
.post-body figure:not(.post-embed) img:focus-visible {
    outline: 2px solid var(--orange); outline-offset: 3px;
}
.lightbox {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(10, 10, 10, .93);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-figure {
    margin: 0; display: flex; flex-direction: column; gap: 14px;
    align-items: center; max-height: 100%;
}
.lightbox-figure img {
    /* dvh, not vh: vh is the LARGE viewport, so with the toolbar up an image
       sized against it extends past what's actually visible — worst in
       landscape, where the toolbar is the biggest share of a short screen */
    max-width: 100%; max-height: 82vh; max-height: 82dvh;
    width: auto; height: auto;
    border-radius: 12px; display: block; cursor: zoom-out;
}
.lightbox-figure figcaption {
    font-size: 13px; line-height: 1.5; color: rgba(240, 235, 224, .72);
    text-align: center; max-width: 680px;
}
.lightbox-close {
    position: absolute; top: 16px; right: 20px;
    width: 44px; height: 44px;              /* thumb-sized, same as the nav */
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer;
    font-size: 30px; line-height: 1; color: rgba(240, 235, 224, .7);
    transition: color .2s ease;
}
.lightbox-close:hover { color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }

/* ---- post end: share, related, pager ---------------------------------- */
.post-share {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding-bottom: 34px; border-bottom: 1px solid var(--border);
}
.post-share-label {
    font-size: 12px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-primary);
}
.post-share-links { display: flex; gap: 10px; }
.post-share-links a {
    width: 34px; height: 34px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: var(--orange); color: #F7F4EE;
    transition: background-color .25s ease, transform .2s ease;
}
.post-share-links a:hover { background: var(--orange-hover); transform: translateY(-2px); }
.post-share-links svg { width: 17px; height: 17px; fill: currentColor; display: block; }

.post-related { padding-top: 40px; }
.post-related h2 {
    font-family: 'Anton', sans-serif;
    font-size: 24px; font-weight: 400;
    text-transform: uppercase; letter-spacing: .02em;
    color: var(--text-primary); margin-bottom: 26px;
}
.post-related-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px;
}
.related-card { text-decoration: none; display: block; }
.related-card h3 {
    font-size: 16px; font-weight: 700; line-height: 1.35;
    color: var(--text-primary); margin-bottom: 10px;
    transition: color .25s ease;
}
.related-card:hover h3 { color: var(--orange); }
.related-card .related-date {
    font-size: 13px; font-weight: 300; color: var(--text-muted);
}

/* previous / next, mirroring the reading order of the index (newest first) */
.post-pager {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    margin-top: 44px; padding-top: 30px;
    border-top: 1px solid var(--border);
}
.post-pager a {
    display: flex; gap: 12px; text-decoration: none;
    font-size: 15px; line-height: 1.45; color: var(--text-secondary);
    transition: color .25s ease;
}
.post-pager a:hover { color: var(--orange); }
.pager-next { grid-column: 2; justify-self: end; text-align: right; }
.pager-prev .pager-arrow, .pager-next .pager-arrow { flex: none; color: var(--text-muted); }
.pager-next { flex-direction: row; }
.post-pager a:hover .pager-arrow { color: var(--orange); }
/* a lone neighbour must still sit on its own side */
.post-pager .pager-prev { grid-column: 1; }

@media (max-width: 700px) {
    .post-related-grid { grid-template-columns: 1fr; gap: 22px; }
    .post-pager { grid-template-columns: 1fr; gap: 18px; }
    .post-pager .pager-next { grid-column: 1; justify-self: start; text-align: left; flex-direction: row-reverse; }
}

/* match the main site: the address is the one orange item in the footer */
/* the Connect links are the ones carrying a glyph — both run orange */
.footer-col a:has(.footer-icon),
.footer-col a.footer-mail { color: #D8572A; }
.footer-col a:has(.footer-icon):hover,
.footer-col a.footer-mail:hover { color: #E8633A; }

/* ---- landscape phones ----
   Height, not width, is the scarce axis, so the query names height directly —
   `orientation: landscape` would also match every desktop monitor and an iPad
   with room to spare. It has to be height for a second reason: most phones are
   WIDER than 768 turned sideways (15 Pro is 852, Pro Max 932), so the ≤768
   rules never fire for them at all. Last in the file so it also outranks those
   rules on the one phone that does hit them, the 667×375 SE.
   Only the air comes out — no font sizes, no reflow. The desktop header stack
   runs ~670px tall, which on a 393px screen is the whole title and deck below
   the fold on a page whose entire job is to be read. */
@media (max-height: 520px) {
    .post-head { padding-top: 92px; padding-bottom: 44px; }
    .post-eyebrow { margin-bottom: 20px; }
    .post-head h1 { margin-bottom: 18px; }
    .post-deck { margin-bottom: 24px; }
    .post-tags { margin-bottom: 22px; }
    .post-byline { padding-top: 20px; }
}

/* ============ "LET'S TALK" MODAL ============
   Shared chrome, like the nav and footer: partials.js appends it to every page
   and the nav CTA opens it. Deliberately self-contained — the footer contact
   card it mirrors is styled inside index.html, so borrowing those class names
   would leave the modal unstyled on every other page. Native <dialog> for the
   focus trap, Escape, background inerting and backdrop. */
.cm {
    position: fixed;
    top: 50%; left: 50%;
    margin: 0;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    padding: 36px;
    border: 1px solid var(--border-hover);
    border-radius: 16px;
    /* solid rather than the card's translucent fill: over a blurred backdrop a
       see-through panel reads as smeared instead of layered */
    background: #121212;
    color: var(--cream);
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    /* Closed state: below centre and transparent. display and overlay are
       transitioned with allow-discrete so the panel stays rendered through the
       exit — without them a closing dialog leaves the top layer at once and the
       slide-down never plays. translate carries the centring, which leaves
       transform free to carry the slide. */
    translate: -50% -50%;
    transform: translateY(28px);
    opacity: 0;
    transition: transform .34s cubic-bezier(.16, 1, .3, 1),
                opacity .28s ease,
                display .34s allow-discrete,
                overlay .34s allow-discrete;
}
.cm[open] { transform: translateY(0); opacity: 1; }
@starting-style { .cm[open] { transform: translateY(28px); opacity: 0; } }
.cm::backdrop {
    background: rgba(10, 10, 10, 0);
    backdrop-filter: blur(0px);
    transition: background-color .34s ease, backdrop-filter .34s ease,
                display .34s allow-discrete, overlay .34s allow-discrete;
}
.cm[open]::backdrop { background: rgba(10, 10, 10, .72); backdrop-filter: blur(6px); }
@starting-style { .cm[open]::backdrop { background: rgba(10, 10, 10, 0); backdrop-filter: blur(0px); } }

.cm-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.cm-head img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; }
.cm-name { font-weight: 600; font-size: 16px; color: var(--cream); }
.cm-role { font-size: 13px; color: var(--text-muted); font-weight: 300; margin-top: 2px; }
/* margin-left:auto rather than space-between, so the avatar and name stay
   tucked together and only the icons travel to the far edge */
.cm-social { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cm-social a {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    color: var(--orange);
    transition: color .3s ease, background-color .3s ease;
}
.cm-social a:hover { color: var(--orange-hover); background: var(--cream-faint); }
.cm-social svg { width: 17px; height: 17px; fill: currentColor; }

.cm-field { margin-bottom: 18px; }
.cm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cm-field input, .cm-field textarea, .cm-field select {
    width: 100%; background: transparent; border: none;
    border-bottom: 1px solid var(--border-hover);
    padding: 12px 0; color: var(--cream);
    font-family: 'Epilogue', sans-serif; font-size: 15px; font-weight: 300;
    /* px, not a ratio: the select's label renders smaller than the inputs'
       typed text, so a font-relative line box would sit its underline higher
       than its row partner's */
    line-height: 22px;
    outline: none;
    transition: border-color .3s ease;
}
.cm-field textarea { resize: none; height: 96px; }
.cm-field input:focus, .cm-field textarea:focus, .cm-field select:focus { border-color: var(--orange); }
.cm-field input::placeholder, .cm-field textarea::placeholder {
    color: var(--text-muted);
    font-size: 11px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase;
}
/* no text-transform on the select itself — native popups inherit it and would
   render every option in caps. Its placeholder option is written in caps. */
.cm-field select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    color: var(--text-muted);
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
}
.cm-field select.filled { color: var(--cream); font-size: 15px; font-weight: 300; letter-spacing: normal; }
.cm-field select option { color: #1A1A1A; letter-spacing: normal; }
.cm-select { position: relative; }
.cm-select::after {
    content: ''; position: absolute; right: 2px; top: 20px;
    width: 7px; height: 7px; pointer-events: none;
    border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg);
}
/* Autofill: the browser paints its own pale background and near-black text in,
   which on this dark panel lands as white boxes. The background can't be
   re-declared — the UA style wins — but it IS animated, so parking the
   transition years out means it never visibly arrives. */
.cm-field input:-webkit-autofill,
.cm-field input:-webkit-autofill:hover,
.cm-field input:-webkit-autofill:focus,
.cm-field textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--cream);
    caret-color: var(--cream);
    transition: background-color 100000s ease 0s;
    font-family: 'Epilogue', sans-serif; font-size: 15px; font-weight: 300;
}
.cm-field input:autofill, .cm-field textarea:autofill {
    background-image: none; filter: none;
    -webkit-text-fill-color: var(--cream); caret-color: var(--cream);
}
.cm-send {
    background-color: var(--orange); color: var(--cream);
    padding: 16px 36px; border-radius: 8px; border: none;
    font-family: 'Epilogue', sans-serif; font-weight: 600; font-size: 16px;
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    transition: background-color .3s ease, transform .2s ease, box-shadow .3s ease;
}
.cm-send:hover { background-color: var(--orange-hover); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(216, 87, 42, .3); }
.cm-send[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.cm-msg { font-size: 13px; margin-top: 12px; min-height: 18px; color: var(--orange); }
.cm-msg a { color: var(--orange); }
.cm-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cm-sent { text-align: center; padding: 22px 0 6px; }
.cm-sent h3 { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 22px; margin-bottom: 10px; color: var(--cream); }
.cm-sent p { color: var(--text-secondary); font-size: 15px; font-weight: 300; line-height: 1.6; }
@media (max-width: 768px) {
    .cm { padding: 28px 24px; }
    .cm-row2 { grid-template-columns: 1fr; gap: 0; }
    .cm-social a { width: 30px; height: 30px; }
    /* fields under 16px make iOS zoom the page on focus. The select is excluded
       on purpose: it opens a picker rather than a caret, so it never triggers
       the zoom, and 16px would blow its uppercase label past the placeholders
       beside it. */
    .cm-field input, .cm-field textarea { font-size: 16px; }
    .cm-send { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .cm { transition: opacity .2s ease, display .2s allow-discrete, overlay .2s allow-discrete; }
    .cm, .cm[open] { transform: none; }
}