/* ==========================================================================
   Kate Paterson Photography — shared site stylesheet
   --------------------------------------------------------------------------
   Naming   ls- prefix on everything.
            Components: BEM-lite  ls-block, ls-block__element, ls-block--modifier
            States:     ls-is-*   (toggled by the page logic, e.g. ls-is-active)
            Utilities:  Tailwind-style names on a 4px scale (ls-mt-8 = 32px).
                        Class names containing "/" are escaped in CSS
                        (ls-aspect-4/5 -> .ls-aspect-4\/5).
   Cascade  Layer order is explicit, so specificity never has to be fought:
            base < layout < components < utilities.
   Surfaces .ls-surface-sand / .ls-surface-dark re-map the --ls-text-* role
            tokens, so eyebrows, quotes, captions etc. adapt automatically.
   Widths   Sizes are fluid (clamp()) between the breakpoints lucidsprint.com
            uses: 1279 (small desktop), 1024 (tablet: menu icon, since
            2026-10-19), 820 (tablet portrait: single column), 560 (phone),
            400 (small phone); plus 1179 for the nav's spacing. The
            layout switches live in "Responsive tiers" at the end of the
            components layer; the gutter steps down in the tokens.
   WordPress The same stylesheet as the static design (public/kp/ls-site.css),
            plus the pieces WordPress needs: self-hosted fonts, [hidden],
            the hero slideshow's pause button, the inquiry form's states, and
            "WordPress pages" (posts, plain pages, archives, pagination) at
            the end of the components layer. The hero's shading also differs
            (2026-10-16): a shade behind the words instead of one gradient
            across the whole photo, so the text reads on every slide.
            Loaded on the site and inside the block editor's canvas.
   ========================================================================== */

/* Fonts: self-hosted Instrument Serif and Manrope (SIL Open Font License),
   latin + latin-ext, with Google's unicode ranges. Manrope is variable. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer ls-base, ls-layout, ls-components, ls-utilities;

/* WordPress's block library sets `:where(figure) { margin: 0 0 1em }` outside
   any cascade layer, and an unlayered rule beats every layer whatever its
   specificity. None of the design's figures (all ls- classed) has a margin. */
figure[class*="ls-"] { margin: 0; }
/* In posts and plain pages the reading column's own spacing and the wide /
   full-width alignment apply instead (.kpp-entry, in the components layer):
   revert-layer hands figure margins back to the layers. The same goes for the
   block library's (and global styles') unlayered button, separator and
   caption styles, which would otherwise win over the theme's. Gallery
   captions keep the block library's overlay (its rule is more specific). */
.kpp-entry figure { margin: revert-layer; }
.kpp-entry .wp-block-button__link {
  display: revert-layer;
  height: revert-layer;
  min-height: revert-layer;
  padding: revert-layer;
  border: revert-layer;
  border-radius: revert-layer;
  background: revert-layer;
  color: revert-layer;
  font: revert-layer;
  text-decoration: revert-layer;
}
.kpp-entry .wp-block-separator { border: revert-layer; }
.kpp-entry :is(figcaption, .wp-element-caption) {
  margin: revert-layer;
  font: revert-layer;
  color: revert-layer;
  text-align: revert-layer;
}


/* ==========================================================================
   Base: design tokens + element defaults
   ========================================================================== */
@layer ls-base {
  :root {
    /* Palette */
    --ls-ink: #221F1C;          /* primary text, dark surfaces */
    --ls-paper: #FAF7F2;        /* page background, text on dark */
    --ls-sand: #E2D7C3;         /* alternate section background */
    --ls-sand-deep: #D2C4A8;    /* image placeholder on sand */
    --ls-bronze: #6E5B35;       /* accent: hovers, focus rings, eyebrows */
    --ls-bronze-deep: #5A4A2B;  /* accent text on sand */
    --ls-gold: #C9B58E;         /* accent on dark */
    --ls-cream: #EFE7DA;        /* quote text on dark */
    --ls-stone: #D8CDBB;        /* body text on dark */
    --ls-mist: #A89A8C;         /* footer small print */
    --ls-umber: #3D3630;        /* body text on light */
    --ls-taupe: #625A50;        /* captions and citations on light */
    --ls-clay: #6F655B;         /* inactive category names */
    --ls-charcoal: #332E29;     /* image placeholder on dark */
    --ls-white: #FFFFFF;        /* form fields */

    /* Translucent ink / paper (suffix = alpha %) */
    --ls-ink-12: rgba(34,31,28,.12);
    --ls-ink-14: rgba(34,31,28,.14);
    --ls-ink-16: rgba(34,31,28,.16);
    --ls-ink-20: rgba(34,31,28,.2);
    --ls-ink-30: rgba(34,31,28,.3);
    --ls-ink-35: rgba(34,31,28,.35);
    --ls-ink-40: rgba(34,31,28,.4);
    --ls-ink-45: rgba(34,31,28,.45);
    --ls-ink-62: rgba(34,31,28,.62);
    --ls-paper-08: rgba(250,247,242,.08);
    --ls-paper-12: rgba(250,247,242,.12);
    --ls-paper-14: rgba(250,247,242,.14);
    --ls-paper-16: rgba(250,247,242,.16);
    --ls-paper-50: rgba(250,247,242,.5);
    --ls-paper-70: rgba(250,247,242,.7);
    --ls-paper-85: rgba(250,247,242,.85);
    --ls-paper-92: rgba(250,247,242,.92);
    --ls-paper-94: rgba(250,247,242,.94);

    /* Type over photographs: a hairline dark edge that reads as crisper type
       rather than as a shadow (-sm, a little fuller, for 12-14px type) */
    --ls-photo-text-edge: 0 0 1px rgba(20,16,12,.5), 0 0 2px rgba(20,16,12,.3);
    --ls-photo-text-edge-sm: 0 0 1px rgba(20,16,12,.6), 0 0 3px rgba(20,16,12,.5), 0 0 8px rgba(20,16,12,.25);

    /* Typography */
    --ls-font-body: Manrope, 'Helvetica Neue', Arial, sans-serif;
    --ls-font-sans: Manrope, sans-serif;
    --ls-font-serif: 'Instrument Serif', Georgia, serif;
    --ls-font-mono: ui-monospace, Menlo, monospace;

    /* Layout & spacing */
    --ls-container: 1400px;
    --ls-gutter: clamp(20px, 5vw, 72px);
    --ls-section-lg: clamp(64px, 11vw, 150px);  /* the minimums only apply below ~800px */
    --ls-section-md: clamp(64px, 10vw, 140px);
    --ls-section-sm: clamp(48px, 8vw, 110px);
    --ls-space-block: clamp(36px, 5vw, 64px);   /* between a heading block and its content */
    --ls-gap-split: clamp(40px, 6vw, 96px);     /* between the columns of a split layout */

    /* Shape & motion */
    --ls-radius: 2px;
    --ls-ease: cubic-bezier(.2, .6, .2, 1);

    /* Surface-aware roles (light-surface defaults; re-mapped by .ls-surface-*) */
    --ls-text-strong: var(--ls-ink);    /* headings, emphasis */
    --ls-text-body: var(--ls-umber);    /* running text */
    --ls-text-muted: var(--ls-taupe);   /* captions, citations */
    --ls-text-accent: var(--ls-bronze); /* eyebrows, numbers, quote rules */
    --ls-text-quote: var(--ls-ink);     /* pull-quote text */
    --ls-rule: var(--ls-ink-16);        /* hairlines between items */
    --ls-placeholder: var(--ls-sand);   /* background behind loading images */
    --ls-focus-ring: var(--ls-bronze);
  }

  /* Small phones: 16px gutters, as on lucidsprint.com */
  @media (max-width: 400px) {
    :root { --ls-gutter: 16px; }
  }

  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--ls-paper);
    color: var(--ls-ink);
    font-family: var(--ls-font-body);
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
  }
  a { color: var(--ls-ink); }
  a:hover { color: var(--ls-bronze); }
  img { display: block; }
  input, select, textarea, button { font-family: inherit; }
  ::selection { background: var(--ls-sand); }

  /* Panels, form states and menus toggled by the page script. !important in
     the first layer beats every later layer, so a component's display never
     un-hides them. */
  [hidden] { display: none !important; }

  /* WordPress's visually-hidden text (screen readers only) */
  .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .screen-reader-text:focus {
    clip-path: none;
    width: auto;
    height: auto;
    left: 16px;
    top: 16px;
    z-index: 100;
    padding: 12px 18px;
    background: var(--ls-ink);
    color: var(--ls-paper);
  }

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


/* ==========================================================================
   Layout: page structure primitives
   ========================================================================== */
@layer ls-layout {
  .ls-container {
    max-width: var(--ls-container);
    margin-inline: auto;
    padding-inline: var(--ls-gutter);
  }

  /* Vertical rhythm for page sections */
  .ls-section { padding-block: var(--ls-section-lg); }
  .ls-section--md { padding-block: var(--ls-section-md); }
  .ls-section--sm { padding-block: var(--ls-section-sm); }

  /* Surfaces: background + the role tokens the components read */
  .ls-surface-sand {
    background: var(--ls-sand);
    --ls-text-accent: var(--ls-bronze-deep);
    --ls-rule: var(--ls-ink-20);
    --ls-placeholder: var(--ls-sand-deep);
  }
  .ls-surface-dark {
    background: var(--ls-ink);
    color: var(--ls-cream);
    --ls-text-strong: var(--ls-paper);
    --ls-text-body: var(--ls-stone);
    --ls-text-muted: var(--ls-gold);
    --ls-text-accent: var(--ls-gold);
    --ls-text-quote: var(--ls-cream);
    --ls-placeholder: var(--ls-charcoal);
    --ls-rule: var(--ls-paper-14);
    --ls-focus-ring: var(--ls-paper);
  }

  /* Two (or more) columns that wrap on narrow screens */
  .ls-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--ls-gap-split);
  }
  /* Common columns inside a split: a narrow side column and a photo column */
  .ls-split__aside { flex: 1 1 320px; min-width: 0; max-width: 440px; }
  .ls-split__media { flex: 1 1 360px; min-width: 0; max-width: 520px; margin: 0; }

  /* Responsive grid of cards (at least 280px each) */
  .ls-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(40px, 5vw, 64px) clamp(20px, 3vw, 40px);
  }

  /* Eyebrow + heading on one side, supporting content on the other */
  .ls-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 40px;
    margin-bottom: var(--ls-space-block);
  }

  /* A row pushed to both edges (quote + button, text + actions) */
  .ls-spread {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
  }

  /* A wrapping row of buttons / links */
  .ls-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  /* Lists used for layout rather than bullets */
  .ls-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Side column that sticks while its neighbour scrolls (wide screens only) */
  .ls-sticky-aside { top: 100px; }
  @media (min-width: 1100px) {
    .ls-sticky-aside { position: sticky; }
  }
}


/* ==========================================================================
   Components
   ========================================================================== */
@layer ls-components {

  /* ---- Focus ring shared by interactive components ------------------- */
  /* Keyboard focus only (:focus-visible), so mouse clicks don't draw a ring.
     Colour comes from --ls-focus-ring (bronze; paper on dark surfaces, dark
     buttons and the menu), offset from --ls-focus-offset (4px unless a
     component overrides it).
     Form fields keep :focus (see Contact) so the active field is always marked. */
  :is(.ls-btn, .ls-nav__link, .ls-link, .ls-cats__link, .ls-mosaic__link,
      .ls-filter, .ls-gallery__link, .ls-toc__link, .ls-feature__media, .ls-feature__title-link,
      .ls-post__link, .ls-advice__link, .ls-archive__link, .ls-prices__link,
      .ls-accordion__trigger, .ls-accordion__link, .ls-wait__link, .ls-faq__trigger,
      .ls-icon-btn, .ls-hero__pause, .kpp-pagination a, .kpp-post-nav__link, .kpp-post-hero__kind,
      .kpp-entry a):focus-visible {
    outline: 2px solid var(--ls-focus-ring);
    outline-offset: var(--ls-focus-offset, 4px);
  }

  /* ---- Skip link ------------------------------------------------------ */
  .ls-skip-link {
    position: absolute;
    left: -9999px;
    top: 16px;
    z-index: 100;
    background: var(--ls-ink);
    color: var(--ls-paper);
    padding: 12px 18px;
    font: 500 14px var(--ls-font-sans);
    text-decoration: none;
  }
  .ls-skip-link:focus { left: 16px; }

  /* ---- Buttons --------------------------------------------------------- */
  .ls-btn {
    display: inline-flex;
    align-items: center;
    min-height: 54px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--ls-radius);
    font: 500 15px var(--ls-font-sans);
    text-decoration: none;
    cursor: pointer;
  }
  /* Sizes */
  .ls-btn--md { min-height: 50px; padding: 0 26px; }
  .ls-btn--sm { min-height: 48px; padding: 0 24px; font-size: 14px; }

  /* Solid ink, for light surfaces */
  .ls-btn--dark {
    background: var(--ls-ink);
    color: var(--ls-paper);
    transition: background .3s;
  }
  .ls-btn--dark:hover { background: var(--ls-bronze); color: var(--ls-paper); }

  /* Solid paper, for dark surfaces (the hero re-maps its hover, see Hero) */
  .ls-btn--light {
    background: var(--ls-paper);
    color: var(--ls-ink);
    transition: background .3s, color .3s;
    --ls-focus-ring: var(--ls-paper);
  }
  .ls-btn--light:hover { background: var(--ls-gold); color: var(--ls-ink); }

  /* Outlined in paper, for dark surfaces */
  .ls-btn--ghost {
    border: 1px solid var(--ls-paper-50);
    color: var(--ls-paper);
    transition: background .3s, border-color .3s;
    --ls-focus-ring: var(--ls-paper);
  }
  .ls-btn--ghost:hover {
    border-color: var(--ls-paper);
    background: var(--ls-paper-08);
    color: var(--ls-paper);
  }

  /* Outlined in ink, for light surfaces */
  .ls-btn--outline {
    border: 1px solid var(--ls-ink);
    color: var(--ls-ink);
    transition: background .3s, color .3s;
  }
  .ls-btn--outline:hover { background: var(--ls-ink); color: var(--ls-paper); }

  /* Header call-to-action: takes the nav's type, fills bronze on hover */
  .ls-btn--nav {
    min-height: 44px;
    padding: 0 22px;
    white-space: nowrap;
    border: 1px solid currentColor;
    color: inherit;
    font: inherit;
    transition: background .3s, color .3s, border-color .3s, text-shadow .45s ease;
  }
  .ls-btn--nav:hover {
    background: var(--ls-bronze);
    border-color: var(--ls-bronze);
    color: var(--ls-paper);
  }

  /* ---- Icon buttons (menu, close) -------------------------------------- */
  /* A bare icon in a 44px tap target, as on lucidsprint.com. The negative
     margin puts the icon's right edge on the page gutter; the focus ring
     takes the icon's colour, so it shows on the dark hero and the menu. */
  .ls-icon-btn {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -12px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    --ls-focus-ring: currentColor;
    --ls-focus-offset: 0px;
  }

  /* ---- Underlined text links ------------------------------------------- */
  .ls-link {
    text-decoration: underline;
    text-underline-offset: 7px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ls-ink-35);
  }
  .ls-link:hover { color: var(--ls-bronze); text-decoration-color: var(--ls-bronze); }
  /* Secondary call to action ("More about me →") */
  .ls-link--cta { font: 500 15px var(--ls-font-sans); }

  /* ---- Typography ------------------------------------------------------ */
  .ls-eyebrow {
    margin: 0 0 18px;
    font: 500 12px/1 var(--ls-font-sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ls-text-accent);
  }
  .ls-display {
    margin: 0;
    font: 400 clamp(40px, 5.4vw, 80px)/1 var(--ls-font-serif);
    letter-spacing: -.015em;
    color: var(--ls-text-strong);
  }
  .ls-display--sm { font-size: clamp(36px, 4.2vw, 64px); }
  .ls-display--xs { font-size: clamp(34px, 4vw, 56px); }
  .ls-lede {
    margin: 24px 0 0;
    font: 400 17px/1.7 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .ls-lede--lg { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; }
  .ls-prose {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font: 400 17px/1.75 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .ls-prose > p { margin: 0; }
  .ls-caption {
    margin: 12px 0 0;
    font: italic 400 16px/1.4 var(--ls-font-serif);
    color: var(--ls-text-muted);
  }
  .ls-cite {
    font: 400 13px/1.5 var(--ls-font-sans);
    color: var(--ls-text-muted);
  }
  .ls-signature {
    font: italic 400 36px/1 var(--ls-font-serif);
    color: var(--ls-text-accent);
  }

  /* ---- Quotes ---------------------------------------------------------- */
  .ls-quote { margin: 0; }
  .ls-quote__text {
    margin: 0;
    font: italic 400 19px/1.4 var(--ls-font-serif);
    color: var(--ls-text-quote);
  }
  .ls-quote > .ls-cite { margin-top: 8px; }
  .ls-quote--lg .ls-quote__text { font-size: 20px; }
  .ls-quote--xl .ls-quote__text { font-size: clamp(20px, 2vw, 26px); }
  /* Stacked in a text column: hairline above (under a photo) */
  .ls-quote--ruled {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--ls-rule);
  }
  /* Stacked in a text column: accent bar on the left */
  .ls-quote--bar {
    margin-top: 28px;
    padding-left: 16px;
    border-left: 1px solid var(--ls-text-accent);
  }

  /* ---- Framed photos --------------------------------------------------- */
  .ls-frame {
    overflow: hidden;
    background: var(--ls-placeholder);
  }
  .ls-frame__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ls-ease);
  }
  .ls-frame__img:hover { transform: scale(1.04); }
  /* Gentler zoom on large photos, stronger on small thumbnails */
  .ls-frame__img--zoom-sm:hover { transform: scale(1.03); }
  .ls-frame__img--zoom-lg:hover { transform: scale(1.06); }

  /* ---- Logo ------------------------------------------------------------ */
  .ls-logo { height: 48px; width: auto; }
  .ls-logo--light { filter: brightness(0) invert(1); }

  /* ---- Header ---------------------------------------------------------- */
  .ls-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* The logo and nav line up with the page column: the gutter, or half of
       what the 1400px column leaves free on very wide screens (≥1544px). */
    padding: 16px max(var(--ls-gutter), (100% - var(--ls-container)) / 2);
    background: transparent;
    color: var(--ls-ink);
    border-bottom: 1px solid transparent;
    transition: background .45s ease, color .45s ease, border-color .45s ease;
  }
  /* Over a dark hero, before scrolling */
  .ls-header--on-dark { color: var(--ls-paper); }
  /* After scrolling */
  .ls-header--solid {
    background: var(--ls-paper-92);
    -webkit-backdrop-filter: blur(12px);  /* Safari < 18 */
    backdrop-filter: blur(12px);
    border-bottom-color: var(--ls-ink-12);
  }
  .ls-header__home { display: block; color: inherit; }
  .ls-header__logo { transition: filter .45s ease; }
  .ls-header--on-dark .ls-header__logo { filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(20,16,12,.45)); }
  /* Takes over from the nav at ≤1024px (see Responsive tiers) */
  .ls-header__menu-btn { display: none; }
  .ls-header__menu-btn svg { transition: filter .45s ease; }
  /* Over the hero photo the menu and its icon take a hairline dark edge (the
     hero darkens the top of the photo too); it fades out with the header's
     colour when the header turns solid. */
  .ls-header--on-dark :is(.ls-nav__link, .ls-btn--nav) { text-shadow: var(--ls-photo-text-edge-sm); }
  .ls-header--on-dark .ls-header__menu-btn svg { filter: drop-shadow(0 0 1px rgba(20,16,12,.6)) drop-shadow(0 0 3px rgba(20,16,12,.45)); }

  .ls-nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.6vw, 40px);
    font: 500 14px/1 var(--ls-font-sans);
  }
  .ls-nav__link {
    color: inherit;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    transition: text-shadow .45s ease;
  }
  .ls-nav__link:hover,
  .ls-nav__link[aria-current="page"] { border-bottom-color: currentColor; }

  /* ---- Mobile menu (≤1024px) ------------------------------------------- */
  /* Follows lucidsprint.com: a full-screen panel that fades in over the page,
     its top row where the page header's is (logo left, close icon where the
     menu icon was), links that rise in one after another and a full-width
     call to action. It stays in the page so it can fade out again: the page
     logic sets .ls-is-open or .ls-is-closed (only the closed state hides it,
     so a menu without either class, as in pages cached before 2026-10-01,
     still shows), locks page scrolling while it is open, moves focus into it
     and back, keeps Tab inside it, and closes it on Escape, on a link, or
     when the window widens past 1024px. */
  .ls-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px var(--ls-gutter) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ls-ink);
    color: var(--ls-paper);
    --ls-focus-ring: var(--ls-paper);
    transition: opacity .25s var(--ls-ease), visibility 0s;
  }
  .ls-menu.ls-is-closed {
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s, .25s;   /* stays visible while it fades out */
  }
  .ls-menu__bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ls-menu__nav {
    display: flex;
    flex-direction: column;
    margin-block: auto;
    font: 400 clamp(40px, 10vw, 64px)/1.1 var(--ls-font-serif);
  }
  .ls-menu__link {
    color: inherit;
    text-decoration: none;
    padding: 10px 0;
  }
  .ls-menu__link:not(:last-child) { border-bottom: 1px solid var(--ls-paper-16); }
  .ls-menu__link:hover,
  .ls-menu__link[aria-current="page"] { color: var(--ls-stone); }
  .ls-menu__footer {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  /* Used with .ls-btn: full-width call to action at the foot of the menu */
  .ls-menu__cta {
    justify-content: center;
    min-height: 56px;
    padding: 0 28px;
    background: var(--ls-paper);
    color: var(--ls-ink);
  }
  .ls-menu__note {
    margin: 0;
    font: 400 13px/1.6 var(--ls-font-sans);
    color: var(--ls-stone);
  }
  /* Opening: the links, then the footer, rise in one after another */
  .ls-menu__link,
  .ls-menu__footer {
    transition: opacity .35s var(--ls-ease), transform .35s var(--ls-ease), color .2s;
  }
  .ls-is-closed .ls-menu__link,
  .ls-is-closed .ls-menu__footer { opacity: 0; transform: translateY(10px); }
  .ls-is-open .ls-menu__link:nth-child(1) { transition-delay: .05s, .05s, 0s; }
  .ls-is-open .ls-menu__link:nth-child(2) { transition-delay: .1s, .1s, 0s; }
  .ls-is-open .ls-menu__link:nth-child(3) { transition-delay: .15s, .15s, 0s; }
  .ls-is-open .ls-menu__link:nth-child(4) { transition-delay: .2s, .2s, 0s; }
  .ls-is-open .ls-menu__link:nth-child(5) { transition-delay: .25s, .25s, 0s; }
  .ls-is-open .ls-menu__link:nth-child(6) { transition-delay: .3s, .3s, 0s; }
  .ls-is-open .ls-menu__footer { transition-delay: .35s, .35s, 0s; }
  /* Landscape phones: smaller links, so most of the menu fits on screen */
  @media (max-height: 560px) {
    .ls-menu__nav { font-size: 34px; }
  }
  /* Reduced motion: no transitions at all here. The global .01ms rule would
     also briefly transition the visibility the close button inherits, and a
     button that is still hidden cannot take focus when the menu opens. */
  @media (prefers-reduced-motion: reduce) {
    .ls-menu,
    .ls-menu * { transition: none !important; }
  }

  /* ---- Paper grain overlay --------------------------------------------- */
  /* Black noise whose alpha is (1 - grey) looks exactly like grey noise with
     mix-blend-mode: multiply, but composites as a plain transparent layer, so
     the browser doesn't have to re-blend the whole page on every scroll frame. */
  .ls-grain {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
    opacity: .07;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0' result='g'/%3E%3CfeColorMatrix color-interpolation-filters='sRGB' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.2126 -0.7152 -0.0722 0 1'/%3E%3CfeComposite in2='g' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 260px 260px;
    transition: opacity .4s;
  }
  .ls-grain--off { opacity: 0; }

  /* ---- Hero ------------------------------------------------------------ */
  .ls-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--ls-ink);
    color: var(--ls-paper);
    --ls-hero-shade: 28,24,20;   /* r,g,b of the shading over the photo */
  }
  /* Taller than the hero so the scroll parallax never shows an edge */
  .ls-hero__media {
    position: absolute;
    inset: -8% 0;
    will-change: transform;
  }
  .ls-hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1);
    /* fade out, then snap the zoom back once hidden */
    transition: opacity 1.8s ease, transform 0s linear 1.9s;
    will-change: opacity, transform;
  }
  .ls-hero__slide.ls-is-active {
    opacity: 1;
    transform: scale(1.07);
    /* fade in while slowly zooming */
    transition: opacity 1.8s ease, transform 8s linear;
  }
  /* Shading that keeps the words readable on any photo and stays off the rest
     of it (contrast measured on every slide at five widths, 2026-10-16). The
     scrim darkens the top like a graduated filter on a bright sky: strongest
     behind the menu, gone by 240px (lighter at ≤820px, see Responsive
     tiers). It softens the
     bottom-right corner for the caption and pause button, and lays a light
     floor along the bottom edge. The words carry their own shade
     (.ls-hero__words). Phones show the photo above the words instead
     (≤560px, see Responsive tiers). */
  .ls-hero__scrim {
    position: absolute;
    inset: 0;
    --ls-hero-top: linear-gradient(to bottom, rgba(var(--ls-hero-shade), .7) 0, rgba(var(--ls-hero-shade), .62) 40px, rgba(var(--ls-hero-shade), .44) 80px, rgba(var(--ls-hero-shade), .25) 120px, rgba(var(--ls-hero-shade), .11) 160px, rgba(var(--ls-hero-shade), .03) 200px, rgba(var(--ls-hero-shade), 0) 240px);
    background:
      var(--ls-hero-top),
      radial-gradient(60% 26% at 100% 100%, rgba(var(--ls-hero-shade), .55) 0%, rgba(var(--ls-hero-shade), .5) 40%, rgba(var(--ls-hero-shade), .36) 62%, rgba(var(--ls-hero-shade), .18) 80%, rgba(var(--ls-hero-shade), .05) 93%, rgba(var(--ls-hero-shade), 0) 100%),
      linear-gradient(to top, rgba(var(--ls-hero-shade), .24) 0, rgba(var(--ls-hero-shade), .08) 12%, rgba(var(--ls-hero-shade), 0) 22%);
  }
  .ls-hero__inner {
    position: relative;
    isolation: isolate;   /* the words' shade sits behind all of it, above the photo */
    width: 100%;
    /* Normally the copy sits at the foot of the photo. When it is taller than
       a short screen, the hero grows and this keeps it clear of the header. */
    padding-top: 96px;
    --ls-hero-pad-b: clamp(40px, 7vh, 80px);
    padding-bottom: var(--ls-hero-pad-b);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
  }
  .ls-hero__copy { flex: 1 1 560px; max-width: 840px; }
  /* The words, in a box that hugs them (the column is often wider), and
     their shade. It runs out past the photo's left and bottom edges and fades
     only upward and to the right, over long eased (smoothstep) ramps, like
     burning in a corner, so no edge shows even on a smooth sky. */
  .ls-hero__words {
    position: relative;
    width: fit-content;
    max-width: 100%;
    --ls-hero-ramp-r: clamp(160px, 26vw, 440px);
    --ls-hero-ramp-t: clamp(120px, 26vh, 320px);
    --ls-hero-fade-up: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.104) calc(var(--ls-hero-ramp-t) * .2), rgba(0,0,0,.352) calc(var(--ls-hero-ramp-t) * .4), rgba(0,0,0,.648) calc(var(--ls-hero-ramp-t) * .6), rgba(0,0,0,.896) calc(var(--ls-hero-ramp-t) * .8), #000 var(--ls-hero-ramp-t));
  }
  .ls-hero__words::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(-16px - var(--ls-hero-ramp-t));
    right: calc(-24px - var(--ls-hero-ramp-r));
    bottom: -50vh;
    left: -50vw;
    pointer-events: none;
    background: linear-gradient(to right,
      rgba(var(--ls-hero-shade), .58) calc(100% - var(--ls-hero-ramp-r)),
      rgba(var(--ls-hero-shade), .52) calc(100% - var(--ls-hero-ramp-r) * .8),
      rgba(var(--ls-hero-shade), .376) calc(100% - var(--ls-hero-ramp-r) * .6),
      rgba(var(--ls-hero-shade), .204) calc(100% - var(--ls-hero-ramp-r) * .4),
      rgba(var(--ls-hero-shade), .06) calc(100% - var(--ls-hero-ramp-r) * .2),
      rgba(var(--ls-hero-shade), 0) 100%);
    -webkit-mask-image: var(--ls-hero-fade-up);
            mask-image: var(--ls-hero-fade-up);
  }
  .ls-hero__eyebrow {
    margin-bottom: 22px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--ls-paper);
    text-shadow: var(--ls-photo-text-edge-sm);
  }
  .ls-hero__title {
    margin: 0;
    font: 400 clamp(50px, 7.8vw, 128px)/.97 var(--ls-font-serif);
    letter-spacing: -.015em;
    text-shadow: 0 0 30px rgba(20,16,12,.2);
  }
  .ls-hero__accent { font-style: italic; color: #F0DFC6; }
  .ls-hero__lede {
    margin: 26px 0 0;
    max-width: 580px;
    font: 400 clamp(16px, 1.3vw, 19px)/1.6 var(--ls-font-sans);
    color: var(--ls-paper);
    text-shadow: var(--ls-photo-text-edge);
  }
  .ls-hero__actions { margin-top: 34px; }
  .ls-hero__caption {
    flex: 0 1 auto;
    font: 400 13px/1.4 var(--ls-font-sans);
    color: var(--ls-paper);
    text-shadow: var(--ls-photo-text-edge);
  }

  /* Pause / play for the slideshow (WordPress theme; WCAG 2.2.2). It sits at
     the foot of the hero on the right, centred on the caption line (13px/1.4),
     in the same place whatever the caption's length; the caption makes room.
     The ring is drawn inside a 44px target and lines up with the content edge.
     Hidden when the photos don't move: reduced motion here, and without
     JavaScript by the <noscript> style (inc/assets.php).
     A photo without a caption keeps the line's height, so nothing moves. */
  .ls-hero--slideshow .ls-hero__caption { padding-right: 48px; min-height: 1.4em; }
  .ls-hero__pause {
    position: absolute;
    right: calc(var(--ls-gutter) - 5px);
    bottom: calc(var(--ls-hero-pad-b) - 13px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ls-paper);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    --ls-focus-ring: var(--ls-paper);
    --ls-focus-offset: -3px;
  }
  .ls-hero__pause::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--ls-paper-50);
    border-radius: 50%;
    transition: background .3s, border-color .3s;
  }
  /* Hover fills the ring (its line stays faint, so the timer still shows) */
  .ls-hero__pause:hover::before { background: var(--ls-paper-12); }
  /* The timer: a brighter arc over the ring (r 16.5 in the 44px box) that
     fills clockwise from twelve o'clock while each photo shows; the next one
     fades in as it closes. site.js runs it, and it holds while paused.
     The dash is a little longer than the circle (2π × 16.5 ≈ 103.7) and
     starts pushed off it, so the arc is empty until site.js draws it in. */
  .ls-hero__timer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }
  .ls-hero__timer circle {
    fill: none;
    stroke: var(--ls-paper);
    stroke-width: 1.5;
    stroke-dasharray: 104;
    stroke-dashoffset: 104;
  }
  .ls-hero__pause-icon,
  .ls-hero__play-icon { position: relative; display: block; }
  .ls-hero__play-icon,
  .ls-hero.ls-is-paused .ls-hero__pause-icon { display: none; }
  .ls-hero.ls-is-paused .ls-hero__play-icon { display: block; }
  @media (prefers-reduced-motion: reduce) {
    .ls-hero__pause { display: none; }
    .ls-hero--slideshow .ls-hero__caption { padding-right: 0; }
  }
  /* The primary button on the photograph hovers to bronze */
  .ls-hero .ls-btn--light:hover { background: var(--ls-bronze); color: var(--ls-paper); }
  /* The outline button's edge is a little stronger on the photograph */
  .ls-hero .ls-btn--ghost { border-color: var(--ls-paper-85); text-shadow: var(--ls-photo-text-edge); }
  .ls-hero .ls-btn--ghost:hover { border-color: var(--ls-paper); }

  /* ---- Intro ----------------------------------------------------------- */
  .ls-intro__figure { flex: 0 1 320px; margin: 0; min-width: 220px; }
  .ls-intro__body { flex: 1 1 480px; min-width: 0; max-width: 720px; }
  .ls-intro__title { margin-bottom: clamp(28px, 3vw, 40px); }

  /* ---- Categories ("Pick your moment") --------------------------------- */
  .ls-section-head__note {
    margin: 0;
    max-width: 400px;
    font: 400 15px/1.6 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .ls-cats {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: flex-start;
    gap: clamp(32px, 5vw, 80px);
  }
  .ls-cats__main { flex: 1 1 480px; min-width: 0; }
  .ls-cats__list { border-top: 1px solid var(--ls-rule); }
  .ls-cats__item { border-bottom: 1px solid var(--ls-rule); }
  .ls-cats__link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 24px;
    padding: clamp(18px, 2.4vw, 30px) 0;
    text-decoration: none;
    color: var(--ls-clay);
    transition: color .35s;
    --ls-focus-offset: -2px;
  }
  .ls-cats__link.ls-is-active { color: var(--ls-ink); }
  .ls-cats__link:hover { color: var(--ls-bronze); }
  .ls-cats__title {
    display: flex;
    align-items: baseline;
    gap: 18px;
    min-width: 0;
  }
  .ls-cats__num {
    font: 500 12px/1 var(--ls-font-sans);
    letter-spacing: .1em;
    color: var(--ls-text-accent);
  }
  .ls-cats__name {
    font: 400 clamp(32px, 4.4vw, 64px)/1.05 var(--ls-font-serif);
    letter-spacing: -.01em;
  }
  .ls-cats__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font: 400 14px/1.4 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .ls-cats__price { color: var(--ls-text-accent); }
  .ls-cats__footer { margin-top: clamp(28px, 4vw, 48px); }
  .ls-cats__quote { flex: 1 1 300px; max-width: 480px; }
  .ls-cats__preview {
    flex: 1 1 320px;
    max-width: 520px;
    position: sticky;
    top: 96px;
  }
  .ls-cats__stage { position: relative; }
  .ls-cats__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .7s ease, transform 1.4s var(--ls-ease);
  }
  .ls-cats__img.ls-is-active { opacity: 1; transform: scale(1); }

  /* ---- Experience (steps) ---------------------------------------------- */
  .ls-exp__aside { flex: 1 1 320px; min-width: 0; max-width: 440px; }
  .ls-exp__main { flex: 1 1 520px; min-width: 0; }
  .ls-steps { display: flex; flex-direction: column; }
  .ls-step {
    display: grid;
    grid-template-columns: clamp(52px, 6vw, 96px) minmax(0, 1fr);
    gap: 0 clamp(16px, 3vw, 40px);
    padding: clamp(26px, 3vw, 40px) 0;
    border-top: 1px solid var(--ls-paper-14);
  }
  .ls-step:last-child { border-bottom: 1px solid var(--ls-paper-14); }
  .ls-step__num {
    padding-top: 6px;
    font: 400 clamp(26px, 2.6vw, 40px)/1 var(--ls-font-serif);
    color: var(--ls-text-accent);
  }
  .ls-step__body { min-width: 0; max-width: 580px; }
  .ls-step__title {
    margin: 0;
    font: 400 clamp(24px, 2.4vw, 34px)/1.15 var(--ls-font-serif);
    color: var(--ls-text-strong);
  }
  .ls-step__text {
    margin: 12px 0 0;
    font: 400 16px/1.7 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .ls-exp__closing {
    margin: clamp(28px, 3vw, 40px) 0 0;
    max-width: 640px;
    font: italic 400 clamp(20px, 1.8vw, 26px)/1.4 var(--ls-font-serif);
    color: var(--ls-text-strong);
  }

  /* ---- Portfolio mosaic ------------------------------------------------ */
  .ls-portfolio__heading { max-width: 760px; }
  .ls-mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: clamp(150px, 18vw, 220px);
    grid-auto-flow: dense;
    gap: clamp(10px, 1.4vw, 18px);
  }
  .ls-mosaic__item { min-width: 0; }
  .ls-mosaic__item--small { grid-column: span 1; grid-row: span 1; }
  .ls-mosaic__item--tall { grid-column: span 1; grid-row: span 2; }
  .ls-mosaic__item--wide { grid-column: span 2; grid-row: span 1; }
  .ls-mosaic__item--big { grid-column: span 2; grid-row: span 2; }
  .ls-mosaic__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: var(--ls-paper);
    text-decoration: none;
    --ls-focus-offset: 3px;
  }
  .ls-mosaic__label {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 6px 10px;
    background: var(--ls-ink-62);
    -webkit-backdrop-filter: blur(6px);  /* Safari < 18 */
    backdrop-filter: blur(6px);
    font: 400 12px/1.3 var(--ls-font-sans);
    letter-spacing: .02em;
  }
  .ls-portfolio__footer { margin-top: var(--ls-space-block); }
  .ls-portfolio__quote { flex: 1 1 320px; max-width: 640px; }

  /* ---- Kind words (testimonials) ----------------------------------------- */
  .ls-kind__figure { flex: 1 1 360px; min-width: 0; max-width: 520px; margin: 0; }
  .ls-kind__body { flex: 1 1 440px; min-width: 0; max-width: 680px; }
  .ls-testimonial {
    margin: 0;
    padding-left: 22px;
    border-left: 1px solid var(--ls-text-accent);
  }
  .ls-testimonial__text {
    margin: 0;
    font: 400 clamp(20px, 1.9vw, 27px)/1.4 var(--ls-font-serif);
    color: var(--ls-text-quote);
  }
  .ls-testimonial__cite {
    margin-top: 22px;
    font: 400 15px/1.5 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .ls-testimonial__name { display: block; font-weight: 500; color: var(--ls-text-strong); }
  .ls-kind__more { padding-block: clamp(64px, 8vw, 110px); }
  .ls-quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1px;                              /* the 1px gaps draw the grid lines */
    background: var(--ls-paper-16);
    border: 1px solid var(--ls-paper-16);
  }
  .ls-quote-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(28px, 3vw, 40px);
    background: var(--ls-ink);
  }
  .ls-quote-card__mark {
    display: block;
    font: 400 64px/.6 var(--ls-font-serif);
    color: var(--ls-text-accent);
  }
  .ls-quote-card__text {
    margin: 0;
    font: 400 clamp(18px, 1.4vw, 21px)/1.5 var(--ls-font-serif);
    color: var(--ls-text-strong);
  }
  .ls-quote-card__meta {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--ls-paper-16);
    font: 400 14px/1.5 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .ls-quote-card__who {
    display: block;
    font: 500 14px/1.4 var(--ls-font-sans);
    color: var(--ls-text-strong);
  }
  .ls-kind__outro { margin-top: clamp(40px, 5vw, 64px); }
  .ls-kind__closing {
    margin: 0;
    max-width: 520px;
    font: 400 clamp(22px, 2.2vw, 30px)/1.3 var(--ls-font-serif);
    color: var(--ls-text-strong);
  }

  /* ---- Destinations ------------------------------------------------------ */
  .ls-dest__aside { flex: 1 1 340px; min-width: 0; max-width: 520px; }
  .ls-places {
    flex: 1 1 440px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: clamp(14px, 2vw, 28px);
  }
  /* Staggered columns */
  .ls-places__item:nth-child(even) { margin-top: clamp(0px, 4vw, 56px); }
  .ls-places__caption {
    margin: 10px 0 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font: 400 13px/1.4 var(--ls-font-sans);
    color: var(--ls-text-muted);
  }
  .ls-places__name {
    font: 400 19px/1.2 var(--ls-font-serif);
    color: var(--ls-text-strong);
  }

  /* ---- About ------------------------------------------------------------- */
  .ls-about__figure { flex: 1 1 420px; min-width: 0; margin: 0; }
  .ls-about__body { flex: 1 1 420px; min-width: 0; max-width: 600px; }
  .ls-facts {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ls-rule);
  }
  .ls-facts > li {
    padding: 14px 0;
    border-bottom: 1px solid var(--ls-rule);
    font: 400 16px/1.55 var(--ls-font-sans);
  }
  /* Editorial placeholder ("content needed") */
  .ls-note {
    margin: 22px 0 0;
    padding: 14px 16px;
    border: 1px dashed var(--ls-ink-40);
    font: 400 13px/1.5 var(--ls-font-mono);
    color: var(--ls-text-body);
  }

  /* ---- Contact & inquiry form -------------------------------------------- */
  .ls-contact__intro { flex: 1 1 380px; min-width: 0; max-width: 560px; }
  .ls-contact__details {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font: 400 15px/1.6 var(--ls-font-sans);
    color: var(--ls-text-muted);
  }
  .ls-contact__form { flex: 1 1 420px; min-width: 0; max-width: 640px; }
  .ls-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 22px 20px;
  }
  .ls-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: 500 13px/1 var(--ls-font-sans);
  }
  .ls-input,
  .ls-textarea {
    border: 1px solid var(--ls-ink-30);
    border-radius: var(--ls-radius);
    background: var(--ls-field-bg, var(--ls-white));   /* see .ls-form--card */
    color: var(--ls-ink);
  }
  .ls-input { min-height: 52px; padding: 0 14px; font: 400 16px var(--ls-font-sans); }
  .ls-textarea { padding: 14px; font: 400 16px/1.5 var(--ls-font-sans); resize: vertical; }
  .ls-input:focus,
  .ls-textarea:focus {
    outline: 2px solid var(--ls-bronze);
    outline-offset: 2px;
    border-color: var(--ls-bronze);
  }
  .ls-check {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    font: 500 15px/1.3 var(--ls-font-sans);
    cursor: pointer;
  }
  .ls-check__box {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--ls-bronze);
    cursor: pointer;
  }
  .ls-form__note {
    font: 400 14px/1.5 var(--ls-font-sans);
    color: var(--ls-text-muted);
  }
  .ls-status {
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid var(--ls-ink-20);
    background: var(--ls-white);
  }
  .ls-status__title {
    margin: 0;
    font: 400 clamp(26px, 2.6vw, 36px)/1.2 var(--ls-font-serif);
  }
  .ls-status__text {
    margin: 14px 0 0;
    font: 400 16px/1.65 var(--ls-font-sans);
    color: var(--ls-text-body);
  }

  /* ==== Inner pages (About, Portfolio, Blog, Investment, Contact) ========= */

  /* ---- Page hero: the opening section of each inner page ---------------- */
  .ls-page-hero { padding-top: clamp(112px, 15vh, 168px); }
  /* Heading on one side, lede on the other */
  .ls-page-hero__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 64px;
  }
  .ls-page-hero__copy { flex: 1 1 520px; min-width: 0; max-width: 900px; }
  .ls-page-hero__eyebrow { margin-bottom: 24px; line-height: 1.5; }
  .ls-page-hero__title {
    margin: 0;
    font: 400 clamp(52px, 8vw, 128px)/.95 var(--ls-font-serif);
    letter-spacing: -.02em;
    color: var(--ls-text-strong);
  }
  .ls-page-hero__lede {
    flex: 0 1 380px;
    margin: 0;
    font: 400 clamp(16px, 1.2vw, 18px)/1.65 var(--ls-font-sans);
    color: var(--ls-text-body);
  }

  /* ---- Closer: the "Let's chat" section at the foot of inner pages ------- */
  .ls-closer__main { flex: 1 1 440px; min-width: 0; max-width: 760px; }
  .ls-closer__lede { max-width: 560px; }
  .ls-closer__actions { margin-top: 34px; }
  .ls-closer__aside { flex: 1 1 300px; min-width: 0; max-width: 440px; margin: 0; padding-top: 12px; }
  .ls-closer__mark {
    display: block;
    font: 400 72px/.6 var(--ls-font-serif);
    color: var(--ls-bronze);
  }
  .ls-closer__text {
    margin: 0;
    font: 400 clamp(20px, 1.8vw, 26px)/1.4 var(--ls-font-serif);
    color: var(--ls-text-strong);
  }
  .ls-closer__mark + .ls-closer__text { margin-top: 22px; }
  .ls-closer__cite {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ls-rule);
    font: 400 14px/1.5 var(--ls-font-sans);
    color: var(--ls-text-muted);
  }
  .ls-closer__name { display: block; font-weight: 500; color: var(--ls-text-strong); }
  /* "Follow along" column in place of a testimonial */
  .ls-closer__follow { display: flex; flex-direction: column; gap: 14px; }

  /* ---- About: hero -------------------------------------------------------- */
  .ls-page-hero--about { padding-bottom: clamp(64px, 8vw, 110px); }
  .ls-bio__copy { flex: 1 1 460px; min-width: 0; max-width: 660px; }
  .ls-bio__lede { margin-top: clamp(24px, 3vw, 40px); max-width: 560px; }
  .ls-bio__actions { margin-top: 34px; }
  /* Portrait with a smaller photo overlapping its lower-left corner */
  .ls-collage {
    position: relative;
    flex: 1 1 340px;
    min-width: 0;
    max-width: 480px;
    padding-left: clamp(56px, 10%, 88px);
    padding-bottom: clamp(56px, 8vw, 104px);
  }
  .ls-collage__main { margin: 0; }
  .ls-collage__caption { padding-left: clamp(120px, 40%, 200px); text-align: right; }
  .ls-collage__inset {
    position: absolute;
    left: 0;
    bottom: 0;
    width: clamp(150px, 44%, 220px);
    margin: 0;
    box-shadow: 0 30px 60px -30px var(--ls-ink-45);
  }
  .ls-collage__inset-frame { border: 6px solid var(--ls-paper); }
  .ls-collage__inset-caption { margin-top: 10px; padding: 0 6px 6px; font-size: 15px; line-height: 1.3; }

  /* ---- About: my story ---------------------------------------------------- */
  .ls-story__figure { margin: 0; }
  .ls-story__split { margin-top: clamp(56px, 7vw, 100px); }
  .ls-story__head { flex: 1 1 320px; min-width: 0; max-width: 520px; }
  .ls-story__body { flex: 1 1 440px; min-width: 0; max-width: 640px; }
  .ls-story__signature { font-size: 40px; }

  /* ---- About: what sets me apart ----------------------------------------- */
  .ls-apart__aside { flex: 1 1 320px; min-width: 0; max-width: 460px; }
  .ls-apart__body { flex: 1 1 480px; min-width: 0; max-width: 680px; gap: 22px; }
  .ls-apart__lead {
    font: 400 clamp(22px, 2vw, 28px)/1.35 var(--ls-font-serif);
    color: var(--ls-text-strong);
  }

  /* ---- About: on the shoot ------------------------------------------------ */
  .ls-shoot__main { flex: 1 1 520px; min-width: 0; }
  .ls-shoot__title { margin-bottom: clamp(36px, 4vw, 56px); max-width: 760px; }
  .ls-shoot__steps .ls-step__body { max-width: 600px; }
  .ls-shoot__closing { margin-top: clamp(28px, 3vw, 40px); max-width: 640px; }
  /* Sticks at every width (the other asides only stick on wide screens) */
  .ls-shoot__figure {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 460px;
    margin: 0;
    position: sticky;
    top: 100px;
  }

  /* ---- About: real, raw, true --------------------------------------------- */
  .ls-values { padding-bottom: clamp(64px, 8vw, 110px); }
  .ls-values__title { font-size: clamp(48px, 7vw, 112px); line-height: .95; letter-spacing: -.02em; }
  .ls-values__figure { flex: 1 1 320px; min-width: 0; max-width: 480px; margin: 0; }
  .ls-values__body {
    flex: 1 1 480px;
    min-width: 0;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ls-rule);
  }
  .ls-values__row {
    display: grid;
    grid-template-columns: clamp(72px, 9vw, 140px) minmax(0, 1fr);
    gap: 0 clamp(16px, 3vw, 40px);
    padding: clamp(24px, 3vw, 36px) 0;
    border-bottom: 1px solid var(--ls-rule);
  }
  .ls-values__word { margin: 0; font: 400 clamp(28px, 2.8vw, 40px)/1 var(--ls-font-serif); }
  .ls-values__text { margin: 0; font: 400 16px/1.7 var(--ls-font-sans); color: var(--ls-text-body); }
  .ls-values__actions { margin-top: clamp(28px, 3vw, 40px); }

  /* ---- About: every season ------------------------------------------------ */
  .ls-seasons { padding: clamp(24px, 4vw, 48px) 0 var(--ls-section-lg); }
  .ls-seasons__heading { max-width: 720px; }
  .ls-seasons__title { font-size: clamp(36px, 4.6vw, 68px); }
  .ls-seasons__footer { margin-top: clamp(28px, 4vw, 48px); }
  /* Three photos across the full width of the page */
  .ls-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, 1vw, 14px);
    height: clamp(220px, 42vw, 620px);
    padding-inline: clamp(6px, 1vw, 14px);
  }
  .ls-strip__item { min-width: 0; }

  /* ---- Portfolio ------------------------------------------------------------ */
  .ls-page-hero--portfolio { padding-bottom: clamp(40px, 5vw, 64px); }
  /* Filter bar that sticks under the header */
  .ls-filters {
    position: sticky;
    top: 80px;
    z-index: 40;
    background: var(--ls-paper-94);
    -webkit-backdrop-filter: blur(12px);  /* Safari < 18 */
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--ls-ink-12);
    border-bottom: 1px solid var(--ls-ink-12);
  }
  .ls-filters__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-block: 14px;
  }
  .ls-filters__group { display: flex; flex-wrap: wrap; gap: 8px; }
  .ls-filter {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ls-ink-30);
    border-radius: var(--ls-radius);
    background: transparent;
    color: var(--ls-ink);
    font: 500 13px var(--ls-font-sans);
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s;
    --ls-focus-offset: 3px;
  }
  .ls-filter:hover { border-color: var(--ls-ink); }
  .ls-filter.ls-is-active { background: var(--ls-ink); color: var(--ls-paper); border-color: var(--ls-ink); }
  .ls-filters__count { margin: 0; font: italic 400 17px/1 var(--ls-font-serif); color: var(--ls-text-muted); }
  /* Gallery grid */
  .ls-galleries { padding: clamp(40px, 5vw, 72px) 0 var(--ls-section-md); }
  .ls-galleries__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    grid-auto-flow: dense;
    gap: clamp(32px, 4vw, 56px) clamp(14px, 2vw, 28px);
  }
  .ls-gallery { min-width: 0; }
  .ls-gallery__link { display: block; color: var(--ls-ink); text-decoration: none; }
  .ls-gallery__link:hover { color: var(--ls-bronze); }
  .ls-gallery__frame { aspect-ratio: 4 / 5; }
  /* Featured galleries (the featuredTiles prop) span two columns on wide screens */
  @media (min-width: 1100px) {
    .ls-gallery--featured { grid-column: span 2; }
    .ls-gallery--featured .ls-gallery__frame { aspect-ratio: 5 / 3; }
  }
  .ls-gallery__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ls-rule);
  }
  .ls-gallery__title { margin: 0; font: 400 clamp(22px, 1.8vw, 28px)/1.15 var(--ls-font-serif); color: inherit; }
  .ls-gallery__place { font: 400 13px/1.5 var(--ls-font-sans); color: var(--ls-text-muted); }

  /* ---- Blog ------------------------------------------------------------------ */
  /* "On this page" bar under the masthead */
  .ls-toc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    margin-top: clamp(36px, 5vw, 64px);
    padding: 16px 0;
    border-top: 1px solid var(--ls-rule);
    border-bottom: 1px solid var(--ls-rule);
    font: 500 13px/1 var(--ls-font-sans);
  }
  .ls-toc__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
  .ls-toc__link { padding: 10px 0; text-decoration: none; }
  .ls-toc__link:hover { color: var(--ls-bronze); }
  .ls-toc__meta { font: italic 400 16px/1 var(--ls-font-serif); color: var(--ls-text-muted); }
  /* Featured (latest) story */
  .ls-feature { padding-top: clamp(48px, 6vw, 88px); }
  .ls-feature__media { flex: 1 1 560px; min-width: 0; display: block; }
  .ls-feature__body { flex: 1 1 360px; min-width: 0; max-width: 520px; }
  .ls-feature__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 0;
    line-height: 1.5;
  }
  .ls-feature__rule { width: 28px; height: 1px; background: currentColor; align-self: center; }
  .ls-feature__title { margin-top: 20px; font-size: clamp(36px, 4vw, 60px); line-height: 1.02; }
  .ls-feature__title-link { color: inherit; text-decoration: none; }
  .ls-feature__title-link:hover { color: var(--ls-bronze); }
  .ls-feature__text { margin-top: 20px; }
  .ls-feature__date { margin-top: 22px; }
  /* Recent stories */
  .ls-recent { padding: clamp(72px, 9vw, 128px) 0 var(--ls-section-md); }
  .ls-post { min-width: 0; }
  /* The middle card drops down on wide screens (the staggerCards prop) */
  @media (min-width: 1100px) {
    .ls-post--stagger { margin-top: clamp(0px, 5vw, 64px); }
  }
  .ls-post__link { display: flex; flex-direction: column; color: var(--ls-ink); text-decoration: none; }
  .ls-post__link:hover { color: var(--ls-bronze); }
  .ls-post__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--ls-rule);
    font: 500 12px/1.5 var(--ls-font-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ls-text-accent);
  }
  .ls-post__date {
    font: italic 400 15px/1.3 var(--ls-font-serif);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ls-text-muted);
  }
  .ls-post__title { margin: 12px 0 0; font: 400 clamp(24px, 2vw, 30px)/1.15 var(--ls-font-serif); color: inherit; }
  .ls-post__excerpt { margin: 12px 0 0; font: 400 15px/1.65 var(--ls-font-sans); color: var(--ls-text-body); }
  /* Planning advice (numbered list of links) */
  .ls-advice__list {
    flex: 1 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ls-rule);
  }
  .ls-advice__item { border-bottom: 1px solid var(--ls-rule); }
  .ls-advice__link {
    display: grid;
    grid-template-columns: clamp(44px, 5vw, 80px) minmax(0, 1fr) auto;
    gap: 0 clamp(16px, 3vw, 40px);
    align-items: start;
    padding: clamp(26px, 3vw, 40px) 0;
    color: var(--ls-text-strong);
    text-decoration: none;
    --ls-focus-offset: -2px;
  }
  .ls-advice__link:hover { color: var(--ls-text-accent); }
  .ls-advice__num {
    padding-top: 6px;
    font: 400 clamp(26px, 2.6vw, 40px)/1 var(--ls-font-serif);
    color: var(--ls-text-accent);
  }
  .ls-advice__body { min-width: 0; max-width: 600px; display: flex; flex-direction: column; gap: 10px; }
  .ls-advice__title { font: 400 clamp(24px, 2.4vw, 34px)/1.15 var(--ls-font-serif); color: inherit; }
  .ls-advice__excerpt { font: 400 16px/1.7 var(--ls-font-sans); color: var(--ls-text-body); }
  .ls-advice__date { font: italic 400 15px/1.3 var(--ls-font-serif); color: var(--ls-text-muted); }
  .ls-advice__thumb { width: clamp(72px, 8vw, 120px); }
  /* From the archive (rows of links) */
  .ls-archive__list { border-top: 1px solid var(--ls-rule); }
  .ls-archive__item { border-bottom: 1px solid var(--ls-rule); }
  .ls-archive__link {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) auto;
    gap: 0 clamp(16px, 3vw, 40px);
    align-items: center;
    padding: clamp(18px, 2.4vw, 28px) 0;
    color: var(--ls-ink);
    text-decoration: none;
    --ls-focus-offset: -2px;
  }
  .ls-archive__link:hover { color: var(--ls-bronze); }
  .ls-archive__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font: 400 13px/1.4 var(--ls-font-sans);
    color: var(--ls-text-muted);
  }
  .ls-archive__kind {
    font: 500 12px/1 var(--ls-font-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ls-text-accent);
  }
  .ls-archive__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .ls-archive__title { font: 400 clamp(22px, 2.2vw, 32px)/1.15 var(--ls-font-serif); color: inherit; }
  .ls-archive__excerpt { font: 400 15px/1.6 var(--ls-font-sans); color: var(--ls-text-body); }
  .ls-archive__thumb { width: clamp(64px, 7vw, 104px); }
  .ls-archive__footer { margin-top: clamp(32px, 4vw, 48px); }
  .ls-archive__more { font-size: 17px; }

  /* ---- Investment -------------------------------------------------------------- */
  .ls-page-hero--investment { padding-bottom: clamp(56px, 7vw, 96px); }
  /* "From" prices for the three kinds of booking */
  .ls-prices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    margin-top: clamp(40px, 5vw, 72px);
    border-top: 1px solid var(--ls-rule);
    border-bottom: 1px solid var(--ls-rule);
  }
  .ls-prices__item {
    padding: clamp(22px, 2.6vw, 36px) clamp(0px, 2vw, 32px);
    border-right: 1px solid var(--ls-rule);
  }
  .ls-prices__item:first-child { padding-left: 0; }
  .ls-prices__item:last-child { padding-right: 0; border-right: 0; }
  .ls-prices__link { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
  .ls-prices__link:hover { color: var(--ls-bronze); }
  .ls-prices__amount { font: 400 clamp(34px, 3.4vw, 52px)/1 var(--ls-font-serif); }
  .ls-prices__from { margin-right: 8px; font: italic 400 .55em/1 var(--ls-font-serif); color: var(--ls-text-muted); }
  .ls-prices__note { font: 400 14px/1.5 var(--ls-font-sans); color: var(--ls-text-muted); }
  /* Text + photo sections (weddings, elopements) */
  .ls-weddings { padding: clamp(40px, 5vw, 72px) 0 var(--ls-section-md); }
  .ls-offer__body { flex: 1 1 400px; min-width: 0; max-width: 560px; }
  .ls-offer__title { font-size: clamp(44px, 5.6vw, 84px); line-height: .98; }
  .ls-offer__actions { margin-top: 34px; }
  .ls-offer__figure { flex: 1 1 380px; min-width: 0; max-width: 560px; margin: 0; }
  .ls-offer__price { margin: 0; display: flex; align-items: baseline; gap: 14px; }
  .ls-offer__price-label { color: var(--ls-text-muted); }
  .ls-offer__price-amount { font: 400 clamp(36px, 3.4vw, 48px)/1 var(--ls-font-serif); }
  /* Accordion (what to expect, collections) */
  .ls-accordion { border-top: 1px solid var(--ls-ink); }
  .ls-accordion__item { border-bottom: 1px solid var(--ls-ink); }
  .ls-accordion__trigger,
  .ls-accordion__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    color: var(--ls-ink);
    font: 500 13px/1 var(--ls-font-sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    --ls-focus-offset: -2px;
  }
  .ls-accordion__trigger {
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
  }
  /* A row that looks like a trigger but jumps elsewhere on the page */
  .ls-accordion__link { border-bottom: 1px solid var(--ls-ink); text-decoration: none; }
  .ls-accordion__trigger:hover,
  .ls-accordion__link:hover { color: var(--ls-bronze); }
  .ls-accordion__label { display: flex; align-items: center; gap: 18px; }
  .ls-accordion__glyph { width: 22px; font: 400 26px/1 var(--ls-font-serif); color: var(--ls-bronze); }
  .ls-accordion__glyph--arrow { font-size: 22px; }
  .ls-accordion__panel { padding: 0 0 26px 40px; }
  .ls-accordion__panel--text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font: 400 16px/1.7 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .ls-accordion__panel--text > p { margin: 0; }
  /* Price list inside the collections panel */
  .ls-rates { display: flex; flex-direction: column; }
  .ls-rates__item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 24px;
    padding: 12px 0;
    border-top: 1px solid var(--ls-ink-14);
    font: 400 16px/1.5 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .ls-rates__price { font: 400 22px/1 var(--ls-font-serif); color: var(--ls-text-strong); }
  .ls-rates__ask { font: italic 400 17px/1.3 var(--ls-font-serif); color: var(--ls-text-muted); }
  .ls-rates__note { margin: 16px 0 0; font: 400 15px/1.6 var(--ls-font-sans); color: var(--ls-text-muted); }
  /* Sample timeline */
  .ls-timeline__heading { max-width: 760px; }
  .ls-timeline {
    --ls-timeline-pad: clamp(16px, 2.4vw, 36px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: clamp(40px, 5vw, 64px) 0;
  }
  .ls-timeline__item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-right: var(--ls-timeline-pad);
  }
  .ls-timeline__frame { width: clamp(120px, 60%, 168px); }
  .ls-timeline__time { margin: 18px 0 0; }
  /* The line runs across the item's right padding, so it joins up with the next one */
  .ls-timeline__track {
    position: relative;
    margin-top: 14px;
    margin-right: calc(-1 * var(--ls-timeline-pad));
    padding-top: 20px;
    border-top: 1px solid var(--ls-ink);
  }
  .ls-timeline__dot {
    position: absolute;
    top: -4px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ls-ink);
  }
  .ls-timeline__title {
    margin: 0;
    padding-right: var(--ls-timeline-pad);
    font: 400 clamp(24px, 2vw, 30px)/1.15 var(--ls-font-serif);
  }
  .ls-timeline__text {
    margin: 12px 0 0;
    padding-right: var(--ls-timeline-pad);
    font: 400 15px/1.65 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .ls-timeline__footer { margin-top: clamp(40px, 5vw, 64px); }
  .ls-timeline__quote { flex: 1 1 320px; max-width: 560px; }
  /* Included in every wedding */
  .ls-included__main { flex: 1 1 480px; min-width: 0; }
  .ls-included__title { margin-bottom: clamp(32px, 4vw, 48px); }
  .ls-included__list { display: flex; flex-direction: column; border-top: 1px solid var(--ls-rule); }
  .ls-included__item {
    display: grid;
    grid-template-columns: clamp(40px, 4vw, 64px) minmax(0, 1fr);
    gap: 0 clamp(12px, 2vw, 28px);
    padding: clamp(20px, 2.4vw, 30px) 0;
    border-bottom: 1px solid var(--ls-rule);
  }
  .ls-included__num {
    padding-top: 4px;
    font: 400 clamp(20px, 1.8vw, 26px)/1 var(--ls-font-serif);
    color: var(--ls-text-accent);
  }
  .ls-included__body { min-width: 0; max-width: 600px; }
  .ls-included__heading {
    margin: 0;
    font: 400 clamp(22px, 2vw, 30px)/1.15 var(--ls-font-serif);
    color: var(--ls-text-strong);
  }
  .ls-included__text { margin: 8px 0 0; font: 400 15px/1.65 var(--ls-font-sans); color: var(--ls-text-body); }
  /* Elopement checklist */
  .ls-checklist { margin-top: 14px; border-top: 1px solid var(--ls-ink); }
  .ls-checklist__item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ls-ink-20);
    font: 400 16px/1.5 var(--ls-font-sans);
    color: var(--ls-ink);
  }
  .ls-checklist__icon { flex: none; }
  /* Sessions */
  .ls-sessions__head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }
  .ls-sessions__lede {
    margin: 22px auto 0;
    max-width: 560px;
    font: 400 16px/1.65 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .ls-session { min-width: 0; display: flex; flex-direction: column; }
  .ls-session__title { margin: 22px 0 0; font: 400 clamp(28px, 2.6vw, 38px)/1.1 var(--ls-font-serif); }
  .ls-session__text { margin: 12px 0 0; font: 400 15px/1.65 var(--ls-font-sans); color: var(--ls-text-body); }
  .ls-session__points { margin-top: 18px; display: flex; flex-direction: column; border-top: 1px solid var(--ls-rule); }
  .ls-session__point {
    padding: 10px 0;
    border-bottom: 1px solid var(--ls-rule);
    font: 400 14px/1.5 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .ls-session__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin-top: auto;
    padding-top: 24px;
  }
  .ls-session__price { font: 400 30px/1 var(--ls-font-serif); }
  .ls-session__from { margin-right: 8px; font: italic 400 17px/1 var(--ls-font-serif); color: var(--ls-text-muted); }
  .ls-session__cta { padding: 0 22px; }
  /* Good to know (definition list) */
  .ls-practical {
    flex: 1 1 480px;
    min-width: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ls-rule);
  }
  .ls-practical__row {
    display: grid;
    grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
    gap: 0 clamp(16px, 3vw, 40px);
    padding: clamp(20px, 2.4vw, 28px) 0;
    border-bottom: 1px solid var(--ls-rule);
  }
  .ls-practical__term { font: 400 clamp(22px, 2vw, 28px)/1.15 var(--ls-font-serif); }
  .ls-practical__desc { margin: 0; font: 400 16px/1.65 var(--ls-font-sans); color: var(--ls-text-body); }
  .ls-practical__note { display: inline-block; margin: 0; padding: 12px 14px; }

  /* ---- Contact ------------------------------------------------------------------ */
  .ls-page-hero--contact { padding-bottom: var(--ls-section-md); }
  /* Intro and form, under the page title */
  .ls-inquiry { margin-top: clamp(40px, 5vw, 72px); }
  .ls-inquiry__intro { flex: 1 1 360px; min-width: 0; max-width: 520px; display: flex; flex-direction: column; }
  .ls-inquiry__form { flex: 1 1 440px; min-width: 0; max-width: 680px; scroll-margin-top: 100px; }
  /* What happens next */
  .ls-next { margin-top: 16px; display: flex; flex-direction: column; border-top: 1px solid var(--ls-rule); }
  .ls-next__item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ls-rule);
  }
  .ls-next__num { padding-top: 3px; font: 400 24px/1 var(--ls-font-serif); color: var(--ls-text-accent); }
  .ls-next__title { margin: 0; font: 400 24px/1.15 var(--ls-font-serif); }
  .ls-next__text { margin: 6px 0 0; font: 400 15px/1.6 var(--ls-font-sans); color: var(--ls-text-body); }
  /* The form as a white card; its fields switch to paper so they still stand out */
  .ls-form--card {
    padding: clamp(24px, 3vw, 40px);
    background: var(--ls-white);
    border: 1px solid var(--ls-ink-14);
    --ls-field-bg: var(--ls-paper);
  }
  .ls-status--lg { border-color: var(--ls-ink-14); }
  .ls-status--lg .ls-status__title { font-size: clamp(30px, 3vw, 44px); line-height: 1.15; }
  .ls-status--lg .ls-status__text { margin-top: 16px; font-size: 17px; }
  /* While you wait */
  .ls-wait__body { flex: 1 1 440px; min-width: 0; max-width: 640px; }
  .ls-wait__links { margin-top: 32px; border-top: 1px solid var(--ls-rule); }
  .ls-wait__item { border-bottom: 1px solid var(--ls-rule); }
  .ls-wait__link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 24px;
    padding: 22px 0;
    color: var(--ls-text-strong);
    text-decoration: none;
    --ls-focus-offset: -2px;
  }
  .ls-wait__link:hover { color: var(--ls-text-accent); }
  .ls-wait__title { font: 400 clamp(24px, 2.4vw, 34px)/1.15 var(--ls-font-serif); }
  .ls-wait__note { font: 400 15px/1.5 var(--ls-font-sans); color: var(--ls-text-body); }
  .ls-wait__closing {
    margin: 32px 0 0;
    max-width: 520px;
    font: 400 clamp(20px, 2vw, 26px)/1.35 var(--ls-font-serif);
    color: var(--ls-text-strong);
  }
  /* Quick answers (one open at a time) */
  .ls-faq { flex: 1 1 480px; min-width: 0; border-top: 1px solid var(--ls-ink); }
  .ls-faq__item { border-bottom: 1px solid var(--ls-ink); }
  .ls-faq__trigger {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    padding: clamp(18px, 2.2vw, 26px) 0;
    background: transparent;
    border: 0;
    color: var(--ls-ink);
    font: 400 clamp(22px, 2vw, 30px)/1.2 var(--ls-font-serif);
    text-align: left;
    cursor: pointer;
    --ls-focus-offset: -2px;
  }
  .ls-faq__trigger:hover { color: var(--ls-bronze); }
  .ls-faq__glyph {
    flex: none;
    width: 24px;
    padding-top: 2px;
    font: 400 28px/1 var(--ls-font-serif);
    color: var(--ls-bronze);
  }
  .ls-faq__panel {
    max-width: 620px;
    padding: 0 0 26px 42px;
    font: 400 16px/1.7 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .ls-faq__answer { margin: 0; }
  .ls-faq__link { display: inline-block; margin-top: 12px; }

  /* ---- Footer ------------------------------------------------------------ */
  .ls-footer {
    padding: clamp(48px, 6vw, 80px) 0 36px;
    background: var(--ls-ink);
    color: var(--ls-stone);
    --ls-text-accent: var(--ls-mist);
  }
  .ls-footer__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px 48px;
  }
  .ls-footer__brand {
    flex: 1 1 280px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .ls-footer__logo { height: 56px; align-self: flex-start; object-fit: contain; }
  .ls-footer__blurb { margin: 0; font: 400 15px/1.65 var(--ls-font-sans); }
  .ls-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 64px;
  }
  .ls-footer__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font: 400 15px/1.3 var(--ls-font-sans);
  }
  .ls-footer__heading { margin-bottom: 6px; }
  .ls-footer__link { color: var(--ls-paper); text-decoration: none; }
  .ls-footer__link:hover { color: var(--ls-stone); }
  .ls-footer__bar {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--ls-paper-14);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    font: 400 13px/1.5 var(--ls-font-sans);
    color: var(--ls-mist);
  }
  /* The privacy policy link at the end of the copyright line */
  .ls-footer__bar a { color: var(--ls-paper); text-decoration: underline; text-underline-offset: 3px; }
  .ls-footer__bar a:hover { color: var(--ls-stone); }
  .ls-footer__bar a:focus-visible {
    outline: 2px solid var(--ls-focus-ring);
    outline-offset: 2px;
  }

  /* ==== WordPress pages ================================================== */
  /* Everything below exists only in the WordPress theme: the inquiry form's
     server states, single posts and galleries, plain text pages, archives,
     search and pagination. Built from the same tokens and type scale. */

  /* ---- Inquiry form: plumbing and states -------------------------------- */
  /* The phone + call-time pair stays two grid cells of the form, as before */
  .kpp-call-fields { display: contents; }
  /* Honeypot: off-screen, out of the grid */
  .kpp-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .ls-form { position: relative; }
  .ls-form__error {
    margin: 0;
    padding: 12px 16px;
    border-left: 2px solid #9B3B2A;
    background: rgba(155,59,42,.07);
    font: 400 15px/1.5 var(--ls-font-sans);
    color: var(--ls-ink);
  }
  .ls-btn[aria-busy="true"] { opacity: .7; cursor: progress; }

  /* ---- Newsletter sign-up (top of the footer) ---------------------------- */
  /* Markup in inc/newsletter.php, following Lucid Sendy Connect's contract.
     Paper fields and a paper button on the ink footer; focus rings in paper. */
  .kpp-signup {
    margin-bottom: clamp(40px, 5vw, 64px);
    --ls-field-bg: var(--ls-paper);
    --ls-focus-ring: var(--ls-paper);
  }
  .kpp-signup__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px 48px;
    padding-bottom: clamp(40px, 5vw, 64px);
    border-bottom: 1px solid var(--ls-paper-14);
  }
  .kpp-signup__intro { flex: 1 1 300px; max-width: 480px; }
  .kpp-signup__title {
    margin: 0;
    font: 400 clamp(28px, 2.6vw, 36px)/1.15 var(--ls-font-serif);
    color: var(--ls-paper);
  }
  .kpp-signup__text { margin: 10px 0 0; font: 400 15px/1.65 var(--ls-font-sans); color: var(--ls-stone); }
  .kpp-signup__body { flex: 1 1 380px; min-width: 0; max-width: 580px; }
  .kpp-signup__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
  /* The field takes nearly all the spare room while they share a line; once
     the button wraps under it (phones), the button fills its own line. */
  .kpp-signup__field { flex: 999 1 240px; color: var(--ls-stone); }
  .kpp-signup .ls-input { border-color: transparent; }
  .kpp-signup .ls-input:focus { outline-color: var(--ls-paper); border-color: var(--ls-paper); }
  .kpp-signup__button { flex: 1 0 auto; justify-content: center; }   /* 54px, as tall as the field */
  .kpp-signup__button:disabled { opacity: .7; cursor: progress; }
  .kpp-signup__consent {
    margin-top: 10px;
    font: 400 14px/1.45 var(--ls-font-sans);
    color: var(--ls-stone);
  }
  .kpp-signup__consent input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--ls-gold);
    cursor: pointer;
  }
  .kpp-signup__consent label { cursor: pointer; }
  .kpp-signup__consent a { color: var(--ls-paper); }
  .kpp-signup__consent :is(input, a):focus-visible {
    outline: 2px solid var(--ls-focus-ring);
    outline-offset: 2px;
  }
  .kpp-signup__error {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-left: 2px solid #E39A86;
    background: rgba(227,154,134,.1);
    font: 400 14px/1.5 var(--ls-font-sans);
    color: var(--ls-paper);
  }
  /* The script focuses the confirmation (tabindex -1) so focus isn't lost */
  .kpp-signup__confirm:focus { outline: none; }
  .kpp-signup__confirm-title {
    margin: 0;
    font: 400 clamp(24px, 2.2vw, 30px)/1.2 var(--ls-font-serif);
    color: var(--ls-paper);
  }

  /* ---- Page and post heads ----------------------------------------------- */
  .kpp-page-hero { padding-bottom: clamp(24px, 3vw, 40px); }
  .kpp-page-hero__lede { max-width: 640px; }
  .kpp-post-hero { padding-bottom: clamp(32px, 4vw, 56px); }
  .kpp-post-hero__kind { color: inherit; text-decoration: none; }
  .kpp-post-hero__kind:hover { color: var(--ls-ink); }
  .kpp-post-hero__title { margin-top: 22px; max-width: 1000px; font-size: clamp(40px, 5.4vw, 84px); line-height: 1; }
  .kpp-post-hero__subtitle { margin-top: 18px; font-size: clamp(18px, 1.6vw, 22px); }
  .kpp-post-hero__lede { max-width: 640px; }
  .kpp-post-cover__frame { width: 100%; aspect-ratio: 3 / 2; max-height: 86vh; }
  .kpp-archive-hero { padding-bottom: 0; }
  .kpp-archive-hero__title { font-size: clamp(44px, 6vw, 96px); }

  /* ---- Reading column for posts and plain pages --------------------------- */
  .kpp-entry {
    max-width: 760px;
    margin-inline: auto;
    padding: clamp(40px, 5vw, 72px) 0 var(--ls-section-md);
    font: 400 17px/1.75 var(--ls-font-sans);
    color: var(--ls-text-body);
  }
  .kpp-entry--wide { max-width: none; }
  .kpp-entry > * { margin-block: 0; }
  .kpp-entry > * + * { margin-top: 1.35em; }
  .kpp-entry > :where(h2, h3, h4) { margin-top: 1.9em; }
  .kpp-entry > :where(h2, h3, h4) + * { margin-top: .7em; }
  .kpp-entry h2 { font: 400 clamp(30px, 3vw, 44px)/1.1 var(--ls-font-serif); letter-spacing: -.01em; color: var(--ls-text-strong); }
  .kpp-entry h3 { font: 400 clamp(24px, 2.2vw, 32px)/1.15 var(--ls-font-serif); color: var(--ls-text-strong); }
  .kpp-entry h4,
  .kpp-entry h5,
  .kpp-entry h6 { font: 500 13px/1.4 var(--ls-font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ls-text-accent); }
  /* Text links only: buttons and the story navigation keep their own styles */
  .kpp-entry a:where(:not(.ls-btn, .wp-block-button__link, .kpp-post-nav__link)) {
    color: var(--ls-ink);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ls-ink-35);
  }
  .kpp-entry a:where(:not(.ls-btn, .wp-block-button__link, .kpp-post-nav__link)):hover { color: var(--ls-bronze); text-decoration-color: var(--ls-bronze); }
  .kpp-entry :where(ul, ol) { padding-left: 1.3em; }
  .kpp-entry li + li { margin-top: .4em; }
  .kpp-entry strong { font-weight: 600; color: var(--ls-text-strong); }
  .kpp-entry :where(blockquote, .wp-block-quote) {
    margin-inline: 0;
    padding-left: 22px;
    border-left: 1px solid var(--ls-text-accent);
    font: italic 400 clamp(20px, 1.9vw, 26px)/1.4 var(--ls-font-serif);
    color: var(--ls-text-quote);
  }
  .kpp-entry :where(blockquote, .wp-block-quote) cite {
    display: block;
    margin-top: 12px;
    font: normal 400 13px/1.5 var(--ls-font-sans);
    color: var(--ls-text-muted);
  }
  .kpp-entry .wp-block-pullquote { padding: 32px 0; border-block: 1px solid var(--ls-rule); text-align: left; }
  .kpp-entry :where(figure) { margin-inline: 0; }
  .kpp-entry img { max-width: 100%; height: auto; }
  .kpp-entry :where(figcaption, .wp-element-caption) {
    margin: 12px 0 0;
    font: italic 400 16px/1.4 var(--ls-font-serif);
    color: var(--ls-text-muted);
    text-align: left;
  }
  .kpp-entry .wp-block-gallery { gap: clamp(8px, 1.2vw, 16px); }
  .kpp-entry .alignwide {
    width: min(100vw - 2 * var(--ls-gutter), var(--ls-container) - 2 * var(--ls-gutter));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .kpp-entry .alignfull {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .kpp-entry .wp-block-separator { border: 0; border-top: 1px solid var(--ls-rule); }
  .kpp-entry .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    min-height: 54px;
    padding: 0 30px;
    border-radius: var(--ls-radius);
    background: var(--ls-ink);
    color: var(--ls-paper);
    font: 500 15px var(--ls-font-sans);
    text-decoration: none;
    transition: background .3s;
  }
  .kpp-entry .wp-block-button__link:hover { background: var(--ls-bronze); color: var(--ls-paper); }
  .kpp-entry .is-style-outline .wp-block-button__link { background: transparent; border: 1px solid var(--ls-ink); color: var(--ls-ink); }
  .kpp-entry .is-style-outline .wp-block-button__link:hover { background: var(--ls-ink); color: var(--ls-paper); }

  /* "Read the full story" box under seeded posts and galleries */
  .kpp-elsewhere {
    margin-top: clamp(40px, 5vw, 64px);
    padding: clamp(22px, 3vw, 32px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    border: 1px solid var(--ls-rule);
  }
  .kpp-elsewhere__text { margin: 0; font: 400 clamp(20px, 1.8vw, 24px)/1.35 var(--ls-font-serif); color: var(--ls-text-strong); }

  /* Previous / next story */
  .kpp-post-nav {
    margin-top: clamp(48px, 6vw, 80px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    border-top: 1px solid var(--ls-rule);
  }
  .kpp-entry .kpp-post-nav__link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 0;
    color: var(--ls-text-strong);
    text-decoration: none;
  }
  .kpp-entry .kpp-post-nav__link:hover { color: var(--ls-bronze); }
  .kpp-post-nav__link .ls-eyebrow { margin: 0; }
  .kpp-post-nav__link--next { text-align: right; align-items: flex-end; }
  .kpp-post-nav__title { font: 400 clamp(22px, 2vw, 28px)/1.2 var(--ls-font-serif); }

  /* ---- Archives, search, 404 ---------------------------------------------- */
  .kpp-archive { padding-top: clamp(40px, 5vw, 72px); }
  .kpp-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: clamp(32px, 4vw, 48px);
  }
  .kpp-pagination :where(a, span) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--ls-ink-30);
    border-radius: var(--ls-radius);
    color: var(--ls-ink);
    font: 500 14px var(--ls-font-sans);
    text-decoration: none;
    transition: background .25s, color .25s, border-color .25s;
  }
  .kpp-pagination a:hover { border-color: var(--ls-ink); }
  .kpp-pagination .current { background: var(--ls-ink); border-color: var(--ls-ink); color: var(--ls-paper); }
  .kpp-pagination .dots { border-color: transparent; }
  .kpp-search { margin-top: clamp(32px, 4vw, 48px); max-width: 560px; }
  .kpp-search-form { display: flex; flex-direction: column; gap: 10px; }
  .kpp-search-form__row { display: flex; flex-wrap: wrap; gap: 10px; }
  .kpp-search-form__row .ls-input { flex: 1 1 240px; }
  .kpp-404 { padding-bottom: var(--ls-section-md); }

  /* ==== Responsive tiers ================================================ */
  /* Same breakpoints as lucidsprint.com. Sizes are already fluid, so these
     blocks only switch what a fluid value can't. Very large screens need no
     step of their own: the 1400px column and the type clamps top out by
     ~1600px, and the header lines up with the column (see .ls-header). */

  /* ≤1279 small desktop */
  @media (max-width: 1279px) {
    /* four testimonials: 2 x 2 rather than three and an orphan */
    .ls-quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ≤1179 small laptop: the eight nav links (Home, Weddings, Elopements and
     the rest, 2026-10-19) plus the button fit on one line down to 1025px
     with tighter spacing */
  @media (max-width: 1179px) {
    .ls-nav { gap: clamp(14px, 1.6vw, 40px); }
  }

  /* ≤1024 tablet */
  @media (max-width: 1024px) {
    /* the menu icon and full-screen menu take over from the nav, as on phones */
    .ls-nav { display: none; }
    .ls-header__menu-btn { display: flex; }
    /* the preview stacks above the list below ~945px, so it stops following it */
    .ls-cats__preview { position: static; }
    /* the intro portrait takes a fair share of the column once it stacks */
    .ls-intro__figure { flex-grow: 1; max-width: 480px; }
  }

  /* ≤820 tablet portrait and phones */
  @media (max-width: 820px) {
    .ls-quote-grid { grid-template-columns: minmax(0, 1fr); }
    /* only the logo and the menu icon sit over the top of the hero photo */
    .ls-hero__scrim { --ls-hero-top: linear-gradient(to bottom, rgba(var(--ls-hero-shade), .58) 0, rgba(var(--ls-hero-shade), .48) 40px, rgba(var(--ls-hero-shade), .32) 80px, rgba(var(--ls-hero-shade), .17) 120px, rgba(var(--ls-hero-shade), .07) 160px, rgba(var(--ls-hero-shade), .02) 200px, rgba(var(--ls-hero-shade), 0) 220px); }
  }
  /* Touch (and anything this narrow): 44px targets. Small text links get a
     larger hit area without moving anything; footer links become 44px rows. */
  @media (max-width: 820px), (pointer: coarse) {
    .ls-link,
    .ls-nav__link,
    .ls-toc__link,
    .ls-filter { position: relative; }
    .ls-link::after,
    .ls-nav__link::after,
    .ls-toc__link::after,
    .ls-filter::after { content: ""; position: absolute; }
    .ls-link::after { inset: -12px -6px; }
    .ls-nav__link::after { inset: -12px -8px; }
    .ls-toc__link::after { inset: -6px; }
    .ls-filter::after { inset: -2px 0; }
    .ls-toc__links { row-gap: 12px; }   /* wrapped rows' hit areas don't overlap */
    .ls-footer__col { gap: 0; }
    .ls-footer__link { padding-block: 12px; line-height: 20px; }
  }

  /* ≤560 phone */
  @media (max-width: 560px) {
    /* one or two narrow columns: no staggered offset */
    .ls-places__item:nth-child(even) { margin-top: 0; }
    /* Investment's definition rows: the term sits above its text */
    .ls-practical__row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
    /* Blog's archive rows: kind and date above the title, thumbnail alongside */
    .ls-archive__link { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; align-items: start; }
    .ls-archive__meta { grid-column: 1; grid-row: 1; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
    .ls-archive__body { grid-column: 1; grid-row: 2; }
    .ls-archive__thumb { grid-column: 2; grid-row: 1 / span 2; }
    /* Home hero (2026-10-24): the photo on top with nothing over it but the
       menu, caption and pause button, and the words under it on ink. A
       portrait screen shows only the middle of a landscape photo, and the
       words covered most of that. No parallax here (site.js), as the photo
       would slide over the words. */
    .ls-hero {
      --ls-hero-photo: 62svh;
      display: block;
      min-height: 0;
      padding-top: var(--ls-hero-photo);
    }
    .ls-hero__media,
    .ls-hero__scrim { inset: 0 0 auto; height: var(--ls-hero-photo); }
    .ls-hero__media { overflow: hidden; }   /* the slow zoom stays in the photo */
    /* The menu's graduated top, and a floor that keeps the caption and pause
       button readable on a bright foot of the photo (caption ≥ 5.8:1 on every
       slide, hero-contrast.js) */
    .ls-hero__scrim {
      background:
        var(--ls-hero-top),
        linear-gradient(to top, rgba(var(--ls-hero-shade), .68) 0, rgba(var(--ls-hero-shade), .64) 30px, rgba(var(--ls-hero-shade), .56) 48px, rgba(var(--ls-hero-shade), .4) 68px, rgba(var(--ls-hero-shade), .22) 90px, rgba(var(--ls-hero-shade), .09) 110px, rgba(var(--ls-hero-shade), 0) 135px);
    }
    /* Static, so the caption and pause button place themselves on the photo */
    .ls-hero__inner { position: static; width: auto; padding-top: 30px; padding-bottom: 52px; }
    .ls-hero__words::before { display: none; }
    .ls-hero :is(.ls-hero__eyebrow, .ls-hero__title, .ls-hero__lede, .ls-btn--ghost) { text-shadow: none; }
    /* Along the foot of the photo, the pause ring 16px from its edges */
    .ls-hero__caption { position: absolute; top: calc(var(--ls-hero-photo) - 42px); left: var(--ls-gutter); right: var(--ls-gutter); }
    .ls-hero__pause { top: calc(var(--ls-hero-photo) - 55px); bottom: auto; }
  }
}


/* ==========================================================================
   Utilities (always win over components; keep them single-purpose)
   ========================================================================== */
@layer ls-utilities {
  /* Display & alignment */
  .ls-block { display: block; }
  .ls-items-center { align-items: center; }
  .ls-items-end { align-items: flex-end; }
  .ls-justify-between { justify-content: space-between; }
  .ls-flex-wrap-reverse { flex-wrap: wrap-reverse; }
  .ls-self-start { align-self: flex-start; }
  .ls-col-span-full { grid-column: 1 / -1; }

  /* Margin (4px scale) */
  .ls-mt-0 { margin-top: 0; }
  .ls-mt-2 { margin-top: 8px; }
  .ls-mt-7 { margin-top: 28px; }
  .ls-mt-8 { margin-top: 32px; }
  .ls-mt-9 { margin-top: 36px; }
  .ls-mt-10 { margin-top: 40px; }
  .ls-mb-0 { margin-bottom: 0; }
  .ls-mb-5 { margin-bottom: 20px; }
  .ls-mb-8 { margin-bottom: 32px; }

  /* Gap (4px scale) */
  .ls-gap-x-6 { column-gap: 24px; }
  .ls-gap-x-7 { column-gap: 28px; }
  .ls-gap-x-9 { column-gap: 36px; }
  .ls-gap-y-4 { row-gap: 16px; }
  .ls-gap-y-5 { row-gap: 20px; }

  /* Padding (4px scale) */
  .ls-pt-2 { padding-top: 8px; }

  /* Section spacing tokens */
  .ls-pt-section-md { padding-top: var(--ls-section-md); }
  .ls-pt-section-sm { padding-top: var(--ls-section-sm); }
  .ls-pb-section-sm { padding-bottom: var(--ls-section-sm); }
  .ls-pb-section-lg { padding-bottom: var(--ls-section-lg); }

  /* Anchor targets clear the fixed header */
  .ls-scroll-mt-20 { scroll-margin-top: 80px; }
  .ls-scroll-mt-24 { scroll-margin-top: 96px; }

  /* Aspect ratios */
  .ls-aspect-square { aspect-ratio: 1 / 1; }
  .ls-aspect-3\/4 { aspect-ratio: 3 / 4; }
  .ls-aspect-4\/3 { aspect-ratio: 4 / 3; }
  .ls-aspect-4\/5 { aspect-ratio: 4 / 5; }
  .ls-aspect-video { aspect-ratio: 16 / 9; }

  /* Images that fill their box (without the .ls-frame__img hover zoom) */
  .ls-size-full { width: 100%; height: 100%; }
  .ls-object-cover { object-fit: cover; }

  /* Image focal points (vertical position, horizontally centred) */
  .ls-object-y-20 { object-position: center 20%; }
  .ls-object-y-30 { object-position: center 30%; }
  .ls-object-y-35 { object-position: center 35%; }
  .ls-object-y-40 { object-position: center 40%; }
  .ls-object-y-45 { object-position: center 45%; }
  .ls-object-y-70 { object-position: center 70%; }

  /* Text colour */
  .ls-text-paper { color: var(--ls-paper); }
  .ls-text-accent { color: var(--ls-text-accent); }
  .ls-text-bronze { color: var(--ls-bronze); }   /* display-heading accents on paper and sand */

  /* Text wrapping */
  .ls-text-balance { text-wrap: balance; }
  .ls-whitespace-nowrap { white-space: nowrap; }
}


/* ==========================================================================
   Gallery block, "Masonry" style (WordPress theme)
   --------------------------------------------------------------------------
   Every photo whole, not cropped, in columns of uneven height: the Portfolio
   galleries and the blog's photo sets. The photos fill the gallery from the
   top, in order: assets/js/gallery-masonry.js puts each one under the
   shortest column so far and marks the gallery [data-kpp-masonry]. Each photo
   then sits in row 1 of its column of a one-row grid, pushed down by a top
   margin, so the gallery is as tall as its tallest column. Without the script
   (and when printing) the photos flow down CSS columns instead, which reads
   column by column.
   Kept outside the layers on purpose: WordPress's own gallery CSS is
   unlayered, and an unlayered rule beats every layer, so these must be
   unlayered and more specific. (Core lifts its rules with
   :not(#individual-image); the second :not() here outranks them whatever
   order the stylesheets load in.)
   ========================================================================== */
.wp-block-gallery.has-nested-images.is-style-masonry {
  --kpp-gallery-gap: clamp(8px, 1.2vw, 16px);
  --kpp-gallery-cols: 3;
  display: block;
  column-count: var(--kpp-gallery-cols);
  column-gap: var(--kpp-gallery-gap);
}
.wp-block-gallery.has-nested-images.is-style-masonry.columns-1 { --kpp-gallery-cols: 1; }
.wp-block-gallery.has-nested-images.is-style-masonry.columns-2 { --kpp-gallery-cols: 2; }
.wp-block-gallery.has-nested-images.is-style-masonry:is(.columns-4, .columns-5, .columns-6, .columns-7, .columns-8) { --kpp-gallery-cols: 4; }
.wp-block-gallery.has-nested-images.is-style-masonry figure.wp-block-image:not(#individual-image):not(#masonry) {
  display: block;
  width: 100%;
  margin: 0 0 var(--kpp-gallery-gap);
  break-inside: avoid;
}
.wp-block-gallery.has-nested-images.is-style-masonry figure.wp-block-image img {
  width: 100%;
  height: auto;
}
/* Two columns on tablets and phones (one if the gallery is set to one) */
@media (max-width: 820px) {
  .wp-block-gallery.has-nested-images.is-style-masonry:not(.columns-1) { --kpp-gallery-cols: 2; }
}
/* Placed by gallery-masonry.js. The caption (and, in the editor, anything
   else in the gallery) runs full width underneath. */
@media screen {
  .wp-block-gallery.has-nested-images.is-style-masonry[data-kpp-masonry] {
    display: grid;
    grid-template-columns: repeat(var(--kpp-gallery-cols), minmax(0, 1fr));
    align-items: start;
    gap: var(--kpp-gallery-gap);
  }
  .wp-block-gallery.has-nested-images.is-style-masonry[data-kpp-masonry] figure.wp-block-image:not(#individual-image):not(#masonry) {
    grid-area: 1 / var(--kpp-masonry-col, 1);
    margin: var(--kpp-masonry-top, 0px) 0 0;
  }
  .wp-block-gallery.has-nested-images.is-style-masonry[data-kpp-masonry] > :not(figure) {
    grid-column: 1 / -1;
  }
}