/* ===================================================================
   our-story.css - Our Story only (loaded by our-story.html alone, after styles.css and fa-rtl.css).
   2026-11-10, Maggie's request: the closing line "Welcome to GEM." in Bradley Hand, a little larger
   than the three lines before it, with one empty line above it. The original rules stay in styles.css
   (OUR STORY rebuild block, .story-card .story-welcome) and are overridden here, not edited.
   =================================================================== */

/* Gochi Hand, self-hosted (SIL OFL 1.1, assets/fonts/GochiHand-OFL.txt), Google Fonts' Latin subset.
   The fallback where Bradley Hand is not installed (Android, Linux, Windows without Office).
   It has one weight: declaring it across 400-700 makes a bold request use the face as drawn, so the
   browser never fakes a bold on top of it. Not preloaded: Apple devices and most Windows PCs use
   their own Bradley Hand and never download this file.
   size-adjust 125% (2026-11-10, after Maggie's Word sample): Gochi Hand draws smaller letters than
   Bradley Hand at the same font size (capitals 0.6em). Unscaled, the line read only 1.14x the three
   lines' capitals and narrower than "Wherever you come from,"; her sample reads 1.41x and wider.
   Scaling this face only brings the fallback to her proportions (capitals ~1.4x) without changing
   Bradley Hand or the line box (line-height stays 1.2 x the font size). */
@font-face {
  font-family: "Gochi Hand";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  size-adjust: 125%;
  src: url("../fonts/gochi-hand-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+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The three closing lines ("Wherever you come from, / whatever your story, / you belong here." and
   Maggie's 中文 lines) read as the letter's own text (2026-11-10, her second change): the same face,
   size, weight, style and line height as the letter's paragraphs. Those values are not on the <p>:
   they come from .story-card (font-size 1.2rem, line-height 1.8) and body (the body face; Vazirmatn on
   /fa/ through fa-rtl.css), so `inherit` takes them from the same source instead of copying them, and
   follows the letter if it ever changes. The colour is already the letter's (.story-card--left p and
   .story-card--left .story-finale__lines are both --purple); the Chinese bold line keeps its <strong>.
   The space above the lines (.story-finale's 2.5rem) is unchanged. */
.story-card .story-finale__lines {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  /* One empty line above the welcome line, in every language: one line of these lines, which is now
     one line of the letter text (34.56px). 1lh is that line height; 1.8em is the same value for
     browsers without the lh unit (before Safari 16.4 / Chrome 109). */
  margin-bottom: 1.8em;
  margin-bottom: 1lh;
}
.story-card .story-welcome {
  margin-top: 0;
}

/* The English line: Bradley Hand (a licensed system font, Apple: "Bradley Hand", bold; Windows with
   Office: "Bradley Hand ITC", one regular weight), then the self-hosted Gochi Hand. Bold where the
   face has a bold; font-synthesis: none stops a faked bold on the faces that do not. Its own fixed
   size, 24.8px at 320px to 30.2px from 1120px: the value it had as 1.35 x the three lines' old size
   (1.35 x clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem)), re-anchored on 2026-11-10 when those lines took
   the letter text's size, so it does not shrink with them. Colour and line-height stay as in
   styles.css. Not on /fa/ (Linguise puts this line into Persian there; fa-rtl.css keeps it in the
   Persian heading face at its old size) and not on /zh-cn/ (the Chinese line is in its own wrapper
   with its own rule in styles.css). */
html:not([lang="fa"]) [data-story-lang="en"] .story-welcome {
  font-family: "Bradley Hand", "Bradley Hand ITC", "Gochi Hand", cursive;
  font-weight: 700;
  font-synthesis: none;
  font-size: clamp(1.5525rem, 1.4175rem + 0.675vw, 1.89rem);
}

/* ---- The Chinese welcome line 欢迎来到 GEM。 in 华文新魏 (2026-11-10, Maggie; /zh-cn/ only) ----
   华文新魏 / STXinwei is a licensed system font (Microsoft Office on Windows, older macOS): no file of it
   is in the repo and nothing loads it from elsewhere. It also carries Latin letters, so listing the
   installed family by name would draw "GEM" in it too. Instead the page declares its own name,
   "GEM Xinwei", pointing at the installed font with local() (its English and Chinese names) and
   limited to Chinese characters and punctuation; "GEM" and the space keep the face they had (Lora 700).
   The alias deliberately does NOT reuse the name "STXinwei": a page face with an installed font's own
   name falls back to that whole installed font if its local() source ever fails to match, and then
   "GEM" would be drawn in 华文新魏 after all (seen in testing). Where 华文新魏 is not installed the
   alias fails and the next family applies. Declared 400-700 so the bold request uses the face as
   drawn, never a faked bold. */
@font-face {
  font-family: "GEM Xinwei";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local("STXinwei"), local("\534E\6587\65B0\9B4F");   /* 华文新魏, written as CSS escapes */
  unicode-range: U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}
/* Ma Shan Zheng (SIL OFL 1.1, assets/fonts/MaShanZheng-OFL.txt), the self-hosted stand-in: a 2,348-byte
   subset that holds ONLY 欢 迎 来 到 。 (U+6B22 U+8FCE U+6765 U+5230 U+3002), the unicode-range below.
   IF THE LINE'S WORDING EVER CHANGES, THIS SUBSET MUST BE REMADE (and the unicode-range with it):
   a character outside it would fall back to the next face. Declared 400-700: one weight, never a
   faked bold. Not preloaded: only /zh-cn/ uses it. */
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/ma-shan-zheng-welcome.woff2") format("woff2");
  unicode-range: U+6B22, U+8FCE, U+6765, U+5230, U+3002;
}
/* "GEM" in the Chinese line takes the English line's face (2026-11-10, Maggie): the Bradley stack comes first,
   exactly as on "Welcome to GEM." - "Bradley Hand" (Apple, bold), "Bradley Hand ITC" (Windows with Office), then
   the self-hosted Gochi Hand (Latin only, by its unicode-range). None of them has Chinese characters or 。, so
   those fall through to 华文新魏 (the "GEM Xinwei" alias), then the stand-in, then what the line used before
   (styles.css: var(--font-head), serif). 华文新魏's own Latin letters can never draw "GEM": the alias covers
   Chinese characters and punctuation only. font-synthesis: none, as on the English line: bold where the face
   has it, never a faked bold. Markup unchanged; weight 700 and the size clamp(1.6rem, 4vw, 2.2rem) stay from
   styles.css.
   One more page face goes first, "GEM Welcome Space": the same Lora 700 file tokens.css already loads (same URL,
   so no new download), limited to the space character. The browser places a line's text on the baseline of
   the first family that has a space; without this face that would become Bradley Hand or Gochi Hand, and the
   Chinese characters would move up 3-4px in the line (measured). With it the line keeps Lora's baseline, as
   before: the Chinese characters and 。 stay exactly where they were, and the space keeps its Lora width.
   "GEM" still sits on that same baseline. */
@font-face {
  font-family: "GEM Welcome Space";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lora-700.woff2") format("woff2");
  unicode-range: U+0020;
}
html[lang="zh-cn"] .story-card .story-welcome {
  font-family: "GEM Welcome Space", "Bradley Hand", "Bradley Hand ITC", "Gochi Hand", "GEM Xinwei", "Ma Shan Zheng", var(--font-head), serif;
  font-synthesis: none;
}

/* ---- The three italic lines lean further (2026-11-10, Maggie; English page only) ----
   "Inspired by faith. / Sustained by hope. / Carried forward by a global community." keep their face, size,
   weight, colour and wording (styles.css, .story-card .story-finale__italics: Lora 500 italic, line-height 1.6);
   only the slant grows, towards the lean of the Chinese lines on /zh-cn/ (no Chinese italic exists, so the
   browser slants them by itself, about 14 degrees). The Lora italic file declares 3 degrees (post.italicAngle
   -3; its stems measure 3 to 5); the extra tilt is capped at 6 degrees, so the total is about 9 degrees.
   How each line keeps its own baseline without changing the markup (the lines are one <p> with <br>s, and the
   last one wraps at 320px):
   - the whole paragraph is skewed 6 degrees about its FIRST baseline (Lora: 0.16em half-leading + 1.006em
     ascent = 1.166em below the top), so a line k lines lower would be pulled left by k x 1.6em x tan 6;
   - an invisible float at its start, with a slanted shape-outside, indents line k by exactly that amount
     (the shape is 0 on line 1 and grows by 1.6em x tan 6 = 0.168em per line), so every visual line, wrapped
     or not, ends with its baseline on the same left edge under the gold rule.
   The float is four lines tall (the most the lines ever take): one line longer than the paragraph at three
   lines, well inside its 2.75rem bottom margin, and the paragraph's height (no new formatting context) and the
   photo row below are unchanged. Not on /zh-cn/ or /fa/ (html[lang] differs there). */
html[lang="en"] [data-story-lang="en"] .story-finale__italics {
  transform: skewX(-6deg);
  transform-origin: 0 1.166em;
}
html[lang="en"] [data-story-lang="en"] .story-finale__italics::before {
  content: "";
  float: left;
  width: 0.5045em;                                      /* 4.8em x tan 6 (the indent of a fourth line) */
  height: 6.4em;                                        /* four lines of 1.6em */
  shape-outside: polygon(0 0, 0 1.6em, 100% 100%, 0 100%);
}

/* ---- The typed signature returns (2026-11-10, Maggie): "Maggie Dai" replaces the handwriting image in both
   letters (the image files stay in assets/img/our-story/, unreferenced). translate="no" in the markup keeps
   the name as written on every language. Styled as the typed name line was before the 29 Oct rebuild -
   styles.css at 2e3a6bc5 (the commit before 371e6c8b), .story-closing__signature: the heading serif, bold,
   1.1rem, --purple-deep, margin 0; line height inherited from .story-card (1.8), as it was then. The extra
   class beats `.story-card--left p` (the letter's --purple). The title lines under it keep their own rule
   and 0.35rem gap; the photo and the row are untouched. */
.story-card .story-finale__name .story-finale__signature {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--purple-deep);
  margin: 0;
}