/* ============================================================================
   Turtle Shell Home Protection — the type layer
   ----------------------------------------------------------------------------
   Linked immediately after design.css on every public page, and it exists so
   that design.css does not have to be touched: everything here either sets a
   custom property design.css already reads, or restates one of its rules at
   equal specificity and wins on source order.

   Two faces do the work.

     Bebas Neue    display. Headings, buttons, badges, the numbers. One weight,
                   uppercase-only, very condensed.
     Inter         everything a person actually reads: body copy, navigation,
                   form labels, and the headings that are really sentences.

   JetBrains Mono is declared as --font-mono and is deliberately used by
   nothing. It was specified for bracketed labels that do not exist on this
   site; the face is here so the variable resolves if they ever do.

   NO CDN. The three families are served from /static/vendor/fonts as woff2,
   which is why font-src in the CSP is still 'self'. (fonts.googleapis.com and
   fonts.gstatic.com remain in the policy, but only because the Google Maps
   library injects a Roboto stylesheet on /projects — no page of ours asks
   either host for anything.) All three are SIL Open Font License 1.1 and the
   licence texts sit beside the binaries.
   ============================================================================ */

/* ---- Bebas Neue ----------------------------------------------------------- */

/* The weight range is a deliberate misstatement and this comment is the whole
   reason it is here. Bebas Neue ships ONE weight. design.css asks for 600, 700
   and 800 in twenty-three places, and a browser that cannot find a bold face
   draws one itself — synthetic bold, which on a face this condensed fills in
   the counters and turns a headline into a smear. Declaring the face across
   100-900 makes every one of those requests an exact match, so nothing is
   synthesised and every weight renders as the one weight that exists. That is
   what "weight does nothing" means in practice; it does not happen by itself.

   The alternative was font-weight:400 on all twenty-three selectors plus every
   one added after today. This is one line and cannot be forgotten. */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/vendor/fonts/bebas-neue-400-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/vendor/fonts/bebas-neue-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Inter ---------------------------------------------------------------- */

/* Variable, so one file per subset covers 400, 500, 600 and 700 — and 800,
   which design.css also asks for. The range below is the file's real wght axis
   rather than the four weights the brief named: clamping it to 400-700 would
   have quietly redrawn every font-weight:800 in design.css at 700. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/vendor/fonts/inter-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/vendor/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The italic is not decoration. design.css sets `.review-body{font-style:
   italic}`, so every quoted review on the home page, the service pages and
   /reviews is italic; with an upright-only family the browser slants the
   upright by shear, and on a grotesque that is visible. Two more files, fetched
   only by the pages that carry a review. */
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/vendor/fonts/inter-italic-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/vendor/fonts/inter-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- JetBrains Mono ------------------------------------------------------- */

/* Declared and unused, as specified. Its wght axis starts at 400, so the range
   is 400-800 rather than the 100-900 above. Nothing on this site selects
   --font-mono; the admin panel's monospace column has its own stack in
   admin.css, and that file never sees these variables. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/vendor/fonts/jetbrains-mono-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/vendor/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   The variables design.css reads
   ============================================================================ */

/* The fallbacks matter more than usual here. Two components on the home page
   are sized by dividing their column by a width measured in em from the
   rendered face — the hero headline and the six values — so a machine that
   never gets Bebas Neue sets them from a face a third wider and would spill.
   Arial Narrow is the nearest condensed face present on both Windows and
   macOS, and home.css clips rather than spills behind it. The
   <link rel="preload"> in _Layout is what keeps this theoretical instead of a
   flash on every first visit. */
:root {
  --font-header: "Bebas Neue", "Arial Narrow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Declared, unused. See the note over its @font-face above. */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* Bebas Neue is a quarter narrower than the face these clamps were drawn
     against and exactly the same height — cap height 0.700em either way — so a
     heading left at the old size is not smaller, it is just shorter across. A
     display face wants to be set larger than a UI face, and there is no weight
     left to take emphasis from, so the two display steps go up about 12%.
     --fs-h3 does not move: the two things that use it, .card-title and
     .visit-head, are both pulled back to Inter below. */
  --fs-hero: clamp(2.25rem, 5.85vw, 4rem);
  --fs-h2: clamp(1.7rem, 3.8vw, 2.7rem);
}

/* ============================================================================
   Where Bebas Neue goes, and the tracking it needs
   ============================================================================ */

/* Uppercase set solid is tight; 0.02em opens it back up without reading as a
   tracked-out label. Headings and buttons only: .hero-kicker (0.08em) and
   .offer-badge (0.04em) are deliberately tracked further and are left alone. */
h1, h2, h3, h4,
.btn,
.brand-name {
  letter-spacing: 0.02em;
}

/* ============================================================================
   Where Bebas Neue does NOT go
   ----------------------------------------------------------------------------
   Every selector below is a design.css selector restated at the same
   specificity; this file is linked after design.css, so source order decides
   it. One rule behind all of them: Bebas Neue is right for a line you look at
   and wrong for a line you read, and it is wrong twice over below about 14px,
   where a condensed uppercase face stops being legible at a glance.
   ============================================================================ */

/* Navigation. Named in the brief, and the reason is visible in the menu:
   "Turtle Shell Gutter Protection" and "Partnerships & Suppliers" are dropdown
   links at 0.875rem, which is exactly the size and the length Bebas Neue is
   worst at. */
.nav-link,
.dropdown-link {
  font-family: var(--font-body);
}

/* The forms. Labels and legends are instructions, and the legends are whole
   questions — "How can we reach you?", "Anything else we should know?". The
   step dots are 12px. Nothing in a form is display type. */
.field label,
.field-label,
.form-panel legend,
.form-step-dot {
  font-family: var(--font-body);
}

/* Card titles. These run from "Gutter Cleaning" to "Gutter Protection Project
   in Village Of Lakewood, IL" — the project cards on every city page and in
   every nearby grid carry the full job title, 42 characters on average — and
   they sit directly on top of body copy at --fs-h3. Long, dense and next to
   prose: all three of the things Bebas Neue is wrong for. .visit-head is a
   date and a photo count, and .card-link is "Learn more →". */
.card-title,
.card-link,
.visit-head {
  font-family: var(--font-body);
}

/* Prose headings. A heading inside a feature row is a sentence: /faq sets its
   five questions this way ("What Does a System Cost?", "How Long Does the
   Warranty Last?") and /products-services and the city pages use the same row
   for their section titles. The size goes back to what --fs-h2 was before the
   display bump above — that bump is for Bebas Neue, and this is not Bebas. */
.feature-copy .section-heading {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
}

/* Project pages. The <h1> is the job's stored title, and that is a description
   rather than a name: "Gutter Protection Project in South Elgin, IL", 42
   characters on average across the 181 of them. /projects itself is caught by
   the same selector — "Our Completed Projects" would have been fine in Bebas —
   and it is left in Inter on purpose, so the section does not switch face
   between the index and the pages it links to. */
body[data-nav="projects"] .hero-heading {
  font-family: var(--font-body);
  font-size: clamp(2rem, 5.2vw, 3.6rem);
}

/* Small dense UI. City chips are place names, the pager is a row of numbers and
   arrows, the map popup is a two-line address, and the frame tag and the facts
   title are captions. None of them is a heading. */
.city-chip,
.pager-step,
.pager-num,
.map-popup-body strong,
.frame-tag,
.project-facts-title {
  font-family: var(--font-body);
}