/* englishlearn / 页边 — base tokens, resets, type, controls
   Chivo is self-hosted (assets/fonts, latin subset) so the drawn display face
   really loads; Sitka Text carries the reading column and Segoe UI Variable the
   UI chrome. Chinese falls back to Microsoft YaHei throughout. */

@font-face {
  font-family: "Chivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/chivo-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Chivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/chivo-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Chivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/chivo-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Chivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chivo-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Chivo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/chivo-latin-900-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  /* ground: the ivory of an uncoated book page, not a brand field */
  --ground: #f2f1ec;
  --ground-deep: #e8e6df;
  --panel: #fbfaf7;
  --panel-2: #efeee7;
  --line: #dad8d0;
  --line-soft: #e4e2da;

  /* ink on that page */
  --gold: #8a5b18;
  --gold-dim: #b58a3c;
  --ink: #23281f;
  --muted: #5b655a;
  --faint: #6e7769;

  /* the sheet the reading happens on */
  --paper: #fcfbf8;
  --paper-deep: #efeee8;
  --paper-line: #d8d6ce;
  --ink-dark: #1d241c;
  --ink-dark-2: #3e463d;
  --ink-dark-3: #5c645b;

  /* the plate a control sits on, and the veil that lets type sit over a photograph */
  --btn-bg: #1f2a21;
  --btn-bg-hover: #2c3a2f;
  --btn-ink: #f3f1ea;
  --scrim: rgba(247, 243, 232, 0.8);

  --negative: #8f3a26;
  --positive: #35573c;

  /* chart colours on the paper canvas */
  --chart-1: #2f5d3d;
  --chart-2: #b9973f;
  --chart-3: #7d8874;
  --chart-4: #a94934;
  --chart-muted: #b9b7a4;
  --chart-mark: #1b2a20;
  --chart-span: 0.07;
  --chart-track: #e2dac6;
  --grid: #ddd4bd;
  --axis-ink: #6f7c71;

  /* headings are set in the serif; Chivo is kept for the wordmark and small labels */
  --font-display: "Sitka Display", "Sitka Heading", "Sitka Banner", Georgia, "Microsoft YaHei", serif;
  --font-read: "Sitka Text", "Sitka Small", Cambria, Georgia, "Microsoft YaHei", serif;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-mark: "Chivo", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

  --t-display: clamp(34px, 5.4vw, 76px);
  --t-h1: clamp(30px, 3.6vw, 50px);
  --t-h2: clamp(24px, 2.5vw, 33px);
  --t-h3: 20px;
  --t-body: 17px;
  --t-small: 15px;
  --t-micro: 12.5px;

  --gutter: 28px;
  --radius: 3px;
  --radius-nav: 8px;
  --speed: 190ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --shell-side: 236px;
  --shell-pad: 30px;
}

/* the two alternate schemes the reader can pick in 设置 */
html[data-theme="sepia"] {
  --ground: #f2e9d6;
  --ground-deep: #e8dcc2;
  --panel: #fbf4e4;
  --panel-2: #ece1c9;
  --line: #d8c9aa;
  --line-soft: #e3d6bd;
  --paper: #fdf7e7;
  --paper-deep: #f0e6cf;
  --paper-line: #d8c9aa;
  --ink: #241f16;
  --muted: #5d5544;
  --faint: #6f6653;
  --ink-dark: #201b12;
  --ink-dark-2: #46402f;
  --ink-dark-3: #645c48;
  --gold: #8a5b18;
  --scrim: rgba(242, 233, 214, 0.82);
}

html[data-theme="night"] {
  --ground: #12150f;
  --ground-deep: #0b0d09;
  --panel: #191d15;
  --panel-2: #20251b;
  --line: #2c3226;
  --line-soft: #242a1e;
  --gold: #d3b271;
  --gold-dim: #9b8149;
  --ink: #e8e3d3;
  --muted: #a0a695;
  --faint: #7b8271;
  --paper: #191d15;
  --paper-deep: #14180f;
  --paper-line: #2c3226;
  --ink-dark: #e8e3d3;
  --ink-dark-2: #b6bcaa;
  --ink-dark-3: #8d9483;
  --btn-bg: #e8e3d3;
  --btn-bg-hover: #f5f0e0;
  --btn-ink: #12150f;
  --scrim: rgba(18, 21, 15, 0.78);
  --chart-1: #cdb877;
  --chart-2: #7fa383;
  --chart-3: #8b9787;
  --chart-muted: #4a574b;
  --chart-mark: #e6e2d4;
  --chart-track: #26332a;
  --grid: #2b3a2e;
  --axis-ink: #87927f;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}
html[data-theme="night"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.7;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.18; letter-spacing: -0.008em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
svg { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
table { border-collapse: collapse; }

::selection { background: #ecdcae; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* thin scrollbar that does not fight the page */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--ground); border-radius: 8px; }

.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap-tight { max-width: 1080px; }

/* ---------- type helpers ---------- */
/* Chivo keeps the wordmark and the small uppercase labels; the serif takes the
   headings, because a light page wants a book voice, not a poster voice. */
.display {
  font-family: var(--font-mark);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-synthesis: none;
}
.h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.016em; }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h2); line-height: 1.14; letter-spacing: -0.012em; }
.h3 { font-family: var(--font-ui); font-size: var(--t-h3); line-height: 1.3; font-weight: 600; letter-spacing: 0; }
.mark-label { font-family: var(--font-mark); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.serif { font-family: var(--font-read); }
.ui { font-family: var(--font-ui); }
.lead { font-size: 19px; line-height: 1.62; color: var(--ink); }
.small { font-size: var(--t-small); line-height: 1.55; }
.micro { font-size: var(--t-micro); line-height: 1.45; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.gold { color: var(--gold); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.caps { text-transform: uppercase; letter-spacing: 0.08em; }
.on-paper { color: var(--ink-dark); }
.on-paper .muted { color: var(--ink-dark-2); }
.on-paper .faint { color: var(--ink-dark-3); }

.hr { height: 1px; background: var(--line); border: 0; }
.hr-paper { height: 1px; background: var(--paper-line); border: 0; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease), transform var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { transform: translateY(1px); }
.btn-ghost {
  background: var(--panel-2);
  color: var(--ink);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--panel); color: var(--gold); }
.btn-line {
  background: transparent;
  border-color: var(--ink-dark);
  color: var(--ink-dark);
}
.btn-line:hover { background: var(--ink-dark); color: #f6f2e6; }
.btn-sm { height: 34px; padding: 0 13px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.link {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  transition: color var(--speed) var(--ease), text-decoration-color var(--speed) var(--ease);
}
.link:hover { color: var(--gold); text-decoration-color: var(--gold); }

.field { display: grid; gap: 7px; }
.field > label { font-size: var(--t-small); color: var(--muted); }
.input, .select, .textarea {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.textarea { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--gold); background: var(--panel-2); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.on-paper .input, .on-paper .select, .on-paper .textarea { background: #fffdf6; border-color: var(--paper-line); color: var(--ink-dark); }
.on-paper .input:focus, .on-paper .select:focus, .on-paper .textarea:focus { border-color: var(--ink-dark); background: #fffdf6; }
.on-paper .field > label { color: var(--ink-dark-2); }

/* radio / checkbox as a ledger tick */
.tick { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--t-small); }
.tick input { appearance: none; width: 16px; height: 16px; margin: 4px 0 0; border: 1px solid var(--line); border-radius: 2px; background: var(--panel); flex: none; transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease); }
.tick input:checked { background: var(--gold); border-color: var(--gold); }
.on-paper .tick input { background: #fffdf6; border-color: var(--paper-line); }
.on-paper .tick input:checked { background: var(--ink-dark); border-color: var(--ink-dark); }

/* ---------- surfaces ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.sheet {
  background: var(--paper);
  color: var(--ink-dark);
  border-radius: var(--radius);
}
.sheet .hr { background: var(--paper-line); }

/* ---------- the word popover ---------- */
.gloss {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  text-underline-offset: 3px;
}
.gloss:hover { color: var(--gold); }
.on-paper .gloss:hover { color: #8a5b18; }

.wordcard {
  position: absolute;
  z-index: 60;
  width: 300px;
  padding: 14px 16px 12px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  color: var(--ink-dark);
  box-shadow: none;
  animation: wordcard-in 160ms var(--ease) both;
}
@keyframes wordcard-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wordcard .wc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wordcard .wc-word { font-family: var(--font-read); font-size: 25px; line-height: 1.1; }
.wordcard .wc-ipa { font-size: 13px; color: var(--ink-dark-3); }
.wordcard .wc-pos { font-size: 11.5px; color: var(--gold); border: 1px solid var(--paper-line); border-radius: 2px; padding: 1px 5px; letter-spacing: .04em; }
.wordcard .wc-en { margin-top: 9px; font-family: var(--font-read); font-size: 15.5px; line-height: 1.5; color: var(--ink-dark); }
.wordcard .wc-zh { margin-top: 6px; font-size: 13.5px; color: var(--ink-dark-3); }
.wordcard .wc-src { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--paper-line); display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--ink-dark-3); }
.wordcard .wc-src b { font-weight: 500; color: var(--gold); }
.wordcard .wc-act { margin-top: 10px; display: flex; gap: 6px; }
.wordcard .wc-act button { height: 28px; padding: 0 10px; font-size: 12.5px; border: 1px solid var(--paper-line); border-radius: 2px; color: var(--ink-dark); }
.wordcard .wc-act button:hover { border-color: var(--gold); color: var(--gold); }
.wordcard .wc-act button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  color: var(--ink-dark);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  max-width: min(92vw, 460px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast b { color: var(--gold); font-weight: 600; }

/* ---------- entrance motion (the sheet's signature) ---------- */
/* Content is never hidden while it waits to be revealed: the blocks rise a little,
   they do not fade in from nothing, so a reader with no observer still sees the page. */
[data-rise] { transform: translateY(22px); transition: transform 760ms var(--ease); }
[data-rise].in { transform: none; }
[data-mask] { display: block; overflow: hidden; }
[data-mask] > span { display: block; transform: translateY(102%); transition: transform 900ms cubic-bezier(.16, .84, .24, 1); }
[data-mask].in > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-rise], [data-mask] > span { transform: none; }
}

/* ---------- misc ---------- */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: -9999px; top: 12px; z-index: 100; background: var(--btn-bg); color: var(--btn-ink); padding: 9px 14px; border-radius: 2px; font-size: 14px; font-weight: 600; }
.skip:focus { left: 12px; }

.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 2px; font-size: 13px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.tag-gold { color: var(--gold); border-color: var(--gold-dim); }
.on-paper .tag { border-color: var(--paper-line); color: var(--ink-dark-2); }
.on-paper .tag-gold { color: #8a5b18; border-color: #b9973f; }

.dotline { display: flex; align-items: center; gap: 10px; font-size: var(--t-micro); color: var(--faint); text-transform: uppercase; letter-spacing: .1em; }
.dotline::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* print: the export path to paper */
@media print {
  .no-print, header.site-head, nav.app-nav, .foot, .toast { display: none !important; }
  body { background: #fff; color: #111; }
  .sheet, .panel { border: 0; background: #fff; }
  a { text-decoration: none; color: #111; }
}


/* ------------------------------------------------------------------ motion
   Page-to-page transition: a paper veil fades in before the browser leaves,
   and each page arrives with a short lift. Both are feedback, not theatre,
   and both switch off with 「减少动效」. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }

@media (prefers-reduced-motion: no-preference) {
  body main { animation: page-in 300ms var(--ease) both; }
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.veil {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ground); opacity: 0; pointer-events: none;
  transition: opacity 170ms var(--ease);
}
body.leaving .veil { opacity: 1; }

body[data-motion="off"] main { animation: none; }
body[data-motion="off"] .veil { display: none; }
body[data-motion="off"] { scroll-behavior: auto; }

/* 转场：一张纸盖上来，再化开 */
.page-wipe {
  position: fixed; inset: 0; z-index: 320;
  background: var(--ground);
  visibility: hidden; opacity: 0; pointer-events: none;
}