/* ==========================================================================
   Chosen — Lisa Romero Dugal
   Single stylesheet. No build step: edit this file, refresh the browser.

   Palette values were sampled directly from the design team's mockup
   (media/mocks/Lisa Dugal website mockup.pdf) and then contrast-corrected.
   See theme/DESIGN.md for the reasoning behind every token below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* ---- Colour ---------------------------------------------------------
       Contrast ratios are against --ground unless noted. Lisa's readership
       skews older, so every text colour clears WCAG AA at body size; we do
       not rely on the "large text" exemption for anything you actually read. */

    --ground:      #F7F4EF;  /* warm cream page ground   (sampled, 50% of mock) */
    --ground-warm: #EFEAE1;  /* alternating band                                */
    --ink:         #1F3347;  /* deep navy — headings, wordmark   11.8:1  AAA    */
    --ink-soft:    #2C4257;  /* hover / pressed                                 */
    --body:        #4B443C;  /* warm charcoal — body copy        8.7:1   AAA    */
    --muted:       #6B6459;  /* kickers, meta, captions          5.3:1   AA     */
    --rule:        #CDD9E6;  /* hairlines, outline button borders               */
    --accent:      #6D9ED9;  /* DECORATIVE ONLY — 2.5:1, never text             */
    --link:        #2E6BA8;  /* accessible link blue             5.1:1   AA     */
    --on-ink:      #F7F4EF;  /* text on navy                     11.8:1  AAA    */
    --tint-blue:   #D9E5F3;  /* pill background, "Available now" — ink on it 9.6:1 */
    --tint-sage:   #CFD8CB;  /* pill background, "About Lisa"    — ink on it 8.6:1 */

    /* ---- Marketing palette ----------------------------------------------
       Measured off human_provided_info/MarketingProvidedImages/: #DCEAF7 is
       88% of "Lisa Dugal Content - 25", #B8C6B3 is the sage rule under its
       quote, #657938 the median leaf. Their navy and cream are byte-identical
       to --ink and --ground above, which is why neither moved. */
    --ice:   #DCEAF7;  /* second ground. ink on it 10.6:1, body 7.8:1     */
    --sage:  #B8C6B3;  /* rules and strokes. 1.6:1 — NEVER text           */
    --leaf:  #55662F;  /* stem green, one shade under the sampled #657938:
                          5.8:1 on cream, 5.2:1 on ice, so it clears AA at
                          label size. The sampled shade was 4.0:1 on ice.
                          Labels and large text only, never body copy     */

    /* The pale blue IS allowed as text on navy: 4.6:1 there, which clears AA.
       Footer tagline and footer links use it that way. Never on cream. */

    /* ---- Type -----------------------------------------------------------
       PROVISIONAL — these are close matches to the mockup, not confirmed.
       The Canva source file names the real fonts; swap these two lines and
       the corresponding <link> in default.hbs once we know. Nothing else
       in this stylesheet references a font by name.

       Wrapped in var(--gh-font-*) so Ghost's Design → Brand font pickers
       override them. That is a genuinely useful escape hatch right now:
       Nick can audition faces from Ghost admin against the Canva file
       without touching CSS. When the real fonts are confirmed, hard-code
       them here and the picker simply stops being needed. */

    --font-display: var(--gh-font-heading, 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif);
    --font-sans:    var(--gh-font-body, 'Poppins', 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);

    /* Fluid scale. Body starts at 18px rather than the usual 16 — the single
       highest-leverage accessibility decision on this site. */
    --step--1: clamp(0.95rem, 0.91rem + 0.20vw, 1.05rem);
    --step-0:  clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
    --step-1:  clamp(1.35rem, 1.22rem + 0.65vw, 1.60rem);
    --step-2:  clamp(1.70rem, 1.42rem + 1.20vw, 2.20rem);
    --step-3:  clamp(2.20rem, 1.70rem + 2.20vw, 3.20rem);
    --step-4:  clamp(2.60rem, 1.85rem + 3.60vw, 4.50rem);

    /* ---- Space (1.5 ratio) ---------------------------------------------- */
    --s-2: 0.5rem;
    --s-1: 0.75rem;
    --s0:  1.125rem;
    --s1:  1.75rem;
    --s2:  2.625rem;
    --s3:  4rem;
    --s4:  6rem;
    --s5:  9rem;

    /* ---- Measure & rhythm ------------------------------------------------ */
    --container: 78rem;
    --measure:   38rem;   /* ~66 characters at --step-0 */
    --radius:    3px;     /* mockup buttons are nearly square */
    --transition: 160ms ease;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--body);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, picture, video, iframe { max-width: 100%; height: auto; display: block; }

/* The UA gives <figure> `margin: 1em 40px`, which silently insets every Koenig
   image and embed card 40px from the text it sits with. Ghost's cards.min.css
   does not reset it, so the theme has to. */
figure { margin: 0; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0 0 var(--s0);
    text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--s0); text-wrap: pretty; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Visible focus everywhere. Non-negotiable — keyboard users and anyone
   navigating with a switch or voice control depend on it. */
:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 3px;
    border-radius: 2px;
}

.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;
}

.skip-link {
    position: absolute; top: -100%; left: var(--s0); z-index: 100;
    background: var(--ink); color: var(--on-ink);
    padding: var(--s-1) var(--s0); border-radius: var(--radius);
}
.skip-link:focus { top: var(--s-1); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s0); }

.section       { padding-block: var(--s4); }
.section--tight{ padding-block: var(--s3); }
.section--warm { background: var(--ground-warm); }

.stack > * + * { margin-top: var(--s0); }

/* --------------------------------------------------------------------------
   4. Header & navigation — the masthead, the slim bar, and the menu
   (partials/header.hbs, assets/js/main.js)

   Chosen on 6 September 2026 from five full-page options. Three parts:

   .mast       the masthead. Centred kicker, name, sage hairline, the pages in
               a row with the call to action at the end. Not sticky.
   .mast-bar   fixed, hidden above the viewport until the masthead scrolls
               away, then slides down: name, pages, button. On a phone: name
               and the Menu button.
   .site-menu  the menu, full screen on every size. Ice ground, the cover's
               hydrangea pressed into it, the pages set large with olive
               numerals, the tagline and the button in the foot. Opened by
               any .menu-button — which is where the pages collapse to on a
               phone. It is the one overlay in the design, and it is
               navigation, not content: nothing is hidden behind it that is
               not also a page in its own right.
   -------------------------------------------------------------------------- */

.site-header a { text-decoration: none; }
.site-header ul { list-style: none; margin: 0; padding: 0; }

/* Small caps used by the masthead and bar navigation. */
.mast__nav a, .mast-bar__nav a, .mast__cta, .menu-button {
    font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
    white-space: nowrap;
}

/* ---- the masthead ---- */
.mast {
    text-align: center;
    padding: var(--s2) 1.25rem var(--s0);
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
}
.mast__kicker {
    margin: 0 0 0.5rem;
    font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.3em; text-transform: uppercase; color: var(--leaf);
}
.mast__name {
    display: inline-block;
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3rem);
    line-height: 1; letter-spacing: -0.01em; color: var(--ink);
}
.mast__rule { width: 4.5rem; height: 2px; border: 0; background: var(--sage); margin: var(--s0) auto; }
.mast__nav { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 var(--s1); }
.mast__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s1); }
.mast__nav a {
    display: inline-block; padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}
.mast__nav a:hover { color: var(--ink); }
.mast__nav .nav-item--current a { color: var(--ink); border-bottom-color: var(--accent); }  /* decorative use of accent — correct */
.mast__cta { color: var(--ink); padding: 0.5rem 0; }
.mast__cta span { display: inline-block; transition: transform var(--transition); }
.mast__cta:hover span { transform: translateX(3px); }

/* The one word the pages collapse into. */
.menu-button {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: none; border: 0; padding: 0.5rem 0.2rem; min-height: 44px;
    color: var(--ink); cursor: pointer; font: inherit;
    font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
}
.menu-button i {
    width: 0.6rem; height: 0.6rem; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 3px var(--ice);
    transition: transform var(--transition);
}
.menu-button:hover i { transform: scale(1.25); }
.mast__menu { display: none; }

/* ---- the slim bar ---- */
.mast-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s1);
    padding: 0.55rem 1.25rem;
    background: rgba(247, 244, 239, 0.92);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-100%);
    transition: transform 260ms ease;
}
.mast-bar.is-on { transform: none; }
.mast-bar__name {
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 500;
    color: var(--ink); white-space: nowrap;
}
.mast-bar__nav { display: flex; gap: var(--s0); margin-left: auto; }
.mast-bar__nav a { font-size: 0.68rem; padding: 0.4rem 0; transition: color var(--transition); }
.mast-bar__nav a:hover, .mast-bar__nav .nav-item--current a { color: var(--ink); }
.mast-bar__menu { display: none; }

/* ---- the menu ---- */
.site-menu {
    position: fixed; inset: 0; z-index: 90; overflow: auto;
    background: var(--ice);
    opacity: 0; transition: opacity 320ms ease;
}
.site-menu[hidden] { display: none; }
.site-menu.is-open { opacity: 1; }
.site-menu__flower {
    position: absolute; right: -8vw; top: 50%; transform: translateY(-50%);
    width: min(62vw, 48rem); opacity: 0.38;
    filter: saturate(0.6) contrast(0.95); pointer-events: none;
}
.site-menu__inner {
    position: relative; min-height: 100%;
    max-width: var(--container); margin-inline: auto;
    display: flex; flex-direction: column;
    padding: var(--s-1) 1.25rem var(--s2);
}
.site-menu__top { display: flex; align-items: center; justify-content: space-between; }
.site-menu__name span {
    display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500;
    line-height: 1.05; color: var(--ink);
}
.site-menu__name small {
    display: block; margin-top: 0.25rem;
    font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
.site-menu__nav { margin-top: clamp(1.5rem, 6vh, 4rem); counter-reset: page; }
.site-menu__nav li a {
    display: flex; align-items: baseline; gap: 1.2rem; padding: 0.15em 0;
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(2rem, 1.1rem + 3.4vw, 3.6rem); line-height: 1.12;
    color: var(--ink);
    transition: transform 260ms ease, color var(--transition);
}
.site-menu__nav li a::before {
    content: counter(page, decimal-leading-zero); counter-increment: page;
    font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.22em; color: var(--leaf); min-width: 2rem;
}
.site-menu__nav li a:hover { transform: translateX(0.5rem); color: var(--ink-soft); }
.site-menu__nav .nav-item--current a {
    text-decoration: underline; text-decoration-color: var(--sage);
    text-decoration-thickness: 2px; text-underline-offset: 0.12em;
}
.site-menu.is-open .site-menu__nav li { animation: menu-rise 480ms cubic-bezier(.2,.7,.2,1) both; }
.site-menu__nav li:nth-child(1) { animation-delay: 40ms; }  .site-menu__nav li:nth-child(2) { animation-delay: 80ms; }
.site-menu__nav li:nth-child(3) { animation-delay: 120ms; } .site-menu__nav li:nth-child(4) { animation-delay: 160ms; }
.site-menu__nav li:nth-child(5) { animation-delay: 200ms; } .site-menu__nav li:nth-child(6) { animation-delay: 240ms; }
.site-menu__nav li:nth-child(7) { animation-delay: 280ms; } .site-menu__nav li:nth-child(8) { animation-delay: 320ms; }
.site-menu__nav li:nth-child(n+9) { animation-delay: 360ms; }
@keyframes menu-rise { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }
.site-menu__foot {
    margin-top: auto; padding-top: var(--s2);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s1);
}
.site-menu__tag { margin: 0; font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--ink); }
body.menu-open { overflow: hidden; }

/* ---- a phone: the pages collapse into Menu, in the masthead and the bar ---- */
@media (max-width: 62rem) {
    .mast { padding-top: var(--s1); padding-bottom: var(--s-1); }
    .mast__nav { display: none; }
    .mast__menu { display: inline-flex; }
    .mast-bar__nav, .mast-bar .mast-bar__cta { display: none; }
    .mast-bar__menu { display: inline-flex; margin-left: auto; }
    .site-menu__flower { right: -30vw; width: 24rem; top: auto; bottom: -4rem; transform: none; opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .site-menu.is-open .site-menu__nav li { animation: none; }
    .mast-bar, .site-menu { transition: none; }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--s-2);
    font-family: var(--font-sans);
    font-size: 0.95rem; font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.85em 1.6em;
    min-height: 48px;              /* comfortable for imprecise taps */
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    text-decoration: none; cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition);
}

.btn--primary {
    background: var(--ink); color: var(--on-ink); border-color: var(--ink);
}
.btn--primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

.btn--outline {
    background: transparent; color: var(--ink); border-color: var(--rule);
}
.btn--outline:hover { border-color: var(--ink); background: rgba(31, 51, 71, 0.04); }

.btn--small { min-height: 38px; padding: 0.5em 1.1em; font-size: 0.8rem; }

/* The pale-blue button from the below-the-fold mockup. The mockup sets white
   text on it, which is 2.8:1 — under AA even for large type — so the text is
   navy (4.6:1) and hover inverts to the navy button. */
.btn--accent {
    background: var(--accent); color: var(--ink); border-color: var(--accent);
}
.btn--accent:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* "Read Lisa's story →" — a text link sized like a button so it is as easy
   to hit as one. */
.link-arrow {
    display: inline-flex; align-items: center; gap: 0.45em;
    min-height: 48px;
    font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em;
    color: var(--ink); text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 5px; }
.link-arrow .arrow { transition: transform var(--transition); }
.link-arrow:hover .arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* --------------------------------------------------------------------------
   6. Home — "the portrait" (home.hbs)

   Chosen by Nick on 6 September 2026 from four full-page options, replacing
   the design team's split hero. The photograph carries the fold edge to edge
   with the words over it; then the book on an ice panel, one of Lisa's own
   lines set large, Lisa on the warm ground, the next signings, the signup.

   The hero photograph is two art-directed crops of the same frame, not the
   page's feature image: a landscape crop for wide screens with her face in
   the upper third and room on the left for the words (assets/images/
   lisa-hero.jpg), and a portrait crop for phones (lisa-hero-portrait.jpg)
   where the words sit in the lower third under a scrim. On a wide screen the
   image is shifted right and its left edge faded into navy so she stands
   clear of the headline; on a laptop and a tablet she moves further right
   and the headline steps down. Nothing is ever read across her face, and the
   phone gets the same composition, not a plainer one.
   -------------------------------------------------------------------------- */

.home-hero { position: relative; overflow: hidden; background: var(--ink); }
.home-hero__img {
    position: absolute; top: 0; bottom: 0; left: 24%; width: 76%; height: 100%;
    object-fit: cover; object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
            mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}
.home-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(31, 51, 71, 0) 45%, rgba(31, 51, 71, 0.55) 100%);
}
.home-hero__copy {
    position: relative; z-index: 1;
    max-width: var(--container); margin-inline: auto;
    min-height: min(84vh, 52rem);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--s3) 1.25rem;
    color: var(--on-ink);
}
.home-hero__title {
    margin: 0 0 var(--s-1); max-width: 9.5em;
    font-size: clamp(2.8rem, 1.6rem + 4.4vw, 5.4rem); line-height: 1;
    color: var(--on-ink); text-shadow: 0 2px 30px rgba(31, 51, 71, 0.45);
}
.home-hero__sub {
    margin: 0 0 var(--s1);
    font-family: var(--font-display); font-style: italic;
    font-size: var(--step-2); line-height: 1.25; color: var(--ice);
}
/* The hero's buttons on navy: the pale blue carries the primary action (navy
   text on it, 4.6:1), and the outline is cream. */
.home-hero .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.home-hero .btn--primary:hover { background: var(--on-ink); border-color: var(--on-ink); }
.home-hero .btn--outline { color: var(--on-ink); border-color: rgba(247, 244, 239, 0.55); }
.home-hero .btn--outline:hover { background: rgba(247, 244, 239, 0.1); border-color: var(--on-ink); }

/* Every inner page's italic subtitle under its title. */
.hero__subtitle {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-2);
    color: var(--body);
    line-height: 1.25;
    margin: 0 0 var(--s1);
}

/* ---- the book on ice ---- */
.home-book { max-width: var(--container); margin: var(--s3) auto 0; padding: 0 1.25rem; }
.home-book__panel {
    position: relative; overflow: hidden;
    background: var(--ice); border-radius: 4px; padding: var(--s3);
    display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 34rem); gap: var(--s3); align-items: center;
}
/* Pressed, as on the events page: never before the text column ends. */
.home-book__bloom {
    position: absolute; top: 50%; transform: translateY(-50%);
    left: max(58rem, calc(100% - 24rem)); width: 32rem;
    opacity: 0.3; filter: saturate(0.55) contrast(0.92); pointer-events: none;
}
.home-book__cover { position: relative; z-index: 1; }
.home-book__cover img {
    width: 100%; height: auto; display: block; border-radius: 2px;
    box-shadow: 0 30px 50px -18px rgba(31, 51, 71, 0.5); transform: rotate(-2deg);
}
.home-book__copy { position: relative; z-index: 1; }
.home-kicker {
    margin: 0 0 var(--s-1);
    font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.26em; text-transform: uppercase; color: var(--leaf);
}
.home-book__copy h2 { font-size: var(--step-3); margin-bottom: var(--s-2); }
.home-book__sub {
    margin: 0 0 var(--s1);
    font-family: var(--font-display); font-style: italic;
    font-size: var(--step-1); line-height: 1.3; color: var(--body);
}
.home-labels {
    display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; margin: var(--s1) 0;
    font-family: var(--font-display); font-size: var(--step-0); color: var(--muted);
}
.home-labels s { text-decoration-color: var(--sage); text-decoration-thickness: 2px; }
.home-labels b { color: var(--ink); font-weight: 500; white-space: nowrap; }

/* ---- one of her lines (@custom.home_quote) ---- */
.home-line { padding: var(--s4) 1.25rem; text-align: center; }
.home-line blockquote {
    margin: 0 auto; max-width: 50rem;
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1.2;
    color: var(--ink); text-wrap: balance;
}
.home-line cite {
    display: block; margin-top: var(--s1);
    font-family: var(--font-sans); font-style: normal; font-size: 0.74rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--leaf);
}

/* ---- Lisa ---- */
.home-about { background: var(--ground-warm); padding: var(--s4) 1.25rem; }
.home-about__grid {
    max-width: var(--container); margin-inline: auto;
    display: grid; grid-template-columns: minmax(0, 38rem) minmax(0, 22rem);
    justify-content: space-between; gap: var(--s4); align-items: center;
}
.home-about h2 { font-size: var(--step-3); margin-bottom: var(--s0); text-wrap: balance; }
.home-about__photo {
    width: 100%; height: auto; display: block; border-radius: 4px;
    aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%;
}

/* ---- the next signings: the events page's content, grouped by events.js
        into the same cards, shown compact. Past events and everything after
        the third card are hidden here. ---- */
.home-dates {
    max-width: var(--container); margin-inline: auto; padding: var(--s4) 1.25rem;
    display: grid; grid-template-columns: minmax(0, 20rem) 1fr; gap: var(--s3); align-items: start;
}
.home-dates h2 { font-size: var(--step-3); margin-bottom: var(--s-1); }
.home-dates .events-list { max-width: none; margin-inline: 0; }
.home-dates .ev-intro, .home-dates .ev-group--past, .home-dates .ev__text, .home-dates .ev__go { display: none; }
.home-dates .ev-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s0); }
.home-dates .ev:nth-child(n+4) { display: none; }
.home-dates .ev { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s0); align-items: start; background: var(--ice); border-radius: 4px; padding: var(--s1); }
.home-dates .ev__body { display: contents; }
.home-dates .ev__date { grid-column: 1; grid-row: 1 / span 2; margin: 0; padding-right: var(--s-1); border-right: 2px solid var(--sage); text-align: center; }
.home-dates .ev__day { display: block; font-family: var(--font-display); font-size: 2.4rem; line-height: 0.9; font-weight: 500; color: var(--ink); }
.home-dates .ev__mon, .home-dates .ev__wd { display: block; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--leaf); }
.home-dates .ev__mon { margin-top: 0.4rem; }
.home-dates .ev__date abbr { text-decoration: none; }
.home-dates .ev__city { grid-column: 2; margin: 0 0 0.2rem; font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; line-height: 1.1; color: var(--ink); }
.home-dates .ev__venue { grid-column: 2; margin: 0; font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--leaf); line-height: 1.5; }
.home-dates .ev__time { color: var(--ink); }
.home-dates .ev__bloom { display: none; }

@media (min-width: 62rem) and (max-width: 84rem) {
    .home-hero__img { left: 34%; width: 70%; }
    .home-hero__title { font-size: clamp(2.4rem, 1rem + 3.2vw, 3.6rem); }
}
@media (min-width: 48rem) and (max-width: 62rem) {
    .home-hero__img { left: 28%; width: 76%; object-position: 50% 22%; }
    .home-hero__copy { min-height: min(70vh, 40rem); }
    .home-hero__title { font-size: clamp(2.2rem, 1rem + 3.2vw, 3rem); }
}
@media (max-width: 62rem) {
    .home-book { margin-top: var(--s2); }
    .home-book__panel { grid-template-columns: 1fr; padding: var(--s2) var(--s1) 8rem; gap: var(--s2); }
    .home-book__cover { max-width: 12rem; }
    .home-book__bloom { left: auto; right: -10rem; top: auto; bottom: -6rem; transform: none; width: 22rem; opacity: 0.2; }
    .home-line { padding: var(--s3) 1.25rem; }
    .home-about__grid { grid-template-columns: 1fr; gap: var(--s2); }
    .home-about__photo { max-width: 18rem; }
    .home-dates { grid-template-columns: 1fr; gap: var(--s2); }
    .home-dates .ev-list { grid-template-columns: 1fr; }
}
@media (max-width: 47.99rem) {
    .home-hero__img { left: 0; width: 100%; object-position: 50% 0; -webkit-mask-image: none; mask-image: none; }
    .home-hero::after { background: linear-gradient(180deg, rgba(31, 51, 71, 0) 38%, rgba(31, 51, 71, 0.55) 62%, rgba(31, 51, 71, 0.92) 100%); }
    .home-hero__copy { min-height: min(88vh, 46rem); padding: var(--s3) 1.25rem var(--s2); }
    .home-hero__title { font-size: clamp(2.5rem, 1.6rem + 4.4vw, 3.2rem); max-width: none; }
    .home-hero__sub { font-size: var(--step-1); }
}

/* --------------------------------------------------------------------------
   8. Section headings
   -------------------------------------------------------------------------- */

.kicker {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 var(--s-1);
}

.section-head { max-width: var(--measure); margin-bottom: var(--s2); }

/* Pill labels — "AVAILABLE NOW", "ABOUT LISA". */
.pill {
    display: inline-block;
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    line-height: 1;
    padding: 0.65em 1.1em;
    border-radius: 999px;
    color: var(--ink);
    margin: 0 0 var(--s0);
}
.pill--blue { background: var(--tint-blue); }
.pill--sage { background: var(--tint-sage); }

/* --------------------------------------------------------------------------
   9. Email signup — the whole point of the site
   -------------------------------------------------------------------------- */

.signup { background: var(--ground-warm); }

.signup__inner { max-width: 40rem; margin-inline: auto; text-align: center; }

.signup__heading { font-size: var(--step-2); font-weight: 500; margin-bottom: var(--s-2); }
.signup__text { max-width: 34rem; margin-inline: auto; }

.signup__form {
    display: flex; flex-wrap: wrap; gap: var(--s-1);
    justify-content: center;
    margin-top: var(--s1);
}

.signup__input {
    flex: 1 1 18rem;
    font: inherit; font-size: 1rem;
    padding: 0.85em 1em;
    min-height: 48px;
    border: 1.5px solid var(--rule);
    border-radius: var(--radius);
    background: var(--ground);
    color: var(--body);
}
.signup__input::placeholder { color: var(--muted); opacity: 1; }
.signup__input:focus-visible { border-color: var(--link); }

.signup__note { font-size: var(--step--1); color: var(--muted); margin-top: var(--s-1); }

/* Ghost adds .success / .error / .loading to the form element itself.
   These must be hidden at rest or the confirmation text shows permanently. */
.signup__message {
    flex-basis: 100%;
    margin: var(--s-2) 0 0;
    font-size: var(--step--1);
    display: none;
}
form.success .signup__message--success { display: block; color: var(--ink); font-weight: 600; }
form.error   .signup__message--error   { display: block; color: #9B2C2C; font-weight: 600; }
form.loading .signup__input,
form.loading .btn { opacity: .6; pointer-events: none; }

/* --------------------------------------------------------------------------
   10. Cards & feeds
   -------------------------------------------------------------------------- */

.card-grid {
    display: grid;
    gap: var(--s1);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    align-items: start;   /* cards size to their own content, never stretch */
}

.card {
    display: flex; flex-direction: column;
    background: var(--ground);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition);
}
.card:hover { border-color: var(--ink); }

.card__image { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.card__body  { padding: var(--s0); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card__title { font-size: var(--step-1); margin: 0; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.card__meta  { font-size: var(--step--1); color: var(--muted); margin: 0; }
.card__excerpt { margin: 0; font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   11. Media page — podcast & video embeds
   -------------------------------------------------------------------------- */

/* Ghost wraps pasted embeds in .kg-embed-card; force a 16:9 box so podcast
   and YouTube iframes never letterbox or overflow on mobile. */
.embed, .kg-embed-card iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius);
}
/* Audio-only players (Apple/Spotify) are short — let them size themselves. */
.embed--audio, .kg-embed-card iframe[src*='spotify'], .kg-embed-card iframe[src*='apple'] {
    aspect-ratio: auto;
    min-height: 180px;
}

.photo-grid {
    display: grid; gap: var(--s-1);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.photo-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   11b. Feature image — the photograph at the top of a post or page
   The feature image is whatever Lisa uploaded, and her photographs are
   portrait 2:3. Left to itself one renders 1800px tall at full container
   width and pushes the entire article below the fold. So the frame is fixed
   and the photograph is cropped into it — the same trade the cards make —
   rather than the article being reshaped around the picture.
   -------------------------------------------------------------------------- */

/* Wider than the measure, narrower than the container: the picture reads as
   part of the article rather than as a banner over it. */
.feature-image {
    width: min(100%, 56rem);
    margin: 0 auto var(--s2);
}

.feature-image img {
    width: 100%;
    /* Landscape sources come in under this and are never touched; portrait
       sources are cropped down to it. On a phone the column is narrow enough
       that even a 2:3 portrait clears the cap uncropped. */
    max-height: min(72vh, 34rem);
    object-fit: cover;
    /* Hold the window just above the subject's head rather than centring it:
       in a portrait the face sits high, and the floor is what we can lose. */
    object-position: 50% 38%;
    border-radius: var(--radius);
}

.feature-image figcaption {
    font-size: var(--step--1);
    color: var(--muted);
    text-align: center;
    margin-top: var(--s-2);
}

/* --------------------------------------------------------------------------
   12. Post content (Ghost Koenig output)
   -------------------------------------------------------------------------- */

.post-content { max-width: var(--measure); margin-inline: auto; }
.post-content > * + * { margin-top: var(--s0); }
.post-content h2 { margin-top: var(--s2); font-size: var(--step-2); }
.post-content h3 { margin-top: var(--s1); font-size: var(--step-1); }
.post-content blockquote {
    margin: var(--s1) 0;
    padding-left: var(--s0);
    border-left: 3px solid var(--accent);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-1);
    color: var(--ink);
}
.post-content img, .post-content figure { border-radius: var(--radius); }
.post-content figcaption {
    font-size: var(--step--1); color: var(--muted);
    text-align: center; margin-top: var(--s-2);
}

/* Full- and wide-width Koenig cards break the measure deliberately. */
.post-content :is(.kg-width-wide, .kg-width-full) { max-width: none; }
.post-content .kg-width-wide { width: min(100%, 56rem); margin-inline: auto; }

/* --------------------------------------------------------------------------
   12b. Events — book signings (page-events.hbs, slug "events")

   "Pressed flowers": cream page, one ice-blue card per signing, a big day
   numeral in its own column with a sage stroke beside it, and the cover's
   hydrangea pressed into each card — knocked back, desaturated, and bled off
   the right edge, never under the words. Colours are the marketing set,
   measured off human_provided_info/MarketingProvidedImages/ — see §1.

   The dates are Ghost content (Lisa adds a signing without Nick), written as
   a flat run of blocks — CONVENTIONS.md → Events. Ghost's editor cannot wrap
   a heading and its paragraphs in an element, so assets/js/events.js does it
   on load: each signing becomes

       article.ev
         div.ev__body
           h3.ev__city          "Lafayette"
           p.ev__date           27 · OCT · TUE   (day, month, weekday)
           p.ev__venue          UL ALUMNI CENTER · 5:30–7:30 PM
           div.ev__text         the paragraphs
           p.ev__go > a         "Get directions →"
         img.ev__bloom
       section.ev-group(--past) > h2.ev-group__title + div.ev-list  for an H2

   Without the script the same content renders as a plain list; the rules at
   the end of this section keep that readable.
   -------------------------------------------------------------------------- */

/* The events page heading is set flush left under a sage rule, the way the
   marketing quote cards are, rather than centred like every other page. The
   section is tighter at the top than the default so the heading sits close
   under the header. */
.section--events { padding-top: var(--s2); }
.events-head { max-width: var(--measure); margin-bottom: var(--s1); }
.events-head h1 { margin-bottom: var(--s-1); }

/* The hairline under the quote in "Lisa Dugal Content - 25", reused. */
.sage-rule {
    width: 7rem; height: 2px; border: 0;
    background: var(--sage);
    margin: var(--s1) 0 0;
}

.events-list { max-width: none; margin-inline: 0; }
.ev-intro { max-width: 36rem; margin-top: var(--s2); }
.ev-list { display: grid; gap: var(--s1); margin-top: var(--s2); }

.ev {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: var(--ice);
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 40rem);
    column-gap: var(--s2);
    align-items: start;
    padding: var(--s2) var(--s2) var(--s2) var(--s1);
}
.ev__body { display: contents; }

/* The date column: the day large, month and weekday as small caps under it. */
.ev__date {
    grid-column: 1; grid-row: 1 / span 5;
    position: relative; z-index: 1;
    margin: 0; padding: 0.35rem var(--s1) 0 0;
    border-right: 2px solid var(--sage);
    text-align: center;
}
.ev__day {
    display: block;
    font-family: var(--font-display);
    font-size: 3.4rem; line-height: 0.85;
    color: var(--ink);
}
.ev__mon, .ev__wd {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--leaf);
}
.ev__mon { margin-top: 0.7em; }
.ev__wd  { margin-top: 0.25em; }
.ev__date abbr { text-decoration: none; }
.ev__date--plain { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--leaf); }

.ev__city, .ev__venue, .ev__text, .ev__go { grid-column: 2; position: relative; z-index: 1; margin: 0; }
.ev__city {
    font-family: var(--font-display);
    font-size: var(--step-2); font-weight: 500;
    line-height: 1.05; letter-spacing: -0.01em;
    color: var(--ink);
}

/* Venue and time. This is the line that decides whether someone can come, so
   it is a label in shape only: 0.9rem, and --leaf clears AA on the ice (§1). */
.ev__venue {
    margin-top: var(--s-2);
    font-family: var(--font-sans);
    font-size: 0.9rem; font-weight: 600;
    line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--leaf);
}
.ev__time { color: var(--ink); }

.ev__text { margin-top: var(--s-1); }
.ev__text > * + * { margin-top: var(--s-1); }

.ev__go { margin-top: var(--s-1); }
.ev__go a {
    display: inline-flex; align-items: center; gap: 0.45em;
    min-height: 44px;
    font-family: var(--font-sans);
    font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 2px solid var(--sage);
}
.ev__go a::after { content: "\2192"; transition: transform var(--transition); }
.ev__go a:hover { border-bottom-color: var(--ink); }
.ev__go a:hover::after { transform: translateX(3px); }

/* Pressed, not photographed: knocked back and desaturated toward the card's
   own blue. It hugs the right edge but never starts before the text column
   ends (1.75rem padding + 7.5rem date + 2.6rem gap + 40rem text ≈ 52rem), so
   on a laptop it is a sliver of petals at the edge and at the container cap
   most of the flower. The second and third cards flip and shift it so three
   cards are not three identical stamps. */
.ev__bloom {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    left: max(53.5rem, calc(100% - 20rem));
    width: 26rem;
    opacity: 0.30;
    filter: saturate(0.55) contrast(0.92);
    pointer-events: none;
}
.ev:nth-child(3n+2) .ev__bloom { transform: translateY(-50%) scaleX(-1); }
.ev:nth-child(3n)   .ev__bloom { top: 38%; }

/* "Past events". An H2 in the page becomes a label across the list, and the
   cards after the one that reads "Past events" go warm grey: the page reads as
   a record rather than a shrinking list. Muted is 5.3:1 on cream. */
.ev-group__title {
    margin: var(--s3) 0 0;
    padding-top: var(--s1);
    border-top: 1px solid var(--rule);
    font-family: var(--font-sans);
    font-size: 0.85rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted);
}
.ev-group .ev-list { margin-top: var(--s1); }
.ev-group--past .ev { background: var(--ground-warm); }
.ev-group--past .ev__bloom { filter: grayscale(1); opacity: 0.18; }
.ev-group--past .ev__day, .ev-group--past .ev__city { color: var(--muted); }

/* The standing offer under the dates. Theme-owned: it is not a date. */
.events-next {
    margin: var(--s3) 0 0;
    padding-top: var(--s2);
    border-top: 1px solid var(--rule);
}
.events-next p { max-width: 40rem; }
.events-next__title { font-size: var(--step-2); font-weight: 500; margin-bottom: var(--s-1); }
.events-next__actions { margin-top: var(--s0); gap: var(--s1); }

/* On a phone the date column becomes a row above the city, and the bloom
   tucks into the card's top-right corner where only short lines run. */
@media (max-width: 62rem) {
    .ev { grid-template-columns: 1fr; padding: var(--s1); }
    .ev__date {
        grid-column: 1; grid-row: 1;
        border-right: 0; border-bottom: 2px solid var(--sage);
        text-align: left; padding: 0 0 var(--s-2);
        display: flex; align-items: baseline; gap: var(--s-1); flex-wrap: wrap;
    }
    .ev__day { font-size: 2.4rem; }
    .ev__mon, .ev__wd { margin: 0; }
    .ev__city, .ev__venue, .ev__text, .ev__go { grid-column: 1; }
    .ev__city { margin-top: var(--s-1); }
    .ev__bloom, .ev:nth-child(3n) .ev__bloom { top: -3rem; left: auto; right: -5rem; transform: none; width: 14rem; opacity: 0.22; }
    .ev:nth-child(3n+2) .ev__bloom { transform: scaleX(-1); }
}

/* No-script fallback: the flat list, lightly set. */
.events-list:not(.events-list--cards) > h3 { margin-top: var(--s2); font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
.events-list:not(.events-list--cards) > h3 + p { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.05; margin-top: var(--s-2); }

/* --------------------------------------------------------------------------
   12c. The Book — /chosen/ (page-chosen.hbs)

   "The jacket". The publisher's render of the book standing on its own navy
   (#2C3E5F — sampled from the render, one step lighter than --ink) with the
   title set beside it like a jacket flap; then the description with the six
   labels struck through in a sidebar; an ice quote band with the hydrangea;
   retailer cards; the clubs block on the warm ground. Chosen by Nick on
   6 September 2026 from four full-page options.

   Colour on the render's navy: cream is 9.6:1, ice 8.8:1. --accent is only
   3.8:1 there, so the kicker and the store links are ice, and the accent
   appears only as the "Buy the book" button (navy text on it, 4.6:1).
   -------------------------------------------------------------------------- */

.book-hero { background: #2C3E5F; color: var(--ice); }
.book-hero__grid {
    max-width: var(--container); margin-inline: auto;
    padding: var(--s2) 1.25rem var(--s3);
    display: grid; grid-template-columns: minmax(0, 26rem) 1fr; gap: var(--s3); align-items: center;
}
.book-hero__book img {
    width: 100%; height: auto; display: block;
    /* The crop's edges never show: the render fades into the same navy. */
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 58%, transparent 82%);
            mask-image: radial-gradient(ellipse at 50% 50%, #000 58%, transparent 82%);
}
.book-hero__kicker {
    margin: 0 0 var(--s0);
    font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase; color: var(--ice);
}
.book-hero__title {
    margin: 0 0 var(--s0);
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(3.2rem, 2rem + 5vw, 6.5rem); line-height: 0.95;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ink);
}
.book-hero__sub {
    margin: 0 0 var(--s1); max-width: 30rem;
    font-family: var(--font-display); font-style: italic;
    font-size: var(--step-2); line-height: 1.25; color: var(--ice);
}
.book-hero__lede { max-width: 34rem; margin: 0 0 var(--s2); color: var(--ice); }
.book-hero .btn-row { gap: var(--s0); }
.book-hero__outline { color: var(--on-ink); border-color: rgba(247, 244, 239, 0.45); }
.book-hero__outline:hover { background: rgba(247, 244, 239, 0.08); border-color: var(--on-ink); }
.book-hero__stores {
    margin: var(--s1) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s1);
    font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
}
.book-hero__stores:empty { display: none; }
.book-hero__stores a { color: var(--ice); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid rgba(220, 234, 247, 0.4); }
.book-hero__stores a:hover { color: var(--on-ink); border-color: var(--on-ink); }

/* About the book: the page body at reading width, the labels beside it. */
.book-about__grid {
    max-width: var(--container); margin-inline: auto;
    padding: var(--s4) 1.25rem;
    display: grid; grid-template-columns: minmax(0, 40rem) 1fr; gap: var(--s4); align-items: start;
}
.book-about__body { max-width: none; margin-inline: 0; }
.book-about__kicker {
    margin: 0 0 var(--s-1);
    font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--leaf);
}
.book-about__body > .book-about__kicker + p { margin-top: 0; }
.book-about__body > .book-about__kicker + p::first-letter {
    float: left; padding: 0.12em 0.15em 0 0;
    font-family: var(--font-display); font-size: 4.2em; line-height: 0.8; color: var(--ink);
}
.book-labels { border-left: 2px solid var(--sage); padding-left: var(--s1); }
.book-labels ul { list-style: none; margin: 0; padding: 0; }
.book-labels li {
    font-family: var(--font-display); font-size: var(--step-3); line-height: 1.1; color: var(--muted);
    text-decoration: line-through; text-decoration-color: var(--sage); text-decoration-thickness: 2px;
}
.book-labels li.is-chosen { margin-top: var(--s-1); color: var(--ink); font-weight: 500; text-decoration: none; }

/* The quote band: Lisa's own line, on the ice, the flower pressed in. */
.book-quote { position: relative; overflow: hidden; background: var(--ice); padding: var(--s4) 1.25rem; }
.book-quote__bloom {
    position: absolute; right: -8rem; top: 50%; transform: translateY(-50%);
    width: 34rem; opacity: 0.3; filter: saturate(0.55) contrast(0.92); pointer-events: none;
}
.book-quote blockquote {
    position: relative; max-width: 40rem; margin: 0 auto;
    font-family: var(--font-display); font-style: italic;
    font-size: var(--step-2); line-height: 1.3; color: var(--ink); text-align: center; text-wrap: balance;
}
.book-quote cite {
    display: block; margin-top: var(--s0);
    font-family: var(--font-sans); font-style: normal; font-size: 0.74rem;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--leaf);
}

/* Retailer cards. A card only renders when its URL is set in Design settings;
   the local-bookstore card is always there. */
.book-buy { padding: var(--s4) 0; }
.book-buy h2 { margin-bottom: var(--s1); }
.book-stores { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s0); list-style: none; margin: 0; padding: 0; }
.book-stores a {
    display: flex; flex-direction: column; gap: 0.3rem; min-height: 8rem;
    padding: var(--s1); border: 1px solid var(--rule); border-radius: 4px;
    color: var(--ink); text-decoration: none;
    transition: border-color var(--transition), background var(--transition);
}
.book-stores a:hover { border-color: var(--ink); background: rgba(31, 51, 71, 0.03); }
.book-stores strong { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; }
.book-stores span { color: var(--muted); font-size: var(--step--1); }
.book-stores em { margin-top: auto; font-style: normal; font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

.book-clubs { background: var(--ground-warm); padding: var(--s3) 0; }
.book-clubs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.book-clubs h2 { font-size: var(--step-2); margin-bottom: var(--s-1); }

@media (max-width: 62rem) {
    .book-hero__grid { grid-template-columns: 1fr; gap: var(--s1); padding-top: var(--s1); }
    .book-hero__book { max-width: 16rem; margin: 0 auto; }
    .book-hero__title { font-size: 3.4rem; }
    .book-about__grid, .book-clubs__grid { grid-template-columns: 1fr; gap: var(--s2); }
    .book-quote__bloom { right: -12rem; width: 24rem; opacity: 0.22; }
}

/* --------------------------------------------------------------------------
   12d. About — /about/ (page-about.hbs)

   "The letter". The cream-wall portrait dissolves into the page beside her
   name — only its sides and top fade; she stands on the rule that opens the
   story. The story is Ghost content at reading width: the editor's Quote
   cards become her own lines hanging in the left margin, one Image card with
   a caption becomes the figure of her writing, and an "at a glance" column
   follows the reader down. Then a wide frame of her with the dogs, her "Dear
   Friend" letter set as a letter on the ice, and the Speaking block on the
   warm ground. Chosen by Nick on 6 September 2026 from four options.
   -------------------------------------------------------------------------- */

.about-kicker {
    margin: 0 0 var(--s-1);
    font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase; color: var(--leaf);
}

/* ---- the hero ---- */
.about-hero {
    max-width: var(--container); margin-inline: auto; padding: var(--s2) 1.25rem 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: var(--s2); align-items: end;
}
.about-hero__copy { padding-bottom: var(--s4); }
.about-hero h1 { font-size: var(--step-4); margin: 0 0 var(--s-1); }
.about-hero__roles {
    margin: 0 0 var(--s1);
    font-family: var(--font-display); font-style: italic;
    font-size: var(--step-2); line-height: 1.25; color: var(--body);
}
.about-hero__lede { max-width: 32rem; }
.about-hero__portrait img {
    width: 100%; height: auto; display: block; margin-bottom: -1px;
    -webkit-mask-image: radial-gradient(ellipse 78% 110% at 50% 100%, #000 62%, transparent 100%);
            mask-image: radial-gradient(ellipse 78% 110% at 50% 100%, #000 62%, transparent 100%);
}

/* ---- the story and the column ---- */
.about-body {
    max-width: var(--container); margin-inline: auto; padding: var(--s3) 1.25rem var(--s4);
    display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 18rem); justify-content: space-between;
    gap: var(--s4); align-items: start;
    border-top: 1px solid var(--rule);
}
.about-prose { max-width: none; margin-inline: 0; }
.about-prose > p:first-child::first-letter {
    float: left; padding: 0.1em 0.14em 0 0;
    font-family: var(--font-display); font-size: 4.4em; line-height: 0.8; color: var(--ink);
}
.about-prose > h2 { font-size: var(--step-2); margin: var(--s2) 0 var(--s-1); }
.about-prose > h2 + p { margin-top: 0; }
/* A Quote card: her line, hanging in the left margin. */
.about-prose > blockquote {
    margin: var(--s2) 0 var(--s2) -6.5rem; padding: 0 0 0 var(--s1); max-width: 21rem;
    border-left: 2px solid var(--sage); background: none;
    font-family: var(--font-display); font-style: italic;
    font-size: var(--step-1); line-height: 1.3; color: var(--ink);
}
.about-prose > blockquote::after {
    content: "Lisa"; display: block; margin-top: 0.4rem;
    font-family: var(--font-sans); font-style: normal; font-size: 0.64rem;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--leaf);
}
/* An Image card with a caption: the figure, photograph left, caption beside. */
.about-prose > figure {
    margin: var(--s2) 0; display: grid; grid-template-columns: minmax(0, 17rem) 1fr; gap: var(--s1); align-items: end;
}
.about-prose > figure img { width: 100%; height: auto; display: block; border-radius: 4px; }
.about-prose > figure figcaption {
    margin: 0; padding-bottom: var(--s-1); text-align: left;
    font-family: var(--font-display); font-style: italic;
    font-size: var(--step-1); line-height: 1.3; color: var(--body);
}
.about-side { position: sticky; top: 5rem; border-top: 2px solid var(--sage); padding-top: var(--s1); }
.about-side h2 { font-size: var(--step-1); margin-bottom: var(--s-1); }
.about-side dl { margin: 0; }
.about-side dt {
    margin-top: var(--s0);
    font-family: var(--font-sans); font-size: 0.64rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--leaf);
}
.about-side dd { margin: 0.15rem 0 0; font-family: var(--font-display); font-size: var(--step-0); line-height: 1.35; color: var(--ink); }
.about-side .btn { width: 100%; margin-top: var(--s1); }

/* ---- at home ---- */
.about-band { max-width: var(--container); margin-inline: auto; padding: 0 1.25rem var(--s4); }
.about-band img { width: 100%; height: auto; display: block; border-radius: 4px; }
.about-band p {
    margin: var(--s-1) 0 0;
    font-family: var(--font-sans); font-size: 0.64rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--leaf);
}

/* ---- Dear Friend ---- */
.about-letter { background: var(--ice); padding: var(--s4) 1.25rem; }
.about-letter__inner {
    position: relative; overflow: hidden;
    max-width: 46rem; margin-inline: auto;
    background: var(--ground); border-radius: 4px;
    padding: var(--s3) clamp(1.5rem, 6vw, 5rem);
    box-shadow: 0 30px 60px -30px rgba(31, 51, 71, 0.35);
}
.about-letter__bloom {
    position: absolute; right: -7rem; bottom: -6rem; width: 22rem;
    opacity: 0.22; filter: saturate(0.55) contrast(0.92); pointer-events: none;
}
.about-letter__inner > :not(.about-letter__bloom) { position: relative; }
.about-letter__inner p { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.about-letter__inner p + p { margin-top: var(--s0); }
.about-letter__salute { font-style: italic; }
.about-letter__sign { margin-top: var(--s1) !important; font-style: italic; }
.about-letter__sign b { display: block; margin-top: 0.2rem; font-size: var(--step-2); font-weight: 500; font-style: italic; }

/* ---- speaking ---- */
.about-speak { background: var(--ground-warm); padding: var(--s4) 1.25rem; }
.about-speak__grid {
    max-width: var(--container); margin-inline: auto;
    display: grid; grid-template-columns: 1fr minmax(0, 22rem); gap: var(--s4); align-items: center;
}
.about-speak h2 { font-size: var(--step-3); margin-bottom: var(--s0); }
.about-speak p { max-width: 36rem; }
.about-speak img { width: 100%; height: auto; display: block; border-radius: 4px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; }

@media (max-width: 62rem) {
    .about-hero { grid-template-columns: 1fr; gap: 0; padding-top: var(--s1); }
    .about-hero__portrait { order: -1; max-width: 22rem; margin-inline: auto; }
    .about-hero__copy { padding-bottom: var(--s2); text-align: center; }
    .about-hero__lede { margin-inline: auto; }
    .about-body { grid-template-columns: 1fr; gap: var(--s2); }
    .about-prose > blockquote { margin-left: 0; }
    .about-prose > figure { grid-template-columns: 1fr; }
    .about-prose > figure img { max-width: 18rem; }
    .about-side { position: static; }
    .about-speak__grid { grid-template-columns: 1fr; gap: var(--s2); }
    .about-speak img { max-width: 18rem; }
}

/* --------------------------------------------------------------------------
   13. Ghost editor (Koenig) cards
   Ghost's cards.min.css is injected by {{ghost_head}}, which sits AFTER this
   stylesheet, so it wins at equal specificity. Its accent styles are driven by
   --ghost-accent-color, which means a Button card inserted in the editor comes
   out in whatever Design → accent colour is set to.

   These selectors lead with `body` purely to outrank
   `.kg-button-card a.kg-btn-accent` (0,2,1) without !important.
   -------------------------------------------------------------------------- */

body .kg-button-card a.kg-btn {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    height: auto;
    min-height: 48px;
    padding: 0.85em 1.6em;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    transition: background var(--transition), border-color var(--transition);
}

body .kg-button-card a.kg-btn-accent {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--on-ink);
}
body .kg-button-card a.kg-btn-accent:hover {
    background-color: var(--ink-soft);
    border-color: var(--ink-soft);
    opacity: 1;
}

/* The other accent-driven cards, so nothing in the editor can introduce a
   colour that is not in the palette. */
body .kg-callout-card-accent,
body .kg-header-card.kg-style-accent,
body .kg-signup-card.kg-style-accent { background: var(--ink); color: var(--on-ink); }

body .kg-signup-card-button.kg-style-accent,
body .kg-header-card.kg-style-light a.kg-header-card-button {
    background: var(--ink); color: var(--on-ink);
}

body .kg-cta-link-accent .kg-cta-text a,
body .kg-cta-link-accent .kg-cta-sponsor-label a { color: var(--link); }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

/* Brand and tagline left, navigation right, copyright underneath — from
   media/mocks/home-below-the-fold.jpg. */
.site-footer {
    background: var(--ink);
    color: var(--on-ink);
    padding-block: var(--s3) var(--s1);
}

.site-footer__top {
    display: flex; flex-wrap: wrap;
    justify-content: space-between; align-items: flex-start;
    gap: var(--s1) var(--s3);
}

.site-footer__name {
    font-family: var(--font-display);
    font-size: var(--step-0); font-weight: 600;
    color: var(--on-ink); text-decoration: none;
    display: inline-block;
}
.site-footer__tagline {
    font-family: var(--font-display);
    font-size: var(--step-1); line-height: 1.3;
    color: var(--accent);                  /* pale blue on navy: 4.6:1, AA */
    margin: var(--s-2) 0 0;
}

.site-footer__nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap;
    gap: var(--s-1) var(--s1);
}
.site-footer__nav a {
    display: inline-block; padding-block: var(--s-2);
    font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent);                  /* pale blue on navy: 4.6:1, AA */
    text-decoration: none; white-space: nowrap;
}
.site-footer__nav a:hover,
.site-footer__nav .nav-item--current a { color: var(--on-ink); }

.site-footer__bottom {
    margin-top: var(--s2); padding-top: var(--s0);
    border-top: 1px solid rgba(247, 244, 239, 0.2);
    font-size: var(--step--1); opacity: 0.75;
    display: flex; flex-wrap: wrap; gap: var(--s-1); justify-content: space-between;
}

/* --------------------------------------------------------------------------
   15. Pagination
   -------------------------------------------------------------------------- */

.pagination {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s0); margin-top: var(--s2);
}
.pagination__page { font-size: var(--step--1); color: var(--muted); }

/* --------------------------------------------------------------------------
   16. Print — she will print pages, and so will her readers
   -------------------------------------------------------------------------- */

@media print {
    .site-header, .site-footer, .signup { display: none; }
    body { background: #fff; color: #000; font-size: 12pt; }
    .post-content { max-width: none; }
}