/* =========================================================
   人師教育協會 twrses.org — Design System
   Warm scholarly palette · system Chinese fonts · Fraunces/Manrope EN
   ========================================================= */

:root {
  /* palette */
  --ink:      #16302c;   /* deep forest teal — primary text */
  --ink-soft: #3c534d;
  --brand:    #0e6b60;   /* teal */
  --brand-dk: #0a4f47;
  --brand-lt: #d8ece8;
  --gold:     #d99a2b;   /* warm amber */
  --gold-dk:  #b97e16;
  --sunset:   #d2643c;   /* terracotta — 落日餘暉 */
  --paper:    #fcfbf7;   /* warm white background */
  --cream:    #f3eee2;   /* card / band */
  --cream-dk: #e9e1d0;
  --line:     #e3ddcf;   /* hairline */
  --white:    #ffffff;
  --shadow:   0 18px 48px -24px rgba(22,48,44,.45);
  --shadow-sm:0 8px 24px -16px rgba(22,48,44,.4);

  /* type */
  --serif: 'Fraunces', 'PingFang TC', 'Apple LiGothic Medium', 'Microsoft JhengHei', Georgia, serif;
  --sans:  'Manrope', 'PingFang TC', 'Apple LiGothic Medium', 'Microsoft JhengHei', system-ui, sans-serif;
  --zh:    'PingFang TC', 'Apple LiGothic Medium', 'Microsoft JhengHei', system-ui, sans-serif;

  /* layout */
  --wrap: 1180px;
  --gap: clamp(1.2rem, 3vw, 2.4rem);
  --radius: 18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.75;
  font-size: 20px;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 640px){ body{ font-size: 18px; } }

img { max-width: 100%; display: block; }
a { color: var(--brand-dk); text-decoration: none; transition: color .2s; }
a:hover { color: var(--sunset); }

h1,h2,h3,h4 { font-family: var(--serif); color: var(--ink); line-height: 1.15; font-weight: 600; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
p  { margin: 0 0 1.1em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--ink-soft); }

.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; }
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section.tight { padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.center { text-align: center; }
.eyebrow {
  font-family: var(--sans); font-weight: 700; font-size: .82rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dk);
  margin: 0 0 1rem;
}
.eyebrow::before { content: ""; display:inline-block; width:26px; height:2px; background:var(--gold); vertical-align: middle; margin-right:.6em; transform: translateY(-3px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  padding: .85em 1.6em; border-radius: 999px; cursor: pointer;
  border: 2px solid transparent; transition: transform .2s, box-shadow .25s, background .2s, color .2s;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-dk); color:#fff; transform: translateY(-3px); box-shadow: var(--shadow); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-dk); color:#fff; transform: translateY(-3px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-3px); }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252,251,247,.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 76px; }
.brand { display: flex; align-items: center; gap: .7rem; font-family: var(--serif); font-weight: 600; font-size: 1.18rem; color: var(--ink); white-space: nowrap; }
.brand .mark {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-dk));
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:1.15rem; box-shadow: var(--shadow-sm);
  font-family: var(--zh);
}
.brand .mark-logo { height: 38px; width: auto; flex: none; display: block; }
@media (max-width: 480px){ .brand .mark-logo { height: 32px; } .brand small { display:none; } }
.brand small { display:block; font-family: var(--sans); font-weight:600; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color: var(--gold-dk); }

.menu { display: flex; align-items: center; gap: .25rem; list-style: none; margin:0; padding:0; }
.menu > li { position: relative; }
.menu > li > a {
  display: block; padding: .6rem .85rem; border-radius: 10px;
  font-family: var(--zh); font-weight: 600; font-size: .98rem; color: var(--ink);
}
.menu > li > a:hover, .menu > li.active > a { background: var(--cream); color: var(--brand-dk); }
.has-sub > a::after { content: "⌄"; margin-left: .35em; font-size:.8em; opacity:.6; vertical-align: middle; }

.submenu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: .5rem; list-style: none; margin:0;
  opacity:0; visibility:hidden; transform: translateY(8px); transition: all .22s; z-index: 50;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu { opacity:1; visibility:visible; transform: translateY(0); }
.submenu a { display:block; padding:.55rem .8rem; border-radius:9px; font-family: var(--zh); font-weight:500; font-size:.95rem; color: var(--ink); }
.submenu a:hover { background: var(--brand-lt); color: var(--brand-dk); }

.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav-toggle span { display:block; width:26px; height:2.5px; background: var(--ink); border-radius:2px; margin:5px 0; transition: .3s; }

@media (max-width: 940px){
  .nav-toggle { display:block; }
  .menu {
    position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--paper); border-bottom:1px solid var(--line); padding: 1rem; gap:.2rem;
    max-height: calc(100vh - 76px); overflow:auto;
    transform: translateY(-120%); transition: transform .35s cubic-bezier(.4,0,.2,1);
  }
  .menu.open { transform: translateY(0); }
  .menu > li > a { padding: .8rem 1rem; font-size: 1.05rem; }
  .submenu { position: static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-left:2px solid var(--brand-lt); border-radius:0; margin:.2rem 0 .4rem 1rem; padding-left:.5rem; }
  .has-sub > a::after { float: right; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(4rem,9vw,7rem) 0 clamp(3.5rem,7vw,6rem);
  background: linear-gradient(115deg, #0a4f47 0%, #0e6b60 22%, #1f8e7e 42%, #d99a2b 76%, #d2643c 100%); }
.hero-home { padding: clamp(4.5rem,10vw,8rem) 0 clamp(4rem,8vw,6.5rem); }
.hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter: blur(54px); opacity:.4; }
.orb.a { width:540px; height:540px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 70%); top:-170px; right:-110px; }
.orb.b { width:460px; height:460px; background: radial-gradient(circle at 30% 30%, rgba(255,236,200,.55), transparent 70%); bottom:-180px; left:-120px; opacity:.32; }
.orb.c { width:320px; height:320px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 72%); top:38%; left:46%; opacity:.22; }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 16ch; color:#fff; text-shadow: 0 2px 20px rgba(12,32,28,.28); }
.hero .eyebrow { color:#fff; }
.hero .eyebrow::before { background:#fff; }
.hero .lead { max-width: 56ch; margin-top: 1rem; color: rgba(255,255,255,.92); }
.hero-cta { display:flex; flex-wrap:wrap; gap:.9rem; margin-top: 2rem; }
.slogan-en { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem,1.8vw,1.4rem); color: var(--brand-dk); }

/* ---------- photo hero ---------- */
.hero-photo { position:relative; min-height:clamp(420px,64vh,620px); display:flex; align-items:flex-end; overflow:hidden; }
.hero-img { position:absolute; inset:0; z-index:0; }
.hero-img img { width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.hero-scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(16,40,40,.82) 0%, rgba(16,40,40,.55) 45%, rgba(16,40,40,.15) 100%), linear-gradient(0deg, rgba(16,40,40,.6), transparent 55%); }
.hero-photo-content { position:relative; z-index:2; padding:clamp(2.5rem,6vw,4.5rem) 0; color:#fff; }
.hero-photo-content h1 { color:#fff; max-width:18ch; }
.hero-photo-content .lead { color:rgba(255,255,255,.9); max-width:50ch; }
.eyebrow.light { color:#ffd98a; }
.eyebrow.light::before { background:var(--gold); }

/* ---------- vertical timeline ---------- */
.timeline-v { position:relative; display:grid; gap:1.6rem; }
.tl-item { display:grid; grid-template-columns:240px 1fr; gap:1.6rem; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.tl-item:nth-child(even) { grid-template-columns:1fr 240px; }
.tl-item:nth-child(even) .tl-media { order:2; }
.tl-media { height:100%; min-height:170px; }
.tl-media img { width:100%; height:100%; object-fit:cover; display:block; }
.tl-cert { display:grid; place-items:center; background:var(--cream); padding:1rem; }
.tl-cert img { width:auto; height:auto; max-height:200px; object-fit:contain; box-shadow:var(--shadow-sm); }
.tl-text { padding:1.4rem 1.6rem; }
.tl-year { display:inline-block; font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.1em; color:var(--gold-dk); background:var(--cream); padding:.25em .8em; border-radius:999px; margin-bottom:.5rem; }
.tl-text h3 { margin:0 0 .4rem; color:var(--brand-dk); }
.tl-text p { margin:0; color:var(--ink-soft); font-size:.98rem; }
@media (max-width:680px){ .tl-item, .tl-item:nth-child(even){ grid-template-columns:1fr; } .tl-item:nth-child(even) .tl-media{ order:0; } .tl-media{ min-height:200px; } }

/* ---------- carousel ---------- */
.carousel { position:relative; }
.car-viewport { overflow:hidden; border-radius:var(--radius); }
.car-track { display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.car-slide { flex:0 0 100%; margin:0; position:relative; }
.car-slide img { width:100%; height:clamp(280px,52vw,520px); object-fit:cover; object-position:center 22%; display:block; }
.car-slide figcaption { position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.4rem .9rem; color:#fff; font-family:var(--zh); font-weight:600; font-size:1.05rem; background:linear-gradient(0deg, rgba(16,40,40,.8), transparent); }
.car-arrow { position:absolute; top:calc(50% - 24px); width:48px; height:48px; border-radius:50%; border:0; background:rgba(255,255,255,.9); color:var(--ink); font-size:1.6rem; line-height:1; cursor:pointer; box-shadow:var(--shadow-sm); display:grid; place-items:center; transition:background .2s, transform .2s; z-index:3; }
.car-arrow:hover { background:#fff; transform:scale(1.08); }
.car-prev { left:12px; } .car-next { right:12px; }
.car-dots { display:flex; gap:.5rem; justify-content:center; margin-top:1rem; }
.car-dot { width:9px; height:9px; border-radius:50%; border:0; background:var(--cream-dk); cursor:pointer; padding:0; transition:background .2s, transform .2s; }
.car-dot.on { background:var(--brand); transform:scale(1.25); }

/* event posters (portrait, side by side) */
.poster-pair { display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; max-width:720px; }
.poster { margin:0; }
.poster img { width:100%; height:auto; display:block; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--line); }
.poster figcaption { margin-top:.7rem; font-family:var(--zh); font-weight:600; font-size:.95rem; color:var(--ink-soft); text-align:center; }
@media (max-width:560px){ .poster-pair { grid-template-columns:1fr; max-width:360px; margin-inline:auto; } }

/* ---------- generic grids & cards ---------- */
.grid { display:grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--cream-dk); }
.card .ico { font-size: 2rem; line-height:1; margin-bottom:.7rem; display:block; }
.card h3 { margin-bottom:.4rem; }
.card p { color: var(--ink-soft); font-size: .98rem; margin:0; }
.card-link { display:block; color: inherit; }
.card-link:hover { color: inherit; }

/* ---------- feature cards (large, dimensional) ---------- */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.7rem; }
.feature-grid.fg-2 { grid-template-columns:repeat(2,1fr); max-width:780px; margin-inline:auto; }
@media (max-width:880px){
  .feature-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  .feature-grid.fg-2{ grid-template-columns:1fr; max-width:440px; }
}

.fcard{
  --accent: var(--brand);
  position:relative; isolation:isolate; display:flex; flex-direction:column;
  min-height:316px;
  color:inherit;
  background:
    radial-gradient(135% 90% at 50% -15%, color-mix(in srgb, var(--accent) 9%, #fff) 0%, #fff 58%);
  border:1px solid var(--line);
  border-radius:26px;
  padding:2.4rem 2rem 1.8rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 2px 6px -2px rgba(22,48,44,.10),
              0 18px 36px -22px rgba(22,48,44,.55);
  overflow:hidden;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;
}
.fcard::before{ /* top accent ribbon, grows on hover */
  content:""; position:absolute; inset:0 0 auto 0; height:6px; z-index:2;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--gold)));
  transform:scaleX(.32); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.fcard::after{ /* soft accent glow bottom-right */
  content:""; position:absolute; right:-30%; bottom:-40%; width:70%; height:70%; z-index:-1;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%);
  opacity:.6; transition:opacity .4s, transform .5s;
}
.fcard:hover{
  transform:translateY(-10px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 4px 10px -4px rgba(22,48,44,.12),
              0 34px 60px -26px rgba(22,48,44,.55);
}
.fcard:hover::before{ transform:scaleX(1); }
.fcard:hover::after{ opacity:.95; transform:scale(1.15); }

.fcard-soon{
  opacity:.5; pointer-events:none; box-shadow:0 2px 6px -2px rgba(22,48,44,.10);
}
.fcard-soon::before, .fcard-soon::after{ display:none; }

.fcard-ico{
  display:grid; place-items:center; width:70px; height:70px; border-radius:22px;
  font-size:2.15rem; line-height:1; margin-bottom:1.35rem;
  background: color-mix(in srgb, var(--accent) 13%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
              0 10px 20px -12px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.fcard:hover .fcard-ico{ transform:translateY(-4px) rotate(-5deg) scale(1.06); }

.fcard-kicker{
  display:inline-block; font:700 .72rem/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.6rem;
}
.fcard h3{ font-size:1.5rem; margin-bottom:.55rem; }
.fcard p{ color:var(--ink-soft); font-size:1.02rem; line-height:1.72; margin:0; }
.fcard-go{
  margin-top:auto; padding-top:1.5rem;
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:600; color:var(--accent);
}
.fcard-go i{ font-style:normal; transition:transform .3s; }
.fcard:hover .fcard-go i{ transform:translateX(6px); }

/* ---------- hub showcase cards ---------- */
.hubcard {
  display:flex; flex-direction:column; overflow:hidden; color:inherit;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s, border-color .3s;
}
.hubcard:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: var(--cream-dk); color:inherit; }
.hubcard-cover {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; min-height:150px; padding:1.8rem 1rem; overflow:hidden; isolation:isolate;
}
.hubcard-cover::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120px 120px at 78% 22%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(160px 160px at 18% 88%, rgba(255,255,255,.12), transparent 70%);
}
.hc-taiwan   { background: linear-gradient(135deg, var(--gold), var(--gold-dk)); }
.hc-changhua { background: linear-gradient(135deg, var(--brand), var(--brand-dk)); }
.hubcard-emoji { font-size:2.7rem; line-height:1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); transition: transform .35s; }
.hubcard:hover .hubcard-emoji { transform: scale(1.12) rotate(-4deg); }
.hubcard-region {
  font-family: var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.18em;
  color:#fff; background:rgba(0,0,0,.18); padding:.28em .9em; border-radius:999px;
}
.hubcard-body { padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.hubcard-body h3 { margin:0 0 .5rem; color:var(--brand-dk); }
.hubcard-body p { color:var(--ink-soft); font-size:.98rem; margin:0 0 1.1rem; }
.hubcard-cta {
  margin-top:auto; font-family:var(--sans); font-weight:700; font-size:.95rem; color:var(--gold-dk);
  display:inline-flex; align-items:center; gap:.1em; transition: gap .25s, color .25s;
}
.hubcard:hover .hubcard-cta { gap:.5em; color:var(--brand-dk); }

.band { background: var(--cream); }
.band-brand { background: linear-gradient(160deg, var(--brand-dk), var(--brand)); color: #f3efe6; }
.band-brand h1,.band-brand h2,.band-brand h3 { color:#fff; }
.band-brand .lead { color: rgba(255,255,255,.8); }
.band-brand a { color: var(--gold); }

/* ---------- stats / pills ---------- */
.pills { display:flex; flex-wrap:wrap; gap:.6rem; }
.pill { background:#fff; border:1px solid var(--line); border-radius:999px; padding:.45rem 1rem; font-size:.9rem; font-weight:600; color: var(--ink-soft); font-family: var(--zh); }
.pill b { color: var(--brand-dk); }

/* ---------- video grid ---------- */
.video-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(272px,1fr)); gap: 1.4rem; }
.vcard { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius: 16px; overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .22s, box-shadow .22s; }
.vcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.vthumb { position:relative; aspect-ratio:16/9; background: var(--cream); display:block; overflow:hidden; }
.vthumb img { width:100%; height:100%; object-fit: cover; transition: transform .4s; }
.vcard:hover .vthumb img { transform: scale(1.06); }
.vthumb::after { content:"▶"; position:absolute; inset:0; margin:auto; width:54px; height:54px; display:grid; place-items:center; background: rgba(14,107,96,.92); color:#fff; border-radius:50%; font-size:1.1rem; padding-left:4px; box-shadow:0 6px 20px rgba(0,0,0,.3); transition: transform .22s, background .22s; opacity:0; }
.vcard:hover .vthumb::after { transform: scale(1.12); background: var(--sunset); opacity:1; }
/* 就地播放：影片在卡片縮圖區原地播放，隱藏 ▶ 疊層 */
.vcard.playing .vthumb { background:#000; }
.vcard.playing .vthumb::after { display:none; }
.vcard.playing { cursor:default; }
.vcard.playing:hover { transform:none; }
/* duration badge */
.vdur { position:absolute; right:.5rem; bottom:.5rem; z-index:2; background: rgba(8,24,22,.82); color:#fff; font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.02em; padding:.1rem .42rem; border-radius:6px; line-height:1.4; }
/* episode chip (Grandpa Mike) */
.vep { position:absolute; left:.55rem; top:.55rem; z-index:2; background: var(--brand); color:#fff; font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.02em; padding:.18rem .55rem; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.vep-sp { background: var(--gold-dk); }
.vmeta { display:flex; flex-direction:column; gap:.2rem; padding: .85rem 1rem 1.05rem; flex:1; }
.vmeta .vt { font-family: var(--zh); font-weight:600; font-size:1rem; color:var(--ink); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vsub { font-family:var(--sans); font-size:.74rem; color:var(--ink-soft); opacity:.8; letter-spacing:.01em; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.vdate { margin-top:auto; padding-top:.45rem; font-family:var(--sans); font-size:.78rem; color:var(--ink-soft); opacity:.85; }
.mikecard .vt { font-size:1.06rem; }
/* E-vision episode grid — fixed 3 per row, larger cards */
.ep-grid { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
@media (max-width: 900px){ .ep-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .ep-grid { grid-template-columns: 1fr; } }
.ep-card .vmeta { padding: 1.05rem 1.25rem 1.25rem; }
.ep-card .ep-topic { font-family:var(--serif); font-weight:600; font-size:1.28rem; color:var(--brand-dk); line-height:1.3; }
.ep-card .ep-zh { font-family:var(--zh); font-size:.98rem; color:var(--ink-soft); margin-top:.1rem; }
.ep-card .vdate { font-size:.84rem; }
.ep-card .vep { font-size:.84rem; padding:.22rem .62rem; }

/* 影片系列入口：封面式大卡 */
.hubseries-grid { gap: 1.9rem; margin-top: .5rem; }
.hubseries { display:flex; flex-direction:column; overflow:hidden; color:inherit; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); transition:transform .28s, box-shadow .28s, border-color .28s; }
.hubseries:hover { transform:translateY(-8px); box-shadow:var(--shadow); border-color:var(--cream-dk); color:inherit; }
.hubseries-cover { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--cream); }
.hubseries-cover img { width:100%; height:100%; object-fit:cover; transition:transform .45s; }
.hubseries:hover .hubseries-cover img { transform:scale(1.06); }
.hubseries-cover::after { content:"▶"; position:absolute; inset:0; margin:auto; width:62px; height:62px; display:grid; place-items:center; background:rgba(14,107,96,.92); color:#fff; border-radius:50%; font-size:1.35rem; line-height:1; padding-left:5px; box-shadow:0 10px 26px rgba(0,0,0,.32); opacity:0; transform:scale(.82); transition:opacity .25s, transform .25s, background .25s; }
.hubseries:hover .hubseries-cover::after { opacity:1; transform:scale(1); background:var(--sunset); }
.hubseries-body { padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.hubseries-body h3 { margin:0 0 .45rem; color:var(--brand-dk); font-size:1.4rem; }
.hubseries-body p { margin:0 0 1.1rem; color:var(--ink-soft); font-size:1.02rem; line-height:1.6; }
.hubseries-meta { margin-top:auto; font-family:var(--sans); font-weight:700; font-size:1rem; color:var(--gold-dk); transition:color .2s; }
.hubseries-meta b { color:var(--brand-dk); font-size:1.15rem; }
.hubseries:hover .hubseries-meta { color:var(--brand-dk); }
/* Grandpa Mike intro */
.mike-intro { max-width: 820px; }
.mike-intro p { font-size:1.08rem; line-height:1.85; color:var(--ink-soft); margin:0 0 1rem; }
.mike-honor { position:relative; margin-top:1.4rem !important; padding:1.1rem 1.3rem; background:var(--cream); border-left:4px solid var(--gold); border-radius:0 12px 12px 0; font-weight:600; color:var(--ink) !important; }
.mike-honor span { display:block; margin-top:.5rem; font-family:var(--serif); font-style:italic; font-weight:500; font-size:.98rem; color:var(--ink-soft); }
/* in-page video lightbox — videos play here, never on YouTube */
.yt-lightbox { position:fixed; inset:0; z-index:1000; display:none; place-items:center; padding:5vmin; }
.yt-lightbox.on { display:grid; }
.yt-backdrop { position:fixed; inset:0; background:rgba(8,20,18,.84); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:ytfade .2s ease; }
.yt-stage { position:relative; z-index:1; width:min(1000px,94vw); }
.yt-frame { position:relative; aspect-ratio:16/9; width:100%; background:#000; border-radius:16px; overflow:hidden; box-shadow:0 36px 90px -24px rgba(0,0,0,.75); animation:ytpop .26s cubic-bezier(.2,.7,.3,1); }
.yt-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.yt-close { position:absolute; top:-2.9rem; right:-.2rem; z-index:2; width:2.5rem; height:2.5rem; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; transition:background .2s, transform .2s; }
.yt-close:hover { background:var(--sunset); transform:scale(1.08); }
@keyframes ytfade { from{opacity:0} to{opacity:1} }
@keyframes ytpop { from{opacity:0; transform:scale(.96) translateY(10px)} to{opacity:1; transform:none} }

/* ---------- prose ---------- */
.prose { max-width: 72ch; }
.prose.wide { max-width: 86ch; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; color: var(--brand-dk); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin: .35em 0; }
.prose strong { color: var(--ink); }

/* ---------- grammar lesson (基礎文法) ---------- */
.lesson-jump { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.lesson-jump a { font-family:var(--zh); font-size:.9rem; padding:.42em .9em; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink-soft); transition:background .2s, color .2s, transform .2s, border-color .2s; }
.lesson-jump a:hover { background:var(--brand); color:#fff; border-color:var(--brand); transform:translateY(-2px); }
.lesson { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.9rem; box-shadow:var(--shadow-sm); }
.lesson-head { display:flex; align-items:center; gap:.9rem; margin-bottom:1.3rem; }
.lesson-no { flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-family:var(--sans); font-weight:800; font-size:1.15rem; color:#fff; background:linear-gradient(135deg, var(--brand), var(--brand-dk)); box-shadow:var(--shadow-sm); }
.lesson-head h2 { margin:0; color:var(--brand-dk); }
.lesson-videos { margin-bottom:1.5rem; }
/* ---------- 動物農莊 研讀頁 ---------- */
.af-book { background:#fff; border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:14px; padding:1.5rem 1.7rem; box-shadow:var(--shadow-sm); }
.af-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem 1.8rem; margin-bottom:1rem; }
.af-meta > div { display:flex; gap:.7rem; align-items:baseline; }
.af-k { flex:none; font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.08em; color:var(--gold-dk); background:var(--cream); padding:.16em .6em; border-radius:999px; }
.af-v { color:var(--ink); font-size:.98rem; }
.af-bg { margin:0; color:var(--ink-soft); font-size:1rem; line-height:1.75; }
@media (max-width:600px){ .af-meta { grid-template-columns:1fr; } }
.af-quotes { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.4rem; }
@media (max-width:680px){ .af-quotes { grid-template-columns:1fr; } }
.af-quote { margin:0; background:linear-gradient(160deg,var(--brand-dk),var(--brand)); color:#fff; border-radius:14px; padding:1.2rem 1.4rem; }
.af-quote blockquote { margin:0; font-family:var(--serif); font-style:italic; font-size:1.12rem; line-height:1.5; }
.af-quote figcaption { margin-top:.6rem; font-size:.92rem; color:var(--gold); }
.af-ch { margin-top:2.2rem; }
.af-ch-head { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.1rem; }
.af-ch-n { flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:var(--sans); font-weight:800; font-size:1.2rem; color:#fff; background:linear-gradient(135deg,var(--gold),var(--gold-dk)); box-shadow:var(--shadow-sm); }
.af-ch-head h3 { margin:.1rem 0 .4rem; color:var(--brand-dk); }
.af-sum { margin:0; padding-left:1.1em; color:var(--ink-soft); }
.af-sum li { margin:.2em 0; font-size:.98rem; }
.af-ch .ep-card .ep-topic { font-size:1.05rem; }
.af-chars { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem 1.4rem; margin-top:.8rem; }
@media (max-width:760px){ .af-chars { grid-template-columns:1fr; } }
.af-char { display:flex; flex-direction:column; gap:.15rem; padding:.9rem 1.1rem; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); }
.af-char-n { font-family:var(--serif); font-weight:600; color:var(--brand-dk); font-size:1.08rem; }
.af-char-d { color:var(--ink-soft); font-size:.95rem; line-height:1.6; }
/* 各章朗讀：緊湊多欄的就地播放列；播放中那段橫跨整列展開
   ⚠️用 .lectures.af-lectures 提高特異度，蓋過後面定義的 .lectures{display:flex} */
.lectures.af-lectures { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:.7rem; align-items:start; }
.lectures.af-lectures .lecture.playing { grid-column:1 / -1; }

/* ---------- 英語期刊 ---------- */
.peri-series { margin-top: 2.4rem; }
.peri-series:first-child { margin-top: .5rem; }
.peri-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:1.5rem; }
.peri-card { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s; display:flex; flex-direction:column; }
.peri-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.peri-cover { position:relative; display:block; aspect-ratio:1280/1808; background:var(--cream); overflow:hidden; }
.peri-cover img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .4s; }
.peri-card:hover .peri-cover img { transform:scale(1.04); }
.peri-pdf-badge { position:absolute; top:.5rem; right:.5rem; background:var(--gold-dk); color:#fff; font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.08em; padding:.18rem .5rem; border-radius:6px; box-shadow:0 3px 10px rgba(0,0,0,.25); }
.peri-body { padding:.85rem 1rem 1rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.peri-body h4 { margin:0; font-family:var(--zh); font-weight:600; color:var(--ink); font-size:1rem; }
.peri-dl { font-family:var(--sans); font-weight:700; font-size:.85rem; color:var(--brand-dk); display:inline-flex; align-items:center; gap:.3em; }
.peri-dl::before { content:"📄"; }
.peri-dl:hover { color:var(--gold-dk); }
.peri-vids { margin-top:auto; }
.peri-vids > summary { cursor:pointer; font-size:.82rem; color:var(--ink-soft); list-style:none; padding-top:.3rem; border-top:1px dashed var(--cream-dk); }
.peri-vids > summary::-webkit-details-marker { display:none; }
.peri-vids > summary:hover { color:var(--brand-dk); }
.peri-vids[open] > summary { margin-bottom:.7rem; }
.peri-vids .video-grid { grid-template-columns:1fr; gap:.7rem; }
.peri-cover { cursor:pointer; }
.peri-read-hint { position:absolute; left:0; right:0; bottom:0; padding:.5rem; text-align:center; font-family:var(--zh); font-weight:600; font-size:.9rem; color:#fff; background:linear-gradient(0deg, rgba(8,24,22,.82), transparent); opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s; }
.peri-card:hover .peri-read-hint { opacity:1; transform:none; }
/* 就地翻頁閱讀器（全寬列，非燈箱） */
.peri-reader { grid-column:1 / -1; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); margin:.4rem 0 .6rem; overflow:hidden; }
.peri-reader[hidden] { display:none; }
.pr-bar { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem 1.2rem; background:var(--cream); border-bottom:1px solid var(--line); }
.pr-title { font-family:var(--zh); font-weight:600; color:var(--brand-dk); }
.pr-actions { display:flex; align-items:center; gap:.8rem; flex:none; }
.pr-dl { font-family:var(--sans); font-weight:700; font-size:.85rem; color:var(--brand-dk); }
.pr-dl::before { content:"📄 "; }
.pr-close { width:2rem; height:2rem; border:0; border-radius:50%; background:#fff; color:var(--ink); font-size:1.3rem; line-height:1; cursor:pointer; box-shadow:var(--shadow-sm); transition:background .2s,color .2s; }
.pr-close:hover { background:var(--sunset); color:#fff; }
.pr-stage { position:relative; display:flex; justify-content:center; padding:1.4rem 3.6rem; background:#f3efe6; }
.pr-img { max-width:100%; max-height:78vh; border-radius:6px; box-shadow:0 12px 36px -14px rgba(0,0,0,.5); background:#fff; }
.pr-prev, .pr-next { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border:0; border-radius:50%; background:rgba(255,255,255,.95); color:var(--ink); font-size:1.7rem; line-height:1; cursor:pointer; box-shadow:var(--shadow-sm); display:grid; place-items:center; transition:background .2s, transform .2s; z-index:2; }
.pr-prev { left:.8rem; } .pr-next { right:.8rem; }
.pr-prev:hover, .pr-next:hover { background:var(--brand); color:#fff; }
.pr-foot { text-align:center; padding:.7rem; font-family:var(--sans); font-size:.85rem; color:var(--ink-soft); }
@media (max-width:600px){ .pr-stage { padding:1rem 2.6rem; } .pr-prev,.pr-next{ width:38px;height:38px; } }

/* inline 語音講解播放器（不蓋講義） */
.lectures { display:flex; flex-direction:column; gap:.7rem; }
.lecture { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--cream); transition:border-color .2s; }
.lecture.playing { border-color:var(--brand); }
.lec-btn { display:flex; align-items:center; gap:.9rem; width:100%; padding:.8rem 1rem; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--zh); transition:background .2s; }
.lec-btn:hover { background:var(--brand-lt); }
.lec-play { flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--brand); color:#fff; font-size:.85rem; line-height:1; transition:transform .2s, background .2s; }
.lecture.playing .lec-play { background:var(--gold-dk); }
.lec-btn:hover .lec-play { transform:scale(1.08); }
.lec-meta { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.lec-t { font-weight:600; color:var(--ink); font-size:1rem; }
.lec-sub { font-size:.82rem; color:var(--ink-soft); }
.lec-stage { display:none; }
.lecture.playing .lec-stage { display:block; padding:0 1rem 1rem; }
.lec-stage iframe { width:100%; max-width:440px; aspect-ratio:16/9; border:0; border-radius:10px; background:#000; display:block; }
.gnotes { border-top:1px dashed var(--cream-dk); padding-top:1.3rem; }
.gnotes .gl { display:flex; gap:.55rem; align-items:flex-start; margin:.32rem 0; color:var(--ink-soft); font-size:1rem; line-height:1.65; }
.gnotes .gl > span { flex:1; }
.gnotes .gsub { margin-top:1.1rem; font-weight:600; color:var(--ink); }
.gnotes .gsub:first-child { margin-top:0; }
.gnotes .spk { margin-top:.1rem; }
.divider { height:1px; background: var(--line); border:0; margin: 2.4rem 0; }

/* list-card (booklets/periodicals/links) */
.linklist { display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:.8rem; list-style:none; padding:0; margin:0; }
.linklist a { display:flex; align-items:center; gap:.6rem; background:#fff; border:1px solid var(--line); border-radius:11px; padding:.85rem 1.1rem; font-family:var(--zh); font-weight:600; font-size:.96rem; color:var(--ink); transition: all .2s; }
.linklist a:hover { border-color: var(--brand); color: var(--brand-dk); transform: translateX(4px); }
.linklist a::before { content:"›"; color: var(--gold-dk); font-weight:700; font-size:1.2em; }

/* toc (grandfather) */
.toc { counter-reset: ch; display:grid; gap:.55rem; }
.toc .row { display:flex; gap:1rem; align-items:baseline; padding:.75rem 1rem; background:#fff; border:1px solid var(--line); border-radius:11px; }
.toc .n { font-family: var(--serif); font-weight:600; color: var(--gold-dk); min-width:2.4em; }
.toc .en { font-weight:600; }
.toc .zh { color: var(--ink-soft); font-family: var(--zh); font-size:.92rem; }

/* faq */
.faq { display:grid; gap:.85rem; }
.faq details {
  position:relative; background:#fff; overflow:hidden;
  border:1px solid var(--line); border-radius:16px;
  padding: 0 1.3rem; isolation:isolate;
  transition: border-color .25s, box-shadow .3s, transform .25s;
}
/* left accent bar that fills in when open */
.faq details::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--brand); transform:scaleY(0); transform-origin:top;
  transition: transform .3s ease; z-index:1;
}
.faq details:hover { border-color:var(--brand-lt); box-shadow:0 6px 22px rgba(14,107,96,.07); transform:translateY(-1px); }
.faq details[open] { border-color:var(--brand-lt); box-shadow:0 10px 30px rgba(14,107,96,.09); }
.faq details[open]::before { transform:scaleY(1); }
.faq summary {
  cursor:pointer; font-family:var(--zh); font-weight:700; font-size:1.04rem;
  padding:1.05rem 0; list-style:none; color:var(--ink);
  display:flex; align-items:center; gap:.7rem; line-height:1.45;
}
.faq summary::-webkit-details-marker { display:none; }
/* Q badge */
.faq summary::before {
  content:"Q"; flex:none; width:1.7em; height:1.7em;
  display:grid; place-items:center; border-radius:9px;
  background:var(--brand-lt); color:var(--brand-dk);
  font-weight:800; font-size:.82rem; letter-spacing:.02em;
  transition: background .25s, color .25s, transform .3s;
}
.faq details[open] summary::before { background:var(--brand); color:#fff; transform:rotate(-4deg); }
/* + / × toggle */
.faq summary::after {
  content:"+"; flex:none; margin-left:auto;
  width:1.7em; height:1.7em; display:grid; place-items:center;
  border-radius:50%; background:var(--cream); color:var(--brand);
  font-size:1.3rem; font-weight:300; line-height:1;
  transition: transform .3s ease, background .25s, color .25s;
}
.faq summary:hover::after { background:var(--brand-lt); }
.faq details[open] summary::after { transform:rotate(135deg); background:var(--brand); color:#fff; }
.faq details[open] summary { color: var(--brand-dk); }
.faq .a {
  padding: 0 .2rem 1.2rem 2.4rem; color: var(--ink-soft);
  font-size:1rem; line-height:1.75;
}
.faq details[open] .a { animation: faqReveal .38s cubic-bezier(.22,.61,.36,1) both; }
@keyframes faqReveal { from { opacity:0; transform:translateY(-7px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .faq details, .faq details::before, .faq summary::before, .faq summary::after { transition:none; }
  .faq details[open] .a { animation:none; }
}

/* donate card */
.donate { background: linear-gradient(155deg,#fff, var(--cream)); border:1px solid var(--cream-dk); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); }
.donate .acct { font-family: var(--sans); font-weight:700; font-size:1.15rem; color: var(--brand-dk); letter-spacing:.02em; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #cdddd7; padding: clamp(3rem,6vw,4.5rem) 0 2rem; }
.site-footer h4 { color:#fff; font-family: var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:1rem; }
.site-footer a { color:#cdddd7; }
.site-footer a:hover { color: var(--gold); }
.foot-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:2rem; }
@media (max-width:780px){ .foot-grid{ grid-template-columns:1fr; gap:1.6rem; } }
.foot-brand { font-family: var(--serif); font-size:1.3rem; color:#fff; margin-bottom:.6rem; }
.foot-list { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; font-size:.95rem; }
.foot-bottom { border-top:1px solid rgba(255,255,255,.13); margin-top:2.4rem; padding-top:1.4rem; font-size:.85rem; color: rgba(205,221,215,.6); display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; justify-content:space-between; }

/* ---------- founder / profile ---------- */
.split { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.split.rev { grid-template-columns: .95fr 1.05fr; }
@media (max-width:860px){ .split,.split.rev{ grid-template-columns:1fr; } .split.rev .split-media{ order:-1; } }
.portrait {
  position:relative; border-radius: 22px; overflow:hidden; box-shadow: var(--shadow);
  border:6px solid #fff; outline:1px solid var(--line);
}
.portrait img { width:100%; display:block; }
.portrait::after { content:""; position:absolute; inset:0; box-shadow: inset 0 -60px 80px -40px rgba(22,48,44,.35); }
.media-frame { border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-sm); background:#fff; }

.pullquote {
  font-family: var(--serif); font-size: clamp(1.4rem,2.8vw,2.1rem); line-height:1.4; color: var(--brand-dk);
  border-left: 4px solid var(--gold); padding: .2rem 0 .2rem 1.3rem; margin: 1.6rem 0; font-weight: 500;
}
.pullquote small { display:block; font-family: var(--sans); font-size:.95rem; color: var(--ink-soft); margin-top:.7rem; font-weight:600; }

.figure { margin:0; }
.figure img { width:100%; border-radius:16px; border:1px solid var(--line); box-shadow: var(--shadow-sm); }
.figure figcaption { font-size:.9rem; color: var(--ink-soft); margin-top:.7rem; font-family: var(--zh); text-align:center; }

.award-photos { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--gap); align-items:end; }
@media (max-width:640px){ .award-photos{ grid-template-columns:1fr; } }

.timeline { list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:0; }
.timeline li { position:relative; padding: 0 0 1.6rem 1.8rem; border-left:2px solid var(--brand-lt); }
.timeline li:last-child{ border-color:transparent; }
.timeline li::before { content:""; position:absolute; left:-7px; top:.4rem; width:12px; height:12px; border-radius:50%; background: var(--gold); box-shadow:0 0 0 4px var(--paper); }
.timeline .yr { font-family: var(--serif); font-weight:600; color: var(--brand-dk); font-size:1.05rem; }
.timeline .tx { color: var(--ink-soft); font-size:.98rem; font-family: var(--zh); }

.brand-emblem { display:flex; align-items:center; gap:1.2rem; }
.brand-emblem img { width:96px; height:auto; flex:none; }

/* ---------- reading unit (基礎英語) ---------- */
.unit { background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow:hidden; margin-bottom:2rem; }
.unit-head { display:flex; align-items:center; gap:1rem; padding:1.3rem 1.6rem; background: linear-gradient(120deg, var(--brand-dk), var(--brand)); color:#fff; }
.unit-head .no { flex:none; width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.16); display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:1.2rem; }
.unit-head h3 { color:#fff; margin:0; font-size:1.4rem; }
.unit-dl { margin-left:auto; flex:none; background:rgba(255,255,255,.18); color:#fff; border-radius:999px; padding:.4rem .9rem; font-size:.85rem; font-weight:700; font-family:var(--zh); white-space:nowrap; transition:background .2s; }
.unit-dl:hover { background:rgba(255,255,255,.32); color:#fff; }
.unit-body { padding: clamp(1.3rem,3vw,2rem); }
.unit-grid { display:grid; grid-template-columns: 300px 1fr; gap:1.8rem; align-items:start; }
@media (max-width:720px){ .unit-grid{ grid-template-columns:1fr; } }
.unit-photo { border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.unit-photo img { width:100%; display:block; }
.passage { font-size:1.3rem; line-height:1.9; color:var(--ink); margin:0 0 1rem; }
.passage .kw { font-weight:700; color:var(--brand-dk); background:linear-gradient(transparent 62%, var(--gold-lt,#f6e3b8) 62%); padding:0 .05em; }
.spk { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border:0; background:var(--brand-lt); color:var(--brand-dk); width:30px; height:30px; border-radius:50%; font-size:.95rem; vertical-align:middle; transition:background .2s, transform .2s; flex:none; }
.spk:hover { background:var(--brand); color:#fff; transform:scale(1.1); }
.spk.lg { width:38px; height:38px; font-size:1.1rem; }
.audio-row { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:.4rem 0 1.2rem; }
.audio-row audio { height:38px; }
.tr-toggle { background:none; border:1px dashed var(--cream-dk); color:var(--ink-soft); border-radius:999px; padding:.4rem 1rem; cursor:pointer; font-family:var(--zh); font-weight:600; font-size:.9rem; }
.tr-toggle:hover { border-color:var(--brand); color:var(--brand-dk); }
.tr-box { margin-top:.7rem; padding:1rem 1.2rem; background:var(--cream); border-radius:12px; color:var(--ink-soft); display:none; }
.tr-box.show { display:block; }
.vocab-row { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.3rem; }
.vchip { display:inline-flex; align-items:center; gap:.5rem; background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:.5rem .9rem; }
.vchip b { color:var(--ink); } .vchip .pos { color:var(--gold-dk); font-size:.82rem; } .vchip .zh { color:var(--ink-soft); font-family:var(--zh); }
.adv-list { display:grid; gap:.9rem; margin-top:.5rem; }
.adv-item { border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; }
.adv-item .top { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.adv-item .top b { font-size:1.08rem; color:var(--brand-dk); } .adv-item .top .pos{ color:var(--gold-dk); font-size:.82rem; } .adv-item .top .zh{ color:var(--ink-soft); font-family:var(--zh); }
.adv-item .eg { margin:.5rem 0 0; display:flex; align-items:flex-start; gap:.5rem; }
.adv-item .eg span { font-size:1.02rem; }
.adv-item .eg-zh { color:var(--ink-soft); font-family:var(--zh); font-size:.92rem; margin:.25rem 0 0; }
.sub-head { font-family:var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dk); margin:1.6rem 0 .6rem; }
.teach-audio { display:grid; gap:.6rem; margin-top:.4rem; }
.teach-audio .ta { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; font-family:var(--zh); font-size:.92rem; color:var(--ink-soft); }
.teach-audio audio { height:34px; }

.quiz { border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.3rem; margin-top:.8rem; }
.quiz .q { font-family:var(--zh); font-weight:600; margin-bottom:.7rem; }
.quiz-opts { display:grid; gap:.5rem; }
.quiz-opt { text-align:left; background:#fff; border:1px solid var(--line); border-radius:10px; padding:.6rem .9rem; cursor:pointer; font-size:1rem; transition:all .15s; }
.quiz-opt:hover { border-color:var(--brand); }
.quiz-opt .ql { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:6px; background:var(--cream); color:var(--brand-dk); font-weight:700; font-size:.85rem; margin-right:.6rem; flex:none; }
.quiz-opt { display:flex; align-items:center; }
.quiz-opt.right .ql { background:#3f9e63; color:#fff; }
.quiz-opt.wrong .ql { background:#cf6b5e; color:#fff; }
.quiz-opts.done .quiz-opt { cursor:default; }
.quiz-opt.right { background:#e6f4ea; border-color:#3f9e63; color:#1f6b3e; font-weight:600; }
.quiz-opt.wrong { background:#fbeaea; border-color:#cf6b5e; color:#a23a2c; }
.spk.on { background:var(--sunset); color:#fff; }

/* ---------- basic reading unit ---------- */
.rd-photos { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.rd-photos img { flex:1 1 240px; min-width:0; max-height:280px; object-fit:cover; border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.passage-block { margin-bottom:1rem; }
.rd-para { display:flex; gap:.6rem; align-items:flex-start; font-size:1.16rem; line-height:1.95; margin:0 0 .9rem; color:var(--ink); }
.rd-para .spk { margin-top:.3rem; }
.qa-list { display:grid; gap:.7rem; }
.qa { border:1px solid var(--line); border-radius:12px; padding:.9rem 1.2rem; }
.qa .q { display:flex; gap:.5rem; align-items:flex-start; font-weight:600; font-family:var(--zh); margin:0 0 .6rem; }
.qa .tr-toggle { margin:0; }
.vocab-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:.6rem; }
.vocab-grid .vchip { justify-content:flex-start; }

/* ---------- conversation / dialogue ---------- */
.dialogue { display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.2rem; }
.turn { display:flex; flex-direction:column; max-width:88%; }
.turn .who { font-family:var(--zh); font-weight:700; font-size:.84rem; margin:0 .4rem .22rem; }
.turn .said { display:flex; gap:.5rem; align-items:flex-start; margin:0; padding:.7rem 1rem; border-radius:16px; font-size:1.12rem; line-height:1.7; color:var(--ink); }
.turn .said .spk { margin-top:.15rem; }
.turn-A { align-self:flex-start; }
.turn-A .who { color:var(--brand-dk); }
.turn-A .said { background:var(--brand-lt); border-bottom-left-radius:5px; }
.turn-B { align-self:flex-end; align-items:flex-end; }
.turn-B .who { color:var(--gold-dk); text-align:right; }
.turn-B .said { background:var(--cream); border-bottom-right-radius:5px; }
@media (max-width:560px){ .turn{ max-width:97%; } }

/* ---------- team / teachers ---------- */
.team-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(146px,1fr)); gap: 1.8rem 1rem; }
.person { text-align:center; }
.person .ph { width:120px; height:120px; border-radius:50%; overflow:hidden; margin:0 auto .8rem; border:4px solid #fff; box-shadow: var(--shadow-sm); background: var(--cream); transition: transform .25s, box-shadow .25s; }
.person:hover .ph { transform: translateY(-5px); box-shadow: var(--shadow); }
.person .ph img { width:100%; height:100%; object-fit: cover; display:block; }
.person b { display:block; font-family: var(--zh); font-size:1rem; font-weight:600; color: var(--ink); line-height:1.3; }
.person small { color: var(--ink-soft); font-size:.85rem; }

/* utilities */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.maxw{max-width:62ch}
.flex{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.muted{color:var(--ink-soft)}
.tag{display:inline-block;background:var(--brand-lt);color:var(--brand-dk);font-weight:700;font-size:.78rem;padding:.25em .8em;border-radius:999px;font-family:var(--zh)}

/* ── 麥克爺爺：國際交流頁典範大區塊 ── */
.mike-feature{
  display:grid;grid-template-columns:1.05fr 1.25fr;gap:clamp(1.4rem,3vw,2.6rem);
  align-items:center;margin:0 0 2.4rem;padding:clamp(1.6rem,3vw,2.4rem);
  border-radius:var(--radius);position:relative;overflow:hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(217,154,43,.16), transparent 60%),
    linear-gradient(135deg, var(--brand-dk), var(--brand) 70%);
  color:#fff;box-shadow:var(--shadow);
}
.mike-feature::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,.14);pointer-events:none;
}
.mike-feature-text .eyebrow{color:var(--gold);letter-spacing:.14em}
.mike-feature-text h2{
  font-family:var(--serif);color:#fff;margin:.3rem 0 .7rem;
  font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.12;
}
.mike-feature-text p{color:rgba(255,255,255,.92);margin:0 0 .9rem;max-width:46ch}
.mike-feature-honor{
  font-style:italic;color:var(--gold)!important;font-weight:600;
  border-left:3px solid var(--gold);padding-left:.9rem;
}
.mike-feature .btn-gold{margin-top:.5rem}
.mike-feature-grid{grid-template-columns:1fr 1fr;gap:.8rem}
.mike-feature-grid .vcard{background:rgba(255,255,255,.06);border-radius:var(--radius-sm)}
.mike-feature-grid .vcard .vt,.mike-feature-grid .vcard .vsub,.mike-feature-grid .vcard .vdate{color:#fff}
.mike-feature-grid .vcard:first-child{grid-column:1 / -1}
@media(max-width:760px){
  .mike-feature{grid-template-columns:1fr}
  .mike-feature-grid{grid-template-columns:1fr 1fr}
  .mike-feature-grid .vcard:first-child{grid-column:1 / -1}
}

/* ── 麥克爺爺：PeoPo 媒體報導區塊 ── */
.news-report{max-width:880px;margin:1.6rem auto 0;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2.4rem);box-shadow:var(--shadow-sm)}
.news-report .news-meta{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:1.1rem}
.news-report .prose p{margin:0 0 1rem}
.news-quote{margin:1.4rem 0;padding:1.1rem 1.3rem;border-left:4px solid var(--gold);
  background:var(--cream);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-family:var(--serif);font-size:1.08rem;line-height:1.7;color:var(--ink)}
.news-quote cite{display:block;margin-top:.6rem;font-style:normal;font-weight:700;
  font-family:var(--sans);color:var(--brand-dk)}
.news-photos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0}
.news-photos .figure{margin:0}
.news-photos .figure img{width:100%;height:auto;border-radius:var(--radius-sm);display:block;box-shadow:var(--shadow-sm)}
.news-photos figcaption{margin-top:.5rem;font-size:.9rem;color:var(--ink-soft);font-family:var(--zh)}
.report-link{display:inline-block;margin-top:.6rem;font-weight:700;color:var(--brand);
  text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s}
.report-link:hover{border-color:var(--brand)}
@media(max-width:560px){.news-photos{grid-template-columns:1fr}}

/* ── 國際交流：學校訪問雙人物 hub（仿 school-tour）── */
.tour-tl{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tour-tl .tnode{background:var(--white);border:1px solid var(--line);border-radius:30px;
  padding:11px 24px;box-shadow:var(--shadow-sm);text-align:center}
.tour-tl .tnode small{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.tour-tl .tnode b{font-family:var(--serif);font-weight:400;font-size:1.12rem;color:var(--ink)}
.tour-tl .tarrow{color:var(--gold);font-size:1.5rem;line-height:1}
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem);margin-top:1.6rem}
.pcard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.pcard .pc-img{display:block;aspect-ratio:16/10;background-size:cover;background-position:center}
.pcard .pc-body{padding:clamp(1.2rem,2.4vw,1.7rem);display:flex;flex-direction:column;gap:.55rem;flex:1}
.pcard .pc-tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold-dk)}
.pcard h3{font-family:var(--serif);font-size:1.45rem;margin:0;color:var(--ink)}
.pcard .pc-body p{margin:0;color:var(--ink-soft);line-height:1.65;flex:1}
.pcard .pc-go{font-weight:700;color:var(--brand);margin-top:.3rem}
.pcard:hover .pc-go{color:var(--brand-dk)}
/* Dom Jones 頁：三支柱＋播放清單 */
.dom-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.4rem}
.dpill{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--shadow-sm)}
.dpill .dp-ico{font-size:1.8rem;display:block;margin-bottom:.5rem}
.dpill h3{font-family:var(--serif);font-size:1.2rem;margin:0 0 .4rem;color:var(--ink)}
.dpill p{margin:0;color:var(--ink-soft);line-height:1.6;font-size:.97rem}
.playlist-frame{position:relative;aspect-ratio:16/9;background:#111;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);max-width:900px}
.playlist-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:760px){.pcards{grid-template-columns:1fr}.dom-pillars{grid-template-columns:1fr}}

/* ===== 國際夥伴頁 ===== */
.partner { display:grid; grid-template-columns:1fr; gap:0; background:var(--white); border:1px solid var(--line); border-left:7px solid var(--pc,var(--brand)); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:1.8rem; }
@media(min-width:760px){ .partner{ grid-template-columns:250px 1fr; } }
.partner-photo { background:var(--pc-deep,var(--brand-dk)); }
.partner-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; min-height:260px; }
.partner-body { padding:2rem 2.1rem; }
.partner-tag { display:inline-block; font-family:var(--zh); font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--pc,var(--brand)); background:var(--pc-soft,var(--brand-lt)); padding:.32em 1em; border-radius:999px; margin-bottom:.8rem; }
.partner-body h2 { font-family:var(--serif); font-size:1.7rem; margin:0; color:var(--ink); }
.partner-body .role { margin:.4rem 0 0; font-size:1.02rem; font-weight:600; color:var(--pc,var(--brand)); }
.partner-body .zh { margin:.85rem 0 0; font-size:1.04rem; color:var(--ink-soft); line-height:1.85; }
.partner-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.partner-meta span { font-size:.85rem; font-weight:600; color:var(--pc-deep,var(--brand-dk)); background:var(--pc-soft,var(--brand-lt)); padding:.3em .9em; border-radius:999px; }
.partner-go { display:inline-block; margin-top:1.2rem; background:var(--pc,var(--brand)); color:#fff; font-weight:700; padding:.7em 1.5em; border-radius:999px; transition:filter .2s, transform .2s; }
.partner-go:hover { filter:brightness(.93); color:#fff; transform:translateY(-2px); }

.partner.memoriam { background:linear-gradient(135deg,#fbf6ec,#f3e9d4); border-color:#e7dcc6; border-left-color:#9a7b43; }
.memoriam .partner-photo { background:#4f3f29; }
.memoriam .partner-photo img { object-position:center 28%; }
.memoriam .partner-tag.mem { color:#7a5f38; background:#efe2c8; }
.memoriam .partner-body h2 { color:#4f3f29; }
.memoriam .partner-body .role { color:#7a5f38; }
.memoriam .partner-body .zh { color:#5b5147; }
.memoriam .partner-go { background:#9a7b43; }

.progcard-grid { display:grid; grid-template-columns:1fr; gap:1.4rem; margin-top:1.6rem; }
.progcard { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-left:7px solid var(--sunset); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; transition:transform .25s, box-shadow .25s; }
@media(min-width:760px){ .progcard{ flex-direction:row; } }
.progcard:hover { transform:translateY(-4px); box-shadow:var(--shadow); color:inherit; }
.progcard-thumb { background:#7c2d12; flex:none; overflow:hidden; }
@media(min-width:760px){ .progcard-thumb{ width:300px; } }
.progcard-thumb img { width:100%; height:100%; object-fit:cover; display:block; min-height:190px; aspect-ratio:16/9; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.progcard:hover .progcard-thumb img { transform:scale(1.06); }
.progcard-body { padding:1.6rem 1.8rem; }
.progcard-body h3 { font-family:var(--serif); font-size:1.3rem; margin:0; color:var(--ink); }
.progcard-body p { margin:.6rem 0 0; color:var(--ink-soft); line-height:1.7; }
.progcard-body .go { display:inline-block; margin-top:.8rem; color:var(--sunset); font-weight:700; }
.progcard-more { border-left-color:var(--cream-dk); background:var(--cream); }

/* 國際夥伴詳介頁 */
.pstats { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.8rem; }
.pstat { font-family:var(--zh); font-size:.92rem; font-weight:600; color:var(--brand-dk); background:var(--brand-lt); padding:.4em 1em; border-radius:999px; }
.psection { margin-top:2.2rem; }
.psection h2 { font-family:var(--serif); font-size:1.5rem; color:var(--ink); margin-bottom:.7rem; }
.pgallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; margin:1.8rem 0; }
.pgallery .figure { margin:0; }
.pgallery .figure img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; border-radius:var(--radius-sm); }