/* ============================================================
   新思惟國際 V3 — 設計系統「教學現場的年報」
   概念:這不是廣告,是一份持續更新的教學現場檔案。
   語言:期刊 × 年報 × 紀實攝影。白紙、墨字、細線、編號、
        mono 圖說、直角、無陰影、無漸層、無 emoji。
   紅 #e8412a 三種角色:記號 / 強調 / CTA,面積壓在 5% 以下。
   ============================================================ */
:root{
  --brand:#e8412a;      /* 唯一的彩色 */
  --ink:#1a1a1a;        /* 近黑 */
  --ink-2:#5f5b56;      /* 次要文字,暖灰 */
  --paper:#ffffff;
  --paper-2:#f7f5f2;    /* 紙灰襯底：可點票卡底色 */
  --paper-3:#efece7;    /* 票卡 hover 加深 */
  --hairline:#e3e0dc;
  --dark:#161412;       /* 深色區(平塗) */
  --serif:"Noto Serif TC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --maxw:1200px;
  --nav-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* 首屏頂部:標題+數字(精簡 hero 文字),下接近期課程 */
.hero-top{padding:44px 0 0}
.hero-top h1{font-family:var(--serif);font-weight:900;font-size:clamp(1.7rem,3.8vw,2.6rem);
  line-height:1.3;letter-spacing:normal}
.hero-top h1 span{color:var(--brand)}
.hero-top .kicker{margin-bottom:14px}
.hero-top .fact-line{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:14px}
.hero-top .fact-line b{color:var(--ink);font-weight:500}
/* 近期課程緊接標題區,不用一般 section 的大間距 */
section.first{padding-top:40px}
/* 首頁近期課程:眉題與段標併為同一行小字,與圖卡之間不再畫線 */
.sec-head-slim{margin-bottom:22px}
section.first .course-cards{border-top:none;padding-top:0}
/* hero 區現在只有照片(過場),照片不再另加上邊距 */
.hero>.hero-photo{margin-top:0}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:1.9;font-size:1.0625rem;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:112px 0 0}
footer{margin-top:112px}
.band+footer{margin-top:0}

/* ── 文字連結:紅底線生長(全站統一 hover 語言) ── */
.tlink{color:var(--ink);font-weight:600;
  background:linear-gradient(var(--brand),var(--brand)) left bottom / 0 2px no-repeat;
  transition:background-size .25s ease;padding-bottom:2px}
.tlink:hover{background-size:100% 2px}
.tlink.red{color:var(--brand)}

/* ── mono 眉題 / 圖說 / meta ── */
.kicker{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--ink-2);line-height:1.6}
.kicker b{color:var(--brand);font-weight:500}
.caption{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);line-height:1.6;
  padding:10px 0 0;border-top:1px solid var(--hairline);margin-top:0}

/* ── section 標頭裝置:細線 + 編號眉題 + serif 大標 ── */
.sec-head{border-top:1px solid var(--ink);padding-top:14px;margin-bottom:44px}
.sec-head .no{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--ink-2)}
.sec-head .no b{color:var(--brand);font-weight:500}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.1rem);
  line-height:1.35;margin-top:14px;letter-spacing:normal}
.sec-head .lead{margin-top:12px;font-size:1.125rem;line-height:1.85;color:var(--ink-2)}

/* ── 按鈕:矩形、直角 ── */
.btn{display:inline-block;background:var(--brand);color:#fff;font-weight:700;font-size:1rem;
  padding:14px 32px;border:1px solid var(--brand);transition:background .2s,border-color .2s}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ============ NAV ============ */
header.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--hairline)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.05rem;font-family:var(--serif)}
.brand img{height:30px;width:auto}
.brand b{color:var(--brand)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--ink);font-size:.95rem;font-weight:600}
.nav-links a:not(.nav-cta){padding-bottom:3px;
  background:linear-gradient(var(--brand),var(--brand)) left bottom / 0 2px no-repeat;
  transition:background-size .2s ease}
.nav-links a:not(.nav-cta):hover{background-size:100% 2px}
.nav-links a:not(.nav-cta).active{background-size:100% 2px;color:var(--ink)}
.nav-cta{background:var(--brand);color:#fff !important;padding:10px 22px;font-weight:700;
  white-space:nowrap;transition:background .2s}
.nav-cta:hover{background:var(--ink)}
.nav-ham{display:none}
#nav-drawer{display:none}

/* ── 全站搜尋(按鈕與面板由 nav.js 注入)── */
.nav-search{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  background:none;border:none;cursor:pointer;color:var(--ink);padding:0;transition:color .15s}
.nav-search svg{width:19px;height:19px}
.nav-search:hover,.nav-search.active{color:var(--brand)}
#search-panel{position:fixed;top:var(--nav-h);left:0;right:0;z-index:48;background:var(--paper);
  border-bottom:1px solid var(--ink);padding:22px 0 26px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
#search-panel.open{opacity:1;visibility:visible;transform:none}
#search-backdrop{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:47;
  background:rgba(26,26,26,.35);opacity:0;visibility:hidden;
  transition:opacity .22s ease,visibility .22s}
#search-backdrop.open{opacity:1;visibility:visible}
.sp-row{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.sp-row>svg{width:18px;height:18px;color:var(--ink-2);flex-shrink:0}
#sp-input{flex:1;min-width:0;border:none;outline:none;font-family:var(--sans);
  font-size:1.125rem;color:var(--ink);background:transparent}
#sp-input::placeholder{color:#b5b0aa}
#sp-input::-webkit-search-cancel-button{display:none}
.sp-close{background:none;border:none;cursor:pointer;color:var(--ink-2);
  font-size:1.05rem;padding:6px 8px;line-height:1;transition:color .15s}
.sp-close:hover{color:var(--brand)}
.sp-results{max-height:min(58vh,520px);overflow-y:auto;margin-top:4px}
.sp-count{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);padding:12px 0 2px}
.sp-empty{font-family:var(--mono);font-size:.9rem;color:var(--ink-2);padding:18px 0}
.sp-item{display:block;padding:13px 4px;border-bottom:1px solid var(--hairline);transition:background .15s}
.sp-item:hover{background:var(--paper-2)}
.sp-meta{display:block;font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}
.sp-cat{color:var(--brand)}
.sp-item b{display:block;font-weight:600;font-size:1rem;line-height:1.6;color:var(--ink);margin-top:2px}
.sp-snip{display:block;font-size:.85rem;color:var(--ink-2);line-height:1.7;margin-top:2px}
.sp-item mark,.sp-snip mark{background:#fbe1dc;color:inherit;padding:0 1px}

/* ============ HERO ============ */
.hero{padding:72px 0 0}
.hero .kicker{margin-bottom:22px}
.hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(1.9rem,5vw,3.4rem);
  line-height:1.25;letter-spacing:normal;max-width:20em}
.hero h1 span{color:var(--brand)}
.hero .sub{margin-top:20px;font-size:1.125rem;line-height:1.85;color:var(--ink-2)}
.hero .fact-line{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:26px}
.hero .fact-line b{color:var(--ink);font-weight:500}
.hero .btn-row{margin-top:28px}
.hero-photo{margin-top:64px;position:relative}
.hero-photo img{width:100%;height:min(56vh,620px);object-fit:cover;object-position:center 40%}
.hero-photo .caption{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px}
/* 主 CTA 疊在 hero 照片上,置於兩位人物的視覺正中間,上下堆疊。
   top 取照片高度的一半(照片高 min(56vh,620px)),而非 figure(含圖說)的一半 */
.hero-cta{position:absolute;left:50%;top:min(28vh,310px);transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2}
.hero-cta .btn{min-width:11em;text-align:center}
.hero-cta .btn{box-shadow:0 2px 14px rgba(0,0,0,.25)}
.hero-cta .btn.ghost{color:#fff;border-color:#fff;background:rgba(22,20,18,.25)}
.hero-cta .btn.ghost:hover{background:var(--ink);border-color:var(--ink)}

/* hero 下的一句話 + 四分欄(我們教什麼) */
.teach-strip{padding:56px 0 0}
.teach-strip .lead-strip{font-size:1.125rem;line-height:1.85;color:var(--ink-2)}
.teach-strip .pillars{margin-top:28px}

/* ============ 課程圖卡(近期課程) ============
   hover 語言:小抖動提示 + 反白(深灰平塗)。外框統一圓角、淺灰 */
@keyframes card-jiggle{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-.5deg)}
  40%{transform:rotate(.5deg)}
  60%{transform:rotate(-.3deg)}
  80%{transform:rotate(.3deg)}
}
.course-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  border-top:1px solid var(--ink);padding-top:32px}
/* 底色用紙灰 --paper-2：全站慣例「有襯底＝這張卡可以點」，讓視覺往卡片走 */
.course-card{position:relative;display:flex;flex-direction:column;
  border:1px solid var(--hairline);border-radius:14px;background:var(--paper-2);
  padding:26px 24px 22px;transition:background .2s,color .2s,border-color .2s}
/* 課程 banner:取自各報名網站的 og 圖,滿版貼齊卡片圓角頂 */
.cc-banner{width:calc(100% + 48px);max-width:none;margin:-26px -24px 18px;
  border-radius:13px 13px 0 0;display:block}
.course-card:hover{background:#43403b;border-color:#43403b;color:#fff;
  animation:card-jiggle .45s ease}
.cc-tag{align-self:flex-start;font-family:var(--mono);font-size:.75rem;font-weight:500;
  background:var(--brand);color:#fff;padding:2px 10px;border-radius:4px;margin-bottom:14px}
.cc-tag.alt{background:transparent;color:var(--ink-2);border:1px solid var(--hairline);padding:1px 9px}
.course-card:hover .cc-tag.alt{color:#e3e0dc;border-color:#6a645d}
.cc-date{font-family:var(--mono);font-weight:500;color:var(--ink)}
.cc-date b{font-size:1.6rem;font-weight:500}
.cc-date span{color:var(--ink-2);font-size:.8125rem;margin-left:8px}
.course-card:hover .cc-date,.course-card:hover .cc-date b,
.course-card:hover .cc-date span{color:#fff}
.course-card h3{font-family:var(--serif);font-weight:700;font-size:1.25rem;line-height:1.5;
  letter-spacing:normal;margin-top:6px}
.course-card:hover h3{color:#fff}
.cc-rule{border:none;border-top:1px solid var(--hairline);margin:16px 0;width:100%}
.course-card:hover .cc-rule{border-color:#5c5751}
.course-card p{color:var(--ink-2);font-size:.95rem;line-height:1.8;flex:1}
.course-card:hover p{color:#e3e0dc}
.cc-loc{display:flex;align-items:flex-start;gap:7px;
  font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:14px;line-height:1.7}
.cc-loc svg{width:14px;height:14px;flex-shrink:0;margin-top:5px}/* stroke:currentColor,跟著文字反白 */
.course-card:hover .cc-loc{color:#d0cac2}
.cc-cta{margin-top:18px;text-align:right;color:var(--brand);font-weight:700;font-size:.95rem}
.course-card:hover .cc-cta{color:#fff}
.course-more{padding:24px 8px 0}

/* 額滿圖卡:壓「已額滿」章,但保留連結可驗證、可回訪活動網站。
   注意:.full 的底色規則在 :hover 之後、優先權又同級,hover 底色一定要在下面明確再寫一次 */
.course-card.full{border-color:var(--hairline);background:var(--paper-2)}
.course-card.full .cc-date,.course-card.full .cc-date b,.course-card.full h3{color:var(--ink-2)}
.course-card.full:hover{background:#43403b;border-color:#43403b;color:#fff}
.course-card.full:hover .cc-date,.course-card.full:hover .cc-date b,
.course-card.full:hover .cc-date span,.course-card.full:hover h3{color:#fff}
/* 「已額滿」章:蓋在日期列右側的空白處(HTML 上放在 .cc-date 內),
   紅字紅框,放大到不擋文字的上限。
   注意:選擇器要壓過「.cc-date span」(13px 灰字),否則章的字級與紅色會被蓋掉 */
.course-card.full .cc-date{position:relative}
.course-card .cc-date span.cc-stamp{position:absolute;right:2px;top:50%;
  transform:translateY(-50%) rotate(-8deg);margin-left:0;
  border:4px solid var(--brand);border-radius:9px;color:var(--brand);
  font-family:var(--serif);font-weight:900;
  font-size:1.25rem;letter-spacing:.3em;padding:3px 5px 3px 15px;
  pointer-events:none;white-space:nowrap;line-height:1.55}
.course-card.full:hover .cc-date span.cc-stamp{color:var(--brand);border-color:var(--brand)}
.cc-cta.dim{color:var(--ink-2);font-weight:600}
.course-card.full:hover .cc-cta.dim{color:#fff}

/* ── 我們教什麼:報紙分欄 ── */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--ink)}
.pillar{padding:22px 20px 26px;border-left:1px solid var(--hairline);transition:background .15s}
.pillar:first-child{border-left:none;padding-left:8px}
.pillar:hover{background:var(--paper-2)}
.pillar .n{font-family:var(--serif);font-weight:900;font-size:1.9rem;color:var(--brand);line-height:1}
.pillar b{display:block;font-family:var(--serif);font-weight:700;font-size:1.125rem;margin-top:12px;letter-spacing:normal}
.pillar span{display:block;color:var(--ink-2);font-size:.9rem;margin-top:4px;line-height:1.7}

/* ============ 成績:年報跨頁 ============ */
.report{display:grid;grid-template-columns:4fr 8fr;gap:56px;align-items:start}
.report>div{min-width:0} /* 讓可捲動的直方圖不會把 grid 欄撐開 */
.report .left{position:sticky;top:calc(var(--nav-h) + 24px)}
.counter-wrap{margin:0}
.counter-kicker{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--ink-2)}
.counter{font-family:var(--serif);font-weight:900;font-size:clamp(4rem,10vw,7.5rem);line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:normal;margin-top:10px}
.counter-rule{width:48px;height:3px;background:var(--brand);margin:18px 0 12px}
.counter-sub{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);line-height:1.7}

/* 事實列(key figures) */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);
  border-bottom:1px solid var(--hairline);margin-top:44px}
.fact{padding:18px 18px 20px;border-left:1px solid var(--hairline);display:block}
.fact:first-child{border-left:none;padding-left:4px}
/* 可點的事實卡：不用底線與箭頭，改「淺色票卡＋品牌紅數字」示意可點，hover 加深 */
a.fact{background:var(--paper-2);transition:background .15s}
a.fact:hover{background:var(--paper-3)}
a.fact b{color:var(--brand)}
.fact b{display:block;font-family:var(--mono);font-weight:500;font-size:1.45rem;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.3}
.fact span{display:block;font-size:.85rem;color:var(--ink-2);margin-top:4px;line-height:1.6}
a.fact span{color:var(--ink-2)}

/* 圖 1:直方圖(期刊化) */
.hist{margin-top:56px}
.hist-title{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--ink)}
.hist-title b{color:var(--brand);font-weight:500}
.bars{display:flex;align-items:flex-end;gap:2.2%;height:220px;margin-top:26px;
  border-bottom:1px solid var(--ink);padding-bottom:0}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bar-num{font-family:var(--mono);font-size:.8125rem;color:var(--ink);font-weight:500;margin-bottom:6px;
  opacity:1;font-variant-numeric:tabular-nums}
/* flex-shrink:0 關鍵:不加的話,值接近最大的長條會被 flex 壓縮到剩餘空間(約156px),
   造成 2021–2025 高柱等高、失真。科學統計圖表比例必須精確。 */
.bar{width:100%;max-width:52px;background:#43403b;height:0;flex-shrink:0;transition:height 1s cubic-bezier(.22,1,.36,1)}
.bar-col.partial .bar{background:var(--brand)}
.bar-yr{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:8px}
.bars.animate .bar-num{opacity:1}
.hist-foot{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:12px;line-height:1.7}

/* 規模雙聯:黑白演講廳照 × 數字 */
.scale-duo{display:grid;grid-template-columns:7fr 5fr;gap:0;margin-top:72px;border:1px solid var(--hairline)}
.scale-duo .ph{overflow:hidden}
.scale-duo .ph img{width:100%;height:100%;min-height:300px;object-fit:cover;object-position:30% center}
.scale-nums{display:flex;flex-direction:column;justify-content:center;padding:40px 44px;border-left:1px solid var(--hairline)}
.scale-nums .row{padding:16px 0;border-bottom:1px solid var(--hairline)}
.scale-nums .row:last-child{border-bottom:none}
.scale-nums b{display:block;font-family:var(--mono);font-weight:500;font-size:1.7rem;color:var(--ink);font-variant-numeric:tabular-nums}
.scale-nums span{display:block;font-size:.9rem;color:var(--ink-2);margin-top:2px}
.stats-cta{margin-top:56px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}

/* ============ 信任:期刊 pull-quote ============ */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:44px 56px}
.qcard{border-top:2px solid var(--ink);padding-top:18px;display:flex;flex-direction:column}
.qcard .qtag{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--brand)}
.qcard .qh{font-family:var(--serif);font-weight:700;font-size:1.2rem;line-height:1.5;margin-top:12px;letter-spacing:normal}
.qcard p{margin-top:12px;line-height:1.9;flex:1}
.qcard .who{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:16px}
.qcard .qmore{margin-top:10px;align-self:flex-start}

/* 手寫問卷原件 */
.artifact{margin-top:72px;background:var(--paper-2);padding:28px;border:1px solid var(--hairline)}
.artifact img{width:100%;border:1px solid var(--hairline);background:#fff}
.artifact .caption{border-top:none;padding-top:14px}

/* 特殊企劃(首頁 05 段內,紅線區隔同 .oh) */
.sp{margin-top:72px;border-top:3px solid var(--brand);padding-top:28px}
.sp>h4{font-family:var(--serif);font-weight:700;font-size:1.2rem;letter-spacing:normal}
.sp-lead{color:var(--ink-2);margin-top:10px;line-height:1.9}
.sp .quotes{margin-top:40px}

/* Office Hour 強調塊 */
.oh{margin-top:72px;border-top:3px solid var(--brand);display:grid;grid-template-columns:7fr 5fr;gap:44px;
  padding-top:28px;align-items:center}
.oh h4{font-family:var(--serif);font-weight:700;font-size:1.2rem;letter-spacing:normal}
.oh p{color:var(--ink-2);margin-top:10px;line-height:1.9}
.oh p a{color:var(--brand);font-weight:600}
.oh .ph img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* ============ 影片學習資源(首頁 04) ============
   左:影片累計計數器 右:膠囊選清單+拉霸選影片 下:16:9 播放器 */
.yt-duo{display:grid;grid-template-columns:4fr 8fr;gap:48px;align-items:start;margin-bottom:20px;max-width:100%}
/* 關鍵:格線欄位預設 min-width:auto,會被 select 的長選項文字撐開造成手機左右捲動 */
.yt-duo>div{min-width:0}
.yt-num{font-family:var(--serif);font-weight:900;font-size:clamp(3rem,6.5vw,4.8rem);line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;margin-top:10px}
.yt-count .counter-rule{margin:16px 0 0}
@media(max-width:900px){.yt-duo{grid-template-columns:1fr;gap:28px}}
.yt-menu{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.yt-chip{font-family:var(--mono);font-size:.8125rem;padding:7px 16px;border-radius:999px;
  background:var(--paper-2);color:var(--ink);cursor:pointer;border:none;line-height:1.6;
  transition:background .15s,color .15s}
.yt-chip:hover{background:var(--paper-3)}
.yt-chip.on{background:var(--brand);color:#fff}
.yt-pick{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.yt-pick label{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);white-space:nowrap}
.yt-pick select{flex:1;min-width:0;max-width:720px;width:100%;font-family:var(--sans);font-size:.95rem;
  color:var(--ink);background:var(--paper-2);border:1px solid var(--hairline);border-radius:8px;
  padding:10px 12px;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.yt-pick select:hover{background:var(--paper-3)}
.yt-player{aspect-ratio:16/9;background:#000;max-width:100%}
.yt-player iframe{width:100%;height:100%;border:1px solid var(--hairline);display:block}
.yt-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:14px}
/* 手機:拉霸獨立成列滿寬,膠囊縮小(注意:此段要放在上方基礎規則之後才蓋得過) */
@media(max-width:760px){
  .yt-pick{display:block}
  .yt-pick label{display:block;margin-bottom:6px}
  .yt-pick select{max-width:100%}
  .yt-menu{gap:8px}
  .yt-chip{padding:6px 13px;font-size:.78rem}
}

/* ============ 關於 ============ */
.about-grid{display:grid;grid-template-columns:6fr 6fr;gap:56px;align-items:start}
.about-grid .ph img{width:100%;aspect-ratio:16/10;object-fit:cover}
.about-lead{font-size:1.125rem;line-height:1.9;color:var(--ink)}
.about-feats{margin-top:36px;border-top:1px solid var(--ink)}
.feat{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:18px 4px;border-bottom:1px solid var(--hairline)}
.feat .n{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--brand);padding-top:5px}
.feat b{display:block;font-family:var(--serif);font-weight:700;font-size:1.0625rem;letter-spacing:normal}
.feat span{display:block;color:var(--ink-2);font-size:.95rem;margin-top:3px;line-height:1.8}
.founder{margin-top:44px;border-top:2px solid var(--ink);padding-top:18px}
.founder h4{font-family:var(--serif);font-weight:700;font-size:1.125rem;letter-spacing:normal}
.founder p{color:var(--ink-2);margin-top:10px;line-height:1.9}

/* ============ 過場照片帶 + 深色 CTA ============ */
.interlude{margin-top:112px}
.interlude img{width:100%;height:240px;object-fit:cover;object-position:center 60%}
.band{background:var(--dark);color:#fff;padding:72px 0}
.band h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:normal}
.band p{color:#b9b2aa;margin-top:12px;line-height:1.9}
.band p a{color:#fff;font-family:var(--mono);font-size:.9rem}
.band .btn-row{margin-top:28px}
.band .btn.ghost{color:#fff;border-color:#fff}
.band .btn.ghost:hover{background:#fff;color:var(--ink)}

/* ============ FOOTER(版權頁) ============ */
footer{background:var(--dark);color:#b9b2aa;padding:0 0 44px;font-size:.9rem}
footer .cols>div>p{margin-top:0}
.foot-contact{margin-top:12px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;
  border-top:1px solid #2e2a26;padding-top:44px}
footer h4{font-family:var(--mono);font-weight:500;font-size:.8125rem;color:#fff;margin-bottom:14px}
footer .foot-brand{font-family:var(--serif);font-size:1rem;letter-spacing:normal;text-transform:none}
footer a{color:#d8d2ca}
footer a:hover{color:#fff}
footer ul{list-style:none}
footer li{margin-bottom:9px}
.foot-brand b{color:var(--brand)}
.foot-bottom{border-top:1px solid #2e2a26;margin-top:40px;padding-top:18px;color:#8f887f;
  font-family:var(--mono);font-size:.8125rem}
/* 創辦人相關資訊(外部個人站):低調一行,放在版權列上方 */
.foot-founder{border-top:1px solid #2e2a26;margin-top:40px;padding-top:18px;color:#9a938b;
  font-family:var(--mono);font-size:.8125rem}
.foot-founder a{color:#d8d2ca;padding-bottom:1px;
  background:linear-gradient(#d8d2ca,#d8d2ca) left bottom / 0 1px no-repeat;
  transition:background-size .2s ease}
.foot-founder a:hover{color:#fff;background-size:100% 1px}
.foot-founder+.foot-bottom{border-top:none;margin-top:10px;padding-top:0}

/* ============ 內容頁(article) ============ */
.page-hero{border-bottom:1px solid var(--hairline);padding:44px 0 36px}
.back{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}
.back:hover{color:var(--brand)}
.page-hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(1.5rem,4.2vw,2.3rem);
  line-height:1.4;letter-spacing:normal;margin-top:14px}
.page-meta{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:14px}
.page-meta .cat{color:var(--brand);margin-right:12px}
.article-wrap{padding:56px 0 88px}
/* 內文不設窄欄:文字直接撐到版心右緣(與圖片同寬),不留右側空白 */
.article{margin:0;font-size:1.0625rem;line-height:1.9;color:var(--ink)}
.article>*+*{margin-top:1.5em}
.article h1,.article h2,.article h3,.article h4{font-family:var(--serif);line-height:1.45;
  letter-spacing:normal;color:var(--ink);margin-top:2em;margin-bottom:.4em;font-weight:700}
.article h1{font-size:1.5rem}
.article h2{font-size:1.35rem;border-bottom:1px solid var(--hairline);padding-bottom:.45em;margin-bottom:.6em}
.article h3{font-size:1.15rem}
.article h2,.article h3{scroll-margin-top:84px}
.article a{color:inherit;font-weight:600;
  background:linear-gradient(var(--brand),var(--brand)) left bottom / 100% 1px no-repeat;padding-bottom:1px}
.article a:hover{color:var(--brand);background-size:100% 2px}
.article img{margin:2em auto;border:1px solid var(--hairline)}
/* 影片嵌入:16:9 響應式,不溢出文章欄 */
.article .video-embed{aspect-ratio:16/9;margin:2em auto;background:#000;max-width:100%}
.article .video-embed iframe{width:100%;height:100%;border:1px solid var(--hairline);display:block}
.article ul,.article ol{padding-left:1.4em}
.article li{margin:.4em 0}
.article li::marker{color:var(--brand)}
.article li>p{margin:0}
.article blockquote{border-top:2px solid var(--ink);background:var(--paper-2);
  padding:18px 22px;color:var(--ink)}
.article blockquote,.article blockquote em,.article blockquote i{font-style:normal}
.article hr{border:none;border-top:1px solid var(--hairline);margin:2.4em 0}
.article table{width:100%;border-collapse:collapse;font-size:.95rem;margin:1.6em 0}
.article th,.article td{border:1px solid var(--hairline);padding:8px 12px;text-align:left}
.article th{background:var(--paper-2);font-family:var(--mono);font-size:.8125rem;font-weight:500}
.article strong{color:var(--ink)}
.cta-row{margin-top:2.2em}
.article .cta-row a.btn{color:#fff;background:var(--brand);font-weight:700;padding-bottom:14px}
.article .cta-row a.btn:hover{background:var(--ink);color:#fff}
.article-foot{margin:48px 0 0;padding-top:24px;border-top:1px solid var(--hairline);
  display:flex;gap:14px;flex-wrap:wrap}

/* 延伸閱讀(期刊列) */
.related{margin:56px 0 0;border-top:1px solid var(--ink);padding-top:16px}
.rel-h{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--ink);margin-bottom:6px}
.rel-grid{display:grid;grid-template-columns:1fr}
.rel-card{display:grid;grid-template-columns:110px 1fr auto;gap:16px;align-items:baseline;
  padding:16px 4px;border-bottom:1px solid var(--hairline);transition:background .15s}
.rel-card:hover{background:var(--paper-2)}
.rel-card .rel-cat{font-family:var(--mono);font-size:.8125rem;color:var(--brand)}
.rel-card b{font-weight:600;font-size:.98rem;line-height:1.6;color:var(--ink)}
.rel-card .rel-date{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}

/* ============ /results/ hub ============ */
.results-hero{padding:72px 0 0}
.latest-wrap{margin-top:72px}
.latest-box{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;align-items:baseline;
  border-top:2px solid var(--ink);padding:20px 22px;background:var(--paper-2);transition:background .15s}
.latest-box:hover{background:var(--paper-3)}
.latest-box .lb-tag{font-family:var(--mono);font-size:.8125rem;color:var(--brand);grid-column:1/-1}
.latest-box .lb-n{font-family:var(--serif);font-weight:900;font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--brand)}
.latest-box .lb-u{font-family:var(--mono);font-size:.9rem;color:var(--ink-2)}
.latest-box .lb-d{grid-column:1/-1;font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}
.results-index{margin-top:56px}
.idx-h{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--ink);
  border-top:1px solid var(--ink);padding-top:12px;margin:36px 0 4px}
.idx-list{list-style:none}
.idx-list li{border-bottom:1px solid var(--hairline)}
.idx-list li a{display:flex;align-items:baseline;gap:18px;padding:14px 4px;transition:background .15s}
.idx-list li a:hover{background:var(--paper-2)}
.idx-when{font-family:var(--mono);font-size:.9rem;width:88px;color:var(--ink-2)}
.idx-n{flex:1;font-weight:600;font-variant-numeric:tabular-nums}
.idx-go{color:var(--brand);font-weight:700}
/* 年月索引:期刊目錄式票卡(與首頁事實列同語言,可點=淺底+紅數字,不可點=白底細框)
   每卡一行「年月 ⋯⋯ 篇數」,中間點線(ic-l)自動填滿多餘寬度——卡片再寬也不顯空;
   用 flex 而非 grid:每行卡片撐滿整行,尾行不足時變寬由點線吸收,永遠沒有空格 */
.idx-grid{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.idx-grid li{flex:1 1 170px;min-width:160px;display:flex}
.idx-cell{display:flex;align-items:baseline;gap:10px;width:100%;padding:13px 16px;
  background:var(--paper-2);transition:background .15s}
a.idx-cell:hover{background:var(--paper-3)}
.idx-cell.static{background:transparent;border:1px solid var(--hairline);padding:12px 15px}
.idx-cell .ic-k{font-family:var(--mono);font-size:.78rem;color:var(--ink-2);white-space:nowrap}
.idx-cell .ic-l{flex:1;border-bottom:1px dotted #c8c2ba;transform:translateY(-3px)}
.idx-cell .ic-n{font-family:var(--mono);font-weight:500;font-size:1.05rem;line-height:1.2;
  color:var(--brand);font-variant-numeric:tabular-nums;white-space:nowrap}
.idx-cell.static .ic-n{color:var(--ink)}
.idx-cell .ic-u{font-size:.8rem;color:var(--ink-2);font-weight:400}
.results-cta{margin-top:56px;display:flex;gap:14px;flex-wrap:wrap}
.q-src{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}
.res-duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:44px}
.res-block{border-top:2px solid var(--ink);padding-top:16px}
.res-block .qtag{font-family:var(--mono);font-size:.8125rem;color:var(--brand)}
.res-block h3{font-family:var(--serif);font-weight:700;font-size:1.2rem;margin-top:10px;letter-spacing:normal}
.res-block ul{list-style:none;margin-top:10px}
.res-block li{padding:10px 0;border-bottom:1px solid var(--hairline);color:var(--ink-2);font-size:.95rem;line-height:1.8}
.res-block p{margin-top:10px;line-height:1.9}
.res-block .go{display:inline-block;margin-top:14px;color:var(--brand);font-weight:700}

/* ============ /workshop_2023/ 課程總目錄(手工頁) ============
   版式:左側 sticky 主題目錄(scrollspy 標紅)+ 右側期刊索引列 */
.wk-duo{display:grid;grid-template-columns:210px 1fr;gap:48px;align-items:start;margin-top:44px}
.wk-toc{border-top:2px solid var(--ink);padding-top:14px;position:sticky;top:calc(var(--nav-h) + 24px)}
.wk-toc .h{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-bottom:6px}
.wk-toc a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:10px 2px;border-bottom:1px solid var(--hairline);color:var(--ink);
  font-size:.95rem;font-weight:600;transition:color .15s}
.wk-toc a em{font-style:normal;font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}
.wk-toc a:hover,.wk-toc a.on{color:var(--brand)}
.wk-sec{margin-top:56px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.wk-sec:first-child{margin-top:0}
.wk-sec-h{border-top:1px solid var(--ink);padding-top:14px;margin-bottom:10px}
/* 主題次標題:比課名(1.1rem)大 6px 以上且加粗,編號維持品牌紅 */
.wk-sec-h h2{font-family:var(--serif);font-weight:700;font-size:1.5rem;line-height:1.4;
  letter-spacing:normal;color:var(--ink)}
.wk-sec-h h2 b{font-family:var(--mono);font-weight:700;color:var(--brand)}
/* 課程票卡:淺紙灰=可點(全站慣例,同首頁事實卡),hover 加深。一排兩張 */
.wk-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.wk-tk{position:relative;display:flex;flex-direction:column;background:var(--paper-2);
  border-radius:12px;padding:22px 24px 18px;transition:background .15s}
.wk-tk:hover{background:var(--paper-3)}
.wk-tk h4{font-family:var(--serif);font-weight:700;font-size:1.15rem;line-height:1.55;letter-spacing:normal}
/* 整張票卡可點:主連結用偽元素鋪滿,講師連結疊在其上 */
.wk-tk h4 a::after{content:"";position:absolute;inset:0}
.wk-tk h4 a:hover{color:var(--brand)}
.wk-tk .en{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);margin-top:4px;letter-spacing:.02em}
.wk-tk .who{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:12px}
.wk-tk .who a{position:relative;z-index:1;color:var(--ink-2);padding-bottom:1px;
  background:linear-gradient(var(--brand),var(--brand)) left bottom / 0 1px no-repeat;
  transition:background-size .2s ease,color .15s}
.wk-tk .who a:hover{color:var(--brand);background-size:100% 1px}
.wk-tk .go{margin-top:auto;padding-top:14px;text-align:right;color:var(--brand);font-weight:700;font-size:.9rem}
.wk-tk .go i{font-style:normal;display:inline-block;transition:transform .15s}
.wk-tk:hover .go i{transform:translateX(4px)}
.wk-cta{margin-top:28px}
.wk-note{color:var(--ink-2);margin-top:12px}
/* 回饋掃描:同 .article img 的呈現(細框、無底色、無內距) */
.wk-fb{border:1px solid var(--hairline);margin-top:24px}
@media(max-width:860px){
  .wk-duo{grid-template-columns:1fr;gap:32px}
  .wk-toc{position:static}
  .wk-sec{margin-top:44px}
  /* 手機:票卡一排一張 */
  .wk-grid{grid-template-columns:1fr;gap:14px}
  .wk-tk{padding:20px 20px 16px}
}

/* ============ 404 ============ */
.err-wrap{text-align:left;padding:88px 0}

/* ============ 手機 ============ */
@media(max-width:900px){
  .course-cards{grid-template-columns:1fr 1fr}
  .report{grid-template-columns:1fr;gap:44px}
  .report .left{position:static}
  .quotes{grid-template-columns:1fr;gap:36px}
  .about-grid{grid-template-columns:1fr;gap:36px}
  .oh{grid-template-columns:1fr;gap:24px}
  .scale-duo{grid-template-columns:1fr}
  .scale-nums{border-left:none;border-top:1px solid var(--hairline)}
}
@media(max-width:760px){
  section{padding:64px 0 0}
  footer{margin-top:64px}
  .band+footer{margin-top:0}
  .hero{padding:44px 0 0}
  .hero-photo{margin-top:40px}
  .hero-photo img{height:48vw;min-height:220px}
  .interlude{margin-top:64px}
  .interlude img{height:160px}
  .course-cards{grid-template-columns:1fr;gap:18px}
  .course-card{padding:22px 20px 18px}
  .cc-banner{width:calc(100% + 40px);margin:-22px -20px 16px}
  /* hero 照片上的 CTA:手機改直排置中,並取消行動版按鈕滿寬規則。
     top=手機照片高(48vw,min 220px)的一半 */
  .hero-cta{flex-direction:column;gap:10px;width:auto;top:max(24vw,110px)}
  .hero-cta .btn{display:inline-block;width:auto;padding:11px 22px;font-size:.95rem;text-align:center}
  .teach-strip{padding:40px 0 0}
  .pillars{grid-template-columns:1fr 1fr;border-top:none}
  .pillar{border-top:1px solid var(--hairline);padding:18px 14px 20px}
  .pillar:first-child{padding-left:14px}
  .pillar:nth-child(odd){border-left:none}
  .facts{grid-template-columns:1fr 1fr}
  .fact{padding:14px}
  .fact:first-child{padding-left:14px}
  .fact:nth-child(odd){border-left:none}
  .fact:nth-child(n+3){border-top:1px solid var(--hairline)}
  /* 13 根長條在窄螢幕塞不下:圖表改在自身容器內橫向滑動,數字與比例不縮水 */
  .hist{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bars{gap:8px;height:170px;min-width:560px;padding-right:4px}
  .bar-num,.bar-yr{font-size:.68rem}
  .idx-when{width:72px}
  .res-duo{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  /* 漢堡抽屜 */
  .nav-in{gap:10px}
  .nav-links{gap:10px}
  .nav-links a:not(.nav-cta){display:none}
  .nav-cta{font-size:.9rem;padding:9px 16px}
  .nav-ham{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:42px;height:42px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0}
  .nav-ham span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
  .nav-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-ham.open span:nth-child(2){opacity:0}
  .nav-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  #nav-drawer{display:flex;flex-direction:column;position:fixed;top:var(--nav-h);left:0;right:0;z-index:49;
    background:var(--paper);border-bottom:1px solid var(--ink);
    padding:6px 24px 14px;opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s}
  #nav-drawer.open{opacity:1;visibility:visible;transform:none}
  #nav-drawer a{padding:14px 2px;border-bottom:1px solid var(--hairline);font-weight:600;color:var(--ink);font-size:1rem}
  #nav-drawer a:last-child{border-bottom:none}
  #nav-drawer a.d-cta{color:var(--brand);font-weight:700}
  .btn{display:block;width:100%;text-align:center}
  .btn-row{width:100%}
}
@media(max-width:560px){
  .rel-card{grid-template-columns:1fr;gap:4px}
}

/* 錨點捲動位移(sticky nav) */
#top{scroll-margin-top:0}
#courses,#stats,#trust,#videos,#about{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* 減少動態偏好 */
@media(prefers-reduced-motion:reduce){
  .bar{transition:none}
  .bar-num{transition:none;opacity:1}
  .course-card:hover{animation:none}
  html{scroll-behavior:auto}
}

/* ===== 二輪修正追加 ===== */
.sec-head h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.35;margin-top:14px;letter-spacing:normal}
.report .sec-head{margin-bottom:0}
.results-hero .hist{max-width:900px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}