/*----------------------------------------------------------------
  Mile Away Stowe — Shared, fluid type scale
  Unifies several one-off heading/eyebrow sizes that served the
  same visual role but drifted to different classes/px values with
  stepped (non-fluid) breakpoints. Loads after main.css so these
  overrides win by cascade order; nothing in main.css is deleted
  or modified. Font-size is the only property changed per class
  unless noted — weight/color/family/margins are left as authored.
------------------------------------------------------------------*/

:root {
  --fs-hero:          clamp(40px, 14.5px + 6.8vw, 145px);  /* page hero title (index) */
  --fs-hero-alt:       clamp(44px, 24px + 5.25vw, 125px);   /* page hero title (about/faq/gallery/guestguide/contact/accessibility) */
  --fs-section-title:  clamp(24px, 20px + 1vw, 40px);        /* new sub-section heading tier */
  --fs-eyebrow:        clamp(14px, 12px + 0.52vw, 22px);     /* small uppercase "eyebrow" labels */
}

/* ---------------------------------------------------------------
   Hero titles.
   Today these are 4-5 unrelated classes at 4-5 fixed sizes
   (65-220px depending on class/breakpoint), each stepped across
   its own handful of breakpoints rather than scaling fluidly.
   Unify them onto the shared scale (index's title is the site's
   single largest statement and keeps its own --fs-hero; every
   other page-hero role converges on --fs-hero-alt, including
   gallery's previously-oversized 220px .fs-220 variant, per
   explicit design decision).
------------------------------------------------------------------*/
.tp-hero-title {
  font-size: var(--fs-hero);
  letter-spacing: -0.03em; /* was commented out in main.css, silently inheriting body's loose +0.1em tracking */
}
.ab-inner-hero-title,
.tm-hero-title,
.tm-hero-title.fs-220,
.tm-hero-title-big,
.sv-hero-title {
  font-size: var(--fs-hero-alt);
}
/* .ab-inner-hero-title (-4px) and .tm-hero-title.fs-220 (-8.8px) had
   fixed-px letter-spacing in main.css tuned for their old, much
   larger font-sizes (125px / 220px). At the shared fluid scale's
   smaller end those fixed values become wildly disproportionate
   (e.g. -8.8px at a ~44px render size overlaps the letters
   entirely), so they're reset to a size-relative em value here. */
.ab-inner-hero-title,
.tm-hero-title.fs-220 {
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------
   Eyebrow / label text.
   4 unrelated classes served this identical small-uppercase-label
   role at 4 different sizes (12/16/22/22px), 3 of them with zero
   responsive behavior at all (flat size on every viewport).
------------------------------------------------------------------*/
.ab-about-category-title,
.service-details__subtitle,
.tm-hero-subtitle,
.tp-about-5-subtitle {
  font-size: var(--fs-eyebrow);
}
/* .ab-about-category-title wraps its visible text in a nested
   <span> that carries its own more specific 24px rule in main.css
   and would otherwise win over the parent-level override above. */
.ab-about-category-title span {
  font-size: var(--fs-eyebrow);
}

/* ---------------------------------------------------------------
   New sub-section heading tier + guest-guide fix.
   mileaway-guestguide.html reused the full-size .sv-hero-title
   class (with an inline style="font-size:2.4rem" override that
   never responds to any breakpoint) for 3 in-page sub-headers
   ("Insider Tips", "Outdoor Activities", "Restaurant Recs")
   instead of a real subheading class. The HTML has been updated
   to use this class instead, with the inline style removed.
------------------------------------------------------------------*/
.sv-subsection-title {
  font-size: var(--fs-section-title);
  font-family: var(--tp-ff-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
   Guest-guide intro paragraph font-family fix.
   The page's other body paragraphs (.service-details__left-text
   .text-1) already correctly use the theme's custom Gill Sans
   webfont (--tp-ff-gill-sans). This specific intro paragraph
   instead hardcodes a plain system "Gill Sans" font stack, so the
   two read as different typefaces on the same page.
------------------------------------------------------------------*/
.service-details__banner-text p {
  font-family: var(--tp-ff-gill-sans);
}

/* ---------------------------------------------------------------
   Gallery grid section labels ("Outside", "Main House", "Guest
   House"). .tp_title_anim is a pure JS animation hook with no CSS
   of its own; on these bare <h5> elements it was silently falling
   through to an unrelated global h1-h6 fluid clamp() fallback
   (18-20px) by accident. Scoped to h5 specifically — this class is
   also used on <p>/<div> elements elsewhere on the site with their
   own more specific styling, which must stay untouched.
------------------------------------------------------------------*/
h5.tp_title_anim {
  font-size: var(--fs-eyebrow);
  font-family: var(--tp-ff-heading);
  line-height: 1.3;
}