/* Our Story (page 1720) -- put the page back on the site's type scale.

   Why this file exists
   --------------------
   The Our Story body is a single custom HTML/CSS block that lives in the
   Bricks database (`#kt-ourstory`), not in this repo, and its CSS is an inline
   <style> in the page body. It shipped with its own font tokens:

     --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ...
     --font-display: "Hoefler Text", "Iowan Old Style", Palatino, Georgia, serif

   kisstour.com is a Poppins site. Measured with Chrome's
   CSS.getPlatformFontsForNode (the fonts actually rasterised, not the declared
   stack), every paragraph, list item, eyebrow, button label, stat label and
   caption on /about/our-story/ rendered in ".SF NS" -- the macOS/iOS system
   face -- while the page's own h1/h2/h3 rendered in Poppins, and every other
   page on the site (/, /saigon-tours/, /kiss-vietnam-airport-fast-track/,
   /faqs/) rendered 100% Poppins. So the page mixed three families
   on one screen. That is the "fonts lech" Natalie saw.

   Size was a smaller problem than it looked: 16 / 16.5 / 17.6 / 17.92px body
   paragraphs against a site long-form norm of 17px/1.75. Two of the four were
   below the norm, two above; there was no single body size. They are unified
   on the site's 17px/1.75 here.

   Also corrected
   --------------
   - Headings were weight 600; every reference page uses Poppins 700.
   - Uppercase micro-labels tracked at .16em-.22em; the house value (see
     assets/css/visa-pages.css `.pg .eyebrow`) is .15em. Poppins is wider than
     SF at the same px, so loose tracking is also the main wrap risk.
   - `.stat b` used the serif, whose default oldstyle figures rendered "#1" as
     "#i" and gave "2017"/"5,200+" uneven numeral heights. Site stat numbers
     are sans (visa-pages `.stat .n`).

   Deliberately NOT changed
   ------------------------
   - The italic serif accents stay: .chao, .sign, blockquote, .mark, .kissmark,
     .stats__note, figcaption, .svc__price. That editorial pull-quote voice is
     the point of the brand-story page and it is the one place on the site
     where a serif is intentional. Only the places where the serif read as a
     bug (the stat numerals) are moved to Poppins.
   - The hero photo band and its layout (assets/css/our-story-hero.css, shipped
     and approved 2026-08-03). Hero text inherits the Poppins switch, nothing
     more; hero font-sizes are untouched.
   - Body colour --ink-soft #6b3a4e: 8.43:1 on #fff6f4, comfortably AA, and a
     deliberate brand tint. Left alone.

   Notes
   -----
   - The page's CSS is an inline <style> in the BODY, i.e. after this file in
     the cascade, so every rule is qualified with `body.page-id-1720` to win on
     specificity rather than order. Do not drop that prefix.
   - Fail-safe: if the Bricks block is rebuilt and these hooks disappear, the
     rules stop matching. Nothing here hides or removes content.

   Enqueued from inc/our-story-products-shortcode.php (page 1720 only). */

body.page-id-1720 #kt-ourstory {
    --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.75;
}

/* Site headings are Poppins 700 everywhere; this block was 600. */
body.page-id-1720 #kt-ourstory h1,
body.page-id-1720 #kt-ourstory h2,
body.page-id-1720 #kt-ourstory h3 {
    font-weight: 700;
}

/* One body size instead of four. 17px/1.75 == the /kiss-vietnam-airport-fast-track/
   and travel-guide long-form value. `.chao` and `.sign` are excluded: they are
   the serif display opener and sign-off, not body copy. */
body.page-id-1720 #kt-ourstory .letter p:not(.chao):not(.sign),
body.page-id-1720 #kt-ourstory .dek,
body.page-id-1720 #kt-ourstory .pillar p,
body.page-id-1720 #kt-ourstory .svc p,
body.page-id-1720 #kt-ourstory .closing p,
body.page-id-1720 #kt-ourstory .checks li {
    font-size: 17px;
    line-height: 1.75;
}

/* Uppercase micro-labels: house tracking is .15em. */
body.page-id-1720 #kt-ourstory .eyebrow,
body.page-id-1720 #kt-ourstory .svc__tag,
body.page-id-1720 #kt-ourstory .pillar h3 span {
    letter-spacing: 0.15em;
}

/* Button labels: the site's button scale is 14-16px/600-700. */
body.page-id-1720 #kt-ourstory .btn {
    font-size: 15px;
}

/* Stat numerals in Poppins -- see header note on oldstyle figures. */
body.page-id-1720 #kt-ourstory .stat b {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Poppins numerals are wider than the serif's oldstyle figures, so the block's
   own clamp(2rem,4vw,3rem) makes "100,000+" (142px at 32px) blow out the 128px
   two-up column at 320px and clip "5,200+". Scale the numerals with the
   viewport below the 2-column breakpoint instead. */
@media (max-width: 560px) {
    body.page-id-1720 #kt-ourstory .stat b {
        font-size: clamp(1.5rem, 7.6vw, 2rem);
    }
}

/* Poppins 700 is wider than the 600 it replaced; at 320px that pushed the
   "More than a tour -- your way into Vietnam." h2 from 3 lines to 4. 1.85rem
   is still above the site's own mobile h2 (28px on / and /saigon-tours/). */
@media (max-width: 360px) {
    body.page-id-1720 #kt-ourstory h2.big {
        font-size: 1.85rem;
    }
}
