/* ==========================================================================
   mtbaker-site.css — GENERATED by bin/build-skin.php. Do not hand-edit.

   Source parts, in cascade order:
     - D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/fonts.css
     - D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/skin-tokens.css
     - D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/site.css
     - D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/parts/_chrome.css
     - D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/parts/_home.css
     - D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/parts/_journal.css
     - D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/parts/_neighbourhood.css
     - D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/parts/_neighbourhoods.css
     - D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/parts/_pages.css

   HOW THIS LOADS (the anti-fork design): the chassis loads the SHARED chrome
   (demo-site.css) and then this file as an override layer. The :root block
   re-skins every var()-driven chrome and .lx-next surface — which is how the
   engine-owned pages (/cabins/, the property page, favourites) get the v3
   palette WITHOUT being forked. The .smb-* rules style only this site's own
   declared templates (HANDOFF §150).
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/fonts.css
   ══════════════════════════════════════════════════════════════════════════ */
/* Self-hosted webfonts - Bricolage Grotesque (variable: opsz 12-96, wdth 75-100, wght 300-800)
   and IBM Plex Mono 400/500. Downloaded from Google Fonts, rewritten to local paths,
   unicode-range subsetting preserved. Engine rule: no CDN URLs - fonts ship with the site. */

/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-b583a870.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-4ca685b4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-fbdbf8da.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: optional; /* §212: the ticker/rail labels — optional, so a slow first load paints the fallback and never shifts (CLS 0.05 was this swap) */
  src: url(fonts/ibm-plex-mono-250613af.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: optional; /* §212: the ticker/rail labels — optional, so a slow first load paints the fallback and never shifts (CLS 0.05 was this swap) */
  src: url(fonts/ibm-plex-mono-7febd16d.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: optional; /* §212: the ticker/rail labels — optional, so a slow first load paints the fallback and never shifts (CLS 0.05 was this swap) */
  src: url(fonts/ibm-plex-mono-d41ec0a9.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-7f25d930.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-d196e8ee.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-e6406f48.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-5907a9b4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-0bd1c253.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-b42080b2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-a7544cc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════════════════════════
   D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/skin-tokens.css
   ══════════════════════════════════════════════════════════════════════════ */
/* ==========================================================================
   mtbaker-site.css — Stay at Mt Baker skin (multi-site chassis client #2).

   THE v3 PALETTE ON THE SHARED CHROME. Corridor orange on warm cream over a
   near-black night — lifted from the approved comp (stayatmtbaker repo,
   design/Stay at Mt Baker v3.dc.html) and mapped onto the chrome's token
   vocabulary. The full v3 layout (corridor rail, neighbourhood pages,
   journal) waits for the chassis's declared-template-overrides phase; this
   file is the v1 look.

   HOW THIS LOADS (the anti-fork design, same as emr-site.css): the chassis
   loads the shared chrome (demo-site.css) and THEN this file as an override
   layer. It re-declares the :root palette the chrome reads, carries the
   site's self-hosted fonts, and overrides the one chrome rule with brand
   colour baked into literals (.lx-demo-hero). It is NOT a fork of the
   940-line chrome — it layers over it.

   FONTS: the @font-face blocks above this banner are generated — Bricolage
   Grotesque (variable) + IBM Plex Mono, downloaded and self-hosted per the
   engine's no-CDN rule. The woff2 files ship alongside this skin into
   public/assets/fonts/.
   ========================================================================== */

/* ── Palette override (re-skins every var()-driven chrome + .lx-next surface) ─ */
:root {
    /* Plugin component tokens (cards, booking card, tabs, calendar) */
    --lx-color-brand:      #d4571f;   /* corridor orange */
    --lx-color-brand-ink:  #b84513;
    --lx-color-brand-tint: #f7e7dd;
    --lx-color-accent:     #d4571f;
    --lx-color-accent-ink: #b84513;
    --lx-color-ink:        #191e17;   /* spruce near-black */
    --lx-color-ink-2:      #4a463d;
    --lx-color-ink-3:      #6f6a5c;
    --lx-color-bg-2:       #fbf8f2;   /* warm paper */
    --lx-color-bg-3:       #ece5d3;
    --lx-color-line:       #ddd4c0;   /* parchment hairline */
    --lx-color-line-2:     #b0a894;

    /* Type — Bricolage carries both display and body in the v3 design; there
       is no serif voice, so the serif token maps to Bricolage rather than
       letting the chrome's Cormorant leak through on display headings. IBM
       Plex Mono is the design's structural/label voice. */
    --lx-font-sans:  "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --lx-font-serif: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Chrome palette — the .rr-* classes in demo-site.css read these names,
       so redefining them re-colours the whole shared chrome. Kept under the
       same --rr-* names ON PURPOSE so no chrome rule needs editing. */
    --rr-navy:      #10130f;   /* night — the dark band / header base */
    --rr-navy-2:    #191e17;   /* hero gradient upper stop */
    --rr-blue:      #d4571f;   /* primary action → corridor orange */
    --rr-blue-ink:  #b84513;
    --rr-sky:       #ee6b30;   /* light accent (was light blue) */
    --rr-mint:      #e5dcc8;   /* pale parchment (was mint) */
    --rr-cream:     #f2ede1;   /* the page cream */
    --rr-ink:       #191e17;
    --rr-line-dark: rgba(242, 237, 225, 0.14);
}

/* ── The one chrome rule with brand colour baked into literals ───────────────
   demo-site.css's .lx-demo-hero hardcodes its radial-gradient tints as rgba()
   literals plus a dark stop, so they cannot be re-pointed by a variable.
   Re-declared with the v3 night/orange palette. This is the ONLY structural
   rule this skin overrides; if the chrome ever hardcodes another brand
   colour, add it here rather than forking the file. */
.lx-demo-hero {
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(238, 107, 48, 0.14), transparent 60%),
        radial-gradient(900px 480px at 8% 110%, rgba(212, 87, 31, 0.26), transparent 55%),
        linear-gradient(165deg, var(--rr-navy-2) 0%, var(--rr-navy) 55%, #0a0c09 100%);
}

/* ── Site-owned tokens (.smb-* components read these) ────────────────────────
   The block above (the lx- and rr- prefixed names) is the vocabulary the SHARED
   chrome reads. These are Mt Baker's own, used only by this site's declared
   templates. They were being carried entirely by var() fallbacks, which works
   right up until someone changes a value in one of forty places instead of here.

   NB: no glob-style "prefix-star-slash" shorthand in CSS comments — that
   sequence CLOSES the comment. Written as prose here for exactly that reason;
   the shorthand version silently swallowed every rule after this point and
   shipped an unstyled site. */
:root {
  --smb-color-night:  #10130f;   /* ticker, footer, dark panels */
  --smb-color-cream:  #f2ede1;   /* page ground, text on night */
  --smb-color-muted:  #8c8574;   /* mono meta, placeholders */
  --smb-color-brand-text: #b3441a; /* §208: the brand orange for small TEXT and button grounds — AA on cream */
  --smb-color-ink-2:  #4a463d;
  --smb-color-ink-3:  #6f6a5c;
  --smb-color-hair:   #e5dcc8;   /* hairline rule + photo hatch light stripe */
  --smb-color-hair-2: #ded4bf;   /* photo hatch dark stripe */
  --smb-color-label:  #9e957f;   /* photo-placeholder label text */
  --smb-color-surface:#fbf8f2;   /* card surface */
  --smb-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ══════════════════════════════════════════════════════════════════════════
   D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/site.css
   ══════════════════════════════════════════════════════════════════════════ */
/* ============================================================================
   Stay at Mt Baker — site stylesheet.

   Ported from design/Stay at Mt Baker v3.dc.html (the approved v3 comp), whose
   336 inline-styled divs become the classes below. Values reference the CSS
   custom properties emitted from config/brand.php (seam 2) — the same tokens
   that re-skin the Lexaily engine surfaces — so brand changes stay a config
   edit, never a stylesheet hunt.

   Class prefix: .smb-  (site-owned). Engine-rendered markup keeps its own
   lx-* classes and is themed by the token overrides alone.

   Load order per page: fonts.css → engine tokens.css (engine pages only) →
   :root token block from brand.php → this file.
   ========================================================================== */

/* ── Base ────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--lx-color-bg, #f2ede1);
  color: var(--lx-color-ink, #191e17);
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--lx-color-brand, #d4571f); text-decoration: none; }
a:hover { color: var(--lx-color-brand-ink, #ee6b30); }

input, select, button, textarea { font-family: inherit; font-size: inherit; color: inherit; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 1.5px solid var(--lx-color-brand, #d4571f);
  outline-offset: 2px;
}
::placeholder { color: var(--smb-color-muted, #8c8574); }
::selection { background: var(--lx-color-brand, #d4571f); color: #fff; }

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

/* The design's display voice: Bricolage at a narrowed width axis. */
h1, h2, h3, .smb-display {
  font-variation-settings: 'wdth' 88;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
}

/* ── Layout primitives ───────────────────────────────────────────────────── */

.smb-wrap { max-width: 1400px; margin: 0 auto; padding-left: 36px; padding-right: 36px; }
.smb-main { flex: 1; }

/* Mono label — the design's structural voice for eyebrows, tags, meta. */
.smb-mono {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.smb-eyebrow {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smb-color-brand-text, #b3441a);   /* §208: 4.8:1 on cream (was 3.5) */
}

/* ── Conditions ticker (dark bar above the header) ───────────────────────── */

.smb-ticker {
  background: var(--smb-color-night, #10130f);
  color: rgba(242, 237, 225, 0.72);
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(242, 237, 225, 0.1);
}
.smb-ticker__inner {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.smb-ticker__group { display: flex; gap: 26px; align-items: center; }
.smb-ticker__lead { display: flex; align-items: center; gap: 8px; color: var(--smb-color-cream, #f2ede1); }
.smb-ticker__dot { width: 6px; height: 6px; background: var(--lx-color-brand, #d4571f); display: inline-block; }
.smb-ticker__road { color: var(--lx-color-brand, #d4571f); }
.smb-ticker a { color: rgba(242, 237, 225, 0.42); }
.smb-ticker a:hover { color: var(--smb-color-cream, #f2ede1); }

/* ── Header ──────────────────────────────────────────────────────────────── */

.smb-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(242, 237, 225, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lx-color-ink, #191e17);
}
.smb-header__inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.smb-logo { display: flex; align-items: center; gap: 13px; white-space: nowrap; color: inherit; }
.smb-logo:hover { color: inherit; }
.smb-logo__mark {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--lx-color-ink, #191e17);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
}
.smb-logo__name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 88;
}

.smb-nav { display: flex; align-items: center; gap: 8px; font-size: 13.5px; white-space: nowrap; }
.smb-nav__link { padding: 8px 13px; color: var(--lx-color-ink, #191e17); }
.smb-nav__link:hover { color: var(--lx-color-brand, #d4571f); }
/* .is-active, not a --modifier: it is the class the SHARED chrome already uses
   for the current page, so a site override that keeps the convention keeps
   working if the chassis ever styles it centrally. */
.smb-nav__link.is-active {
  background: var(--lx-color-ink, #191e17);
  color: var(--smb-color-cream, #f2ede1);
}
.smb-nav__link.is-active:hover { color: var(--smb-color-cream, #f2ede1); }

.smb-nav__saved {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11.5px;
  border: 1.5px solid var(--lx-color-ink, #191e17);
  padding: 8px 13px;
  margin-left: 8px;
  color: inherit;
}
.smb-nav__saved:hover { border-color: var(--lx-color-brand, #d4571f); color: var(--lx-color-brand, #d4571f); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.smb-btn {
  display: inline-block;
  background: var(--smb-color-brand-text, #b3441a);   /* §208: white on it 5.6:1 (was 4.0) */
  color: #fff;
  padding: 12px 20px;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
}
.smb-btn:hover { background: #b84513; color: #fff; }

.smb-btn--ghost {
  background: transparent;
  color: var(--lx-color-ink, #191e17);
  border: 1.5px solid var(--lx-color-ink, #191e17);
}
.smb-btn--ghost:hover { background: var(--lx-color-ink, #191e17); color: var(--smb-color-cream, #f2ede1); }

.smb-btn--dark {
  background: var(--lx-color-ink, #191e17);
  color: var(--smb-color-cream, #f2ede1);
}
.smb-btn--dark:hover { background: var(--lx-color-brand, #d4571f); color: #fff; }

/* Chip — filter toggles, category pills. Square, bordered, mono. */
.smb-chip {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--lx-color-line, #ddd4c0);
  color: var(--lx-color-ink-2, #4a463d);
  font-size: 13px;
  cursor: pointer;
  background: transparent;
}
.smb-chip:hover { border-color: var(--lx-color-ink, #191e17); color: var(--lx-color-ink, #191e17); }
.smb-chip--on {
  background: var(--lx-color-ink, #191e17);
  color: var(--smb-color-cream, #f2ede1);
  border-color: var(--lx-color-ink, #191e17);
}
.smb-chip--on:hover { color: var(--smb-color-cream, #f2ede1); }

/* ── Section scaffolding ─────────────────────────────────────────────────── */

.smb-section { padding-top: 72px; padding-bottom: 72px; }
.smb-section--tight { padding-top: 48px; padding-bottom: 48px; }
.smb-section--dark {
  background: var(--smb-color-night, #10130f);
  color: var(--smb-color-cream, #f2ede1);
}

.smb-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.smb-section__title { font-size: clamp(26px, 3.6vw, 38px); }
.smb-section__rule {
  border: 0;
  border-top: 1px solid var(--lx-color-line, #ddd4c0);
  margin: 0 0 32px;
}

/* Photo placeholder — the design labels photos rather than shipping them.
   Real photography replaces these at content time; the label pattern keeps
   layout honest until then. */
.smb-photo {
  background: var(--smb-color-night, #10130f);
  color: rgba(242, 237, 225, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  min-height: 200px;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.smb-card {
  border: 1px solid var(--lx-color-line, #ddd4c0);
  background: var(--lx-color-bg-2, #fbf8f2);
  display: flex;
  flex-direction: column;
}
.smb-card:hover { border-color: var(--lx-color-brand, #d4571f); }
.smb-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.smb-card__title { font-size: 18px; }
.smb-card__meta { color: var(--lx-color-ink-3, #6f6a5c); font-size: 13px; }

.smb-grid { display: grid; gap: 24px; }
.smb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.smb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.smb-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Key-value fact rows (neighbourhood facts, property stats) ───────────── */

.smb-facts { display: flex; flex-direction: column; }
.smb-fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--lx-color-line, #ddd4c0);
  font-size: 14px;
}
.smb-fact__k { color: var(--lx-color-ink-3, #6f6a5c); }
.smb-fact__v { font-weight: 500; text-align: right; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.smb-footer {
  background: var(--smb-color-night, #10130f);
  color: rgba(242, 237, 225, 0.7);
  margin-top: auto;
  border-top: 1px solid rgba(242, 237, 225, 0.12);
}
.smb-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 40px;
}
.smb-footer h3 {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242, 237, 225, 0.62);   /* §208: 6.5:1 on night (was 4.0) */
  font-weight: 400;
  margin: 0 0 14px;
}
.smb-footer a { color: rgba(242, 237, 225, 0.7); display: block; padding: 4px 0; font-size: 14px; }
.smb-footer a:hover { color: var(--smb-color-cream, #f2ede1); }
.smb-footer__brand { font-size: 18px; color: var(--smb-color-cream, #f2ede1); }
.smb-footer__blurb { font-size: 13.5px; line-height: 1.65; max-width: 42ch; margin-top: 12px; }
.smb-footer__bar {
  border-top: 1px solid rgba(242, 237, 225, 0.12);
  padding-top: 18px;
  padding-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: rgba(242, 237, 225, 0.4);
}

/* ── Prose (journal posts, about) ────────────────────────────────────────── */

.smb-prose { max-width: 68ch; font-size: 16.5px; line-height: 1.7; }
.smb-prose p { margin: 0 0 1.2em; }
.smb-prose h2 {
  font-size: 22px;
  margin: 1.8em 0 0.6em;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .smb-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .smb-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .smb-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .smb-wrap { padding-left: 20px; padding-right: 20px; }
  .smb-grid--3, .smb-grid--2, .smb-grid--4 { grid-template-columns: 1fr; }
  .smb-header__inner { height: auto; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
  .smb-nav { flex-wrap: wrap; }
  .smb-section { padding-top: 48px; padding-bottom: 48px; }
  .smb-footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/parts/_chrome.css
   ══════════════════════════════════════════════════════════════════════════ */
/* ============================================================================
   Chrome additions + comp reconciliation.

   site.css ported the v3 shell early and drifted from the comp in a handful of
   measurable ways. Those are corrected here rather than edited in place, so the
   diff between "what was ported" and "what the comp actually says" stays
   readable. Each override below cites the comp value it restores.
   ========================================================================== */

/* ── Body voice ──────────────────────────────────────────────────────────────
   The comp's <body> is NOT Bricolage. Bricolage is applied explicitly to
   display elements only; body copy is the system Helvetica stack. site.css set
   Bricolage globally, which quietly changed every paragraph on the site. */
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── Accessibility helper ─────────────────────────────────────────────────── */
.smb-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── The diamond ─────────────────────────────────────────────────────────────
   The comp uses ◆ / ◇ / ♦ (U+25C6/25C7/2666) for save state, ratings and the
   header shortlist — the most-repeated mark in the design. NONE of them are in
   the shipped woff2 subsets, so every one would render from whatever the OS
   supplies and differ across Windows / macOS / Android.
   A rotated square is the same shape, in the site's own colour, at any size. */
.smb-diamond {
  width: 7px; height: 7px;
  display: inline-block;
  transform: rotate(45deg);
  background: currentColor;
}
.smb-diamond--hollow { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* ── Ticker ──────────────────────────────────────────────────────────────── */
.smb-ticker__phone { color: rgba(242, 237, 225, 0.72); }
.smb-ticker__phone:hover { color: var(--smb-color-cream, #f2ede1); }

/* ── Header CTA ──────────────────────────────────────────────────────────────
   Comp: padding 12px 20px, mono 11px, .1em, uppercase — already the .smb-btn
   base. The CTA variant only pins the hover, which the comp typo'd as
   "#b8451300" (an 8-digit hex with zero alpha, i.e. transparent). Restored to
   the intended #b84513, the same hover the rest of the design uses. */
.smb-btn--cta:hover { background: #b84513; }

.smb-nav__saved.is-active {
  background: var(--lx-color-ink, #191e17);
  color: var(--smb-color-cream, #f2ede1);
}

/* ── Mobile nav ──────────────────────────────────────────────────────────────
   NET-NEW. The comp has no @media query and no small-screen design anywhere in
   its 1,448 lines; its containers are fixed at 1400/1500px. This is the
   smallest thing that keeps the site usable on a phone without inventing a
   second design language: the desktop nav hides, a <details> discloses the same
   links. <details> so it works with JS disabled. */
.smb-navtoggle { display: none; }
.smb-navtoggle > summary {
  list-style: none;
  cursor: pointer;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--lx-color-ink, #191e17);
}
.smb-navtoggle > summary::-webkit-details-marker { display: none; }
.smb-navtoggle__bars,
.smb-navtoggle__bars::before,
.smb-navtoggle__bars::after {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--lx-color-ink, #191e17);
  content: '';
}
.smb-navtoggle__bars { position: relative; }
.smb-navtoggle__bars::before { position: absolute; top: -5px; }
.smb-navtoggle__bars::after  { position: absolute; top: 5px; }
.smb-navtoggle__panel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--smb-color-cream, #f2ede1);
  border-bottom: 1.5px solid var(--lx-color-ink, #191e17);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  z-index: 59;
}
.smb-navtoggle__panel a {
  padding: 13px 36px;
  color: var(--lx-color-ink, #191e17);
  font-size: 15px;
  border-top: 1px solid var(--lx-color-line, #ddd4c0);
}
.smb-navtoggle__panel a:first-child { border-top: 0; }

/* ── Footer ──────────────────────────────────────────────────────────────────
   Comp: grid 1.7fr 1fr 1fr 1.2fr, gap 44, padding 60/36/36; column heads mono
   9px / .18em. site.css had 2fr 1fr 1fr 1.4fr, gap 40, pad 56/40, heads
   10.5px/.1em — close enough to look right and wrong enough to not be the
   design. */
.smb-footer {
  background: var(--smb-color-night, #10130f);
  color: rgba(242, 237, 225, 0.7);
  margin-top: auto;
  border-top: 1px solid rgba(242, 237, 225, 0.12);
}
.smb-footer__grid {
  padding-top: 60px;
  padding-bottom: 36px;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: 44px;
}
.smb-footer__lockup { display: flex; align-items: center; gap: 12px; }
.smb-footer__mark {
  width: 28px; height: 28px;
  border: 1.5px solid rgba(242, 237, 225, 0.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px;
  color: var(--smb-color-cream, #f2ede1);
}
.smb-footer__word {
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif);
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.025em;
  font-variation-settings: 'wdth' 88;
  color: var(--smb-color-cream, #f2ede1);
}
.smb-footer__blurb { font-size: 14px; line-height: 1.8; margin: 14px 0 0; max-width: 320px; }
.smb-footer__address {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px; line-height: 1.9;
  margin-top: 18px;
  color: rgba(242, 237, 225, 0.45);
}
.smb-footer__address a { color: inherit; }
.smb-footer__address a:hover { color: var(--smb-color-cream, #f2ede1); }

.smb-footer__col { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.smb-footer__head {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 237, 225, 0.35);
  margin: 0 0 4px;
  font-weight: 400;
}
.smb-footer__col a { color: rgba(242, 237, 225, 0.7); }
.smb-footer__col a:hover { color: var(--smb-color-cream, #f2ede1); }
.smb-footer__signup p { font-size: 13.5px; line-height: 1.7; margin: 0; color: rgba(242, 237, 225, 0.55); }

.smb-signup { display: flex; border: 1px solid rgba(242, 237, 225, 0.22); }
.smb-signup input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  padding: 12px 13px;
  font-size: 13.5px;
  color: var(--smb-color-cream, #f2ede1);
}
.smb-signup button {
  background: var(--lx-color-brand, #d4571f);
  color: #fff;
  border: 0;
  padding: 12px 16px;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
}
.smb-signup button:hover { background: #b84513; }

.smb-footer__legal {
  padding-bottom: 36px;
  border-top: 1px solid rgba(242, 237, 225, 0.1);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10.5px;
  color: rgba(242, 237, 225, 0.35);
}

/* ── Responsive ──────────────────────────────────────────────────────────────
   All net-new; see the mobile-nav note above. Breakpoints chosen from where the
   comp's own fixed widths actually break, not from a device list. */
@media (max-width: 1040px) {
  .smb-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .smb-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .smb-wrap { padding-left: 20px; padding-right: 20px; }
  .smb-nav { display: none; }
  .smb-navtoggle { display: block; }
  .smb-header__inner { height: 64px; }
  .smb-ticker__group:last-child { display: none; }   /* coords/phone: keep the road status */
  .smb-ticker__inner { font-size: 10.5px; }
}
@media (max-width: 560px) {
  .smb-footer__grid { grid-template-columns: 1fr; }
  .smb-footer__legal { flex-direction: column; gap: 8px; }
  .smb-logo__name { font-size: 17px; }
}

/* ── The engine's favourites button, re-skinned ──────────────────────────────
   lx-favorites.js mounts its own header button next to a.header-phone (see
   chrome-header.php's note on why that class is kept). It is ENGINE markup, so
   it is themed here rather than forked — the same rule that governs /cabins/
   and the property page.

   Left alone it renders the storefront's default blue heart, which on this site
   sits in a mono ticker bar in corridor orange and reads as a bug. The panel it
   opens gets the same treatment: square corners, cream ground, ink border. */
.lx-fav-headerfav { display: inline-flex; align-items: center; }

/* !important, deliberately and narrowly. lx-favorites.js builds this button with
   btn.style.cssText — an INLINE style carrying color:#1f4e8c and
   border-radius:50%. Inline styles outrank any stylesheet selector, so this is
   the one case where !important is the correct tool rather than a shortcut: the
   alternative is editing the plugin's JS, which is the fork this whole seam
   exists to avoid. Scoped to two properties on one element. */
.lx-fav-headerbtn {
  color: var(--lx-color-brand, #d4571f) !important;
  border-radius: 0 !important;   /* square corners, like everything else here */
  width: 34px !important;
  height: 34px !important;
}
.lx-fav-headerbtn svg { width: 17px; height: 17px; }
.lx-fav-headerbtn:hover { color: var(--smb-color-cream, #f2ede1) !important; }
/* The unread badge is a red pill on a site with no red in it. */
.lx-fav-headercount {
  background: var(--lx-color-ink, #191e17) !important;
  border-radius: 0 !important;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', monospace) !important;
  font-weight: 400 !important;
}

.lx-fav-panel {
  border-radius: 0;
  background: var(--smb-color-surface, #fbf8f2);
  border: 1.5px solid var(--lx-color-ink, #191e17);
  box-shadow: none;
  color: var(--lx-color-ink, #191e17);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.lx-fav-panel a { color: var(--lx-color-brand, #d4571f); }

/* ══════════════════════════════════════════════════════════════════════════
   D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/parts/_home.css
   ══════════════════════════════════════════════════════════════════════════ */
/* ============================================================================
   _home.css — the v3 home page, plus the three components it introduces that
   other pages reuse.

   Ported from design/sections/home.html (109 inline styles, zero classes). The
   comp expresses every decision as an attribute on a div; this file is where
   those decisions get names. Values come from the tokens in skin-tokens.css so
   a palette change stays a config edit — the exception is the on-night alpha
   scale (rgba(242,237,225,.x)), which is a ratio of the cream, not a colour of
   its own, and is written literally here exactly as site.css writes it.

   THREE THINGS IN THIS FILE ARE NOT ABOUT THE HOME PAGE. They are marked with
   a SHARED banner: the photo-placeholder hatch, the section head rule + "more"
   link, and the listing card. The listing card alone appears on six of the ten
   comp pages; the hatch appears on all ten. They live here because this is the
   first page that needs them and site.css is not this pass's file — a later
   consolidation moves them up, and until then NO OTHER PART FILE SHOULD
   REDECLARE THEM.

   House rules this file obeys, each verified against the comp:
     · No border-radius. It appears zero times in the comp's 1,448 lines.
     · Borders are two-step: 1px is an ordinary line, 1.5px is emphasis.
     · Display type is Bricolage at 'wdth' 86–90. Body copy is the Helvetica
       stack (set on <body> in _chrome.css) — never Bricolage.
     · Mono tracking scales INVERSELY with size: 9px/.18em … 12.5px/.06em.
     · No ◆ ◇ ♦ → ← glyphs. None are in the shipped woff2 subsets; every one
       would render from whatever the OS supplies. Diamonds are .smb-diamond
       (a rotated square) and the "more" arrow is drawn from two borders.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   SHARED · Photo placeholder — the 126° hatch
   ══════════════════════════════════════════════════════════════════════════
   There is NO photography for this site yet, and the comp never pretended
   otherwise: every image slot is a hatched block carrying a mono label that
   says what belongs there. That is deliberately better than borrowing the
   chassis's stock pool, which would put another region's houses on a Mt Baker
   cabin card and quietly make the page a lie.

   site.css shipped .smb-photo as a solid NIGHT block with a text child. The
   comp's is the hatch, and its label comes from data-label so the text is
   presentational — a screen reader announces the cabin's real name from the
   card body instead of reading out "PORCH, WINTER". An element with neither a
   data-label nor a child simply renders as texture. */
.smb-photo {
  background: repeating-linear-gradient(126deg,
    var(--smb-color-hair, #e5dcc8) 0 11px,
    var(--smb-color-hair-2, #ded4bf) 11px 22px);
  color: var(--smb-color-label, #9e957f);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.smb-photo::after { content: attr(data-label); }


/* ══════════════════════════════════════════════════════════════════════════
   SHARED · Section head with the emphasis rule, and the "more" link
   ══════════════════════════════════════════════════════════════════════════
   The comp's section heads are a 1.5px ink rule under a 44px Bricolage title,
   with a mono link pinned to the right of it. .smb-section__head already
   carries the flex; this adds the rule and drops the baseline to flex-end so a
   two-line title and a one-line link still sit on the same rule. */
.smb-section__head--rule {
  align-items: flex-end;
  padding-bottom: 20px;
  border-bottom: 1.5px solid var(--lx-color-ink, #191e17);
  margin-bottom: 34px;
}
.smb-section__title--xl {
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: 'wdth' 88;
}

/* The inverse-tracking rule in practice: .smb-eyebrow is 11px/.1em site-wide;
   at the 10px the comp uses for band eyebrows the tracking opens to .2em.
   Scoped to the contexts that want the smaller size rather than changing
   .smb-eyebrow itself, which every other page also uses. */
.smb-section__head .smb-eyebrow,
.smb-direct__quote .smb-eyebrow,
.smb-owner__lede .smb-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  margin: 0 0 14px;
}

.smb-morelink {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lx-color-ink, #191e17);
  border-bottom: 1.5px solid var(--lx-color-brand, #d4571f);
  padding-bottom: 4px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.smb-morelink:hover { color: var(--lx-color-brand, #d4571f); }
/* The comp's "→". Drawn, not typed: U+2192 is absent from both woff2 subsets,
   so the glyph would come from a system fallback and change shape per OS. Two
   borders on an empty box is the same arrowhead in the design's own 1.5px
   emphasis weight, at any size, in currentColor. */
.smb-morelink::after {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   SHARED · The listing card
   ══════════════════════════════════════════════════════════════════════════
   Six of the ten comp pages render this card. The class names are the contract
   between those pages; only the markup around them differs.

   WHAT IT SHOWS AND WHAT IT DELIBERATELY DOES NOT: photo, mile badge,
   neighbourhood, name, spec line, "from $X". No total, no Book button — v1
   takes no bookings, and a card that implies otherwise sends a guest to a dead
   end. No rating: this site has no review fixtures, and an empty star row
   reads as zero stars rather than as "not yet rated". No save heart or
   carousel arrows: client state on a card with one placeholder behind it.

   The whole card is ONE anchor. The comp splits it into four overlapping
   onClick regions, which on a real page means a card the keyboard can enter
   four times and a hit area that misses between them. */
.smb-listings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px 26px;
}

.smb-listing {
  border: 1px solid var(--lx-color-line, #ddd4c0);
  background: var(--smb-color-surface, #fbf8f2);
}
.smb-listing:hover { border-color: var(--lx-color-brand, #d4571f); }
.smb-listing__link { display: block; color: var(--lx-color-ink, #191e17); }
.smb-listing__link:hover { color: var(--lx-color-ink, #191e17); }

.smb-listing__media { position: relative; display: block; }
.smb-listing__photo { height: 236px; min-height: 0; }
.smb-listing__badge {
  position: absolute;
  bottom: 11px;
  left: 11px;
  background: var(--smb-color-night, #10130f);
  color: var(--smb-color-cream, #f2ede1);
  padding: 5px 10px;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.smb-listing__body { display: block; padding: 18px; }
.smb-listing__meta {
  display: block;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--smb-color-ink-3, #6f6a5c);   /* §208: 5.1:1 (was 3.5) */
}
.smb-listing__name {
  display: block;
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variation-settings: 'wdth' 88;
  margin-top: 11px;
}
.smb-listing__spec {
  display: block;
  font-size: 13.5px;
  color: var(--lx-color-ink-3, #6f6a5c);
  margin-top: 8px;
}
/* The hairline above the price is the card's only internal rule — 1px, an
   ordinary line, not the 1.5px the section heads use. */
.smb-listing__price {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--smb-color-hair, #e5dcc8);
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 88;
}
.smb-listing__unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--smb-color-ink-3, #6f6a5c);   /* §208 */
}


/* ══════════════════════════════════════════════════════════════════════════
   Home · vertical rhythm
   ══════════════════════════════════════════════════════════════════════════
   The comp's home page is one number: 88px between bands, 84 under the hero,
   92 before the footer. .smb-section pads BOTH ends (72 + 72), which doubles at
   every seam into a 144px gap the design never has — so the home page sets its
   own single-sided rhythm instead of reusing it.

   The first band is selected by ADJACENCY to the hero, not :first-of-type: the
   hero is itself a <section>, so :first-of-type would name the hero and never
   match a band. Three of the four bands are conditional, and `+` picks whichever
   one actually follows. The last is an explicit modifier for the mirror reason —
   the template's output lands straight in <body>. */
/* ⚠ width:100% IS LOAD-BEARING, and the failure it prevents is invisible in a
   markup review. site.css makes <body> a flex column (for the sticky footer),
   and a template's output lands in <body> directly — there is no <main>. These
   bands carry .smb-wrap, whose `margin: 0 auto` is an AUTO CROSS-AXIS MARGIN on
   a flex item, and an auto margin beats the default align-self:stretch — so the
   band sizes to its CONTENT. Symptom: a six-card grid rendering as two narrow
   columns down the middle of a 1440px page, with nothing in the markup, in the
   grid rule or in .smb-wrap to explain it. A definite width restores the
   stretch and leaves the auto margins nothing to do but centre. */
.smb-home-band { width: 100%; margin-top: 88px; }
.smb-hero + .smb-home-band { margin-top: 84px; }
.smb-home-band--last { margin-bottom: 92px; }


/* ══════════════════════════════════════════════════════════════════════════
   Home · the hero
   ══════════════════════════════════════════════════════════════════════════ */
.smb-hero {
  background: var(--smb-color-night, #10130f);
  color: var(--smb-color-cream, #f2ede1);
  position: relative;
  overflow: hidden;
}
/* Concentric rings on a 39px pitch, centred off to the upper right — the comp
   reads it as topographic contour. Its own layer rather than a background on
   the section, so the section keeps a flat colour behind the type and the
   texture can be pointer-inert. */
.smb-hero__texture {
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at 78% 42%,
    transparent 0 38px, rgba(242, 237, 225, 0.055) 38px 39px);
  pointer-events: none;
}
.smb-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: stretch;
  min-height: 660px;
}
/* ⚠ NO align-items:flex-start here, however much the eyebrow and the button
   want it. On a flex column that makes every child size to its MAX-CONTENT, so
   the H1 stops wrapping at the column width and starts wrapping at its own
   max-width:620px — which at 430px wide is a headline running off the right of
   the page, clipped by the hero's overflow:hidden and therefore silently
   missing its last word rather than visibly broken. The two children that must
   not stretch say so themselves, with align-self. */
.smb-hero__lede {
  padding: 70px 0 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Sits where the comp's winter/summer toggle sat, and carries its visual mass
   (bordered box, mono 10.5px/.12em) so the composition above the H1 survives
   the toggle being dropped. See the template docblock for why it is dropped. */
.smb-hero__eyebrow {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242, 237, 225, 0.7);
  border: 1px solid rgba(242, 237, 225, 0.26);
  padding: 9px 18px;
  margin: 0 0 32px;
  align-self: flex-start;
}

.smb-hero__title {
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif);
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  /* 86 is the narrowest width axis anywhere in the design and it is reserved
     for the H1 — the further the type is condensed, the bigger it is set. */
  font-variation-settings: 'wdth' 86;
  max-width: 620px;
  margin: 0;
  text-wrap: balance;
}
.smb-hero__sub {
  color: rgba(242, 237, 225, 0.7);
  font-size: 17px;
  line-height: 1.7;
  max-width: 470px;
  margin: 26px 0 0;
}
.smb-hero__cta { align-self: flex-start; margin-top: 32px; padding: 15px 30px; letter-spacing: 0.12em; }

/* Hairline grid faked with gap:1px over a coloured parent: four cells on the
   night ground let the parent show through as the only seams. Four real
   borders would double to 2px on every internal edge. */
.smb-proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(242, 237, 225, 0.16);
  border: 1px solid rgba(242, 237, 225, 0.16);
  margin-top: 40px;
  max-width: 560px;
  width: 100%;
}
.smb-proof__cell { background: var(--smb-color-night, #10130f); padding: 16px 14px; }
.smb-proof__v {
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 88;
}
.smb-proof__k {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: rgba(242, 237, 225, 0.5);
  line-height: 1.5;
  margin-top: 7px;
}


/* ══════════════════════════════════════════════════════════════════════════
   Home · THE CORRIDOR RAIL
   ══════════════════════════════════════════════════════════════════════════
   The design's signature element and the argument the whole site makes: one
   road, and every neighbourhood is a distance along it. Stops are positioned
   by MILEPOST — the template computes top% from the content file and emits it
   inline, because that number is data. Everything else is here.

   The spine's gradient is the road: corridor orange at the ski area, fading to
   a cream hairline by 22% and holding it to Silver Lake. */
.smb-rail {
  position: relative;
  border-left: 1px solid rgba(242, 237, 225, 0.14);
  border-right: 1px solid rgba(242, 237, 225, 0.14);
  padding: 44px 0;
}
.smb-rail__label {
  position: absolute;
  top: 20px;
  margin: 0;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 237, 225, 0.4);
}
.smb-rail__label--start { left: 26px; }
.smb-rail__label--end { right: 26px; }

.smb-rail__spine {
  position: absolute;
  left: 96px;
  top: 74px;
  bottom: 52px;
  width: 1.5px;
  background: linear-gradient(to bottom,
    var(--lx-color-brand, #d4571f) 0%,
    rgba(242, 237, 225, 0.32) 22%,
    rgba(242, 237, 225, 0.32) 100%);
}

.smb-rail__summit {
  position: absolute;
  left: 96px;
  top: 52px;
  display: flex;
  align-items: center;
  gap: 22px;
}
/* The one orange diamond on the page: the top of the road. margin-left pulls
   it back onto the spine's centre line the way the comp's translateX(-50%)
   does, without taking the text with it. */
.smb-rail__cap {
  width: 15px;
  height: 15px;
  margin-left: -7.5px;
  color: var(--lx-color-brand, #d4571f);
  flex: none;
}
.smb-rail__summit-name {
  display: block;
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 88;
}
.smb-rail__summit-meta {
  display: block;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10.5px;
  color: rgba(242, 237, 225, 0.5);
  margin-top: 4px;
}

.smb-rail__stops {
  position: relative;
  height: 100%;
  min-height: 560px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.smb-rail__stop {
  position: absolute;
  left: 0;
  right: 22px;
  height: 36px;
  margin-top: 20px;   /* clears the summit block at the top of the spine */
}
.smb-rail__link {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--smb-color-cream, #f2ede1);
}
.smb-rail__link:hover { color: var(--smb-color-cream, #f2ede1); opacity: 0.72; }

/* 96px so the mile figure ends exactly on the spine, which is what makes the
   column read as a scale rather than as a label. */
.smb-rail__miles {
  width: 96px;
  flex: none;
  text-align: right;
  padding-right: 14px;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  color: rgba(242, 237, 225, 0.45);
}
.smb-rail__pin {
  width: 9px;
  height: 9px;
  flex: none;
  margin-left: -4.5px;   /* centres the 9px mark on the 1.5px spine */
}
.smb-rail__text {
  flex: 1;
  min-width: 0;
  padding-left: 16px;
}
.smb-rail__name {
  display: block;
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.smb-rail__drive {
  display: block;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px;
  color: rgba(242, 237, 225, 0.42);
  margin-top: 3px;
}
.smb-rail__count {
  flex: none;
  margin-left: 16px;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  color: rgba(242, 237, 225, 0.6);
  border: 1px solid rgba(242, 237, 225, 0.2);
  padding: 4px 9px;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════════════════
   Home · why book direct
   ══════════════════════════════════════════════════════════════════════════ */
.smb-direct {
  background: var(--smb-color-night, #10130f);
  color: var(--smb-color-cream, #f2ede1);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}
/* The template omits the quote column entirely when the manifest carries no
   pull-quote, rather than printing an empty one. */
.smb-direct--rows-only { grid-template-columns: 1fr; }

.smb-direct__quote { padding: 56px 50px; }
.smb-direct__pull {
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif);
  font-size: clamp(24px, 2.6vw, 31px);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.025em;
  /* 90 — the widest of the three display widths, because this is set at half
     the H1's size and needs the counters back. */
  font-variation-settings: 'wdth' 90;
  margin: 0;
}
.smb-direct__by {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  color: rgba(242, 237, 225, 0.5);
  margin: 24px 0 0;
}

.smb-direct__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid rgba(242, 237, 225, 0.14);
  display: grid;
  grid-auto-rows: 1fr;
}
.smb-direct--rows-only .smb-direct__list { border-left: 0; }
.smb-direct__row {
  padding: 22px 34px;
  border-bottom: 1px solid rgba(242, 237, 225, 0.1);
  display: flex;
  gap: 20px;
  align-items: baseline;
}
.smb-direct__n {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--lx-color-brand, #d4571f);
  flex: none;
}
.smb-direct__k {
  display: block;
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variation-settings: 'wdth' 88;
}
.smb-direct__v {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(242, 237, 225, 0.6);
  margin-top: 5px;
}


/* ══════════════════════════════════════════════════════════════════════════
   SHARED · Field-note card (home + the journal index)
   ══════════════════════════════════════════════════════════════════════════
   Borderless by design: the hatch block is the card's only edge. */
.smb-notes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
}
.smb-note__link { display: block; color: var(--lx-color-ink, #191e17); }
.smb-note__link:hover { color: var(--lx-color-ink, #191e17); }
.smb-note__link:hover .smb-note__title { color: var(--lx-color-brand, #d4571f); }
.smb-note__photo { height: 196px; min-height: 0; }
.smb-note__meta {
  display: block;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smb-color-muted, #8c8574);
  margin: 16px 0 10px;
}
.smb-note__title {
  display: block;
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.22;
  font-variation-settings: 'wdth' 88;
}
.smb-note__excerpt {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: var(--lx-color-ink-3, #6f6a5c);
  margin-top: 10px;
}


/* ══════════════════════════════════════════════════════════════════════════
   Home · owner CTA
   ══════════════════════════════════════════════════════════════════════════
   1.5px, the emphasis weight — the only box on the cream ground that gets it,
   which is what makes it read as the page's last word. */
.smb-owner {
  border: 1.5px solid var(--lx-color-ink, #191e17);
  padding: 52px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}
.smb-owner__title {
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-variation-settings: 'wdth' 88;
  margin: 0;
}
.smb-owner__body {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--lx-color-ink-2, #4a463d);
  margin: 18px 0 0;
  max-width: 560px;
}
.smb-owner__action { display: flex; flex-direction: column; gap: 14px; }
.smb-owner__cta { text-align: center; padding: 15px; letter-spacing: 0.12em; }
.smb-owner__note {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--lx-color-ink-3, #6f6a5c);
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════════
   ALL NET-NEW. The comp has no @media query anywhere in its 1,448 lines and no
   small-screen design at all; its containers are fixed at 1400/1500px.
   Breakpoints match _chrome.css (1040 / 860 / 560) so the chrome and the page
   change shape at the same widths — two different sets would produce a header
   and a hero that disagree about what "narrow" means. */

@media (max-width: 1040px) {
  .smb-hero__inner { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .smb-hero__lede { padding: 56px 0 40px; }

  /* THE RAIL BECOMES A LIST. Absolute milepost placement needs ~560px of
     height and a 96px gutter to read as a scale; below that the stops overlap
     and the spine is decoration. `position: static` is enough to defeat the
     template's inline top:X% — a static box ignores `top` outright, so this
     needs no !important and the inline style stays honest data. */
  .smb-rail {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid rgba(242, 237, 225, 0.14);
    padding: 28px 0 56px;
  }
  .smb-rail__label { position: static; margin: 0 0 6px; }
  .smb-rail__label--end { margin-bottom: 24px; }
  .smb-rail__spine { display: none; }
  .smb-rail__summit { position: static; margin-bottom: 10px; gap: 14px; }
  .smb-rail__cap { margin-left: 0; }
  .smb-rail__stops { position: static; height: auto; min-height: 0; }
  .smb-rail__stop {
    position: static;
    height: auto;
    margin: 0;
    border-top: 1px solid rgba(242, 237, 225, 0.12);
  }
  .smb-rail__link { padding: 13px 0; }
  .smb-rail__miles { width: 72px; }
  .smb-rail__pin { margin-left: 0; }

  .smb-direct { grid-template-columns: 1fr; }
  .smb-direct__list { border-left: 0; border-top: 1px solid rgba(242, 237, 225, 0.14); }
  .smb-owner { grid-template-columns: 1fr; gap: 32px; padding: 40px; }
}

@media (max-width: 860px) {
  .smb-home-band { margin-top: 60px; }
  .smb-hero + .smb-home-band { margin-top: 56px; }
  .smb-home-band--last { margin-bottom: 64px; }

  .smb-proof { grid-template-columns: repeat(2, 1fr); }
  .smb-listings { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px 20px; }
  .smb-notes { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; }
  .smb-direct__quote { padding: 36px 28px; }
  .smb-direct__row { padding: 20px 28px; }
  .smb-section__head--rule { padding-bottom: 16px; margin-bottom: 26px; }
}

@media (max-width: 560px) {
  .smb-hero__lede { padding: 40px 0 32px; }
  .smb-hero__title { letter-spacing: -0.025em; }
  .smb-hero__sub { font-size: 15.5px; }
  .smb-rail__miles { width: 56px; padding-right: 10px; font-size: 10px; }
  .smb-rail__text { padding-left: 12px; }
  .smb-rail__count { display: none; }   /* the name and the drive time are the point */
  .smb-listings, .smb-notes { grid-template-columns: 1fr; }
  .smb-owner { padding: 28px; }
  .smb-direct__quote { padding: 30px 22px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/parts/_journal.css
   ══════════════════════════════════════════════════════════════════════════ */
/* ============================================================================
   The journal — index (/journal/) and post (/journal/{slug}/).

   Ported from design/sections/blog.html + post.html for the templates
   chassis/templates/journal.php and chassis/templates/journal-post.php.
   Assembled into chassis/mtbaker-site.css by bin/build-skin.php, which globs
   parts/*.css ALPHABETICALLY — so everything here lands after _chrome.css and
   before any part named later in the alphabet. Two consequences are load-bearing
   and are called out where they bite: base-class overrides must be attribute- or
   component-scoped so a later part cannot silently win on equal specificity.

   Nothing here restates a value site.css already owns. .smb-chip, .smb-photo,
   .smb-btn and .smb-grid are reused and adjusted; only what the journal
   genuinely introduces is new.
   ========================================================================== */

/* ── The display voice, restored per component ────────────────────────────────
   site.css sets font-variation-settings/weight on h1-h3 but NOT font-family, and
   parts/_chrome.css then repoints <body> at the Helvetica stack (correctly — the
   comp's body copy is not Bricolage). The net effect is that headings inherit
   Helvetica and the 'wdth' 88 axis, the design's actual signature, applies to a
   font that has no such axis. The comp names 'Bricolage Grotesque' explicitly on
   every heading it draws; so does this.

   ⚠ This is a SITE-WIDE fault, fixed here only for the journal's own headings
   because site.css is not this file's to edit. The one-line repair belongs in
   site.css's `h1, h2, h3, .smb-display` rule. */
.smb-journal__title,
.smb-journal-lead__title,
.smb-journal-card__title,
.smb-post__title,
.smb-post__heading,
.smb-post__cta-title {
  font-family: var(--lx-font-sans, "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-variation-settings: 'wdth' 88;
  font-weight: 600;
}

/* ── The photo placeholder: opted into, never redeclared ─────────────────────
   The 126deg hatch, the mono label and its uppercase are the SITE-WIDE
   placeholder mechanism, declared once as .smb-photo[data-label] in
   parts/_pages.css. This page opts in by putting data-label on the element and
   sets only what is genuinely its own: the comp's block heights, and the one
   label size that differs.

   ⚠ Do not add a `content: attr(data-label)` rule here. ::before and ::after are
   different pseudo-elements, so a second one does not override the shared rule —
   it renders the label TWICE, overlapping itself on the hatch, which reads as a
   font-rendering fault rather than as a CSS mistake.

   The label is ALSO on the element as aria-label (see the templates): CSS
   generated content is not a reliable accessible name, and this string is
   standing in for alt text until real photography exists. */

/* ── The arrow ───────────────────────────────────────────────────────────────
   Exactly the reasoning parts/_chrome.css gives for .smb-diamond: the comp's
   → and ← (U+2192/2190) are not in the shipped woff2 subsets, so each one would
   render from whatever the OS supplies and differ across Windows, macOS and
   Android — beside text that does not. A rule plus a rotated corner is the same
   glyph, in currentColor, at any size.

   Generic enough that a second page will want it; if one does, lift it into
   parts/_chrome.css next to the diamond rather than declaring it twice. */
.smb-arrow {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 1.5px;
  margin-left: 9px;
  background: currentColor;
  vertical-align: middle;
}
.smb-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.smb-arrow--back { transform: rotate(180deg); margin: 0 9px 0 0; }

/* ============================================================================
   INDEX
   ========================================================================== */

.smb-journal { padding-top: 60px; padding-bottom: 92px; }

/* The eyebrows are NOT declared here. The comp's two mono label sizes —
   10px/.2em above a page title and 9.5px/.18em inside a dark panel — are
   .smb-eyebrow--page and .smb-eyebrow--panel in parts/_pages.css, and both of
   this page's eyebrows are exactly those. Re-cutting them under journal names
   would be two more places for the design's inverse size/tracking rule to drift. */

.smb-journal__title {
  font-size: 54px;
  letter-spacing: -0.035em;
  line-height: 1;
  max-width: 760px;
  margin: 0;
}

/* ── Lead card ─────────────────────────────────────────────────────────────── */

.smb-journal-lead {
  position: relative;                 /* the stretched link's containing block */
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  border: 1.5px solid var(--lx-color-ink, #191e17);
  margin-top: 36px;
}
.smb-journal-lead:hover { border-color: var(--lx-color-brand, #d4571f); }

/* Two classes rather than one: parts/*.css are concatenated alphabetically, so a
   single-class rule here would be beaten by any later part setting a plain
   .smb-photo height — i.e. the layout would depend on a filename. min-height
   clears site.css's 200px floor so the height below is the whole story.
   The label's 10px/.16em already comes from the shared placeholder rule. */
.smb-photo.smb-journal-lead__photo { height: 380px; min-height: 0; }

.smb-journal-lead__body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.smb-journal-lead__meta {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lx-color-brand, #d4571f);
  margin: 0;
}
.smb-journal-lead__title {
  font-size: 33px;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 14px 0 0;
}
.smb-journal-lead__excerpt {
  font-size: 15px;
  line-height: 1.75;
  color: var(--smb-color-ink-2, #4a463d);
  margin: 13px 0 0;
}
.smb-journal-lead__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin-top: 22px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--lx-color-brand, #d4571f);
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Post cards ────────────────────────────────────────────────────────────── */

/* .smb-grid supplies display:grid; this is the comp's own column rule —
   auto-fill rather than a fixed count, so the row reflows on content width
   instead of at a breakpoint someone has to remember to add. */
.smb-journal__grid {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 44px 28px;
}

.smb-journal-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.smb-photo.smb-journal-card__photo { height: 212px; min-height: 0; }
.smb-journal-card__meta {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smb-color-muted, #8c8574);
  margin: 16px 0 10px;
}
.smb-journal-card__title {
  font-size: 23px;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
}
/* The comp's #5a554a sits between --smb-color-ink-2 and --smb-color-ink-3 and is
   used nowhere else. Snapped to ink-3 — the smaller, secondary excerpt should
   recede from the lead card's — rather than minting a fourth ink for one rule. */
.smb-journal-card__excerpt {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--smb-color-ink-3, #6f6a5c);
  margin: 11px 0 0;
}

/* ── One link per card, covering the whole card ───────────────────────────────
   The comp makes each card a <span onClick>, which no keyboard reaches and no
   screen reader announces. The obvious repair — link the title and add a "read
   more" link — puts two targets on one destination in the tab order and reads
   the URL out twice. Stretching the heading's own anchor over the card keeps the
   comp's click area and leaves exactly one link in the accessibility tree.

   The focus ring goes on the CARD, not the anchor: a stretched anchor has no box
   of its own, so its own outline would draw around the title text only and look
   like a rendering fault. */
.smb-journal-lead__link,
.smb-journal-card__link { color: inherit; }
.smb-journal-lead__link::after,
.smb-journal-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.smb-journal-lead__link:focus-visible,
.smb-journal-card__link:focus-visible { outline: none; }
.smb-journal-lead:focus-within,
.smb-journal-card:focus-within {
  outline: 1.5px solid var(--lx-color-brand, #d4571f);
  outline-offset: 4px;
}
.smb-journal-card:hover .smb-journal-card__title { color: var(--lx-color-brand, #d4571f); }

/* ── Category pills ──────────────────────────────────────────────────────────
   .smb-chip already carries the square 1px-bordered shape and the --on inversion.
   The comp's journal row is one step larger than the search filters, so only the
   two values that differ are restated, scoped to this row. */
.smb-journal__cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 40px 0 30px;
  padding-bottom: 24px;
  border-bottom: 1.5px solid var(--lx-color-ink, #191e17);
}
.smb-journal__cats .smb-chip { padding: 9px 16px; font-size: 12.5px; }

.smb-journal__empty {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--smb-color-ink-3, #6f6a5c);
}

/* ============================================================================
   POST
   ========================================================================== */

.smb-post { padding-top: 36px; padding-bottom: 92px; }

.smb-post__back {
  display: inline-flex;
  align-items: center;
  margin-bottom: 28px;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smb-color-muted, #8c8574);
}
.smb-post__back:hover { color: var(--lx-color-ink, #191e17); }

/* The 740px measure. The photo is deliberately NOT in it — it spans the 1400px
   wrap, which is the comp's one full-bleed moment on this page. */
.smb-post__head,
.smb-post__body,
.smb-post__cta { max-width: 740px; margin-left: auto; margin-right: auto; }

.smb-post__meta {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lx-color-brand, #d4571f);
  margin: 0 0 16px;
}
.smb-post__title {
  font-size: 50px;
  letter-spacing: -0.035em;
  line-height: 1.03;
  margin: 0;
}
.smb-post__excerpt {
  font-size: 20px;
  line-height: 1.65;
  color: var(--smb-color-ink-2, #4a463d);
  margin: 20px 0 0;
}

/* The page-root prefix is not decoration. The shared placeholder rule
   (.smb-photo[data-label] in parts/_pages.css) sets the label to 10px/.16em at
   the same specificity as a two-class selector and lands LATER in the
   alphabetical concatenation, so it would win. This is the one block in the comp
   whose label is a size up — 10.5px/.18em, the full-bleed shot — and the third
   class is what lets it stay that way. */
.smb-post .smb-photo.smb-post__photo {
  height: 440px;
  min-height: 0;
  margin: 40px 0;
  font-size: 10.5px;
  letter-spacing: 0.18em;
}

/* Column gap rather than paragraph margins, so the block model's own rhythm is
   one number. A heading adds 16px of its own on top of the 24px gap — margins do
   not collapse inside a flex container, which is what makes the comp's 40px
   above a heading fall out of two simple values. */
.smb-post__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.smb-post__heading {
  font-size: 29px;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 16px 0 0;
}
.smb-post__text {
  font-size: 17.5px;
  line-height: 1.85;
  margin: 0;
}

/* 44px = the body column's 24px gap plus the comp's 20px margin, preserved now
   that the CTA sits outside <article> and no longer inherits that gap. */
.smb-post__cta {
  margin-top: 44px;
  padding: 32px;
  background: var(--smb-color-night, #10130f);
  color: var(--smb-color-cream, #f2ede1);
}
.smb-post__cta-title {
  font-size: 26px;
  letter-spacing: -0.03em;
  margin: 12px 0 0;
}
.smb-post__cta .smb-btn { margin-top: 20px; padding: 14px 26px; letter-spacing: 0.12em; }

/* ============================================================================
   RESPONSIVE — net-new

   The comp has no @media query anywhere and no small-screen design; its
   containers are fixed at 1400px. Breakpoints match parts/_chrome.css (1040 /
   860 / 560) so the page and the chrome change shape together rather than at
   two sets of widths that nobody can hold in their head.
   ========================================================================== */

@media (max-width: 1040px) {
  .smb-journal__title { font-size: 42px; }
  .smb-post__title { font-size: 40px; }
  .smb-photo.smb-journal-lead__photo { height: 320px; }
  .smb-post .smb-photo.smb-post__photo { height: 360px; }
  .smb-journal-lead__body { padding: 32px; }
}

@media (max-width: 860px) {
  /* 1.3fr/1fr stops working long before the viewport does: the body column hits
     ~34 characters and the headline breaks every other word. Stack instead. */
  .smb-journal-lead { grid-template-columns: 1fr; }
  .smb-photo.smb-journal-lead__photo { height: 240px; }
  .smb-journal__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 36px 22px; }
  .smb-journal { padding-top: 44px; padding-bottom: 64px; }
  .smb-post { padding-bottom: 64px; }
  .smb-post .smb-photo.smb-post__photo { height: 300px; margin: 32px 0; }
  .smb-post__title { font-size: 34px; }
  .smb-post__excerpt { font-size: 18px; }
  .smb-post__heading { font-size: 25px; }
  .smb-post__text { font-size: 17px; }
}

@media (max-width: 560px) {
  .smb-journal__title { font-size: 30px; }
  .smb-journal-lead__title { font-size: 26px; }
  .smb-journal-lead__body { padding: 24px; }
  /* minmax(280px,…) overflows a 320px viewport once the wrap's own padding is
     counted; below this width there is only ever one column anyway. */
  .smb-journal__grid { grid-template-columns: 1fr; }
  .smb-photo.smb-journal-card__photo { height: 190px; }
  .smb-photo.smb-journal-lead__photo { height: 190px; }
  .smb-post .smb-photo.smb-post__photo { height: 220px; }
  .smb-post__title { font-size: 28px; }
  .smb-post__cta { padding: 24px; }
  .smb-post__cta-title { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/parts/_neighbourhood.css
   ══════════════════════════════════════════════════════════════════════════ */
/* ============================================================================
   One neighbourhood — /neighbourhoods/{slug}/.

   Ported from design/sections/nb.html for chassis/templates/neighbourhood.php.
   Everything the comp expresses as an inline style attribute lands here; the
   template carries structure and data only.

   ── SCOPING RULE FOR THIS FILE ──────────────────────────────────────────────
   bin/build-skin.php concatenates parts/*.css alphabetically into one skin, so
   every part shares one cascade with every other page's part. Every selector
   below is therefore rooted at .smb-nb (the template's <main>), and every one
   of them is either new to this page or a documented restatement of a comp
   value for it. Nothing here can reach another page — which is what lets these
   pages be built in parallel without a merge that silently restyles someone
   else's grid.

   NOT DECLARED HERE, ON PURPOSE — owned elsewhere, opted into by class:
     .smb-listings / .smb-listing*   the shared listing card   parts/_home.css
     .smb-photo[data-label]          the 126° hatch + label    parts/_pages.css
     .smb-facts / .smb-fact*         key/value rows            site.css
     .smb-wrap .smb-main .smb-section--dark                    site.css
   The two card values this page's comp genuinely changes are restated at the
   bottom of this file, with the reason. Nothing else about the card is.
   ========================================================================== */

/* The page uses <dl> for all three key/value blocks (stats, highlights, facts)
   because that is what they are. The UA's dd indent is not. */
.smb-nb dl,
.smb-nb dt,
.smb-nb dd { margin: 0; }

/* ── Hero ────────────────────────────────────────────────────────────────────
   Comp: #10130f ground, 52/46 vertical padding, and a repeating radial ring set
   centred at 72% 50% — off-centre on purpose, so the rings read as contour
   lines rather than a target. The cream tints are rgba() literals: the palette
   ships --smb-color-cream as a hex, and there is no alpha form of it. */
.smb-nb__hero {
  position: relative;
  overflow: hidden;
}
.smb-nb__hero-texture {
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at 72% 50%,
              transparent 0 34px, rgba(242, 237, 225, 0.05) 34px 35px);
  pointer-events: none;
}
.smb-nb__hero-inner {
  position: relative;   /* above the texture */
  padding-top: 52px;
  padding-bottom: 46px;
}

/* Breadcrumb. The comp's "←" is U+2190, which is not in the shipped woff2
   subsets — same reasoning as the diamond in _chrome.css. Two borders on a
   rotated square is the same mark, in the same colour, at any size. */
.smb-nb__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 237, 225, 0.5);
  margin-bottom: 16px;
}
.smb-nb__back:hover { color: var(--smb-color-cream, #f2ede1); }
.smb-nb__back::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* Comp: 60px flat. clamp() instead, because the comp has no mobile design at
   all and 60px of Bricolage at -0.035em overflows a 360px viewport on
   "Mt. Baker Rim". The upper bound is the comp's number exactly. */
.smb-nb__title {
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', Helvetica, sans-serif);
  font-size: clamp(36px, 6.2vw, 60px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variation-settings: 'wdth' 88;
}

/* Stat strip. The 1px "gaps" are the container's own colour showing through a
   grid gap — one hairline grid, not eight borders that double up at the seams. */
.smb-nb__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(242, 237, 225, 0.16);
  border: 1px solid rgba(242, 237, 225, 0.16);
  margin-top: 30px;
  max-width: 720px;
}
.smb-nb__stat {
  background: var(--smb-color-night, #10130f);
  padding: 15px 16px;
}
.smb-nb__stat dt {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.14em;   /* tracking scales inversely with size */
  text-transform: uppercase;
  color: rgba(242, 237, 225, 0.45);
}
.smb-nb__stat dd {
  font-size: 16px;
  margin-top: 6px;
}

/* ── Body: prose column + aside ─────────────────────────────────────────────
   minmax(0,1fr), not 1fr: a grid track defaults to min-content, so one long
   unbroken word in the body copy would widen the column and push the 330px
   aside off the page instead of wrapping. */
.smb-nb__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 56px;
  align-items: start;
  padding-top: 48px;
}
.smb-nb__main { min-width: 0; }

/* The lede is Bricolage at weight 500. It deliberately does not use
   .smb-display, which pins weight 600 — at 25px that reads as a second heading
   competing with the H1 rather than as the opening sentence. */
.smb-nb__lede {
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', Helvetica, sans-serif);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 88;
  margin: 0;
}

/* Not .smb-prose: that is the journal/about measure (16.5px/1.7, capped at
   68ch). This column is already width-constrained by the grid and the comp sets
   a smaller, looser body voice against the 25px lede above it. */
.smb-nb__prose {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--smb-color-ink-2, #4a463d);
  margin: 22px 0 0;
}
.smb-nb__prose + .smb-nb__prose { margin-top: 1.2em; }

/* Highlights. 2px is the one deliberate exception to the design's 1px/1.5px
   border scale — it is a brand accent bar, not a rule, and the comp sets it
   at 2px on all four. */
.smb-nb__highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 32px;
}
.smb-nb__highlight {
  border-left: 2px solid var(--lx-color-brand, #d4571f);
  padding: 2px 0 2px 16px;
}
.smb-nb__highlight dt {
  font-size: 15px;
  font-weight: 600;
}
.smb-nb__highlight dd {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--smb-color-ink-3, #6f6a5c);
  margin-top: 5px;
}

/* ── "Good to know" aside ────────────────────────────────────────────────── */
.smb-nb__aside {
  border: 1px solid var(--lx-color-line, #ddd4c0);
  background: var(--smb-color-surface, #fbf8f2);
  padding: 24px;
}
.smb-nb__aside-head {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smb-color-muted, #8c8574);
  margin: 0 0 16px;
}

/* .smb-facts/.smb-fact reused wholesale; the aside is a tighter, smaller
   instance of the same row, so only the metrics the comp changes are restated.
   Row rhythm is the container's gap plus a 12px lead-in above each rule, which
   is what the comp does — and it keeps the last row's rule, deliberately: the
   list reads as continuing past the box rather than closing it off. */
.smb-nb__aside .smb-facts { gap: 13px; }
.smb-nb__aside .smb-fact {
  font-size: 13.5px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--smb-color-hair, #e5dcc8);
}
.smb-nb__aside .smb-fact__k { color: var(--smb-color-muted, #8c8574); }
.smb-nb__aside .smb-fact__v { font-weight: 400; }

/* ── Cabins in this neighbourhood ───────────────────────────────────────────
   1.5px under the H2 — the design's emphasis weight, against the 1px hairlines
   used everywhere else on the page. */
.smb-nb__cabins {
  padding-top: 56px;
  padding-bottom: 92px;
}
.smb-nb__cabins-title {
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', Helvetica, sans-serif);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variation-settings: 'wdth' 88;
  margin: 0 0 26px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--lx-color-ink, #191e17);
}
.smb-nb__empty {
  font-size: 15px;
  line-height: 1.7;
  color: var(--smb-color-ink-3, #6f6a5c);
  margin: 0;
}

/* ── The listing card, at this page's density ────────────────────────────────
   .smb-listings / .smb-listing* are the SHARED card. Its classes, its hatch
   (.smb-photo[data-label]) and its type scale are declared once, in
   parts/_home.css and parts/_pages.css, and nothing about them is repeated
   here — a second copy of a shared design decision is how two cards start.

   Only the two values the comp genuinely changes for this page are restated.
   The home page shows three featured cards in a band; this is the full
   inventory of a neighbourhood at full width, and the comp tightens the track
   accordingly (288px / 28-22 against 320px / 32-26, and a 206px photo against
   236px). The remaining 1-2px deltas in the comp's nb card — 18px body padding
   against 16, a 22px name against 20 — are deliberately NOT ported: they are
   below the threshold anyone would notice and above the threshold at which the
   shared card stops being one card. */
.smb-nb .smb-listings {
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 28px 22px;
}
.smb-nb .smb-listing__photo { height: 206px; }

/* ── Responsive ──────────────────────────────────────────────────────────────
   NET-NEW: the comp has no @media query anywhere in its 1,448 lines. Same three
   breakpoints as parts/_chrome.css, chosen from where this page's own fixed
   widths actually break — the 330px aside, the 4-up strip, the 288px cards. */
@media (max-width: 1040px) {
  .smb-nb__cols {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
  }
}

@media (max-width: 860px) {
  .smb-nb__cols {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 36px;
  }
  .smb-nb__stats { grid-template-columns: 1fr 1fr; }
  .smb-nb__hero-inner { padding-top: 36px; padding-bottom: 34px; }
  .smb-nb__cabins { padding-top: 44px; padding-bottom: 64px; }
}

@media (max-width: 560px) {
  .smb-nb__stats { grid-template-columns: 1fr; }
  .smb-nb__highlights { grid-template-columns: 1fr; }
  /* minmax(288px,…) overflows a 320px viewport once .smb-wrap takes its 20px
     of padding, so the track MINIMUM has to go — auto-fill alone will not save
     it, because a grid item cannot be narrower than its own track minimum. */
  .smb-nb .smb-listings { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/parts/_neighbourhoods.css
   ══════════════════════════════════════════════════════════════════════════ */
/* ============================================================================
   The neighbourhood INDEX — /neighbourhoods/

   Serves chassis/templates/neighbourhoods.php, declared as a manifest route
   (no {slug}). Concatenated into chassis/mtbaker-site.css by bin/build-skin.php
   after site.css and in alphabetical order among parts/, so everything here can
   rely on the .smb-* vocabulary and on the tokens without redeclaring either.

   Namespaced .smb-nbindex / .smb-nbtable / .smb-nbrow — deliberately NOT
   .smb-nb__*, which the neighbourhood DETAIL page owns. Two pages about the
   same records in one flat cascade is exactly how a rule written for one of
   them lands on the other, and the symptom would be a layout that breaks when
   an unrelated file is edited.

   Comp: design/sections/nbindex.html. Values below are the comp's, restated as
   tokens. Every @media block is NET-NEW — the comp has no small-screen design
   anywhere in its 1,448 lines; breakpoints match parts/_chrome.css.
   ========================================================================== */

/* ── Page head ───────────────────────────────────────────────────────────────
   Comp: padding 60px top, H1 54px / -.035em / line-height 1 / max-width 800px,
   lede 17px / 1.75 / max-width 600px. */

.smb-nbindex__head { padding-top: 60px; }

/* The eyebrow is one notch smaller and one notch wider than the .smb-eyebrow
   base, per the design's inverse rule: tracking rises as size falls
   (9px/.18em … 12.5px/.06em). 10px sits at .2em. */
.smb-nbindex__eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  margin: 0 0 14px;
}

/* clamp() rather than the comp's flat 54px. The comp never had to answer for a
   375px viewport; 54px with -.035em tracking overflows one there, and a
   mid-word break in the H1 is the first thing a visitor sees. */
.smb-nbindex__title {
  font-size: clamp(32px, 5.4vw, 54px);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 800px;
}

.smb-nbindex__lede {
  font-size: 17px;
  line-height: 1.75;
  color: var(--lx-color-ink-2, #4a463d);
  max-width: 600px;
  margin: 20px 0 0;
}

/* ── The comparison table ────────────────────────────────────────────────────
   Comp: a 1.5px ink box around a dark header row and 1px hair row rules.
   The 1.5px border lives on the SCROLL container, not the table, so it stays
   put while the columns move under it — a border on the table itself scrolls
   away and the box looks broken the moment a phone touches it. */

.smb-nbindex__tablewrap { margin-top: 40px; }

.smb-nbtable__scroll {
  border: 1.5px solid var(--lx-color-ink, #191e17);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* The container is focusable so a keyboard user can scroll it (see the
   template's note). Give that focus a visible ring; the browser default is
   inconsistent on a div. */
.smb-nbtable__scroll:focus-visible {
  outline: 1.5px solid var(--lx-color-brand, #d4571f);
  outline-offset: -1.5px;
}

.smb-nbtable {
  width: 100%;
  /* Below this the six columns stop being readable and start being a word
     puzzle — that is the point at which the container scrolls instead. */
  min-width: 860px;
  border-collapse: collapse;
  /* fixed + the widths below reproduce the comp's grid ratio
     (1.4fr .7fr .7fr .7fr .7fr 1.5fr) exactly. Without `fixed`, "Skiers,
     couples" in the last column would negotiate width against the first and
     the columns would jump row to row. */
  table-layout: fixed;
  font-size: 14px;
  text-align: left;
}

.smb-nbtable th:nth-child(1), .smb-nbtable td:nth-child(1) { width: 24.5%; }
.smb-nbtable th:nth-child(2), .smb-nbtable td:nth-child(2),
.smb-nbtable th:nth-child(3), .smb-nbtable td:nth-child(3),
.smb-nbtable th:nth-child(4), .smb-nbtable td:nth-child(4),
.smb-nbtable th:nth-child(5), .smb-nbtable td:nth-child(5) { width: 12.3%; }
.smb-nbtable th:nth-child(6), .smb-nbtable td:nth-child(6) { width: 26.3%; }

/* Comp: padding 14px 24px on the head, 15px 24px on the rows, gap 0 20px
   between columns. Restated as symmetric cell padding with the outer edges
   carrying the container inset. */
.smb-nbtable thead th { padding: 14px 10px; }
.smb-nbtable tbody th,
.smb-nbtable tbody td { padding: 15px 10px; }
.smb-nbtable th:first-child, .smb-nbtable td:first-child { padding-left: 24px; }
.smb-nbtable th:last-child,  .smb-nbtable td:last-child  { padding-right: 24px; }

.smb-nbtable thead tr {
  background: var(--lx-color-ink, #191e17);
  color: var(--smb-color-cream, #f2ede1);
}
.smb-nbtable thead th {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  white-space: nowrap;
}

.smb-nbtable tbody tr {
  border-bottom: 1px solid var(--smb-color-hair, #e5dcc8);
  /* The containing block for the row link's stretched ::after. */
  position: relative;
}
.smb-nbtable tbody tr:last-child { border-bottom: 0; }
.smb-nbtable tbody tr:hover,
.smb-nbtable tbody tr:focus-within { background: var(--smb-color-surface, #fbf8f2); }

/* Row cells default to the body voice, not the header's mono. */
.smb-nbtable tbody th,
.smb-nbtable tbody td { font-weight: 400; vertical-align: middle; }

.smb-nbtable__name {
  font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif);
  font-size: 18px;
  font-weight: 600;
  font-variation-settings: 'wdth' 88;
  letter-spacing: -0.02em;
}
.smb-nbtable__link { color: inherit; }
.smb-nbtable tbody tr:hover .smb-nbtable__link { color: var(--lx-color-brand, #d4571f); }
/* ONE anchor made to cover the whole row. The row is not an <a> (invalid) and
   the other five cells are not links (five redundant tab stops), so the target
   is enlarged in CSS while the document keeps exactly one link per row. */
.smb-nbtable__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.smb-nbtable__mile,
.smb-nbtable__mono {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12px;
  white-space: nowrap;
}
.smb-nbtable__mile  { color: var(--lx-color-brand, #d4571f); }
.smb-nbtable__mono  { color: var(--lx-color-ink-3, #6f6a5c); }
.smb-nbtable__count { color: var(--lx-color-ink-3, #6f6a5c); }
.smb-nbtable__best {
  color: var(--lx-color-ink-3, #6f6a5c);
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Editorial rows ──────────────────────────────────────────────────────────
   Comp: 7 stacked cards, grid 380px 1fr, 1px line border on the surface, hover
   border brand; 268px photo block; body padding 32px 36px; stack gap 30px. */

.smb-nbrows {
  padding-top: 48px;
  padding-bottom: 92px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.smb-nbrow {
  display: grid;
  grid-template-columns: 380px 1fr;
  border: 1px solid var(--lx-color-line, #ddd4c0);
  background: var(--smb-color-surface, #fbf8f2);
  /* Containing block for the title link's stretched ::after — same pattern as
     the table row, for the same reason. */
  position: relative;
}
.smb-nbrow:hover,
.smb-nbrow:focus-within { border-color: var(--lx-color-brand, #d4571f); }

/* The hatch, the label and its 10px/.16em mono voice are NOT declared here.
   .smb-photo[data-label] is the site-wide placeholder mechanism and is owned by
   one part file (parts/_pages.css). This page opts in by putting data-label on
   the element and sets only the two things that are genuinely its own: the
   comp's 268px block, and the min-height that releases site.css's 200px floor
   so the small-screen heights below can actually take effect.

   ⚠ Do not add a `content: attr(...)` rule here. ::before and ::after are
   different pseudo-elements, so a second one does not override the shared rule
   — it renders the label TWICE, and on a hatch the duplicate lands almost on
   top of itself and reads as a font-rendering fault rather than as two labels.

   Two classes rather than one, matching the convention the other page parts
   use: parts/*.css are concatenated in alphabetical order, so a single-class
   rule here would be beaten by any later part that sets a plain .smb-photo
   height — i.e. the layout would depend on a filename. */
.smb-photo.smb-nbrow__photo {
  height: 268px;
  min-height: 0;
  padding: 0 20px;
}

.smb-nbrow__body { padding: 32px 36px; }

.smb-nbrow__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.smb-nbrow__title {
  font-size: 30px;
  letter-spacing: -0.03em;
  font-variation-settings: 'wdth' 88;
}
.smb-nbrow__link { color: inherit; }
.smb-nbrow:hover .smb-nbrow__link { color: var(--lx-color-brand, #d4571f); }
/* Known trade-off, taken deliberately: an overlay on top of the copy means the
   blurb cannot be selected with the mouse. The comp made the entire card a
   single onClick, so it was never selectable there either — and the reverse
   (overlay behind, text above) produces a card where clicking the words does
   nothing, which reads as a broken link rather than a design choice. */
.smb-nbrow__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.smb-nbrow__meta {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  color: var(--smb-color-muted, #8c8574);
  white-space: nowrap;
  margin: 0;
}

.smb-nbrow__blurb {
  font-size: 15px;
  line-height: 1.75;
  color: var(--lx-color-ink-2, #4a463d);
  margin: 14px 0 0;
  max-width: 660px;
}

/* A <ul>, because three unordered labels are a list and a screen reader saying
   "list, 3 items" is free structure. */
.smb-nbrow__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
/* NOT .smb-chip. A chip is an interactive filter toggle — it carries
   cursor:pointer and a hover affordance, and giving a static label those tells
   the visitor it does something when clicked. Same square 1px box, one notch
   smaller, no lie. */
.smb-nbrow__tag {
  border: 1px solid var(--lx-color-line, #ddd4c0);
  padding: 6px 11px;
  font-size: 12px;
  color: var(--lx-color-ink-3, #6f6a5c);
}

/* ── Responsive ──────────────────────────────────────────────────────────────
   NET-NEW, all of it. The table never reflows: six columns of numbers exist to
   be compared side by side, so below its readable width it scrolls inside its
   own container (see .smb-nbtable__scroll) and the page does not move. */

@media (max-width: 1040px) {
  .smb-nbrow { grid-template-columns: 300px 1fr; }
  .smb-photo.smb-nbrow__photo { height: 240px; }
  .smb-nbrow__body { padding: 28px 30px; }
}

@media (max-width: 860px) {
  .smb-nbindex__head { padding-top: 40px; }
  .smb-nbindex__lede { font-size: 16px; }
  .smb-nbindex__tablewrap { margin-top: 32px; }
  .smb-nbrows { padding-top: 40px; padding-bottom: 64px; gap: 24px; }

  /* The photo stops being a column and becomes a band above the copy. */
  .smb-nbrow { grid-template-columns: 1fr; }
  .smb-photo.smb-nbrow__photo { height: 200px; }
  .smb-nbrow__title { font-size: 26px; }
}

@media (max-width: 560px) {
  .smb-nbindex__head { padding-top: 32px; }
  .smb-nbrows { padding-bottom: 52px; }
  .smb-nbrow__body { padding: 22px 20px; }
  .smb-photo.smb-nbrow__photo { height: 168px; }
  /* Name and milepost stop fitting on one line together long before the
     container does. */
  .smb-nbrow__top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .smb-nbrow__blurb { font-size: 14.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   D:/htdocs/teralorimer/stayatmtbaker/public/assets/css/parts/_pages.css
   ══════════════════════════════════════════════════════════════════════════ */
/* ============================================================================
   _pages.css — About and Contact.

   The two manifest-declared page overrides (`templates.about`,
   `templates.contact`) authored at chassis/templates/{about,contact}.php.
   Assembled into chassis/mtbaker-site.css by bin/build-skin.php, which globs
   parts/ alphabetically — so this file cascades AFTER _chrome.css and may
   extend it, never before it.

   Everything here is either (a) a value read straight off the v3 comp, or
   (b) net-new responsive behaviour, because the comp has no @media query
   anywhere in its 1,448 lines. The (b) rules are marked.

   The vocabulary in site.css is reused rather than re-cut: .smb-wrap,
   .smb-photo, .smb-facts/.smb-fact, .smb-btn and its variants, .smb-eyebrow.
   What is genuinely new to these two pages: the labelled photo hatch, the
   pull-quote, the stacked fact list, the underline-only form, the dark office
   card, and the map placeholder.
   ========================================================================== */


/* ── Display voice, declared explicitly ──────────────────────────────────────
   _chrome.css:14 sets <body> to the Helvetica stack — correct, the comp's body
   copy is not Bricolage. But site.css's `h1,h2,h3,.smb-display` rule sets only
   the width axis and the tracking, never font-family, so every heading INHERITS
   the body stack and the design's signature voice silently disappears.
   Named here for the elements these two pages own, so the pages are right
   regardless of when that global rule gets its font-family back. */
.smb-about__title,
.smb-about__h2,
.smb-about__lead,
.smb-about__cta-heading,
.smb-contact__title,
.smb-pullquote {
  font-family: var(--lx-font-sans, "Bricolage Grotesque", Helvetica, Arial, sans-serif);
}


/* ── Shared page primitives ──────────────────────────────────────────────── */

/* The design's one-colour emphasis: the second half of a heading, in corridor
   orange. Every heading in the comp that turns is this and only this. */
.smb-accent { color: var(--lx-color-brand, #d4571f); }

.smb-lede {
  font-size: 18px;
  line-height: 1.75;
  color: var(--lx-color-ink-2, #4a463d);
  max-width: 68ch;
  margin: 22px 0 0;
}

/* Mono eyebrows. The comp's rule is that tracking scales INVERSELY with size —
   9px carries .18em, 12.5px carries .06em — because at these sizes the letter
   shapes need the air more than the word does. Two sizes are used on these
   pages; both extend .smb-eyebrow rather than replacing it. */
.smb-eyebrow--page  { font-size: 10px;   letter-spacing: 0.2em;  margin: 0 0 14px; }
.smb-eyebrow--panel { font-size: 9.5px;  letter-spacing: 0.18em; margin: 0 0 12px; }

/* Full-width button — the comp's stacked aside actions. */
.smb-btn--block {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 18px;
}
.smb-btn--block + .smb-btn--block { margin-top: 10px; }

/* The comp's form submit: wider, and tracked out one step from .smb-btn. */
.smb-btn--lg { padding: 16px 40px; letter-spacing: 0.14em; }


/* ── Photo placeholders ──────────────────────────────────────────────────────
   There is NO photography for this client yet, and the comp's answer is better
   than a stock photo: a 126° hatch with a mono label naming the shot that goes
   there. It is unmistakably a placeholder, so it cannot ship by accident.

   Keyed on [data-label] rather than restyling .smb-photo itself. site.css's
   base .smb-photo is a night-ground block used elsewhere; this is additive, so
   a template opts in by supplying a label and nothing else changes. When the
   real images arrive the element becomes an <img> and this rule stops matching
   on its own. */
.smb-photo[data-label] {
  background: repeating-linear-gradient(126deg,
    var(--smb-color-hair, #e5dcc8) 0 11px,
    var(--smb-color-hair-2, #ded4bf) 11px 22px);
  color: var(--smb-color-label, #9e957f);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.smb-photo[data-label]::after { content: attr(data-label); }

/* The map box is a DIFFERENT hatch — a cool grey-green found nowhere else in
   the design, which is exactly the point: it reads as "diagram", not "photo".
   Scoped to this rule rather than promoted to a site token, because three
   one-off values in one box are not a palette. */
.smb-photo--map {
  --smb-map-hatch-a: #e2e4dc;
  --smb-map-hatch-b: #dbded3;
  --smb-map-label:   #96a08e;
  background: repeating-linear-gradient(126deg,
    var(--smb-map-hatch-a) 0 12px,
    var(--smb-map-hatch-b) 12px 24px);
  color: var(--smb-map-label);
  border: 1px solid var(--lx-color-line, #ddd4c0);
  min-height: 220px;
}


/* ── Pull-quote ──────────────────────────────────────────────────────────────
   Display type on a 1.5px rule. 1.5px is the design's emphasis weight — the
   ordinary hairline is 1px and there is no third value anywhere. */
.smb-pullquote {
  border-top: 1.5px solid var(--lx-color-ink, #191e17);
  padding-top: 18px;
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 88;
}


/* ── Stacked fact list ───────────────────────────────────────────────────────
   .smb-fact is a two-column row (label left, value hard right). These values
   run to a full line of prose in a 350px column, where a right-aligned column
   turns each one into four ragged lines. Same rows, stacked. */
.smb-facts--stack { margin: 0; }
.smb-facts--stack .smb-fact {
  flex-direction: column;
  gap: 5px;
  padding: 13px 0;
}
.smb-facts--stack .smb-fact:first-child { border-top: 1px solid var(--lx-color-line, #ddd4c0); }
.smb-facts--stack .smb-fact__k {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smb-color-label, #9e957f);
}
.smb-facts--stack .smb-fact__v {
  /* <dd> carries a 40px UA margin-inline-start; without this the values hang
     off the label by a tab stop and the column looks broken, not indented. */
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  text-align: left;
  color: var(--lx-color-ink, #191e17);
}


/* ══════════════════════════════════════════════════════════════════════════
   ABOUT
   ══════════════════════════════════════════════════════════════════════════ */

.smb-about__head { padding-top: 60px; }

.smb-about__title {
  /* Comp: 58px flat. clamp() is net-new — the comp has no small screen, and
     58px on a 360px phone is four words per line. */
  font-size: clamp(32px, 5.4vw, 58px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variation-settings: 'wdth' 88;
  max-width: 880px;
  margin: 0;
}

/* Mosaic: one wide frame beside two stacked, 1.5fr / 1fr at a fixed 400px.
   Fixed height rather than aspect-ratio on purpose — the right column has to
   split evenly against the left one, and three independent aspect ratios
   cannot agree on where the seam lands. */
.smb-about__mosaic {
  padding-top: 38px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 10px;
  height: 438px;                       /* 400px of picture + the 38px pad above */
}
.smb-about__mosaic-col {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  min-height: 0;
}
/* site.css gives .smb-photo a 200px floor, which fights a 195px mosaic cell and
   silently pushes the row taller than the frame beside it. */
.smb-about__mosaic .smb-photo { min-height: 0; }

.smb-about__body {
  padding-top: 48px;
  padding-bottom: 92px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 64px;
  align-items: start;
}
.smb-about__story { min-width: 0; }

.smb-about__h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variation-settings: 'wdth' 88;
  margin: 0 0 22px;
}

/* The first story paragraph is display type, not body type — the comp's way of
   letting the page open at 26px and settle to 16px. */
.smb-about__lead {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 90;
  color: var(--lx-color-ink, #191e17);
  margin: 0;
}
.smb-about__story p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--lx-color-ink-2, #4a463d);
  margin: 16px 0 0;
}
.smb-about__lead + p { margin-top: 24px; }

/* STICKY AT 96px — the comp's number, and it is derived, not chosen: the header
   is sticky and 76px tall, so 96px parks the aside 20px clear of it instead of
   underneath it. Move one and move the other. */
.smb-about__aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.smb-about__cta {
  border: 1.5px solid var(--lx-color-ink, #191e17);
  padding: 28px;
}
.smb-about__cta-heading {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-variation-settings: 'wdth' 88;
  margin: 0 0 20px;
}


/* ══════════════════════════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════════════════════════ */

.smb-contact__inner { padding-top: 60px; padding-bottom: 92px; }

.smb-contact__title {
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variation-settings: 'wdth' 88;
  margin: 0;
}
.smb-contact__lede { margin-top: 18px; max-width: 66ch; }

.smb-contact__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 56px;
  align-items: start;
}

.smb-contact__card {
  min-width: 0;
  border: 1.5px solid var(--lx-color-ink, #191e17);
  background: var(--smb-color-surface, #fbf8f2);
  padding: 34px;
}

/* ── The not-sent notice ─────────────────────────────────────────────────────
   NET-NEW, and deliberately so. The comp answers a submit with "Message sent";
   this site has no handler behind the form, so that panel would be a promise
   nobody kept. This one says the opposite, in the brand's own emphasis colour
   so it cannot be mistaken for decoration. It disappears the day the endpoint
   exists — and so does this rule. */
.smb-notice {
  border: 1.5px solid var(--lx-color-brand, #d4571f);
  background: var(--lx-color-brand-tint, #f7e7dd);
  padding: 18px 20px;
  margin: 0 0 26px;
}
.smb-notice__title {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lx-color-brand, #d4571f);
  margin: 0 0 8px;
}
.smb-notice p { margin: 0; font-size: 14.5px; line-height: 1.7; }

/* ── The form ────────────────────────────────────────────────────────────────
   Underline-only fields: border:0 with a single 1px bottom hairline, the comp's
   whole idea of an input. The textarea is the one exception — it is a box in
   the comp too, because a four-line underline reads as four empty fields. */
.smb-form { display: flex; flex-direction: column; gap: 22px; }
.smb-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.smb-field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.smb-field__label {
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smb-color-muted, #8c8574);
}
.smb-field__opt {
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--lx-color-line-2, #b0a894);
}

.smb-field__input,
.smb-field__area {
  width: 100%;
  background: transparent;
  /* border-radius:0 is a UA RESET, not a design decision: form controls arrive
     rounded from the browser on several platforms, and the comp has square
     corners on all 1,448 of its lines. Nothing here adds a radius. */
  border-radius: 0;
}
.smb-field__input {
  border: 0;
  border-bottom: 1px solid var(--lx-color-line, #ddd4c0);
  padding: 9px 0;
  font-size: 15.5px;
}
.smb-field__input:hover { border-bottom-color: var(--lx-color-line-2, #b0a894); }

/* Left alone on purpose: the native dropdown indicator is the only affordance
   an underline-only select has, and replacing it means shipping a caret asset
   or a background-image data URI for no gain. */
.smb-field__select { padding-left: 0; }

.smb-field__area {
  border: 1px solid var(--lx-color-line, #ddd4c0);
  background: var(--smb-color-cream, #f2ede1);
  padding: 14px;
  font-size: 15px;
  line-height: 1.65;
  resize: vertical;
}

.smb-form__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* The standing honesty note under the submit. Quiet, but present — a visitor
   should learn this BEFORE typing, not after. Deleted in the same commit that
   lands the mail handler. */
.smb-form__note {
  margin: 0;
  max-width: 52ch;
  border-left: 1.5px solid var(--lx-color-line-2, #b0a894);
  padding-left: 12px;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--lx-color-ink-3, #6f6a5c);
}

/* ── Office card ─────────────────────────────────────────────────────────── */

.smb-contact__aside { display: flex; flex-direction: column; gap: 18px; }

.smb-officecard {
  background: var(--smb-color-night, #10130f);
  color: var(--smb-color-cream, #f2ede1);
  padding: 28px;
}
.smb-officecard__label { color: rgba(242, 237, 225, 0.5); }
.smb-officecard__address,
.smb-officecard__reach { margin: 0; font-size: 15.5px; line-height: 1.85; }
.smb-officecard__reach { margin-top: 12px; }
/* The comp picks a one-off #e07a45 for the contact lines on the night ground.
   There is no token for it; --rr-sky is the palette's designated accent-on-dark
   and lands within a hair of it, so the value stays in the palette instead of
   becoming a forty-first literal. */
.smb-officecard__reach a { color: var(--rr-sky, #ee6b30); }
.smb-officecard__reach a:hover { color: var(--smb-color-cream, #f2ede1); }
.smb-officecard__hours {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(242, 237, 225, 0.14);
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10.5px;
  line-height: 1.8;
  color: rgba(242, 237, 225, 0.5);
}


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — all net-new. The comp has no @media query and no small-screen
   design; these breakpoints match _chrome.css (1040 / 860 / 560) so the page
   and the chrome change shape on the same line rather than one at a time.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1040px) {
  .smb-about__body    { grid-template-columns: minmax(0, 1fr) 310px; gap: 44px; }
  .smb-contact__grid  { grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; }
  .smb-about__mosaic  { height: 378px; }
}

@media (max-width: 860px) {
  .smb-about__head    { padding-top: 44px; }
  .smb-contact__inner { padding-top: 44px; padding-bottom: 64px; }
  .smb-about__body    { grid-template-columns: 1fr; gap: 40px; padding-bottom: 64px; }
  .smb-contact__grid  { grid-template-columns: 1fr; gap: 32px; }

  /* Sticky in a single column would pin the aside over the story it belongs
     beside — the position only means anything while there are two columns. */
  .smb-about__aside   { position: static; }

  .smb-about__mosaic      { grid-template-columns: 1fr; height: auto; }
  .smb-about__mosaic-col  { grid-template-rows: auto auto; }
  .smb-about__mosaic .smb-photo { min-height: 190px; }

  .smb-about__lead    { font-size: 23px; }
  .smb-about__h2      { font-size: 27px; }
  .smb-contact__card  { padding: 24px; }
}

@media (max-width: 560px) {
  .smb-form__row      { grid-template-columns: 1fr; gap: 20px; }
  .smb-about__lead    { font-size: 21px; }
  .smb-about__mosaic .smb-photo { min-height: 150px; }
  .smb-contact__card  { padding: 20px; }
  .smb-officecard     { padding: 22px; }
  .smb-about__cta     { padding: 22px; }
  .smb-btn--lg        { width: 100%; text-align: center; padding: 15px 24px; }
  .smb-form__foot     { align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §193 · Real photographs in the placeholder frames
   ═══════════════════════════════════════════════════════════════════════
   lx_demo_photo_tag() renders an <img class="smb-photo …"> when a photo
   exists and the hatch <div>/<span> when it does not, so every slot keeps
   its frame rule (.smb-listing__photo height etc.) and swaps only the
   content. An <img> has no ::after, so the label never paints over a photo. */
img.smb-photo {
  display: block;
  width: 100%;
  /* NO height here: each frame's own rule (.smb-note__photo 196px,
     .smb-listing__photo 236px, .smb-journal-card__photo 212px, …) sizes the
     image exactly as it sized the hatch. A generic height:100% outranked
     those (img.smb-photo is more specific than .smb-note__photo) and let a
     portrait photo render at full intrinsic height on the home page. */
  object-fit: cover;
  padding: 0;
  min-height: 0;
  background: var(--smb-color-hair, #e5dcc8);
}
/* Frames that had no fixed height for the hatch get one for a photo, so a
   portrait or a panorama cannot change the layout around it. */
img.smb-nbrow__photo  { height: 100%; min-height: 220px; max-height: 300px; }
.smb-about__mosaic img.smb-photo { height: 100%; }

/* §195 · CMS posts rendered through lx_demo_markdown() inside the journal
   measure: the same voice as the block-model posts, plus the constructs the
   content plan uses (h2/h3, lists, tables, blockquotes, links). */
.smb-post__md { font-size: 17px; line-height: 1.65; }
.smb-post__md h2 { font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 34px 0 10px; }
.smb-post__md h3 { font-family: var(--lx-font-sans, 'Bricolage Grotesque', sans-serif); font-size: 20px; font-weight: 600; margin: 26px 0 8px; }
.smb-post__md p { margin: 0 0 18px; }
.smb-post__md ul, .smb-post__md ol { margin: 0 0 18px 22px; padding: 0; }
.smb-post__md li { margin: 0 0 6px; }
.smb-post__md blockquote { margin: 0 0 18px; padding: 10px 18px; border-left: 3px solid var(--lx-color-brand, #d4571f); color: var(--lx-color-ink-3, #6f6a5c); }
.smb-post__md a { color: var(--lx-color-brand, #d4571f); }
.smb-post__md .lx-md-table-wrap { margin: 0 0 22px; }
.smb-post__md table { width: 100%; border-collapse: collapse; font-size: 15px; }
.smb-post__md th, .smb-post__md td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--smb-color-hair, #e5dcc8); vertical-align: top; }
.smb-post__md th { font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lx-color-ink-3, #6f6a5c); }

/* §208 (PageSpeed accessibility): links inside prose must not rely on colour alone. */
.smb-owner__note a, .smb-note__body a, .smb-prose a, .smb-post__md a, .smb-hero__lede p a { text-decoration: underline; text-underline-offset: 2px; }

/* §208: the property page gallery sat flush under the header (owner: "no space at the top of the images"). */
#lx-hero { margin-top: 28px; }
@media (max-width: 720px) { #lx-hero { margin-top: 16px; } }

/* §210: the skin's global `img { display: block }` (line ~300) stacked the
   envelope/pin icons ABOVE their labels in the property-page meta row
   (#top-links, plugin/templates/unit.php). Inline them there. */
.lx-unit #top-links img, #top-links img { display: inline-block; vertical-align: middle; }

/* ═══════════════════════════════════════
   §211 · Neighbourhood stay bar + dated cards
   One row above "Cabins in …": the skin's field styles, the orange button.
   Booked cabins stay in the grid, muted, so nothing reflows.
   ═══════════════════════════════════════ */
.smb-datebar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px;
  margin: 0 0 26px; padding: 18px 20px;
  border: 1px solid var(--lx-color-line, #ddd4c0);
  background: var(--smb-color-surface, #fbf8f2);
}
.smb-datebar__dates { flex: 1 1 260px; }
.smb-datebar__guests { flex: 0 0 110px; }
.smb-datebar .smb-field__input { width: 100%; }
.smb-datebar__go { align-self: flex-end; }
.smb-datebar__clear {
  align-self: flex-end; padding: 10px 0;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--smb-color-ink-3, #6f6a5c);
}
.smb-datebar__note {
  margin: -12px 0 22px;
  font-family: var(--smb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--smb-color-ink-3, #6f6a5c);
}
.smb-listing--booked { opacity: .55; }
.smb-listing--booked:hover { border-color: var(--lx-color-line, #ddd4c0); }
.smb-listing__price--booked { color: var(--smb-color-ink-3, #6f6a5c); font-weight: 500; }
.smb-listing__price--dated:not(.is-priced) { color: var(--smb-color-ink-3, #6f6a5c); font-weight: 500; font-size: 15px; }
.smb-listing__price--dated .smb-listing__unit { font-size: 12px; }
@media (max-width: 720px) {
  .smb-datebar { padding: 14px; gap: 12px; }
  .smb-datebar__guests { flex: 1 1 100px; }
  .smb-datebar__go { width: 100%; }
}

/* §213 · contact: stored-message state, the map frame, and the home proof strip */
.smb-notice--ok { border-color: var(--lx-color-brand, #d4571f); }
.smb-notice--ok .smb-notice__title { color: var(--smb-color-brand-text, #b3441a); }
.smb-map { position: relative; overflow: hidden; }
.smb-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.smb-map::before { display: none; }
/* Only client-supplied cells render (rule 9); the strip fits however many there are. */
.smb-proof { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }