/* ==============================================
   shared.css — Declutter with Compassion
   ============================================== */

/* =====================
   WEBFONTS
   =====================
   Self-hosted, not loaded from Google. Three variable files cover every weight
   and style the site uses, latin subset only:

     cormorant-garamond-var.woff2         37 KB   300-500 roman
     cormorant-garamond-italic-var.woff2  38 KB   300-400 italic
     dm-sans-var.woff2                    61 KB   400-700

   Serving them from our own domain removes the render-blocking request to
   fonts.googleapis.com and the chained connection to fonts.gstatic.com behind
   it. It also lets the pages preload these three files, which is what makes
   `font-display: optional` affordable: optional gives a font roughly 100ms to
   arrive or it sits out that pageview, and a preloaded same-origin file wins
   that race where a two-hop third-party request often did not.

   `optional` is deliberate — it is what holds layout shift at 0. Do not change
   it to `swap` without re-measuring; swap is what put 0.21 shift on the contact
   page. See FONT FALLBACKS below for the other half of that fix. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: optional;
  src: url('/fonts/cormorant-garamond-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: optional;
  src: url('/fonts/cormorant-garamond-italic-var.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('/fonts/dm-sans-var.woff2') format('woff2');
}

/* =====================
   FONT FALLBACKS
   =====================
   Cormorant Garamond and DM Sans used to load with `display=swap`: text painted
   in a system font, then re-flowed when the webfont arrived. On the contact page
   that re-flow moved the form 139px down the screen — 0.21 cumulative layout
   shift, twice Google's 0.10 limit — as someone was reaching for it.

   The fix is two parts, and both are needed:

   1. The page links now ask for `display=optional`, so a webfont that misses its
      ~100ms window sits out that pageview entirely instead of swapping in late.
      That is what takes layout shift to a measured 0 on all seven pages; metric
      overrides alone got it nowhere, because a 4% width error still re-wraps
      headings into different line counts.
   2. These faces re-cut the system fallbacks to the webfonts' own metrics, so
      the pageviews that do fall back still look like the brand rather than like
      Georgia. This is what makes part 1 affordable.

   Values are (metric ÷ unitsPerEm ÷ size-adjust), measured from the woff2 files
   Google serves and from Capsize's metrics for the fallbacks:

     Cormorant Garamond  asc 924  desc -287  gap 0  xWidthAvg 392  (upm 1000)
     DM Sans             asc 992  desc -310  gap 0  xWidthAvg 471  (upm 1000)
     Georgia / Arial     xWidthAvg 913 (upm 2048)

   If either font is ever swapped out, recompute these — stale overrides are
   worse than none. */
@font-face {
  font-family: 'Cormorant Fallback';
  src: local('Georgia');
  size-adjust: 87.93%;
  ascent-override: 105.08%;
  descent-override: 32.64%;
  line-gap-override: 0%;
}
/* Georgia is absent on Android and most Linux. Times New Roman is a different
   width, so it needs its own numbers rather than Georgia's. */
@font-face {
  font-family: 'Cormorant Fallback';
  src: local('Times New Roman'), local('Liberation Serif');
  size-adjust: 96.49%;
  ascent-override: 95.76%;
  descent-override: 29.74%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 105.65%;
  ascent-override: 93.89%;
  descent-override: 29.34%;
  line-gap-override: 0%;
}

/* =====================
   DESIGN TOKENS
   ===================== */
:root {
  /* Palette */
  --cream:       #F8F5F0;
  --sage-pale:   #ECF1ED;
  --sage:        #7B9E87;
  /* AA-compliant sage for TEXT. --sage stays for dots, icons, borders and fills. */
  --sage-text:   #4E7460;  /* 5.14:1 on --warm-white, 4.84:1 on --cream */
  --sage-light:  #A9C7B4;  /* 5.36:1 on --forest, for text on dark sections */
  --forest:      #2D4A38;
  --charcoal:    #2C2C2C;
  --warm-white:  #FEFCFA;
  --blush:       #E8A0B0;
  --blush-dark:  #C97A8E;
  --muted:       #6B6B6B;
  --border:      #DDD8D0;

  /* Kept for backward-compat with HTML files that reference var(--amber) */
  --amber:       #E8A0B0;
  --amber-dark:  #C97A8E;

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  --font-body:    'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;

  /* Layout */
  --max-w:       1100px;
  --pad-x:       24px;
  --section-pad: 96px;
  --radius:      3px;
}

/* =====================
   RESET
   ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--warm-white);
  color: var(--charcoal);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); }

/* =====================
   UTILITIES
   ===================== */
.container { max-width: var(--max-w); margin: 0 auto; }

.section-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--forest);
}
.section-title em { font-style: italic; }
.section-sub {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.75;
  margin-top: 14px;
  max-width: 580px;
}

/* =====================
   BUTTONS
   ===================== */

/*
 * Blush button — dark charcoal text on blush at all states.
 * #2C2C2C on #E8A0B0 = 9.6:1  ✓  (WCAG AAA)
 * #2C2C2C on #C97A8E = 5.7:1  ✓  (WCAG AA)
 * On hover the bg shifts to forest and text flips white:
 * white on #2D4A38 = 8.5:1    ✓  (WCAG AAA)
 */
.btn-amber {
  display: inline-block;
  background: var(--blush);
  color: var(--charcoal);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 15px 36px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background 0.22s, color 0.22s, transform 0.15s;
}
.btn-amber:hover {
  background: var(--forest);
  color: white;
  transform: translateY(-1px);
}
/*
 * On forest grounds the default forest hover would swallow the button into the
 * background, so it lifts to white instead. Same treatment as .sbar-schedule:hover,
 * which is the same blush button on the forest sticky bar.
 * forest on white = 9.55:1; white on the forest ground = 9.78:1.
 * NOTE: do not use --blush-dark as the hover here — charcoal on it is 4.43:1,
 * which fails AA at the 14px bold label size.
 */
.guide .btn-amber:hover,
.final-cta .btn-amber:hover,
.process-mini .btn-amber:hover,
.blog-cta .btn-amber:hover,
.ebook-cta-strip .btn-amber:hover,
.ty-next .btn-amber:hover {
  background: #FFFFFF;
  color: var(--forest);
}

/* DE-RISK MICRO-COPY */
.de-risk {
  display: block;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.05em;
  margin-top: 10px;
}
.de-risk-dark {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-top: 10px;
}

/* Inline text link inside body copy. Replaces hand-rolled inline colour,
   which BRAND.md bans -- and which duplicated Tier 1's values on an anchor. */
.inline-link {
  color: var(--forest);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.2s;
}
.inline-link:hover { border-bottom-color: var(--forest); }
/* Same, on forest grounds. --sage-light is 5.36:1 there; --forest would vanish. */
.inline-link-light {
  color: var(--sage-light);
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  transition: border-color 0.2s;
}
.inline-link-light:hover { border-bottom-color: var(--sage-light); }

/* =====================
   EMPHASIS SYSTEM  (site-wide — see BRAND.md "Emphasis (body copy)")
   Tier 1 <strong>: weight 600 + a colour shift. One per paragraph; in a
   parallel card grid, one per card.
   Tier 2 strong.mark: a sage wash behind the lower part of the line. One per
   section, LIGHT GROUNDS ONLY.
   Never in a heading, a client quote, or Tiffany's mission quote.

   The colour is carried by --emph rather than by a second selector list, so a
   dark section opts in by setting one token on itself and every <strong> it
   contains — however deeply nested — inherits it. Adding a dark section means
   adding it to the list below, nothing else.

   Weight 600, never 700: 700 goes blocky next to Cormorant and competes with
   .section-eyebrow.
   ===================== */
:root { --emph: var(--forest); }

strong { font-weight: 600; color: var(--emph); }

/* Dark grounds. Verified against every `background: var(--forest)` rule in the
   codebase — note .about-cta and .page-cta are CREAM and are deliberately not
   here. */
.page-hero,
.sticky-bar,
.guide,
.final-cta,
.promo-banner,
.about-testimonials,
.process-mini,
.area-virtual,
.pricing-card.featured,
.derisk-bar,
.contact-cta-strip,
.blog-cta,
.ebook-cover,
.ebook-cta-strip,
.ty-next { --emph: #FFFFFF; }

strong.mark {
  background-image: linear-gradient(transparent 62%, rgba(123,158,135,0.34) 62%);
  padding: 0 0.14em;
  margin: 0 -0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Contrast on forest is unauditable and the white/600 treatment already
   carries the weight there, so the wash is off on dark grounds. Keyed to the
   same token, so it switches off wherever --emph went white. */
.page-hero strong.mark,
.guide strong.mark,
.final-cta strong.mark,
.promo-banner strong.mark,
.about-testimonials strong.mark,
.process-mini strong.mark,
.area-virtual strong.mark,
.pricing-card.featured strong.mark,
.contact-cta-strip strong.mark,
.blog-cta strong.mark,
.ebook-cta-strip strong.mark,
.ty-next strong.mark { background-image: none; }

/* =====================
   NAV
   ===================== */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(254,252,250,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--pad-x);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--forest);
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-logo-mark {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
@media (max-width: 430px) {
  .nav-logo { font-size: 1.05rem; gap: 7px; }
  .nav-logo-mark { width: 30px; height: 30px; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav-links a {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--forest); }
.nav-links a.active { color: var(--forest); }

/*
 * Nav CTA pill — mirrors .btn-amber behaviour.
 * Blush bg, dark text at rest → forest bg, white text on hover.
 */
.nav-links .nav-cta {
  background: var(--blush);
  color: var(--charcoal) !important;
  padding: 9px 22px;
  border-radius: var(--radius);
  font-weight: 700 !important;
  transition: background 0.22s, color 0.22s;
}
.nav-links .nav-cta:hover {
  background: var(--forest);
  color: white !important;
}

/* =====================
   HAMBURGER
   ===================== */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.hamburger span {
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  display: block;
  transition: opacity 0.2s;
}

/* =====================
   MOBILE MENU
   ===================== */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--warm-white);
  padding: 90px var(--pad-x) 40px;
  flex-direction: column;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--forest);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  transition: color 0.2s;
}
.mobile-menu a:hover { color: var(--blush-dark); }
.mobile-menu a.mob-cta {
  color: var(--blush-dark);
  border-bottom: none;
  margin-top: 12px;
  font-weight: 500;
}
.mobile-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--charcoal);
  line-height: 1;
}

/* =====================
   STICKY MOBILE BAR
   ===================== */
.sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--forest);
  /* tighter than the page gutter on purpose: the extra room is what lets the
     CTA label hold full size on a normal phone instead of shrinking */
  padding: 10px 16px;
  gap: 8px;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
}
/* Both buttons stay exactly the same width and height at every viewport.
   The CTA label is long, so the type scales with the viewport instead of
   wrapping — `min-width: 0` lets the flex items split evenly regardless of
   content width, and `nowrap` keeps each label on one line. */
.sticky-bar a {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid transparent;   /* keeps both buttons identical in size */
  text-align: center;
  padding: 13px 6px;
  border-radius: var(--radius);
  /* Derived from the real constraint, not guessed: each button gets
     (100vw - 40px)/2 minus 14px of padding+border, and this label renders at
     ~11.9px of width per 1px of font-size. Below ~380px it steps down rather
     than wrapping; above that it sits at the full 0.82rem. */
  font-size: clamp(0.6rem, calc(4.15vw - 3.2px), 0.82rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.sbar-call {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  color: white;
  border-color: rgba(255,255,255,0.18);
}
/* icon scales with the label so the pairing holds at every size */
.sbar-call svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.sbar-call:hover { background: rgba(255,255,255,0.18); }
/* Blush bg, dark text — matches btn-amber */
.sbar-schedule {
  background: var(--blush);
  color: var(--charcoal);
  font-weight: 700;
}
.sbar-schedule:hover { background: white; color: var(--forest); }

/* =====================
   PAGE HERO (inner pages)
   ===================== */
.page-hero {
  background: var(--forest);
  padding: 80px var(--pad-x) 72px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,160,176,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .section-eyebrow { color: var(--blush); margin-bottom: 12px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.15;
  color: white;
  max-width: 720px;
}
.page-hero h1 em { font-style: italic; color: rgba(255,255,255,0.78); }
.page-hero .hero-sub {
  color: rgba(255,255,255,0.62);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 520px;
  margin-top: 14px;
}
.page-breadcrumb {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-breadcrumb a { color: rgba(255,255,255,0.38); transition: color 0.2s; }
.page-breadcrumb a:hover { color: rgba(255,255,255,0.7); }
.page-breadcrumb span { color: rgba(255,255,255,0.22); }

/* =====================
   FOOTER
   ===================== */
footer {
  background: #1C1C1C;
  color: rgba(255,255,255,0.52);
  padding: 60px var(--pad-x) 36px;
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 28px;
}
.footer-brand .brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: white;
  font-weight: 500;
  display: block;
  margin-bottom: 12px;
}
.footer-brand p { font-size: 0.875rem; line-height: 1.7; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  transition: border-color 0.2s, color 0.2s;
}
.footer-social a:hover { border-color: var(--blush); color: var(--blush); }
.footer-col h4,
.footer-col .footer-col-h {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: white;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { font-size: 0.875rem; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--blush); }
.footer-col p { font-size: 0.875rem; line-height: 1.72; }
.footer-col .contact-link { color: rgba(255,255,255,0.52); transition: color 0.2s; }
.footer-col .contact-link:hover { color: var(--blush); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  flex-wrap: wrap;
  gap: 8px;
}

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 900px) {
  :root { --section-pad: 64px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .sticky-bar { display: flex; }
  body { padding-bottom: 68px; }
}
@media (max-width: 540px) {
  :root { --section-pad: 48px; }
  .page-hero { padding: 56px var(--pad-x) 52px; }
}

/* Tablet: keep card grids two-up instead of collapsing fully to one column */
@media (min-width: 700px) and (max-width: 900px) {
  .steps, .success-grid,
  .spec-grid, .mini-steps, .pricing-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Offset anchored sections so their headings clear the sticky nav on jump */
section[id], #booking { scroll-margin-top: 86px; }

/* =====================
   FAQ ACCORDION
   ===================== */
.faq-a {
  display: block;
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  background: var(--cream);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.75;
  transition: max-height 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-a.open {
  max-height: 520px;
  padding: 4px 22px 20px;
}

/* =====================
   ANIMATIONS
   ===================== */

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  .hero-eyebrow, .hero h1, .hero-desc, .hero-actions,
  .page-hero .container { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Scroll reveal base — applied via JS so noscript users see everything */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero entrance — page load animation */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow { animation: heroUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.15s both; }
.hero h1      { animation: heroUp 0.75s cubic-bezier(0.16,1,0.3,1) 0.3s both; }
.hero-desc    { animation: heroUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.45s both; }
.hero-actions { animation: heroUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.6s both; }

/* Page-hero (inner pages) entrance */
@keyframes pageHeroIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero .container { animation: pageHeroIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.1s both; }

/* Card hover lifts — light cards */
.quote-card,
.success-card,
.spec-card,
.proof-item {
  transition: transform 0.22s ease-out, box-shadow 0.22s ease-out;
}
.quote-card:hover,
.success-card:hover,
.spec-card:hover,
.proof-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 44px rgba(0,0,0,0.09);
}
/* Card hover lifts — dark cards (no shadow, .t-card {
  transition: transform 0.22s ease-out, border-color 0.22s ease-out;
}
.t-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.18);
}

/* Pricing cards */
.pricing-card {
  transition: transform 0.22s ease-out, box-shadow 0.22s ease-out;
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 44px rgba(0,0,0,0.09);
}
.pricing-card.featured:hover {
  box-shadow: 0 14px 44px rgba(0,0,0,0.22);
}

/* Pain items — subtle shadow on hover */
.pain-item {
  transition: box-shadow 0.22s ease-out;
}
.pain-item:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}

/* Portrait before/after sources cropped into a landscape pane: bias the crop
   downward so the floor — the part that actually shows the change — stays in
   shot. Both halves of a pair must share a value or they stop being comparable. */
.ba-lower { object-position: center 70%; }

/* Before/after image scale (.ba-set = about page, .before-after = homepage) */
.ba-set img,
.before-after img {
  transition: transform 0.4s ease-out;
}
.ba-set:hover img,
.before-after:hover img {
  transform: scale(1.02);
}
.before-after .ba-pane { overflow: hidden; }

/* Nav scroll shadow */
nav {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
nav.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.07);
  border-bottom-color: rgba(221,216,208,0.6);
}

/* =====================
   BLOG POSTS
   =====================
   Long-form reading column for the three migrated posts in /blog/. Measure is
   held near 68 characters — comfortably inside the 720px the rest of the site
   uses for prose — because these run to 1,700 words and line length is what
   makes that readable. */
.post-measure { max-width: 680px; }

.post-hero h1 { max-width: 20ch; }
.post-meta {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.72);
}

.post-body { padding: 56px 0 72px; background: var(--warm-white); }
.post-body p {
  margin: 0 0 22px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--charcoal);
}
.post-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--forest);
  margin: 52px 0 16px;
  /* Cormorant defaults to old-style figures, which renders "Game 1" as what
     reads like "Game I" — actively confusing next to a heading called "I Spy".
     The font ships an lnum feature; use it. */
  font-variant-numeric: lining-nums;
}
.post-body .post-subhead {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin: 34px 0 12px;
}
.post-body ul, .post-body ol {
  margin: 0 0 24px;
  padding-left: 1.25rem;
  color: var(--charcoal);
}
.post-body li {
  margin-bottom: 10px;
  font-size: 1.02rem;
  line-height: 1.75;
}
.post-body ul { list-style: none; padding-left: 0; }
.post-body ul > li {
  position: relative;
  padding-left: 26px;
}
.post-body ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
}
.post-body strong { font-weight: 600; color: var(--forest); }
/* Prose links must not rely on colour alone: --sage-text against --charcoal is
   2.65:1, under the 3:1 WCAG requires when colour is the only signal. Underline
   them — in running text that is the clearer affordance anyway. */
.post-body p a,
.post-body li a {
  color: var(--sage-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.post-body p a:hover,
.post-body li a:hover { color: var(--forest); }

/* Lead illustration sits full-measure above the first paragraph; inline ones
   break out slightly so the artwork has room to breathe. */
.post-lead, .post-figure { margin: 0 0 34px; }
.post-figure { margin: 34px 0; }
.post-lead img, .post-figure img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: var(--cream);
}
@media (min-width: 900px) {
  .post-figure { margin-left: -40px; margin-right: -40px; }
}