/* The Health Brief: palette sampled from Walt's own photographs.
   Cream from the harbour sky, pine from the shoreline, sienna from the autumn hills,
   driftwood greys from the dock planks. Every pair below passes WCAG AA. */

:root {
    /* Surfaces */
    --thp-cream: #fdf7ee;
    --thp-tint: #f4efe3;
    --thp-surface: #fffdf9;
    --thp-white: #ffffff;

    /* Pine, the dark anchor */
    --thp-pine: #2b3b38;
    --thp-pine-deep: #1e2a27;
    --thp-pine-mid: #3d534d;

    /* Sienna, the action colour */
    --thp-sienna: #a35f30;
    --thp-sienna-dark: #8a5228;
    --thp-sienna-tint: #f6e7d6;
    --thp-sienna-line: #e8d2b8;

    /* Warm neutrals */
    --thp-sand: #e6caac;
    --thp-ink: #232b28;
    --thp-body: #4f4a44;
    --thp-muted: #6e655b;
    --thp-line: #e4dbcc;
    --thp-line-soft: #efe8db;

    /* Water, the secondary accent */
    --thp-water: #5e7480;
    --thp-water-soft: #8fa3ac;

    --thp-radius: 20px;
    --thp-radius-sm: 14px;
    --thp-radius-pill: 999px;
    --thp-shadow: 0 10px 24px -8px rgba(35, 43, 40, .16);
    --thp-shadow-lg: 0 24px 48px -16px rgba(35, 43, 40, .24);

    /* Ghost's font settings win when the operator picks fonts in the admin. */
    --thp-display: var(--gh-font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    --thp-sans: var(--gh-font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);

    --thp-wrap: 1200px;
    --thp-text: 850px;
    --thp-pad: 32px;
}

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

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

body.thp {
    margin: 0;
    background: var(--thp-cream);
    color: var(--thp-body);
    font-family: var(--thp-sans);
    font-size: 17px;
    line-height: 1.45;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--thp-sienna-dark); text-decoration: none; }
a:hover { color: var(--thp-pine); }

:focus-visible {
    outline: 3px solid var(--thp-sienna);
    outline-offset: 2px;
    border-radius: 6px;
}

.thp-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.thp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--thp-pine);
    color: #ffffff;
    padding: 12px 18px;
    z-index: 100;
    border-radius: 0 0 var(--thp-radius-sm) 0;
}
.thp-skip:focus { left: 0; color: #ffffff; }

/* Layout ------------------------------------------------------------------ */

.thp-wrap {
    width: 100%;
    max-width: var(--thp-wrap);
    margin: 0 auto;
    padding: 0 var(--thp-pad);
}

.thp-sec { padding: 96px 0; }
.thp-sec-tint { background: var(--thp-tint); border-top: 1px solid var(--thp-line); border-bottom: 1px solid var(--thp-line); }
/* The lightest band on the page: surface sits above cream, which sits above
   tint. Softer hairlines than the tinted band, or the border would outweigh
   the fill it is meant to separate. */
.thp-sec-light { background: var(--thp-surface); border-top: 1px solid var(--thp-line-soft); border-bottom: 1px solid var(--thp-line-soft); }

.thp-text { max-width: var(--thp-text); }

.thp-headwrap { margin-bottom: 44px; }
.thp-headwrap-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: end;
    justify-content: space-between;
    max-width: none;
}

/* Type ------------------------------------------------------------------- */

.thp-h1 {
    font-family: var(--thp-display);
    font-weight: 600;
    font-size: clamp(2.1rem, 4.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--thp-ink);
    margin: 0 0 18px;
}

.thp-h2 {
    font-family: var(--thp-display);
    font-weight: 600;
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -.017em;
    color: var(--thp-ink);
    margin: 0 0 14px;
}

.thp-lead {
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    line-height: 1.6;
    color: var(--thp-body);
    margin: 0 0 28px;
    max-width: 34em;
}

.thp-sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--thp-muted);
    margin: 0;
    max-width: 40em;
}

.thp-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    margin-bottom: 18px;
    background: var(--thp-sienna-tint);
    border: 1px solid var(--thp-sienna-line);
    border-radius: var(--thp-radius-pill);
    color: var(--thp-sienna-dark);
    font-family: var(--thp-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.thp-pill::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--thp-sienna);
}
.thp-pill-light {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(230, 202, 172, .45);
    color: var(--thp-sand);
}
.thp-pill-light::before { background: var(--thp-sand); }

.thp-textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--thp-sienna-dark);
    border-bottom: 2px solid var(--thp-sienna-line);
    padding-bottom: 2px;
}
.thp-textlink::after { content: "\2192"; font-weight: 500; }
.thp-textlink:hover { color: var(--thp-pine); border-bottom-color: var(--thp-sienna); }

/* Buttons and forms ------------------------------------------------------ */

.thp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 28px;
    background: var(--thp-sienna);
    color: #ffffff;
    font-family: var(--thp-sans);
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--thp-sienna);
    border-radius: var(--thp-radius-sm);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, color .2s ease, border-color .2s ease;
}
.thp-btn:hover { background: var(--thp-sienna-dark); border-color: var(--thp-sienna-dark); color: #ffffff; transform: translateY(-1px); }

.thp-btn-sm { padding: 10px 18px; font-size: 14px; }

.thp-btn-ghost {
    background: transparent;
    color: var(--thp-pine);
    border-color: var(--thp-line);
}
.thp-btn-ghost:hover { background: var(--thp-sienna-tint); color: var(--thp-sienna-dark); border-color: var(--thp-sienna-line); }

.thp-btn-ink { background: var(--thp-pine-deep); border-color: var(--thp-pine-deep); }
.thp-btn-ink:hover { background: #131c1a; border-color: #131c1a; }

.thp-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    max-width: 540px;
}
.thp-form input[type="email"] {
    flex: 1 1 240px;
    min-width: 0;
    padding: 15px 18px;
    font-family: var(--thp-sans);
    font-size: 16px;
    color: var(--thp-ink);
    background: #ffffff;
    border: 1px solid var(--thp-line);
    border-radius: var(--thp-radius-sm);
}
.thp-form input[type="email"]::placeholder { color: #a29889; }
.thp-form input[type="email"]:focus { border-color: var(--thp-sienna); outline: 3px solid var(--thp-sienna-tint); outline-offset: 0; }

.thp-form .thp-success,
.thp-form .thp-error {
    flex: 1 1 100%;
    margin: 0;
    font-size: 14px;
    display: none;
}
.thp-form .thp-success { color: var(--thp-sienna-dark); font-weight: 600; }
.thp-form .thp-error { color: #a12020; font-weight: 600; }
.thp-form.success .thp-success { display: block; }
.thp-form.error .thp-error { display: block; }

.thp-form-light input[type="email"] { border-color: transparent; }
.thp-form-light .thp-success { color: var(--thp-sand); }
.thp-form-light .thp-error { color: #f2c2c2; }

.thp-fineprint {
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--thp-muted);
}

/* Header ----------------------------------------------------------------- */

.thp-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(253, 247, 238, .93);
    backdrop-filter: saturate(150%) blur(8px);
    border-bottom: 1px solid var(--thp-line);
}
.thp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
}

.thp-brand { display: inline-flex; align-items: center; gap: 10px; }
.thp-brand-mark { display: inline-flex; }
.thp-brand-logo { max-height: 34px; width: auto; }
.thp-brand-text {
    font-family: var(--thp-display);
    font-weight: 600;
    font-size: 1.24rem;
    letter-spacing: -.014em;
    color: var(--thp-ink);
}

.thp-nav-list {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.thp-nav-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--thp-body);
}
.thp-nav-link:hover { color: var(--thp-sienna-dark); }

.thp-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--thp-line);
    border-radius: 12px;
    cursor: pointer;
}
.thp-burger-bar { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--thp-ink); border-radius: 2px; }

/* Hero ------------------------------------------------------------------- */

.thp-hero { padding: 76px 0 86px; }
.thp-hero-slim { padding: 66px 0 62px; }

.thp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
    gap: 52px;
    align-items: center;
}

.thp-hero-photo {
    position: relative;
    margin: 0;
    border-radius: var(--thp-radius);
    overflow: hidden;
    box-shadow: var(--thp-shadow-lg);
}
.thp-hero-photo img { width: 100%; height: auto; }
/* The caption is a chip pinned to the photo rather than a gradient band across
   it, so the dusk shot stays whole. It carries the same dot the pills carry,
   in sand because that is the colour the theme already uses for a dot on a dark
   surface. The panel colour alone holds the contrast, so a browser with no
   backdrop-filter loses the frosting and nothing else. */
.thp-hero-cap {
    position: absolute;
    left: 18px; right: auto; bottom: 18px;
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    width: fit-content;
    max-width: min(34ch, calc(100% - 36px));
    padding: 13px 18px 14px;
    background: rgba(30, 42, 39, .78);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
    border: 1px solid rgba(230, 202, 172, .3);
    border-radius: var(--thp-radius-sm);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .55);
    font-family: var(--thp-display);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--thp-cream);
    text-align: left;
}
.thp-hero-cap::before {
    content: "";
    flex: 0 0 auto;
    width: 7px; height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--thp-sand);
}

/* About hero: a strip of facts instead of a second two-column photo hero.
   Every figure here is already stated in the essay below, so the strip adds
   no claim, only a faster answer to "who are you". ------------------------- */
.thp-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 38px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--thp-line);
    list-style: none;
}
.thp-fact {
    padding-left: 24px;
    border-left: 1px solid var(--thp-line);
}
.thp-fact:first-child { padding-left: 0; border-left: 0; }
.thp-fact-n {
    display: block;
    font-family: var(--thp-display);
    font-weight: 600;
    font-size: clamp(1.55rem, 2.8vw, 2rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--thp-sienna);
}
.thp-fact-l {
    display: block;
    margin-top: 10px;
    max-width: 18ch;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--thp-muted);
}

/* Evidence band (one series, both bars directly labelled) ----------------- */

.thp-band {
    background: var(--thp-pine);
    color: #ffffff;
    padding: 54px 0;
}
.thp-band-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 44px;
    align-items: center;
}
.thp-band-kicker {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--thp-sand);
    margin-bottom: 10px;
}
.thp-band-title {
    font-family: var(--thp-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    line-height: 1.15;
    letter-spacing: -.015em;
    color: #ffffff;
    margin: 0 0 10px;
}
.thp-band-note { margin: 0; font-size: 14px; line-height: 1.55; color: #cfd8d3; }

.thp-bars { display: flex; flex-direction: column; gap: 22px; }
.thp-bar-label {
    display: block;
    font-size: 14px;
    color: #d9e0dc;
    margin-bottom: 9px;
}
.thp-bar-track { display: flex; align-items: center; gap: 12px; }
.thp-bar {
    height: 14px;
    border-radius: 0 4px 4px 0;
    flex: 0 0 auto;
    max-width: calc(100% - 92px);
}
.thp-bar-hi { background: var(--thp-sand); }
.thp-bar-lo { background: #5c6b66; }
.thp-bar-val {
    font-family: var(--thp-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
}
.thp-bar-val-lo { color: #cfd8d3; }

/* Body-area picker ------------------------------------------------------- */

.thp-picker {
    border: 1px solid var(--thp-line);
    border-radius: var(--thp-radius);
    background: var(--thp-surface);
    box-shadow: var(--thp-shadow);
    overflow: hidden;
}
.thp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 20px;
    background: var(--thp-tint);
    border-bottom: 1px solid var(--thp-line);
}
.thp-tab {
    padding: 10px 18px;
    background: #ffffff;
    border: 1px solid var(--thp-line);
    border-radius: var(--thp-radius-pill);
    font-family: var(--thp-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--thp-body);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.thp-tab:hover { border-color: var(--thp-sienna-line); color: var(--thp-sienna-dark); }
.thp-tab.is-active {
    background: var(--thp-pine);
    border-color: var(--thp-pine);
    color: #ffffff;
}

.thp-panels { padding: 30px; }
.thp-panel { animation: thp-fade .25s ease both; }
.thp-panel[hidden] { display: none; }
.thp-panel p { margin: 0; font-size: 1.06rem; line-height: 1.65; max-width: 60ch; }
.thp-panel-h {
    font-family: var(--thp-display);
    font-size: 1.3rem;
    letter-spacing: -.012em;
    color: var(--thp-ink);
    margin: 0 0 10px;
}

@keyframes thp-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* Split, cards, photo figure --------------------------------------------- */

.thp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
}
.thp-split-text p { font-size: 1.04rem; line-height: 1.65; margin: 0 0 16px; max-width: 46ch; }

.thp-figure { margin: 0; }
.thp-figure img { width: 100%; border-radius: var(--thp-radius); box-shadow: var(--thp-shadow); }
.thp-figure figcaption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--thp-muted);
}

/* The essay: a capped text column with the harbour photo out on the right
   margin. Three acts split on the story's own beats, numerals only, so the
   copy is untouched. The figure centres itself against the full run of acts,
   which is what keeps the margin from reading as dead space. */
.thp-essay {
    display: grid;
    grid-template-columns: minmax(0, 61ch) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.thp-act + .thp-act {
    margin-top: 42px;
    padding-top: 42px;
    border-top: 1px solid var(--thp-sienna-line);
}
.thp-act p {
    margin: 0 0 22px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--thp-body);
}
.thp-act p:last-child { margin-bottom: 0; }

/* The photo rides along with the reader: pinned below the sticky header for as
   long as the acts run, then released with the section. top clears the header
   (74px) plus a breath. align-items:start on the grid is what gives it room to
   travel; with center it would have nothing to move inside. */
.thp-essay-figure {
    margin: 0;
    position: sticky;
    top: 98px;
}
.thp-essay-figure img {
    width: 100%;
    border-radius: var(--thp-radius);
    box-shadow: var(--thp-shadow);
}
.thp-essay-figure figcaption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--thp-muted);
}

/* Heading left, prose right. Not thp-split: that one is prose plus a card grid
   and belongs to home.hbs. Here the point is simply that a 46ch column parked
   against the left edge of a full-bleed tinted band left the right half empty. */
.thp-lede {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: start;
}
.thp-lede-head .thp-h2 { margin-bottom: 0; }
.thp-lede-body p {
    margin: 0 0 18px;
    font-size: 1.06rem;
    line-height: 1.7;
    max-width: 56ch;
}
.thp-lede-body p:last-child { margin-bottom: 0; }

.thp-promises {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.thp-promises-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.thp-card {
    padding: 26px 26px 26px;
    background: var(--thp-surface);
    border: 1px solid var(--thp-line);
    border-radius: var(--thp-radius);
    transition: transform .2s ease, box-shadow .2s ease;
}
.thp-card:hover { transform: translateY(-3px); box-shadow: var(--thp-shadow); }
.thp-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--thp-muted); }
.thp-card-h {
    font-family: var(--thp-display);
    font-size: 1.1rem;
    line-height: 1.28;
    letter-spacing: -.01em;
    color: var(--thp-ink);
    margin: 0 0 8px;
}
.thp-num {
    display: block;
    font-family: var(--thp-display);
    font-size: clamp(1.4rem, 2.4vw, 1.7rem);
    font-weight: 600;
    color: var(--thp-sienna);
    margin-bottom: 12px;
}

/* Week grid -------------------------------------------------------------- */

.thp-week {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 18px;
}
.thp-day {
    padding: 22px 22px 22px;
    background: var(--thp-surface);
    border: 1px solid var(--thp-line);
    border-top: 3px solid var(--thp-sienna);
    border-radius: var(--thp-radius-sm);
}
.thp-day p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--thp-muted); }
.thp-day-tag {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--thp-sienna-dark);
    margin-bottom: 10px;
}

/* Post cards ------------------------------------------------------------- */

.thp-posts { display: grid; gap: 20px; }
/* Always three tracks, so a single issue sits in a third of the row and the
   next ones fill in beside it. auto-fit collapsed the empty tracks, which is
   why one post used to stretch across the whole section. The empty-state card
   is a message rather than an issue, so it keeps the full width. */
.thp-posts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.thp-posts-3 > .thp-post-empty { grid-column: 1 / -1; }

.thp-post {
    background: var(--thp-surface);
    border: 1px solid var(--thp-line);
    border-radius: var(--thp-radius);
    transition: transform .2s ease, box-shadow .2s ease;
}
.thp-post:hover { transform: translateY(-3px); box-shadow: var(--thp-shadow); }
.thp-post-link { display: block; padding: 28px 28px 28px; color: inherit; }
.thp-post-empty { padding: 28px 28px 28px; }
.thp-post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--thp-muted);
    margin-bottom: 14px;
}
.thp-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--thp-water-soft); display: inline-block; }
.thp-post-h {
    font-family: var(--thp-display);
    font-size: 1.26rem;
    line-height: 1.22;
    letter-spacing: -.013em;
    color: var(--thp-ink);
    margin: 0 0 10px;
}
.thp-post-x { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--thp-muted); }
.thp-post-cta { font-size: 14px; font-weight: 600; color: var(--thp-sienna-dark); }
/* Chip and call to action share the card's last line: the chip keeps its own
   width, the call to action is pushed to the far edge. */
.thp-post-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
}
.thp-post-link:hover .thp-post-cta { color: var(--thp-pine); }

/* Archive rows ----------------------------------------------------------- */

.thp-archive {
    border: 1px solid var(--thp-line);
    border-radius: var(--thp-radius);
    overflow: hidden;
    background: var(--thp-surface);
}
.thp-arch-row + .thp-arch-row { border-top: 1px solid var(--thp-line-soft); }
.thp-arch-link {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) auto;
    gap: 24px;
    align-items: start;
    padding: 24px 26px 24px;
    color: inherit;
}
.thp-arch-link:hover { background: var(--thp-tint); }
.thp-arch-date { font-size: 13px; color: var(--thp-muted); padding-top: 4px; }
.thp-arch-h {
    display: block;
    font-family: var(--thp-display);
    font-size: 1.14rem;
    line-height: 1.28;
    letter-spacing: -.01em;
    color: var(--thp-ink);
    margin-bottom: 6px;
}
.thp-arch-x { display: block; font-size: 14px; line-height: 1.55; color: var(--thp-muted); }
.thp-arch-meta { display: flex; align-items: center; gap: 12px; padding-top: 3px; }
.thp-arch-time { font-size: 13px; color: var(--thp-muted); white-space: nowrap; }
.thp-tagchip {
    padding: 4px 12px;
    background: var(--thp-sienna-tint);
    border: 1px solid var(--thp-sienna-line);
    border-radius: var(--thp-radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--thp-sienna-dark);
    white-space: nowrap;
}

/* Safety note ------------------------------------------------------------ */

.thp-safety {
    max-width: var(--thp-text);
    background-clip: padding-box;
    padding: 28px 28px 28px;
    background: #fdf3e3;
    border: 1px solid #e8cfa4;
    border-left: 4px solid var(--thp-sienna);
    border-radius: var(--thp-radius);
}
.thp-safety-kicker {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #7a4318;
    margin-bottom: 10px;
}
.thp-safety p { margin: 0; font-size: 1rem; line-height: 1.65; color: #43301f; }

/* CTA band --------------------------------------------------------------- */

.thp-cta-sec { padding-bottom: 84px; }
.thp-cta {
    padding: 56px 44px 56px;
    background: var(--thp-pine);
    border-radius: var(--thp-radius);
    color: #ffffff;
    text-align: center;
}
.thp-cta-h { color: #ffffff; margin-bottom: 12px; }
.thp-cta-sub {
    margin: 0 auto 26px;
    max-width: 46ch;
    font-size: 1.04rem;
    line-height: 1.6;
    color: #d9e0dc;
}
.thp-cta .thp-form { margin: 0 auto; justify-content: center; }
.thp-cta .thp-btn-ink { background: var(--thp-sienna); border-color: var(--thp-sienna); }
.thp-cta .thp-btn-ink:hover { background: var(--thp-sienna-dark); border-color: var(--thp-sienna-dark); }
.thp-cta .thp-fineprint { color: #cfd8d3; }

/* Article ---------------------------------------------------------------- */

.thp-article { padding: 56px 0 72px; }
.thp-article-wrap {
    max-width: var(--thp-text);
    margin: 0 auto;
    padding: 0 30px 0;
}
.thp-article-head { margin-bottom: 30px; }
.thp-article-h1 {
    font-family: var(--thp-display);
    font-weight: 600;
    font-size: clamp(1.95rem, 4.2vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--thp-ink);
    margin: 0 0 14px;
}
.thp-article-sub {
    font-size: 1.14rem;
    line-height: 1.6;
    color: var(--thp-muted);
    margin: 0 0 18px;
}
.thp-article-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--thp-muted);
    padding-top: 16px;
    border-top: 1px solid var(--thp-line);
}

.thp-article-image { margin: 0 0 30px; }
.thp-article-image img {
    width: 100%;
    max-width: var(--thp-text);
    max-height: 460px;
    object-fit: cover;
    border-radius: var(--thp-radius);
}
.thp-article-image figcaption { margin-top: 10px; font-size: 13px; color: var(--thp-muted); text-align: center; }

.thp-article-foot {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--thp-line);
}
.thp-signoff { font-family: var(--thp-display); font-size: 1.14rem; color: var(--thp-ink); margin: 0 0 18px; }

.thp-reply {
    margin: 0 0 20px;
    padding: 16px 20px 16px;
    background: var(--thp-sienna-tint);
    border: 1px solid var(--thp-sienna-line);
    border-radius: var(--thp-radius-sm);
    font-size: 15px;
    color: var(--thp-body);
}
.thp-reply a { font-weight: 600; border-bottom: 2px solid var(--thp-sienna-line); }
.thp-reply a:hover { border-bottom-color: var(--thp-sienna); }

.thp-article-note { font-size: 14px; color: var(--thp-muted); margin: 0 0 18px; }

/* Long-form prose (Ghost content) ---------------------------------------- */

.thp-content { max-width: var(--thp-text); font-size: 18px; line-height: 1.7; color: var(--thp-body); }
.thp-content p { margin: 0 0 22px; }
.thp-first { font-family: var(--thp-display); font-size: 1.35rem; line-height: 1.45; color: var(--thp-ink); }

.thp-content h2 {
    font-family: var(--thp-display);
    font-size: 1.65rem;
    line-height: 1.18;
    letter-spacing: -.016em;
    color: var(--thp-ink);
    margin: 42px 0 14px;
}
.thp-content h3 {
    font-family: var(--thp-display);
    font-size: 1.28rem;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--thp-ink);
    margin: 32px 0 12px;
}
.thp-content ul, .thp-content ol { margin: 0 0 22px; padding-left: 24px; }
.thp-content li { margin-bottom: 8px; }
.thp-content a { border-bottom: 2px solid var(--thp-sienna-line); }
.thp-content a:hover { border-bottom-color: var(--thp-sienna); }
.thp-content strong { color: var(--thp-ink); }

.thp-content blockquote {
    margin: 30px 0;
    padding: 22px 26px 22px;
    background: var(--thp-tint);
    border-left: 4px solid var(--thp-sienna);
    border-radius: 0 var(--thp-radius-sm) var(--thp-radius-sm) 0;
    font-family: var(--thp-display);
    font-size: 1.14rem;
    line-height: 1.5;
    color: var(--thp-ink);
}
.thp-content blockquote p:last-child { margin-bottom: 0; }

.thp-content hr {
    height: 1px;
    border: 0;
    background: var(--thp-line);
    margin: 40px 0;
}

.thp-content img, .thp-content .kg-image { border-radius: var(--thp-radius-sm); }
.thp-content figure { margin: 30px 0; }
.thp-content figcaption { margin-top: 10px; font-size: 13px; color: var(--thp-muted); text-align: center; }

.thp-content .kg-width-wide { width: min(100vw - 60px, 1040px); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.thp-content .kg-width-full { width: min(100vw - 60px, var(--thp-wrap)); max-width: none; margin-left: 50%; transform: translateX(-50%); }

.thp-content .kg-callout-card { border-radius: var(--thp-radius-sm); }
.thp-content .kg-button-card a.kg-btn { background: var(--thp-sienna); border-radius: var(--thp-radius-sm); }

/* Pagination ------------------------------------------------------------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
    font-size: 15px;
    color: var(--thp-muted);
}
.pagination a { font-weight: 600; }

/* Footer ----------------------------------------------------------------- */

.thp-footer {
    padding: 60px 0 40px;
    background: var(--thp-pine-deep);
    color: #cfd8d3;
}
.thp-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 36px;
    align-items: start;
}
.thp-footer-word {
    display: block;
    font-family: var(--thp-display);
    font-size: 1.2rem;
    letter-spacing: -.012em;
    color: #ffffff;
    margin-bottom: 10px;
}
.thp-footer-note { margin: 0; font-size: 14px; line-height: 1.6; color: #b3bfb9; max-width: 40ch; }
.thp-footer-col { display: flex; flex-direction: column; gap: 9px; }
.thp-footer-col a { font-size: 14px; color: #d9e0dc; }
.thp-footer-col a:hover { color: var(--thp-sand); }
.thp-footer-head {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--thp-sand);
    margin-bottom: 3px;
}

/* The rule used to be a border-top on the disclaimer itself, so it inherited
   that paragraph's 66ch measure and stopped halfway across the footer. It is
   its own element now, a direct child of the full-bleed footer. */
.thp-footer-rule {
    height: 1px;
    margin: 40px 0 0;
    border: 0;
    background: rgba(230, 202, 172, .18);
}

/* Small print reads as small print: one quiet tier shared with the copyright,
   a step below the footer links, wide enough to lose a line of wrapping.
   #9daba4 on the deep pine is 6.1:1, so quieter does not mean harder to read. */
.thp-footer-small {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 48px;
    align-items: baseline;
    margin-top: 24px;
}

.thp-disclaimer {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: .003em;
    color: #9daba4;
}
.thp-footer-base {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    text-align: right;
    color: #9daba4;
}

/* Body-area chips: the navigation a reader in pain is actually looking for. */
.thp-areas {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid rgba(230, 202, 172, .22);
}
.thp-areas-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.thp-area-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid rgba(230, 202, 172, .35);
    border-radius: var(--thp-radius-pill);
    font-size: 14px;
    font-weight: 500;
    color: #e8efea;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.thp-area-chip:hover {
    background: var(--thp-sand);
    border-color: var(--thp-sand);
    color: var(--thp-pine-deep);
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 900px) {
    :root { --thp-pad: 22px; }

    .thp-sec { padding: 68px 0; }
    .thp-hero { padding: 48px 0 58px; }
    .thp-hero-grid, .thp-split, .thp-band-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .thp-lede { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .thp-essay { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .thp-essay-figure { order: -1; position: static; }
    .thp-lede-body p { max-width: none; }
    .thp-promises { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
    .thp-footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 28px; }
    .thp-posts-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .thp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
    .thp-fact:nth-child(odd) { padding-left: 0; border-left: 0; }
    .thp-band { padding: 42px 0; }

    .thp-burger { display: flex; }
    .thp-nav {
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        display: none;
        padding: 14px 22px 20px;
        background: var(--thp-cream);
        border-bottom: 1px solid var(--thp-line);
        box-shadow: var(--thp-shadow);
    }
    .thp-nav.is-open { display: block; }
    .thp-nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
    .thp-nav-list li { border-bottom: 1px solid var(--thp-line-soft); }
    .thp-nav-list li:last-child { border-bottom: 0; padding-top: 12px; }
    .thp-nav-link { display: block; padding: 13px 2px; font-size: 16px; }
    .thp-header-inner { position: relative; }

    .thp-arch-link { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .thp-arch-meta { padding-top: 0; }

    .thp-article { padding: 36px 0 56px; }
    .thp-article-wrap { padding: 0 20px 0; }
    .thp-article-image { margin-bottom: 20px; }
    .thp-article-image img { max-height: 300px; }

    .thp-cta { padding: 40px 24px 40px; }
    .thp-panels { padding: 24px 22px 24px; }
    .thp-bar { max-width: calc(100% - 84px); }

    .thp-content .kg-width-wide, .thp-content .kg-width-full { width: 100%; margin-left: 0; transform: none; }
}

@media (max-width: 560px) {
    body.thp { font-size: 16px; }
    .thp-tabs { padding: 16px 14px; gap: 6px; }
    .thp-tab { padding: 9px 14px; font-size: 14px; }
    .thp-form { flex-direction: column; align-items: stretch; }
    /* flex-basis becomes a HEIGHT once the row turns into a column: reset it. */
    .thp-form input[type="email"] { flex: 0 0 auto; width: 100%; }
    .thp-form .thp-btn { width: 100%; }
    .thp-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .thp-posts-3 { grid-template-columns: minmax(0, 1fr); }
    .thp-footer-note { max-width: none; }
    .thp-footer-small { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .thp-footer-base { align-items: flex-start; text-align: left; }
    .thp-footer-rule { margin-top: 30px; }
    .thp-hero-cap {
        left: 12px; bottom: 12px;
        max-width: min(30ch, calc(100% - 24px));
        padding: 11px 15px 12px;
        font-size: 14px;
    }
    .thp-hero-cap::before { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .thp-card:hover, .thp-post:hover, .thp-btn:hover { transform: none; }
}