/*
Theme Name:        Layerly Base
Theme URI:         https://layerly.io
Author:            Layerly
Author URI:        https://layerly.io
Description:       Layerly Base Theme — the v1.0 reference implementation of the Layerly Conventions Framework. Fork this theme per client; do not edit in place. Requires the Layerly Bridge plugin for runtime helpers and admin chat.
Version: 1.0.0-r27-6980af6
Requires at least: 6.0
Requires PHP:      8.0
Layerly Bridge:    >=4.7.0
Layerly Conventions: v1.0
Text Domain:       layerly-base
License:           Proprietary
Tags:              layerly, layerly-v1
*/

/* ════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — numbered (variable per site) + functional aliases.
   Override values per site. Add --color-N or --font-N as the design needs.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --color-success: #059669;
  --color-error: #DC2626;
  --color-warning: #F59E0B;
  --color-highlight: var(--color-7);
  --font-3: system-ui, -apple-system, sans-serif;
  --font-subheading: var(--font-3);
  --sh-sm: 0 1px 2px rgba(0,0,0,.08);
  --sh-md: 0 4px 12px rgba(0,0,0,.12);
  --sh-lg: 0 12px 32px rgba(0,0,0,.18);
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --color-1: #EBE4DC;
  --color-2: #9A8C6C;
  --color-3: #5E6B5E;
  --color-4: #CCA3A3;
  --color-5: #151D15;
  --color-6: #854A4C;
  --color-7: #2C3D32;
  --color-8: #F7F4F1;
  --color-text: var(--color-5);
  --color-text-muted: var(--color-3);
  --color-text-invert: var(--color-1);
  --color-bg: var(--color-8);
  --color-surface: var(--color-1);
  --color-primary: var(--color-7);
  --color-primary-deep: var(--color-5);
  --color-accent: var(--color-6);
  --color-accent-soft: var(--color-4);
  --color-gold: var(--color-2);
  --color-border: var(--color-2);
  --font-1: 'Schibsted Grotesk', sans-serif;
  --font-2: 'Averia Serif Libre', Georgia, serif;
  --font-display: var(--font-2);
  --font-body: var(--font-1);
  --text-h1: 64px;
  --text-h2: 52px;
  --text-h3: 44px;
  --text-h4: 24px;
  --text-xl: 24px;
  --text-lg: 20px;
  --text-md: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --leading-h1: 69px;
  --leading-h2: 60px;
  --leading-h3: 51px;
  --leading-h4: 31px;
  --leading-lg: 34px;
  --leading-md: 28px;
  --leading-sm: 24px;
  --leading-xs: 19px;
  --weight-reg: 400;
  --weight-med: 500;
  --weight-bold: 600;
  --eyebrow-size: var(--text-xs);
  --eyebrow-tracking: 2.2px;
  --eyebrow-weight: var(--weight-bold);
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 26px;
  --space-xl: 34px;
  --space-2xl: 60px;
  --space-xxl: 80px;
  --space-section: 120px;
  --space-section-lg: 140px;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-full: 9999px;
  --container-max: 1200px;
  --container-wide: 1440px;
  --hairline: 1px;
}

/* ════════════════════════════════════════════════════════════════════
   2. RESET + ROOT
   ════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size:   var(--text-md);
    color:       var(--color-text);
    background:  var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

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

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

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: 1.15;
    margin: 0 0 var(--space-md);
    color: var(--color-text);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); font-weight: var(--weight-med); }
h6 { font-size: var(--text-md); font-weight: var(--weight-med); text-transform: uppercase; letter-spacing: .05em; }

.eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

/* (Responsive type is now handled fluidly by the clamp() heading tokens in :root —
   no hard 768px breakpoint needed.) */

/* ════════════════════════════════════════════════════════════════════
   4. LAYOUT PRIMITIVES
   ════════════════════════════════════════════════════════════════════ */
.wrap {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

@media (min-width: 768px) {
    .wrap { padding-inline: var(--space-lg); }
}

/* Base section — every page section uses this anatomy.
   Sets up the position, background, overlay, decoration, divider hooks. */
.section {
    position: relative;
    padding-block: var(--space-xxl);
    /* `clip` contains decorations/dividers exactly like `hidden`, but does NOT create a
       scroll container — so `position: sticky` descendants (e.g. the sticky-stack section)
       can pin against the viewport instead of against this box. `overflow: hidden` silently
       broke sticky for EVERY section (Aveya, 2026-07-24). The `hidden` line is the fallback
       for engines without `clip`; both contain the decorations. */
    overflow: hidden;
    overflow: clip;
}

/* Section background variants — emitted by layerly_section_classes() */
.section--bg-color {
    background-color: var(--section-bg-color, transparent);
}
.section--bg-image {
    background-image: var(--section-bg-image);
    background-size: cover;
    background-position: center;
}
.section--bg-gradient {
    background-image: var(--section-bg-gradient);
}

/* Color overlay on backgrounds (for legibility over images) */
.section--with-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--section-overlay-color, transparent);
    opacity: var(--section-overlay-opacity, 0);
    pointer-events: none;
    z-index: 1;
}
.section--with-overlay > * { position: relative; z-index: 2; }

/* Decoration slot — pseudo-element for background design accents */
.section--decorated::before {
    content: '';
    position: absolute;
    pointer-events: none;
    background-color: var(--decoration-color, var(--color-1));
    opacity: var(--decoration-opacity, .15);
    z-index: 0;
}
/* Default decoration: a circle */
.section--decorated::before {
    width: 240px;
    height: 240px;
    border-radius: 50%;
}
.section--decorated[style*="--decoration-size: sm"]::before { width: 120px; height: 120px; }
.section--decorated[style*="--decoration-size: md"]::before { width: 240px; height: 240px; }
.section--decorated[style*="--decoration-size: lg"]::before { width: 360px; height: 360px; }
.section--decorated[style*="--decoration-size: xl"]::before { width: 480px; height: 480px; }

.section--decorated[style*="--decoration-position: top-left"]::before     { top: -60px; left: -60px; }
.section--decorated[style*="--decoration-position: top-right"]::before    { top: -60px; right: -60px; }
.section--decorated[style*="--decoration-position: bottom-left"]::before  { bottom: -60px; left: -60px; }
.section--decorated[style*="--decoration-position: bottom-right"]::before { bottom: -60px; right: -60px; }
.section--decorated[style*="--decoration-position: center"]::before {
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* ── Sticky-stack — a REGISTERED behavioural primitive (v1.0, 2026-07-24) ─────────────
   Any section can opt a direct child list into a scroll-driven stacked-card effect: each
   card pins to the vertical centre as it scrolls up, the next card slides over it leaving a
   small "peek" of the one beneath, and covered cards tilt slightly. This is composed, never
   hand-built (rulebook: behaviours come from the library). It is why the Aveya request
   failed as bespoke CSS — the list was flex (no sticky runway) and `.section{overflow:hidden}`
   killed sticky outright (now `overflow:clip`, above).

   Compose:  add class `sticky-stack` to the SECTION, and `sticky-stack__list` / `sticky-stack__item`
             to the repeating list + cards. Knobs via inline style on the section:
               --stack-peek   (px between pinned cards; default 16)
               --stack-card-h (approx card height, to centre the pin; default 480px)
               --stack-tilt   (max rotation of a covered card; default 2.5deg)
   Below --stack-bp (default 900px) it degrades to normal flow — a pinned 480px card is worse
   than a simple stack on a phone. Motion is OFF under prefers-reduced-motion (a11y floor). */
.sticky-stack { --stack-peek: 16px; --stack-card-h: 480px; --stack-tilt: 2.5deg; --stack-bp: 900px; }

@media (min-width: 900px) {
  .sticky-stack .sticky-stack__list {
    display: block;                              /* out of flex → normal flow gives sticky its runway */
    max-width: 560px; margin-inline: auto; padding: 0; list-style: none;
  }
  .sticky-stack .sticky-stack__item {
    position: sticky;
    top: max(96px, calc(50vh - var(--stack-card-h) / 2));   /* pin to centre, never under the nav */
    margin-bottom: 26vh;                                     /* the scroll distance between pins */
    transform-origin: 50% 0%;
    box-shadow: var(--sh-lg);
  }
  .sticky-stack .sticky-stack__item:last-child { margin-bottom: 0; }
  /* each card pins one --stack-peek lower than the previous, so a sliver stays visible */
  .sticky-stack .sticky-stack__item:nth-child(1) { z-index: 1; }
  .sticky-stack .sticky-stack__item:nth-child(2) { z-index: 2; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 1)); }
  .sticky-stack .sticky-stack__item:nth-child(3) { z-index: 3; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 2)); }
  .sticky-stack .sticky-stack__item:nth-child(4) { z-index: 4; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 3)); }
  .sticky-stack .sticky-stack__item:nth-child(5) { z-index: 5; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 4)); }
  .sticky-stack .sticky-stack__item:nth-child(6) { z-index: 6; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 5)); }

  /* Scroll-driven tilt via native CSS scroll timelines — no JS to enqueue or break. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .sticky-stack .sticky-stack__item {
        animation: layerly-stack-tilt linear both;
        animation-timeline: view();
        animation-range: contain 35% exit 100%;
      }
      @keyframes layerly-stack-tilt {
        from { transform: rotate(0deg) scale(1); }
        to   { transform: rotate(calc(-1 * var(--stack-tilt))) scale(.94); }
      }
    }
  }
  /* No scroll-timeline support → a static alternating tilt still reads as a hand-placed stack. */
  @supports not (animation-timeline: view()) {
    .sticky-stack .sticky-stack__item:nth-child(odd)  { transform: rotate(calc(-0.5 * var(--stack-tilt))); }
    .sticky-stack .sticky-stack__item:nth-child(even) { transform: rotate(calc(0.5 * var(--stack-tilt))); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-stack .sticky-stack__list { display: flex; flex-direction: column; gap: var(--space-lg); }
  .sticky-stack .sticky-stack__item { position: static; transform: none; animation: none; margin-bottom: 0; }
}

/* Section dividers — emitted on the section element. SVGs live in assets/dividers/. */
.section[class*="section--divider-top-"] {
    /* Top divider rendered via ::before override below — sections with both
       a decoration AND a divider need careful ordering. v1 keeps it simple. */
}

/* Section header — used by every section that has a heading area */
.section-head {
    margin-bottom: var(--space-xl);
}
.section-head--center { text-align: center; }
.section-head--center .section-head__inner { max-width: 720px; margin-inline: auto; }

/* ════════════════════════════════════════════════════════════════════
   5. BUTTONS
   ════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: 1;
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--color-primary);
    color: var(--color-surface);
}
.btn--primary:hover { filter: brightness(.92); }

.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-text); }

.btn--link {
    background: transparent;
    color: var(--color-primary);
    padding: 0;
    border: none;
}

/* ════════════════════════════════════════════════════════════════════
   6. SHAPE UTILITIES (used by layerly_image's `shape` arg)
   Each emits a `.shape-*` class.
   ════════════════════════════════════════════════════════════════════ */
.shape-square      { border-radius: 0; }
.shape-rounded-sm  { border-radius: var(--radius-sm); }
.shape-rounded-md  { border-radius: var(--radius-md); }
.shape-rounded-lg  { border-radius: var(--radius-lg); }
.shape-circle      { border-radius: 9999px; aspect-ratio: 1; object-fit: cover; }
.shape-arch        { border-radius: 9999px 9999px 0 0; }
.shape-tilt        { transform: rotate(-3deg); }
/* Custom shapes (e.g. blob, squiggle) — drop SVG into assets/shapes/ and
   add .shape-<name> using mask-image: url(/wp-content/themes/<slug>/assets/shapes/<name>.svg) */

/* ════════════════════════════════════════════════════════════════════
   7. ICONS
   ════════════════════════════════════════════════════════════════════ */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    color: currentColor;
}
.icon svg { width: 100%; height: 100%; fill: currentColor; }
.icon--sm { font-size: var(--text-sm); }
.icon--md { font-size: var(--text-md); }
.icon--lg { font-size: var(--text-lg); }
.icon--xl { font-size: var(--text-xl); }
.icon--missing {
    width: 1em; height: 1em;
    background: var(--color-border);
    border-radius: var(--radius-sm);
    display: inline-block;
}

/* ════════════════════════════════════════════════════════════════════
   8. ACCESSIBILITY
   ════════════════════════════════════════════════════════════════════ */
.screen-reader-text,
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-text);
    color: var(--color-surface);
    padding: var(--space-sm) var(--space-md);
    z-index: 999999;
}
.skip-link:focus { left: var(--space-md); top: var(--space-md); }

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   9. COMPONENT STYLES — each component owns its own block, scoped by BEM.
   New families append below as the catalog grows.
   ════════════════════════════════════════════════════════════════════ */

/* ── Section header (used inside other sections) ── */
.section-head__heading { margin-bottom: var(--space-md); }
.section-head__sub {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 720px;
    margin: 0;
}
.section-head--center .section-head__sub { margin-inline: auto; }

/* ── Site header (template-parts/headers/standard.php) ── */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.site-header--sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--sh-sm);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-md);
}
.site-header__logo img { max-height: 48px; width: auto; }
.site-header__logo-text { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); text-decoration: none; }
.site-header__nav { display: flex; align-items: center; gap: var(--space-lg); }
.site-header__nav-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; gap: var(--space-lg);
}
.site-header__nav-list a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--weight-med);
}
.site-header__nav-list a:hover { color: var(--color-primary); }
.site-header__menu-toggle {
    display: none;
    background: transparent; border: none; padding: var(--space-sm); cursor: pointer; color: var(--color-text);
}

@media (max-width: 767px) {
    .site-header__menu-toggle { display: inline-flex; }
    .site-header__nav {
        position: fixed;
        inset: 60px 0 0 0;
        background: var(--color-surface);
        padding: var(--space-lg);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        transform: translateX(100%);
        transition: transform .25s ease-out;
        z-index: 99;
    }
    .site-header__nav.is-open { transform: translateX(0); }
    .site-header__nav-list { flex-direction: column; gap: var(--space-md); }
}

/* ── Site footer (template-parts/footers/multi-column.php) ── */
.site-footer {
    background: var(--color-2);
    color: var(--color-surface);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { opacity: .85; }
.site-footer__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-xl);
    padding-block: var(--space-xxl);
}
.site-footer__tagline { color: rgba(255,255,255,.7); margin-top: var(--space-md); }
.site-footer__social { list-style: none; padding: 0; display: flex; gap: var(--space-md); margin-top: var(--space-md); }
.site-footer__social a { display: inline-flex; }
.site-footer__nav-list { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.site-footer__column-heading { font-size: var(--text-md); margin-bottom: var(--space-md); color: var(--color-surface); }
.site-footer__contact p { margin-bottom: var(--space-sm); }
.site-footer__bar {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-block: var(--space-md);
    font-size: var(--text-sm);
    color: rgba(255,255,255,.7);
}
.site-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.site-footer__legal-list { list-style: none; padding: 0; display: flex; gap: var(--space-md); margin: 0; }

@media (max-width: 767px) {
    .site-footer__inner { grid-template-columns: 1fr; }
}

/* ── Hero (template-parts/heroes/centered.php) ── */
.hero { padding-block: var(--space-xxl); }
.hero__inner { text-align: center; max-width: 800px; margin-inline: auto; }
.hero__eyebrow { margin-bottom: var(--space-sm); }
.hero__title { margin-bottom: var(--space-md); }
.hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}
.hero__ctas {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}
.hero__ctas:not(:last-child) { margin-bottom: var(--space-xl); }
.hero__media { margin-top: var(--space-xl); }
.hero__media img { display: block; margin-inline: auto; }

/* ── Intro split (template-parts/intro-splits/image-left.php) ── */
.intro-split__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxl);
    align-items: center;
}
/* If there's no media slot rendered, collapse to one column */
.intro-split__inner:has(> .intro-split__content:only-child) {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
}
.intro-split--image-right .intro-split__inner > .intro-split__media:first-child { order: 2; }
.intro-split__media img { width: 100%; height: auto; }
.intro-split__title { margin-bottom: var(--space-md); }
.intro-split__cta { margin-top: var(--space-lg); }

@media (max-width: 767px) {
    .intro-split__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ── Service grid — cards ── */
.service-grid__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}
.service-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform .15s, box-shadow .15s;
}
.service-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.service-card__link { display: block; text-decoration: none; color: inherit; }
.service-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.service-card__image { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: var(--space-lg); }
.service-card__title { margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.service-card__excerpt { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.service-card__more { color: var(--color-primary); font-weight: var(--weight-bold); font-size: var(--text-sm); }

/* ── Generic CPT loop (cpt-loop/grid) — any custom post type ── */
/* Consumes --section-bg-color first (F17/B18) — a bg_type:color prop on this
   section must win over the component's own default, not lose to it. */
.cpt-loop {
  /* background-color, NOT the shorthand — see .hero--split note. */
  background-color: var(--section-bg-color, transparent);
  padding: 130px var(--space-2xl) 140px;
}
.cpt-loop__list {
    display: grid;
    grid-template-columns: repeat(var(--cpt-loop-cols, 3), 1fr);
    gap: var(--cpt-loop-gap, var(--space-lg));
}
@media (max-width: 900px) { .cpt-loop__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cpt-loop__list { grid-template-columns: 1fr; } }
.cpt-loop__card {
  background: var(--cpt-loop-card-bg, var(--color-surface));
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .15s, box-shadow .15s;
  display: flex;
}
.cpt-loop__card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.cpt-loop__link { display: block; text-decoration: none; color: inherit; }
.cpt-loop__media { aspect-ratio: 4 / 3; overflow: hidden; }
.cpt-loop__image { width: 100%; height: 100%; object-fit: cover; }
.cpt-loop__body { padding: var(--space-lg); }
.cpt-loop__title { margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.cpt-loop__excerpt { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.cpt-loop__more { color: var(--color-primary); font-weight: var(--weight-bold); font-size: var(--text-sm); }

/* ── Radio group field ── */
.field--radio .field__radios { display: flex; flex-direction: column; gap: var(--space-sm); }
.field--radio .field__radio { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }

/* ── Testimonial — single large ── */
.testimonial-large__figure {
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
}
.testimonial-large__rating { font-size: var(--text-xl); color: var(--color-warning); margin-bottom: var(--space-md); letter-spacing: .1em; }
.testimonial-large__quote {
    font-size: var(--text-xl);
    font-family: var(--font-display);
    line-height: 1.35;
    margin: 0 0 var(--space-xl);
    quotes: '"' '"';
}
.testimonial-large__quote::before { content: open-quote; }
.testimonial-large__quote::after  { content: close-quote; }
.testimonial-large__author { display: inline-flex; align-items: center; gap: var(--space-md); }
.testimonial-large__photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testimonial-large__author-text { text-align: left; }
.testimonial-large__name { display: block; font-weight: var(--weight-bold); }
.testimonial-large__role { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── CTA banner ── */
/* Consumes --section-bg-color first (F17/B18) — see .cpt-loop above. */
.cta-banner {
    background: var(--section-bg-color, var(--color-primary));
    color: var(--color-surface);
}
.cta-banner .cta-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding-block: var(--space-xl);
    flex-wrap: wrap;
}
.cta-banner__heading { color: var(--color-surface); margin: 0 0 var(--space-sm); }
.cta-banner__body { margin: 0; opacity: .9; max-width: 560px; }
.cta-banner__ctas { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.cta-banner .btn--primary {
    background: var(--color-surface);
    color: var(--color-primary);
}
.cta-banner .btn--ghost { border-color: var(--color-surface); color: var(--color-surface); }

@media (max-width: 767px) {
    .cta-banner .cta-banner__inner { flex-direction: column; align-items: flex-start; }
}

/* ── Trust bar ── */
.trust-bar { padding-block: var(--space-xl); }
.trust-bar__heading {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}
.trust-bar__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
}
.trust-bar__item { opacity: .75; transition: opacity .2s; }
.trust-bar__item:hover { opacity: 1; }
.trust-bar__logo { max-height: 40px; width: auto; filter: grayscale(1); }
.trust-bar__item:hover .trust-bar__logo { filter: grayscale(0); }
.trust-bar__label { color: var(--color-text-muted); font-weight: var(--weight-med); }

/* ── Reveal-on-scroll ── */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease-out, transform .5s ease-out;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════════
   M4 APPENDIX — new variants, families, dividers, eyebrow-with-lines
   ════════════════════════════════════════════════════════════════════ */

/* ── Section dividers (wave / slant / curve) ──
   Templates add `section--divider-top-<shape>` and/or
   `section--divider-bottom-<shape>` via layerly_section_classes(). The SVG
   is masked using --divider-fill from the section's background so the
   divider blends into whatever sits behind it. */
.section[class*="section--divider-top-"]    { padding-top:    calc(var(--space-xxl) + 60px); }
.section[class*="section--divider-bottom-"] { padding-bottom: calc(var(--space-xxl) + 60px); }

.section[class*="section--divider-top-"]::after,
.section[class*="section--divider-bottom-"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1;
    pointer-events: none;
    background-color: var(--color-surface);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}
.section[class*="section--divider-top-"]::after    { top: 0;    transform: scaleY(-1); }
.section[class*="section--divider-bottom-"]::before { bottom: 0; }

/* Note: divider colour defaults to --color-surface; override per-section by
   setting --color-divider on the section element. */
.section[class*="section--divider-"][style*="--color-divider"]::after,
.section[class*="section--divider-"][style*="--color-divider"]::before {
    background-color: var(--color-divider);
}

.section--divider-top-wave::after,    .section--divider-bottom-wave::before    { -webkit-mask-image: url(/wp-content/themes/layerly-base/assets/dividers/wave.svg);  mask-image: url(/wp-content/themes/layerly-base/assets/dividers/wave.svg); }
.section--divider-top-slant::after,   .section--divider-bottom-slant::before   { -webkit-mask-image: url(/wp-content/themes/layerly-base/assets/dividers/slant.svg); mask-image: url(/wp-content/themes/layerly-base/assets/dividers/slant.svg); }
.section--divider-top-curve::after,   .section--divider-bottom-curve::before   { -webkit-mask-image: url(/wp-content/themes/layerly-base/assets/dividers/curve.svg); mask-image: url(/wp-content/themes/layerly-base/assets/dividers/curve.svg); }

/* ── Hero — split variant ── */
.hero__inner--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxl);
    align-items: center;
}
.hero--image-left .hero__inner--split > .hero__media   { order: 1; }
.hero--image-left .hero__inner--split > .hero__content { order: 2; }
.hero--split .hero__title {
  margin-bottom: var(--space-md);
  max-width: 600px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h1);
  color: var(--color-1);
}
.hero--split .hero__subtitle {
  margin-bottom: var(--space-xl);
  max-width: 520px;
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--color-4);
}
.hero--split .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: var(--space-xs);
}
.hero--split .hero__media img { width: 100%; height: auto; display: block; }

@media (max-width: 880px) {
    .hero__inner--split { grid-template-columns: 1fr; gap: var(--space-xl); }
    .hero--image-left .hero__inner--split > .hero__media,
    .hero--image-left .hero__inner--split > .hero__content { order: initial; }
}

/* ── Section head — left variant + with-line-side eyebrow ── */
.section-head--left              { text-align: left; }
.section-head--left .section-head__inner { max-width: none; margin-inline: 0; }

.eyebrow--with-lines {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    justify-content: center;
}
.eyebrow--with-lines .eyebrow__line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
    max-width: 80px;
}
.eyebrow--with-lines .eyebrow__label { white-space: nowrap; }

/* ── Testimonials — carousel variant ── */
.testimonial-carousel { padding-block: var(--space-xxl); }
.tcarousel {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-md);
}
.tcarousel__track {
    grid-column: 2;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.tcarousel__track::-webkit-scrollbar { display: none; }

.tcarousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding: var(--space-xl);
    text-align: center;
    box-sizing: border-box;
}
.tcarousel__rating { color: var(--color-accent, var(--color-primary)); letter-spacing: 2px; margin-bottom: var(--space-md); }
.tcarousel__quote {
    font-size: var(--text-lg);
    line-height: 1.5;
    margin: 0 0 var(--space-lg);
    max-width: 720px;
    margin-inline: auto;
}
.tcarousel__author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    text-align: left;
}
.tcarousel__photo img { width: 56px; height: 56px; }
.tcarousel__author-text { display: flex; flex-direction: column; }
.tcarousel__name { font-weight: var(--weight-bold); }
.tcarousel__role { color: var(--color-text-muted); font-size: var(--text-sm); }

.tcarousel__nav {
    grid-row: 1;
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.tcarousel__nav:hover  { background: var(--color-bg-alt); }
.tcarousel__nav:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tcarousel__nav--prev { grid-column: 1; }
.tcarousel__nav--next { grid-column: 3; }

.tcarousel__dots {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}
.tcarousel__dot, .carousel__dot {
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    border: none;
    background: var(--color-border);
    cursor: pointer;
    padding: 0;
    transition: background-color .15s, transform .15s;
}
.tcarousel__dot.is-active, .carousel__dot.is-active {
    background: var(--color-primary);
    transform: scale(1.2);
}

@media (max-width: 720px) {
    .tcarousel { grid-template-columns: 1fr; }
    .tcarousel__nav { display: none; }
    .tcarousel__track { grid-column: 1; }
}

/* ── Disclosures — accordion ── */
.accordion { border-top: 1px solid var(--color-border); }
.accordion__item {
    border-bottom: 1px solid var(--color-border);
}
.accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    cursor: pointer;
    list-style: none;
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.accordion__question { flex: 1; }
.accordion__icon {
    color: var(--color-text-muted);
    transition: transform .25s ease;
    display: inline-flex;
}
.accordion__item[open] > .accordion__summary .accordion__icon { transform: rotate(180deg); }
.accordion__answer {
    padding: 0 0 var(--space-lg);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ── Team — grid ── */
.team__list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl);
}
.team__member { text-align: center; }
.team__photo { margin-bottom: var(--space-md); }
.team__photo-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 9999px;
}
.team__name { margin: 0 0 var(--space-xs); font-size: var(--text-lg); }
.team__role { color: var(--color-text-muted); margin: 0 0 var(--space-md); }
.team__bio  { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-md); }
.team__social {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}
.team__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    color: var(--color-text-muted);
    transition: color .15s, background-color .15s;
}
.team__social a:hover { color: var(--color-primary); background: var(--color-bg-alt); }

/* ── Process steps — numbered ── */
.process-steps__list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl);
    counter-reset: layerly-step;
}
.process-steps__item {
    position: relative;
    padding: var(--space-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: left;
}
.process-steps__number {
    font-size: var(--text-xxl);
    line-height: 1;
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    opacity: .35;
    margin-bottom: var(--space-md);
}
.process-steps__icon { color: var(--color-primary); margin-bottom: var(--space-md); font-size: 32px; }
.process-steps__title { margin: 0 0 var(--space-sm); font-size: var(--text-lg); }
.process-steps__desc  { margin: 0; color: var(--color-text-muted); line-height: 1.6; }

/* ── Feature blocks — alternating ── */
.feature-blocks__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);
}
.feature-blocks__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxl);
    align-items: center;
}
.feature-blocks__row--image-right > .feature-blocks__media   { order: 2; }
.feature-blocks__row--image-right > .feature-blocks__content { order: 1; }
.feature-blocks__media img { width: 100%; height: auto; display: block; }
.feature-blocks__title { margin: 0 0 var(--space-md); font-size: var(--text-xl); }
.feature-blocks__body  { color: var(--color-text-muted); line-height: 1.65; }
.feature-blocks__body p:last-child { margin-bottom: 0; }

@media (max-width: 880px) {
    .feature-blocks__row,
    .feature-blocks__row--image-right { grid-template-columns: 1fr; }
    .feature-blocks__row > *,
    .feature-blocks__row--image-right > * { order: initial; }
}

/* ── Site footer — minimal ── */
.site-footer--minimal { padding-block: var(--space-lg); border-top: 1px solid var(--color-border); }
.site-footer--minimal .site-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.site-footer--minimal .site-footer__minimal-right {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.site-footer--minimal .site-footer__copyright { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.site-footer--minimal .site-footer__legal-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: var(--space-md);
}
.site-footer--minimal .site-footer__legal-list a {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
}
.site-footer--minimal .site-footer__legal-list a:hover { color: var(--color-text); }

/* ════════════════════════════════════════════════════════════════════
   COMPONENT LIBRARY (P1) — nav · footer · form · fields
   Structure/behavior LOCKED. Per-site look = override the --knobs below.
   ════════════════════════════════════════════════════════════════════ */

/* ── Component: nav/primary ── */
.nav {
    --nav-bg: var(--color-surface);
    --nav-fg: var(--color-text);
    --nav-height: 72px;
    --nav-link-weight: var(--weight-med);
    --nav-link-hover: var(--color-primary);
    --nav-gap: var(--space-lg);
    background: var(--nav-bg);
    color: var(--nav-fg);
}
[data-nav-sticky] { position: sticky; top: 0; z-index: 1000; transition: box-shadow .2s; }
[data-nav-sticky].is-scrolled { box-shadow: var(--sh-sm); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--nav-gap); min-height: var(--nav-height); }
.nav__logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.nav__logo-img { max-height: calc(var(--nav-height) - var(--space-lg)); width: auto; }
.nav__logo-text { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: inherit; }
.nav__menu { display: flex; align-items: center; gap: var(--nav-gap); }
.nav__list { display: flex; align-items: center; gap: var(--nav-gap); list-style: none; margin: 0; padding: 0; }
.nav__list a { color: inherit; text-decoration: none; font-weight: var(--nav-link-weight); }
.nav__list a:hover { color: var(--nav-link-hover); }
.nav__cta { white-space: nowrap; }

/* ── Chrome behavior — LOCKED, attribute-driven ───────────────────────────
   Works on nav/primary AND any bespoke header/footer that uses the data hooks.
   Design the LOOK on your own classes / the --mobile-menu-* vars; the BEHAVIOR
   (full-screen drawer, hamburger→X, body-lock) comes from here — never rebuilt.
   Hooks: [data-mobile-menu-toggle] (the hamburger button, 3 <span> bars),
   [data-mobile-menu] (the drawer), [data-nav-sticky] (above). */
[data-mobile-menu-toggle] { display: none; position: relative; z-index: 1002; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
[data-mobile-menu-toggle] > span { display: block; width: 26px; height: 3px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
[data-mobile-menu-toggle][aria-expanded="true"] > span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
[data-mobile-menu-toggle][aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
[data-mobile-menu-toggle][aria-expanded="true"] > span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 768px) {
    [data-mobile-menu-toggle] { display: inline-flex; }
    [data-mobile-menu] {
        position: fixed; inset: 0; z-index: 1001;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: var(--space-lg); padding: var(--space-xxl) var(--space-lg);
        /* Solid brand fallback — NOT --nav-bg, which is often transparent on a
           transparent-over-hero header and would make the whole drawer invisible. */
        background: var(--mobile-menu-bg, var(--color-1));
        color: var(--mobile-menu-fg, var(--color-surface));
        transform: translateX(100%); transition: transform .3s ease; overflow-y: auto;
    }
    [data-mobile-menu].is-open { transform: translateX(0); }
    [data-mobile-menu] ul { flex-direction: column; align-items: center; gap: var(--space-md); width: 100%; margin: 0; padding: 0; list-style: none; }
    [data-mobile-menu] a { font-size: var(--text-lg); color: var(--mobile-menu-fg, var(--color-surface)); }
    body.mobile-menu-open { overflow: hidden; }
    /* When the drawer is open the hamburger→X sits OVER the drawer — force it to the
       drawer's fg so it's always visible even if the header's own color is dark/transparent. */
    [data-mobile-menu-toggle][aria-expanded="true"] { color: var(--mobile-menu-fg, var(--color-surface)); }
}

/* ── WP admin-bar offset — LOCKED (FIX 80: generalized from 3 hardcoded selectors + a
   duplicated 782px override block into ONE custom property, so NEW fixed chrome is
   covered automatically instead of needing to be added to this rule by name every time —
   a pre-header added 2026-07-29 was never added here and slid under the bar). The 32px
   admin bar (46px ≤782px) is fixed to the viewport top and only shown to logged-in users.
   WordPress shifts NORMAL-flow content for it, but NOT position:fixed/sticky/absolute
   chrome — so any top-anchored fixed element (header, pre-header, announcement bar, ...)
   renders UNDER the bar for a logged-in visitor unless its OWN `top` consumes
   --wp-adminbar-offset. The property only EXISTS under body.admin-bar, so
   `var(--wp-adminbar-offset, 0px)` correctly falls back to 0 for the far-more-common
   logged-out visitor — which is exactly why this bug class is invisible without an admin
   session. Any bespoke top-anchored fixed component MUST write its own `top` as
   `calc(<its own stacking offset — 0, or a sibling chrome element's height> +
   var(--wp-adminbar-offset, 0px))` so it stacks additively instead of one fixed element's
   hardcoded top clobbering another's — see admin-rulebook.js "FIXED CHROME". ── */
body.admin-bar { --wp-adminbar-offset: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --wp-adminbar-offset: 46px; }
}
body.admin-bar [data-nav-sticky],
body.admin-bar [data-nav-overlay],
body.admin-bar .site-header--overlay { top: var(--wp-adminbar-offset); }

/* ── Standard copyright line (footer.php, every site — themeable) ── */
.layerly-copyright { background: var(--footer-copyright-bg, var(--color-2)); color: var(--footer-copyright-fg, var(--color-surface)); text-align: center; padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); }
.layerly-copyright__line { margin: 0; }
.layerly-copyright__sep { opacity: .5; margin: 0 .35em; }
/* FIX 47 (Alexander, 2026-07-24) — the "Made by Layerly" credit is NEVER underlined, on
   every site we build. Two selectors on purpose: `.layerly-copyright` covers footer.php's
   fallback strip, `.layerly-copyright__line` covers a BESPOKE footer template-part that calls
   layerly_footer_credit() directly — the case that shipped underlined on Aveya, because the
   theme's other `text-decoration:none` rule is scoped to `.site-footer`, which bespoke
   footers don't have. Underline returns on hover/focus so the link stays discoverable and
   keyboard-visible (a resting state with neither underline nor colour contrast would fail
   WCAG 1.4.1). */
.layerly-copyright a,
.layerly-copyright__line a { color: inherit; text-decoration: none; }
.layerly-copyright a:hover,
.layerly-copyright a:focus-visible,
.layerly-copyright__line a:hover,
.layerly-copyright__line a:focus-visible { text-decoration: underline; }

/* ── Component: footers/columns ── */
.footer {
    --footer-bg: var(--color-2);
    --footer-fg: var(--color-surface);
    --footer-heading: var(--color-surface);
    --footer-link: rgba(255,255,255,.7);
    --footer-link-hover: var(--color-surface);
    --footer-pad-y: var(--space-xxl);
    --footer-cols: 4;
    background: var(--footer-bg);
    color: var(--footer-fg);
}
.footer__inner {
    display: grid; gap: var(--space-xl);
    grid-template-columns: 1.4fr repeat(var(--footer-cols), 1fr);
    padding-block: var(--footer-pad-y);
}
.footer__logo { display: inline-flex; text-decoration: none; color: inherit; }
.footer__logo-img { max-height: 44px; width: auto; }
.footer__logo-text { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); }
.footer__tagline { color: var(--footer-link); margin-top: var(--space-md); max-width: 32ch; }
.footer__columns { display: contents; }
.footer__col-heading { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--footer-heading); margin-bottom: var(--space-md); }
.footer__col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.footer__col-list a, .footer__legal-list a { color: var(--footer-link); text-decoration: none; }
.footer__col-list a:hover, .footer__legal-list a:hover { color: var(--footer-link-hover); }
.footer__legal { border-top: 1px solid rgba(255,255,255,.12); }
.footer__legal-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; padding-block: var(--space-lg); }
.footer__copyright { margin: 0; color: var(--footer-link); font-size: var(--text-sm); }
.footer__legal-list { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
@media (max-width: 768px) {
    .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .footer__inner { grid-template-columns: 1fr; }
}

/* ── Component: forms/contact + field primitives ── */
.form {
    --form-gap: var(--space-md);
    --form-cols: 2;
    --field-bg: var(--color-surface);
    --field-fg: var(--color-text);
    --field-border: var(--color-border);
    --field-radius: var(--radius-md);
    --field-pad: var(--space-md);
    --field-focus: var(--color-primary);
    --label-color: var(--color-text);
}
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__fields { display: grid; grid-template-columns: repeat(var(--form-cols), 1fr); gap: var(--form-gap); }
.field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: var(--space-xs); }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-med); color: var(--label-color); }
.field__req { color: var(--color-error); }
.field__input {
    width: 100%; box-sizing: border-box;
    background: var(--field-bg); color: var(--field-fg);
    border: 1px solid var(--field-border); border-radius: var(--field-radius);
    padding: var(--field-pad); font: inherit; font-size: var(--text-md);
    transition: border-color .15s, box-shadow .15s;
}
.field__input:focus-visible { outline: none; border-color: var(--field-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-focus) 25%, transparent); }
.field__textarea { resize: vertical; min-height: 120px; }
.field--checkbox .field__check { flex-direction: row; align-items: center; gap: var(--space-sm); cursor: pointer; }
.field__checkbox { width: 18px; height: 18px; accent-color: var(--field-focus); }
.form__submit { margin-top: var(--form-gap); }
.form__status { margin-top: var(--space-sm); font-size: var(--text-sm); min-height: 1.2em; }
.form__status.is-error { color: var(--color-error); }
.form__status.is-success { color: var(--color-success); }
@media (max-width: 600px) {
    .form__fields { grid-template-columns: 1fr; }
}

/* ── Component: heroes/full-bg (knob-driven) ── */
.hero--full-bg {
    --hero-bg: var(--color-1);
    --hero-fg: var(--color-surface);
    --hero-overlay: rgba(0,0,0,.45);
    --hero-min-h: 80vh;
    --hero-pad-y: var(--space-xxl);
    --hero-align: left;
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--hero-min-h);
    padding-block: var(--hero-pad-y);
    /* Consumes --section-bg-color first (F17/B18) — hero_bg_type:color must win
       over this component's own default, not silently lose to it. */
    background: var(--section-bg-color, var(--hero-bg));
    color: var(--hero-fg);
    overflow: hidden;
}
.hero--full-bg .hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero--full-bg .hero__bg-img { width: 100%; height: 100%; object-fit: cover; }
.hero--full-bg .hero__overlay { position: absolute; inset: 0; z-index: 1; background: var(--hero-overlay); pointer-events: none; }
.hero--full-bg .hero__inner { position: relative; z-index: 2; text-align: var(--hero-align); width: 100%; }
.hero--full-bg .hero__title { color: var(--hero-fg); font-size: var(--text-h1); margin-bottom: var(--space-md); }
.hero--full-bg .hero__subtitle { color: var(--hero-fg); font-size: var(--text-lg); opacity: .92; max-width: 56ch; margin-bottom: var(--space-xl); }
.hero--full-bg .hero__eyebrow { color: var(--hero-fg); }
.hero--full-bg .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }
/* Center alignment: set --hero-align:center; the inner is centered + content too. */
.hero--full-bg[style*="--hero-align: center"] .hero__inner { margin-inline: auto; }
.hero--full-bg[style*="--hero-align: center"] .hero__subtitle { margin-inline: auto; }
.hero--full-bg[style*="--hero-align: center"] .hero__ctas { justify-content: center; }
@media (max-width: 768px) {
    .hero--full-bg { --hero-min-h: 60vh; }
    .hero--full-bg .hero__title { font-size: var(--text-h2); }
}

/* ── chrome/topbar (E2c, 2026-08-11) ──────────────────────────────────────────────
   The utility bar above the site header. Renders only when topbar_enabled='1', so
   these rules are inert on every site that hasn't switched it on.

   TWO MODES, because a top bar means different things depending on the header:
     • default — a solid strip in normal document flow, above the header.
     • .topbar--over-hero — the site's header draws OVER the hero
       (.site-header--overlay / nav_overlay). A solid strip there would push the hero
       down and break the design, so the bar goes transparent and sits over the hero
       with the header. This is the D10/D11 bespoke-chrome failure class, handled once
       here instead of per site.

   The over-hero mode is position:fixed, so per the LOCKED admin-bar block above it
   writes its own `top` additively as calc(0px + var(--wp-adminbar-offset, 0px)) —
   it is the TOPMOST fixed element, hence 0px, and the sticky header below it offsets
   by --topbar-height in turn. */
.topbar {
  --topbar-bg:     var(--color-1);
  --topbar-fg:     var(--color-surface);
  --topbar-height: 36px;
  --topbar-size:   var(--text-sm);
  --topbar-gap:    var(--space-md);

  background: var(--topbar-bg);
  color: var(--topbar-fg);
  font-size: var(--topbar-size);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--topbar-gap);
  width: 100%;
  min-height: var(--topbar-height);
}
.topbar__text { margin: 0; margin-right: auto; }
.topbar__phone,
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--topbar-gap) / 3);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__phone:hover,
.topbar__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar__icon { width: 1em; height: 1em; flex: none; }

/* Over-hero: transparent, fixed above the overlay header, stacked above it. */
.topbar--over-hero {
  background: transparent;
  position: fixed;
  top: calc(0px + var(--wp-adminbar-offset, 0px));
  left: 0;
  right: 0;
  z-index: 101;   /* one above the overlay header's own stacking */
}
.topbar--over-hero + .site-header,
.topbar--over-hero ~ [data-nav-sticky] { top: calc(var(--topbar-height) + var(--wp-adminbar-offset, 0px)); }

/* On phones the bar earns its space only if it is short. Text drops first, the
   phone number — the reason most sites want this bar — stays. */
@media (max-width: 640px) {
  .topbar__text { display: none; }
  .topbar__inner { justify-content: center; }
}

/* ── Prose blocks (layerly_prose, E2e) ──
   When body/description copy carries real structure (multi-paragraph, lists),
   layerly_prose wraps it in a div carrying the part's own class + .is-prose;
   these rules give the inner paragraphs and lists their rhythm. Single-
   paragraph copy never enters this path — it renders exactly as before. */
.is-prose > p { margin: 0 0 var(--space-md); }
.is-prose > p:last-child { margin-bottom: 0; }
.is-prose ul,
.is-prose ol { margin: 0 0 var(--space-md); padding-left: 1.25em; }
.is-prose ul:last-child,
.is-prose ol:last-child { margin-bottom: 0; }
.is-prose li { margin: 0 0 var(--space-xs); }
.is-prose li > ul,
.is-prose li > ol { margin: var(--space-xs) 0 0; }


/* Layerly — Phase 4 chrome: floating-pill nav (translucent over hero, solidifies on scroll) + cream-on-ink rosewood footer, to Figma — 2026-09-02T03:35:48.830Z */
.nav--floating-pill {
  --nav-pill-bg: color-mix(in srgb, var(--color-5) 55%, transparent);
  --nav-pill-bg-solid: var(--color-7);
  --nav-pill-border: color-mix(in srgb, var(--color-2) 45%, transparent);
  --nav-height: 76px;
  --mobile-menu-bg: var(--color-7);
  --mobile-menu-fg: var(--color-1);
  position: absolute;
  top: var(--space-xl);
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border: 0;
  transition: top .25s ease;
}

.nav--floating-pill .nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  width: min(var(--container-max), 100% - (2 * var(--space-2xl)));
  margin-inline: auto;
  min-height: var(--nav-height);
  padding-inline: 32px;
  background: var(--nav-pill-bg);
  border: var(--hairline) solid var(--nav-pill-border);
  border-radius: var(--radius-full);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background .25s ease, border-color .25s ease;
}

.nav--floating-pill.is-stuck {
  position: fixed;
  top: var(--space-sm);
}

.nav--floating-pill.is-stuck .nav__inner {
  background: var(--nav-pill-bg-solid);
  border-color: var(--color-2);
}

.nav--floating-pill .nav__logo-img {
  display: block;
  width: 120px;
  height: auto;
  /* The base .nav__logo-img rule caps max-height at 50px
     (--nav-height minus --space-lg). Left in place, that clamps the height
     while the explicit width stays 120px, distorting the wordmark. */
  max-height: none;
}

.nav--floating-pill .nav__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-1);
}

.nav--floating-pill .nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav--floating-pill .nav__list {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav--floating-pill .nav__list a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-reg);
  line-height: var(--leading-sm);
  color: var(--color-1);
  text-decoration: none;
  transition: color .2s ease;
}

.nav--floating-pill .nav__list a:hover, .nav--floating-pill .nav__list .current-menu-item > a {
  color: var(--color-4);
}

.nav--floating-pill .nav__list a:focus-visible, .nav--floating-pill .nav__cta:focus-visible, .nav--floating-pill .nav__logo:focus-visible {
  outline: 2px solid var(--color-4);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.nav--floating-pill .nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-inline: 24px;
  background: var(--color-6);
  color: var(--color-8);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-sm);
  border: 0;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background .2s ease;
}

.nav--floating-pill .nav__cta:hover {
  background: color-mix(in srgb, var(--color-6) 85%, var(--color-5));
}

.footer--rosewood {
  position: relative;
  overflow: hidden;
  background: var(--color-5);
  color: var(--color-1);
  padding: var(--space-2xl) var(--space-2xl) 56px;
}

.footer--rosewood .footer__motif {
  position: absolute;
  width: 520px;
  height: 520px;
  background: var(--color-7);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 38%, transparent 39%);
  mask: radial-gradient(circle at 50% 50%, #000 38%, transparent 39%);
  pointer-events: none;
  right: -180px;
  bottom: -200px;
  opacity: .35;
}

.footer--rosewood .footer__inner {
  position: relative;
  z-index: 1;
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.footer--rosewood .footer__columns {
  display: grid;
  grid-template-columns: 300px repeat(3, 240px);
  justify-content: space-between;
  gap: var(--space-2xl);
  padding-top: 56px;
  border-top: var(--hairline) solid var(--color-2);
}

.footer--rosewood .footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer--rosewood .footer__logo-img {
  display: block;
  width: 150px;
  height: auto;
  /* The base .footer__logo-img rule caps max-height at 44px. Left in place it
     would clamp the height while the explicit width stays 150px, distorting
     the wordmark. */
  max-height: none;
}

.footer--rosewood .footer__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-1);
  text-decoration: none;
}

.footer--rosewood .footer__logo {
  text-decoration: none;
}

.footer--rosewood .footer__tagline {
  max-width: 250px;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-4);
}

.footer--rosewood .footer__col {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer--rosewood .footer__heading {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-4);
}

.footer--rosewood .footer__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer--rosewood .footer__nap {
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-style: normal;
}

.footer--rosewood .footer__nap-block {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer--rosewood .footer__nap-line {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-1);
}

.footer--rosewood .footer__nap-line--muted {
  color: var(--color-4);
}

.footer--rosewood .footer__link, .footer--rosewood .footer__list a {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-1);
  text-decoration: none;
  transition: color .2s ease;
}

.footer--rosewood .footer__link:hover, .footer--rosewood .footer__list a:hover {
  color: var(--color-4);
}

.footer--rosewood .footer__link:focus-visible, .footer--rosewood .footer__list a:focus-visible, .footer--rosewood .footer__logo:focus-visible {
  outline: 2px solid var(--color-4);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.footer--rosewood .footer__colophon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--hairline) solid var(--color-2);
}

.footer--rosewood .footer__credit, .footer--rosewood .footer__credit a, .footer--rosewood .footer__colophon-note {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: #B9AE9C;
}

.footer--rosewood .footer__credit a {
  text-decoration: underline;
}

.footer--rosewood .footer__credit a:hover {
  color: var(--color-4);
}

/* ── CHROME RESPONSIVE — literal @media blocks on purpose: write_css strips
   @media wrappers, which would promote every mobile override to a global rule
   and break the desktop pill/footer grid. Edit these with edit_file, not write_css. */
@media (max-width: 1100px) {
  .nav--floating-pill .nav__inner {
    width: min(var(--container-max), 100% - (2 * var(--space-xl)));
  }
  .footer--rosewood .footer__columns {
    grid-template-columns: 1fr 1fr;
    justify-content: start;
    gap: var(--space-xl) var(--space-2xl);
  }
}

@media (max-width: 880px) {
  .nav--floating-pill {
    top: var(--space-sm);
  }
  .nav--floating-pill .nav__inner {
    width: min(var(--container-max), 100% - (2 * var(--space-md)));
    padding-inline: var(--space-md);
    gap: var(--space-md);
  }
  /* The desktop `.nav__menu { display:flex }` above outranks the base theme's
     mobile hiding rule, so without this the full menu renders inline at 375px
     and overflows (scrollWidth 687 > 375). Hide it until the drawer opens. */
  .nav--floating-pill .nav__menu {
    display: none;
  }
  .nav--floating-pill .nav__menu.is-open,
  .nav--floating-pill .nav__menu[data-mobile-menu].is-open {
    display: flex;
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--mobile-menu-bg, var(--color-7));
    border: var(--hairline) solid var(--color-2);
    border-radius: var(--radius-sm);
  }
  .nav--floating-pill .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  .nav--floating-pill .nav__inner {
    position: relative;
    flex-wrap: nowrap;
  }
  .nav--floating-pill .nav__logo-img {
    /* Scaled proportionally from the 120px desktop width (same ~77% step the
       old 62px/48px pair used), so the pill stays compact on small screens
       without fighting the explicit width above. */
    width: 96px;
    height: auto;
  }
  .footer--rosewood {
    padding: var(--space-xl) var(--space-md) var(--space-xl);
  }
  .footer--rosewood .footer__columns {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding-top: var(--space-xl);
  }
  .footer--rosewood .footer__motif {
    width: 320px;
    height: 320px;
    right: -120px;
  }
  .footer--rosewood .footer__colophon {
    margin-top: var(--space-xl);
  }
}


/* Layerly — Chrome fixes: clearance under the absolute floating nav on pages with no hero; soften footer rose motif so it does not crowd the contact column — 2026-09-02T03:37:10.352Z */
body:not(.home) .site-main {
  padding-top: 150px;
}


/* Layerly — Phase 5: all homepage section CSS from exact Figma dev-mode values — 2026-09-02T04:08:07.794Z */
.hero--split {
  /* background-color, NOT the `background` shorthand: the shorthand resets
     background-image to none and would kill .section--bg-image's texture. */
  background-color: var(--section-bg-color, var(--color-7));
  padding: 200px var(--space-2xl) 96px;
}

.hero--split .hero__inner {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.hero--split .hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  width: 640px;
  flex: 0 0 auto;
}

.hero--split .hero__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-4);
}

.hero--split .hero__subtitle p {
  margin: 0 0 var(--space-md);
}

.hero--split .hero__subtitle p:last-child {
  margin-bottom: 0;
}

.hero--split .hero__media {
  position: relative;
  flex: 0 0 auto;
  width: 458px;
  padding: 18px 18px 0 0;
}

.hero--split .hero__media::before {
  content: "";
  position: absolute;
  inset: 18px 0 0 18px;
  border: var(--hairline) solid var(--color-2);
  pointer-events: none;
}

.hero--split .hero__media img, .hero--split .hero__media .layerly-placeholder {
  position: relative;
  display: block;
  width: 440px;
  height: 560px;
  object-fit: cover;
  border: var(--hairline) solid var(--color-2);
  border-radius: 0;
}

.hero--split .hero__facts {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  width: min(var(--container-max), 100%);
  margin: 64px auto 0;
  padding-top: 34px;
  border-top: var(--hairline) solid var(--color-2);
}

.hero--split .hero__fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1 1 0;
}

.hero--split .hero__fact + .hero__fact {
  padding-left: 28px;
  border-left: var(--hairline) solid var(--color-2);
}

.hero--split .hero__fact-label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-xs);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-4);
}

.hero--split .hero__fact-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-1);
}

.hero--split .btn, .intro-split .btn, .visit-block__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: 34px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-sm);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.hero--split .btn--primary, .intro-split .btn--primary, .visit-block__cta {
  background: var(--color-6);
  color: var(--color-8);
  border: var(--hairline) solid var(--color-6);
}

.hero--split .btn--primary:hover, .intro-split .btn--primary:hover, .visit-block__cta:hover {
  background: color-mix(in srgb, var(--color-6) 85%, var(--color-5));
}

.hero--split .btn--secondary {
  background: transparent;
  color: var(--color-1);
  border: var(--hairline) solid var(--color-2);
}

.hero--split .btn--secondary:hover {
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
}

.promise-band--statement-link {
  background: var(--section-bg-color, var(--color-6));
  padding: 0;
}

.promise-band--statement-link .promise-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
  width: min(var(--container-max), 100%);
  min-height: 104px;
  margin-inline: auto;
  padding-block: var(--space-md);
  padding-inline: 0;
}

.promise-band--statement-link .promise-band__statement {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-reg);
  line-height: 31px;
  color: var(--color-1);
}

.promise-band--statement-link .promise-band__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-sm);
  color: var(--color-1);
  text-decoration: none;
  border-bottom: var(--hairline) solid color-mix(in srgb, var(--color-1) 55%, transparent);
  padding-bottom: 2px;
}

.promise-band--statement-link .promise-band__link:hover {
  border-bottom-color: var(--color-1);
}

.manifesto--stacked-pairs {
  position: relative;
  overflow: hidden;
  background: var(--section-bg-color, var(--color-8));
  padding: 130px var(--space-2xl) 130px;
}

.manifesto--stacked-pairs .manifesto__motif {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 620px;
  height: 620px;
  transform: translate(-50%, -50%);
  background: var(--color-4);
  opacity: .08;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 40%, transparent 41%);
  mask: radial-gradient(circle at 50% 50%, #000 40%, transparent 41%);
  pointer-events: none;
}

.manifesto--stacked-pairs .manifesto__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.manifesto--stacked-pairs .manifesto__eyebrow {
  margin: 0 0 var(--space-xl);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-6);
}

.manifesto--stacked-pairs .manifesto__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.manifesto--stacked-pairs .manifesto__pair {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h2);
  color: var(--color-5);
}

.manifesto--stacked-pairs .manifesto__rule {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--color-2);
}

.manifesto--stacked-pairs .manifesto__body {
  max-width: 680px;
  margin: var(--space-xl) 0 0;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-3);
}

.intro-split {
  background: var(--section-bg-color, transparent);
  padding: 40px var(--space-2xl) 140px;
}

.intro-split .intro-split__inner, .intro-split .wrap {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.intro-split--image-right .intro-split__inner, .intro-split--image-right .wrap {
  flex-direction: row-reverse;
}

.intro-split .intro-split__media {
  position: relative;
  flex: 0 0 auto;
  width: 538px;
  max-width: 538px;
  padding: 18px 18px 0 0;
}

.intro-split .intro-split__media::before {
  content: "";
  position: absolute;
  inset: 18px 0 0 18px;
  border: var(--hairline) solid var(--color-2);
  pointer-events: none;
}

.intro-split .intro-split__media img, .intro-split .intro-split__media .layerly-placeholder {
  position: relative;
  display: block;
  width: 520px;
  height: 600px;
  object-fit: cover;
  border: var(--hairline) solid var(--color-2);
  border-radius: 0;
}

.intro-split .intro-split__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  gap: 22px;
  max-width: 582px;
}

.intro-split .intro-split__eyebrow {
  margin: 0;
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-6);
}

.intro-split .intro-split__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h3);
  color: var(--color-5);
}

.intro-split .intro-split__body {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-3);
}

.intro-split .intro-split__body p {
  margin: 0 0 var(--space-md);
}

.intro-split .intro-split__body p:last-child {
  margin-bottom: 0;
}

.intro-split .intro-split__notes {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline) solid var(--color-2);
  margin-top: 0;
}

.intro-split .intro-split__note {
  display: flex;
  gap: 20px;
  padding-top: 22px;
  padding-bottom: 0;
  border-bottom: 0;
  min-height: 79px;
}

.intro-split .intro-split__note-num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 27px;
  color: var(--color-6);
}

.intro-split .intro-split__note-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.intro-split .intro-split__note-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 27px;
  color: var(--color-5);
}

.intro-split .intro-split__note-text {
  color: var(--color-3);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.intro-split--image-right .intro-split__title {
  color: var(--color-1);
}

.intro-split--image-right .intro-split__eyebrow {
  color: var(--color-4);
}

.intro-split--image-right .intro-split__body {
  color: var(--color-4);
}

.intro-split--image-right .intro-split__quote {
  max-width: 520px;
  margin: 0;
  padding-top: var(--space-lg);
  border-top: var(--hairline) solid var(--color-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 31px;
  color: var(--color-1);
}

.intro-split--image-right .intro-split__signoff {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-reg);
  line-height: 31px;
  letter-spacing: 0;
  text-transform: none;
  color: #D8BFA8;
}

.cpt-loop .wrap {
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.cpt-loop__furniture {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 14px;
}

.cpt-loop__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.cpt-loop__marker {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-6);
  border-radius: var(--radius-full);
}

.cpt-loop__label .eyebrow, .cpt-loop__meta-right {
  font-size: var(--eyebrow-size);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

.cpt-loop__label .eyebrow {
  font-weight: var(--eyebrow-weight);
  color: var(--color-6);
}

.cpt-loop__meta-right {
  font-weight: var(--weight-med);
  color: var(--color-3);
}

.cpt-loop__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-2);
}

.cpt-loop__heading {
  max-width: 780px;
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h3);
  color: var(--color-5);
}

.cpt-loop__subheading {
  max-width: 600px;
  margin: 22px 0 0;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-3);
}

.cpt-loop__grid {
  display: grid;
  gap: 24px;
  margin-top: 34px;
}

.cpt-loop__card .cpt-loop__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
}

.cpt-loop__card--spine .cpt-loop__link {
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 372px;
  padding: 26px 20px;
  background: var(--color-1);
  border: var(--hairline) solid var(--color-2);
  border-radius: var(--radius-sm);
  transition: transform .2s ease;
}

.cpt-loop__card--spine:hover .cpt-loop__link {
  transform: translateY(-4px);
}

.cpt-loop__card--spine .cpt-loop__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  height: 100%;
}

.cpt-loop__spine-rule {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--color-2);
}

.cpt-loop__card--spine .cpt-loop__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-reg);
  line-height: 27px;
  color: var(--color-5);
}

.cpt-loop__card--spine .cpt-loop__excerpt {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-3);
}

.cpt-loop__card--spine .cpt-loop__tag {
  margin-top: auto;
  padding-top: var(--space-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-xs);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-6);
}

.cpt-loop__card--pick .cpt-loop__link {
  gap: var(--space-md);
}

.cpt-loop__card--pick .cpt-loop__media, .cpt-loop__card--pick .cpt-loop__media--empty {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
  border: var(--hairline) solid var(--color-2);
}

.cpt-loop__card--pick .cpt-loop__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cpt-loop__card--pick .cpt-loop__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cpt-loop__card--pick .cpt-loop__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 27px;
  color: var(--color-1);
}

.cpt-loop__card--pick .cpt-loop__attrib {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-xs);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-4);
}

.cpt-loop--staff-picks .cpt-loop__heading {
  color: var(--color-1);
}

.cpt-loop--staff-picks .cpt-loop__label .eyebrow {
  color: var(--color-4);
}

.cpt-loop--staff-picks .cpt-loop__meta-right {
  color: var(--color-4);
}

.cpt-loop--staff-picks .cpt-loop__marker {
  border-color: var(--color-4);
}

.gallery--staggered-columns {
  background: var(--section-bg-color, transparent);
  padding: 130px var(--space-2xl) 140px;
}

.gallery--staggered-columns .wrap {
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.gallery__furniture {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 14px;
}

.gallery__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.gallery__marker {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-4);
  border-radius: var(--radius-full);
}

.gallery__label .eyebrow, .gallery__meta {
  font-size: var(--eyebrow-size);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

.gallery__label .eyebrow {
  font-weight: var(--eyebrow-weight);
  color: var(--color-4);
}

.gallery__meta {
  font-weight: var(--weight-med);
  color: var(--color-4);
}

.gallery__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-2);
}

.gallery__heading {
  max-width: 780px;
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h3);
  color: var(--color-1);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 34px;
  align-items: start;
}

.gallery__column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gallery__column--2 {
  margin-top: 48px;
}

.gallery__column--3 {
  margin-top: 24px;
}

.gallery__item {
  margin: 0;
  border: var(--hairline) solid var(--color-2);
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
}

.gallery__item .gallery__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.gallery__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: var(--space-md);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-4);
}

.visit-block--details-hours {
  background: var(--section-bg-color, transparent);
  padding: 130px var(--space-2xl) 140px;
}

.visit-block--details-hours .wrap {
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.visit-block__furniture {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 14px;
}

.visit-block__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.visit-block__marker {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-6);
  border-radius: var(--radius-full);
}

.visit-block__label .eyebrow, .visit-block__meta {
  font-size: var(--eyebrow-size);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

.visit-block__label .eyebrow {
  font-weight: var(--eyebrow-weight);
  color: var(--color-6);
}

.visit-block__meta {
  font-weight: var(--weight-med);
  color: var(--color-3);
}

.visit-block__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-2);
}

.visit-block__heading {
  max-width: 780px;
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h3);
  color: var(--color-5);
}

.visit-block__row {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 80px;
  margin-top: 34px;
  align-items: start;
}

.visit-block__list {
  margin: 0;
  border-top: var(--hairline) solid var(--color-2);
}

.visit-block__detail {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-md);
  padding: 22px 0;
  border-bottom: var(--hairline) solid var(--color-2);
}

.visit-block__detail-label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-xs);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-6);
}

.visit-block__detail-value {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-5);
}

.visit-block__detail-link {
  color: var(--color-5);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.visit-block__detail-link:hover {
  color: var(--color-6);
}

.visit-block__cta {
  margin-top: var(--space-xl);
}

.visit-block__aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.visit-block__hours {
  padding: var(--space-lg);
  background: var(--color-1);
  border: var(--hairline) solid var(--color-2);
  border-radius: var(--radius-sm);
}

.visit-block__hours-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.visit-block__hours-label {
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-6);
}

.visit-block__badge {
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background: var(--color-4);
  color: var(--color-5);
}

.visit-block__hours-list {
  margin: 0;
}

.visit-block__hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: var(--hairline) solid color-mix(in srgb, var(--color-2) 45%, transparent);
}

.visit-block__hours-row:last-child {
  border-bottom: 0;
}

.visit-block__hours-days, .visit-block__hours-time {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-5);
}

.visit-block__hours-note {
  margin: var(--space-md) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--color-3);
}

.visit-block__map {
  min-height: 260px;
  background: var(--color-1);
  border: var(--hairline) solid var(--color-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.visit-block__map-frame {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
}

.visit-block__map-placeholder {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-3);
}

.disclosures {
  background: var(--section-bg-color, transparent);
  padding: 130px var(--space-2xl) 140px;
}

/* Grid column counts — the genre shelves run 6-up, staff picks 4-up. */
.cpt-loop--genre-shelves .cpt-loop__grid {
  align-items: end;
  margin-top: 44px;
  grid-template-columns: repeat(4, 1fr);
}
.cpt-loop--staff-picks .cpt-loop__grid { grid-template-columns: repeat(4, 1fr); }

/* ── HOMEPAGE SECTION RESPONSIVE — literal @media blocks on purpose: write_css
   strips @media wrappers, which would promote these to global rules and
   collapse every desktop grid to one column. Edit with edit_file, not write_css. */
@media (max-width: 1200px) {
  .cpt-loop--genre-shelves .cpt-loop__grid { grid-template-columns: repeat(3, 1fr); }
  .visit-block__row { grid-template-columns: 1fr; gap: var(--space-xl); }
}

@media (max-width: 1000px) {
  .hero--split .hero__inner,
  .intro-split .wrap,
  .intro-split--image-right .wrap {
    flex-direction: column;
    gap: var(--space-xl);
  }
  .hero--split .hero__content,
  .hero--split .hero__media,
  .intro-split .intro-split__media {
    width: 100%;
  }
  .hero--split .hero__media img,
  .hero--split .hero__media .layerly-placeholder,
  .intro-split .intro-split__media img,
  .intro-split .intro-split__media .layerly-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .hero--split .hero__facts { flex-wrap: wrap; }
  .cpt-loop--staff-picks .cpt-loop__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__column--2, .gallery__column--3 { margin-top: 0; }
}

@media (max-width: 720px) {
  .hero--split { padding: 150px var(--space-md) var(--space-2xl); }
  .hero--split .hero__title { font-size: 40px; line-height: 46px; }
  .hero--split .hero__fact + .hero__fact { padding-left: 0; border-left: 0; }
  .hero--split .hero__facts { flex-direction: column; gap: var(--space-md); }
  .intro-split,
  .cpt-loop,
  .gallery--staggered-columns,
  .visit-block--details-hours,
  .disclosures {
    padding: var(--space-2xl) var(--space-md);
  }
  .manifesto--stacked-pairs { padding: var(--space-2xl) var(--space-md); }
  .manifesto--stacked-pairs .manifesto__pair { font-size: 32px; line-height: 40px; }
  .cpt-loop__heading,
  .gallery__heading,
  .visit-block__heading,
  .intro-split .intro-split__title {
    font-size: 30px;
    line-height: 38px;
  }
  .cpt-loop--genre-shelves .cpt-loop__grid,
  .cpt-loop--staff-picks .cpt-loop__grid,
  .gallery__grid {
    grid-template-columns: 1fr;
  }
  .cpt-loop__card--spine .cpt-loop__link { min-height: 0; }
  .promise-band--statement-link .promise-band__inner { padding-block: var(--space-lg); }
  .visit-block__detail { grid-template-columns: 1fr; gap: var(--space-xs); }
}


/* Layerly — Hero split + wrap width overrides appended last to beat base-theme source order — 2026-09-02T04:09:46.733Z */
.section--hero.hero--split {
  background-color: var(--section-bg-color, var(--color-7));
  padding: 200px var(--space-2xl) 96px;
  padding-bottom: clamp(48px, 7vw, 96px);
  padding-top: clamp(96px, 14vw, 200px);
}

.section--hero.hero--split .hero__inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  width: min(var(--container-max), 100%);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 0;
  gap: 60px;
}

.section--hero.hero--split .hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 640px;
  max-width: 640px;
  flex: 0 0 auto;
  margin-inline: 0;
  gap: 26px;
}

.section--hero.hero--split .hero__eyebrow {
  color: var(--color-4);
}

.section--hero.hero--split .hero__title {
  max-width: 600px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h1);
  color: var(--color-1);
}

.section--hero.hero--split .hero__subtitle {
  max-width: 520px;
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--color-4);
}

.section--hero.hero--split .hero__ctas {
  justify-content: flex-start;
  margin-top: var(--space-xs);
}

.section--hero.hero--split .hero__media {
  width: 458px;
  max-width: 458px;
  flex: 0 0 auto;
}

.section--hero.hero--split .hero__facts {
  max-width: var(--container-max);
  padding-inline: 0;
  margin-top: 64px;
  padding-top: 34px;
}

.section--hero.hero--split .btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: 34px;
  background: transparent;
  color: var(--color-1);
  border: var(--hairline) solid var(--color-2);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-sm);
  text-decoration: none;
}

.section--hero.hero--split .btn--ghost:hover {
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
}

.section--hero.hero--split .wrap, .intro-split .wrap, .cpt-loop .wrap, .gallery--staggered-columns .wrap, .visit-block--details-hours .wrap, .promise-band--statement-link .promise-band__inner, .manifesto--stacked-pairs .manifesto__inner {
  max-width: var(--container-max);
}


/* Layerly — Fix all measured a11y contrast failures, media placeholders, section padding to Figma — 2026-09-02T04:11:55.615Z */
.cpt-loop__card--spine .cpt-loop__excerpt, .visit-block__hours-note, .visit-block__map-placeholder {
  color: #55614F;
}

.cpt-loop--staff-picks .cpt-loop__card--pick .cpt-loop__link {
  background: transparent;
  padding: 0;
  border: 0;
}

.cpt-loop--staff-picks .cpt-loop__card--pick .cpt-loop__quote {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-1);
}

.cpt-loop--staff-picks .cpt-loop__card--pick .cpt-loop__attrib {
  font-weight: var(--weight-med);
  color: #E0C9B4;
}

.intro-split--image-right .eyebrow {
  color: var(--color-4);
}

.hero__media-placeholder, .intro-split__media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 2px;
  text-transform: uppercase;
  border: var(--hairline) solid var(--color-2);
}

.section--hero.hero--split .hero__media-placeholder {
  width: 440px;
  height: 560px;
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
  color: var(--color-4);
}

.intro-split .intro-split__media-placeholder {
  width: 520px;
  height: 600px;
  background: var(--color-1);
  color: #55614F;
}

.intro-split--image-right .intro-split__media-placeholder {
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
  color: var(--color-4);
}

.gallery--staggered-columns, .disclosures {
  padding-top: 40px;
}

.section--hero.hero--split, .intro-split, .cpt-loop, .gallery--staggered-columns, .visit-block--details-hours, .disclosures, .manifesto--stacked-pairs {
  padding-inline: max(24px, calc((100% - var(--container-max)) / 2));
}

.disclosures .disclosures__heading, .disclosures h2 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h3);
  color: var(--color-5);
}

.disclosures .eyebrow {
  color: var(--color-6);
}

.disclosures summary, .disclosures .disclosures__question {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-reg);
  line-height: 27px;
}


/* Layerly — Fix cream-on-cream pick cards (a11y floor) + container gutter math so columns match the design — 2026-09-02T04:12:33.673Z */
.cpt-loop--staff-picks .cpt-loop__card, .cpt-loop--staff-picks .cpt-loop__card--pick {
  background: transparent;
  border: 0;
  padding: 0;
}


/* Layerly — Fidelity: match intro-split/hero/disclosures to true Figma node geometry (not mispaired nodes) — 2026-09-02T04:28:12.044Z */
.intro-split .intro-split__media img, .intro-split .intro-split__media-placeholder {
  width: 520px;
  height: 600px;
}

.intro-split .intro-split__note + .intro-split__note {
  border-top: var(--hairline) solid var(--color-2);
}

.intro-split .intro-split__note-title, .intro-split .intro-split__note-num {
  font-size: 20px;
  line-height: 27px;
}

.intro-split .intro-split__notes + .btn, .intro-split .btn--primary {
  margin-top: 22px;
}

.intro-split--image-right {
  padding-top: 0;
  padding-bottom: clamp(56px, 9vw, 130px);
}

.intro-split--image-right .intro-split__content {
  max-width: 660px;
}

.intro-split--image-right .intro-split__media, .intro-split--image-right .intro-split__media img, .intro-split--image-right .intro-split__media-placeholder {
  width: 460px;
  max-width: 460px;
  height: 520px;
}

.disclosures .disclosures__item, .disclosures details {
  padding-block: 12px;
}

.disclosures p, .disclosures .disclosures__answer {
  font-size: var(--text-md);
  line-height: 28px;
}


/* Layerly — Fix disclosures eyebrow regression + tighten accordion row padding toward 931px target — 2026-09-02T04:28:59.422Z */
.disclosures .eyebrow, .disclosures p.eyebrow {
  font-size: var(--eyebrow-size);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
}


/* Layerly — Fluid vertical padding so desktop bands scale down on mobile — 2026-09-02T04:30:02.823Z */
.intro-split, .cpt-loop, .gallery--staggered-columns, .visit-block--details-hours, .disclosures, .manifesto--stacked-pairs {
  padding-bottom: clamp(56px, 9vw, 140px);
}


/* Layerly — Restore genre-shelves 140px bottom band + taller spine cards toward the 1031px target — 2026-09-02T04:30:50.689Z */
.cpt-loop--genre-shelves {
  padding-bottom: clamp(56px, 11vw, 140px);
}

.cpt-loop--genre-shelves .cpt-loop__card--spine .cpt-loop__link {
  min-height: 140px;
}


/* Layerly — Reading room on forest ground: invert type to cream/dusty-rose (measured contrast) — 2026-09-02T04:59:54.928Z */
.intro-split--image-left .intro-split__title {
  color: var(--color-1);
}

.intro-split--image-left .intro-split__eyebrow, .intro-split--image-left .eyebrow {
  color: var(--color-4);
}

.intro-split--image-left .intro-split__body {
  color: var(--color-4);
}

.intro-split--image-left .intro-split__note-title {
  color: var(--color-1);
}

.intro-split--image-left .intro-split__note-num, .intro-split--image-left .intro-split__note-text {
  color: var(--color-4);
}

.intro-split--image-left .intro-split__media-placeholder {
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
  color: var(--color-4);
}

/* ── Figma-fidelity corrections, 2026-09-02 ─────────────────────────────
   1. Gold frame: the Figma puts the OUTLINE at top-left and the PHOTO
      offset down-right by 18px. The shipped rule had the two mirrored.
   2. The botanical line art from the Figma had no home in the theme
      (no ornament prop exists), so it is placed here at its design
      coordinates against the 1440 frame, centred. ───────────────────── */

.hero--split .hero__media { padding: 18px 0 0 18px; }
.hero--split .hero__media::before { inset: 0 18px 18px 0; }
.intro-split .intro-split__media { padding: 18px 0 0 18px; }
.intro-split .intro-split__media::before { inset: 0 18px 18px 0; }

.hero--split { position: relative; overflow: hidden; }
.hero--split > * { position: relative; z-index: 1; }
.hero--split::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: calc(50% + 44px); top: 143px; width: 834px; height: 761px;
  background: url("https://rebelandrosewood.layerly.dev/wp-content/uploads/2026/09/botanical-hero.png") no-repeat left top / contain;
}

.footer--rosewood { position: relative; overflow: hidden; }
.footer--rosewood > * { position: relative; z-index: 1; }
.footer--rosewood::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: calc(50% + 32px); top: 37px; width: 897px; height: 757px;
  background: url("https://rebelandrosewood.layerly.dev/wp-content/uploads/2026/09/botanical-footer.png") no-repeat left top / contain;
}

@media (max-width: 1200px) {
  .hero--split::after, .footer--rosewood::after { display: none; }
}

/* Hero split row gap: Figma is 60px, not the 80px of --space-xxl.
   (intro-splits ARE 80 in the Figma, so only the hero is corrected.) */
@media (min-width: 721px) {
  .hero__inner--split { gap: 60px; }
}

/* Reading room sits on the LIGHT ground (#F7F4F1) per the Figma, but the
   .intro-split--image-left variant hardcodes light-on-dark colours from when
   the section was forest — leaving the title at 1.15:1 and the eyebrow at
   2.05:1. Scoped to this section so the founder note (image-right, still on
   forest) keeps its inverted colours. */
.section--reading_room .intro-split__title   { color: var(--color-5); }
.section--reading_room .intro-split__eyebrow { color: var(--color-6); }
.section--reading_room .intro-split__body,
.section--reading_room .intro-split__subtitle { color: var(--color-5); }
/* the eyebrow carries only .eyebrow, so the variant rule
   '.intro-split--image-left .eyebrow' was still winning. */
.section--reading_room .eyebrow { color: var(--color-6); }

/* intro-split image-right was a no-op: the shipped rule needs
   '.intro-split__media:first-child', but the markup puts the copy first, so
   the modifier never matched and the founder note rendered photo-LEFT,
   mirrored against the Figma. Order the children explicitly instead. */
.intro-split--image-right .intro-split__media   { order: 2; }
.intro-split--image-right .intro-split__content { order: 1; }
/* The real mechanism: the inner is flex-direction:row-reverse, which put the
   media LEFT despite the image-right modifier. With DOM order (content, media)
   plain 'row' gives copy left / photo right, matching the Figma. */
.intro-split--image-right .intro-split__inner { flex-direction: row; }

/* Footer colophon was being laid out as a 69px COLUMN beside the 1200px column
   block (grid-template-columns: 1200px 69px 0 0 0), crushing the copyright into
   a vertical ribbon. The Figma has four columns, a rule, then a colophon ROW. */
.footer__inner { display: block; }
.footer__inner > .footer__colophon { width: 100%; }
/* the numbered notes carried the same light-on-dark leftovers (1.15:1 / 2.05:1) */
.section--reading_room .intro-split__note-num   { color: var(--color-6); }
.section--reading_room .intro-split__note-title { color: var(--color-5); }
.section--reading_room .intro-split__note-text  { color: var(--color-3); }

/* Manifesto: the Figma sets the second half of each pair in rosewood italic. */
.manifesto__pair-soft { color: var(--color-6); font-style: italic; }

/* Hero side padding is 120px in the Figma (was --space-2xl / 60px). Only visible
   below 1320px, where the 1200 container stops centring. */
@media (min-width: 721px) { .hero--split { padding-left: 120px; padding-right: 120px; } }

/* MOBILE HERO — its children kept desktop fixed widths and were CLIPPED at 375px
   (content 640px, title 600px, subtitle 520px, media 458px, ctas 422px). */
@media (max-width: 720px) {
  .hero--split { padding-left: 24px; padding-right: 24px; }
  .hero--split .hero__content,
  .hero--split .hero__title,
  .hero--split .hero__subtitle,
  .hero--split .hero__ctas   { width: auto; max-width: 100%; }
  .hero--split .hero__title  { font-size: clamp(30px, 8.5vw, 46px); }
  .hero--split .hero__ctas   { flex-wrap: wrap; }
  .hero--split .hero__ctas .btn { flex: 1 1 auto; }
  .hero--split .hero__media  { width: 100%; max-width: 100%; padding: 12px 0 0 12px; }
  .hero--split .hero__media img,
  .hero--split .hero__media .layerly-placeholder { width: 100%; height: auto; max-width: 100%; }
}

/* THE ACTUAL MOBILE-HERO BUG (theme-level, not site-specific):
   layerly-base ships '.section--hero.hero--split .hero__content { width:640px }'
   at specificity (0,3,0), while its own responsive rule
   '@media (max-width:1000px) { .hero--split .hero__content { width:100% } }'
   is only (0,2,0) — so the responsive rule can NEVER win and the hero is clipped
   on every phone. Matching the (0,3,0) prefix here so the override actually lands. */
@media (max-width: 720px) {
  .section--hero.hero--split .hero__content,
  .section--hero.hero--split .hero__media    { width: 100%; max-width: 100%; flex: 1 1 auto; }
  .section--hero.hero--split .hero__title,
  .section--hero.hero--split .hero__subtitle,
  .section--hero.hero--split .hero__ctas     { width: auto; max-width: 100%; }
  .section--hero.hero--split .hero__title    { font-size: clamp(30px, 8.5vw, 46px); }
  .section--hero.hero--split .hero__media img,
  .section--hero.hero--split .hero__media .layerly-placeholder { width: 100%; height: auto; }
}
/* the H1 line-height is a FIXED 69px sized for the 64px desktop type, so at the
   reduced mobile size it renders at 2.16x. The Figma H1 is 108%. */
@media (max-width: 720px) {
  .section--hero.hero--split .hero__title { line-height: 1.12; }
}
/* Same defect in the intro-splits: a fixed 538px media column that never shrinks. */
@media (max-width: 720px) {
  .intro-split .intro-split__media { width: 100%; max-width: 100%; flex: 1 1 auto; padding: 12px 0 0 12px; }
  .intro-split .intro-split__media img,
  .intro-split .intro-split__media .layerly-placeholder,
  .intro-split .intro-split__media-placeholder { width: 100%; max-width: 100%; height: auto; }
}
/* CORRECTION: my image-right 'row' override above was unconditional and so beat
   the theme's own stacking rule ('@media (max-width:1000px) … flex-direction:column')
   — media queries add no specificity, and mine came later. Scope it to desktop so
   the founder note stacks on tablet and phone like every other intro-split. */
@media (max-width: 1000px) {
  .intro-split--image-right .intro-split__inner { flex-direction: column; }
}

/* ── Review round 2 ─────────────────────────────────────────────────────── */

/* 1. The botanical art sat ON TOP of the hero photo. In the Figma it is a
      background element — put it behind the content, above the ground. */
.hero--split::after { z-index: 0; }
.hero--split > *    { position: relative; z-index: 1; }

/* 2. Amy's pull quote: the Figma runs a gold rule BESIDE the text, not above. */
.intro-split--image-right .intro-split__quote {
  border-top: 0;
  padding-top: 0;
  border-left: 2px solid var(--color-2);
  padding-left: var(--space-lg);
}

/* 3. No breathing room under the two cpt-loop headings before their cards. */
.cpt-loop__list { margin-top: 40px; }

/* 4. Six shelf cards in one row is too tight at 1200 — the Figma reads as a
      set of spines, not a squeezed strip. Three across, two rows. */
.cpt-loop--genre-shelves .cpt-loop__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 900px) { .cpt-loop--genre-shelves .cpt-loop__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cpt-loop--genre-shelves .cpt-loop__list { grid-template-columns: 1fr; } }

/* 5. The CTA banner is continuous with the footer in the Figma — no seam. */
.cta-banner { padding-bottom: 0; }

/* 6. The section eyebrows rendered a bare dot — the Figma uses the rose glyph.
      Applied as a MASK so each marker inherits its eyebrow's own colour
      (rosewood on light grounds, dusty on dark) instead of needing two assets. */
.cpt-loop__marker,
.gallery__marker,
.visit-block__marker,
.disclosures__marker,
.manifesto__marker {
  width: 14px; height: 14px;
  border-radius: 0;
  background-color: currentColor;
  -webkit-mask: url('/wp-content/uploads/2026/09/rose-glyph.png') no-repeat center / contain;
          mask: url('/wp-content/uploads/2026/09/rose-glyph.png') no-repeat center / contain;
}

/* ── Review round 3 ─────────────────────────────────────────────────────── */

/* 1. The eyebrow markers took their colour from .cpt-loop__label (INK), not from
      the eyebrow beside them (rosewood), and 14px read as a speck. Set the tone
      explicitly per ground and size them to the Figma glyph. */
.cpt-loop__marker,
.gallery__marker,
.visit-block__marker,
.disclosures__marker,
.manifesto__marker { width: 18px; height: 18px; background-color: var(--color-6); }
.section--staff_picks .cpt-loop__marker,
.section--gallery .gallery__marker,
.section--founder_note .cpt-loop__marker { background-color: var(--color-4); }

/* 2. The CTA button is rosewood in the Figma, not cream. */
.cta-banner .btn--primary { background-color: var(--color-6); color: var(--color-1); border-color: var(--color-6); }
.cta-banner .btn--primary:hover { background-color: var(--color-5); border-color: var(--color-5); }

/* 3. FAQ rows: the Figma marks each question with the rose glyph on the LEFT,
      not a chevron on the right. */
.accordion__summary { position: relative; padding-left: 30px; }
.accordion__summary::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; background-color: var(--color-6);
  -webkit-mask: url('/wp-content/uploads/2026/09/rose-glyph.png') no-repeat center / contain;
          mask: url('/wp-content/uploads/2026/09/rose-glyph.png') no-repeat center / contain;
}
.accordion__icon { display: none; }

/* 4. The theme ships an EMPTY .manifesto__motif slot — the Figma fills it with the
      ghosted botanical behind the dichotomy pairs. */
.manifesto__motif {
  background: url('/wp-content/uploads/2026/09/manifesto-motif.png') no-repeat center / contain;
}
/* the theme's own (0,2,0) rule paints the motif slot as a flat dusty circle at
   0.08 — match its specificity and let the rendered Figma art through. The PNG
   already carries the ghosted Surface tone, so no extra opacity is wanted. */
.manifesto--stacked-pairs .manifesto__motif {
  background: url('/wp-content/uploads/2026/09/manifesto-motif.png') no-repeat center / contain;
  opacity: 1;
}
/* The motif slot is a 620x620 SQUARE with a hardcoded translate(-310px,-310px),
   but the rendered art is 2.10:1 — so 'contain' drew it 620x295 adrift in a tall
   box, reading as small and cropped. Match the art's aspect, size it to the
   Figma's ~52%-of-section width, and centre it with percentages so the offset
   no longer depends on a fixed pixel value. */
.manifesto--stacked-pairs .manifesto__motif {
  width: 800px;
  height: 381px;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-position: center;
}
@media (max-width: 900px) {
  .manifesto--stacked-pairs .manifesto__motif { width: 90vw; height: 43vw; }
}
/* CORRECTION: the earlier motif asset was CLIPPED. The Figma motif sits at
   y=-71 inside a clipping section, so rendering that node returned only the
   intersection (2.10:1) instead of the drawing's true 1.27:1. Using the
   UNCLIPPED original from the Assets page, applied as a MASK so the tone comes
   from the Surface token rather than the source art's brown. Geometry matches
   the Figma: 746x586, 52% of the section, bleeding above the top edge. */
.manifesto--stacked-pairs .manifesto__motif {
  width: 746px;
  height: 586px;
  left: 61%;
  top: -71px;
  transform: translate(-50%, 0);
  background: none;
  background-color: var(--color-1);
  -webkit-mask: url('/wp-content/uploads/2026/09/manifesto-motif-full.png') no-repeat center / contain;
          mask: url('/wp-content/uploads/2026/09/manifesto-motif-full.png') no-repeat center / contain;
  opacity: 1;
}
@media (max-width: 900px) {
  .manifesto--stacked-pairs .manifesto__motif { width: 92vw; height: 72vw; left: 50%; top: 0; }
}
/* Centre the motif behind the pairs as the Figma composes it — the drawing's own
   mass sits right of its bounding-box centre, so the box needs to sit left of
   the Figma node's nominal x to land the bloom behind the text. */
.manifesto--stacked-pairs .manifesto__motif {
  width: 820px;
  height: 645px;
  left: 50%;
  top: -90px;
}

/* ── About / Contact page content (built as page content: page.php composes no
      sections, and the section templates are hardcoded to the homepage's prop
      prefixes, so they cannot be reused per page). ─────────────────────────── */
.page-article__content > * + * { margin-top: var(--space-lg); }
.page-article__content .eyebrow { color: var(--color-6); margin-bottom: 0; }
.page-lede-title { font-size: var(--text-h2); line-height: 1.15; margin-top: var(--space-sm); }
.page-lede { font-size: var(--text-lg); color: var(--color-5); }
.page-rule { border: 0; border-top: 1px solid var(--color-2); opacity: .55; margin: var(--space-2xl) 0; }
.page-article__content .manifesto__pair { font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.2; margin-top: var(--space-sm); }
.page-quote {
  margin: var(--space-lg) 0; padding-left: var(--space-lg);
  border-left: 2px solid var(--color-2);
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-xl); line-height: 1.5; color: var(--color-6);
}
.page-signoff { font-family: var(--font-display); color: var(--color-3); }
.page-contact-line { font-family: var(--font-display); font-size: var(--text-h4); color: var(--color-6); }
.page-contact-line a { color: inherit; }
.page-map { margin-top: var(--space-lg); border: 1px solid var(--color-2); }
.page-map iframe { display: block; width: 100%; height: 340px; border: 0; }
.page-article__content .btn { display: inline-block; }
.page-article__content .accordion__item { border-top: 1px solid var(--color-2); }
.page-article__content .accordion__item:last-child { border-bottom: 1px solid var(--color-2); }
.page-article__content .accordion__summary { cursor: pointer; padding: var(--space-lg) 0 var(--space-lg) 30px; list-style: none; font-family: var(--font-display); font-size: var(--text-lg); }
.page-article__content .accordion__summary::-webkit-details-marker { display: none; }
.page-article__content .accordion__panel { padding: 0 0 var(--space-lg); color: var(--color-5); }
.page-article__header h1 { font-size: var(--text-h5); color: var(--color-3); letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-body); }
/* match the rosewood primary used everywhere else on the site */
.page-article__content .btn--primary { background-color: var(--color-6); color: var(--color-1); border-color: var(--color-6); }
.page-article__content .btn--primary:hover { background-color: var(--color-5); border-color: var(--color-5); }

/* ── About / Contact: page-scoped sections ─────────────────────────────────
   The About hero now carries a photo (forestRose), matching the homepage's
   copy-left / image-right construction. The media slot used to be hidden
   here because the hero had no image; that rule is gone — it silently beat
   the sizing added below and rendered a loaded image at 0x0. */
.section--about_hero .hero__inner { text-align: left; max-width: var(--container-max); margin-inline: auto; }
.section--about_hero .hero__content { max-width: 640px; }
.section--about_hero { position: relative; overflow: hidden; }
.section--about_hero > * { position: relative; z-index: 1; }
.section--about_hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: calc(50% + 60px); top: 90px; width: 720px; height: 657px;
  background-color: var(--color-3);
  -webkit-mask: url('/wp-content/uploads/2026/09/botanical-hero.png') no-repeat center / contain;
          mask: url('/wp-content/uploads/2026/09/botanical-hero.png') no-repeat center / contain;
}
.section--contact_visit { position: relative; overflow: hidden; }
.section--contact_visit > * { position: relative; z-index: 1; }
.section--contact_visit::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: calc(50% + 120px); top: 60px; width: 640px; height: 584px;
  background-color: var(--color-3);
  -webkit-mask: url('/wp-content/uploads/2026/09/botanical-footer.png') no-repeat center / contain;
          mask: url('/wp-content/uploads/2026/09/botanical-footer.png') no-repeat center / contain;
}
@media (max-width: 1200px) {
  .section--about_hero::after, .section--contact_visit::after { display: none; }
}
/* interior pages that open on a full-bleed hero: drop the header spacer so the
   dark section runs to the top edge exactly as it does on the homepage. */
.has-full-bleed-hero .site-main { padding-top: 0; }
/* body:not(.home) .site-main is (0,2,1) — match it with the element selector so
   the full-bleed-hero override actually wins. */
body.has-full-bleed-hero .site-main { padding-top: 0; }

/* ==========================================================================
   Reused-section ink (2026-09-02)

   The section library carries the colours of the ground it was FIRST built
   on: intro-split--image-right was authored on the dark homepage ground,
   visit-block--details-hours on a light one. Reusing them on the opposite
   ground on About/Contact left cream-on-cream (1.15:1) and near-black-on-
   forest (1.49:1). Both Figma frames put the section where it now sits, so
   the ground is right and the INK is what has to follow it.

   Every value below is checked against WCAG AA for its size.
   ========================================================================== */

/* -- About › "Meet Amy": dark ink on the parchment ground ----------------- */

.section--about_founder.intro-split .intro-split__title,
.section--about_founder.intro-split .intro-split__body,
.section--about_founder.intro-split .intro-split__body p {
  color: var(--color-5);            /* #151D15 on #F7F4F1 — 17.1:1 */
}

.section--about_founder.intro-split .eyebrow,
.section--about_founder.intro-split .intro-split__lede,
.section--about_founder.intro-split .intro-split__quote {
  color: var(--color-6);            /* #854A4C on #F7F4F1 — 6.2:1  */
}

.section--about_founder.intro-split .intro-split__signoff,
.section--about_founder.intro-split .intro-split__meta {
  color: var(--color-3);            /* #5E6B5E on #F7F4F1 — 5.1:1  */
}

/* The rose italic sub-line the Figma runs under the heading. */
.intro-split__lede {
  max-width: 520px;
  margin: calc(var(--space-md) * -1) 0 var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--leading-md);
}

/* Shared furniture row — same anatomy as cpt-loop / gallery / visit-block. */
.intro-split__furniture {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 14px;
}

.intro-split__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.intro-split__marker {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-6);
  border-radius: var(--radius-full);
}

.intro-split__meta {
  font-size: var(--eyebrow-size);
  font-weight: var(--weight-med);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

.intro-split__rule {
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: var(--space-lg);
  background: var(--color-2);
}

/* -- Contact › "Find the door": light ink on the forest ground ------------ */

.section--contact_visit .visit-block__heading,
.section--contact_visit .visit-block__detail-value,
.section--contact_visit .visit-block__detail-link {
  color: var(--color-1);            /* #EBE4DC on #2C3D32 — 9.2:1  */
}

.section--contact_visit .visit-block__label .eyebrow {
  color: var(--color-4);            /* #CCA3A3 on #2C3D32 — 5.1:1  */
}

.section--contact_visit .visit-block__detail-link:hover {
  color: var(--color-4);
}

.section--contact_visit .visit-block__meta,
.section--contact_visit .visit-block__detail-label {
  /* soft cream — the Figma dims these without dropping them out. 6.5:1 */
  color: color-mix(in srgb, var(--color-1) 72%, var(--color-3));
}

.section--contact_visit .visit-block__marker {
  border-color: var(--color-4);
}

/* Hairlines: gold reads as an accent on cream but shouts on forest — the
   Figma runs them as a dimmed cream instead. */
.section--contact_visit .visit-block__rule,
.section--contact_visit .visit-block__list,
.section--contact_visit .visit-block__detail {
  border-color: color-mix(in srgb, var(--color-1) 26%, #2C3D32);
}

.section--contact_visit .visit-block__rule {
  background: color-mix(in srgb, var(--color-1) 26%, #2C3D32);
}

/* ==========================================================================
   Mobile pass — 2026-09-02
   ========================================================================== */

/* -- 1. The mobile menu ---------------------------------------------------
   The theme ships a LOCKED full-viewport drawer at <=768px. The bespoke
   .nav--floating-pill block re-styled .is-open into a small absolute
   dropdown at <=880px, and at (0,4,0) it outranks the locked
   [data-mobile-menu].is-open (0,2,0) — so this site never got the drawer.
   It rendered as a clipped strip showing one link.

   Worse, the burger only appears at <=768 while the pill's own menu hides
   at <=880: between 769-880px there was NO navigation on the page at all.

   Below: the locked drawer is restored across the pill's own breakpoint and
   dressed in the brand — forest ground, display-serif links, the botanical
   rose, and the shop's details at the foot of the panel.
   ------------------------------------------------------------------------ */

@media (max-width: 880px) {

  /* The burger now spans the same range the desktop menu hides over. */
  .nav--floating-pill [data-mobile-menu-toggle] { display: inline-flex; }

  /* Wordmark stays legible above the open drawer (burger is already 1002). */
  .nav--floating-pill .nav__logo { position: relative; z-index: 1003; }

  /* Closed state: a real off-canvas panel, not display:none, so it slides. */
  .nav--floating-pill .nav__menu[data-mobile-menu] {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1001;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    width: auto;
    padding: calc(var(--space-sm) + var(--nav-height) + var(--space-xl))
             var(--space-lg) var(--space-xl);
    background: var(--color-7);
    color: var(--color-1);
    border: 0;
    border-radius: 0;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav--floating-pill .nav__menu[data-mobile-menu].is-open {
    display: flex;
    position: fixed;
    inset: 0;
    top: 0;
    align-items: flex-start;
    padding: calc(var(--space-sm) + var(--nav-height) + var(--space-xl))
             var(--space-lg) var(--space-xl);
    background: var(--color-7);
    border: 0;
    border-radius: 0;
    transform: translateX(0);
  }

  /* The rose, carried into the drawer the way it sits in the footer. */
  .nav--floating-pill .nav__menu[data-mobile-menu]::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -110px;
    bottom: -60px;
    width: 520px;
    height: 440px;
    opacity: .55;
    pointer-events: none;
    /* anchored right/bottom: the art sits on the right of the PNG, so a
       left-top anchor in a box that runs off-screen showed only its empty
       margin. */
    /* botanical-hero.png is the plate proven to read on the forest ground
       (it is the one behind the homepage hero); the footer plate did not. */
    background: url("/wp-content/uploads/2026/09/botanical-hero.png")
                no-repeat right bottom / contain;
  }

  .nav--floating-pill .nav__menu[data-mobile-menu] > * {
    position: relative;
    z-index: 1;
  }

  /* Links: the display face, at a size worth tapping. */
  .nav--floating-pill .nav__menu[data-mobile-menu] .nav__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    width: 100%;
    margin: 0 0 var(--space-xl);
    padding: 0;
    list-style: none;
  }

  .nav--floating-pill .nav__menu[data-mobile-menu] .nav__list li { width: 100%; }

  .nav--floating-pill .nav__menu[data-mobile-menu] .nav__list a {
    display: block;
    padding: 6px 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 8.5vw, 40px);
    font-weight: var(--weight-reg);
    line-height: 1.18;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-1);
  }

  .nav--floating-pill .nav__menu[data-mobile-menu] .nav__list .current-menu-item > a,
  .nav--floating-pill .nav__menu[data-mobile-menu] .nav__list a:hover {
    color: var(--color-4);
  }

  .nav--floating-pill .nav__menu[data-mobile-menu] .nav__cta {
    width: 100%;
    max-width: 340px;
    justify-content: center;
    text-align: center;
  }

  /* Shop details at the foot of the panel — on a phone this is the fastest
     route to the two things people actually want. */
  .nav__drawer-details {
    width: 100%;
    margin-top: auto;
    padding-top: var(--space-xl);
    display: grid;
    gap: 6px;
  }

  .nav__drawer-details a,
  .nav__drawer-details span {
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    color: color-mix(in srgb, var(--color-1) 74%, var(--color-3));
  }

  .nav__drawer-details a { text-decoration: underline; text-underline-offset: 3px; }
  .nav__drawer-details a:hover { color: var(--color-4); }

  .nav__drawer-label {
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    letter-spacing: var(--eyebrow-tracking);
    text-transform: uppercase;
    color: var(--color-4);
    margin-bottom: 4px;
  }

  /* The theme locks body scroll only to 768 — carry it to the same range. */
  body.mobile-menu-open { overflow: hidden; }
}

/* The drawer details are drawer-only furniture. */
.nav__drawer-details { display: none; }
@media (max-width: 880px) { .nav__drawer-details { display: grid; } }


/* -- 2. The botanical art must survive the small screens ------------------
   `@media (max-width:1200px) { .hero--split::after, .footer--rosewood::after
   { display:none } }` deleted the brand's signature artwork on every phone
   and tablet. The art is the identity, so it scales and repositions instead
   of disappearing: anchored off the right edge, behind the copy.
   ------------------------------------------------------------------------ */

@media (max-width: 1200px) {
  .hero--split::after,
  .footer--rosewood::after {
    display: block;
    left: auto;
    right: -34%;
    top: auto;
    bottom: 0;
    width: 96vw;
    height: 62vh;
    opacity: .55;
    background-position: right bottom;
    background-size: contain;
  }
}

@media (max-width: 880px) {
  .hero--split::after {
    right: -40%;
    bottom: auto;
    top: 4%;
    width: 118vw;
    height: 46vh;
    opacity: .42;
  }
  .footer--rosewood::after {
    right: -46%;
    bottom: -4%;
    width: 124vw;
    height: 44vh;
    opacity: .45;
  }
}

/* -- 1b. The blurred pill was trapping the drawer -------------------------
   `.nav--floating-pill .nav__inner` carries backdrop-filter: blur(10px).
   A filtered element becomes the CONTAINING BLOCK for position:fixed
   descendants, and the drawer is one of its children — so `inset: 0`
   resolved to the pill's own box (333x156) rather than the viewport, and
   translateX(100%) only pushed it 333px, leaving a sliver on screen.

   The blur is dropped only while the drawer is open, where nothing shows
   through it anyway; normal scrolling keeps the frosted pill. The closed
   offset is 110% so the panel clears the edge under either containing block.
   ------------------------------------------------------------------------ */

@media (max-width: 880px) {
  body.mobile-menu-open .nav--floating-pill .nav__inner {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav--floating-pill .nav__menu[data-mobile-menu] {
    transform: translateX(110%);
  }

  .nav--floating-pill .nav__menu[data-mobile-menu].is-open {
    transform: translateX(0);
  }
}

/* -- 1c. Drawer fits a phone without scrolling ---------------------------
   At 375x812 the panel measured 872px of content — the shop details fell
   below the fold, which is the one thing the drawer exists to surface.
   ---------------------------------------------------------------------- */

@media (max-width: 880px) {
  .nav--floating-pill .nav__menu[data-mobile-menu],
  .nav--floating-pill .nav__menu[data-mobile-menu].is-open {
    padding-top: calc(var(--space-sm) + var(--nav-height) + var(--space-md));
    padding-bottom: var(--space-lg);
  }

  .nav--floating-pill .nav__menu[data-mobile-menu] .nav__list {
    gap: 0;
    margin-bottom: var(--space-lg);
  }

  .nav--floating-pill .nav__menu[data-mobile-menu] .nav__list a {
    font-size: clamp(28px, 7.6vw, 38px);
    padding: 8px 0;
  }

  .nav__drawer-details { padding-top: var(--space-lg); }
}

/* -- 1d. The drawer's rose must not create dead scroll -------------------
   The motif sat at bottom:-60px inside a scrolling panel, so scrollHeight
   ran 872 against an 812 viewport: the drawer scrolled 60px to nothing.
   ---------------------------------------------------------------------- */

@media (max-width: 880px) {
  .nav--floating-pill .nav__menu[data-mobile-menu] { overflow-x: hidden; }

  .nav--floating-pill .nav__menu[data-mobile-menu]::after {
    bottom: 0;
    max-height: 46vh;
  }
}

/* ==========================================================================
   Mobile pass, part 2 — the page itself (2026-09-02)
   ========================================================================== */

/* -- 3. The closed drawer was scrolling the whole page sideways -----------
   Off-canvas at translateX(110%) it still extended the document box:
   scrollWidth ran 721 against a 375 viewport, so every page could be
   dragged sideways. Its links were also focusable while invisible.
   visibility:hidden takes it out of paint AND out of the tab order, and is
   delayed on close so the slide-out still animates.
   ------------------------------------------------------------------------ */

@media (max-width: 880px) {
  .nav--floating-pill .nav__menu[data-mobile-menu] {
    visibility: hidden;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .32s;
  }

  .nav--floating-pill .nav__menu[data-mobile-menu].is-open {
    visibility: visible;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s;
  }
}

/* Belt and braces: nothing should ever pan the page sideways. */
html, body { overflow-x: hidden; }


/* -- 4. Desktop card heights were carried onto phones ---------------------
   `.cpt-loop__link { min-height: 420px }` is the desktop spine height. On a
   phone the shelf cards hold ~130px of content, so each one padded out with
   ~290px of nothing — six of them turned one section into 3,159px, about
   four full screens of mostly empty card.
   ------------------------------------------------------------------------ */

@media (max-width: 880px) {
  .cpt-loop__link { min-height: 0; }

  /* Two across reads as a set of spines rather than a column of slabs, and
     is what makes the section fill the screen instead of running past it. */
  .section--genre_shelves .cpt-loop__list,
  .cpt-loop--genre-shelves .cpt-loop__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .section--genre_shelves .cpt-loop__link { padding: 18px 14px; }
  .section--genre_shelves .cpt-loop__body { padding: 16px; }
  .section--genre_shelves .cpt-loop__tag  { padding-top: 14px; }

  /* Staff picks are covers — two across is the natural shelf reading. */
  .section--staff_picks .cpt-loop__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  /* The gallery is the one place a single column looks most broken. */
  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}


/* -- 5. First section must clear the floating pill on mobile -------------
   Contact opens on the visit block rather than a hero, and its 60px top
   padding put "VISIT / Delafield, Wisconsin" at y=60 while the pill's
   bottom edge sits at y=88 — the nav covered the section's first line by
   28px. Any full-bleed opening section gets the pill's height as clearance.
   ---------------------------------------------------------------------- */

@media (max-width: 880px) {
  /* --nav-height is declared on .nav--floating-pill, not :root, so it is
     UNDEFINED on a section: the calc was invalid and padding-top collapsed
     to 0, putting the first line under the pill on both pages. Literal. */
  /* Every page here opens under the floating pill, so the clearance is not
     specific to the two new templates: the homepage cleared its eyebrow by
     only 8px, which reads as the nav resting on the text. */
  .site-main > section:first-child,
  body.has-full-bleed-hero .site-main > section:first-child {
    padding-top: 132px;
  }
}

/* -- 6. Full-bleed bands had no side padding on mobile -------------------
   The promise band and the CTA banner are the two full-bleed sections: the
   section carries 0 side padding by design and the inner .wrap is 100% wide.
   On desktop the wrap's max-width holds the copy off the edge; on a phone
   there is no max-width left to do that, so the band's text rendered at
   x=0 — hard against the screen edge, while every other section on the
   page starts its text at 44px.
   ---------------------------------------------------------------------- */

@media (max-width: 880px) {
  /* .promise-band__inner alone is (0,1,0) and loses to the theme's own
     .promise-band--statement-link .promise-band__inner at (0,2,0) — match
     the theme's selector shape rather than writing a weaker one. */
  .promise-band--statement-link .promise-band__inner,
  .cta-banner__inner {
    padding-inline: 24px;
  }
}

/* ==========================================================================
   Tablet width + menu icon — 2026-09-02
   ========================================================================== */

/* -- 7. The burger was near-black on a near-black pill -------------------
   The button inherits `currentColor` from the header, which resolves to
   --color-5 (#151D15) — all but invisible against the forest pill. It is
   now cream, and the bars are redrawn: 2px instead of 3px, wider, fully
   rounded.

   The 9px pitch is deliberate and must be kept: the theme's locked X
   animation translates the outer bars by exactly 9px to meet the middle,
   so bar-height + gap has to stay 9 (2 + 7). Changing either alone breaks
   the cross.
   ---------------------------------------------------------------------- */

.nav--floating-pill [data-mobile-menu-toggle] {
  color: var(--color-1);
  gap: 7px;
}

.nav--floating-pill [data-mobile-menu-toggle] > span {
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

/* Open, the button sits on the drawer — keep it cream there too. */
.nav--floating-pill [data-mobile-menu-toggle][aria-expanded="true"] {
  color: var(--color-1);
}


/* -- 8. Stacked layouts kept their desktop column widths -----------------
   The theme stacks the hero and the intro-splits at `max-width: 1000px`
   and has a matching rule to make the children fill:

       .hero--split .hero__content, .hero--split .hero__media,
       .intro-split .intro-split__media { width: 100%; }   (0,2,0)

   The site's own Figma widths are written at (0,3,0) —
   `.section--hero.hero--split .hero__content { width: 640px }` — so they
   outrank it and survive the stack. At a 750px viewport the wrap is 702
   but the hero content stayed 640, the media 458, the title capped at 600,
   and the intro-splits sat at 582/538 and 660/460: copy wrapping early
   with dead space beside it, on every width between roughly 720 and 1000.

   Stacked means full width. Matching the theme's own breakpoint.
   ---------------------------------------------------------------------- */

@media (max-width: 1000px) {

  .section--hero.hero--split .hero__content,
  .section--hero.hero--split .hero__media,
  .section--about_hero.hero--split .hero__content,
  .section--about_hero.hero--split .hero__media {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
  }

  /* The title carried its own 600px cap independent of the column. */
  .section--hero.hero--split .hero__title,
  .section--about_hero.hero--split .hero__title,
  .section--hero.hero--split .hero__body,
  .section--about_hero.hero--split .hero__body {
    max-width: none;
  }

  .intro-split.intro-split--image-left .intro-split__content,
  .intro-split.intro-split--image-left .intro-split__media,
  .intro-split.intro-split--image-right .intro-split__content,
  .intro-split.intro-split--image-right .intro-split__media {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
  }

  .intro-split.intro-split--image-left .intro-split__media img,
  .intro-split.intro-split--image-right .intro-split__media img,
  .section--hero.hero--split .hero__media img {
    width: 100%;
    height: auto;
  }

  /* Copy blocks inside the stacked columns were capped too. */
  .intro-split.intro-split--image-right .intro-split__quote,
  .intro-split.intro-split--image-right .intro-split__lede,
  .intro-split.intro-split--image-left .intro-split__body {
    max-width: none;
  }
}

/* -- 8b. Copy blocks kept their desktop measure once stacked -------------
   Three paragraphs carry a fixed max-width sized for the desktop column
   they used to sit in. Stacked at 750 the column is 702 but they held at
   520 / 600 / 560, all left-aligned — so each left a ragged 62-182px gap
   down the right of the page rather than reading as a measure.
   ---------------------------------------------------------------------- */

@media (max-width: 1000px) {
  /* .hero__subtitle alone is (0,1,0) and loses to the site's own
     .section--hero.hero--split .hero__subtitle at (0,3,0). Match it. */
  .section--hero.hero--split .hero__subtitle,
  .section--about_hero.hero--split .hero__subtitle,
  .hero--split .hero__subtitle,
  .hero__subtitle,
  .cpt-loop__subheading,
  .cta-banner__body {
    max-width: none;
  }
}

/* -- 9. Ink for the two new About sections (2026-09-02) ------------------
   Same defect class as §1 above, reproduced by this session's own reuse:
   process-steps was authored on a LIGHT ground and intro-split--image-left
   on a DARK one, so placing them on the opposite grounds rendered the
   "Why we exist" eyebrow forest-on-forest (1.0:1 — literally invisible)
   and the reading-room heading cream-on-cream (1.15:1).
   Every value below is checked against WCAG AA for its size.
   ---------------------------------------------------------------------- */

/* About › "Why we exist" — light ink on the forest ground. */
.section--about_why.process-steps .eyebrow {
  color: var(--color-4);              /* #CCA3A3 on #2C3D32 — 5.1:1 */
}

/* About › "Why we exist" — BEIGE ground, cards in the site's own language.
   The ground moved from forest to beige (--color-1), so the cards can no
   longer be beige themselves: they take the lighter parchment fill and the
   gold hairline the genre-shelf spines use, which is what makes them read as
   cards of this site rather than the theme's generic surface/border default. */

.section--about_why.process-steps .eyebrow {
  color: var(--color-6);              /* #854A4C on #EBE4DC — 5.4:1 */
}

.section--about_why.process-steps .section-head__heading,
.section--about_why.process-steps h2 {
  color: var(--color-5);              /* #151D15 on #EBE4DC — 14.6:1 */
}

.section--about_why.process-steps .section-head__sub,
.section--about_why.process-steps .section-head__subheading {
  /* plain sage measures 4.45:1 on beige — just under the floor.
     The rendered class is __sub, not __subheading; targeting only the
     latter left this failing. */
  color: color-mix(in srgb, var(--color-5) 70%, var(--color-3));
}

/* ── The cards ──────────────────────────────────────────────────────────
   Same anatomy as .cpt-loop__card--spine: hairline gold frame, small
   radius, a short gold rule as furniture, and a 4px lift on hover. */
.section--about_why.process-steps .process-steps__list {
  gap: var(--space-lg);
}

.section--about_why.process-steps .process-steps__item {
  padding: 30px 26px 32px;
  background: var(--color-8);
  border: var(--hairline) solid var(--color-2);
  border-radius: var(--radius-sm);
  transition: transform .2s ease;
}

.section--about_why.process-steps .process-steps__item:hover {
  transform: translateY(-4px);
}

/* The numeral is furniture, not a heading: small, rosewood, letter-spaced,
   sitting above the same 22px gold rule the shelf cards use. */
.section--about_why.process-steps .process-steps__number {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-med);
  letter-spacing: 1.6px;
  line-height: 1;
  opacity: 1;
  color: var(--color-6);              /* #854A4C on #F7F4F1 — 6.2:1 */
}

.section--about_why.process-steps .process-steps__number::after {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  margin-top: 12px;
  background: var(--color-2);
}

.section--about_why.process-steps .process-steps__title {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: var(--weight-reg);
  color: var(--color-5);              /* on the parchment card — 15.6:1 */
}

.section--about_why.process-steps .process-steps__desc {
  color: color-mix(in srgb, var(--color-5) 75%, var(--color-3));
}

.section--about_reading.intro-split .intro-split__title,
.section--about_reading.intro-split .intro-split__body,
.section--about_reading.intro-split .intro-split__body p {
  color: var(--color-5);              /* #151D15 on #F7F4F1 — 17.1:1 */
}

.section--about_reading.intro-split .eyebrow {
  color: var(--color-6);              /* #854A4C on #F7F4F1 — 6.2:1 */
}

/* -- 10. The About hero's media had no desktop size ----------------------
   The homepage hero carries bespoke column sizing scoped to .section--hero;
   the About hero never got an equivalent, so .hero__media was a flex item
   with no basis and collapsed to 0x0 — the image loaded and painted nothing.

   Sized in a MIN-width query (a bare width here is the tablet bug again),
   and in flex terms rather than fixed px so it shrinks before it stacks.
   ---------------------------------------------------------------------- */

@media (min-width: 1001px) {
  .section--about_hero.hero--split .hero__content {
    flex: 1 1 0;
    min-width: 0;
    max-width: 640px;
  }

  .section--about_hero.hero--split .hero__media {
    flex: 0 1 458px;
    min-width: 0;
  }
}

.section--about_hero.hero--split .hero__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* -- 11. Staff-pick cards had four empty frames (2026-09-02) -------------
   The picks carry no cover image, so .cpt-loop__media--empty rendered as a
   3/4 box with a gold border and nothing in it — four "missing image" holes
   across the homepage. Rather than invent book covers, the empty state
   becomes deliberate: the shop's own rose glyph, masked to gold, centred in
   the frame. It reads as an ornamental plate instead of a gap.
   ---------------------------------------------------------------------- */

.cpt-loop__card--pick .cpt-loop__media--empty {
  position: relative;
}

.cpt-loop__card--pick .cpt-loop__media--empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-2);
  -webkit-mask: url('/wp-content/uploads/2026/09/rose-glyph.png') no-repeat center / 44% auto;
  mask: url('/wp-content/uploads/2026/09/rose-glyph.png') no-repeat center / 44% auto;
  opacity: .55;
  pointer-events: none;
}


/* Layerly — Remove resting + hover shadow on staff-pick cards only — 2026-09-02T13:40:26.045Z */
.cpt-loop--staff-picks .cpt-loop__card, .cpt-loop--staff-picks .cpt-loop__card:hover {
  box-shadow: none;
}


/* Layerly — Fix genre-shelf card top border being clipped on hover — 2026-09-02T13:42:32.245Z */
.cpt-loop--genre-shelves .cpt-loop__card {
  overflow: visible;
  transition: transform .2s ease, box-shadow .2s ease;
}

.cpt-loop--genre-shelves .cpt-loop__card--spine:hover .cpt-loop__link {
  transform: none;
}

.cpt-loop--genre-shelves .cpt-loop__card:hover {
  transform: translateY(-4px);
}