/*
  Rubyfpv brand layer (A2, 2026-10-31, G1).
  Loaded on every subpage by scripts/site-nav.mjs (navHead), AFTER the page's own <style>, so it wins ties.
  Rules of this file:
    - global tokens, body colour/font, the shared title component, no fake italics, Chinese headline punctuation, view transitions;
    - nothing that restyles generic elements (h1, p, a, section…) — /blog/ and the editorial pages share this file.
      One deliberate exception: Chinese h1/h2 get the OpenType "halt" feature (half-width punctuation), see below;
    - nav + phone dock styles live in site-nav.mjs (dockCss) so the homepage can use them without this file.
  Fonts come from /assets/fonts/fonts.css (Instrument Serif + Instrument Sans; Space Mono only for real code; Chinese = system fonts).
  Two voices (font plan A): serif = big titles and prices; sans = everything else. The sans family is set in ONE place,
  --rf-face-sans in fonts.css; --rf-mono is kept as a name for old rules and now points at the sans.
*/

/* Chinese punctuation for regular-weight Songti text ("ZH Punct", same faces as the homepage). Songti SC has no
   half-width ("halt") forms, so "，" "。" "？" left a hole after them. Only these marks are drawn from PingFang
   (unicode-range), which has halt; the characters stay Songti. Titles no longer use it: since 2026-10-31 they read
   var(--rf-face-serif) from /assets/fonts/fonts.css (Song Bold "ZH Title" + PingFang Semibold "ZH Title Punct").
   It stays for the big serif paragraphs that are not titles, via --rf-face-serif-text.   */
@font-face { font-family: "ZH Punct"; src: local("PingFangSC-Regular"), local("PingFang SC Regular"), local("PingFang SC"); unicode-range: U+3001-3002, U+FF01, U+FF0C, U+FF1A, U+FF1B, U+FF1F; font-weight: 400; }
@font-face { font-family: "ZH Punct"; src: local("PingFangSC-Semibold"), local("PingFang SC Semibold"); unicode-range: U+3001-3002, U+FF01, U+FF0C, U+FF1A, U+FF1B, U+FF1F; font-weight: 600; }

:root {
  color-scheme: light;
  /* Palette (only these) */
  --rf-bg: #FAF6EF;          /* page */
  --rf-card: #F1EDE7;        /* card / chip */
  --rf-white: #FFFFFF;
  --rf-line: #E5DFD6;        /* hairlines */
  --rf-text: #25222A;        /* body + titles (never pure black) */
  --rf-text-2: #4A4650;      /* secondary */
  --rf-text-3: #6B655F;      /* captions, eyebrows */
  --rf-ink: #0E0C10;         /* dark blocks, strokes, hard shadows, solid buttons — not for text */
  --rf-rose: #D0538F;        /* ≥24px type or colour blocks; small links use garnet. White on it = 3.95:1, not for small button text */
  --rf-rose-press: #B8407A;  /* fill of solid rose buttons with white 12–16px text (5.18:1, WCAG AA) */
  --rf-rose-deep: var(--rf-garnet); /* hover + pressed of those buttons = garnet (white 14.6:1). Decided 2026-10-31; the off-palette deep rose is retired */
  --rf-garnet: #4A1530;
  --rf-pink: #F8D6E7;
  --rf-blush: #FCE8F1;
  --rf-champ: #C8A97E;
  /* Type: two voices + system Chinese ("ZH Punct" = PingFang for Chinese punctuation only, see top) */
  --rf-serif: var(--rf-face-serif);
  --rf-sans: var(--rf-face-sans), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --rf-mono: var(--rf-sans);  /* labels / eyebrows / pills: same sans, set apart by caps + tracking, not by a third face */
  --rf-code: var(--rf-face-code), ui-monospace, Menlo, monospace; /* real code only */
  /* Motion */
  --rf-ease: cubic-bezier(.19, 1, .22, 1);     /* expo-out, everything */
  --rf-spring: cubic-bezier(.34, 1.36, .64, 1); /* small overshoot */
  --rf-sheet: cubic-bezier(.32, .72, 0, 1);     /* bottom sheets */
}

/* Body: one colour, one background, one UI face on every section page.
   The blog (body.blog) and editorial (body.reading-page / .magazine-page) keep their own reading themes. */
body:not(.blog):not(.reading-page):not(.magazine-page) {
  color: var(--rf-text);
  background: var(--rf-bg);
  font-family: var(--rf-sans);
}

/* Keyboard focus: one ring on every section page (2px rose), never the browser's default blue.
   :where() keeps it at zero specificity, so a page's own ring (dock pills, buttons) still wins. */
:where(a, button, summary, video, [tabindex]):focus-visible { outline: 2px solid var(--rf-rose); outline-offset: 2px; }

/* No fake italics: Chinese has no italic, so the browser would slant it. Emphasis in Chinese = colour, not slant.
   (weight synthesis stays on so a bold <em> inside a 500/600 title doesn't go thin) */
em, i { font-synthesis: none; font-synthesis-weight: auto; }

/* Language switch for bilingual markup: <span class="l-en">…</span><span class="l-zh">…</span> */
html[lang^="zh"] .l-en, html:not([lang^="zh"]) .l-zh { display: none !important; }

/* ---------- Title component (all section pages) ----------
   <p class="page-eyebrow">TUTORIALS · 教程</p>
   <h1 class="page-title">教程 <span class="lat">Tutorials</span></h1>   (a normal space before .lat, so a wrap leaves no indent)
   <h1 class="page-title">定制<em>钩子动效</em></h1>                       (Chinese emphasis = rose colour, upright)
   <p class="page-en">Free guides for AI video and motion.</p>
   <p class="page-lede">…</p>                                                                      */
.page-eyebrow {
  margin: 0 0 18px;
  font: 500 11px/1.4 var(--rf-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rf-text-3);
}
.page-title {
  margin: 0;
  font: 500 clamp(40px, 6vw, 76px)/1.12 var(--rf-serif);
  letter-spacing: -.01em;
  color: var(--rf-text);
  text-wrap: balance;
}
/* Chinese titles: full-width punctuation set half-width (OpenType halt; PingFang has it, Songti doesn't — hence "ZH Punct").
   Measured on .page-title at 100px (Chrome, macOS): "动效，" 297px → 247px. Latin titles and fonts without halt are untouched. */
:lang(zh) .page-title, :lang(zh) h1, :lang(zh) h2 { font-feature-settings: "halt" 1; }
.page-title em { font-style: normal; color: var(--rf-rose); }
.page-title .lat {
  font-family: "Instrument Serif", "Instrument Serif Fallback", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--rf-rose);
  font-synthesis: none;
}
.page-en {
  margin: 10px 0 0;
  font: italic 400 clamp(20px, 2vw, 26px)/1.35 "Instrument Serif", "Instrument Serif Fallback", serif;
  color: var(--rf-text-2);
  font-synthesis: none;
}
.page-lede {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--rf-text-2);
  max-width: 32em;
}

/* ---------- Cross-document view transitions ----------
   Same-origin page changes cross-fade in 180ms; the phone dock's black pill (.dock-ind) slides to the new tab
   with a small spring. Browsers without support just navigate. Reduced motion: off. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
::view-transition-group(dock-ind) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.34, 1.36, .64, 1); }
::view-transition-group(dock-tabs), ::view-transition-old(dock-tabs), ::view-transition-new(dock-tabs) { animation-duration: 420ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}