/* timezones-page-intro.css — the page title + lead paragraph block that sits
 * above a tool or content card on pages under /times/time-zones/.
 *
 * SCOPE IS DELIBERATELY THE TIME-ZONES SECTION, not the whole site. Timers,
 * Time News and Articles are expected to want their own intro treatment
 * (different content shape and density), and one site-wide `.page-intro` would
 * have to be forked the moment any of them diverged. Splitting a shared file
 * later is harder than merging separate ones, so this starts scoped. If all the
 * sections do turn out identical, consolidate then.
 *
 * USAGE — inside the "main-content" editable region of a dwt/main-content.dwt child:
 *
 *   <div class="timezones-page-intro">
 *     <h1>Meeting Time Planner</h1>
 *     <p>One or two sentences on what the tool does.</p>
 *   </div>
 *
 * …and link this file from that same page's "head-extra" region:
 *
 *   <link href="/css2/timezones-page-intro.css?v=1" rel="stylesheet" type="text/css" />
 *
 * ══ WHY THESE EXACT VALUES ══════════════════════════════════════════════════
 * Written down so they are not "tidied" into round numbers later.
 *
 * The h1's 28px / 500 / --font-sans / --text matches `.zone-hero h1` in
 * css2/us8zone-hero.css — the page title on the 8 US/Canada zone pages. Same
 * structural role (the page's own title), so the same treatment. It is NOT the
 * article h2 (22px / 600, css2/us8zone-article.css), which is a section heading
 * WITHIN a page.
 *
 * The paragraph's --font-ui (Inter) 15px / 1.65 / --dim matches
 * `.us8zone-article p`, the site's body-copy convention. Note --font-ui, not
 * --font-sans: without it the paragraph inherits Outfit from the body and reads
 * heavier than every other block of prose on the site.
 *
 * Both blocks need explicit margins because css2/theme2.css sets only
 * `h1, h2, h3 { line-height: 1.2; font-weight: 500 }` — no size, no family, no
 * colour — while css2/css-reset-tool-by-joshwcomeau.css zeroes every margin. So
 * an unstyled h1 here renders at the browser default 32px with no spacing at all,
 * flush against whatever follows it.
 *
 * ⚠ max-width:700px is the Call Time Planner card's own BASE width (`.ov-card`
 * in css2/calltime-planner-card.css), so the intro lines up with the card at
 * mobile and normal desktop widths — without it the intro spans the full content
 * column and visibly overhangs the card on both sides.
 * That card widens to 950px at >=1100px and 1060px at >=1400px, and this file
 * deliberately does NOT follow it. Two reasons: 700px stays a comfortable reading
 * measure (css2/us8zone-article.css caps its own prose at 720px for exactly this
 * reason), and matching those breakpoints would copy magic numbers that live in
 * the component's stylesheet into a second file that then has to stay in sync
 * with it forever — the two-places-must-agree trap. If the intro ever must track
 * the card's full width, promote the width to a custom property on the component
 * side and read it here; do not duplicate the breakpoints.
 */

/* Centred, which also sidesteps a problem rather than solving it: the card below
   is usually CONTAINER-limited rather than sitting at one of its max-width tiers
   (700 / 950 / 1060px), so no fixed width here can track its left edge. Left-
   aligned, this block either overhung the card or sat ~31px inside its text.
   Centred, there is no left edge to match. It also matches `.zone-hero` in
   css2/us8zone-hero.css, which centres the page title on all 8 zone pages.
   ⚠ text-align is inherited, so it centres the paragraph too — that is the
   intent here (chosen 2026-07-26), not an oversight. Note the zone pages do the
   opposite for their sub-block: `.zone-hero-data` is an inline-block with
   text-align:left inside the centred parent, so its lines share one edge. If the
   centred prose ever reads badly at 4+ lines, that is the pattern to copy —
   add `text-align:left` to the p and let the block stay centred. */
.timezones-page-intro {
  max-width: 700px;
  margin: 0 auto 22px;
  text-align: center;
}

.timezones-page-intro h1 {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 10px;
}

.timezones-page-intro p {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.65;
  color: var(--dim);
  margin: 0 0 14px;
}

/* No trailing gap under the last line — the block's own margin-bottom above
   already spaces it from the card that follows. */
.timezones-page-intro p:last-child {
  margin-bottom: 0;
}