/* ── the two brand faces, cut down to the characters this site uses ──
   Noto Serif TC carries the Chinese and the numerals; Jost is
   declared for Latin LETTERS ONLY, so digits fall through to the serif
   and 「一枱麻雀 · Level 0」 keeps one set of numerals throughout.
   Both are served from our own folder — nothing is fetched from Google,
   which is what the privacy policy promises. */
@font-face{
  font-family:"Noto Serif TC"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/noto-serif-tc-400.woff2") format("woff2");
}
@font-face{
  font-family:"Noto Serif TC"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/noto-serif-tc-700.woff2") format("woff2");
}
/* The English wordmark, and nothing else. Cut down to the fourteen letters
   of "Mahjong Academy" — it is a Simplified-only face with no 學 and no 課,
   so it is deliberately incapable of touching Chinese text. */
@font-face{
  font-family:"MJA Wordmark"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/logo-wordmark.woff2") format("woff2");
  unicode-range:U+0041-005A, U+0061-007A, U+0020;
}
@font-face{
  font-family:"Jost"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/jost-400.woff2") format("woff2");
  /* Latin letters, digits and punctuation all come from Jost now. The
     digits sit in both languages — "Level 1.1" and 「第 3 題」 — so tying
     them to either script looked wrong in the other. */
  unicode-range:U+0020-007E, U+00B7, U+00A9, U+2013-2014, U+2018-201D, U+2026;
}
@font-face{
  font-family:"Jost"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/jost-600.woff2") format("woff2");
  /* Latin letters, digits and punctuation all come from Jost now. The
     digits sit in both languages — "Level 1.1" and 「第 3 題」 — so tying
     them to either script looked wrong in the other. */
  unicode-range:U+0020-007E, U+00B7, U+00A9, U+2013-2014, U+2018-201D, U+2026;
}

/* ═══════════════════════════════════════════════════════════════════
   麻雀學院 Mahjong Academy
   ───────────────────────────────────────────────────────────────────
   The colours are taken from the artwork itself, not invented:
     paper   the warm off-white at the foot of the mountain painting
     ink     #1b3a6b — the blue printed on a 筒 tile
     red     #a8201a — the red at the centre of a 五筒
     sky     the watercolour blue of the sky above the tile mountain
   Nothing here is pure white and nothing is pure black. It should feel
   like paper someone painted on.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --paper:#fbf7ef;  --paper-2:#f5efe3;  --paper-3:#efe7d8;
  --tile:#fdfbf5;   --edge:#ddd5c6;

  --ink:#1b3a6b;    --ink-2:#2d4f82;
  --ink-soft:rgba(27,58,107,.74);
  --muted:#7b8ba4;

  --red:#a8201a;    --red-dark:#8a1a15;
  --gold:#c08a2e;   --gold-soft:#e8c98a;
  --green:#4a7a5c;

  --sky:#b3d2e1;    --sky-pale:#dce8ef;  --sky-wash:#eef5f8;

  --rule:rgba(27,58,107,.14);
  --rule-2:rgba(27,58,107,.08);
  --shadow:0 10px 34px rgba(27,58,107,.10);
  --shadow-lift:0 16px 44px rgba(27,58,107,.16);

  /* Plex Mono only claims Latin letters (see its unicode-range above), so
     everything else — Chinese, digits, punctuation — falls to the serif.
     The generic fallbacks come last, or a monospace face that happens to
     carry Chinese would grab it first. */
  --ch:"Noto Serif TC","Songti TC","PingFang HK";
  --en:"Jost";
  --font:var(--en),var(--ch),system-ui,sans-serif;

  --wrap:1140px;
  --gap:clamp(20px,4vw,44px);
  --radius:18px;
  --bar:76px;
}
html[lang^="zh"]{ --font:var(--en),var(--ch),serif }

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

/* The browser hides [hidden] by setting display:none — but any author rule
   that sets display wins over it. .btn is display:inline-flex, so every
   "hidden" button in the quiz was on screen from the start: 下一題 let you
   skip a question without answering it, and 測驗完成 ended the quiz on the
   first card. This one line puts the attribute back in charge. */
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important }
}

body{
  margin:0; min-height:100%;
  font-family:var(--font);
  font-size:clamp(16px,1.02vw + 14px,18px);
  line-height:1.78;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
}

/* the sky sits behind everything, very softly */
.sky{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1100px 520px at 82% -6%, rgba(179,210,225,.42), transparent 66%),
    radial-gradient(900px 460px at 8% 8%,  rgba(232,201,138,.14), transparent 62%),
    linear-gradient(180deg,var(--sky-wash) 0%,var(--paper) 46%,var(--paper) 100%);
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.4;
  background-image:radial-gradient(rgba(27,58,107,.05) .5px,transparent .5px);
  background-size:3px 3px;
}
.moon{ display:none }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:var(--tile);
  padding:12px 18px; border-radius:0 0 10px 0; font-weight:700;
}
.skip:focus{ left:0 }

.wrap{ width:min(100% - 2*var(--gap),var(--wrap)); margin-inline:auto }
main{ display:block }
section{ padding-block:clamp(48px,8vw,104px) }
section.tight{ padding-block:clamp(28px,4vw,54px) }

/* ── top bar ─────────────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:60;
  background:rgba(251,247,239,.92);
  backdrop-filter:saturate(1.3) blur(14px);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--rule-2);
}
.top-in{ display:flex; align-items:center; gap:16px; min-height:var(--bar); padding-block:8px }

/* the mark: bird above, name beneath — set as type, not baked into a picture */
.brand{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-decoration:none; color:var(--ink); flex:none; line-height:1;
}
.brand img{ width:38px; height:38px; display:block }
.brand b{ font-size:15.5px; font-weight:700; letter-spacing:.04em; white-space:nowrap }
/* the English site's name is set in the wordmark face; the Chinese site
   stays in Noto Serif TC, which can actually spell 麻雀學院 */
html[lang="en"] .brand b{
  font-family:"MJA Wordmark",var(--ch),serif;
  font-weight:400; font-size:17.5px; letter-spacing:.02em;
}

.nav{ display:flex; align-items:center; gap:2px; margin-inline-start:auto }
.nav a{
  color:var(--ink-soft); text-decoration:none; font-size:15px; font-weight:600;
  padding:9px 13px; border-radius:10px; white-space:nowrap;
  transition:color .16s,background .16s;
}
.nav a:hover,.nav a:focus-visible{ color:var(--ink); background:rgba(27,58,107,.06) }
.nav a[aria-current="page"]{ color:var(--red) }

.top-end{ display:flex; align-items:center; gap:9px; flex:none }
.try{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--red); color:#fff;
  font-weight:700; font-size:14.5px; text-decoration:none;
  padding:10px 18px; border-radius:999px; white-space:nowrap;
  box-shadow:0 3px 0 var(--red-dark);
  transition:transform .14s,box-shadow .14s;
}
.try:hover,.try:focus-visible{ transform:translateY(-1px); box-shadow:0 5px 0 var(--red-dark) }
.try:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--red-dark) }

.lang{ display:flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden }
.lang a{
  padding:6px 12px; font-size:12.5px; font-weight:700; letter-spacing:.03em;
  color:var(--ink-soft); text-decoration:none; transition:background .16s,color .16s;
}
.lang a[aria-current="true"]{ background:var(--ink); color:var(--tile) }
.lang a:not([aria-current]):hover{ background:rgba(27,58,107,.07); color:var(--ink) }

.social{ display:flex; gap:2px }
.social a{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:var(--muted); transition:color .16s,background .16s }
.social a:hover,.social a:focus-visible{ color:var(--red); background:rgba(27,58,107,.06) }
.social svg{ width:18px; height:18px; fill:currentColor }

.burger{
  display:none; width:42px; height:42px; flex:none;
  background:none; border:1px solid var(--rule); border-radius:11px;
  color:var(--ink); cursor:pointer; padding:0;
}
.burger svg{ width:20px; height:20px; margin:auto; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round }

@media (max-width:1000px){
  .nav{
    position:fixed; inset:var(--bar) 0 auto; z-index:59;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(251,247,239,.99);
    border-bottom:1px solid var(--rule);
    padding:8px var(--gap) 20px;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .18s,transform .18s,visibility .18s;
    max-height:calc(100dvh - var(--bar)); overflow-y:auto;
    box-shadow:var(--shadow);
  }
  .nav[data-open="true"]{ transform:none; opacity:1; visibility:visible }
  .nav a{ font-size:17px; padding:14px 6px; border-bottom:1px solid var(--rule-2) }
  .burger{ display:block; margin-inline-start:auto; order:3 }
  .top-end{ order:2 }
  .social{ display:none }
}
@media (max-width:560px){
  .brand i{ display:none }
  .try{ padding:9px 14px; font-size:13.5px }
  :root{ --bar:66px }
}

/* ── type ────────────────────────────────────────────────────────── */
h1,h2,h3{ line-height:1.3; margin:0 0 .5em; font-weight:800; letter-spacing:-.01em; color:var(--ink) }
h1{ font-size:clamp(31px,5.4vw,54px) }
h2{ font-size:clamp(24px,3.4vw,36px) }
h3{ font-size:clamp(18px,2vw,22px) }
p{ margin:0 0 1.15em }
a{ color:var(--red) }
strong{ color:var(--ink) }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:5px }

.lede{
  font-size:clamp(18px,2vw,23px); line-height:1.62;
  color:var(--ink-2); max-width:56ch; margin-bottom:1.5em; font-weight:500;
}
.eyebrow{
  font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1em;
}
.page-head{ max-width:70ch; margin-bottom:clamp(28px,5vw,54px) }
.prose{ max-width:66ch; color:var(--ink-soft) }
.prose h2{ margin-top:2em; color:var(--ink) }
.prose h2:first-child{ margin-top:0 }
.prose strong{ font-weight:700 }
.prose > p:last-child{ margin-bottom:0 }
.center{ text-align:center }
.dim{ color:var(--muted); font-size:14.5px }
.mt{ margin-top:clamp(22px,3.4vw,36px) }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* ── buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 27px; border-radius:999px; border:1.5px solid transparent;
  font:inherit; font-weight:700; font-size:16.5px; text-decoration:none; cursor:pointer;
  transition:transform .14s,box-shadow .14s,background .16s,color .16s,border-color .16s;
}
.btn-red{ background:var(--red); color:#fff; box-shadow:0 4px 0 var(--red-dark) }
.btn-red:hover,.btn-red:focus-visible{ transform:translateY(-1px); box-shadow:0 6px 0 var(--red-dark) }
.btn-red:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--red-dark) }
.btn-gold{ background:var(--gold); color:#fff; box-shadow:0 4px 0 #96691e }
.btn-gold:hover,.btn-gold:focus-visible{ transform:translateY(-1px); box-shadow:0 6px 0 #96691e }
.btn-ghost{ background:rgba(253,251,245,.7); color:var(--ink); border-color:var(--rule) }
.btn-ghost:hover,.btn-ghost:focus-visible{ background:var(--tile); border-color:var(--ink); transform:translateY(-1px) }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.38; pointer-events:none; box-shadow:none }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }

/* ── hero ────────────────────────────────────────────────────────── */
.hero{
  position:relative; text-align:center;
  padding-block:clamp(48px,9vw,110px) clamp(10px,2vw,24px);
}
.hero h1{ margin:0 0 .5em }
.hero .tagline{
  font-size:clamp(19px,2.3vw,27px); line-height:1.72; color:var(--ink-2);
  max-width:26ch; margin:0 auto 1.7em; white-space:pre-line; font-weight:500;
}
.hero .btn-row{ justify-content:center }

/* each line of the tagline arrives on its own */
.reveal > *{ opacity:0; transform:translateY(14px); animation:rise .9s cubic-bezier(.2,.7,.3,1) forwards }
.reveal > *:nth-child(1){ animation-delay:.15s }
.reveal > *:nth-child(2){ animation-delay:.75s }
.reveal > *:nth-child(3){ animation-delay:1.35s }
.reveal > *:nth-child(4){ animation-delay:1.95s }
@keyframes rise{ to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .reveal > *{ opacity:1; transform:none; animation:none } }

/* the tile mountain floating on its own reflection */
.hero-scene{
  width:100%; margin-top:clamp(18px,3vw,38px);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
}
.hero-scene img{ display:block; width:100%; height:auto }

/* ── the road: the bird drives towards the mountain as you scroll ── */
.road{
  position:relative; width:100vw; margin-inline:calc(50% - 50vw);
  aspect-ratio:1774/887; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 88%,transparent 100%);
}
.road > img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.road-car{
  position:absolute; left:var(--drive,4%); bottom:16%;
  width:clamp(120px,15vw,250px);
  transition:left .1s linear;
  filter:drop-shadow(0 10px 16px rgba(27,58,107,.22));
}
.road-car img{ display:block; width:100%; height:auto }
.road-note{
  position:absolute; inset-inline:0; bottom:3%;
  text-align:center; font-size:clamp(15px,1.7vw,19px);
  color:var(--ink-2); font-weight:600; padding-inline:var(--gap);
}
@media (max-width:640px){
  .road{ aspect-ratio:1774/1100 }
  .road-car{ width:110px; bottom:24% }
  .road-note{ bottom:8% }
}

/* ── panels, cards ───────────────────────────────────────────────── */
.panel{
  background:rgba(253,251,245,.82); border:1px solid var(--rule-2);
  border-radius:var(--radius); padding:clamp(22px,3.4vw,36px); box-shadow:var(--shadow);
}
.grid{ display:grid; gap:clamp(16px,2.4vw,26px) }
.grid.two{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.grid.pair{ grid-template-columns:repeat(auto-fit,minmax(400px,1fr)) }
.grid.three{ grid-template-columns:repeat(auto-fit,minmax(292px,1fr)) }
.grid + .prose{ margin-top:clamp(30px,4.5vw,50px) }

.card{
  background:rgba(253,251,245,.86); border:1px solid var(--rule-2);
  border-radius:var(--radius); padding:clamp(20px,2.8vw,30px);
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.6em;
}
a.card{ text-decoration:none; color:inherit; transition:transform .16s,box-shadow .16s,border-color .16s }
a.card:hover,a.card:focus-visible{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--rule) }
.card h3{ margin:0 }
.card p{ margin:0; color:var(--ink-soft); font-size:15.5px; line-height:1.7 }
.card .keypoint{ margin-top:auto; padding-top:.9em; border-top:1px solid var(--rule-2); font-size:14px; color:var(--ink-2) }
.card .no{ font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--red); opacity:.8 }

/* ── 理念: four painted squares ──────────────────────────────────── */
/* One screen: heading, four squares two-by-two, and the sea below them. */
.values-screen{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  min-height:100svh; padding-block:clamp(70px,10vh,120px) 0; overflow:hidden;
}
.values{
  display:grid; gap:clamp(12px,1.8vw,20px);
  grid-template-columns:repeat(2,minmax(0,1fr));      /* 2 on top, 2 below */
  /* two rows of squares, so the grid is as tall as it is wide — cap it
     against the viewport HEIGHT or the section spills past one screen */
  max-width:min(700px,92vw,64svh); margin-inline:auto; width:100%;
}
.values-screen .page-head{ text-align:center; margin-inline:auto; margin-bottom:clamp(18px,3vh,32px) }
.values-sea{
  position:absolute; inset-inline:0; bottom:0; z-index:-1;
  aspect-ratio:1672/941; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);
          mask-image:linear-gradient(180deg,transparent,#000 30%);
}
.values-sea .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:bottom }
.values-sea .boat{
  position:absolute; left:clamp(2%,5vw,9%); bottom:6%;
  width:clamp(74px,8.5vw,140px); height:auto;
  animation:bob 6s ease-in-out infinite;
  filter:drop-shadow(0 6px 12px rgba(27,58,107,.2));
}
@media (prefers-reduced-motion:reduce){ .values-sea .boat{ animation:none } }
@media (max-width:640px){
  .values-screen{ min-height:auto; padding-bottom:clamp(60px,22vh,140px) }
  .values{ gap:10px }
}
.value{
  position:relative; display:block; width:100%; padding:0; border:0;
  aspect-ratio:1; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  background:var(--paper-2); box-shadow:var(--shadow); font:inherit;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
}
.value img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1),filter .45s;
}
.value::after{           /* the wash that carries the name */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(27,58,107,0) 30%,rgba(27,58,107,.66) 100%);
  opacity:.92; transition:opacity .45s;
}
/* The four names gather towards the centre of the grid — 承傳 to its
   right, 連結 to its left, and the lower two upward — so they read as one
   cluster rather than four captions. */
.value .name{
  position:absolute; inset-inline:0; bottom:0; z-index:2;
  padding:clamp(14px,2vw,22px);
  color:#fff; font-weight:800; font-size:clamp(17px,1.9vw,21px);
  text-align:start; text-shadow:0 2px 12px rgba(27,58,107,.55);
  opacity:1; transition:opacity .45s,transform .45s;
}
.values .value:nth-child(1) .name{ text-align:end }
.values .value:nth-child(2) .name{ text-align:start }
.values .value:nth-child(3) .name{ text-align:end; bottom:auto; top:0 }
.values .value:nth-child(4) .name{ text-align:start; bottom:auto; top:0 }
.values .value:nth-child(3)::after,
.values .value:nth-child(4)::after{
  background:linear-gradient(0deg,rgba(27,58,107,0) 30%,rgba(27,58,107,.66) 100%);
}
.value:hover,.value:focus-visible{ transform:translateY(-4px); box-shadow:var(--shadow-lift) }
/* The name is ALWAYS on the picture — never hidden behind a mouse hover,
   because a phone has no mouse. Hovering only deepens the wash. */
.value:hover::after,.value:focus-visible::after{ opacity:1 }
.value:hover .name,.value:focus-visible .name{ transform:translateY(-2px) }
/* a slow drift, so the squares are never quite still */
/* Each square breathes at its own pace, so the grid is never still.
   Four different durations and directions keep them out of step. */
.value[data-drift] img{ animation:drift 9s ease-in-out infinite alternate }
.value[data-drift="2"] img{ animation-duration:11s; animation-direction:alternate-reverse }
.value[data-drift="3"] img{ animation-duration:13s }
.value[data-drift="4"] img{ animation-duration:10s; animation-direction:alternate-reverse }
@keyframes drift{
  from{ transform:scale(1.06) translate3d(2.2%,1.6%,0) }
  to  { transform:scale(1.14) translate3d(-2.4%,-2%,0) }
}
/* hovering must not cancel the drift, so it lifts the card, not the picture */
.value:hover img,.value:focus-visible img{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .value img{ animation:none } }

/* the panel that opens under the four squares */
.value-detail{
  margin-top:clamp(18px,2.6vw,28px);
  background:rgba(253,251,245,.92); border:1px solid var(--rule);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(22px,3.4vw,38px);
  animation:rise .5s cubic-bezier(.2,.7,.3,1) both;
}
.value-detail h3{ margin-top:0; color:var(--red) }
.value-detail .close{
  float:inline-end; background:none; border:1px solid var(--rule); border-radius:999px;
  width:34px; height:34px; cursor:pointer; color:var(--ink); font-size:17px; line-height:1;
}
.value-detail .close:hover{ background:rgba(27,58,107,.06) }
.value-detail p:last-child{ margin-bottom:0 }

/* ── the sailor on the sea ───────────────────────────────────────── */
.sea{
  position:relative; width:100vw; margin-inline:calc(50% - 50vw);
  aspect-ratio:1672/720; margin-top:clamp(24px,4vw,48px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);
          mask-image:linear-gradient(180deg,transparent 0,#000 22%);
}
.sea > img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:bottom }
.sea .boat{
  position:absolute; left:clamp(4%,8vw,15%); bottom:8%;
  width:clamp(110px,14vw,230px);
  animation:bob 6s ease-in-out infinite;
  filter:drop-shadow(0 8px 14px rgba(27,58,107,.2));
}
@keyframes bob{
  0%,100%{ transform:translateY(0) rotate(-1.4deg) }
  50%    { transform:translateY(-13px) rotate(1.4deg) }
}
@media (prefers-reduced-motion:reduce){ .sea .boat{ animation:none } }

/* ── lessons ─────────────────────────────────────────────────────── */
.lessons{ display:grid; gap:12px; margin:0; padding:0; list-style:none }
.lesson{
  display:grid; gap:4px 18px; align-items:center; grid-template-columns:auto 1fr auto;
  background:rgba(253,251,245,.86); border:1px solid var(--rule-2);
  border-radius:14px; padding:16px clamp(16px,2.4vw,22px);
  text-decoration:none; color:inherit;
  transition:border-color .16s,transform .14s,box-shadow .16s;
}
a.lesson:hover,a.lesson:focus-visible{ border-color:var(--red); transform:translateY(-2px); box-shadow:var(--shadow) }
.lesson .lv{
  font-size:12.5px; font-weight:800; letter-spacing:.08em; color:var(--red);
  background:rgba(168,32,26,.08); border:1px solid rgba(168,32,26,.18);
  border-radius:8px; padding:5px 9px; min-width:52px; text-align:center;
}
.lesson .t{ font-weight:700; font-size:16.5px; line-height:1.45 }
.lesson .t small{ display:block; font-weight:400; font-size:13.5px; color:var(--muted); margin-top:2px }
.lesson .tag{
  font-size:12px; font-weight:700; white-space:nowrap;
  padding:5px 11px; border-radius:999px; border:1px solid var(--rule); color:var(--muted);
}
.lesson[data-done="true"] .lv::after{ content:" ✓" }
@media (max-width:620px){
  .lesson{ grid-template-columns:auto 1fr }
  .lesson .tag{ grid-column:2; justify-self:start; margin-top:6px }
}

/* ── lesson player ───────────────────────────────────────────────── */
.steps{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 clamp(22px,3.5vw,32px); padding:0; list-style:none }
.steps li{
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--muted);
  border:1px solid var(--rule); border-radius:999px; padding:7px 15px; background:rgba(253,251,245,.7);
}
.steps li .n{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:rgba(27,58,107,.1); font-size:11.5px; font-weight:800 }
.steps li[data-state="now"]{ color:var(--red); border-color:rgba(168,32,26,.4); background:rgba(168,32,26,.07) }
.steps li[data-state="now"] .n{ background:var(--red); color:#fff }
.steps li[data-state="done"]{ color:var(--ink) }
.steps li[data-state="done"] .n{ background:var(--ink); color:#fff }
.steps li[data-state="done"] .n::before{ content:"✓" }
.steps li[data-state="done"] .n span{ display:none }

.video{
  position:relative; aspect-ratio:16/9; width:100%;
  background:var(--paper-2); border:1px solid var(--rule-2);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.video-soon{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; text-align:center; padding:24px; color:var(--muted) }
.video-soon img{ width:64px; opacity:.55 }
.video-soon b{ color:var(--ink); font-size:17px }

.frame{
  width:100%; height:min(80dvh,820px); min-height:560px;
  border:1px solid var(--rule-2); border-radius:var(--radius);
  background:var(--paper-2); box-shadow:var(--shadow); display:block;
}
@media (max-width:620px){ .frame{ height:82dvh; min-height:480px } }

.invite{
  border:1px solid rgba(168,32,26,.3);
  background:linear-gradient(150deg,rgba(232,201,138,.22),rgba(253,251,245,.9));
  border-radius:var(--radius); padding:clamp(24px,3.6vw,38px);
  display:grid; gap:14px; justify-items:start; box-shadow:var(--shadow);
}
.invite h2,.invite p{ margin:0 }
.invite p{ max-width:52ch; color:var(--ink-2) }
.invite .small{ font-size:14px; color:var(--muted) }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq-group{ margin-bottom:clamp(28px,4vw,46px) }
details.faq{ border:1px solid var(--rule-2); border-radius:14px; background:rgba(253,251,245,.86); margin-bottom:10px; overflow:hidden }
details.faq[open]{ border-color:rgba(168,32,26,.3) }
details.faq summary{ cursor:pointer; list-style:none; padding:17px clamp(16px,2.4vw,24px); font-weight:700; font-size:16.5px; line-height:1.6; display:flex; gap:14px; align-items:flex-start }
details.faq summary::-webkit-details-marker{ display:none }
details.faq summary::after{ content:"+"; margin-inline-start:auto; color:var(--red); font-weight:800; font-size:22px; line-height:1; flex:none; transition:transform .18s }
details.faq[open] summary::after{ transform:rotate(45deg) }
details.faq .a{ padding:0 clamp(16px,2.4vw,24px) 20px; color:var(--ink-soft); max-width:66ch }
details.faq .a p:last-child{ margin-bottom:0 }

.contact-grid{ display:grid; gap:clamp(18px,3vw,28px); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) }
.contact-card b{ display:block; color:var(--muted); font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.5em }
.contact-card a{ font-size:17px; font-weight:700; word-break:break-word }

.oops{ text-align:center; padding-block:clamp(40px,9vw,110px); display:grid; justify-items:center; gap:8px }
.oops img{ width:clamp(120px,20vw,180px); opacity:.9; margin-bottom:10px }
.oops p{ color:var(--ink-soft); max-width:46ch }

/* ── footer ──────────────────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--rule-2);
  background:linear-gradient(180deg,rgba(245,239,227,.6),rgba(239,231,216,.9));
  padding-block:clamp(40px,6vw,66px) 26px; margin-top:clamp(40px,7vw,80px);
}
.foot-grid{ display:grid; gap:clamp(26px,4vw,42px); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) }
.foot h4{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 1.1em; font-weight:800 }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.foot a{ color:var(--ink-soft); text-decoration:none; font-size:15px }
.foot a:hover,.foot a:focus-visible{ color:var(--red); text-decoration:underline }
.foot .note{ color:var(--muted); font-size:14.5px; margin:0 0 1em; max-width:34ch; white-space:pre-line }

/* the two the top bar no longer carries get the emphasis down here */
.foot .headline a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:17.5px; font-weight:800; color:var(--ink); text-decoration:none;
  padding:11px 20px; border-radius:999px;
  background:rgba(253,251,245,.9); border:1.5px solid var(--rule);
  transition:border-color .16s,transform .14s,color .16s;
}
.foot .headline a:hover{ border-color:var(--red); color:var(--red); transform:translateY(-2px); text-decoration:none }
.foot .headline{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:.4em }

.news{ display:flex; gap:9px; flex-wrap:wrap; max-width:340px }
.news input{ flex:1 1 170px; min-width:0; background:var(--tile); border:1px solid var(--rule); border-radius:10px; padding:11px 14px; color:var(--ink); font:inherit; font-size:15px }
.news input::placeholder{ color:var(--muted) }
.news input:focus{ outline:2px solid var(--red); outline-offset:1px }
.news button{ background:var(--red); color:#fff; border:0; border-radius:10px; padding:11px 18px; font:inherit; font-weight:700; cursor:pointer }
.news-msg{ font-size:13.5px; color:var(--green); margin:.7em 0 0; font-weight:600 }

.foot-end{ border-top:1px solid var(--rule-2); margin-top:clamp(30px,5vw,46px); padding-top:20px; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; font-size:14px; color:var(--muted) }
.foot-end .social{ margin-inline-start:auto }
@media (max-width:1000px){ .foot-end .social{ display:flex } }

/* ── 我們的故事: the two of them share one screen, and keep it ─────
   The row is a fixed height. Opening a 故事 scrolls that text inside its
   own half rather than growing the row — which is what used to shove the
   other teacher down the page. */
.story-screen{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(36px,6vh,72px);
}
.story-screen .page-head{ text-align:center; margin-inline:auto; margin-bottom:clamp(14px,2.4vh,30px) }
.teachers{
  display:grid; gap:clamp(20px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  align-items:stretch;
}
.teacher{
  display:flex; flex-direction:column; gap:clamp(12px,1.8vh,20px);
  height:min(62svh,540px);
}
.teacher-pic{
  margin:0; border-radius:var(--radius); overflow:hidden; flex:none;
  width:clamp(120px,15vh,168px); aspect-ratio:1;   /* same square as a 理念 tile */
  background:linear-gradient(160deg,var(--sky-pale),var(--paper-2));
  box-shadow:var(--shadow);
}
.teacher-pic img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 22% }
.teacher-text{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto }
.teacher-text h3{ font-size:clamp(20px,2.4vw,27px); color:var(--red); margin:0 0 .45em; flex:none }
.teacher-text p{ margin:0 0 .6em; color:var(--ink-soft); font-size:15px; line-height:1.7 }
.teacher-text p:last-child{ margin-bottom:0 }

/* only the words scroll, and only when there are too many of them */
.t-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-inline-end:8px }
.t-scroll::-webkit-scrollbar{ width:6px }
.t-scroll::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:3px }
.t-story p{ color:var(--ink-2) }
.teacher-act{ flex:none; margin-top:.9em }

@media (max-width:760px){
  .story-screen{ min-height:auto }
  .teacher{ height:auto }
  .t-scroll{ max-height:46svh }
  .teacher-pic{ width:min(150px,38vw) }
}


/* ── the call to action, under the stars ─────────────────────────── */
.cta{
  position:relative; overflow:hidden;
  margin-top:clamp(40px,7vw,90px);
  padding-block:clamp(64px,10vw,132px);
  background:linear-gradient(180deg,var(--paper) 0%,#eef1f7 46%,#e7ebf4 100%);
}
.cta[data-art="river"],.cta[data-art="hole"],.cta[data-art="sky"]{
  background:var(--paper); padding-block:clamp(70px,11vw,150px);
}
/* high on the left, in the open sky */
.cta[data-art="river"]{ padding-block:clamp(48px,7vw,96px) clamp(150px,23vw,300px) }
/* the hole is a dark painting, so its words go pale */
.cta[data-art="hole"] .cta-in h2{ color:#fdfbf5 }
.cta[data-art="hole"] .cta-in .lede{ color:rgba(253,251,245,.9) }
.cta[data-art="hole"] .cta-in{ text-shadow:0 2px 18px rgba(20,16,40,.75) }
.cta[data-art="hole"] .btn-ghost{
  background:rgba(253,251,245,.14); color:#fdfbf5; border-color:rgba(253,251,245,.5);
  text-shadow:none;
}
.cta[data-art="hole"] .btn-ghost:hover{ background:rgba(253,251,245,.24); border-color:#fdfbf5 }
.cta-sky{
  position:absolute; top:-14%; right:-8%; width:clamp(300px,46vw,760px);
  height:auto; opacity:.42; pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
}
/* a 3:1 painting fills the whole band instead of floating in one corner */
.cta[data-art="river"] .cta-sky,
.cta[data-art="hole"] .cta-sky,
.cta[data-art="sky"] .cta-sky{
  inset:0; top:0; right:0; width:100%; height:100%;
  object-fit:cover; opacity:1; mask-image:none; -webkit-mask-image:none;
}
.cta-scope{
  position:absolute; left:clamp(-40px,-2vw,0px); bottom:-6%;
  width:clamp(180px,26vw,420px); height:auto; pointer-events:none;
  filter:drop-shadow(0 12px 20px rgba(27,58,107,.16));
}
/* the balloon rises, rather than sitting on the ground */
.cta-scope[data-kind="balloon"]{
  left:clamp(10px,5vw,90px); bottom:auto; top:8%;
  width:clamp(90px,11vw,170px);
  animation:rise-slow 9s ease-in-out infinite;
}
@keyframes rise-slow{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-26px) } }
@media (prefers-reduced-motion:reduce){ .cta-scope[data-kind="balloon"]{ animation:none } }
/* the digger stands down in the hole, not beside it */
.cta-scope[data-kind="digger"]{
  left:clamp(12px,9vw,150px); bottom:8%;
  width:clamp(120px,14vw,215px);
}
/* the bridge belongs in the middle of the river */
.cta-scope[data-kind="mirror"]{
  left:50%; transform:translateX(-50%); bottom:4%;
  width:clamp(190px,26vw,400px);
}
.cta-in{ position:relative; text-align:center }
/* The painting leaves the top-left corner as open sky, so the words go
   there — no veil needed, and the bridge, the bird and the mirror all
   stay completely uncovered. */
.cta[data-art="river"] .cta-in{ text-align:start }
/* .cta-in is also .wrap — zeroing its margin threw it against the window
   edge, so the block keeps the page's own column and is narrowed from the
   inside instead. */
.cta[data-art="river"] .cta-in > *{ max-width:min(430px,46%); margin-inline:0 }
.cta[data-art="river"] .cta-in .btn-row{ justify-content:flex-start }
.cta-in h2{ margin-bottom:.4em }
.cta-in .lede{ margin-inline:auto }
.cta-in .btn-row{ justify-content:center }
@media (max-width:820px){
  .cta[data-art="river"] .cta-in{ text-align:center }
  .cta[data-art="river"] .cta-in > *{ max-width:none; margin-inline:auto }
  .cta[data-art="river"] .cta-in .btn-row{ justify-content:center }
  .cta[data-art="river"]{ padding-block:clamp(40px,7vw,70px) clamp(120px,34vw,220px) }
}
@media (max-width:760px){
  .cta{ padding-bottom:clamp(150px,40vw,230px) }
  .cta-scope{ left:50%; transform:translateX(-50%); bottom:14px; width:min(62vw,300px) }
  .cta-sky{ top:-6%; right:-24%; width:74vw }
}

/* ── "and next…" — one page hands over to the one that follows ───── */
.nextup{
  display:flex; align-items:center; gap:16px; justify-content:space-between;
  padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,32px);
  border:1px solid var(--rule); border-radius:var(--radius);
  background:rgba(253,251,245,.86); text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow); transition:transform .16s,border-color .16s,box-shadow .16s;
}
.nextup:hover,.nextup:focus-visible{ transform:translateY(-2px); border-color:var(--red); box-shadow:var(--shadow-lift) }
.nextup .lab{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:800; flex:none }
.nextup .ttl{ font-size:clamp(17px,2vw,22px); font-weight:700; text-align:end }
.nextup .ttl::after{ content:" →"; color:var(--red) }

/* ── a lesson: the rail, the video, then one stage at a time ─────── */
.lesson-layout{
  display:grid; gap:clamp(24px,3.4vw,48px);
  grid-template-columns:minmax(0,230px) minmax(0,1fr);
  align-items:start; padding-block:clamp(28px,5vw,56px);
}
.lesson-main{ min-width:0 }

/* The lesson's name and the three steps stay on screen for all three
   parts, so the learner never loses the thread — or the way out. */
.lesson-head{
  position:sticky; top:var(--bar); z-index:20;
  background:linear-gradient(180deg,var(--paper) 76%,rgba(251,247,239,0));
  padding-block:10px 12px; margin-bottom:2px;
}
.lesson-head .eyebrow{ margin:0 0 .28em }
.lesson-head h1{
  font-size:clamp(20px,2.3vw,27px); margin:0 0 .4em;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.lesson-head h1 small{
  font-size:clamp(14px,1.5vw,17px); font-weight:500; color:var(--ink2);
  letter-spacing:0;
}

.rail{ position:sticky; top:calc(var(--bar) + 18px) }
.rail-head{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 1.1em; font-weight:800 }
.rail-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.rail-level{
  border-inline-start:2px solid var(--rule); padding:8px 0 8px 16px;
  transition:border-color .2s;
}
.rail-level > b{ display:block; font-size:14px; font-weight:800; color:var(--muted); letter-spacing:.03em }
.rail-level.now{ border-inline-start-color:var(--red) }
.rail-level.now > b{ color:var(--red) }
.rail-lessons{ list-style:none; margin:.5em 0 0; padding:0; display:none; gap:3px }
.rail-level.now .rail-lessons{ display:grid }
.rail-lessons li a,.rail-lessons li span{
  display:flex; gap:8px; align-items:baseline;
  font-size:13.5px; line-height:1.45; text-decoration:none;
  color:var(--ink-soft); padding:4px 0;
}
.rail-lessons li span{ color:var(--muted) }
.rail-lessons li i{ font-style:normal; font-weight:800; font-size:11.5px; color:var(--muted); flex:none; min-width:2.1em }
.rail-lessons li a:hover{ color:var(--red) }
.rail-lessons li.on a,.rail-lessons li.on span{ color:var(--ink); font-weight:700 }
.rail-lessons li.on i{ color:var(--red) }
/* a level the learner has finished gets its tick from the progress card */
.rail-lessons li[data-done="true"] i::after{ content:"✓"; margin-inline-start:3px; color:var(--green) }

@media (max-width:900px){
  .lesson-layout{ grid-template-columns:1fr }
  .rail{ position:static }
  .rail-list{ grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; gap:10px; padding-bottom:6px }
  .rail-level{ border-inline-start:0; border-bottom:2px solid var(--rule); padding:0 4px 8px }
  .rail-level.now{ border-bottom-color:var(--red) }
  .rail-lessons{ display:none!important }
}

/* ── the three steps, with the bird standing on where you are ─────
   Watch, then quiz, then play. The bird perches above the current step
   so the progress reads at a glance rather than by colour alone. */
.stage-tabs{
  display:flex; gap:clamp(8px,1.4vw,16px);
  margin:0; flex-wrap:wrap;
}
.stage-tab{
  position:relative; flex:1 1 170px;
  display:flex; align-items:center; gap:11px;
  font:inherit; font-weight:700; font-size:14.5px; cursor:pointer;
  padding:10px 15px; border-radius:12px; text-align:start;
  border:1.5px solid var(--rule); background:rgba(253,251,245,.82); color:var(--ink);
  transition:border-color .16s,background .16s,transform .14s,box-shadow .16s;
}
.stage-bird{
  position:absolute; left:13px; bottom:calc(100% - 3px);
  width:30px; height:auto; opacity:0; transform:translateY(6px) scale(.9);
  transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
  filter:drop-shadow(0 4px 6px rgba(27,58,107,.22));
}
.stage-tab.on .stage-bird{ opacity:1; transform:none }
.stage-tab .n{
  display:grid; place-items:center; width:21px; height:21px; border-radius:50%;
  background:rgba(27,58,107,.1); font-size:11.5px; font-weight:800; flex:none;
}
.stage-tab .lab{ white-space:nowrap }
.stage-tab i{ font-style:normal; font-size:12px; font-weight:500; color:var(--muted); margin-inline-start:auto; text-align:end; line-height:1.3 }
.stage-tab:hover:not([disabled]){ border-color:var(--red); transform:translateY(-1px) }
.stage-tab.on{ border-color:var(--red); background:rgba(168,32,26,.07); box-shadow:0 3px 0 rgba(168,32,26,.18) }
.stage-tab.on .n{ background:var(--red); color:#fff }
.stage-tab[disabled]{ opacity:.55; cursor:not-allowed }
.stage-tab.done .n::before{ content:"✓" }
.stage-tab.done .n span{ display:none }
@media (prefers-reduced-motion:reduce){ .stage-bird{ transition:none } }

.stage-body{ margin-top:clamp(8px,1.2vw,14px) }
/* .stage is a <section>, and the generic section rule was adding 102px of
   padding above every quiz card — which is what pushed it below the fold. */
.stage{ display:block; padding-block:0 clamp(24px,4vh,56px) }
.stage[hidden]{ display:none }

/* ── one question, filling the view ─────────────────────────────── */
/* The dots sit at the top of the quiz and stay there, so going back to
   an earlier question never leaves you hunting for them. */
.quiz-bar{
  position:sticky; top:calc(var(--bar) + var(--head-h,132px)); z-index:15;
  display:flex; justify-content:center;
  padding-block:8px 10px; margin-bottom:2px;
  background:linear-gradient(180deg,var(--paper) 70%,rgba(251,247,239,0));
}
.quiz-dots{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center }
.quiz-dots button{
  width:13px; height:13px; padding:0; border:0; border-radius:50%;
  background:rgba(27,58,107,.16); cursor:pointer;
  transition:background .25s,transform .2s;
}
.quiz-dots button:not([data-s]){ cursor:default }
.quiz-dots button[data-s]{ cursor:pointer }
.quiz-dots button:hover[data-s]{ transform:scale(1.3) }
.quiz-dots button[data-s="now"]{ background:var(--ink); transform:scale(1.35) }
.quiz-dots button[data-s="right"]{ background:var(--green) }
.quiz-dots button[data-s="wrong"]{ background:var(--red) }


.quiz{ display:block }

/* One card, one size, one place.
   The card is as tall as it will ever need to be, and the feedback panel
   is already occupying its space before there is anything to say — so
   answering a question adds words, not height. Nothing slides. */
.q{
  display:flex; flex-direction:column;
  background:rgba(253,251,245,.9); border:1px solid var(--rule-2);
  border-radius:var(--radius); padding:clamp(18px,2.2vw,26px);
  box-shadow:var(--shadow); max-width:760px; margin-inline:auto;
  /* JS measures every question and sets --q-h to the tallest, so each card
     is that height: no inner scrollbar, and no change of height when you
     move between questions or reveal an answer. */
  min-height:var(--q-h,380px);
}
.q-count{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 .55em; flex:none }
.q > h3{ font-size:clamp(17px,1.9vw,20px); line-height:1.45; margin:0 0 .75em; flex:none }
.q .hint{ font-size:13px; color:var(--muted); font-weight:400; margin-inline-start:8px }

/* the options take whatever room is left, and scroll if a question is long */
.opts{ display:grid; gap:7px; align-content:start; flex:0 0 auto }
.opt{
  display:flex; align-items:flex-start; gap:12px;
  border:1.5px solid var(--rule); border-radius:11px; background:var(--tile);
  padding:10px 14px; cursor:pointer; line-height:1.45; font-size:15.5px;
  transition:border-color .14s,background .14s;
}
.opt:hover{ border-color:var(--red) }
.opt input{ margin:.35em 0 0; accent-color:var(--red); flex:none; width:17px; height:17px }
.opt .k{ font-weight:600; color:var(--red); flex:none; min-width:1.2em }
.q[data-answered] .opt{ cursor:default }
.q[data-answered] .opt input{ pointer-events:none }
.opt[data-mark="correct"]{ border-color:var(--green); background:rgba(74,122,92,.12) }
.opt[data-mark="chosen-wrong"]{ border-color:var(--red); background:rgba(168,32,26,.1) }

/* reserved from the start — invisible, but holding its place */
.q-feedback{
  flex:none; margin-top:auto; padding-top:.9em; padding:11px 15px; border-radius:11px;
  font-size:15px; line-height:1.5; min-height:3em;
  display:flex; flex-direction:column; justify-content:center;
  visibility:hidden;
}
.q-feedback[data-r]{ visibility:visible }
.q-feedback[data-measuring]{ visibility:hidden }
.q-feedback b{ font-size:16px; margin-bottom:.15em }
.q-feedback[data-r="right"]{ background:rgba(74,122,92,.12); color:var(--ink) }
.q-feedback[data-r="right"] b{ color:var(--green) }
.q-feedback[data-r="wrong"]{ background:rgba(168,32,26,.09); color:var(--ink) }
.q-feedback[data-r="wrong"] b{ color:var(--red) }
.q-act{ display:flex; gap:10px; margin-top:.75em; flex:none; flex-wrap:wrap }
.q-act .btn{ padding:11px 22px; font-size:15.5px }

@media (max-width:620px){
  .q{ min-height:0 }
}

/* the end of the quiz, and the fly-in that unlocks the game */
.quiz-end{
  max-width:780px; margin-inline:auto; text-align:center;
  background:rgba(253,251,245,.94); border:1.5px solid var(--rule);
  border-radius:var(--radius); padding:clamp(28px,4.4vw,52px); box-shadow:var(--shadow);
}
.quiz-end.pass{ border-color:rgba(74,122,92,.45); background:linear-gradient(160deg,rgba(74,122,92,.1),rgba(253,251,245,.96)) }
.quiz-end h2{ margin-bottom:.3em }
.quiz-end .big{ font-size:clamp(34px,6vw,58px); font-weight:800; color:var(--green); line-height:1.1; margin:0 0 .2em }
.quiz-end.fail .big{ color:var(--red) }
.quiz-end p{ color:var(--ink-2); margin-bottom:1.4em }
.quiz-end .btn-row{ justify-content:center }
.flyin{ animation:flyin .7s cubic-bezier(.16,.9,.3,1.2) both }
@keyframes flyin{
  0%  { opacity:0; transform:translateY(38px) scale(.94) }
  60% { opacity:1; transform:translateY(-6px) scale(1.02) }
  100%{ opacity:1; transform:none }
}
@media (prefers-reduced-motion:reduce){ .flyin,.q{ animation:none } }

.thinking{
  border-inline-start:3px solid var(--gold); background:rgba(232,201,138,.16);
  border-radius:0 12px 12px 0; padding:16px 22px; max-width:780px; margin-inline:auto;
}
.thinking .lab{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:800; display:block; margin-bottom:.4em }
.thinking p{ margin:0; color:var(--ink-2) }

/* ── the game, with the tile finder beside it ────────────────────── */
#stage-game .game-wrap{
  display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns:minmax(0,1fr) minmax(0,270px);
  align-items:start;
}
/* the Chinese game has no tile finder, so the board takes the full width */
#stage-game .game-wrap[data-solo]{ grid-template-columns:1fr }
.game-frame{ position:relative; min-width:0 }
.frame{
  width:100%; height:min(80svh,860px); min-height:560px;
  border:1px solid var(--rule-2); border-radius:var(--radius);
  background:var(--paper-2); box-shadow:var(--shadow); display:block;
}
.game-full{
  position:absolute; top:12px; inset-inline-end:12px;
  font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--rule); background:rgba(251,247,239,.94); color:var(--ink);
  box-shadow:0 2px 8px rgba(27,58,107,.14);
}
.game-full:hover{ border-color:var(--red); color:var(--red) }
/* Fullscreen takes the whole wrap, so the tile finder goes with it —
   before, it was left behind on the page underneath. */
.game-wrap:fullscreen{
  background:var(--paper); padding:0; gap:0;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
}
.game-wrap:fullscreen .frame{ height:100vh; min-height:0; border:0; border-radius:0 }
.game-wrap:fullscreen .tips{
  height:100vh; overflow-y:auto; border-radius:0; border:0;
  border-inline-start:1px solid var(--rule2);
}
.game-wrap[data-solo]:fullscreen{ grid-template-columns:1fr }

.tips{
  background:rgba(253,251,245,.9); border:1px solid var(--rule-2);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  position:sticky; top:calc(var(--bar) + 16px);
}
.tips h3{ font-size:16.5px; margin-bottom:.2em }
.tips .dim{ margin-bottom:1em; font-size:13px; line-height:1.5 }
.tips-fams{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px }
.tips-fam{
  font:inherit; font-size:14px; font-weight:700; cursor:pointer;
  padding:8px 13px; border-radius:10px;
  border:1.5px solid var(--rule); background:var(--tile); color:var(--ink);
  transition:border-color .14s,background .14s,color .14s;
}
.tips-fam:hover{ border-color:var(--red) }
.tips-fam.on{ background:var(--red); border-color:var(--red); color:#fff }
.tips-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:9px }
.tips-tile{ text-align:center; animation:rise .3s ease-out both }
.tips-tile svg{ width:100%; height:auto; display:block; border-radius:5px }
.tips-tile span{ display:block; font-size:11px; line-height:1.3; color:var(--ink-soft); margin-top:4px }

@media (max-width:1080px){
  #stage-game > .game-wrap{ grid-template-columns:1fr }
  .tips{ position:static }
  .tips-grid{ grid-template-columns:repeat(auto-fill,minmax(64px,1fr)) }
}
@media (max-width:620px){ .frame{ height:78svh; min-height:460px } }

/* the footer's first column: who we are, how to reach us */
.foot-me{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.foot-me a{ font-size:15px }

/* ── 麻雀人生: the wheel ──────────────────────────────────────────
   A 一筒 turning at the centre, a ring of four ways of looking, and
   outside it the four parts of the essay. Ring word and part always
   share a quarter, so 觀物 sits inside 麻雀如人生.
   The whole thing is one square sized against the SHORTER of the two
   viewport dimensions, which is what keeps it on one screen. */
/* one screen: a compact heading, then the wheel filling what is left */
.life{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(16px,2.5vh,32px) clamp(24px,4vh,52px); gap:clamp(10px,2vh,22px);
}
.life-head{ text-align:center }
.life-head h1{ font-size:clamp(23px,3.2vw,38px); margin:0 0 .25em }
.life-head .lede{ margin:0 auto; font-size:clamp(15px,1.7vw,19px) }
.mandala{
  position:relative; margin-inline:auto;
  width:min(94vw, 66svh); aspect-ratio:1;
  display:grid; gap:clamp(6px,1vw,12px);
  /* Named cells, not DOM order — the quarters are written clockwise
     (觀物 觀人 觀心 分享) and a plain 2×2 grid would put the third one
     bottom-LEFT, breaking the pairing with its ring word. */
  grid-template-columns:1fr 1fr;
  grid-template-areas:"tl tr" "bl br";
}
.quad[data-pos="tl"]{ grid-area:tl }
.quad[data-pos="tr"]{ grid-area:tr }
.quad[data-pos="br"]{ grid-area:br }
.quad[data-pos="bl"]{ grid-area:bl }

/* Each quarter is a band, the picture, then a band. The title lives in
   whichever band faces away from the centre, so it never sits on top of
   the artwork — and the four titles end up in the four outer corners. */
.quad{
  position:relative; overflow:hidden; cursor:pointer;
  display:grid; grid-template-rows:auto 1fr auto;
  border:1px solid var(--rule-2); background:var(--tile);
  padding:0; font:inherit; color:var(--ink);
  transition:box-shadow .2s,border-color .2s,z-index 0s;
}
.q-frame{ position:relative; overflow:hidden; min-height:0 }
.quad[data-pos="tl"]{ border-radius:var(--radius) 6px 6px 6px }
.quad[data-pos="tr"]{ border-radius:6px var(--radius) 6px 6px }
.quad[data-pos="br"]{ border-radius:6px 6px var(--radius) 6px }
.quad[data-pos="bl"]{ border-radius:6px 6px 6px var(--radius) }
/* The pictures are 16:9 and the quarters are square. Cropping to fill was
   cutting the two birds off the edges of 重新連結 and shoving 情緒鏡子 to
   one side, so the picture is shown WHOLE (contain) and the empty band is
   filled by a blurred, over-scaled copy of the same picture behind it. */
.q-frame::before{
  content:""; position:absolute; inset:-12%;
  background:var(--q-img) center/cover no-repeat;
  filter:blur(26px) saturate(.85); opacity:.7;
}
.quad .q-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center;
}
/* the four pictures are very different shapes — connection is 3:1, emotion
   is nearly square — so cap both dimensions and let each find its own size */
.quad .q-art{
  position:absolute; width:auto; height:auto;
  max-width:84%; max-height:56%;
  filter:drop-shadow(0 8px 14px rgba(27,58,107,.16));
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
/* each picture leans away from the centre, so the middle stays clear */
.quad[data-pos="tl"] .q-art{ left:5%;  top:26% }
.quad[data-pos="tr"] .q-art{ right:5%; top:26% }
.quad[data-pos="br"] .q-art{ right:5%; bottom:26% }
.quad[data-pos="bl"] .q-art{ left:5%;  bottom:26% }

.quad .q-cap{
  display:flex; align-items:center; min-height:clamp(46px,7.5%,74px);
  padding:clamp(8px,1.2vw,14px) clamp(14px,2vw,24px);
  background:var(--tile);
}
/* The title sits in the band on the OUTER side of its quarter. All three
   children need an explicit order — leaving the picture at the default 0
   put it in the same slot as the empty band and collapsed it to nothing. */
.q-cap:first-child{ order:0 }
.q-frame{ order:1 }
.q-cap-b{ order:2 }
.quad[data-pos="bl"] .q-cap:first-child,
.quad[data-pos="br"] .q-cap:first-child{ order:2 }
.quad[data-pos="bl"] .q-cap-b,
.quad[data-pos="br"] .q-cap-b{ order:0 }
.quad[data-pos="tr"] .q-cap,
.quad[data-pos="br"] .q-cap{ justify-content:flex-end; text-align:end }
.quad[data-pos="tl"] .q-cap{ left:0; top:0 }
.quad[data-pos="tr"] .q-cap{ right:0; top:0; text-align:end; justify-items:end }
.quad[data-pos="br"] .q-cap{ right:0; bottom:0; text-align:end; justify-items:end }
.quad[data-pos="bl"] .q-cap{ left:0; bottom:0 }
.q-cap b{ font-size:clamp(15px,1.9vw,23px); line-height:1.2; font-weight:700 }

.quad:hover,.quad:focus-visible{ border-color:var(--red); box-shadow:var(--shadow-lift); z-index:3 }
.quad:hover .q-art,.quad:focus-visible .q-art{ transform:scale(1.06) }
.quad[aria-expanded="true"]{ border-color:var(--red); box-shadow:var(--shadow-lift) }

/* the ring of four ways of looking */
.ring{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:46%; aspect-ratio:1; border-radius:50%; z-index:4; pointer-events:none;
  background:
    conic-gradient(from 270deg,
      rgba(179,210,225,.34) 0deg  90deg,
      rgba(232,201,138,.30) 90deg 180deg,
      rgba(200,180,205,.28) 180deg 270deg,
      rgba(160,200,175,.30) 270deg 360deg);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  box-shadow:0 8px 26px rgba(27,58,107,.10), inset 0 0 0 1px rgba(253,251,245,.6);
}
.ring::before{           /* the cross that divides the four */
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    linear-gradient(var(--paper),var(--paper)) center/1.5px 100% no-repeat,
    linear-gradient(var(--paper),var(--paper)) center/100% 1.5px no-repeat;
  opacity:.75;
}
/* Each word is centred on the middle of its own quarter and boxed to
   that quarter's width, so a long English word wraps instead of running
   into its neighbour — which is how Observe and Understand ended up
   printed on top of each other. */
.ring-word{
  position:absolute; transform:translate(-50%,-50%);
  width:34%; text-align:center; line-height:1.2;
  font-size:clamp(11px,1.35vw,16px); font-weight:600;
  color:var(--ink-soft); letter-spacing:.04em;
}
.ring-word[data-pos="tl"]{ left:28%; top:28% }
.ring-word[data-pos="tr"]{ left:72%; top:28% }
.ring-word[data-pos="br"]{ left:72%; top:72% }
.ring-word[data-pos="bl"]{ left:28%; top:72% }

/* the 一筒, turning */
.core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:23%; aspect-ratio:1; z-index:5; pointer-events:none;
  display:grid; place-items:center;
  filter:drop-shadow(0 6px 16px rgba(27,58,107,.28));
}
.core .coin{ width:100%; height:100%; animation:turn 40s linear infinite }
@keyframes turn{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .core .coin{ animation:none } }

/* the panel a quarter opens */
#life-panel{ margin-top:clamp(18px,2.6vw,30px) }
#life-panel .value-detail{ max-width:70ch; margin-inline:auto }

@media (max-width:700px){
  .life{ min-height:auto }
  .mandala{ width:min(96vw,64svh); gap:5px }
  .quad .q-art{ width:56%; max-height:52% }
  .q-cap{ max-width:86% }
  .ring{ width:52% }
}

/* ── footer: shorter ─────────────────────────────────────────────
   The site list was one long column, which set the height of the whole
   footer. Two columns halve it, and the three blocks sit side by side
   rather than stacking. */
.foot{ padding-block:clamp(32px,4.5vw,48px) 22px }
.foot-grid{ grid-template-columns:minmax(220px,1.1fr) minmax(240px,1.2fr) minmax(230px,1fr); gap:clamp(22px,3.5vw,44px) }
.foot h4{ margin-bottom:.85em }
.foot ul{ gap:7px }
.foot-links{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px clamp(14px,2vw,26px); align-content:start;
}
.foot-tag{ color:var(--ink-2); font-size:14.5px; line-height:1.5; margin:.2em 0 .9em; max-width:30ch }
.foot-me{ gap:5px }
.foot-me li{ font-size:14.5px; color:var(--muted) }
.news-note{ font-size:13px; color:var(--muted); margin:.7em 0 0; line-height:1.5; max-width:34ch }
.foot .brand{ align-items:flex-start!important; margin-bottom:10px!important }
@media (max-width:820px){
  .foot-grid{ grid-template-columns:1fr 1fr }
  .foot-grid > :first-child{ grid-column:1 / -1 }
}
@media (max-width:560px){
  .foot-grid{ grid-template-columns:1fr }
  .foot-links{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

/* ── 課程: the path, then what is on it ──────────────────────────── */
.course-flow{ position:relative }
/* the line down the left that carries part 1 into part 2 */
.course-flow::before{
  content:""; position:absolute; z-index:0;
  left:max(calc((100vw - var(--wrap)) / 2 - 26px), 16px);
  top:clamp(40px,6vh,80px); bottom:clamp(40px,6vh,80px); width:2px;
  background:linear-gradient(180deg,transparent,var(--rule) 8%,var(--rule) 92%,transparent);
}
.course-part{ position:relative; z-index:1; padding-block:clamp(30px,5vh,64px) }
.part-h{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(22px,3.5vh,40px) }
.part-n{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--red); color:#fff; font-size:16px; font-weight:600; flex:none;
}

/* the path with four stops, and a bird that walks to the open one */
/* Top to bottom: the bird, then the line it walks on, then the names.
   The bird used to share a row with the names and sat on top of them. */
.path{ position:relative; margin-bottom:clamp(26px,4vh,46px); padding-top:clamp(56px,7vw,78px) }
.path-line{
  position:absolute; inset-inline:6%; top:clamp(56px,7vw,78px); height:2px;
  background:var(--rule);
}
.path-bird{
  position:absolute; top:0; width:clamp(42px,5vw,62px); height:auto;
  left:var(--bird-x,12.5%); transform:translateX(-50%);
  transition:left .55s cubic-bezier(.34,.9,.4,1);
  filter:drop-shadow(0 4px 6px rgba(27,58,107,.2));
}
@media (prefers-reduced-motion:reduce){ .path-bird{ transition:none } }
.stops{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); margin-top:-6px }
.stop{
  display:flex; flex-direction:column; align-items:center; gap:11px;
  background:none; border:0; padding:0 4px; cursor:pointer;
  font:inherit; color:var(--muted); font-weight:600; font-size:clamp(13px,1.5vw,17px);
  transition:color .18s;
}
.stop-name{ text-align:center; line-height:1.3 }
.stop-dot{
  width:13px; height:13px; border-radius:50%; background:var(--paper);
  border:2px solid var(--rule); transition:background .18s,border-color .18s,transform .18s;
}
.stop:hover{ color:var(--ink) }
.stop.on{ color:var(--red) }
.stop.on .stop-dot{ background:var(--red); border-color:var(--red); transform:scale(1.25) }

/* one way of learning at a time: picture left, words right */
/* The paintings fade out into pale cream on the right (#fdf8ec), so the
   row carries that colour all the way across and the picture reads as
   running into the words rather than sitting in a box beside them. */
.way{
  display:grid; gap:0; align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  background:linear-gradient(90deg,rgba(253,248,236,0) 0%,#fdf8ec 34%,#fdf8ec 100%);
  border-radius:var(--radius); overflow:hidden;
  animation:rise .45s cubic-bezier(.2,.7,.3,1) both;
}
.way-pic{ margin:0 }
.way-pic img{ display:block; width:100%; height:auto }
.way-text{ padding:clamp(20px,3vw,44px) clamp(20px,3.4vw,52px) }
.way-text h3{ font-size:clamp(20px,2.6vw,30px); margin-bottom:.2em }
.way-text .lede{ font-size:clamp(15px,1.7vw,19px); margin-bottom:1em }
.way-text p{ color:var(--ink-soft); font-size:15.5px; line-height:1.75 }
.way-text .btn{ margin-top:.6em }
@media (max-width:760px){
  .way{ grid-template-columns:1fr; background:#fdf8ec }
  .way-text{ padding:clamp(18px,4vw,28px) }
}

/* the seven levels */
.lvls{ display:grid; gap:10px }
details.lvl{
  border:1px solid var(--rule-2); border-radius:14px;
  background:rgba(253,251,245,.86); overflow:hidden;
}
details.lvl[open]{ border-color:rgba(168,32,26,.3) }
details.lvl summary{
  cursor:pointer; list-style:none; padding:16px clamp(16px,2.4vw,24px);
  display:flex; align-items:baseline; gap:14px;
}
details.lvl summary::-webkit-details-marker{ display:none }
details.lvl summary b{ font-size:clamp(16px,1.9vw,20px); font-weight:700 }
details.lvl summary span{ font-size:13px; color:var(--muted) }
details.lvl summary::after{
  content:"+"; margin-inline-start:auto; color:var(--red);
  font-size:21px; line-height:1; flex:none; transition:transform .18s;
}
details.lvl[open] summary::after{ transform:rotate(45deg) }
.lvl-body{ padding:0 clamp(16px,2.4vw,24px) 18px }
.lvl-body > p{ color:var(--ink-soft); max-width:70ch; margin-bottom:1em }
.lvl-list{ list-style:none; margin:0; padding:0; display:grid; gap:7px }
.lvl-list li{ display:flex; gap:10px; align-items:baseline; font-size:15px; color:var(--ink-soft) }
.lvl-list i{ font-style:normal; font-weight:600; color:var(--red); min-width:2.6em; font-size:13px }
.lvl-list a{ font-size:13px; font-weight:600; margin-inline-start:6px }
@media (max-width:900px){ .course-flow::before{ display:none } }

/* where each lesson stands — open, needs an account, or still being made */
.levels-note{
  color:var(--ink-2); font-size:15px; max-width:74ch;
  margin:-.6em 0 clamp(18px,2.6vh,28px);
}
.lvl-list li > span{ flex:1 1 auto }
.lvl-tag{
  font-style:normal; font-size:12px; font-weight:600; white-space:nowrap;
  padding:3px 10px; border-radius:999px; color:var(--muted);
  border:1px solid var(--rule); flex:none;
}
.lvl-tag.join{ color:var(--ink); border-color:rgba(27,58,107,.3) }
.lvl-go{
  font-size:12.5px; font-weight:600; white-space:nowrap; flex:none;
  padding:3px 12px; border-radius:999px; text-decoration:none;
  background:var(--red); color:#fff;
}
.lvl-go:hover{ background:var(--red-dark) }