/* tokens.css - authoritative design tokens (:root) + heading reset, from live theme (et-core-unified). Loaded first so all var() refs resolve. */
/* Reset the UA body margin — the anchor-dental build got this from bootstrap/normalize,
   which the TMJ stack doesn't load; without it an 8px white gutter shows on both sides. */
html, body { margin: 0; padding: 0; }
/* Match live: clip horizontal overflow (e.g. the logo cert marquee) to the viewport.
   Deliberately set on <html> ONLY (2026-08-21). overflow-x on <body> makes the body a
   scroll container, which silently disables position:sticky for every descendant — it
   was why the Socials "Follow Us Online" rail would not stick. Clipping on <html> is
   what actually reaches the viewport, so the visual result is unchanged. */
html { overflow-x: hidden; }
:root{--cream:#f0e7dc;--cream-rgb:240,231,220;--dark:#153b37;--dark-mid:#1a4a45;--mid:#2a635c;--light:#3e857c;--lightest:#4a9e94;--accent:#e8a087;--accent-light:#f2c4b3;--accent-glow:rgba(232,160,135,0.4);--white:#ffffff;--off-white:#f8fafa;--gray-light:#e8eeee;--text-dark:#1a2e2b;--text-muted-dark:#4a5f5c;--text-light:#d4e5e2;--text-muted-light:rgba(212,229,226,0.6);--search-ring:var(--color-accent);--search-border:#e5e7eb;--search-shadow:0 8px 30px rgba(2,6,23,0.06);--radius:14px;--h-pad:1.1rem;--btn-bg:var(--color-accent);--btn-fg:#fff}
#page-container h1,#page-container h2,#page-container h3,#page-container h4,#page-container h5,#page-container h6{line-height:1em!important;padding-bottom:0px}
.accent-font{color:var(--light)!important;font-style:italic!important}
.under-text{font-size:.5em!important;line-height:.8em!important;display:block!important}
.center{text-align:center}
.white *{color:white}
.force-dark{color:var(--dark)!important}
/* ============================================================================
   HEADING SCALE  (added 2026-08-19)
   ----------------------------------------------------------------------------
   Every display heading on the site now takes its size from ONE of these five
   steps, so the whole scale is retuned here rather than in 49 scattered rules.

   The scale was reduced across all levels: at 1440px the H1 was rendering at
   72px and section titles at 56px against 16px body copy — a 4.5x ratio that
   made every band shout. Previous desktop maxima are noted per line.

   Each value is clamp(phone, fluid, desktop-max). Lower the third number to
   shrink the desktop end; lower the first to shrink phones.
   ============================================================================ */
:root{
	--h-display: clamp(2.2rem, 3.8vw, 3rem);     /* hero H1        was 72px -> 58px -> 48px (owner 2026-09-11) */
	--h-section: clamp(1.9rem, 3.4vw, 2.75rem);  /* section/CTA    was 56px -> 44px */
	--h-title:   clamp(1.75rem, 3vw, 2.4rem);    /* info/gallery   was 48px -> 38px */
	--h-sub:     clamp(1.15rem, 1.6vw, 1.35rem); /* sub-heading    was 23px -> 22px */
	--h-feature: clamp(1.35rem, 1.9vw, 1.5rem);  /* card headline  was 28px -> 24px */
	--h-card:    1.15rem;                        /* card titles    was 20px -> 18px */

	/* Editorial scale — headings inside an article body. */
	--h-post-2:  1.6rem;                         /* post h2        was 30px -> 26px */
	--h-post-3:  1.25rem;                        /* post h3        was 22px -> 20px */
	/* h4 is deliberately NOT reduced. At 18px against 16px body copy the
	   distinction is already slim; taking it to 17px would make a sub-heading
	   read as body text. The scale was top-heavy, not bottom-heavy. */
	--h-post-4:  1.125rem;                       /* post h4        18px, unchanged  */
}

/* Resolve tokens the live TMJ CSS references without a fallback (undefined on live too —
   inert on the visible pages, but defined here so they resolve to their intended values
   and css-sanity passes). Aliases to the existing brand tokens + search-field neutrals. */
:root{
  --color-accent: var(--accent);
  --color-dark: var(--dark);
  /* Used by the component CSS promoted out of per-page meta (.ac-card, .svc-*),
     which referenced these without ever defining them. Aliased to the existing
     brand tokens so they resolve to the same values the example rendered with. */
  --color-border: var(--gray-light);
  --color-button: var(--accent);
  --search-bg: #ffffff;
  --search-fg: var(--text-dark);
  --search-muted: var(--text-muted-dark);
}

/* ---- Content image shape (theme-wide) ------------------------------------------
   Every in-content photo (.s-imgwrap > img) gets its top-left and bottom-right corners
   carved off — owner 2026-10-01: "not just a straight square". Change the look here only:
   --img-notch is the cut size (0 turns it off); swap --img-shape for any other polygon. */
:root{
	--img-notch: clamp(18px, 2.4vw, 34px);
	--img-shape: polygon(var(--img-notch) 0, 100% 0, 100% calc(100% - var(--img-notch)),
		calc(100% - var(--img-notch)) 100%, 0 100%, 0 var(--img-notch));
}