/* ==========================================================================
   1Hundred Year Family — landing page
   Mobile-first. Breakpoints: 600px, 768px, 1024px.
   Palette: parchment / limestone ground, deep charcoal-brown ink,
            moss-olive primary, aged-brass accent, walnut + clay support.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Ground */
    --bg:          #f7f4ee;   /* warm parchment */
    --surface:     #f2ede3;   /* limestone */
    --surface-2:   #ece5d7;
    --cream:       #fbf8f1;

    /* Ink */
    --ink:         #2c2a24;   /* deep charcoal brown, never pure black */
    --ink-soft:    #625c4f;   /* body copy on light — 6.6:1 on --bg */
    --ink-faint:   #8b8271;

    /* Brand */
    --olive:       #3f4a34;
    --olive-deep:  #2d361f;
    --brass:       #8a6f4b;   /* decorative: rules, borders, marks */
    --brass-text:  #7a5f3c;   /* text-safe brass — 5.4:1 on --bg */
    --brass-light: #e5d4b8;   /* brass on dark grounds */
    --clay:        #9c5f42;   /* text-safe clay — 5.1:1 on --bg */
    --walnut:      #5a4632;

    /* On dark */
    --on-dark:      #fbf8f1;
    --on-dark-soft: #d8d3c6;  /* 6.3:1 on --olive */

    --line:        rgba(44, 42, 36, .14);
    --line-dark:   rgba(251, 248, 241, .18);

    /* Type */
    /* Ghost Admin font settings win when set; these are the brand defaults. */
    --font-display: var(--gh-font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    --font-body:    var(--gh-font-body, 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);

    /* Geometry — low radius, no bubbly SaaS cards */
    --radius:    4px;
    --radius-lg: 6px;
    --pill:      999px;

    --focus:       #6b5836;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --ease: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ink);
    background: var(--bg);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Very subtle paper grain. Fixed, non-interactive, low opacity. */
body::before {
    content: '';
    position: fixed;
    z-index: 40;
    inset: 0;
    pointer-events: none;
    opacity: .16;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

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

/* Full-bleed photographs sit on the deep-olive ground. Giving them that
   ground as a background means a slow, blocked or missing file degrades to
   the brand colour instead of a white gap, and any alt text stays legible. */
.hero-media img,
.photo-break > img,
.stair-media img,
.final-cta > img {
    color: var(--on-dark-soft);
    background-color: var(--olive-deep);
}

a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

ul, ol { list-style: none; }

/* Visible keyboard focus everywhere. */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
}
.section--dark :focus-visible,
.stair-copy :focus-visible,
.hero :focus-visible,
.photo-break :focus-visible,
.final-cta :focus-visible,
.topbar :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--brass-light);
}

::selection {
    color: var(--cream);
    background: var(--olive);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.skip-link {
    position: fixed;
    z-index: 100;
    top: 10px;
    left: 10px;
    padding: 12px 18px;
    color: var(--cream);
    background: var(--olive-deep);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

.wrap   { width: min(100% - 40px, 1180px); margin-inline: auto; }
.narrow { width: min(100% - 40px, 720px);  margin-inline: auto; }

.section { padding: clamp(64px, 10vw, 130px) 0; }
.section--warm { background: var(--surface); }
.section--dark { color: var(--on-dark); background: var(--olive); }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: 'SOFT' 0, 'WONK' 0;
    line-height: 1.08;
    letter-spacing: -.025em;
    text-wrap: balance;
}

/* Display face never renders below 24px. */
h1 { font-size: clamp(40px, 8vw, 86px); }
h2 { font-size: clamp(31px, 5.4vw, 58px); }
h3 { font-size: 24px; }

.eyebrow {
    color: var(--brass-text);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1.5;
    text-transform: uppercase;
}
.section--dark .eyebrow,
.stair-copy .eyebrow,
.hero .eyebrow,
.photo-break .eyebrow,
.final-cta .eyebrow { color: var(--brass-light); }

.prose p { margin-bottom: 18px; color: var(--ink-soft); font-size: 17px; }
.prose p:last-child { margin-bottom: 0; }
.prose b, .prose strong { color: var(--ink); font-weight: 600; }

.callout {
    margin: 0 0 30px;
    padding-left: 20px;
    color: var(--olive);
    border-left: 2px solid var(--brass);
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 28px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.45;
}
.closing-line {
    margin-top: 29px;
    color: var(--ink) !important;
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 31px) !important;
    line-height: 1.42;
}

/* Pull-quote / turn-of-thought rule, light and dark variants. */
.turn {
    margin-top: 28px;
    padding-left: 18px;
    color: var(--brass-light);
    border-left: 2px solid rgba(229, 212, 184, .55);
    font-family: var(--font-display);
    font-size: clamp(24px, 2.4vw, 26px);
    font-style: italic;
    line-height: 1.48;
}

/* --------------------------------------------------------------------------
   5. Reveal animation (opacity + translate only)
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* If JS never runs, content must still be visible. */
.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   6. Header / nav
   -------------------------------------------------------------------------- */
.topbar {
    position: absolute;
    z-index: 10;
    top: 0;
    width: 100%;
    padding: 20px 0;
    color: var(--cream);
}
.topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* The wordmark is the supplied logo lockup. It is drawn in pale cream and only
   ever sits over the hero photograph's dark scrim, so no dark variant is
   needed. Sized by width — the "YEAR FAMILY" line is a thin band at the bottom
   of the artwork and goes illegible below about 140px wide. */
.mark {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
}
.mark-logo {
    width: 148px;
    height: auto;
}

/* Nav CTA is hidden on small screens — the fixed mobile action replaces it. */
.nav-cta { display: none; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 16px 28px;
    color: var(--cream);
    background: var(--olive);
    border: 1px solid var(--olive);
    border-radius: var(--pill);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .2s var(--ease), border-color .2s var(--ease), transform .18s var(--ease);
}
.button:hover {
    background: var(--olive-deep);
    border-color: var(--olive-deep);
    transform: translateY(-1px);
}
.button:active { transform: translateY(0); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 100svh;
    overflow: hidden;
    color: var(--cream);
    background: var(--olive-deep);
}

.hero-media { position: absolute; inset: 0; }
.hero-media img {
    width: 100%;
    height: 100%;
    /* Mobile crop favours the island and the light, away from busy shelving. */
    object-fit: cover;
    object-position: 58% 62%;
}
/* Scrim measured against the brightest pixels of the limestone kitchen under
   the copy. Mobile text sits below 45%, where alpha >= .72 gives 6.5:1 — well
   clear of WCAG AA — while still letting the room read as a room. */
.hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(22, 26, 15, .86) 0%, rgba(22, 26, 15, .72) 52%, rgba(22, 26, 15, .50) 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    width: min(100% - 40px, 1180px);
    margin: 0 auto;
    /* Top padding clears the absolutely-positioned logo in the topbar. */
    padding: 152px 0 40px;
}
.hero-grid { display: grid; gap: 32px; }

.hero h1 {
    max-width: 15ch;
    margin: 18px 0 20px;
    color: var(--cream);
}
.hero h1 em {
    display: block;
    margin-top: .18em;
    color: var(--brass-light);
    font-size: .55em;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.015em;
}
.hero .lede {
    max-width: 60ch;
    color: rgba(251, 248, 241, .93);
    font-size: 17px;
    line-height: 1.6;
}
.hero .lede strong { color: #fff; font-weight: 600; }

.hero-bottom { margin-top: 4px; }
.byline {
    max-width: 52ch;
    padding-left: 16px;
    border-left: 2px solid rgba(229, 212, 184, .6);
    color: rgba(251, 248, 241, .84);
    font-size: 14px;
    line-height: 1.65;
}
.byline b { color: #fff; font-weight: 600; }

/* --- Hero signup card ------------------------------------------------- */
.signup-card {
    width: 100%;
    padding: 26px 22px;
    color: var(--ink);
    background: rgba(251, 248, 241, .96);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(20, 24, 14, .22);
    text-align: center;
}
@supports (backdrop-filter: blur(10px)) {
    .signup-card { background: rgba(251, 248, 241, .92); backdrop-filter: blur(10px); }
}
.signup-card .card-kicker {
    margin-bottom: 8px;
    color: var(--brass-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.signup-card h2 {
    margin-bottom: 8px;
    font-size: 28px;
    letter-spacing: -.02em;
}
.signup-card .card-lede {
    margin-bottom: 20px;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.5;
}
.signup-card .button { width: 100%; }
.fineprint {
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9. Full-bleed photo break — "Picture it clearly"
   -------------------------------------------------------------------------- */
.photo-break {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 78svh;
    overflow: hidden;
    color: var(--cream);
    background: var(--olive-deep);
}
.photo-break > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The source is 3:4 portrait and this band is wide, so the crop is
       aggressive. Bias low: the dining table sits in the lower third of the
       frame and it is the whole point of this section — centring would show
       the mirror and an empty wall instead. */
    object-position: 50% 72%;
}
.photo-break::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(31, 38, 21, .94) 0%, rgba(31, 38, 21, .74) 44%, rgba(31, 38, 21, .10) 100%);
}
.photo-break .wrap {
    position: relative;
    z-index: 1;
    padding-top: 90px;
    padding-bottom: 52px;
}
.photo-break h2 {
    max-width: 22ch;
    margin-top: 16px;
    color: var(--cream);
    font-size: clamp(29px, 4.6vw, 56px);
}
.photo-break h2 em {
    color: var(--brass-light);
    font-style: italic;
    font-weight: 400;
}
.photo-break .caption {
    max-width: 48ch;
    margin-top: 18px;
    color: rgba(251, 248, 241, .88);
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   10. The destination + values inset
   -------------------------------------------------------------------------- */
.destination-layout { display: grid; gap: 44px; }
.destination-title { margin: 14px 0 24px; font-size: clamp(34px, 5vw, 56px); }

.values-inset {
    max-width: 340px;
    margin: 0 auto;
    padding: 10px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.values-inset img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 42%;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   11. Why it is rare — staircase split
   -------------------------------------------------------------------------- */
.stair-section {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--olive-deep);
}
.stair-media { position: relative; min-height: 58svh; }
.stair-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Keep the stair run and landing in frame; text never sits on the railing. */
    object-position: 50% 38%;
}
.stair-copy {
    padding: 56px 20px;
    color: var(--on-dark);
}
.stair-copy > div { max-width: 60ch; }
.stair-copy h2 { margin: 16px 0 22px; color: var(--cream); }
.stair-copy p { margin-bottom: 17px; color: var(--on-dark-soft); font-size: 17px; }
.stair-copy strong { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   12. The practice
   -------------------------------------------------------------------------- */
.practice-grid { display: grid; gap: 40px; align-items: center; }

.practice-diagram {
    padding: 26px 22px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
}
.practice-steps { display: grid; grid-template-columns: 1fr; }
.practice-step {
    padding: 18px 14px;
    color: var(--cream);
    border-bottom: 1px solid var(--line-dark);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}
.practice-step:last-child { border-bottom: 0; }
.practice-step span {
    display: block;
    margin-bottom: 6px;
    color: var(--brass-light);
    font-family: var(--font-display);
    font-size: 26px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.practice-copy h2 { margin: 16px 0 22px; color: var(--cream); }
.practice-copy p { margin-bottom: 17px; color: var(--on-dark-soft); font-size: 17px; }
.practice-copy strong { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   13. Founder letter
   -------------------------------------------------------------------------- */
.letter-layout { display: grid; gap: 34px; align-items: center; }

.letter-photo {
    overflow: hidden;
    border-radius: var(--radius);
}
.letter-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    /* Desk and shelving stay centred; avoids cropping to empty curtain. */
    object-position: 42% center;
}

.letter-copy h2 { margin: 16px 0 24px; font-size: clamp(32px, 4.6vw, 52px); }
.letter-copy p { max-width: 62ch; margin-bottom: 18px; color: var(--ink-soft); font-size: 17px; }
.letter-copy strong { color: var(--ink); font-weight: 600; }

.quote {
    margin: 26px 0;
    padding-left: 18px;
    border-left: 2px solid var(--brass);
}
.quote p {
    margin: 0;
    color: var(--olive) !important;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 26px) !important;
    font-style: italic;
    line-height: 1.48;
}

.signature {
    margin-top: 26px;
    color: var(--ink) !important;
    font-family: var(--font-display);
    font-size: 24px !important;
    font-style: italic;
}
.signature small {
    display: block;
    margin-top: 8px;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 14px;
    font-style: normal;
    letter-spacing: .03em;
}

/* --------------------------------------------------------------------------
   14. Honest about the fit
   -------------------------------------------------------------------------- */
.section-heading { max-width: 46ch; margin-bottom: 32px; }
.section-heading h2 { margin-top: 14px; }

.fit-grid { display: grid; gap: 18px; }
.fit-card {
    padding: 30px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.fit-card--yes { background: rgba(251, 248, 241, .82); }
.fit-card--no  { background: rgba(156, 95, 66, .045); }
.fit-card h3 {
    margin-bottom: 16px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.fit-card--yes h3 { color: var(--olive); }
.fit-card--no  h3 { color: var(--clay); }
.fit-card li {
    position: relative;
    padding: 13px 0 13px 24px;
    color: var(--ink-soft);
    border-bottom: 1px solid rgba(44, 42, 36, .09);
    font-size: 16px;
    line-height: 1.55;
}
.fit-card li:last-child { border-bottom: 0; }
.fit-card li::before {
    position: absolute;
    top: 12px;
    left: 0;
    font-family: var(--font-display);
    font-size: 17px;
}
.fit-card--yes li::before { content: '—'; color: var(--brass-text); }
.fit-card--no  li::before { content: '×'; color: var(--clay); }

/* --------------------------------------------------------------------------
   15. Final CTA
   -------------------------------------------------------------------------- */
.final-cta {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 88svh;
    padding: 90px 0;
    overflow: hidden;
    color: var(--cream);
    background: var(--olive-deep);
    text-align: center;
}
.final-cta > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Banquette and table stay centred behind the invitation. */
    object-position: 50% 58%;
}
.final-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(29, 36, 20, .90), rgba(29, 36, 20, .82));
}
.final-cta .narrow { position: relative; z-index: 1; }
.final-cta h2 {
    margin: 16px 0 20px;
    color: var(--cream);
    font-size: clamp(38px, 6.4vw, 66px);
}
.final-cta h2 em { color: var(--brass-light); font-style: italic; font-weight: 400; }
.final-cta p {
    max-width: 56ch;
    margin: 0 auto 30px;
    color: rgba(251, 248, 241, .92);
    font-size: 17px;
}
.final-cta strong { color: #fff; font-weight: 600; }
.final-cta .button {
    min-width: min(100%, 280px);
    color: var(--olive-deep);
    background: var(--cream);
    border-color: var(--cream);
}
.final-cta .button:hover { background: #ece2cd; border-color: #ece2cd; }
.final-note {
    margin-top: 22px !important;
    margin-bottom: 0 !important;
    color: rgba(251, 248, 241, .78) !important;
    font-family: var(--font-display);
    font-size: 17px !important;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    padding: 30px 0 calc(30px + var(--safe-bottom));
    color: rgba(251, 248, 241, .72);
    background: var(--ink);
    font-size: 14px;
}
.site-footer .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
}
.site-footer a {
    color: rgba(251, 248, 241, .85);
    text-decoration: none;
    border-bottom: 1px solid rgba(251, 248, 241, .3);
}
.site-footer a:hover { border-bottom-color: rgba(251, 248, 241, .8); }

/* --------------------------------------------------------------------------
   17. Fixed mobile action — one clear primary action
   -------------------------------------------------------------------------- */
/* Hidden while the hero signup card is on screen, so the page never shows two
   competing primary actions stacked on top of each other. JS toggles
   .is-shown; without JS it stays visible, which is the safe default. */
.mobile-action {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;

    position: fixed;
    z-index: 30;
    right: 16px;
    bottom: calc(16px + var(--safe-bottom));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 44px;
    padding: 14px 22px;
    color: var(--olive-deep);
    background: var(--brass-light);
    border-radius: var(--pill);
    box-shadow: 0 8px 24px rgba(20, 24, 14, .28);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
}
.mobile-action.is-shown,
.no-js .mobile-action {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* --------------------------------------------------------------------------
   17b. Generic document styles — index.hbs / post.hbs / page.hbs
   These templates exist because Ghost requires them. They are deliberately
   plain, and inherit the same palette and type scale as the landing page.
   -------------------------------------------------------------------------- */
.doc { max-width: 720px; }
.doc-title { margin-bottom: 12px; font-size: clamp(34px, 6vw, 54px); }
.doc-sub { margin-bottom: 40px; color: var(--ink-soft); font-size: 16px; }

.doc-item { padding: 24px 0; border-bottom: 1px solid var(--line); }
.doc-item:last-of-type { border-bottom: 0; }
.doc-item-title { font-size: 28px; }
.doc-item-title a { text-decoration: none; border-bottom: 1px solid var(--line); }
.doc-item-title a:hover { border-bottom-color: var(--brass); }
.doc-item-meta { margin-top: 6px; color: var(--ink-faint); font-size: 14px; }
.doc-item-excerpt { margin-top: 10px; color: var(--ink-soft); font-size: 17px; }
.doc-empty { color: var(--ink-soft); }

.doc-feature { width: 100%; margin: 0 0 32px; border-radius: var(--radius); }

.doc-content > * + * { margin-top: 20px; }
.doc-content p,
.doc-content li { color: var(--ink-soft); font-size: 17px; }
.doc-content h2 { margin-top: 40px; font-size: clamp(28px, 4vw, 38px); }
.doc-content h3 { margin-top: 32px; }
.doc-content ul { padding-left: 22px; list-style: disc; }
.doc-content ol { padding-left: 22px; list-style: decimal; }
.doc-content a { color: var(--olive); }
.doc-content img { border-radius: var(--radius); }
.doc-content blockquote {
    padding-left: 20px;
    border-left: 2px solid var(--brass);
    font-family: var(--font-display);
    font-size: 24px;
    font-style: italic;
}

.pagination {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 14px;
}
.pagination a { color: var(--olive); }


/* --------------------------------------------------------------------------
   17c. Koenig editor card widths (required by Ghost)
   -------------------------------------------------------------------------- */
.doc-content .kg-width-wide {
    width: 100vw;
    max-width: 1100px;
    margin-inline: calc(50% - 50vw);
    margin-inline: calc(-1 * (min(1100px, 100vw) - 100%) / 2);
}
.doc-content .kg-width-full {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
}
.doc-content .kg-width-full img { border-radius: 0; }

.kg-card figcaption {
    margin-top: 10px;
    color: var(--ink-faint);
    font-size: 14px;
    text-align: center;
}

/* ==========================================================================
   18. ≥ 600px — roomier phones and small tablets
   ========================================================================== */
@media (min-width: 600px) {
    .hero-content   { padding: 168px 0 56px; }
    .hero .lede     { font-size: 19px; }
    .signup-card    { padding: 30px 28px; }
    .fit-grid       { grid-template-columns: 1fr 1fr; gap: 20px; }
    .practice-steps { grid-template-columns: 1fr 1fr; }
    .practice-step:nth-child(1),
    .practice-step:nth-child(2) { border-bottom: 1px solid var(--line-dark); }
    .practice-step:nth-child(3),
    .practice-step:nth-child(4) { border-bottom: 0; }
    .stair-copy     { padding: 72px 32px; }
    .photo-break .wrap { padding-bottom: 64px; }
}

/* ==========================================================================
   19. ≥ 768px — split layouts engage
   ========================================================================== */
@media (min-width: 768px) {
    .nav-cta {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 12px 20px;
        border: 1px solid rgba(251, 248, 241, .55);
        border-radius: var(--pill);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .08em;
        text-decoration: none;
        text-transform: uppercase;
        transition: background .2s var(--ease), color .2s var(--ease);
    }
    .nav-cta:hover { color: var(--olive-deep); background: var(--cream); }

    .mark-logo { width: 184px; }
    .mobile-action { display: none; }

    .hero-media img { object-position: center center; }
    /* Left-weighted scrim once the copy and card sit side by side. Combined
       worst case across the copy column measures 5.3:1 against the brightest
       pixels in the photo; the right third stays light so the kitchen shows. */
    .hero-media::after {
        background:
            linear-gradient(90deg, rgba(24, 29, 17, .76) 0%, rgba(24, 29, 17, .62) 52%, rgba(24, 29, 17, .36) 100%),
            linear-gradient(0deg, rgba(22, 26, 15, .36) 0%, rgba(22, 26, 15, .10) 55%, rgba(22, 26, 15, .18) 100%);
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(320px, .78fr);
        gap: 44px;
        align-items: end;
    }
    .hero-bottom { grid-column: 1 / -1; margin-top: 10px; }

    .destination-layout {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, .8fr);
        gap: 60px;
        align-items: start;
    }
    .values-inset { max-width: none; margin-top: 46px; }

    .stair-section  { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .stair-media    { min-height: 100%; order: 2; }
    .stair-copy     { order: 1; padding: 90px clamp(36px, 6vw, 92px); }

    .practice-grid  { grid-template-columns: .92fr 1.08fr; gap: 64px; }
    .practice-diagram { padding: 34px; }

    .letter-layout  { grid-template-columns: .9fr 1.1fr; gap: 60px; }

    .photo-break .wrap { padding-bottom: 74px; }
    .final-cta .button { min-width: 280px; }
}

/* ==========================================================================
   20. ≥ 1024px — full editorial rhythm
   ========================================================================== */
@media (min-width: 1024px) {
    body { font-size: 17px; }
    .hero-content   { padding: 168px 0 76px; }
    .hero .lede     { font-size: 21px; }
    .hero-grid      { gap: 52px; }
    .letter-layout  { gap: 72px; }
    .practice-grid  { gap: 76px; }
    .destination-layout { gap: 80px; }
    /* Taller band on wide screens so the portrait source is cropped less
       savagely and the table reads as a table. */
    .photo-break    { min-height: 86svh; }
}

/* ==========================================================================
   21. Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .button:hover { transform: none; }
}

/* ==========================================================================
   22. Print
   ========================================================================== */
@media print {
    body::before,
    .mobile-action,
    .skip-link,
    .topbar { display: none !important; }
    .hero, .photo-break, .final-cta, .section--dark, .stair-section {
        color: #000;
        background: #fff;
    }
    .hero-media, .photo-break > img, .final-cta > img { display: none; }
}