/* ═══════════════════════════════════════════════════════════════════
 * HOMADIC — brand.css · APOTHECARY
 *
 * Canonical brand tokens from the Homadic Brand System (Direction A).
 * Aesop-austere editorial restraint, single-colour brand system.
 *
 *   Paper  (#EDE7D9)  = oat paper canvas. Warmer/darker than sand cream.
 *   Carbon (#1C1B16)  = primary text. Warm near-black.
 *   Green  (#00907D)  = the ONLY brand colour. Anchored on the mark.
 *                       Used for CTAs, links, eyebrow dots, every accent.
 *   Mint   (#9FD6C9)  = reserved exclusively for the mark's accent petal.
 *                       "Single point of warmth" — not used elsewhere.
 *
 *   EB Garamond     = display, wordmark, AND all serif headings
 *   DM Sans         = body + UI (the workhorse)
 *   JetBrains Mono  = labels + eyebrows + tabular data
 *
 * ITALICS: removed throughout per brand direction. All <em> accents
 * inside headings render upright. Italic Lora/Garamond on lead paragraphs
 * also forced to normal.
 *
 * One colour. No warm secondary. No editorial italics. The system is
 * Apothecary minimal — type and restraint do the work.
 * ═══════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=EB+Garamond:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ──────────────────────────────────────────────────────────────────
 * PALETTE PRIMITIVES — Apothecary
 * ────────────────────────────────────────────────────────────────── */
:root {
  /* Paper · the canvas. Updated from oat (#ede7d9) to a clean off-
     white so the site reads brighter and less "warm cream". The
     darker `--surface-2` is the sand panel used between paper and
     ink — matches the historic --soft (#f4eee2) so every "sand"
     surface (.offerStrip / .standard / .hostStrip) lines up. */
  --paper:    #fbfaf7;
  --paper-2:  #f4f1ea;
  --surface:  #f8f6f1;
  --surface-2:#f4eee2;

  /* Carbon · the ink */
  --ink:       #1c1b16;
  --ink-soft:  #3a382f;
  --muted:     #6b6557;
  --subtle:    #968f7e;

  /* Hairlines */
  --line:        #dbd3c2;
  --line-strong: #c8bea7;

  /* Green · the only colour */
  --green:       #00907d;
  --green-deep:  #0a5f53;
  --green-700:   #0a4a41;
  --green-tint:  #deeee8;
  --mint:        #9fd6c9;        /* reserved for the mark's accent petal */

  /* Forest · the dark band surface. Black with green blood in it —
   * dark sections (cities band, footer, closers) sit on this instead
   * of generic near-black, so the brand carries through the dark
   * moments too. */
  --forest:      #0f1e19;
  --band:        var(--forest);

  /* Semantic hue aliases — green doubles as the brand AND the accent */
  --accent:      var(--green);
  --accent-ink:  var(--green-deep);
  --accent-tint: var(--green-tint);

  /* ──────────────────────────────────────────────────────────────
   * SEMANTIC ROLES · LIGHT
   * ────────────────────────────────────────────────────────────── */
  --bg:            var(--paper);
  --text:          var(--ink);
  --text-muted:    var(--muted);
  --text-subtle:   var(--subtle);

  --border:        var(--line);
  --border-strong: var(--line-strong);

  --brand:         var(--green);
  --brand-strong:  var(--green-deep);
  --brand-ink:     var(--green-deep);
  --brand-hover:   var(--green-700);
  --brand-tint:    var(--green-tint);
  --on-brand:      #ffffff;

  --accent-strong: var(--green-deep);
  --on-accent:     #ffffff;

  --focus:         var(--green);

  /* Danger · errors + destructive actions. ONE red for the whole site —
   * an earthy brick that sits naturally in the warm paper palette
   * (replaces the six ad-hoc reds that had accumulated per-page). */
  --danger:      #b3402e;
  --danger-deep: #8a2f22;
  --danger-tint: #f8e9e5;
  --on-danger:   #ffffff;

  /* Motion · one easing curve + two speeds. Every transition on the
   * site should reach for these instead of inventing its own. */
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-med:  0.28s;

  --shadow-sm: 0 1px 2px rgba(28, 27, 22, 0.06), 0 1px 1px rgba(28, 27, 22, 0.04);
  --shadow-md: 0 4px 14px rgba(28, 27, 22, 0.08), 0 2px 4px rgba(28, 27, 22, 0.05);
  --shadow-lg: 0 18px 48px rgba(28, 27, 22, 0.14), 0 4px 12px rgba(28, 27, 22, 0.07);

  /* ──────────────────────────────────────────────────────────────
   * SPACING + RADIUS
   * ────────────────────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px; --sp-8: 72px; --sp-9: 112px;

  --r-xs:   6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ──────────────────────────────────────────────────────────────
   * TYPOGRAPHY — Apothecary is editorial. EB Garamond does display +
   * wordmark. DM Sans is the workhorse. No Averia Serif Libre.
   * ────────────────────────────────────────────────────────────── */
  --font-display:  "EB Garamond", Georgia, serif;
  --font-wordmark: "EB Garamond", Georgia, serif;  /* same as display */
  --font-body:     "DM Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ──────────────────────────────────────────────────────────────
   * LEGACY VARIABLE SHADOWING
   * Every per-page selector referencing var(--paper), var(--ivory),
   * var(--soft), var(--sand), var(--hairline), var(--accent),
   * var(--lora), var(--inter), var(--mono) picks up the Apothecary
   * tokens automatically via these aliases.
   * ────────────────────────────────────────────────────────────── */
  --ivory:         var(--paper);
  --soft:          var(--surface-2);
  --sand:          var(--surface-2);
  --hairline:      var(--line);
  --hairline-soft: var(--line);
  --body:          var(--ink-soft);
  --accent-hover:  var(--green-deep);

  --lora:  var(--font-display);
  --inter: var(--font-body);
  --sans:  var(--font-body);   /* alias used by individuallisting/notcertified */
  --mono:  var(--font-mono);
}

/* ──────────────────────────────────────────────────────────────────
 * BODY DEFAULTS
 * ────────────────────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

::selection {
  background: rgba(0, 144, 125, 0.18); /* green tint */
  color: var(--text);
}

/* ──────────────────────────────────────────────────────────────────
 * ITALICS OFF — Apothecary direction reads better with all-roman
 * setting. Italic <em> accents inside headings (the "Curated stays"
 * pattern), italic Lora/Garamond on lead paragraphs, and any utility
 * italic class all forced to upright.
 * ────────────────────────────────────────────────────────────────── */
em,
i,
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.h1 em, .h2 em, .h3 em,
.heroH1 em, .closerTitle em,
.splitHeroH1 em, .stdH2 em,
.featStripTitle em, .offerStripTitle em,
.secHead h2 em,
.heroSub, .heroSub em,
.lead, .lead em,
.secLead, .secLead em,
.standardLead, .stdLead,
.pillarHead .nm,
.compareCard h3 em,
.pathCard em,
.sampleRow .roomCount,
.darkBandStat .num,
.navRight .acct .av {
  font-style: normal !important;
}

/* ──────────────────────────────────────────────────────────────────
 * TYPOGRAPHY OVERRIDES
 * Per-page rules own colour. We only set family + tracking here.
 * ────────────────────────────────────────────────────────────────── */

/* DISPLAY HEADINGS — EB Garamond Regular (400) with -5% tracking.
 * Hero headings (.heroH1, .closerTitle) keep Medium (500) for presence
 * at large scale; every other heading drops to Regular for editorial
 * restraint. */
h1, h2,
.h1, .h2,
.splitHeroH1, .stdH2,
.featStripTitle, .offerStripTitle,
.secHead h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: normal;
}
.heroH1, .closerTitle {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: normal;
}

/* WORKHORSE — DM Sans */
h3, h4, h5, h6,
.h3,
.heroSub,
.lead,
.secLead,
.standardLead,
.stdLead {
  font-family: var(--font-body);
  letter-spacing: -0.01em;
  font-weight: 500;
}

/* PRICES — EB Garamond Regular, tabular figures. Sits at 400 to match
   the heading scale (everything in the display family now reads at one
   weight for visual coherence). */
.propCard .strip .price,
.listedCard .strip .price {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────
 * TYPE SCALE
 * ────────────────────────────────────────────────────────────────── */

.heroH1, .closerTitle {
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.05;
}
@media (max-width: 680px) {
  .heroH1, .closerTitle { font-size: 38px; }
}

.stdH2,
.secHead h2,
.offerStripTitle,
.splitHeroH1,
.hostStripInner h3 {
  font-size: 36px;
  line-height: 1.15;
}
@media (max-width: 880px) {
  .stdH2,
  .secHead h2,
  .offerStripTitle,
  .splitHeroH1,
  .hostStripInner h3 {
    font-size: 28px;
  }
}

.featStripTitle {
  font-size: 28px;
  line-height: 1.2;
}
@media (max-width: 880px) {
  .featStripTitle { font-size: 22px; }
}

.offerColTitle,
.pillarHead .nm,
.pathCardTitle,
.whyCard h3,
.howBody h3 {
  font-size: 20px;
  line-height: 1.25;
}

.heroSub,
.lead,
.secLead,
.standardLead,
.stdLead {
  font-size: 18px;
  line-height: 1.5;
}
@media (max-width: 880px) {
  .heroSub,
  .lead,
  .secLead,
  .standardLead,
  .stdLead {
    font-size: 16px;
  }
}

.offerColBody,
.pillarBody,
.hostBenefits p {
  font-size: 15px;
  line-height: 1.6;
}

/* ──────────────────────────────────────────────────────────────────
 * NAV BRAND — Homadic wordmark in EB Garamond (display font), no
 * separate wordmark family. The "Apothecary" direction unifies
 * display + wordmark for editorial consistency.
 * ────────────────────────────────────────────────────────────────── */
.brand .word {
  font-family: var(--font-wordmark);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.015em;
  line-height: 0.95;
  /* Wordmark in brand green — single-colour Apothecary system makes
   * the green the brand's visual signature (Aesop's olive, Kindred's
   * sage). Carbon ink was reading as a heavy black slab. */
  color: var(--brand);
}
.brand .brandMark {
  /* Matched to the wordmark size — the two read as one lockup rather
   * than the mark dominating. */
  width: 30px;
  height: 30px;
  display: block;
}
@media (max-width: 880px) {
  .brand .word { font-size: 25px; }
  .brand .brandMark { width: 25px; height: 25px; }
}

/* Two-variant mark swap based on nav state */
.brand .brandMark--light { display: none; }
body.nav-transparent:not(.nav-scrolled) .brand .brandMark--dark { display: none; }
body.nav-transparent:not(.nav-scrolled) .brand .brandMark--light { display: block; }

/* Over hero photo, wordmark flips to the lightest paper tint */
body.nav-transparent:not(.nav-scrolled) .brand .word {
  color: var(--surface);
}

/* ──────────────────────────────────────────────────────────────────
 * FOOTER — canonical .footerSocial styles. Several info pages (our-
 * standard, listed-vs-certified, operator-certification) didn't have
 * these in their per-page <style>, so the social icons exploded.
 * Living here means every page using the canonical footer markup gets
 * working social-icon styling automatically.
 * ────────────────────────────────────────────────────────────────── */
.footerSocial {
  margin-top: 18px;
  display: flex;
  gap: 8px;
}
.footerSocial a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(251, 246, 236, .2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(251, 246, 236, .6);
  transition: color .15s, border-color .15s, background .15s;
}
.footerSocial a:hover {
  color: var(--paper);
  border-color: rgba(251, 246, 236, .4);
  background: rgba(251, 246, 236, .05);
}
.footerSocial a svg,
.footerSocial a i {
  width: 15px;
  height: 15px;
  stroke-width: 1.6;
}

/* Footer brand mark sits on the dark footer surface — use the LIGHT
 * variant (cream petals) here. Wordmark goes to paper cream too. */
.footer .brand .brandMark--dark { display: none; }
.footer .brand .brandMark--light { display: block; }
.footer .brand .word { color: var(--paper); }

/* ──────────────────────────────────────────────────────────────────
 * INTERACTION LAYER — the quiet details that read as "finished".
 * Owned here so every page gets them without per-page wiring.
 * ────────────────────────────────────────────────────────────────── */

/* Text selection in the brand tint — one of those micro-signals that
 * a site was designed on purpose. Overrides the per-page rgba() copies. */
::selection {
  background: var(--green-tint);
  color: var(--ink);
}

/* Keyboard focus — visible, branded, and only for keyboard users
 * (:focus-visible skips mouse clicks, so no ring flash on tap). */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Inputs draw their own focused border; soften the ring to a halo so
 * the two treatments don't double up. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 144, 125, 0.18);
}

/* Buttons acknowledge the press — 1px settle, no bounce. */
button:active,
.btn:active,
a[class*="Cta"]:active,
a[class*="Btn"]:active {
  transform: translateY(1px);
}
/* …but never inside form fields or on disabled controls. */
button:disabled:active { transform: none; }

/* Arrow icons nudge forward when their control is hovered — a small
 * promise of motion on every "go somewhere" affordance. (Lucide swaps
 * <i data-lucide> for an <svg class="lucide lucide-arrow-right">.) */
.lucide-arrow-right,
.lucide-arrow-up-right {
  transition: transform var(--dur-fast, 0.15s) var(--ease, ease);
}
a:hover .lucide-arrow-right,
button:hover .lucide-arrow-right {
  transform: translateX(3px);
}
a:hover .lucide-arrow-up-right,
button:hover .lucide-arrow-up-right {
  transform: translate(2px, -2px);
}