/* ===================================================================
   Lani Atelier — Type System Tokens
   -------------------------------------------------------------------
   Drop this file into your site (e.g. /styles/tokens.css) and import
   once at the top of your global stylesheet.

     @import "./tokens.css";

   Then reference via CSS variables everywhere else:

     h1 { font: var(--type-display); }
     p  { font: var(--type-body); }

   Updated: 2026-04-25
   =================================================================== */

/* -------------------------------------------------------------------
   1 · Font faces
   ------------------------------------------------------------------- */

/* Day Roman — Schick Toikka (licensed, self-hosted) */
@font-face {
  font-family: "Day Roman";
  src: url("/fonts/dist/DayRoman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* Taipei Sans TC Beta — Taipei City Government, subsetted + woff2.
   Light face (300) and Regular face (400–500), both subsets share full
   888-glyph coverage of the site's Chinese content so no character ever
   falls back to system Chinese (PingFang / 微軟正黑). The Regular face
   absorbs the entire 400–500 weight band so font-weight:500 picks Regular
   without ever triggering faux bold synthesis. Body roles use 500. */
@font-face {
  font-family: "Taipei Sans TC Beta";
  src: url("/fonts/dist/TaipeiSansTC-L.subset.woff2?v=3") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+3000-303F,
                 U+4E00-9FFF, U+FF00-FFEF;
}
@font-face {
  font-family: "Taipei Sans TC Beta";
  src: url("/fonts/dist/TaipeiSansTC-R.subset.woff2?v=3") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+3000-303F,
                 U+4E00-9FFF, U+FF00-FFEF;
}

/* Synonym — Indian Type Foundry (Fontshare ITF Free Font License) */
@font-face {
  font-family: "Synonym";
  src: url("/fonts/dist/Synonym-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Synonym";
  src: url("/fonts/dist/Synonym-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Synonym";
  src: url("/fonts/dist/Synonym-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------
   2 · Font-family stacks
   Brand policy: only Day Roman, Synonym, Taipei Sans TC Beta are
   allowed to be downloaded and rendered. Fallback chains keep only
   CSS-generic keywords (system-ui, -apple-system, serif, sans-serif).
   No Google Fonts, no Noto Sans TC, no Microsoft JhengHei, no PingFang TC.
   ------------------------------------------------------------------- */
:root {
  --ff-day:          "Day Roman", serif;
  --ff-taipei-sans:  "Taipei Sans TC Beta", system-ui, sans-serif;
  --ff-synonym:      "Synonym", system-ui, -apple-system, sans-serif;

  /* -----------------------------------------------------------------
     3 · Role-based type presets
     ----------------------------------------------------------------- */

  /* Display (Hero) — Day Roman 400 / Taipei Sans TC 300 */
  --fs-display:      clamp(48px, 8vw, 96px);
  --lh-display:      0.95;
  --ls-display-en:   -0.02em;
  --ls-display-zh:   0.04em;

  /* Heading — Day Roman 400 / Taipei Sans TC 300 */
  --fs-heading:      clamp(32px, 4vw, 52px);
  --lh-heading:      1.08;
  --ls-heading-en:   -0.01em;
  --ls-heading-zh:   0.06em;

  /* Subheading / Nav / Eyebrow — Synonym 300 UPPER / Taipei Sans TC 300 */
  --fs-sub:          18px;
  --lh-sub:          1.4;
  --ls-sub-en:       0.22em;
  --ls-sub-zh:       0.28em;

  /* Body — Synonym 300 / Taipei Sans TC 300 */
  --fs-body:         15px;
  --lh-body:         2;
  --ls-body-zh:      0.05em;
  --measure-body:    58ch;

  /* Caption / Meta — Synonym 300 lower / Taipei Sans TC 300 */
  --fs-caption:      11px;
  --lh-caption:      1.6;
  --ls-caption-en:   0.24em;
  --ls-caption-zh:   0.18em;

  /* -----------------------------------------------------------------
     4 · Palette
     Page-level :root overrides these with the site's actual tokens.
     ----------------------------------------------------------------- */

  /* Backgrounds — warm layered neutrals */
  --bg:          #E5E0D4;   /* primary background — warm saturated cream */
  --bg-mid:      #DAD4C2;   /* secondary background */
  --bg-deep:     #CCC4AC;   /* tertiary / section dividers / card fills */

  /* Text & structure */
  --navy:        #2F4E6F;   /* primary text, headings */
  --navy-soft:   #1E3A52;   /* softened navy variant */
  --rule:        rgba(47,78,111,0.10); /* borders (transparent navy) */

  /* Interactive blue — kept for buttons, cursor, links */
  --azure:       #5B7A9C;
  --azure-light: #6E89AA;

  /* Warm accent family — eyebrows, labels, decorative lines */
  --terracotta:  #ec6b35;   /* bright orange accent — eyebrows, hover, glyphs, numbers, cursor */
  --sand:        #BE9E74;   /* light warm sand — secondary warm accent */

  /* Muted text */
  --stone:       #8A8070;   /* warm grey — very faint decorative tier */
  --ink-body:    #3D362C;   /* primary body / paragraph text on cream */
  --ink-mute:    #65594B;   /* captions, meta, eyebrow labels */

  /* Legacy / tokens.css refs */
  --ink:         #14130f;
  --ink-2:       #2a2823;
  --paper:       #E5E0D4;
  --paper-2:     #DAD4C2;
  --muted:       #8A8070;
  --rule-soft:   #d9d3c5;
  --accent:      #b03a1a;   /* rust-red — CTA hover, error (rare) */

  /* Easing — production reveal/transitions use the first; the second
     is the gallery + cursor accent curve (Quint-style inOut). */
  --ease-reveal: cubic-bezier(.22, 1, .36, 1);
  --ease-quint:  cubic-bezier(.76, 0, .24, 1);
}

/* -------------------------------------------------------------------
   5 · Global rendering quality
   font-synthesis:none — Day Roman is single-weight and Chinese never
   takes a faux italic; killing synthesis stops older Safari/Chromium
   from drawing a chunky pseudo-bold when CSS asks for 500 on a face
   that only ships Light/Regular.
   ------------------------------------------------------------------- */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after {
  font-synthesis: none;
}

/* -------------------------------------------------------------------
   6 · Utility classes — opt-in per element
   ------------------------------------------------------------------- */

.t-display {
  font-family: var(--ff-day);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display-en);
}
.t-display[lang^="zh"],
.t-display.zh {
  font-family: var(--ff-taipei-sans);
  font-weight: 400;
  letter-spacing: var(--ls-display-zh);
  line-height: 1.18;
  font-size: clamp(44px, 5.5vw, 76px);
}

.t-heading {
  font-family: var(--ff-day);
  font-weight: 400;
  font-size: var(--fs-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-en);
}
.t-heading[lang^="zh"],
.t-heading.zh {
  font-family: var(--ff-taipei-sans);
  font-weight: 400;
  letter-spacing: var(--ls-heading-zh);
  line-height: 1.3;
}

.t-sub {
  font-family: var(--ff-synonym);
  font-weight: 400;
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--ls-sub-en);
  text-transform: uppercase;
}
.t-sub[lang^="zh"],
.t-sub.zh {
  font-family: var(--ff-taipei-sans);
  font-weight: 300;
  letter-spacing: var(--ls-sub-zh);
  line-height: 1.6;
  text-transform: none;
}

.t-body {
  font-family: var(--ff-synonym);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure-body);
}
.t-body[lang^="zh"],
.t-body.zh {
  font-family: var(--ff-taipei-sans);
  font-weight: 500;
  letter-spacing: var(--ls-body-zh);
  max-width: 34em;
}

.t-caption {
  font-family: var(--ff-synonym);
  font-weight: 300;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption-en);
  text-transform: lowercase;
  color: var(--ink-2);
}
.t-caption[lang^="zh"],
.t-caption.zh {
  font-family: var(--ff-taipei-sans);
  font-weight: 300;
  letter-spacing: var(--ls-caption-zh);
  text-transform: none;
  line-height: 1.8;
}

/* ── Barba.js page container ──
   Stable cross-page layout: every container is at least viewport-tall so
   the persistent footer doesn't jump up on short pages during the swap,
   block-formatted, and GPU-hinted for the leave/enter tween. */
[data-barba="container"] {
  display: block;
  min-height: 100vh;
  will-change: opacity, transform;
}
[data-barba="wrapper"] { overflow-x: hidden; }