/* ==========================================================================
   Tripster Developers type system (brand rule, 2026-09-24).
   Loaded LAST in shared/header.php so it wins over style.css and immersive.css.
   Headings: Outfit 400, tight tracking. Body: Inter 400. Source of truth:
   BRAND-GUIDELINES.md section 4.1. Kept as its own file on purpose: never append to style.css.
   ========================================================================== */

/* Outfit ships as ONE variable font (wght 100-900). style.css declares it as four fixed
   faces, which clamps any in-between weight to the nearest face. Declaring the full range
   here makes every weight render exactly as written. Same file, so no extra download. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/outfit-400.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 2026-09-30 (contact CWV): metric-matched fallbacks, same values as miko css/ed.css. If a web font arrives after
   first paint, the fallback already occupies the same line boxes, so the hero does not reflow on the swap.
   Liberation Sans / Arimo are Arial-metric clones (Linux, where Lighthouse runs); Roboto covers Android. */
@font-face{font-family:'Outfit Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Arimo'),local('Roboto');size-adjust:99.06%;ascent-override:100.95%;descent-override:26.25%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Arimo'),local('Roboto');size-adjust:107.13%;ascent-override:90.43%;descent-override:22.61%;line-gap-override:0%}

:root{
  --td-font-display:'Outfit','Outfit Fallback',system-ui,-apple-system,sans-serif;
  --td-font-body:'Inter','Inter Fallback',system-ui,-apple-system,sans-serif;
  --td-weight-display:400;   /* headings */
  --td-weight-sub:500;       /* small headings, card titles */
  --td-track-display:-.035em;
  --td-track-sub:-.015em;
}

body{font-family:var(--td-font-body);font-weight:400}

/* Page headings everywhere on the page. Header navigation and footer keep their own styles.
   Scoped by exclusion, not by <main>: many blog and app pages have no <main> element. */
:is(h1,h2,h3,.hero-title,.tdp-hero-title,.section-title,.cta-title):not(:where(.td-nav, .td-footer, footer, nav, [class*="td-mega"]) *){
  font-family:var(--td-font-display)!important;
  font-weight:var(--td-weight-display)!important;
  letter-spacing:var(--td-track-display)!important;
  line-height:1.06;
}
h3:not(:where(.td-nav, .td-footer, footer, nav, [class*="td-mega"]) *){letter-spacing:-.025em!important;line-height:1.15}
:is(h4,h5,h6):not(:where(.td-nav, .td-footer, footer, nav, [class*="td-mega"]) *){
  font-family:var(--td-font-display)!important;
  font-weight:var(--td-weight-sub)!important;
  letter-spacing:var(--td-track-sub)!important;
}
/* Emphasis inside a heading keeps its colour treatment but not a heavier weight. */
:is(h1,h2,h3):not(:where(.td-nav, .td-footer, footer, nav, [class*="td-mega"]) *) :is(strong,b,em,span){font-weight:inherit!important}

/* 2026-09-29: mobile tap targets >=32px tall (footer, legal and breadcrumb links were 19-23px). Padding replaces the
   list gap, so the visual rhythm is unchanged. */
@media (max-width:1023px){
.td-footer-links{gap:0}
.td-footer-links a{display:inline-block;padding:7px 0}
.td-footer-legal a{display:inline-block;padding:6px 0}
.ep-crumb a{display:inline-block;padding:5px 0}
}