/* 國際商業期刊導讀 · Business Journal Reading — one stylesheet for the contents
   page and every reading in the series.

   The look follows the editorial conventions of the international business
   press — a white page, near-black ink, a sharp serif for reading, a bold
   grotesque for article headlines, teal for labels and links, one red used
   sparingly, and hairline rules in place of boxes. It is modelled on hbr.org's
   design language and deliberately stops there: no masthead, logo, name or
   licensed typeface of theirs, because this is a public page and must not read
   as theirs. System fonts stand in for the licensed ones.

   A teacher drives this in a one-to-one or small-group session, usually on one
   laptop turned sideways or a shared screen. Design notes:

   - English leads and is the only thing on screen by default. Traditional
     Chinese sits behind a small 中 chip on every line, so the learner tries the
     English first and the safety net is one tap away. Instructions, task
     prompts and the contents list stay bilingual throughout — those are
     scaffolding, not comprehension practice.
   - Interactive parts look interactive: anything with a border and a hand
     cursor can be clicked. Nothing else moves.
   - Wrong answers wobble and stay open. There is no score, no streak and no
     progress bar; the teacher is the feedback, and the exercise is a reason to
     talk.
   - Light theme only. It is read side by side in a lit room, and the source
     PDF is the reference.
   - Text sizes are set for adults reading at arm's length on a shared screen,
     a size up from a personal document. */

:root {
  /* The token names are the house names kept from the first lesson, so every
     rule below still reads the same way. Their values are the press palette:
     --navy now holds the teal that marks what is a label or can be clicked,
     and --gold the red that marks the one thing per screen that matters. All
     text colours clear WCAG AA on the white page. */
  --paper: #ffffff;
  --card: #ffffff;
  --ink: #222222;
  --ink-soft: #555555;
  --ink-faint: #767676;

  --navy: #075e64;
  --navy-soft: #edf5f5;
  --navy-line: #b8d4d5;

  --gold: #c4161c;
  --gold-soft: #f6f6f7;   /* the aside and prompt ground: grey, so the red stays rare */
  --gold-line: #c4161c;

  --good: #2c7a58;
  --good-soft: #e4f2ea;
  --good-line: #a8d6be;

  --line: #e2e2e2;
  --rule: #cfcfcf;

  /* Charter and Georgia stand in for the press's licensed text serif, and
     Helvetica for its grotesque. PingFang TC closes the headline stack so a
     Chinese word in a headline is set in the same weight as the English. */
  --font-en: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-head: "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Heiti TC", sans-serif;
  --font-zh: "PingFang TC", "Heiti TC", "Noto Sans TC", "Microsoft JhengHei", "Hiragino Sans CNS", sans-serif;
  --font-ui: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --bar-h: 54px;
  --measure: 46rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-en);
  font-size: 18px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

/* ---------------- the Chinese layer ----------------

   Hidden everywhere by default. A line opens on its own when tapped; the 中文
   switch in the bar opens all of them at once, at which point the individual
   chips are just clutter and go away. */

.zh {
  display: none;
  font-family: var(--font-zh);
  font-size: 0.82em;
  line-height: 1.7;
  color: var(--ink-soft);
  letter-spacing: .01em;
}

.open .zh,
body.zh-all .zh { display: block; }

.zh-chip {
  font-family: var(--font-zh);
  font-size: 11px;
  line-height: 1;
  vertical-align: 2px;
  margin-left: 6px;
  padding: 3px 5px;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.zh-chip:hover { color: var(--navy); border-color: var(--navy-line); background: var(--navy-soft); }
.open > .zh-chip,
.open .en > .zh-chip { opacity: .35; }
body.zh-all .zh-chip { display: none; }

/* Lines the learner is not being tested on stay bilingual at all times. Two
   groups qualify: scaffolding that only helps if it is understood (hints, task
   prompts, navigation), and anything already sitting behind a deliberate reveal
   — a flipped phrase card, an opened "useful language" list — where a second
   tap would only be in the way. */
.hint-zh, .source .zh, .prompt .zh, .toc .t .zh, .why .zh,
.starters .zh, .frames .zh, .tick-t .zh, .model .zh { display: block; }

.pair[data-zh] { cursor: pointer; }
.pair p { margin: 0; }
.pair .zh { margin-top: 4px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 12px; top: 12px; z-index: 40;
  background: var(--card); padding: 10px 16px; border-radius: 8px;
}

:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------------- top bar ---------------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}

.bar-title {
  flex: 1;
  margin: 0;
  min-width: 0;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-title span {
  font-family: var(--font-zh);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 8px;
}

.bar-btn {
  flex: none;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 6px 11px;
  cursor: pointer;
}
.bar-btn:hover { background: #f5f5f5; }
.bar-btn-quiet { color: var(--ink-soft); border-color: var(--line); font-size: 15px; padding: 4px 9px; }
.bar-btn-zh { font-family: var(--font-zh); }
/* The bar's one red: the 中文 switch, lit. It is the only control up here that
   changes the whole page, so it is the one allowed to be loud. */
.bar-btn-zh[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #fff; }

@media (min-width: 900px) { #navToggle { display: none; } }

/* ---------------- shell + contents ---------------- */

.shell {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 900px) {
  .shell { grid-template-columns: 15rem minmax(0, 1fr); gap: 44px; padding: 0 28px; }
}

.toc { font-family: var(--font-ui); }

@media (min-width: 900px) {
  .toc {
    position: sticky;
    top: var(--bar-h);
    max-height: calc(100vh - var(--bar-h));
    overflow-y: auto;
    padding: 30px 0 40px;
    scrollbar-width: thin;
  }
}

.toc-head {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.toc ul { list-style: none; margin: 0; padding: 0; }

.toc a {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 8px;
  padding: 8px 10px 8px 6px;
  border-radius: 3px;
  text-decoration: none;
  color: var(--ink-soft);
  border-left: 2px solid transparent;
}
.toc a:hover { background: var(--navy-soft); color: var(--ink); }
.toc a .n {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  text-align: right;
  padding-top: 3px;
}
.toc a .t .en { display: block; font-size: 13.5px; line-height: 1.35; }
.toc a .t .zh { font-size: 11.5px; color: var(--ink-faint); }
.toc a.here {
  background: var(--navy-soft);
  border-left-color: var(--navy);
  color: var(--navy);
}
.toc a.here .n, .toc a.here .t .zh { color: var(--navy); }
.toc a.here .t .en { font-weight: 600; }

@media (max-width: 899px) {
  #nav {
    position: fixed;
    top: var(--bar-h);
    left: 0; right: 0;
    z-index: 25;
    max-height: min(70vh, 30rem);
    overflow-y: auto;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(28, 36, 48, .12);
    padding: 14px 18px 18px;
    display: none;
  }
  body.nav-open #nav { display: block; }
  body.nav-open .nav-scrim {
    display: block;
    position: fixed;
    inset: var(--bar-h) 0 0;
    z-index: 20;
    background: rgba(28, 36, 48, .25);
  }
}

/* ---------------- cover ---------------- */

main { max-width: var(--measure); padding-bottom: 6rem; }

.cover { padding: 40px 0 10px; }

/* The topic line above a headline, the way the press labels a story: bold,
   teal, sentence case and untracked. It is set in the headline face, which
   falls through to PingFang for the Chinese series name. */
.kicker {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--navy);
}

/* The article headline: a bold grotesque, large and tightly set. */
.cover h1 {
  margin: 0 0 24px;
  font-family: var(--font-head);
  font-size: 2.75rem;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.015em;
}
/* Inline so the 中 chip trails the last word rather than dropping a line. */
.cover h1 .en { display: inline; }
.cover h1 .zh { font-size: .95rem; font-weight: 400; margin-top: 8px; }

.cover-intro { margin-bottom: 26px; font-size: 1.06rem; }

.goals {
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.goals-intro { font-family: var(--font-ui); font-size: .88rem; color: var(--ink-soft); }
.goals ul { margin: 12px 0 0; padding-left: 1.1rem; }
.goals li { margin: 0 0 8px; font-size: .98rem; }
.goals li .zh { font-size: .8rem; }

.source {
  margin: 22px 0 0;
  font-family: var(--font-ui);
  font-size: .76rem;
  line-height: 1.6;
  color: var(--ink-faint);
}
.source .zh { font-size: .95em; color: var(--ink-faint); margin-top: 2px; }

/* ---------------- photographs ----------------

   One picture opens the lesson and one opens each habit. They are illustration,
   not content, so they stay quiet: a fixed 16:9 band the text column can sit
   against, no shadow, and a hairline that matches every other card on the page.
   Each file is 16:9 already; `object-position` (set per photo in content.js)
   decides what survives the tighter crop on a narrow screen. */

.photo { margin: 0 0 26px; }

.photo img {
  display: block;
  width: 100%;
  /* The width/height attributes reserve the space before the file arrives, but
     they also set a used height — `auto` hands control back to aspect-ratio. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;               /* square-cornered, as the press runs pictures */
  border: 1px solid var(--line);  /* keeps a pale sky from bleeding into the page */
  background: var(--navy-soft);   /* holds the space while the file loads */
}

.photo figcaption {
  margin-top: 7px;
  font-family: var(--font-ui);
  font-size: .7rem;
  letter-spacing: .02em;
  color: var(--ink-faint);
  text-align: right;
}

/* On the cover the picture sits between the title and the standfirst, and can
   run a little shallower — the goals card below it is the thing to reach. */
.photo-hero { margin: 0 0 24px; }
.photo-hero img { aspect-ratio: 21 / 9; }

@media (max-width: 620px) {
  .photo img, .photo-hero img { aspect-ratio: 3 / 2; }
}

/* ---------------- steps ---------------- */

.step { padding-top: 56px; }

/* A section opens under a heavy black rule, the way a printed section does,
   with its number in the series red rather than on a badge. */
.step-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  margin: 0 0 24px;
  padding-top: 14px;
  border-top: 3px solid var(--ink);
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.step-head .n {
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold);
}
.step-head .titles .en { display: inline; }
.step-head .titles .zh { font-size: .95rem; font-weight: 400; margin-top: 4px; }

.lead {
  margin: 0 0 24px;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink-soft);
}
.lead .zh { font-style: normal; }

/* ---------------- quote ---------------- */

.quote {
  margin: 0 0 28px;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--gold-line);
}
.quote blockquote { margin: 0; font-size: 1.45rem; line-height: 1.35; }
.quote blockquote p { margin: 0; }
.quote .zh { font-size: .82rem; margin-top: 8px; font-style: normal; }
.quote figcaption {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--ink-faint);
}

.summary { margin: 0 0 20px; }

/* ---------------- note ---------------- */

/* An aside, the way a sidebar runs in print: a grey panel under a teal rule. */
.note {
  margin: 28px 0;
  padding: 16px 22px 18px;
  background: var(--gold-soft);
  border-top: 3px solid var(--navy);
}
.note h4 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}
.note h4 .en { display: inline; }
.note h4 .zh { text-transform: none; letter-spacing: 0; margin-top: 4px; }
.note p { font-size: .96rem; }

/* ---------------- speak buttons ---------------- */

.say {
  font-size: .78em;
  line-height: 1;
  margin-left: 7px;
  padding: 3px 5px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  opacity: .55;
  transition: opacity .12s, border-color .12s;
}
.say:hover { opacity: 1; border-color: var(--navy-line); }
.say-quiet { border-color: transparent; }

/* ---------------- section labels ---------------- */

/* A label inside a step, set like a list heading in the press: bold, sentence
   case, near-black — not the tracked capitals of a form. */
.label {
  margin: 34px 0 12px;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink);
}
.label .en { display: inline; }
.label .zh {
  text-transform: none;
  letter-spacing: 0;
  font-size: .82rem;
  font-weight: 400;
  margin-top: 4px;
}

.hint {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: .84rem;
  color: var(--ink-faint);
}
.hint-zh { font-family: var(--font-zh); font-size: .95em; margin-top: 2px; }

/* ---------------- collocation cards ---------------- */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 10px;
  /* Opening one card should not stretch the others sharing its row. */
  align-items: start;
}

.card {
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.card:hover { border-color: var(--navy-line); box-shadow: 0 2px 8px rgba(28, 36, 48, .06); }
.card-en { margin: 0; font-size: 1rem; font-weight: 600; }
.card-back { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.card.open { border-color: var(--navy-line); background: var(--navy-soft); }
.card.open .card-back { display: block; }
.card-zh { margin: 0; font-family: var(--font-zh); font-size: .84rem; color: var(--ink-soft); }
.card-eg { margin: 6px 0 0; font-size: .9rem; font-style: italic; color: var(--ink-soft); }
.card-eg-zh {
  margin: 3px 0 0;
  font-family: var(--font-zh);
  font-size: .78rem;
  line-height: 1.65;
  color: var(--ink-faint);
}

/* ---------------- activities ---------------- */

.activity { margin: 0 0 10px; }

.chip {
  font-family: var(--font-en);
  font-size: .95rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px 13px;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s, color .12s;
}
.chip:hover { border-color: var(--navy-line); background: var(--navy-soft); }
.chip.picked { border-color: var(--navy); background: var(--navy-soft); color: var(--navy); font-weight: 600; }
.chip.done {
  border-color: var(--good-line);
  background: var(--good-soft);
  color: var(--good);
  cursor: default;
}
.chip.out { opacity: .4; }

@keyframes wobble {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}
.no { animation: wobble .4s ease; border-color: #d8a08a; }

/* matching */

.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match .col { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.match .chip { width: 100%; }
.match .col-b .chip { color: var(--ink-soft); }

.tally {
  margin: 12px 0 0;
  font-family: var(--font-ui);
  font-size: .8rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.match.all-done .tally { color: var(--good); font-weight: 600; }

/* gap fill */

.gap {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
}
/* The number sits in its own narrow column so the sentence, and the Chinese
   under it, share one left edge. */
.gap-line { margin: 0 0 10px; }
.gap-line .en { display: grid; grid-template-columns: 1.6rem 1fr; }
.gap-line .zh { margin-top: 5px; padding-left: 1.6rem; }
.gap-n {
  font-family: var(--font-ui);
  font-size: .8rem;
  color: var(--ink-faint);
  padding-top: 5px;
}
.gap-text { font-size: 1rem; }

.slot {
  display: inline-block;
  min-width: 9rem;
  border-bottom: 2px solid var(--navy-line);
  text-align: center;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.3;
}
.gap.solved .slot { border-bottom-color: var(--good); color: var(--good); }

.opts { list-style: none; margin: 0; padding: 0 0 0 1.6rem; display: flex; flex-wrap: wrap; gap: 8px; }
.gap.solved .opts { display: none; }

.why {
  display: none;
  margin: 10px 0 0 1.6rem;
  font-family: var(--font-ui);
  font-size: .84rem;
  color: var(--ink-soft);
}
.gap.solved .why { display: block; }
.why .zh { font-size: .95em; color: var(--ink-faint); margin-top: 2px; }

/* opinion poll */

.poll-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.poll-row .pair { flex: 1 1 18rem; }
.poll-btns { display: flex; gap: 6px; flex: none; }
.poll-btns .chip, .role-btns .chip {
  font-family: var(--font-ui);
  font-size: .82rem;
  padding: 5px 11px;
  text-align: center;
}
/* The Chinese rides under the label inside the button, so a two-word answer
   does not become two buttons wide. */
.chip em {
  display: block;
  font-family: var(--font-zh);
  font-style: normal;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--ink-faint);
}
.chip.on { border-color: var(--navy); background: var(--navy); color: #fff; font-weight: 600; }
.chip.on em { color: rgba(255, 255, 255, .8); }

/* kitchen cabinet audit */

.roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 12px;
  align-items: start;
}
.role {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.role-icon { margin: 0 0 6px; font-size: 1.4rem; line-height: 1; }
.role-desc { margin-top: 6px; font-size: .9rem; color: var(--ink-soft); }
.role-btns { display: flex; gap: 6px; margin-top: 12px; }

/* discussion */

.discuss { margin-bottom: 8px; }
.ask {
  margin: 0 0 16px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: 0 4px 4px 0;
}
.ask .en { font-size: 1.04rem; }

.reveal {
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
}
.reveal:hover { color: var(--navy); border-color: var(--navy-line); }
.reveal[aria-expanded="true"] { color: var(--navy); border-style: solid; border-color: var(--navy-line); }

.starters { list-style: none; margin: 12px 0 0; padding: 0; }
.starters li {
  margin: 0 0 8px;
  padding: 8px 12px;
  background: var(--navy-soft);
  border-radius: 3px;
  font-size: .95rem;
  font-style: italic;
  color: var(--ink-soft);
}
.starters li .en, .frames li .en { display: block; }
.starters li .zh, .frames li .zh {
  margin-top: 4px;
  font-style: normal;
  font-size: .78rem;
  color: var(--ink-faint);
}

/* tasks */

.task {
  margin: 0 0 12px;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.task > .label { margin-top: 0; }
.task-how { margin-bottom: 14px; font-size: .98rem; }

.prompts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prompt {
  width: 100%;
  text-align: left;
  font-family: var(--font-en);
  font-size: .98rem;
  color: var(--ink);
  background: var(--gold-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 11px 14px;
  cursor: pointer;
}
.prompt:hover { border-color: var(--navy-line); background: var(--navy-soft); }
.prompt .en { display: block; }
.prompt .zh { font-size: .8rem; margin-top: 3px; }
.prompt.on { border-color: var(--navy); background: var(--navy-soft); }
.prompt.on .en { font-weight: 600; color: var(--navy); }

.checklist, .frames { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.checklist-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
}
/* The Chinese belongs beside its English label, so it takes the free space and
   leaves the counter pinned to the right. */
.checklist-head em {
  margin-right: auto;
  font-family: var(--font-zh);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.count { font-weight: 400; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }

.checklist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  font-family: var(--font-en);
  font-size: .92rem;
  color: var(--ink-soft);
  background: var(--gold-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 6px 13px 6px 9px;
  cursor: pointer;
}
.tick .box {
  width: 14px; height: 14px;
  border: 1.5px solid var(--rule);
  border-radius: 4px;
  flex: none;
}
.tick:hover { border-color: var(--navy-line); }
.tick.on { color: var(--good); border-color: var(--good-line); background: var(--good-soft); }
.tick.on .box { background: var(--good); border-color: var(--good); position: relative; }
.tick.on .box::after {
  content: "✓";
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 11px;
  line-height: 12px;
  text-align: center;
}

.frames ul { list-style: none; margin: 0; padding: 0; }
.frames li {
  margin: 0 0 8px;
  padding: 9px 13px;
  background: var(--gold-soft);
  border-left: 3px solid var(--navy);
  border-radius: 0 3px 3px 0;
  font-size: .95rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------------- teacher panel ---------------- */

.panel {
  position: fixed;
  z-index: 40;
  top: calc(var(--bar-h) + 8px);
  right: 14px;
  width: min(22rem, calc(100vw - 28px));
  max-height: calc(100vh - var(--bar-h) - 24px);
  overflow-y: auto;
  padding: 18px 20px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(28, 36, 48, .18);
  font-family: var(--font-ui);
}
.panel[hidden] { display: none; }

.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.panel-head h2 { margin: 0 0 4px; font-family: var(--font-ui); font-size: .95rem; }
.panel-head h2 span { font-family: var(--font-zh); font-size: .8rem; font-weight: 400; color: var(--ink-faint); margin-left: 6px; }
.panel-x { background: transparent; border: 0; color: var(--ink-faint); font-size: 15px; cursor: pointer; padding: 2px 4px; }

.panel .row { margin-top: 18px; }
.panel label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
/* Chinese inside a panel label, button or note: same line where it fits, its
   own line where it does not, always a shade quieter than the English. */
.panel label em, .panel-btn em, .row-note em {
  font-family: var(--font-zh);
  font-style: normal;
  font-weight: 400;
  color: var(--ink-faint);
}
.panel-btn em { margin-left: 5px; font-size: .82em; }
.panel-btn:not(.panel-btn-quiet) em { color: rgba(255, 255, 255, .78); }
.row-note em { display: block; margin-top: 3px; }
.row-check { display: flex; align-items: center; gap: 9px; cursor: pointer; margin-top: 16px; }
.row-check span { font-size: .88rem; font-weight: 600; color: var(--ink); }
.row-check em { font-family: var(--font-zh); font-style: normal; font-weight: 400; font-size: .8rem; color: var(--ink-faint); margin-left: 5px; }
.row-check input { width: 17px; height: 17px; accent-color: var(--navy); }

.panel select {
  width: 100%;
  font-family: var(--font-ui);
  font-size: .85rem;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
  color: var(--ink);
}

.panel-btn {
  width: 100%;
  font-family: var(--font-ui);
  font-size: .87rem;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 3px;
  padding: 9px 12px;
  cursor: pointer;
}
.panel-btn:hover { filter: brightness(1.12); }
.panel-btn-quiet { color: var(--ink-soft); background: var(--paper); border-color: var(--line); }
.panel-btn-quiet:hover { filter: none; border-color: var(--rule); }

.row-note { margin: 7px 0 0; font-size: .74rem; line-height: 1.5; color: var(--ink-faint); }

/* ---------------- small screens ---------------- */

@media (max-width: 620px) {
  body { font-size: 17px; }
  .cover h1 { font-size: 2.1rem; }
  .step-head, .step-head .n { font-size: 1.4rem; }
  .step-head { gap: 10px; }
  /* Stacked, the two halves need a visible seam or they read as one list. */
  .match-grid { grid-template-columns: 1fr; }
  .match .col-b { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rule); }
  .poll-btns { width: 100%; }
  .bar-title span { display: none; }
}

/* ---------------- print ----------------

   A handout: the lesson without the machinery. Everything hidden behind a tap
   is opened, and anything that only works with a mouse is dropped. */

@media print {
  /* Photographs are dropped: the handout is for the language, and a classroom
     printer should not spend its toner on stock photography. */
  .bar, #nav, .nav-scrim, .panel, .say, .zh-chip, .reveal, .tally, .hint,
  .photo { display: none !important; }
  body { font-size: 11pt; background: #fff; }
  .shell { display: block; padding: 0; }
  main { max-width: none; }
  .zh, .card-back, .starters, .why, .gloss, .model { display: block !important; }
  .term { border-bottom: 1px solid #999; color: inherit; }
  .step { break-before: page; padding-top: 0; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card, .gap, .ask, .task, .role, .note, .goals { break-inside: avoid; }
  .gap.solved .opts { display: flex; }
  .slot { min-width: 9rem; border-bottom: 1px solid #999; color: transparent; }
}

/* ---------------- 站尾 / site footer ----------------

   同一段樣式複製到每一頁。各頁的色票變數名稱不一樣（兒童頁沒有 --ink-faint、
   成人頁沒有 --blue），所以每個顏色都串一條 fallback，缺哪一個都還是看得到。

   標誌是全站唯一的共用圖檔，放在 public/logo.png，子頁用 ../logo.png 取用。
   它本身就是連結，所以要把文字連結那條底線和左邊距擋掉——文字連結的樣式因此
   收窄成 .site-foot p a，不再套用到整個站尾裡的每個 a。 */

.site-foot {
  max-width: 46rem;
  margin: 0 auto;
  padding: 26px 20px 40px;
  border-top: 1px solid var(--line, #e3e0d8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  /* 換行之後（手機）文字會落到標誌下面一整行，置中才不會左右不對稱。 */
  text-align: center;
  font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  font-size: .8rem;
  line-height: 1.7;
  color: var(--ink-faint, var(--ink-soft, #7a8290));
}
.site-foot p { margin: 0; }

.site-foot .site-mark {
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 0;
  border-radius: 50%;
  transition: opacity .12s;
}
.site-foot .site-mark img { display: block; width: 34px; height: 34px; }
.site-foot .site-mark:hover { opacity: .78; }

.site-foot p a {
  margin-left: 7px;
  padding-bottom: 1px;
  color: var(--navy, var(--blue, #1d3f6e));
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.site-foot p a:hover { opacity: .7; }

@media print { .site-foot { display: none; } }

/* ================================================================
   The series — the way back up from a reading, and the contents page.
   ================================================================ */

/* The kicker on a reading's cover is also the way back to the contents page,
   but it only admits to being a link on hover — a reading should open on its
   title, not on its navigation. */
.kicker-up { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.kicker-up:hover { border-bottom-color: var(--navy); }
.kicker-sep { margin: 0 .5em; opacity: .5; }

.toc-up { margin: 0 0 14px; font-size: 13px; }

/* `.toc a` above is a two-column grid for the numbered step rows. This link is
   not one of those, so the display has to be put back or the label breaks a
   character to a line inside the number column. */
.toc-up a {
  display: inline;
  padding: 0;
  border-left: 0;
  color: var(--ink-faint);
  text-decoration: none;
}
.toc-up a:hover { color: var(--navy); background: none; }

/* ---------------- the contents page ---------------- */

/* One column, wider than a reading: the cards want the room, and there is no
   table of contents beside them to give it up for. */
.shell-wide { max-width: 64rem; }
@media (min-width: 900px) { .shell-wide { grid-template-columns: 1fr; } }
.shell-wide main { max-width: none; }

.part-count {
  margin: 18px 0 0;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-faint);
}
.part-count em { font-family: var(--font-zh); font-style: normal; margin-left: 8px; }

/* The contents page reads like the front page of a business publication:
   stories rather than boxes — a photograph, a teal number, a serif headline, a
   grey summary and a small source line, divided by hairlines. The newest
   reading leads, full width, the way a front page leads with its top story. */

.readings { margin: 40px 0 0; }

.readings-head {
  margin: 0 0 18px;
  padding-top: 12px;
  border-top: 3px solid var(--ink);
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.005em;
}
.readings-head em {
  font-family: var(--font-zh);
  font-style: normal;
  font-weight: 400;
  font-size: .85em;
  color: var(--ink-faint);
  margin-left: 8px;
}

.reading-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .reading-grid { grid-template-columns: 1fr 1fr; } }

.reading-card { position: relative; }
/* On one column, every story after the first sits under a hairline, as a
   list does in print; on two, the gutter does that job. */
.reading-card + .reading-card { padding-top: 22px; border-top: 1px solid var(--line); }
@media (min-width: 700px) {
  .reading-card + .reading-card { padding-top: 0; border-top: 0; }
}

/* The reading's own opening photograph, cut to the same 16:9 the reading uses,
   so the card and the page it opens look like the same thing. */
.reading-pic {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--navy-soft);
  margin: 0 0 14px;
}

.reading-n {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy);
}
.reading-n em {
  font-family: var(--font-zh);
  font-style: normal;
  font-weight: 400;
  margin-left: 8px;
}

/* The one serif headline on the site: the press sets its front-page story
   headlines in a serif and its article headlines in a sans, and so does this. */
.reading-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-en);
  font-size: 24px;
  line-height: 1.17;
  font-weight: 400;
  color: var(--ink);
}
.reading-card h3 a { color: inherit; text-decoration: none; }
.reading-card:hover h3 a { color: var(--navy); }
/* The whole card is the hit area on a built reading. */
.reading-card h3 a::after { content: ''; position: absolute; inset: 0; }
.reading-card h3 .en { display: block; }
/* Navigation stays bilingual — a title is how you find the reading, not a
   comprehension check. */
.reading-card h3 .zh { display: block; font-size: 14px; margin-top: 4px; }

.lesson-blurb {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.lesson-blurb em {
  display: block;
  font-family: var(--font-zh);
  font-style: normal;
  font-size: .82em;
  line-height: 1.7;
  color: var(--ink-faint);
  margin-top: 4px;
}

.reading-src { margin: 0; font-family: var(--font-ui); font-size: 13px; color: var(--ink-faint); }
.reading-src em { font-family: var(--font-zh); font-style: normal; margin-left: 8px; }

/* The lead story: full width, the picture beside the text on a wide screen,
   and the headline a size up. */
@media (min-width: 900px) {
  .reading-card.lead-story {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 28px;
    align-items: center;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
  }
  .reading-card.lead-story .reading-pic { margin: 0; }
  .reading-card.lead-story h3 { font-size: 34px; line-height: 1.12; }
}

/* Listed but not written yet: the story keeps its place, dimmed, no picture. */
.reading-card.todo h3 { color: var(--ink-soft); }
.reading-card.todo .lesson-blurb { color: var(--ink-faint); }

.soon {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-faint);
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 3px 9px;
}

/* ================================================================
   Blocks added with No. 2 — the reading passage, model answers, and
   the advice scale — and the part of speech on a word card.
   ================================================================ */

.card-pos {
  margin-left: 7px;
  font-family: var(--font-ui);
  font-size: .74rem;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-faint);
}

/* ---------------- the reading passage ----------------

   Ported from /happy-sexy-millionaire/ and set as article text rather than
   boxes, the way the press runs a story: the serif at reading size, open
   leading, space between paragraphs. A target word is underlined, not boxed —
   it must look tappable without turning prose into a row of buttons — and its
   gloss opens under the paragraph, since nothing that floats can be read on a
   projector from the back of a room. */

.reading { margin: 0 0 10px; }
.para { margin: 0 0 22px; }
.para .en { font-size: 1.06rem; line-height: 1.78; }
.para > .zh { margin-top: 8px; }

.term {
  font: inherit;
  line-height: inherit;
  color: var(--navy);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--navy-line);
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.term:hover, .term.on { background: var(--navy-soft); border-bottom-color: var(--navy); }

.gloss {
  margin: 10px 0 0;
  padding: 10px 14px;
  background: var(--navy-soft);
  border-left: 3px solid var(--navy);
  border-radius: 0 3px 3px 0;
}
.gloss p { margin: 0; }
.gloss-w { font-family: var(--font-head); font-size: .95rem; font-weight: 700; color: var(--navy); }
.gloss-pos {
  margin-left: 6px;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-faint);
}
/* Already behind a deliberate tap, so the Chinese does not hide again. */
.gloss-zh {
  margin-left: 8px;
  font-family: var(--font-zh);
  font-size: .85rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.gloss-def { margin-top: 4px; font-family: var(--font-ui); font-size: .85rem; line-height: 1.6; color: var(--ink-soft); }

/* ---------------- model answers ---------------- */

.check {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
}
/* Same arrangement as a gap sentence: the number in its own narrow column, so
   the question, its Chinese, the button and the answer share one left edge. */
.check > .pair .en { display: grid; grid-template-columns: 1.6rem 1fr; }
.check > .pair .zh { margin-top: 4px; padding-left: 1.6rem; }
.check-q { font-size: 1rem; }
.cue {
  font-family: var(--font-head);
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
.check .reveal { margin-left: 1.6rem; }

.model {
  margin: 12px 0 0 1.6rem;
  padding: 10px 14px;
  background: var(--good-soft);
  border-left: 3px solid var(--good);
  border-radius: 0 3px 3px 0;
}
.model p { margin: 0; }
.model .en { font-size: .98rem; }
.model .zh { margin-top: 4px; font-size: .8rem; color: var(--ink-soft); }

/* ---------------- the advice scale ----------------

   Soft to strong, in order, because the order is the lesson. The left rule
   deepens with the force of the pattern — pale teal, teal, then the red — so
   the gradient reads before a word of it does. */

.ladder { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }

.rung {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 0 4px 4px 0;
}
.rung-soft { border-left-color: var(--navy-line); }
.rung-neutral { border-left-color: var(--navy); }
.rung-strong { border-left-color: var(--gold); }

.rung p { margin: 0; }
.rung-level { padding-top: 2px; font-family: var(--font-head); font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.rung-neutral .rung-level { color: var(--navy); }
.rung-strong .rung-level { color: var(--gold); }
.rung-level em {
  display: block;
  font-family: var(--font-zh);
  font-style: normal;
  font-weight: 400;
  font-size: .92em;
  color: var(--ink-faint);
}
.rung-pattern { margin-bottom: 3px !important; font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--ink); }
.rung-body .en { font-size: .95rem; font-style: italic; color: var(--ink-soft); }
.rung-body .zh { margin-top: 3px; font-style: normal; }

@media (max-width: 620px) {
  .rung { grid-template-columns: 1fr; gap: 4px; }
}


/* ---------------- touch targets ----------------

   🔊 and 中 are the most-tapped controls on the page, but inline in running
   text they render at about 23×19px — under the 24×24 CSS px floor of WCAG 2.2
   AA (2.5.8 Target Size (Minimum)).

   They cannot simply be drawn bigger. Measured on a 375px screen, the gap to
   the next control is 7–10px and the line box is only 24px tall, so a larger
   chip would collide with its neighbours — and two overlapping hit areas are
   worse than one small one, because the loser becomes untappable.

   So the visible chip is left exactly as it was and an invisible hit area is
   centred on it: at least 24×24, never smaller than the chip itself. Nothing
   on the page moves; the finger just gets something bigger to aim at. */

.say, .zh-chip { position: relative; }

.say::after,
.zh-chip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 24px);
  height: max(100%, 24px);
  transform: translate(-50%, -50%);
}