/* ============================================================
   Bear Park — LOCKED TYPE SCALE (9 Jul 2026)
   The single source of truth for every text size on the site.
   Values are the design-system scale (docs/design-system.md §2,
   distilled from the landing + centre template).

   THE LAW: no raw font-size on a text role. Pick the token.
   If a new design genuinely needs a size that isn't here, add a
   token HERE first (with Josh's sign-off), then use it.
   ============================================================ */
:root {
  /* Display — Canela LCG 300 only.
     Resized 10 Jul (Josh: "full site type resize from the reference") — the
     reference runs display at 57.6/36 on desktop, so the section and card
     ceilings come up to meet it. */
  --t-hero:    clamp(38px, 5.7vw, 80px);   /* page hero H1 · lh 1.02 · ls -.02em */
  --t-h2:      clamp(2rem, 4vw, 3.6rem);   /* section head (.sechead) · lh 1.04 */
  --t-cta-h:   clamp(30px, 4.2vw, 56px);   /* closing CTA band head · lh 1.04 */
  --t-quote:   clamp(26px, 2.7vw, 42px);   /* feature quote, forest interludes · lh 1.16 */
  --t-card-h:  clamp(24px, 2.3vw, 36px);   /* card / list-item titles · lh 1.08 */

  /* Body — Neue Haas Grotesk Display 400 */
  --t-body:        clamp(1.04rem, 1.35vw, 1.2rem);  /* DEFAULT paragraph, light bg · lh 1.6 · ink .84 */
  --t-body-forest: clamp(1.04rem, 1.4vw, 1.36rem);  /* DEFAULT paragraph, forest/cinematic · lh 1.46 · cream 88% */
  --t-body-sub:    clamp(1rem, 1.4vw, 1.2rem);      /* sub-line under CTA band headlines · cream 72% */
  --t-body-sm:     clamp(1rem, 1.2vw, 1.125rem);    /* supporting copy: panels, subs, FAQ answers, excerpts (16 to 18px) */
  --t-caption:     13.5px;                          /* card detail lines, small captions · lh 1.5 */

  /* Labels — NHG 500 uppercase */
  --t-eyebrow: 13px;    /* .18em tracking · above every heading (13px = the landing, 11 Jul) */
  --t-label:   11.5px;  /* .16em · meta keys, form labels, card kickers */
  --t-btn:     12px;    /* .14em · button + CTA labels (split from --t-label 11 Jul) */
  --t-micro:   12.5px;  /* .08em · dates, counts (nothing below 11px, ever) */

  /* UI tiers — flat sizes used across components (tabs, rows, detail lines).
     Desktop values match what the build always used; they exist as tokens so
     the mobile layer below can compact them in one move. */
  --t-ui-16: 16px;
  --t-ui-15: 15px;
  --t-ui-13: 13px;
}

/* ============================================================
   MOBILE LAYER (resized 10 Jul, Josh: "full site type resize from
   the reference"). The reference phone scale is CONFIDENT, not compact:
   display ~41.6, section ~33, card ~25, body ~16.6, labels ~14.6.
   The 9 Jul compacted layer read small against it - every tier
   comes up to the reference's proportions.
   ============================================================ */
@media (max-width: 820px) {
  html { font-size: 16px; } /* rem floors back to true size (the 15px compaction retired) */
  :root {
    --t-hero:    40px;
    --t-h2:      31px;
    --t-cta-h:   30px;
    --t-quote:   26px;
    --t-card-h:  24px;

    --t-body:        16.5px;
    --t-body-forest: 16.5px;
    --t-body-sub:    16px;
    --t-body-sm:     15.5px;
    --t-caption:     13px;

    --t-eyebrow: 13px;
    --t-label:   11.5px;
    --t-micro:   12px;

    --t-ui-16: 16px;
    --t-ui-15: 15px;
    --t-ui-13: 12.5px;
  }
  /* iOS zooms into any focused field under 16px - never let it */
  input, select, textarea { font-size: 16px !important; }
}

/* ============================================================
   §ENFORCEMENT (11 Jul 2026, Josh: "eyebrows, subheadings, section
   names all need to be the same as the landing. I'm sick of having
   this issue.") The shared registers below render IDENTICALLY on
   every page, whatever local page CSS says — hence !important.
   Full reference: /styleguide.html  ·  the reference calibration:
   two families, three weights, ONE style per role.
   ============================================================ */

/* Register 1 — THE EYEBROW (the landing's label voice). Every section
   name, card kicker, region label — AND the page mastheads (the 17px
   "reads at text size" hero register is RETIRED, Josh 11 Jul: one
   label register, like the reference). */
.eyebrow, .phero__eyebrow, .lreg__label, .jcard__kick, .vcard__kick,
.nextc__kick, .bguide2__k, .gdm-eyebrow, .menu-eyebrow, .trail__eyebrow {
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif !important;
  font-size: var(--t-eyebrow) !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
}

/* Register 2 — META LABEL: meta keys, form labels, small kickers */
.meta__k, .bkd-label, .fside__k, .book2__points .k, .lcard__addr,
.lcard__go, .art__meta, .jb__back, .bk-pt-k {
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif !important;
  font-size: var(--t-label) !important; font-weight: 500 !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
}

/* Register 0 — SECTION HEADS speak CANELA (13 Jul, Josh: "all section
   headings use the Canela H2 like Why Bear Park does — Our Philosophy,
   testimonials etc."). Every section-opening heading and full-width
   statement is Canela LCG Light, like the landing's Why panels. */
.headline, .cta__h, .bookcta__h, .faq2__heading, .intro__statement, .bridge__t,
.jcta h2, .lsec__h, .people__h, .phil__h, .vac__h, .vals__h, .why__h,
.cidx__name, .lcard__name, .nextc__name, .jcard__name, .cx-title {
  font-family: "Canela LCG", Georgia, serif !important;
  font-weight: 300 !important;
  letter-spacing: -.02em !important;
}
/* Centre NAMES are Canela wherever a centre card appears (13 Jul, Josh:
   "like the centre gallery on the main page") — locations cards, the
   next-centre band, job-page centre cards, the gallery overlay title.
   Inside the overlay, ONLY the centre name is Canela: */
.cx-info .headline {
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif !important;
}

/* Register 0b — NAMES, CARD TITLES, IN-SECTION PANEL HEADS + UI stay
   NHG LIGHT (the 12 Jul voice). Canela is for the moments a section
   opens; the furniture inside it speaks NHG. */
.drow__name, .jb__art h2, .jcard__title,
.jempty p, .jnote blockquote, .pcard__name,
.shapes2__h, .stories2__h, .tmoment__s, .val__t,
.vcard__name, .wrow h3, h2.disp, .bguide2__h,
.book2__done h3, .gdm-h, .sp-title {
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: -.02em !important;
}

/* THE H1 EXCEPTION (12 Jul, after breaking it once): the landing hero is
   <h1 class="h headline"> - it carries .headline, so the display-voice
   sweep above caught it. The one H1 on the site stays Canela, fed by the
   tweaks pipeline exactly as the landing always was. */
.hero2 .h.headline {
  font-family: var(--tw-font-head, "Canela LCG", Georgia, serif) !important;
  font-weight: var(--tw-head-weight, 300) !important;
  letter-spacing: var(--tw-head-track, -.02em) !important;
}

/* Register 3 — BUTTON LABEL: every CTA reads at one size */
.btn, .btn-block, .btn-guide, .bkd-submit, .book2__btn, .menu-quote,
.pill-cta, .gdm-submit, .lost__alt {
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif !important;
  font-size: var(--t-btn) !important; font-weight: 500 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
}

/* ============================================================
   §SEMANTIC CLASSES — the whole voice as classes. New work uses
   these instead of hand-typing sizes. (h1/h2/h3 stay unstyled
   globally: legacy pages set their own; new pages add the class.)
   ============================================================ */
.t-display-1 { font-family: "Canela LCG", Georgia, serif; font-weight: 300; font-size: var(--t-hero); line-height: 1.04; letter-spacing: -.01em; }
.t-display-2 { font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif; font-weight: 300; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.02em; }
.t-display-3 { font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif; font-weight: 300; font-size: var(--t-card-h); line-height: 1.12; letter-spacing: -.02em; }
.t-h3        { font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif; font-weight: 500; font-size: clamp(1.05rem, 1.4vw, 1.32rem); line-height: 1.3; letter-spacing: -.008em; }
.t-display-sans { font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif; font-weight: 300; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.18; letter-spacing: -.02em; }
.t-quote     { font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif; font-weight: 300; font-size: var(--t-quote); line-height: 1.2; letter-spacing: -.02em; }
.t-body      { font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif; font-weight: 400; font-size: var(--t-body); line-height: 1.6; }
.t-body-sm   { font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif; font-weight: 400; font-size: var(--t-body-sm); line-height: 1.55; }
.t-small     { font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif; font-weight: 400; font-size: var(--t-caption); line-height: 1.5; }
.t-eyebrow   { font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif; font-weight: 500; font-size: var(--t-eyebrow); line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; }
.t-label     { font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif; font-weight: 500; font-size: var(--t-label); line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; }
.t-btn       { font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif; font-weight: 500; font-size: var(--t-btn); line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.t-micro     { font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif; font-weight: 400; font-size: var(--t-micro); line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }