/* ==========================================================================
   TYPHOON STADIUM — shared design tokens
   Web Release 1.3

   One source of truth for colour, type and motion, loaded by the homepage and
   the viewers alike.  site-2026.css and viewer-r11.css are layout; everything
   they agree on lives here.

   The palette is still sampled from the approved artwork — pale paper, navy ink,
   blue-grey mid — but the roles changed in release 1.3: navy is now an accent
   that marks the current generation and the active control, not a large flat
   field, and the greys carry more of the page.
   ========================================================================== */

:root {
  /* ---- ink and paper, tuned for long-form Chinese as well as Latin -------- */
  --paper:      #edf0f4;   /* page, sitting a half-step inside the artwork    */
  --surface:    #ffffff;   /* cards                                            */
  --surface-2:  #f6f8fb;   /* rails inside cards                               */
  --ink:        #0e1726;   /* headings — deeper than 1.2, for larger type      */
  --ink-soft:   #46536b;   /* body copy                                        */
  --ink-faint:  #78849a;   /* labels, footnotes                                */
  --line:       #d3dae3;   /* hairlines                                        */
  --line-soft:  #e5eaf0;   /* hairlines inside cards                           */
  --navy:       #16233d;   /* accent: primary panel, active control            */
  --navy-deep:  #0d1526;
  --navy-line:  #2b3c5c;   /* hairline on a navy ground                        */

  /* ---- geometry ---------------------------------------------------------- */
  --measure:   1240px;                       /* page column                  */
  --pad:       clamp(18px, 4.4vw, 56px);     /* page gutter                  */
  --r-panel:   clamp(16px, 1.7vw, 24px);     /* generation panels            */
  --r-ctl:     10px;                         /* buttons and switches         */
  --r-chip:    999px;                        /* pills                        */

  --shadow-1: 0 1px 2px rgba(14, 23, 38, 0.04),
              0 10px 28px -18px rgba(14, 23, 38, 0.34);
  --shadow-2: 0 2px 4px rgba(14, 23, 38, 0.05),
              0 28px 60px -30px rgba(14, 23, 38, 0.44);

  /* ---- type -------------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
               Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: rgba(22, 35, 61, 0.14); }

/* --------------------------------------------------------------------------
   Chinese and Latin are set differently on purpose.
   Han characters are full-width: the letterspacing that makes a small Latin
   label look deliberate opens a Chinese label into loose, broken type, and the
   tight leading that flatters a Latin headline crushes a Chinese one.  The
   language module sets <html lang="zh-CN">, so the correction can be made once,
   here, instead of being sprinkled through the layout.
   -------------------------------------------------------------------------- */
:lang(zh) {
  word-break: normal;
  line-break: strict;
  text-wrap: pretty;
}

/* small labels: kill the tracking, keep the weight */
:lang(zh) .u-label {
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* body copy: a little more air than Latin needs */
:lang(zh) p { line-height: 1.78; }

/* Chinese wants its own quotes */
:lang(zh) q { quotes: "\201C" "\201D" "\2018" "\2019"; }

/* headings: Han sits better a touch tighter and never below 1.25 leading */
:lang(zh) h1,
:lang(zh) h2,
:lang(zh) h3 { line-height: 1.3; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Shared atoms
   -------------------------------------------------------------------------- */

/* one small-caps label, used by both the homepage and the viewers */
.u-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* a chip of metadata */
.u-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: rgba(255, 255, 255, 0.66);
  color: var(--ink-soft);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.u-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy);
  flex: 0 0 auto;
}

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}