/* Koopa.ai — shared theme
   One source for the look of every page: colours, type, header, buttons, footer, grain.
   Page-specific styles live in each page; load this first so pages can override it. */

:root {
  --paper: #f1ebdd;        /* rice-paper background */
  --ink: #14110f;          /* text */
  --ink-soft: #4a433c;     /* secondary text */
  --red: #c3271b;          /* vermilion accent: seal, labels, highlights */
  --rule: rgba(20,17,15,.25);
  --paper-veil: rgba(241,235,221,.86);
  --display: "Bahnschrift Condensed", "Arial Narrow", Impact, "Haettenschweiler", sans-serif;
  --serif: Georgia, "Times New Roman", "Songti SC", SimSun, serif;
  --mono: Consolas, "Cascadia Mono", "Courier New", monospace;
  --gutter: clamp(16px, 4vw, 48px);
}

/* Ink-brush lettering for headline moments (Ma Shan Zheng, SIL Open Font Licence, see fonts/OFL.txt).
   The file holds capitals, digits and ' , ! ? & - only; anything else falls back to the display font. */
@font-face { font-family: "Koopa Brush"; src: url("fonts/koopa-brush-v4.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body { background: var(--paper); color: var(--ink); font-family: var(--serif); overflow-x: hidden; }

/* paper grain over everything */
#grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .09; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* header */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between;
  padding: 22px var(--gutter) 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  background: rgba(241,235,221,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(20,17,15,.08); }
header a { color: var(--ink); text-decoration: none; }
header a:hover { color: var(--red); }

/* type */
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 18px; }
.eyebrow b { color: var(--red); font-weight: 400; }
/* the seal: a real carved-seal image, stamped slightly off square like a hand-pressed chop */
.dot { display: inline-block; width: .5em; height: .5em; margin-left: .08em; vertical-align: -.06em;
  background: url("img/seal.png") center / contain no-repeat; transform: rotate(-4deg); }
h1, h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .86; letter-spacing: -.01em; }
.brush { font-family: "Koopa Brush", var(--display); line-height: 1; letter-spacing: .02em; }
.brush .dot { margin: 0 .06em 0 .1em; }

/* buttons */
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.btn { font-family: var(--mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  padding: 16px 26px; border: 1px solid var(--ink); color: var(--ink); background: rgba(241,235,221,.7); transition: background .25s, color .25s; }
.btn.primary { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ctl { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  padding: 10px 14px; color: var(--ink); background: rgba(241,235,221,.82); border: 1px solid var(--rule); transition: background .25s, color .25s; }
.ctl:hover, .ctl[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* footer */
footer { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  padding: 20px var(--gutter); border-top: 1px solid var(--rule); background: var(--paper-veil);
  font-family: var(--mono); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; }
footer a { color: var(--ink); text-decoration: none; margin-right: 22px; }
footer a:hover { color: var(--red); }

/* staged entrance: an element with .enter starts hidden and fades in once <body> has .ready, after its --d delay */
.enter { opacity: 0; transform: translateY(14px);
  transition: opacity 1.2s ease var(--d, 0s), transform 1.2s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
body.ready .enter { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .enter { transform: none; } }

/* languages: Chinese pages switch to Chinese font stacks; blocks marked .lang show only for the active language */
/* body text: a serif where a good one exists (Mac, or Noto installed), otherwise the system sans rather than SimSun/PMingLiU, which look thin at small sizes */
:root[lang="zh-CN"] { --display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "PingFang SC", "Microsoft YaHei", "SimSun", serif; }
:root[lang="zh-TW"] { --display: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PingFang TC", "Microsoft JhengHei", "PMingLiU", serif; }
:root[lang^="zh"] h1, :root[lang^="zh"] h2 { letter-spacing: 0; line-height: 1.08; }
:root[lang^="zh"] p, :root[lang^="zh"] .sub, :root[lang^="zh"] .k, :root[lang^="zh"] .summary { font-style: normal; }   /* Chinese is not set in italics */
:root[lang^="zh"] .eyebrow, :root[lang^="zh"] .btn, :root[lang^="zh"] .ctl, :root[lang^="zh"] header, :root[lang^="zh"] footer { letter-spacing: .12em; }
.lang { display: none; }
body[data-lang="en"] .lang[data-lang="en"], body[data-lang="zh-CN"] .lang[data-lang="zh-CN"], body[data-lang="zh-TW"] .lang[data-lang="zh-TW"] { display: block; }
body:not([data-lang]) .lang[data-lang="en"] { display: block; }   /* before the script runs, show English */

/* language switcher in the header */
header .right { display: flex; align-items: center; gap: 18px; }
.langs { display: flex; gap: 2px; }
.langs button { cursor: pointer; font: inherit; letter-spacing: .1em; color: var(--ink-soft); background: none; border: 0; padding: 2px 6px; }
.langs button:hover { color: var(--red); }
.langs button[aria-pressed="true"] { color: var(--ink); border-bottom: 2px solid var(--red); }
/* update-notification bell (push.js) */
.bell { cursor: pointer; font: inherit; letter-spacing: .06em; color: var(--ink-soft); background: none; border: 0; padding: 2px 4px; display: inline-flex; align-items: center; gap: 6px; }
.bell:hover, .bell[aria-pressed="true"] { color: var(--red); }
.bell[aria-pressed="true"] svg path:first-child { fill: currentColor; }
.bell:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.bell:disabled { opacity: .5; cursor: progress; }
.bell-tip { position: fixed; z-index: 30; top: 64px; right: 16px; max-width: min(360px, calc(100vw - 32px)); display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; background: var(--paper, #f1ebdd); color: var(--ink); border: 1px solid var(--ink-soft); border-radius: 4px; box-shadow: 0 10px 30px rgba(20,17,15,.18); font-size: 15px; line-height: 1.5; }
.bell-tip[hidden] { display: none; }
.bell-tip .x { cursor: pointer; font: inherit; font-size: 20px; line-height: 1; background: none; border: 0; color: var(--ink-soft); padding: 0 2px; }
@media (max-width: 640px) { .bell .lbl { display: none; } }

@media (max-width: 640px) { header #tag { display: none; } }
@media (max-width: 420px) { header { letter-spacing: .14em; } header .right { gap: 12px; } }   /* keep CONTACT on screen on small phones */