/* Scale: whole design at 90% (ZiYing, 10/10/2026): html font-size 90% + px values ×0.9; body ≥16px, small text ≥13.5px. */
/* ==========================================================================
   base.css — reset, typography, layout primitives, motion primitives
   Load order: tokens → base → components → sections
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{font-size:90%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h-small) + 14.4px)}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-ink);background:var(--c-bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
p{margin:0 0 1.1em}
a{color:inherit}
button{font:inherit;color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,dl,dd,figure{margin:0}
::selection{background:var(--c-blue-200);color:var(--c-ink)}

/* ---- Typography ---- */
.display{font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);line-height:var(--lh-tight);color:var(--c-ink);text-wrap:balance}
.display em{font-style:normal;font-weight:var(--weight-display);color:var(--c-brand)}   /* emphasis = brand blue, upright (no italics) */
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2)}
.h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--weight-display);line-height:var(--lh-snug);letter-spacing:-.005em}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--c-slate);max-width:34em}
.muted{color:var(--c-slate)}
.small{font-size:var(--fs-small)}

/* ---- Layout ---- */
.container{width:100%;max-width:calc(var(--container) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative;border-top:1px solid var(--c-line)}
.section--mist{background:var(--c-blue-50)}
.section--white{background:var(--c-white)}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,.5rem + 2vw,2.5rem)}

/* ---- Accessibility ---- */
.skip-link{position:absolute;left:-999px;top:7.2px;z-index:var(--z-skip);background:var(--c-white);color:var(--c-ink);padding:.7rem 1rem;border-radius:var(--radius-s);box-shadow:var(--shadow-2)}
.skip-link:focus{left:7.2px}
:focus-visible{outline:3px solid var(--c-brand);outline-offset:3px;border-radius:3.6px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Animated PT/EN switch: i18n.js toggles .is-lang-switching on <html> ---- */
[data-i18n],[data-i18n-html],[data-i18n-dyn]{transition:opacity .2s var(--ease-io),filter .2s var(--ease-io)}
html.is-lang-switching [data-i18n],html.is-lang-switching [data-i18n-html],html.is-lang-switching [data-i18n-dyn]{opacity:0;filter:blur(3px)}

/* ==========================================================================
   MOTION PRIMITIVES — content is visible without JS; the inline <script>
   adds .js to <html>, which arms the hidden start state; main.js adds .is-in.
   Usage: data-reveal="up|fade|mask"  + style="--i:2" (stagger index)
   ========================================================================== */
.js [data-reveal]{opacity:0;transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out),clip-path var(--dur-hero) var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--stagger))}
.js [data-reveal="up"]{transform:translateY(28.8px)}
.js [data-reveal="mask"]{transform:scale(1.04);clip-path:inset(10% 10% 10% 10% round var(--radius-m))}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="mask"].is-in{clip-path:inset(-120px round 0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  [data-parallax] .frame__art,[data-parallax] .frame__img{transform:none!important}
}