/*
Theme Name: Modern + Main - Megan Duncan
Theme URI: https://www.meganduncanrealtor.com/
Author: Secret Squirrel Marketing
Author URI: https://secretsquirrel.marketing/
Description: Custom full-site-editing block theme for Megan Duncan, REALTOR, MRP at Modern + Main Realty (Moncks Corner, SC). Military PCS relocation and new construction focus. Brand tokens, fluid type scale, and WCAG 2.1 AA color pairings are defined in theme.json. Ships on open-license fallback fonts (Playfair Display, Poppins, Pinyon Script) behind CSS variables so the licensed brand faces (Dallas, Metropolis, Rouge and Blush) can be swapped in later with zero markup change.
Requires at least: 6.5
Tested up to: 6.5
Requires PHP: 7.4
Version: 2.2.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: modern-main-megan
Tags: full-site-editing, block-styles, custom-colors, custom-menu, editor-style, block-patterns, one-column, wide-blocks
*/

/*
  DESIGN SYSTEM: comp-cb ("Field Guide, Editorial Spread"), the winning static
  comp, ported here verbatim as of 2026-08-10 from
  site/design-comps/comp-cb/comp.css. Tasks 5 through 8 rebuild the templates
  and patterns against THESE class names (.masthead, .site-head, .hero, .band,
  .legend-box, .dossier-index, .seq, .band-dark, .guide, .booking-grid,
  .site-foot and friends).

  Layered on top, in the comp language: the WordPress glue (plugin block output
  for compliance furniture, answer-first, FAQ, comparison table; the button and
  block-style variations registered in functions.php) and the still-locked
  Phase 4 chrome (header/footer brand lockups, footer compliance band) that the
  live templates emit until Tasks 5 and 6 replace them.

  Shell from comp C (Field Guide): compliance rigor, named region landmarks,
  the numbered PLATE system, ch-constrained display type, the notched legend
  box, the rule-bracketed imprint, the dossier schema, leading-zero counters.
  Interior system from comp B (Editorial Split): the .note margin-note device
  and its inverted / embedded variants, split panels where every colored panel
  is a grid cell married to a bleeding photograph, the sticky rail, and the
  correct edge-bleed math.

  Palette (locked, brand-system.md Section 1.1)
    sand #EFEBDF, cream #F4F3EE, ink #191818,
    dark brown #4C453F, light brown #917F69, white #FFFFFF
  Type: Playfair Display (voice), Poppins (workhorse), Pinyon (accent)

  No em dashes anywhere per house style.
*/

/* ------------------------------------------------------------------ *
 * 1 . FONT TOKEN INDIRECTION
 * theme.json fontFamilies carry the literal fallback stacks (CSS variables
 * are not resolvable there); these variables restate the same stacks for
 * style.css, where the comp family tokens (--ff-d/--ff-b/--ff-s below)
 * alias to them. To swap the real licensed faces in later (Dallas /
 * Metropolis / Rouge and Blush), the theme.json fontFamily strings and
 * fontFace blocks change alongside these variable values; markup, comp
 * classes, and theme.json slugs stay identical. The open-license fallback
 * families are self-hosted as WOFF2 under assets/fonts/ and declared via
 * theme.json typography.fontFamilies[].fontFace with font-display: swap;
 * no CDN. Do NOT self-host or reference Dallas or Rouge and Blush webfonts
 * until written webfont licenses are on file.
 * ------------------------------------------------------------------ */
:root {
  /* Display serif: Dallas (licensed, not yet embeddable) -> Playfair Display fallback */
  --mm-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  /* Subhead + body sans: Metropolis (open, embed later) -> Poppins fallback */
  --mm-font-subhead: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mm-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Script accent: Rouge and Blush (licensed, not yet embeddable) -> Pinyon Script fallback */
  --mm-font-script: "Pinyon Script", "Parisienne", cursive;
}

/* ------------------------------------------------------------------ *
 * 2 . COMP TOKENS  (comp.css Section 1, verbatim)
 * Type scale is brand-system.md Section 2.3 verbatim (1.25 major third,
 * 18px base). Two documented extensions: --fs-display for the hero, which
 * the critique panel explicitly asked to keep large, and --fs-kicker, the
 * 12px floor the panel set for the .note kicker. Space is the
 * brand-system.md Section 3.1 8px ladder verbatim. The comp family tokens
 * alias to the --mm-font-* indirection above so the licensed-face swap
 * stays a one-file change.
 * ------------------------------------------------------------------ */
:root{
  /* brand primitives */
  --sand:#EFEBDF;
  --cream:#F4F3EE;
  --ink:#191818;
  --brown:#4C453F;
  --fawn:#917F69; /* declared for completeness; deliberately never used as
                     text or as a numeral colour, it measures 3.24:1 on sand */
  --white:#FFFFFF;

  /* hairlines */
  --rule:rgba(76,69,63,.34);
  --rule-soft:rgba(76,69,63,.16);
  --rule-cream:rgba(244,243,238,.34);

  /* families (aliased to the theme font indirection above) */
  --ff-d:var(--mm-font-display);
  --ff-b:var(--mm-font-body);
  --ff-s:var(--mm-font-script);

  /* type scale */
  --fs-display:clamp(2.75rem,.9rem + 6.1vw,6.5rem);
  --fs-display-page:clamp(2.125rem,1.1rem + 3.2vw,4rem);
  --fs-h1:clamp(2.25rem,1.6rem + 2.6vw,3rem);
  --fs-h2:clamp(1.75rem,1.3rem + 1.8vw,2.25rem);
  --fs-h3:clamp(1.5rem,1.25rem + 1vw,1.75rem);
  --fs-h4:1.375rem;
  --fs-h5:1rem;
  --fs-h6:.875rem;
  --fs-body:1.125rem;
  --fs-body-lg:1.25rem;
  --fs-small:.9375rem;
  --fs-caption:.875rem;
  --fs-kicker:.75rem;

  /* space ladder */
  --s-3xs:4px; --s-2xs:8px; --s-xs:12px; --s-sm:16px; --s-md:24px;
  --s-lg:32px; --s-xl:48px; --s-2xl:64px; --s-3xl:96px; --s-4xl:128px;

  /* layout */
  --wrap:1200px;
  --gutter:clamp(20px,3.2vw,32px);
  --rail:280px;
  --head-h:78px;
}

/* ------------------------------------------------------------------ *
 * 3 . BASE  (comp.css Section 2, plus the kept WP accessibility base)
 * ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font:400 var(--fs-body)/1.65 var(--ff-b);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
figure{margin:0}
h1,h2,h3,h4{margin:0;font-weight:500;text-wrap:balance}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
[id]{scroll-margin-top:calc(var(--head-h) + var(--s-md))}

/* Link underline sits at full Dark Brown: 7.90:1 on sand, well clear of
   the 3:1 non-text threshold. Comp C used the same colour at 50 percent
   alpha, which measured 2.39:1 and failed. */
a{
  color:inherit;
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:var(--brown);
}
a:hover{color:var(--brown);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:120;
  background:var(--ink);color:var(--cream);padding:var(--s-xs) var(--s-md);
  font:600 var(--fs-caption)/1 var(--ff-b);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;
}
.skip:focus{left:var(--s-xs);top:var(--s-xs)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:70ch}
.prose p{max-width:70ch}

/* Kept WP accessibility base: minimum touch targets on interactive block
   controls (WCAG 2.5.5). */
.wp-block-button__link,
.wp-block-navigation-item__content,
.wp-element-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Kept WP accessibility base: honor reduced-motion globally. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ *
 * 4 . MASTHEAD + HEADER  (comp.css Section 3)
 * Kameron's must-have: the brokerage name AND logo always displayed.
 * The name is live text, not artwork, so it reaches the accessibility
 * tree and any agent reading the page.
 * ------------------------------------------------------------------ */
.masthead{
  background:var(--sand);
  border-bottom:1px solid var(--rule-soft);
  font:500 var(--fs-kicker)/1.5 var(--ff-b);
  letter-spacing:.09em;
  color:var(--brown);
  text-transform:uppercase;
}
.masthead .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-sm);padding-block:var(--s-2xs);flex-wrap:wrap;
}
.mm-line{display:flex;align-items:center;gap:var(--s-xs);margin:0;flex-wrap:wrap}
.mm-line img{height:14px;width:auto;flex:none}
.masthead a{text-decoration:none;letter-spacing:.07em}
.masthead a:hover{text-decoration:underline}

.site-head{
  position:sticky;top:0;z-index:100;
  background:var(--sand);
  border-bottom:1px solid var(--rule);
}
.site-head .wrap{
  display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap;
  padding-block:var(--s-sm);
}
.brand{display:block;line-height:0;text-decoration:none;flex:none}
.brand img{height:34px;width:auto}
.site-nav{margin-left:auto}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap;
}
.site-nav a{
  font:500 var(--fs-small)/1 var(--ff-b);letter-spacing:.01em;
  text-decoration-color:var(--rule);
}
.site-nav a:hover{text-decoration-color:var(--brown)}
.site-nav a[aria-current="page"]{text-decoration-thickness:2px;text-underline-offset:6px}

/* WP adapters for the block-theme chrome (parts/header.html).
   1) The header template part renders inside a wrapper element
      (<header class="wp-block-template-part">). Left as a box, that wrapper
      becomes the sticky .site-head's containing block, and a sticky element
      can never travel past its containing block: the header would unstick
      after two bars of scroll. display:contents removes the wrapper box so
      .masthead and .site-head participate in the page flow exactly like the
      comp's body-level structure. The banner landmark survives on the inner
      header.site-head element.
   2) Core flow layout adds margin-block-start to non-first children; the
      head row is a flex row spaced by gap, so those margins must not apply. */
header.wp-block-template-part{display:contents}
.site-head .wrap > *{margin-block:0}

/* WP adapters for the block-theme chrome (parts/footer.html).
   1) The templates render the footer part through a div wrapper (tagName div,
      className footer-part): a <footer> wrapper would nest a second
      contentinfo landmark around footer.site-foot. display:contents then
      removes the wrapper box, which (a) discards the
      :where(.wp-site-blocks) > * root gap margin that would open a sand seam
      between the last page band and the dark footer, and (b) lets the fixed
      nav.mobile-bar participate at body level exactly like the comp.
   2) Core flow layout adds margin-block-start to non-first children. Inside
      the flex .foot-top row that pushed nav.foot-nav below the lockup (the
      Task 5 head-row bug again), and inside .wrap it fights the comp rhythm,
      where .foot-top's own margin-bottom is the only intended step. Zero the
      block-start margins and restate the legal links' step at the same
      specificity.
   3) The plugin's compliance furniture carries its own cream hairline
      (border-top) for the wp_footer fallback injection on pages without this
      part; inside the part, .foot-top's border-bottom already draws that
      rule, so drop the duplicate here and nowhere else. */
.wp-block-template-part.footer-part{display:contents}
.site-foot .wrap > *,
.site-foot .foot-top > *{margin-block-start:0}
.site-foot .cf-legal-links{margin-block-start:var(--s-md)}
.site-foot .compliance-furniture{border-top:0;padding-top:0}

/* WP adapters for the front page (templates/front-page.html).
   1) Every child of .wp-site-blocks after the first gets the block-gap
      margin; the header part wrapper is display:contents, so <main> is the
      element that would carry it and a sand seam would open between the
      sticky header and the hero spread. The comp stacks them flush.
   2) Core flow layout adds margin-block-start to non-first children of the
      main group. The comp's eight bands manage their own rhythm with section
      padding, hairlines and the .section + .section collapse rules, so the
      injected gaps would split the flush hero-to-legend, band-to-band and
      band-dark seams with strips of sand. */
main.mm-home{margin-block-start:0}
main.mm-home > *{margin-block-start:0}

/* The [ss_booking] renderer emits its own section#ss-booking > .wrap >
   .book-shell. Inside the comp's two-column booking spread the outer
   section#book already owns the section padding and the booking-grid the
   gutter, so the renderer's chrome is flattened to content width: no double
   gutters, no double section padding. The renderer's eyebrow + h2 stay
   visible on purpose: they ARE the section heading, and #ss-booking-h is
   the aria-labelledby target (never hide them with CSS). */
#book #ss-booking{padding:0}
#book #ss-booking .wrap{max-width:none;padding:0}
/* One step of comp rhythm between the reassure notes and the renderer's
   eyebrow + h2; with the section padding flattened above, the panel would
   otherwise sit flush against the note text. Mirrors the comp's
   .booking-form{margin-top:var(--s-xl)}. */
#book .booking-body > #ss-booking{margin-top:var(--s-xl)}
/* Heading parity (controller ruling): the renderer's h2.sect IS the #book
   section heading, so inside #book it carries the comp .title scale
   verbatim; everywhere else (/book/) the renderer's default h2 scale
   stands. Never hide it: #ss-booking-h is the aria-labelledby target. */
#book #ss-booking .sect{
  font-family:var(--ff-d);font-weight:500;
  font-size:var(--fs-h1);
  line-height:1.14;letter-spacing:-.005em;
  margin:0 0 var(--s-md);
  max-width:min(24ch,100%);
  text-wrap:balance;
}

/* ------------------------------------------------------------------ *
 * 5 . BUTTONS  (comp.css Section 4)
 * ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;
  background:var(--brown);color:var(--cream);
  font:600 var(--fs-caption)/1 var(--ff-b);letter-spacing:.12em;text-transform:uppercase;
  padding:var(--s-sm) var(--s-md);
  border:1px solid var(--brown);
  text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--cream);text-decoration:none}
.btn-sm{min-height:40px;padding:var(--s-xs) var(--s-sm);font-size:var(--fs-kicker)}
.btn-light{background:var(--cream);color:var(--brown);border-color:var(--cream)}
.btn-light:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.quiet-link{font:500 var(--fs-small)/1.4 var(--ff-b)}

/* ------------------------------------------------------------------ *
 * 6 . THE SHARED HAIRLINE ANNOTATION  (comp.css Section 5)
 * Comp B's .note margin note and comp C's PLATE caption turn out to be
 * the same typographic object: hairline, letterspaced kicker, one short
 * line of fact. Building them on one base is what makes the two parent
 * signatures read as a single system rather than two guests.
 * The caption is locked to ONE visual form (stacked, never inline), which
 * was comp C's single mistake in its own plate system.
 * ------------------------------------------------------------------ */
.note,.plate-cap{
  display:block;
  border-top:1px solid var(--rule);
  padding-top:10px;
  font:400 var(--fs-caption)/1.55 var(--ff-b);
  color:var(--brown);
}
.note{max-width:38ch;margin:0}
.plate-cap{margin-block:0}
.note-k,.plate-no{
  display:block;
  font:600 var(--fs-kicker)/1 var(--ff-b);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--brown);
  margin-bottom:7px;
}
.plate-cap .cap{display:block;max-width:56ch}
.note-row{display:flex;gap:var(--s-xl);flex-wrap:wrap;margin-top:var(--s-lg)}
.note-row .note{flex:1 1 220px}

/* inverted variant, verified: cream on dark brown is 8.47:1 */
.on-dark .note,.on-dark .plate-cap{border-top-color:var(--rule-cream);color:var(--cream)}
.on-dark .note-k,.on-dark .plate-no{color:var(--cream)}

/* embedded variant: inside a dossier entry or a sequence row the note
   drops its own rule and rides the row rule above it */
.entry .note,.seq .note{border-top:0;padding-top:0}

/* ------------------------------------------------------------------ *
 * 7 . PLATES  (comp.css Section 6)
 * ------------------------------------------------------------------ */
.band{width:100%;background:var(--sand)}
.band .ph{width:100%;height:min(72vh,660px);position:relative;overflow:hidden;background:var(--brown)}
.band .ph img{width:100%;height:100%;object-fit:cover}
.band-short .ph{height:min(56vh,500px)}
.band figcaption{padding-block:var(--s-xs) var(--s-md)}

.plate img{width:100%;height:auto}
.plate figcaption{margin-top:var(--s-sm)}
.plate-fixed img{height:var(--plate-h,520px);object-fit:cover}

/* ------------------------------------------------------------------ *
 * 8 . THE HERO: FRONTISPIECE SPREAD  (comp.css Section 7)
 * A field guide opens on a spread, not a title card. The photographic
 * plate is the verso, bleeding off the left, top and bottom edges, so
 * the first thing the eye lands on in a left-to-right reading order is
 * photography. The title page is the recto: it keeps every piece of
 * comp C's apparatus (eyebrow, ch-constrained display, rule-bracketed
 * imprint) but distributes it top to bottom between two hairlines the
 * way a real title page is set, instead of centring it.
 * ------------------------------------------------------------------ */
.hero{
  display:grid;
  grid-template-columns:5fr 7fr;
  align-items:stretch;
  border-bottom:1px solid var(--rule);
}
.hero-plate{display:flex;flex-direction:column;background:var(--brown)}
.hero-plate .ph{position:relative;flex:1;min-height:min(78vh,780px);overflow:hidden}
/* --zoom / --zoom-top let a landscape source be cropped vertically inside a
   tall column, which object-position alone cannot do once cover has already
   scaled the image to the container height. */
.hero-plate .ph img{
  position:absolute;left:0;right:0;
  width:100%;height:var(--zoom,100%);top:var(--zoom-top,0);
  object-fit:cover;
}
.hero-plate figcaption{
  background:var(--sand);
  padding:var(--s-md) var(--s-md) var(--s-lg);
  padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));
}
/* The licensing credit SS_Plate_Credit injects into the featured-image
   figure. Sits over the plate's lower edge in the apparatus voice: small,
   quiet, readable on any photograph via the scrim. Only heroes whose
   attachment carries a caption render one at all. */
.hero-plate .ph .plate-credit{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  margin:0;padding:6px var(--s-md) 7px;
  font-family:var(--ff-b);font-size:10px;letter-spacing:.08em;
  color:var(--cream);background:linear-gradient(transparent,rgba(25,24,24,.55));
  text-align:right;
}

.hero-page{
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-lg);
  padding:var(--s-xl) clamp(20px,2.4vw,32px) var(--s-lg) clamp(24px,3.4vw,48px);
}
.hero-page-inner{max-width:900px;width:100%}
.hero-rule{height:1px;background:var(--rule);border:0;margin:0}

.eyebrow{
  display:block;
  font:600 var(--fs-caption)/1.5 var(--ff-b);letter-spacing:.16em;text-transform:uppercase;
  color:var(--brown);
  margin:0 0 var(--s-md);
}
.display{
  font-family:var(--ff-d);font-weight:500;
  font-size:var(--fs-display);
  line-height:1.04;letter-spacing:-.012em;
  color:var(--ink);
  margin:0;
}
.display .em{font-style:italic;font-weight:400}
/* The ch constraint is what produces a deterministic three line taper with
   no orphan; text-wrap:balance refines the rag inside it rather than
   fighting it (verified by render at 1440, 1200 and 390). min() keeps the
   measure from overflowing a 390px phone, which is where comp C clipped. */
.hero .display{max-width:min(14ch,100%);text-wrap:balance}
/* the pillar title is a long verbatim H1, so it gets its own size and a
   wider ch measure; same apparatus, same spread, different rag target */
.hero .display--page{font-size:var(--fs-display-page);max-width:min(23ch,100%);line-height:1.08}
.hero-sub{
  max-width:46ch;
  margin:var(--s-lg) 0 0;
  font-size:var(--fs-body);line-height:1.7;
}
.imprint{
  display:table;
  margin:var(--s-lg) 0 0;
  padding:11px 2px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font:500 var(--fs-kicker)/1.7 var(--ff-b);letter-spacing:.13em;text-transform:uppercase;
  color:var(--brown);
}
.hero-cta{display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap;margin-top:var(--s-lg)}
.hero-notes{margin-top:var(--s-lg)}

/* Pinyon sign-off: one flourish beside the portrait, never functional text */
.signoff{margin-top:var(--s-lg)}
.signoff img{height:56px;width:auto}
.signoff .imprint{margin-top:var(--s-xs)}

/* ------------------------------------------------------------------ *
 * 9 . SECTIONS  (comp.css Section 8)
 * ------------------------------------------------------------------ */
.section{padding-block:var(--s-3xl)}
.section-tight{padding-block:var(--s-2xl)}
.section-flush-top{padding-top:var(--s-2xl)}
/* two sand sections in a row would otherwise stack 96 + 96 into a 192px
   dead band; one section's worth of rhythm is enough */
.section + .section,.section + .section-tight,.section-tight + .section{padding-top:var(--s-xl)}
.title{
  font-family:var(--ff-d);font-weight:500;
  font-size:var(--fs-h1);
  line-height:1.14;letter-spacing:-.005em;
  margin:0 0 var(--s-md);
  max-width:min(24ch,100%);
  text-wrap:balance;
}
.title .em{font-style:italic;font-weight:400}
.lede{font-size:var(--fs-body-lg);line-height:1.6;max-width:56ch}

.cols{display:grid;gap:clamp(32px,4.4vw,64px);align-items:start}
.cols-75{grid-template-columns:7fr 5fr}
.cols-57{grid-template-columns:5fr 7fr}
.cols-center{align-items:center}

/* ------------------------------------------------------------------ *
 * 10 . THE NOTCHED LEGEND BOX  (comp.css Section 9; comp C .short-version)
 * The label is notched into the box's own border, sand knocking out
 * the rule. Used for the answer-first block on the pillar and for the
 * short version on the home page, so the device lives on both.
 * ------------------------------------------------------------------ */
.legend-box{
  position:relative;
  border:1px solid var(--rule);
  padding:clamp(28px,3.4vw,44px) clamp(20px,3vw,44px) clamp(24px,3vw,40px);
  max-width:74ch;
}
.legend-label{
  position:absolute;top:-8px;left:clamp(18px,2.6vw,36px);
  background:var(--sand);padding:0 var(--s-xs);
  font:600 var(--fs-kicker)/1.4 var(--ff-b);letter-spacing:.18em;text-transform:uppercase;
  color:var(--brown);
}
.legend-box p{
  margin:0;
  font-family:var(--ff-d);font-weight:400;
  font-size:clamp(1.15rem,1rem + .7vw,1.4rem);line-height:1.6;
}
.legend-box p + p{margin-top:.7em}
/* the notch sits 8px above the box, so a heading directly above it needs
   clearance or the two collide */
.title + .legend-box,.lede + .legend-box{margin-top:var(--s-lg)}

/* ------------------------------------------------------------------ *
 * 11 . THE DOSSIER  (comp.css Section 10; comp C, dl/dt/dd)
 * Adjacent entries bottom align: the entry is a flex column and the
 * link is pushed to the foot, so a two up row of reference cards reads
 * as a ruled register instead of two ragged stacks.
 * ------------------------------------------------------------------ */
/* The compact register. Six town names, ruled, directly under the short
   version, so a spouse with a report date meets the towns on the first
   screen instead of six screens down. Each name jumps to its full file
   below; the file itself is unchanged. */
.town-strip{margin-top:var(--s-lg)}
.town-strip-k{
  font:600 var(--fs-kicker)/1 var(--ff-b);letter-spacing:.16em;text-transform:uppercase;
  color:var(--brown);margin:0 0 var(--s-xs);
}
.town-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 var(--s-lg);
  border-bottom:1px solid var(--rule);
}
.town-list li{border-top:1px solid var(--rule)}
.town-list a{
  display:flex;align-items:center;min-height:44px;
  padding:var(--s-2xs) 0;
  font:500 var(--fs-small)/1.4 var(--ff-b);
}

.dossier-head{margin-bottom:var(--s-xl)}
.dossier-index{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(32px,4.4vw,80px);row-gap:0;
  border-bottom:1px solid var(--rule);
}
.dossier-index--stack{grid-template-columns:1fr}
.entry{
  display:flex;flex-direction:column;
  border-top:1px solid var(--rule);
  padding:var(--s-lg) 0;
}
.entry h3{
  font-family:var(--ff-d);font-weight:500;
  font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.005em;
  margin:0 0 var(--s-sm);
}
.facts{margin:0 0 var(--s-sm)}
.facts>div{
  display:grid;grid-template-columns:120px 1fr;gap:var(--s-sm);
  padding:10px 0;border-top:1px solid var(--rule-soft);
}
.facts dt{
  font:600 var(--fs-kicker)/1.6 var(--ff-b);letter-spacing:.15em;text-transform:uppercase;
  color:var(--brown);padding-top:2px;
}
.facts dd{margin:0;font-size:var(--fs-small);line-height:1.6}
.entry .note{margin-bottom:var(--s-sm)}
.entry-link{margin-top:auto;font:500 var(--fs-small)/1.4 var(--ff-b)}

/* a plate bound into the middle of the register, the way a reference book
   interleaves its plates between index pages. Also the reason no viewport
   of the dossier is ever type alone. */
.entry-plate{grid-column:1 / -1}
.entry-plate .ph{height:var(--plate-h,380px);overflow:hidden;background:var(--brown)}
.entry-plate .ph img{width:100%;height:100%;object-fit:cover}
.entry-plate figcaption{margin-top:var(--s-sm)}
.entry-plate .note{border-top:1px solid var(--rule);padding-top:10px;margin-top:var(--s-md)}

/* compact six link row, used on the pillar so the per suburb guide link
   device appears on both pages */
.guide-links{
  list-style:none;margin:var(--s-md) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--s-lg);
  border-bottom:1px solid var(--rule);
}
.guide-links li{border-top:1px solid var(--rule)}
.guide-links a{display:block;padding:var(--s-xs) 0;font:500 var(--fs-small)/1.5 var(--ff-b)}

/* ------------------------------------------------------------------ *
 * 12 . SEQUENCES  (comp.css Section 11; leading-zero counters, real <ol>)
 * The PCS timeline is a true sequence, so it is an ordered list rather
 * than comp C's five unlabelled div groups. Every row carries its own
 * visible "when" label, so nothing depends on a column header row that
 * disappears at a breakpoint (comp B's timeline defect).
 * ------------------------------------------------------------------ */
.seq{list-style:none;margin:var(--s-lg) 0 0;padding:0;counter-reset:seq;border-top:1px solid var(--rule)}
.seq>li{
  counter-increment:seq;
  display:grid;grid-template-columns:88px minmax(0,1fr);
  gap:var(--s-md) var(--s-lg);
  padding:var(--s-lg) 0;
  border-bottom:1px solid var(--rule);
}
.seq>li::before{
  content:counter(seq,decimal-leading-zero);
  font-family:var(--ff-d);font-weight:500;font-size:2.5rem;line-height:.9;
  color:var(--brown);
}
.seq h3{font-family:var(--ff-d);font-weight:500;font-size:var(--fs-h3);line-height:1.2;margin:0 0 var(--s-2xs)}
.seq-when{
  font:600 var(--fs-caption)/1.5 var(--ff-b);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin:0 0 var(--s-2xs);
}
.seq p{margin:0 0 .6em;font-size:var(--fs-small);line-height:1.65;max-width:56ch}
.seq p:last-child{margin-bottom:0}
.seq-body>*+.note{margin-top:var(--s-sm)}
.citation{margin-top:var(--s-md);font:400 var(--fs-caption)/1.7 var(--ff-b);color:var(--brown)}

/* ------------------------------------------------------------------ *
 * 13 . EDGE BLEED BANDS  (comp.css Section 12; comp B)
 * Every coloured panel is a grid cell married to a bleeding photograph,
 * which is what makes a flat text-on-colour band structurally impossible.
 * ------------------------------------------------------------------ */
.edge-band{
  display:grid;
  grid-template-columns:minmax(300px,7fr) 5fr;
  gap:clamp(32px,4.4vw,64px);
  margin-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  align-items:center;
}
.edge-band img{width:100%;height:var(--edge-h,560px);object-fit:cover}
.edge-band figcaption{padding-left:0}

.edge-band-l{
  display:grid;
  grid-template-columns:5fr minmax(300px,7fr);
  gap:clamp(32px,4.4vw,64px);
  margin-right:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  align-items:center;
}
.edge-band-l img{width:100%;height:var(--edge-h,560px);object-fit:cover}

/* ------------------------------------------------------------------ *
 * 14 . THE ONE INVERTED BAND PER PAGE  (comp.css Section 13)
 * Dark brown ground, cream text, married to a bleeding portrait.
 * The quote is set in Playfair roman, not italic: italic display serif
 * is for one emphasised word, never seven lines of running text.
 * ------------------------------------------------------------------ */
.band-dark{
  display:grid;grid-template-columns:5fr 7fr;
  background:var(--brown);color:var(--cream);
}
.band-dark .bd-media{position:relative;min-height:420px;overflow:hidden}
.band-dark .bd-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.band-dark .bd-body{
  padding:var(--s-3xl) var(--s-2xl) var(--s-3xl) clamp(24px,3.4vw,56px);
  padding-right:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  display:flex;flex-direction:column;justify-content:center;
}
.band-dark .eyebrow,.band-dark .title{color:var(--cream)}
.band-dark a{text-decoration-color:var(--cream)}
.band-dark a:hover{color:var(--white)}
.band-dark :focus-visible{outline-color:var(--cream)}
.band-dark p{color:var(--cream)}
blockquote{margin:0}
.bq{
  font-family:var(--ff-d);font-weight:400;
  font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem);line-height:1.5;
  max-width:34em;margin:0;
}
/* Both client-approved reviews run on the home page. The second one answers
   this audience's first fear (buying without ever seeing the town), so it
   cannot be the page a visitor never reaches. It is set one step down from
   the first so the band still has a hierarchy. */
.quote{margin:0}
.quote-second{
  margin-top:var(--s-lg);padding-top:var(--s-lg);
  border-top:1px solid var(--rule-cream);
}
.quote-second .bq{font-size:clamp(1.125rem,1rem + .55vw,1.375rem)}
.attrib{margin-top:var(--s-md)}
.attrib .name{
  display:block;
  font:600 var(--fs-caption)/1.6 var(--ff-b);letter-spacing:.14em;text-transform:uppercase;
}
.attrib .role{display:block;font:400 var(--fs-caption)/1.6 var(--ff-b);opacity:.85}
.band-dark .note-row{margin-top:var(--s-lg)}
.cta-actions{display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap;margin-top:var(--s-lg)}
.cta-actions .quiet-link{color:var(--cream)}

/* light pull quote, used inside an article chapter */
.pullquote{
  margin:var(--s-lg) 0 0;padding-left:var(--s-md);
  border-left:2px solid var(--brown);max-width:62ch;
}
.pullquote .bq{font-size:clamp(1.15rem,1rem + .7vw,1.4rem)}
.pullquote .attrib .name,.pullquote .attrib .role{color:var(--brown)}
.pullquote .note{margin-top:var(--s-md)}

/* ------------------------------------------------------------------ *
 * 15 . STICKY RAIL + ARTICLE  (comp.css Section 14; comp B, with comp C's
 * counters)
 * ------------------------------------------------------------------ */
.guide{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(32px,4.4vw,80px);align-items:start;
}
.rail{position:sticky;top:calc(var(--head-h) + var(--s-md))}
.rail-title{
  font:600 var(--fs-kicker)/1 var(--ff-b);letter-spacing:.18em;text-transform:uppercase;
  color:var(--brown);margin:0 0 var(--s-xs);padding-bottom:var(--s-xs);
  border-bottom:1px solid var(--rule);
}
.rail ol{list-style:none;margin:0;padding:0;counter-reset:ch}
.rail li{border-bottom:1px solid var(--rule-soft)}
.rail a{
  counter-increment:ch;
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--s-xs);align-items:baseline;
  padding:11px 0;text-decoration:none;
  font:500 var(--fs-caption)/1.45 var(--ff-b);
}
.rail a::before{
  content:counter(ch,decimal-leading-zero);
  font-family:var(--ff-d);font-weight:500;font-size:var(--fs-h5);color:var(--brown);
}
.rail a:hover span{text-decoration:underline;text-underline-offset:3px}
.rail a[aria-current="true"]{color:var(--brown)}
.rail a[aria-current="true"] span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.rail-card{
  margin-top:var(--s-lg);border:1px solid var(--rule);
  padding:var(--s-md);
}
.rail-card h2{
  font-family:var(--ff-d);font-weight:500;font-size:var(--fs-h4);line-height:1.2;
  margin:0 0 var(--s-2xs);
}
.rail-card p{font-size:var(--fs-caption);line-height:1.6;margin:0 0 var(--s-sm);color:var(--brown)}
.rail-card .btn{width:100%}
.rail .note{margin-top:var(--s-md)}

.article>section{padding-top:var(--s-2xl);margin-top:var(--s-2xl);border-top:1px solid var(--rule)}
.article>section:first-child{padding-top:0;margin-top:0;border-top:0}
.article h2{font-family:var(--ff-d);font-weight:500;font-size:var(--fs-h2);line-height:1.2;margin:0 0 var(--s-md);max-width:26ch}
/* :not([class]) so the running-text rule never outranks .note, .bq,
   .seq-when or .citation, all of which are also paragraphs */
.article>section>p:not([class]){font-size:var(--fs-body);line-height:1.7;max-width:68ch}
.ch-eyebrow{display:flex;align-items:center;gap:var(--s-sm)}
.ch-eyebrow::after{content:"";height:1px;flex:1;background:var(--rule-soft)}

/* ------------------------------------------------------------------ *
 * 16 . FAQ  (comp.css Section 15)
 * ------------------------------------------------------------------ */
.faq{margin:var(--s-md) 0 0;max-width:80ch}
.faq>div{border-top:1px solid var(--rule);padding:var(--s-md) 0}
.faq>div:last-child{border-bottom:1px solid var(--rule)}
.faq dt{
  font-family:var(--ff-d);font-weight:500;font-size:var(--fs-h4);line-height:1.3;
  margin-bottom:var(--s-2xs);
}
.faq dd{margin:0;font-size:var(--fs-small);line-height:1.7;max-width:70ch}

/* ------------------------------------------------------------------ *
 * 17 . THE APPOINTMENT BOOK  (comp.css Section 16)
 * A real booking destination, native controls only. Radios inside a
 * fieldset whose legend names the date and the timezone; a separate
 * GET form swaps the timezone with no JavaScript; a real submit button.
 * Nothing essential is rendered by script, there is no CAPTCHA and no
 * login wall, so a browsing agent can operate it exactly as a person does.
 * ------------------------------------------------------------------ */
.booking-grid{
  display:grid;grid-template-columns:minmax(320px,7fr) 5fr;
  gap:clamp(32px,4.4vw,64px);
  margin-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  align-items:start;
}
/* the plate stays in view beside a long form instead of stretching to the
   form's full height, which would crop the door down to a keyhole */
.booking-media{
  position:sticky;top:calc(var(--head-h) + var(--s-md));
  height:min(92vh,880px);display:flex;flex-direction:column;
}
.booking-aside{margin-top:var(--s-lg);padding-right:var(--s-md);display:grid;gap:var(--s-md)}
.booking-plate{display:flex;flex-direction:column;flex:1;min-height:0}
.booking-media .ph{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--brown)}
.booking-media .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.booking-media figcaption{margin-top:var(--s-sm);padding-right:var(--s-md)}
.booking-body{padding-right:var(--s-sm);max-width:760px}

/* The time-zone menu lives INSIDE the booking form, so choosing a zone can
   never discard a half-typed booking, and there is exactly one form on the
   page. There is no "update times" button, because nothing on a static comp
   can convert them: the zone rides along with the request and Megan confirms
   in the visitor's own zone when she replies. */
.tz-block{
  padding-top:var(--s-md);
  border-top:1px solid var(--rule);
}
.tz-block .field{margin:0;max-width:440px}
.tz-note{
  font:400 var(--fs-small)/1.65 var(--ff-b);
  color:var(--brown);margin:0 0 var(--s-sm);max-width:62ch;
}
.tz-note strong{font-weight:600;color:var(--ink)}
label{display:block;font:600 var(--fs-h6)/1.4 var(--ff-b);color:var(--brown);margin-bottom:6px}
.opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--brown)}
input[type=text],input[type=email],input[type=tel],select{
  width:100%;background:var(--white);color:var(--ink);
  border:1px solid var(--rule);border-radius:0;
  padding:var(--s-xs) var(--s-sm);min-height:46px;
  font:400 var(--fs-small)/1.4 var(--ff-b);
}
select{min-width:230px}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--brown);outline-offset:2px}

.booking-form{margin-top:var(--s-xl)}
fieldset{border:0;margin:0;padding:0}
.slot-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s-lg);margin-top:var(--s-xl)}
.slot-day{margin-top:0}
.slot-days .slots{grid-template-columns:1fr}
.slot-days .slots li:nth-child(odd){border-right:0}
.slot-day legend{
  width:100%;padding:0 0 var(--s-xs);
  border-bottom:1px solid var(--rule);
  font:600 var(--fs-kicker)/1.5 var(--ff-b);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);
}
.slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.slots li{
  display:flex;align-items:center;
  padding:var(--s-2xs) var(--s-sm) var(--s-2xs) 0;
  border-bottom:1px solid var(--rule-soft);
}
.slots li:nth-child(odd){border-right:1px solid var(--rule-soft)}
/* The label wraps its own radio and still carries an explicit for/id pair, so
   the whole 44px row is one tap target and the association is readable both
   structurally and by attribute. */
.slots label{
  display:flex;align-items:center;gap:var(--s-xs);flex:1;
  margin:0;padding:var(--s-xs) 0;min-height:44px;
  font:500 var(--fs-small)/1.4 var(--ff-b);color:var(--ink);
  text-transform:none;letter-spacing:0;cursor:pointer;
}
.slots input[type=radio]{width:22px;height:22px;margin:0;flex:none;accent-color:var(--brown)}
.slots time{font-variant-numeric:tabular-nums}

.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-md);margin-top:var(--s-xl)}
.fields .field-wide{grid-column:1 / -1}
/* Reassurance sits directly under the phone field, where the hesitation is.
   It is a hint, not a margin note: a .note here would draw its hairline
   across the bottom edge of the input above it. */
.hint{
  margin:var(--s-2xs) 0 0;
  font:400 var(--fs-caption)/1.6 var(--ff-b);color:var(--brown);max-width:56ch;
}
.consent{
  margin-top:var(--s-md);padding-top:var(--s-md);border-top:1px solid var(--rule);
}
/* The label wraps the box, so the whole consent paragraph is the tap target
   and a 24px checkbox is never the only thing a thumb can hit. */
.consent label{
  display:flex;gap:var(--s-xs);align-items:flex-start;
  margin:0;font:400 var(--fs-caption)/1.6 var(--ff-b);color:var(--ink);
  text-transform:none;letter-spacing:0;max-width:70ch;cursor:pointer;
}
.consent input[type=checkbox]{width:24px;height:24px;margin:2px 0 0;flex:none;accent-color:var(--brown)}
.book-submit{display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap;margin-top:var(--s-md)}

/* Visitor-facing reassurance, not build notes. Two before the form answer
   "what am I signing up for"; two after answer "what happens to what I
   just typed". Anything that is genuinely a note to ourselves lives in an
   HTML comment where a visitor never meets it. */
.book-reassure{margin-top:var(--s-lg)}
.book-notes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--s-md) var(--s-xl);margin-top:var(--s-xl);
}
.book-notes .note{max-width:44ch}

/* ------------------------------------------------------------------ *
 * 17b . THE APPOINTMENT BOOK, WP RENDERER MAPPING
 * The [ss_booking] renderer speaks comp-b2 vocabulary (.book-shell,
 * .book-grid, .slots legend / .slot-row / .slot, .tzform, .consent,
 * .book-submit, and the error / empty / confirmation states), not the
 * comp's .booking-form / .slot-day vocabulary. The plugin ships a
 * zero-specificity :where() baseline (assets/css/booking.css) as its
 * portability floor, so every normal-specificity rule here wins without
 * a fight. This section restates comp.css Section 16 in the renderer's
 * class names, and re-tokens the three states the comp never drew
 * (errors, empty, confirmation) from the plugin's literal hex values to
 * the theme tokens so they track any token change. Where a renderer
 * class matches a comp class the comp global already styles (.tz-note,
 * .hint, .book-submit, .btn, the bare label and input element rules,
 * .consent's hairline and checkbox), that global is left to do the work
 * and is not restated here. The Task 7 front-page flatten rules
 * (#book #ss-booking, in the WP adapters block under Section 4) sit
 * beside this section untouched.
 * ------------------------------------------------------------------ */

/* The plate: cream on the sand page, hairline boxed, one comp step of
   padding. Type rides the body defaults. */
#ss-booking .book-shell{
  background:var(--cream);
  border:1px solid var(--rule-soft);
  padding:var(--s-lg);
  margin-top:var(--s-md);
}
#ss-booking .book-grid{
  display:grid;grid-template-columns:7fr 5fr;
  gap:clamp(32px,4.4vw,64px);
  align-items:start;
}
/* The renderer's aside is the comp .booking-aside: a grid of .note
   annotations. The margin reset stops the plugin's .note + .note
   fallback margins stacking on top of the grid gap. */
#ss-booking .book-aside{display:grid;gap:var(--s-md);align-content:start}
#ss-booking .book-aside .note{max-width:44ch;margin:0}

/* Time-zone swap (the GET form): comp .tz-block redrawn under the
   renderer's names. It precedes the slots here, so the hairline sits on
   its bottom edge instead of the comp's top edge. */
#ss-booking .tzform{
  display:flex;align-items:flex-end;gap:var(--s-xs);flex-wrap:wrap;
  margin:0 0 var(--s-md);padding:0 0 var(--s-md);
  border-bottom:1px solid var(--rule);
}
#ss-booking .tzform .field{margin:0;max-width:440px;flex:0 1 auto}
#ss-booking .tzform select{min-width:264px}

/* Text fields: the comp's global label and input element rules already
   reach in here. The .field wrapper just stacks label over control
   (block flow, spacing from the label's own margin) instead of the
   plugin's flex column, whose gap would double the label margin. */
#ss-booking .field{display:block}
/* The comp's labels are sentence case ("Full name", "Your time zone").
   The comp global label rule already gives them the right face, but it
   never declares text-transform or letter-spacing, so the plugin
   baseline's uppercase kicker would otherwise leak through: a
   zero-specificity declaration still applies when nothing overrides
   that exact property. */
#ss-booking .field label{text-transform:none;letter-spacing:0}
#ss-booking .book-fields{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-md);margin-top:var(--s-xl);
}
#ss-booking .book-fields .field-wide{grid-column:1 / -1}

/* Slot fieldsets, one per day, stacked. The comp's global .slots rules
   were written for its two-column <ul>; the renderer's .slots is the
   fieldset itself (legend + .slot-row), so the grid is switched off and
   the legend takes the comp .slot-day legend treatment: a bordered
   uppercase kicker naming the date and zone. */
#ss-booking .slots{display:block;border:0;margin:0 0 var(--s-md);padding:0;min-inline-size:0}
#ss-booking .slots legend{
  width:100%;padding:0 0 var(--s-xs);margin:0;
  border-bottom:1px solid var(--rule);
  font:600 var(--fs-kicker)/1.5 var(--ff-b);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);
}
#ss-booking .slot-row{
  display:flex;flex-wrap:wrap;gap:var(--s-2xs);
  padding-top:var(--s-sm);border-top:0;
}
/* Each label is the whole tap target: a white card on the cream plate,
   hairline edged, at the comp's 46px control height, radio and tabular
   time inside, the checked card inked in with a brown inset. */
#ss-booking .slot{
  display:flex;align-items:center;gap:var(--s-xs);
  margin:0;padding:var(--s-xs) var(--s-sm);
  min-height:46px;
  background:var(--white);border:1px solid var(--rule-soft);
  font:500 var(--fs-small)/1.4 var(--ff-b);color:var(--ink);
  text-transform:none;letter-spacing:0;cursor:pointer;
}
#ss-booking .slot input[type=radio]{width:22px;height:22px;margin:0;flex:none;accent-color:var(--brown)}
#ss-booking .slot:hover{border-color:var(--brown)}
#ss-booking .slot:has(input:checked){border-color:var(--brown);box-shadow:inset 0 0 0 1px var(--brown)}
/* nowrap keeps "9:00 AM EDT" on one line as in the comp; in a narrow
   column the flex row wraps whole cards instead of the time inside one */
#ss-booking .slot time{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Consent: the renderer emits input + label as siblings, so the comp's
   label-wraps-the-box flex becomes the plugin's 26px / 1fr grid, drawn
   here so it tracks the theme tokens. The hairline top and the 24px
   brown-accent checkbox come from the comp's global .consent rules. */
#ss-booking .consent{
  display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;
}
#ss-booking .consent label{
  display:block;margin:0;
  font:400 var(--fs-caption)/1.6 var(--ff-b);color:var(--ink);
  text-transform:none;letter-spacing:0;max-width:70ch;cursor:pointer;
}

/* The "or call" escape next to the submit button keeps a 44px target. */
#ss-booking .textlink{display:inline-flex;align-items:center;min-height:44px}

/* ----- The three renderer states the comp never drew, re-tokened ----- */

/* Error summary: white plate, heavy brown left rule. The palette has no
   alarm red and does not need one. */
#ss-booking .book-errors{
  background:var(--white);
  border:1px solid var(--rule);border-left:4px solid var(--brown);
  padding:var(--s-sm) var(--s-md);margin:0 0 var(--s-md);
  font-size:var(--fs-small);line-height:1.6;
}
#ss-booking .book-errors p{margin:0 0 var(--s-2xs)}
#ss-booking .book-errors ul{margin:0;padding-left:1.25em}
#ss-booking .book-errors li + li{margin-top:var(--s-3xs)}

/* Empty state: the same calm plate for both sentences (feed unreadable
   vs genuinely nothing open), phone-and-email fallback under a hairline. */
#ss-booking .book-empty{
  background:var(--white);border:1px solid var(--rule-soft);
  padding:var(--s-md);max-width:56ch;
  font-size:var(--fs-small);line-height:1.65;
}
#ss-booking .book-empty p{margin:0}
#ss-booking .book-empty p + p{margin-top:var(--s-xs);padding-top:var(--s-xs);border-top:1px solid var(--rule-soft)}

/* Confirmation: the one line on the panel that earns the display serif. */
#ss-booking .book-confirmation{
  background:var(--white);border:1px solid var(--rule);
  padding:var(--s-lg) var(--s-lg) var(--s-md);max-width:62ch;
}
#ss-booking .book-confirm-when{
  font-family:var(--ff-d);font-weight:500;
  font-size:var(--fs-h3);line-height:1.25;color:var(--ink);
  margin:0 0 var(--s-sm);padding-bottom:var(--s-sm);
  border-bottom:1px solid var(--rule);
}
#ss-booking .book-confirm-when time{font-variant-numeric:tabular-nums}
#ss-booking .book-confirm-alt{
  display:block;font:400 var(--fs-small)/1.5 var(--ff-b);
  color:var(--brown);margin-top:var(--s-2xs);
}
#ss-booking .book-confirmation p:not(.book-confirm-when){
  font-size:var(--fs-small);line-height:1.65;
  margin:0 0 var(--s-xs);max-width:58ch;
}

/* One column at the theme's stacking breakpoints. These overrides are
   restated here because the higher-specificity rules above would
   otherwise outlive the plugin baseline's own zero-specificity 860px
   fallback. The comp stacks .booking-grid at 900 and .fields at 560;
   the renderer's grids follow the same lines. */
@media (max-width:900px){
  #ss-booking .book-grid{grid-template-columns:1fr;gap:var(--s-xl)}
  #ss-booking .book-shell{padding:var(--s-md) var(--s-sm)}
  #ss-booking .book-confirmation{padding:var(--s-md) var(--s-sm)}
}
@media (max-width:560px){
  #ss-booking .book-fields{grid-template-columns:1fr}
  #ss-booking .slot{flex:1 1 40%}
  #ss-booking .tzform .field{max-width:none;flex:1 1 100%}
  #ss-booking .tzform select{min-width:0;width:100%}
}

/* ------------------------------------------------------------------ *
 * 18 . THE AFFORDABILITY TOOL  (ss-brandos/bah-calculator, .afford-*)
 * The flagship interactive tool, restated in the comp language. The
 * plugin ships a zero-specificity :where() baseline
 * (blocks/bah-calculator/style.scss) as its portability floor, so every
 * normal-specificity rule here wins without a fight; properties the
 * theme never declares (the baseline's border radii, the 20rem input
 * cap, the .85 opacities) are overridden explicitly so nothing rounded
 * or faded leaks through. The FORM reads like the appointment book
 * (Section 17): white hairline inputs on a cream plate, sentence-case
 * field labels from the global label rule, kicker legends on ruled
 * fieldsets, the term radios as the booking renderer's white slot
 * cards. The RESULT is the payoff: a white legend-box plate (Section
 * 10) whose notch is the block's own "Your estimated ceiling" label,
 * the figure in the display serif at the h2 step with tabular numerals,
 * the seven-row breakdown in the dossier .facts register (Section 11),
 * the scrutiny line a quiet brown pullquote, the assumptions as .note
 * small print. The capture sub-form mirrors the booking consent grid
 * (17b). Stacks at 900 and 560 with the rest of the theme.
 * ------------------------------------------------------------------ */

/* The plate: cream on the sand page, hairline boxed, square. Same
   chrome as the booking renderer's .book-shell. */
.afford{
  background:var(--cream);
  border:1px solid var(--rule-soft);
  border-radius:0;
  padding:var(--s-lg);
  color:var(--ink);
}
.afford .afford__heading{
  font-family:var(--ff-d);font-weight:500;
  font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.005em;
  margin:0 0 var(--s-lg);max-width:26ch;
}

/* ----- The form: the appointment book register ----- */

.afford .afford-form{
  display:grid;gap:var(--s-md);
  margin:0;max-width:760px;
}
.afford .afford-field{display:block;margin:0}

/* Number inputs take the comp field chrome (Section 17 styles text,
   email, tel and select, never number). The 440px cap is the comp
   .tz-block field measure; a money field the width of the page reads
   like a mistake. */
.afford input[type=number]{
  width:100%;max-width:440px;
  background:var(--white);color:var(--ink);
  border:1px solid var(--rule);border-radius:0;
  padding:var(--s-xs) var(--s-sm);min-height:46px;
  font:400 var(--fs-small)/1.4 var(--ff-b);
}
.afford select{width:100%;max-width:440px}
.afford input[type=text],
.afford input[type=email],
.afford input[type=tel]{max-width:440px;border-radius:0}

/* Fieldsets drop the baseline's rounded box for the comp's ruled
   group: a bordered kicker legend (the .slot-day legend device), the
   controls under it. The grid lands on the fieldset's anonymous
   content box; the rendered legend stays its own block above it. */
.afford .afford-fieldset{
  display:grid;gap:var(--s-xs);
  border:0;border-radius:0;margin:0;padding:0;min-inline-size:0;
}
.afford .afford-fieldset legend{
  width:100%;padding:0 0 var(--s-xs);margin:0 0 var(--s-3xs);
  border-bottom:1px solid var(--rule);
  font:600 var(--fs-kicker)/1.5 var(--ff-b);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);
}
.afford .afford-rates-note{
  margin:0;
  font:400 var(--fs-caption)/1.6 var(--ff-b);
  color:var(--brown);opacity:1;max-width:56ch;
}

/* Checkbox rows (the VA benefit fieldset): the booking consent
   geometry, one row per choice, the label itself carries the 44px
   tap floor (the .slots label precedent) and is clickable edge to
   edge. The row padding that used to pad a 28px label out to 44px is
   gone so the totals do not double up. */
.afford .afford-choice{
  display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;
  align-items:center;margin:0;padding:0;
}
.afford .afford-choice input{
  width:24px;height:24px;margin:0;accent-color:var(--brown);
}
.afford .afford-choice label{
  display:flex;align-items:center;min-height:44px;
  margin:0;font:400 var(--fs-small)/1.5 var(--ff-b);color:var(--ink);
  text-transform:none;letter-spacing:0;cursor:pointer;
}

/* The term radios: the booking renderer's white slot cards. The
   checked card inks in with a brown inset, the whole card height is
   tap target. */
.afford .afford-fieldset--term{display:flex;flex-wrap:wrap;gap:var(--s-2xs)}
.afford .afford-fieldset--term .afford-choice{
  display:flex;align-items:center;gap:var(--s-xs);
  margin:0;padding:0 var(--s-sm);min-height:46px;
  background:var(--white);border:1px solid var(--rule-soft);
}
.afford .afford-fieldset--term .afford-choice:hover{border-color:var(--brown)}
.afford .afford-fieldset--term .afford-choice:has(input:checked){
  border-color:var(--brown);box-shadow:inset 0 0 0 1px var(--brown);
}
.afford .afford-fieldset--term input[type=radio]{
  width:22px;height:22px;margin:0;flex:none;accent-color:var(--brown);
}
.afford .afford-fieldset--term .afford-choice label{
  flex:1;display:flex;align-items:center;min-height:46px;
  font:500 var(--fs-small)/1.4 var(--ff-b);
}

/* Comp .btn geometry stands (Section 5); only the baseline's leftover
   pill radius and the grid placement need saying. */
.afford .btn{border-radius:0;justify-self:start}

/* ----- The result: the payoff plate ----- */

/* A white legend box on the cream plate. Scoped :not(:empty) like the
   baseline so the empty live-region div on first load draws nothing. */
.afford .afford-result:not(:empty){
  position:relative;
  margin-top:var(--s-xl);
  background:var(--white);
  border:1px solid var(--rule);
  padding:clamp(28px,3.4vw,44px) clamp(20px,3vw,44px) clamp(24px,3vw,40px);
  max-width:74ch;
}
/* The block's own label becomes the notch, cream knocking out the
   rule exactly like .legend-label knocks out sand. */
.afford .afford-max{margin:0}
.afford .afford-max__label{
  position:absolute;top:-8px;left:clamp(18px,2.6vw,36px);
  background:var(--cream);padding:0 var(--s-xs);
  font:600 var(--fs-kicker)/1.4 var(--ff-b);letter-spacing:.18em;text-transform:uppercase;
  color:var(--brown);
}
/* The one number on the page that earns the display serif. */
.afford .afford-max__figure{
  display:block;
  font-family:var(--ff-d);font-weight:500;
  font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.005em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
/* The empty prompt (posted, nothing to price) in the legend-box voice. */
.afford .afford-empty{
  margin:0;
  font-family:var(--ff-d);font-weight:400;
  font-size:clamp(1.15rem,1rem + .7vw,1.4rem);line-height:1.6;
}

/* The breakdown: the dossier .facts register, redrawn for a flat
   dt/dd pair grid (the comp's dl wraps each row in a div; this one
   cannot). Border segments on dt and dd join because the row carries
   no column gap; the dt's right padding is the gutter instead. */
.afford .afford-facts{
  display:grid;grid-template-columns:220px minmax(0,1fr);gap:0;
  margin:var(--s-md) 0 0;
  border-bottom:1px solid var(--rule-soft);
}
.afford .afford-facts dt{
  border-top:1px solid var(--rule-soft);
  padding:10px var(--s-sm) 10px 0;
  font:600 var(--fs-kicker)/1.6 var(--ff-b);letter-spacing:.15em;text-transform:uppercase;
  color:var(--brown);
}
.afford .afford-facts dd{
  margin:0;border-top:1px solid var(--rule-soft);
  padding:10px 0;
  font-size:var(--fs-small);line-height:1.6;text-align:left;
  font-variant-numeric:tabular-nums;
}

/* The scrutiny line: quiet but distinct, the pullquote's brown left
   rule, never alarm-styled. Weight drops from the baseline's 600. */
.afford .afford-scrutiny{
  margin:var(--s-sm) 0 0;
  padding-left:var(--s-sm);border-left:2px solid var(--brown);
  font:400 var(--fs-small)/1.65 var(--ff-b);color:var(--brown);
  max-width:62ch;
}

/* Assumptions as .note small print under a hairline. */
.afford .afford-assumptions{
  margin:var(--s-md) 0 0;
  padding:10px 0 0 1.1em;
  border-top:1px solid var(--rule);
  font:400 var(--fs-caption)/1.55 var(--ff-b);color:var(--brown);opacity:1;
}
.afford .afford-assumptions li{margin:0 0 var(--s-3xs)}

/* ----- The capture sub-form: the booking fields and consent grid -----
   SHARED WITH THE PCS TIMELINE PLANNER (Section 19). The two tools ship
   the same capture: the same fields, the same errors plate, and the same
   byte-for-byte TCPA sentence, which the parity script checks in both
   blocks. So the planner's selectors join these rule groups instead of
   restating them thirty lines further down, because two copies of a
   consent grid are two things that can drift, and the one that drifts is
   always the one nobody is looking at. Only the class prefix differs.
   Neither capture button needs justify-self stated here: .afford .btn
   and .pcs-planner .btn already set it at lower specificity. */

.afford .afford-capture,
.pcs-planner .pcs-capture{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-md) var(--s-lg);
  margin-top:var(--s-lg);padding-top:var(--s-lg);
  border-top:1px solid var(--rule);
  max-width:760px;
}
.afford .afford-capture__heading,
.pcs-planner .pcs-capture__heading{
  grid-column:1 / -1;margin:0;
  font-family:var(--ff-d);font-weight:500;
  font-size:var(--fs-h3);line-height:1.2;
}
.afford .afford-capture__lede,
.pcs-planner .pcs-capture__lede{
  grid-column:1 / -1;margin:calc(var(--s-xs) * -1) 0 0;
  font:400 var(--fs-small)/1.6 var(--ff-b);color:var(--brown);opacity:1;
  max-width:56ch;
}

/* Errors: the booking renderer's white plate with the heavy brown left
   rule. The palette has no alarm red and does not need one. */
.afford .afford-capture-errors,
.pcs-planner .pcs-capture-errors{
  grid-column:1 / -1;
  background:var(--white);
  border:1px solid var(--rule);border-left:4px solid var(--brown);
  border-radius:0;
  padding:var(--s-sm) var(--s-md);
  font-size:var(--fs-small);line-height:1.6;
}
.afford .afford-capture-errors p,
.pcs-planner .pcs-capture-errors p{margin:0 0 var(--s-2xs)}

/* TCPA consent: the 17b booking grid verbatim, 24px brown-accent box,
   the whole locked sentence clickable. The label is the tap target and
   it is many lines tall, so the 24px box is never the only thing a thumb
   can hit. */
.afford .afford-consent,
.pcs-planner .pcs-consent{
  grid-column:1 / -1;
  display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;
  margin:0;padding-top:var(--s-md);
  border-top:1px solid var(--rule);
  font-size:var(--fs-caption);
}
.afford .afford-consent input[type=checkbox],
.pcs-planner .pcs-consent input[type=checkbox]{
  width:24px;height:24px;margin:2px 0 0;accent-color:var(--brown);
}
.afford .afford-consent label,
.pcs-planner .pcs-consent label{
  margin:0;font:400 var(--fs-caption)/1.6 var(--ff-b);color:var(--ink);
  text-transform:none;letter-spacing:0;max-width:70ch;cursor:pointer;
}
.afford .afford-capture > .btn,
.pcs-planner .pcs-capture > .btn{grid-column:1 / -1}

/* Confirmation: white plate, display serif, like .book-confirmation. */
.afford .afford-capture--done,
.pcs-planner .pcs-capture--done{
  margin-top:var(--s-lg);padding:var(--s-lg);
  background:var(--white);border:1px solid var(--rule);
}
.afford .afford-capture-done,
.pcs-planner .pcs-capture-done{
  margin:0;
  font-family:var(--ff-d);font-weight:500;
  font-size:var(--fs-h4);line-height:1.3;
}

/* One column at the theme's stacking lines, matching 17b. */
@media (max-width:900px){
  .afford{padding:var(--s-md) var(--s-sm)}
}
@media (max-width:560px){
  .afford input[type=number],
  .afford select,
  .afford input[type=text],
  .afford input[type=email],
  .afford input[type=tel]{max-width:none}
  .afford .afford-fieldset--term .afford-choice{flex:1 1 40%}
  .afford .afford-result:not(:empty){padding:var(--s-md) var(--s-sm)}
  .afford .afford-facts{grid-template-columns:1fr}
  .afford .afford-facts dt{padding:10px 0 0}
  .afford .afford-facts dd{border-top:0;padding:2px 0 10px}
  .afford .afford-capture,
  .pcs-planner .pcs-capture{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------ *
 * 19 . THE PCS TIMELINE PLANNER  (ss-brandos/pcs-timeline, .pcs-*)
 * The second interactive tool, and on the military pillar the more
 * important one. It takes the plate, the field chrome and the capture
 * grid of Section 18 so the two read as siblings wherever they meet,
 * and everything between the form and the capture is the comp's own
 * sequence device (Section 12): a real <ol> with leading-zero counters,
 * hairline ruled, one visible "when" per row so nothing depends on a
 * column header that disappears at a breakpoint.
 *
 * The plugin ships a zero-specificity :where() baseline
 * (blocks/pcs-timeline/style.scss) as its portability floor, so every
 * normal-specificity rule here wins without a fight. Properties the
 * theme never declares (the baseline's 16px radii, the 20rem input cap,
 * the .85 opacities, the 600 weights) are overridden explicitly so
 * nothing rounded or faded leaks through, which is the same discipline
 * Section 18 keeps against the same kind of baseline.
 *
 * THE PAYOFF is the report date. The whole tool is arithmetic hung off
 * one fact a family already knows, so the row that states it back to
 * them gets the display serif at the h2 step, exactly the weight the
 * calculator gives its ceiling figure. It is reached structurally
 * rather than by class, because the block's markup contract gives every
 * stage the same classes and this file does not get to change markup;
 * see the selector's own comment below.
 *
 * THE "DO THIS NOW" GROUP inverts to the sand plate with a brown rule.
 * Urgency without a new colour: the palette has no alert red and the
 * encode does not want one.
 *
 * Two deviations from the brief, both flagged rather than smuggled:
 * (1) the counters are the display serif, as Section 12 draws them, not
 * the script face. The script token is used nowhere else in the theme
 * and Pinyon numerals at counter size are decorative before they are
 * legible. (2) The two standing notes take the legend box's plate and
 * voice (Section 10) WITHOUT its notch: the notch is a label element,
 * the markup contract has none, and a stylesheet does not get to mint
 * visitor-facing copy on this project.
 *
 * The capture sub-form and its TCPA consent grid are not here at all.
 * They are shared with Section 18, in Section 18, for the reason stated
 * there. Stacks at 900 and 560 with the rest of the theme.
 * ------------------------------------------------------------------ */

/* The plate: the same cream, hairline, square chrome as .afford and
   .book-shell, so a page carrying both tools carries one object twice. */
.pcs-planner{
  background:var(--cream);
  border:1px solid var(--rule-soft);
  border-radius:0;
  padding:var(--s-lg);
  color:var(--ink);
}
.pcs-planner .pcs-planner__heading{
  font-family:var(--ff-d);font-weight:500;
  font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.005em;
  margin:0 0 var(--s-lg);max-width:26ch;
}

/* ----- The form: one field, the appointment book register ----- */

.pcs-planner .pcs-form{
  display:grid;gap:var(--s-md);
  margin:0;max-width:760px;
}
/* Block flow, not the baseline's grid: the label's own margin is the
   gap, the way #ss-booking .field does it, so the two never double up. */
.pcs-planner .pcs-field{display:block;margin:0}
/* The comp's global label rule already gives these the right face but
   never declares text-transform or letter-spacing, so the baseline's
   uppercase kicker would leak through a property nothing overrides. */
.pcs-planner .pcs-field label{text-transform:none;letter-spacing:0}

/* The date field takes the comp field chrome and the .tz-block 440px
   measure. A date input the width of the page reads like a mistake. */
.pcs-planner input[type=date],
.pcs-planner input[type=text],
.pcs-planner input[type=email],
.pcs-planner input[type=tel]{
  width:100%;max-width:440px;
  background:var(--white);color:var(--ink);
  border:1px solid var(--rule);border-radius:0;
  padding:var(--s-xs) var(--s-sm);min-height:46px;
  font:400 var(--fs-small)/1.4 var(--ff-b);
}

/* Comp .btn geometry stands (Section 5); the baseline's pill radius and
   the grid placement are all that need saying. */
.pcs-planner .btn{border-radius:0;justify-self:start}
/* The download is the quieter of the two buttons on the plate: the same
   geometry, inverted, so "add these dates" never competes with "show me
   my timeline". The .btn-light inversion, re-tokened for a cream ground. */
.pcs-planner .btn--secondary{
  background:var(--white);color:var(--brown);border-color:var(--brown);
}
.pcs-planner .btn--secondary:hover{
  background:var(--brown);color:var(--cream);border-color:var(--brown);
}

/* ----- The result: the payoff ----- */

/* A white plate on the cream, the same move .afford-result makes, and
   :not(:empty) so the empty live region on first load draws nothing. The
   counter is reset HERE rather than on either list, because the timeline
   is one sequence that the model splits in two when stages collapse; a
   reset per list would restart the upcoming stages at 01. */
.pcs-planner .pcs-result{counter-reset:pcs}
.pcs-planner .pcs-result:not(:empty){
  margin-top:var(--s-xl);
  background:var(--white);
  border:1px solid var(--rule);
  padding:clamp(28px,3.4vw,44px) clamp(20px,3vw,44px) clamp(24px,3vw,40px);
  max-width:74ch;
}

/* The lede, and the two refusals, in the legend box's paragraph voice:
   this is the sentence that tells a family where they stand. */
.pcs-planner .pcs-lede,
.pcs-planner .pcs-error,
.pcs-planner .pcs-forecast{
  margin:0 0 var(--s-md);
  font-family:var(--ff-d);font-weight:400;
  font-size:clamp(1.15rem,1rem + .7vw,1.4rem);line-height:1.6;
  color:var(--ink);
  max-width:56ch;
}

.pcs-planner .pcs-now__heading{
  margin:0 0 var(--s-2xs);
  font-family:var(--ff-d);font-weight:500;
  font-size:var(--fs-h4);line-height:1.3;color:var(--brown);
}

/* ----- The sequence ----- */

.pcs-planner .pcs-stages{
  list-style:none;
  margin:0 0 var(--s-lg);padding:0;
  border-top:1px solid var(--rule-soft);
}
/* Two columns: the counter holds the first, everything the block renders
   is forced into the second. The li carries four children plus the
   counter, so without that the five items would auto-place across both
   columns and the row would come apart. */
.pcs-planner .pcs-stage{
  counter-increment:pcs;
  display:grid;grid-template-columns:56px minmax(0,1fr);
  gap:var(--s-3xs) var(--s-md);
  padding:var(--s-md) 0;
  border-bottom:1px solid var(--rule-soft);
}
.pcs-planner .pcs-stage > *{grid-column:2}
.pcs-planner .pcs-stage::before{
  content:counter(pcs,decimal-leading-zero);
  grid-column:1;
  font-family:var(--ff-d);font-weight:500;
  font-size:var(--fs-h3);line-height:1.1;
  color:var(--brown);
  font-variant-numeric:tabular-nums;
}

/* The when line is the register's dt: the .facts kicker exactly. */
.pcs-planner .pcs-stage__when{
  margin:0;
  font:600 var(--fs-kicker)/1.5 var(--ff-b);
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--brown);
}
/* What the family does. The row's own sentence, at the register's dd
   size; the weight is declared because the baseline sets 600. */
.pcs-planner .pcs-stage__family{
  margin:0;
  font:500 var(--fs-small)/1.6 var(--ff-b);color:var(--ink);
  max-width:56ch;
}
/* What Megan does on her end IS the shared hairline annotation (Section
   6), in its embedded form: it rides a soft rule inside the row rather
   than drawing the .note's full-weight one, which would put two
   different hairlines a few lines apart. Opacity is declared because the
   baseline fades it to .85 and brown on white does not need help. */
.pcs-planner .pcs-stage__megan{
  margin:var(--s-2xs) 0 0;
  border-top:1px solid var(--rule-soft);padding-top:var(--s-2xs);
  font:400 var(--fs-caption)/1.55 var(--ff-b);
  color:var(--brown);opacity:1;
  max-width:56ch;
}
/* The standard text link, at the .entry-link weight, holding the 44px
   tap floor the whole encode holds. */
.pcs-planner .pcs-stage__link,
.pcs-planner .pcs-error__link{
  display:inline-flex;align-items:center;min-height:44px;
  font:500 var(--fs-small)/1.4 var(--ff-b);
}
.pcs-planner .pcs-error__link-wrap{margin:0 0 var(--s-md)}

/* THE REPORT DATE, the one fact the whole tool is hung on, in the
   display serif at the calculator's figure step.

   Reached structurally because it has to be: the markup contract gives
   every stage row the same classes, and a stylesheet does not get to
   add one. The report stage is always the last row of the last list,
   in all three shapes the model produces (one upcoming list; a now list
   plus an upcoming list; and everything collapsed into a single now
   list on or after the report date), because the model emits the stages
   in order and the report stage is last in that order. */
.pcs-planner .pcs-stages:last-of-type > .pcs-stage:last-child .pcs-stage__when{
  font-family:var(--ff-d);font-weight:500;
  font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.005em;
  text-transform:none;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* The collapsed group inverts to the sand plate inside the white one,
   bounded by the brown rule. The urgent block reads as urgent with no
   colour the palette does not already own. The last row drops its
   separator so the plate closes cleanly. */
.pcs-planner .pcs-stages--now{
  background:var(--sand);
  border:1px solid var(--brown);
  padding:0 var(--s-md);
}
.pcs-planner .pcs-stages--now > .pcs-stage:last-child{border-bottom:0}

/* ----- The two standing notes ----- */

/* The legend box's plate and voice, without its notch (see the section
   head). Sand on the white result plate, so a note is visibly an aside
   and not another timeline row. */
.pcs-planner .pcs-note--peak,
.pcs-planner .pcs-note--compressed{
  margin:0 0 var(--s-md);
  background:var(--sand);
  border:1px solid var(--rule);
  padding:var(--s-md);
  font-family:var(--ff-d);font-weight:400;
  font-size:clamp(1.05rem,.98rem + .4vw,1.25rem);line-height:1.6;
  color:var(--ink);
  max-width:62ch;
}

/* Assumptions as .note small print under a hairline, matching
   .afford-assumptions line for line. */
.pcs-planner .pcs-assumptions{
  margin:var(--s-md) 0 0;
  padding:10px 0 0 1.1em;
  border-top:1px solid var(--rule);
  font:400 var(--fs-caption)/1.55 var(--ff-b);color:var(--brown);opacity:1;
}
.pcs-planner .pcs-assumptions li{margin:0 0 var(--s-3xs)}

/* The download form sits between the timeline and the capture. */
.pcs-planner .pcs-ics{margin-top:var(--s-lg)}

/* THE HIDDEN ATTRIBUTE OUTRANKS EVERY LAYOUT RULE ABOVE, restated here
   because this file is now one of the author stylesheets that could
   break it. The block ships form.pcs-ics and form.pcs-capture in EVERY
   state, hidden until a timeline exists, and "hidden" is what keeps the
   PII fields and the TCPA consent box out of the tab order and the
   accessibility tree until then. The UA sheet's [hidden] rule loses to
   ANY author declaration, whatever its origin's specificity, and the
   shared capture group above sets display:grid. The block's own
   stylesheet carries the same !important guard; this one means the
   theme does not depend on that file loading first, or at all. */
.pcs-planner [hidden]{display:none !important}

/* One column at the theme's stacking lines, matching 17b and 18. */
@media (max-width:900px){
  .pcs-planner{padding:var(--s-md) var(--s-sm)}
}
@media (max-width:560px){
  .pcs-planner input[type=date],
  .pcs-planner input[type=text],
  .pcs-planner input[type=email],
  .pcs-planner input[type=tel]{max-width:none}
  .pcs-planner .pcs-result:not(:empty){padding:var(--s-md) var(--s-sm)}
  /* The counter column costs more than it earns at this width: it takes
     a fifth of the measure away from a sentence that already wraps. The
     counter moves onto its own line above the row it numbers. */
  .pcs-planner .pcs-stage{grid-template-columns:minmax(0,1fr)}
  .pcs-planner .pcs-stage > *,
  .pcs-planner .pcs-stage::before{grid-column:1}
  .pcs-planner .pcs-stages--now{padding:0 var(--s-sm)}
  .pcs-planner .pcs-note--peak,
  .pcs-planner .pcs-note--compressed{padding:var(--s-sm)}
}

/* ------------------------------------------------------------------ *
 * 20 . FOOTER  (comp.css Section 17)
 * ------------------------------------------------------------------ */
.site-foot{background:var(--ink);color:var(--sand)}
.site-foot .wrap{padding-block:var(--s-2xl) var(--s-xl)}
.foot-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-xl);flex-wrap:wrap;
  padding-bottom:var(--s-lg);margin-bottom:var(--s-lg);
  border-bottom:1px solid var(--rule-cream);
}
.foot-mm img{height:72px;width:auto}
.foot-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s-md);flex-wrap:wrap}
.foot-nav a{font:500 var(--fs-caption)/1 var(--ff-b)}
.site-foot a{color:var(--sand);text-decoration-color:var(--sand)}
.site-foot a:hover{color:var(--white);text-decoration-color:var(--white)}
.site-foot :focus-visible{outline-color:var(--sand)}
.foot-legal{display:flex;gap:var(--s-md);align-items:flex-start;flex-wrap:wrap}
.eho{flex:none;background:var(--sand);display:inline-flex;padding:7px;line-height:0}
.eho img{height:30px;width:30px}
.legal-text{font-size:var(--fs-caption);line-height:1.8;color:rgba(239,235,223,.94);max-width:78ch}
.legal-text p{margin-bottom:.6em}
.legal-text .fine{color:rgba(239,235,223,.78)}

/* The builder's mark (theme 2.2.8): the Secret Squirrel easter egg under the
   social line (parts/footer.html carries the markup and the why). Pointer
   devices: a centered 18px squirrel at 12 percent footer ink; hover or
   keyboard focus lifts the whole anchor to full ink, spins the mark, and
   fades in the credit in the eyebrow label register. The credit span always
   occupies its space, so the reveal never shifts layout. Touch devices
   (hover:none / pointer:coarse): the centered line hides and a 14px acorn
   tucks into the footer's bottom right corner instead; tapping it pops the
   spinning squirrel and the same credit anchor above it (native details
   toggle; the part's three-line listener closes it on tap-away). Reduced
   motion, either variant: reveal only, no spin (the global reduce block
   also zeroes the animation; this block is the explicit intent). */
.ss-egg-line{margin:0;text-align:center}
.site-foot .ss-egg-line{margin-block-start:var(--s-md)}
/* Column on pointer devices: the credit sits UNDER the mark, so the faint
   squirrel is truly centered at rest while the invisible credit line still
   reserves its space (zero layout shift on reveal). */
.ss-egg{display:inline-flex;flex-direction:column;align-items:center;gap:var(--s-3xs);text-decoration:none;opacity:.12;transition:opacity .35s ease}
.ss-egg:hover,.ss-egg:focus-visible{opacity:1}
.ss-egg-mark{width:18px;height:18px;flex:none}
.ss-egg:hover .ss-egg-mark,
.ss-egg:focus-visible .ss-egg-mark{animation:ss-egg-spin 1.2s linear infinite}
.ss-egg-credit{font:600 var(--fs-kicker)/1.5 var(--ff-b);letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .35s ease}
.ss-egg:hover .ss-egg-credit,
.ss-egg:focus-visible .ss-egg-credit{opacity:1}
@keyframes ss-egg-spin{to{transform:rotate(360deg)}}
.ss-egg-touch{display:none}
@media (hover:none),(pointer:coarse){
  .ss-egg-line{display:none}
  .site-foot{position:relative}
  .ss-egg-touch{display:block;position:absolute;right:var(--s-sm);bottom:var(--s-xs)}
  .ss-egg-touch summary{list-style:none;display:inline-flex;padding:var(--s-3xs);cursor:pointer;color:var(--sand);opacity:.12;transition:opacity .35s ease}
  .ss-egg-touch summary::-webkit-details-marker{display:none}
  .ss-egg-touch[open] summary{opacity:1}
  .ss-egg-acorn{width:14px;height:14px}
  .ss-egg-pop{position:absolute;right:0;bottom:100%;margin:0 0 var(--s-2xs);width:max-content;max-width:min(72vw,340px)}
  .ss-egg-touch .ss-egg{opacity:1;flex-direction:row;gap:var(--s-2xs)}
  .ss-egg-touch .ss-egg-credit{opacity:1;text-align:left}
  .ss-egg-touch .ss-egg-mark{animation:ss-egg-spin 1.2s linear infinite}
}
@media (prefers-reduced-motion:reduce){
  .ss-egg:hover .ss-egg-mark,
  .ss-egg:focus-visible .ss-egg-mark,
  .ss-egg-touch .ss-egg-mark{animation:none}
}

/* ------------------------------------------------------------------ *
 * 21 . RESPONSIVE  (comp.css Section 18, verbatim)
 * Verified at 1440, 1024, 900, 560 and true 390 (via _mobile.html,
 * because headless Chrome clamps a window below 500px wide).
 * ------------------------------------------------------------------ */
@media (max-width:1080px){
  :root{--rail:220px}
  .band-dark .bd-media{min-height:360px}
}

@media (max-width:900px){
  :root{--head-h:0px}
  .site-head{position:static}
  .hero{grid-template-columns:1fr}
  /* flex:0 0 auto matters: with flex:1 the basis is 0 and the plate would
     collapse to nothing once the column stops being a stretched grid item */
  .hero-plate .ph{flex:0 0 auto;min-height:0;height:min(46vh,380px)}
  .hero-plate figcaption{padding-inline:var(--gutter)}
  .hero-page{padding:var(--s-xl) var(--gutter) var(--s-2xl)}
  .cols-75,.cols-57{grid-template-columns:1fr}
  .dossier-index{grid-template-columns:1fr}
  .guide-links{grid-template-columns:1fr}
  .edge-band,.edge-band-l{display:block;margin-inline:0}
  .edge-band img,.edge-band-l img{height:var(--edge-h-m,320px)}
  .edge-band figcaption,.edge-band .edge-text,
  .edge-band-l figcaption,.edge-band-l .edge-text{padding-inline:var(--gutter)}
  .edge-band .edge-text,.edge-band-l .edge-text{margin-bottom:var(--s-lg)}
  .edge-band figure,.edge-band-l figure{margin-top:var(--s-md)}
  .band-dark{grid-template-columns:1fr}
  .band-dark .bd-media{min-height:0;height:min(44vh,360px)}
  .band-dark .bd-body{padding:var(--s-2xl) var(--gutter)}
  /* minmax(0,1fr), not bare 1fr: the article carries arbitrary post content
     (comparison tables), and a bare 1fr track's automatic minimum would grow
     the column to the table's min-content and push the whole guide past the
     viewport on narrow phones. With a zero minimum the track holds the
     container width and the plugin's own figure.mm-comparison-table
     overflow-x:auto does the scrolling, matching the desktop rule where the
     article column is already minmax(0,1fr). */
  .guide{grid-template-columns:minmax(0,1fr);gap:var(--s-xl)}
  .rail{position:static}
  .rail-card{max-width:420px}
  .booking-grid{display:block;margin-inline:0}
  .booking-body{padding-inline:var(--gutter);max-width:none}
  .booking-media{position:static;height:auto;min-height:0;margin-top:var(--s-xl)}
  .booking-media .ph{height:300px;flex:none}
  .booking-media figcaption{padding-inline:var(--gutter)}
  .section{padding-block:var(--s-2xl)}
  .band .ph{height:min(44vh,340px)}
  .band-short .ph{height:min(38vh,300px)}
}

@media (max-width:560px){
  /* the utility bar keeps the brokerage name and mark on a phone; the city
     is dropped because the footer carries the full office address */
  .masthead .wrap{gap:var(--s-3xs)}
  .mm-line span[aria-hidden],.mm-city{display:none}
  .site-head .wrap{gap:var(--s-xs);padding-block:var(--s-xs)}
  .site-nav{margin-left:0;width:100%;order:3}
  .site-nav ul{gap:var(--s-sm) var(--s-md)}
  .brand img{height:34px}
  .facts>div{grid-template-columns:1fr;gap:2px}
  .facts dt{padding-top:0}
  .seq>li{grid-template-columns:56px minmax(0,1fr);gap:var(--s-sm) var(--s-md)}
  .seq>li::before{font-size:1.75rem}
  .slots{grid-template-columns:1fr}
  .slots li:nth-child(odd){border-right:0}
  .fields{grid-template-columns:1fr}
  .rail a{grid-template-columns:28px minmax(0,1fr)}
  .foot-mm img{height:58px}
  .note-row{gap:var(--s-md)}
}

/* ============================================================
   MOBILE HEADER FIX (2026-07-27)
   Below 760px the primary nav collapses behind a native
   <details> disclosure. No JavaScript, keyboard operable,
   and legible to an ARIA-reading browsing agent. The thin
   brokerage strip stays so the broker requirement (name AND
   logo always displayed) still holds on every viewport.
   ============================================================ */
.navwrap > summary.navtoggle{display:none}

@media (max-width:760px){
  .masthead .wrap{padding-block:var(--s-2xs);gap:var(--s-2xs)}
  .mm-line{font-size:var(--fs-kicker);letter-spacing:.06em}
  .mm-line img{height:12px;width:auto}
  .mm-city{display:none}
  .masthead a[href^="tel:"]{display:none}

  .site-head .wrap{
    display:flex;align-items:center;gap:var(--s-xs);
    padding-block:var(--s-2xs);
  }
  .site-head .brand{flex:1 1 auto;min-width:0;display:flex;align-items:center;min-height:44px}
  .site-head .brand img{height:32px;width:auto;max-width:100%;object-fit:contain;object-position:left center}

  .head-call{
    flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
    font-size:var(--fs-kicker);letter-spacing:.1em;text-transform:uppercase;
    text-decoration:none;padding:var(--s-2xs) var(--s-xs);
    border:1px solid rgba(76,69,63,.4);color:var(--brown);
  }

  .navwrap{flex:0 0 auto;position:relative}
  /* Closed, the panel must leave layout entirely. Left in flow it is squeezed
     to the width of the toggle, which pushes phantom boxes past the right
     edge even though nothing is painted. */
  .navwrap:not([open]) > .site-nav{display:none}
  .navwrap > summary.navtoggle{
    display:flex;align-items:center;min-height:44px;
    list-style:none;cursor:pointer;
    font-size:var(--fs-kicker);letter-spacing:.1em;text-transform:uppercase;
    padding:var(--s-2xs) var(--s-xs);border:1px solid var(--brown);
    background:var(--brown);color:var(--cream);
  }
  .navwrap > summary.navtoggle::-webkit-details-marker{display:none}
  .navwrap > summary.navtoggle::after{content:" \25BE"}
  .navwrap[open] > summary.navtoggle::after{content:" \25B4"}
  .navwrap > summary.navtoggle:focus-visible{outline:2px solid var(--fawn);outline-offset:2px}

  .navwrap[open] .site-nav{
    position:absolute;right:0;top:calc(100% + var(--s-2xs));z-index:60;
    min-width:min(74vw,280px);
    background:var(--cream);border:1px solid rgba(76,69,63,.28);
    box-shadow:0 18px 44px rgba(25,24,24,.18);
  }
  .navwrap[open] .site-nav ul{
    display:flex;flex-direction:column;align-items:stretch;
    gap:0;margin:0;padding:var(--s-2xs) 0;list-style:none;
  }
  .navwrap[open] .site-nav li{margin:0}
  .navwrap[open] .site-nav li > a{
    display:block;padding:var(--s-xs) var(--s-sm);font-size:var(--fs-small);
    text-decoration:none;
    border-bottom:1px solid rgba(76,69,63,.12);
  }
  .navwrap[open] .site-nav li:last-child > a{border-bottom:0}
  .navwrap[open] .site-nav .btn{margin:var(--s-2xs) var(--s-xs);text-align:center}
}

@media (min-width:761px){
  .head-call{display:none}
  .navwrap{display:flex;align-items:center}
  .navwrap > summary.navtoggle{display:none}
}

/* ------------------------------------------------------------
   MOBILE TAP TARGETS (2026-07-27)
   Standalone actions were 14 to 21px tall, well under the 44px
   a thumb needs. Prose links are left alone: inflating inline
   links inside a paragraph breaks the line rhythm and is not
   what the guidance is about.
   ------------------------------------------------------------ */
@media (max-width:760px){
  /* These are comp-cb's own class names. The first pass carried comp-b2's
     selectors across (.site-footer, .footer-nav), which match nothing here,
     so every footer link stayed 20px tall. */
  .entry-link,
  .quiet-link,
  .site-foot a,
  .foot-nav a,
  .rail a,
  .guide-links a,
  a[href^="tel:"],
  a[href^="mailto:"]{
    display:inline-block;
    min-height:44px;
    line-height:44px;
  }
  .legal-text a{line-height:44px}
  .rail a{display:grid;line-height:1.45;align-content:center}
  /* buttons already have padding; just guarantee the floor */
  .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  /* menu panel rows: comfortable, evenly spaced */
  .navwrap[open] .site-nav a{min-height:46px;display:flex;align-items:center}
}

/* ------------------------------------------------------------
   THE PERSISTENT MOBILE ACTION BAR (2026-07-30)
   Two targets, no more: Call and Book. The masthead phone number
   and the sticky header both disappear on a phone once the reader
   is a screen down, which left no way to reach a human without
   scrolling back. Two avatars decided on this alone.
   ------------------------------------------------------------ */
.mobile-bar{display:none}

@media (max-width:760px){
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:var(--brown);border-top:1px solid var(--ink);
  }
  .mobile-bar a{
    display:flex;align-items:center;justify-content:center;
    min-height:60px;padding:var(--s-2xs);
    color:var(--cream);text-decoration:none;
    font:600 var(--fs-caption)/1.2 var(--ff-b);letter-spacing:.1em;text-transform:uppercase;
  }
  .mobile-bar a + a{background:var(--cream);color:var(--brown)}
  .mobile-bar a:focus-visible{outline:2px solid var(--cream);outline-offset:-4px}
  .mobile-bar a + a:focus-visible{outline-color:var(--brown)}
  /* the bar floats over the page, so the last of the footer needs its own
     clearance or the compliance line sits underneath it */
  body{padding-bottom:60px}
  /* an in-page anchor must not land under the bar either */
  [id]{scroll-margin-bottom:68px}
}

/* ------------------------------------------------------------
   COMPACT REGISTER, RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:900px){
  .town-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-md)}
}

/* ------------------------------------------------------------
   GETTING THE TOWNS ONTO THE FIRST TWO PHONE SCREENS (2026-07-30)
   The full dossier now sits directly under the short version, but on a
   390px phone the frontispiece plus the title page alone run past one
   screen. So on a phone the compact register is promoted above the
   short version, and the frontispiece gives back some height. Neither
   changes anything on a laptop, where nothing was ever buried.
   ------------------------------------------------------------ */
@media (max-width:760px){
  .section-tight > .wrap{display:flex;flex-direction:column}
  .section-tight{padding-block:var(--s-lg) var(--s-xl)}
  .town-strip{order:-1;margin-top:0;margin-bottom:var(--s-lg)}
  .hero-plate .ph{height:min(38vh,300px)}
  .hero-page{padding-bottom:var(--s-xl);gap:var(--s-md)}
  .hero-sub,.hero-page .imprint,.hero-cta,.hero-notes{margin-top:var(--s-md)}
}

/* ==================================================================
   WORDPRESS GLUE, in the comp language.
   Everything below styles markup the theme does not own wholesale:
   plugin block output, registered block-style variations, and the
   locked Phase 4 chrome the live templates still emit until Tasks 5
   through 8 rebuild them against the comp classes above.
   ================================================================== */

/* ------------------------------------------------------------------ *
 * G1 . ANTLER MARK (all that survives of the Phase 4 brand chrome; the
 * comp header and footer parts render their own brand lockups under the
 * comp .brand / .site-foot rules, so the Phase 4 lockup/wordmark sizing
 * is gone).
 *
 * Antler-only mark: decorative accent used by patterns/brand-antler-mark.php
 * (the designed 404). Empty alt, aria-hidden, because the full lockup with
 * the brokerage name is on the same page twice. The asset lives in
 * assets/images with the "+" stripped from the filename, because a literal
 * "+" in a URL decodes to a space and 404s.
 * ------------------------------------------------------------------ */
.mm-antler-mark {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-md);
}
.mm-antler-mark__img {
  width: clamp(96px, 14vw, 148px);
  height: auto;
  opacity: 0.9;
}

/* Eyebrow / label uppercase tracking helper (H5/H6 spec), kept for the
   mid-flight templates and the answer-first meta. Comp equivalent is
   .eyebrow; Tasks 5 through 8 move markup onto that class. */
.mm-eyebrow,
.is-style-mm-eyebrow {
  font-family: var(--ff-b);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brown);
}
/* On dark bands the eyebrow inherits cream so it stays legible. Covers BOTH
   the plain .mm-eyebrow class and the registered .is-style-mm-eyebrow
   variation, on preset dark grounds and inside covers. An explicit preset
   colour class still wins (WordPress emits those with !important). */
.has-dark-brown-background-color .mm-eyebrow,
.has-dark-brown-background-color .is-style-mm-eyebrow,
.has-black-background-color .mm-eyebrow,
.has-black-background-color .is-style-mm-eyebrow,
.wp-block-cover .mm-eyebrow,
.wp-block-cover .is-style-mm-eyebrow {
  color: var(--cream);
}
.has-dark-brown-background-color .is-style-mm-answer-quiet .mm-eyebrow,
.has-dark-brown-background-color .is-style-mm-answer-quiet .is-style-mm-eyebrow,
.has-black-background-color .is-style-mm-answer-quiet .mm-eyebrow,
.has-black-background-color .is-style-mm-answer-quiet .is-style-mm-eyebrow,
.wp-block-cover .is-style-mm-answer-quiet .mm-eyebrow,
.wp-block-cover .is-style-mm-answer-quiet .is-style-mm-eyebrow {
  color: var(--cream);
}

/* ------------------------------------------------------------------ *
 * G2 . COMPLIANCE FURNITURE: PRESENTATION ONLY, comp .foot-legal language.
 *
 * The theme does not embed this block and states none of its content. The
 * secret-squirrel-brandos plugin renders the whole thing (identity, licence,
 * brokerage, address, NAP, and the Equal Housing logo + statement) from
 * SS_Identity::config() into the locked slot in parts/footer.html. These rules
 * only colour and space what the plugin emits, matching the comp footer's
 * .legal-text / .eho / .fine treatment: caption-size cream text on the dark
 * ground, a cream hairline above, the EHO mark on its sand chip. Never restate
 * an identity fact here, and never add a second instance of the block anywhere.
 * ------------------------------------------------------------------ */
.compliance-furniture {
  border-top: 1px solid var(--rule-cream);
  padding-top: var(--s-md);
  font-family: var(--ff-b);
  font-size: var(--fs-caption);
  line-height: 1.8;
  color: rgba(239, 235, 223, 0.94);
}
.compliance-furniture p {
  margin: 0 0 0.6em;
}
.compliance-furniture a {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--cream);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.compliance-furniture a:hover {
  color: var(--white);
  text-decoration-thickness: 2px;
}
/* The EHO row: logo on its sand chip (comp .eho), statement beside it. */
.compliance-furniture .cf-eho {
  display: flex;
  align-items: flex-start;
  gap: var(--s-sm);
  margin-top: var(--s-sm);
  max-width: 78ch;
}
.compliance-furniture .cf-eho-logo {
  flex: none;
  box-sizing: content-box;
  width: 30px;
  height: 30px;
  padding: 7px;
  background: var(--sand);
}
/* Last-updated line reads one step quieter, like comp .fine. */
.compliance-furniture .cf-updated {
  color: rgba(239, 235, 223, 0.78);
}

/* ------------------------------------------------------------------ *
 * G3 . FOOTER COMPLIANCE BAND (all that survives of the Phase 4 footer
 * chrome; the comp .site-foot in parts/footer.html carries its own link
 * and nav rules). What remains styles the locked compliance region of
 * parts/footer.html only. Layout only: every identity, license, brokerage,
 * address, and NAP fact is rendered by the plugin from the single identity
 * config. Never restate one here.
 * ------------------------------------------------------------------ */

/* Footer compliance band: the locked region in parts/footer.html that holds
   the cream lockup and the plugin-rendered furniture. The furniture is capped
   to a readable measure but pinned LEFT so its edge matches the lockup above
   and the legal links below. */
.mm-footer-compliance {
  margin-top: var(--s-lg);
}
.mm-footer-compliance .compliance-furniture {
  /* px, not ch: a ch-relative cap would scale with the furniture's own caption
     type and re-create the mismatched measure this fix exists to remove. */
  max-width: 790px;
  margin-left: 0;
  margin-right: auto;
}
.cf-legal-links {
  margin-top: var(--s-md);
  font-size: var(--fs-caption);
}

/* ------------------------------------------------------------------ *
 * G4 . ANSWER-FIRST BLOCK: the comp legend box.
 *
 * The ss-brandos/answer-first block's default look becomes the notched
 * legend box (comp Section 9): 2px rule border, square, the eyebrow kicker
 * notched into the top border on a white chip, the answer set in the
 * display serif. The plugin's own block stylesheet (cream card, left rule,
 * 16px radius) stays enqueued, so these selectors carry the block's wrapper
 * class for the specificity to override it cleanly.
 * ------------------------------------------------------------------ */
.wp-block-ss-brandos-answer-first.mm-answer-first {
  position: relative;
  background: transparent;
  border: 2px solid var(--rule);
  border-radius: 0;
  padding: clamp(28px, 3.4vw, 44px) clamp(20px, 3vw, 44px) clamp(24px, 3vw, 40px);
  max-width: 74ch;
}
/* The eyebrow becomes the notched label. White chip per the design brief so
   the notch reads on sand and cream grounds alike. */
.wp-block-ss-brandos-answer-first.mm-answer-first .mm-eyebrow {
  position: absolute;
  top: -9px;
  left: clamp(18px, 2.6vw, 36px);
  margin: 0;
  background: var(--white);
  padding: 0 var(--s-xs);
  font: 600 var(--fs-kicker)/1.4 var(--ff-b);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown);
}
/* On a sand band the chip matches the ground, comp-verbatim. */
.wp-block-ss-brandos-answer-first.is-style-mm-answer-sand {
  background: transparent;
}
.wp-block-ss-brandos-answer-first.is-style-mm-answer-sand .mm-eyebrow {
  background: var(--sand);
}
.wp-block-ss-brandos-answer-first.mm-answer-first .mm-last-updated {
  margin: 0;
  font: 400 var(--fs-caption)/1.6 var(--ff-b);
  color: var(--brown);
}
.wp-block-ss-brandos-answer-first.mm-answer-first .mm-answer-first__text {
  margin: var(--s-2xs) 0 0;
  font-family: var(--ff-d);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  line-height: 1.6;
}
/* Clearance for the notch under a heading, mirroring .title + .legend-box. */
.wp-block-heading + .wp-block-ss-brandos-answer-first.mm-answer-first {
  margin-top: var(--s-lg);
}

/* Quiet variation: borderless fallback, kept for placements where the boxed
   device would compete with a hero directly above it. The notch goes back
   into flow. */
.wp-block-ss-brandos-answer-first.is-style-mm-answer-quiet {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 0 var(--s-md);
  border-left: 2px solid var(--brown);
}
.wp-block-ss-brandos-answer-first.is-style-mm-answer-quiet .mm-eyebrow {
  position: static;
  background: transparent;
  padding: 0;
}

/* ------------------------------------------------------------------ *
 * G5 . FAQ BLOCK: the comp ruled register.
 *
 * The plugin owns the disclosure mechanics (native details/summary, no
 * JavaScript) and its stylesheet stays enqueued; these rules re-dress it in
 * the comp .faq language: hairline top rule per row, a closing rule on the
 * last, questions in the workhorse sans at 600. The disclosure marker
 * recolours to Dark Brown: the plugin's Light Brown is 3.24:1 on sand.
 * ------------------------------------------------------------------ */
.wp-block-ss-brandos-faq.mm-faq {
  margin: var(--s-md) 0 0;
  max-width: 80ch;
}
.wp-block-ss-brandos-faq .mm-faq__heading {
  font-family: var(--ff-d);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.2;
  margin: 0 0 var(--s-sm);
}
.wp-block-ss-brandos-faq .mm-faq-item {
  border-top: 1px solid var(--rule);
  border-bottom: 0;
  padding: var(--s-md) 0;
}
.wp-block-ss-brandos-faq .mm-faq-item:last-child {
  border-bottom: 1px solid var(--rule);
}
.wp-block-ss-brandos-faq .mm-faq-item .mm-faq-question {
  min-height: 44px;
  align-items: baseline;
  cursor: pointer;
}
.wp-block-ss-brandos-faq .mm-faq-item .mm-faq-question::before {
  color: var(--brown);
}
.wp-block-ss-brandos-faq .mm-faq-item .mm-faq-question__text {
  font-family: var(--ff-b);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
}
.wp-block-ss-brandos-faq .mm-faq-item .mm-faq-answer {
  font-size: var(--fs-small);
  line-height: 1.7;
  max-width: 70ch;
  color: var(--ink);
}

/* Boxed variation, squared to the comp language: each question its own
   hairline-bordered panel for short FAQs on landing pages. */
.mm-faq.is-style-mm-faq-boxed .mm-faq-item {
  border: 1px solid var(--rule);
  border-radius: 0;
  background-color: var(--white);
  margin-bottom: var(--s-sm);
  padding: var(--s-2xs) var(--s-md);
}

/* ------------------------------------------------------------------ *
 * G6 . COMPARISON TABLE BLOCK: ruled register, zebra in cream.
 *
 * Layered over the plugin stylesheet: hairline borders soften to the comp
 * --rule-soft, the header row holds Dark Brown / Cream, and the zebra
 * variation tints even rows Cream (not Sand).
 * ------------------------------------------------------------------ */
.mm-comparison-table .mm-ctable th,
.mm-comparison-table .mm-ctable td {
  border: 1px solid var(--rule-soft);
}
.mm-comparison-table .mm-ctable thead th {
  background: var(--brown);
  color: var(--cream);
  font-family: var(--ff-b);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mm-comparison-table.is-style-mm-table-zebra .mm-ctable tbody tr:nth-child(2n) td {
  background: var(--cream);
}

/* ------------------------------------------------------------------ *
 * G7 . BUTTON BLOCK-STYLE VARIATIONS, comp Section 4 language.
 * These back the register_block_style() calls in functions.php. Square,
 * 46px minimum, caption-size 600 letterspaced uppercase, exactly the comp
 * .btn / .btn-light geometry. Only Primary (Dark Brown), Secondary (Dark
 * Brown outline), On-dark (Cream fill), and On-dark outline are compliant
 * per the brand button table. Light Brown is never a light-text button fill.
 * ------------------------------------------------------------------ */
.wp-block-button.is-style-mm-primary > .wp-block-button__link,
.wp-block-button.is-style-mm-secondary > .wp-block-button__link,
.wp-block-button.is-style-mm-on-dark > .wp-block-button__link,
.wp-block-button.is-style-mm-on-dark-outline > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: var(--s-sm) var(--s-md);
  border-radius: 0;
  font-family: var(--ff-b);
  font-weight: 600;
  font-size: var(--fs-caption);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* Primary = comp .btn. */
.wp-block-button.is-style-mm-primary > .wp-block-button__link {
  background-color: var(--brown);
  color: var(--cream);
  border: 1px solid var(--brown);
}
.wp-block-button.is-style-mm-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-mm-primary > .wp-block-button__link:focus {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
/* Secondary = .btn geometry, transparent ground, Dark Brown text and border. */
.wp-block-button.is-style-mm-secondary > .wp-block-button__link {
  background-color: transparent;
  color: var(--brown);
  border: 1px solid var(--brown);
}
.wp-block-button.is-style-mm-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-mm-secondary > .wp-block-button__link:focus {
  background-color: var(--brown);
  color: var(--cream);
}
/* On-dark = comp .btn-light. */
.wp-block-button.is-style-mm-on-dark > .wp-block-button__link {
  background-color: var(--cream);
  color: var(--brown);
  border: 1px solid var(--cream);
}
.wp-block-button.is-style-mm-on-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-mm-on-dark > .wp-block-button__link:focus {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--ink);
}
/* On-dark outline: transparent ground, Cream border and text. */
.wp-block-button.is-style-mm-on-dark-outline > .wp-block-button__link {
  background-color: transparent;
  color: var(--cream);
  border: 1px solid var(--cream);
}
.wp-block-button.is-style-mm-on-dark-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-mm-on-dark-outline > .wp-block-button__link:focus {
  background-color: var(--cream);
  color: var(--brown);
}
/* Keep the focus ring visible against dark backgrounds too. */
.has-dark-brown-background-color .wp-block-button__link:focus-visible,
.has-black-background-color .wp-block-button__link:focus-visible,
.wp-block-cover .wp-block-button__link:focus-visible {
  outline-color: var(--cream);
}

/* ------------------------------------------------------------------ *
 * G8 . LEAD-MAGNET FORM SCAFFOLD (kept; forms plugin replaces at build).
 * Field chrome inherits the comp form language from Section 17's global
 * input rules; these add only the scaffold's own layout and the TCPA
 * consent row's tap-target geometry.
 * ------------------------------------------------------------------ */
.mm-lead-form .mm-field {
  margin-bottom: var(--s-sm);
}
.mm-lead-form label {
  margin-bottom: 0.25rem;
}
/* TCPA consent row: checkbox target >=24px, label fully clickable. */
.mm-lead-form .mm-field--consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.mm-lead-form .mm-field--consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}
.mm-lead-form .mm-field--consent label {
  font-weight: 400;
  font-family: var(--ff-b);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.mm-lead-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: var(--s-xs);
  padding: var(--s-sm) var(--s-md);
  background-color: var(--brown);
  color: var(--cream);
  border: 1px solid var(--brown);
  border-radius: 0;
  font-family: var(--ff-b);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.mm-lead-form__submit:hover,
.mm-lead-form__submit:focus {
  background-color: var(--ink);
  border-color: var(--ink);
}

/* ------------------------------------------------------------------ *
 * G9 . MARKET TABLE PATTERN GLUE (live via
 * patterns/market-report-dataset.php: the ruled data table and its
 * last-updated line, retinted to the comp tokens).
 * ------------------------------------------------------------------ */
.mm-market-table table {
  width: 100%;
  border-collapse: collapse;
}
.mm-market-table th,
.mm-market-table td {
  padding: var(--s-xs) var(--s-sm);
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
}
.mm-market-table thead th {
  font-family: var(--ff-b);
  font-weight: 600;
  color: var(--brown);
}
.mm-market-table tbody th {
  font-weight: 600;
  color: var(--ink);
}
.mm-market-report .mm-last-updated {
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * G10 . INTERIOR TEMPLATE ADAPTERS (Task 8).
 * The interior templates restate the comp structures in block grammar:
 * groups carry the comp classes and the post-driven images render through
 * wp:post-featured-image so the Phase 5 import feeds them. Every rule here
 * exists because a core wrapper or a core default sits between the block
 * output and the comp selector it must satisfy; none of them restyle the
 * comp itself.
 * ------------------------------------------------------------------ */

/* Interior mains mirror main.mm-home: the root block gap would open a sand
   seam under the sticky header, and the flow gap between full-bleed bands
   would split seams the comp stacks flush. Sections manage their own
   rhythm with padding, so the injected top margins go. */
main.mm-interior{margin-block-start:0}
main.mm-interior > *{margin-block-start:0}

/* wp:post-featured-image emits <figure class="wp-block-post-featured-image">.
   With className "ph" inside the .hero-plate group it slots straight into
   the comp .hero-plate > .ph > img shape (Section 8), and with className
   "plate" on the single template it takes the comp .plate rules (Section
   7). The reset clears the browser figure margin everywhere; explicit comp
   steps are restated where the comp put them on the figure/figcaption
   pair the block does not emit. */
figure.wp-block-post-featured-image{margin:0}
.mm-single .plate{margin-top:var(--s-lg)}
figure.wp-block-post-featured-image.plate + .plate-cap{margin-top:var(--s-sm)}

/* The page display scale, unscoped: the comp sized .display--page inside
   .hero only; the single template sets the post title in the same voice
   outside a hero spread. Same numbers as the .hero rule. */
.display--page{font-size:var(--fs-display-page);line-height:1.08;max-width:min(23ch,100%);text-wrap:balance}

/* The single byline: a group carrying the comp .imprint class holds the
   author-name and date blocks. display:table on .imprint would stack the
   two; restate the same shrink-wrapped rule-bracketed line as a flex row
   and zero the blocks' own margins so the brackets hug one line. */
.wp-block-group.imprint{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s-sm);width:fit-content}
.wp-block-group.imprint > *{margin:0}

/* The category eyebrow on single: wp:post-terms renders links; the eyebrow
   is a label, so the anchors drop their underline and hold the label
   color. */
.wp-block-post-terms.eyebrow a{text-decoration:none;color:var(--brown)}
.wp-block-post-terms.eyebrow a:hover{text-decoration:underline}

/* Body copy measure inside full-measure wraps (hub, neighborhood): router
   grids, facts registers, and tables keep the full wrap while running
   paragraphs and headings still cap at the comp reading measures. */
.wrap > .wp-block-post-content > p{max-width:70ch}
.wrap > .wp-block-post-content > h2{max-width:26ch}

/* The blog index: query-loop rows as the comp ruled register. The
   post-template <ul> drops its list chrome and the flow gap so each
   article.entry row draws its own hairline against the next, and the
   register closes on a bottom rule exactly like .dossier-index. */
.mm-archive .wp-block-post-template{list-style:none;margin:var(--s-lg) 0 0;padding:0;border-bottom:1px solid var(--rule)}
.mm-archive .wp-block-post-template > li{margin-block-start:0}
.entry .wp-block-post-title a{text-decoration:none}
.entry .wp-block-post-title a:hover{text-decoration:underline;text-underline-offset:3px}
.entry .wp-block-post-excerpt{margin:0 0 var(--s-sm)}
.entry .wp-block-post-excerpt__excerpt{margin:0;font-size:var(--fs-small);line-height:1.65;max-width:68ch}
.mm-archive .wp-block-query-pagination{display:flex;justify-content:space-between;gap:var(--s-md);flex-wrap:wrap;margin-top:var(--s-xl);font:500 var(--fs-small)/1.4 var(--ff-b)}

/* The prev/next register on single: post-navigation-link divs carry the
   comp .note class; the flow gap between the two zeroes so the .note-row
   flex gap governs, and a link with no adjacent post (core renders an
   empty div) drops its hairline instead of drawing a bare rule. */
.post-nav > .wp-block-post-navigation-link{margin-block-start:0}
.post-nav > .wp-block-post-navigation-link:empty{display:none}
.wp-block-group.imprint .wp-block-post-date::before{content:"\00B7";margin-right:var(--s-2xs)}

/* The 404 search, restated as the comp .field: the input takes the booking
   form chrome (Section 17 styles input[type=text], not search) and the
   button takes the primary .btn geometry. */
.wp-block-search.field{margin-top:var(--s-lg);max-width:520px}
.wp-block-search.field .wp-block-search__input{background:var(--white);color:var(--ink);border:1px solid var(--rule);border-radius:0;padding:var(--s-xs) var(--s-sm);min-height:46px;font:400 var(--fs-small)/1.4 var(--ff-b)}
.wp-block-search.field .wp-block-search__button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;margin-left:var(--s-2xs);
  background:var(--brown);color:var(--cream);
  font:600 var(--fs-caption)/1 var(--ff-b);letter-spacing:.12em;text-transform:uppercase;
  padding:var(--s-sm) var(--s-md);
  border:1px solid var(--brown);border-radius:0;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
}
.wp-block-search.field .wp-block-search__button:hover,
.wp-block-search.field .wp-block-search__button:focus{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* 404 rhythm: the eyebrow follows the antler mark, and the sequence steps
   off the legend box. */
.mm-404 .mm-antler-mark{margin-bottom:var(--s-lg)}
.mm-404 .legend-box{margin-top:var(--s-lg)}

/* The market-report metrics table: cream zebra rows, the same device as
   the comparison-table block's zebra variation. */
.wp-block-table.mm-table-zebra table{width:100%;border-collapse:collapse}
.wp-block-table.mm-table-zebra tbody tr:nth-child(2n) td{background:var(--cream)}