/* 首頁專用（design/handoff/一砂學院 v2.dc.html 的排版數值）。只引用 club.css 的 token。 */
main.ys-home{padding:0;max-width:none}
.ys-home>.flash{margin:12px var(--edge)}
.ys-sec{padding:0 var(--edge)}
.ys-in{max-width:var(--container);margin:0 auto}
.ys-rule{height:2px;background:var(--color-divider)}
.ys-block{padding:72px 0}
.ys-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px clamp(24px,5vw,96px)}
.ys-two-top{padding-top:40px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 文字層級（DESIGN-SPEC §3） */
.ys-eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700);margin:0 0 14px;font-weight:600}
.ys-eyebrow-ink{color:color-mix(in srgb,var(--color-text) 60%,transparent);letter-spacing:.08em;margin:0}
.ys-h1{font-weight:900;font-size:clamp(40px,6vw,88px);line-height:1.08;letter-spacing:-.01em;margin:0;color:var(--color-text)}
.ys-h2{font-weight:800;font-size:clamp(26px,2.6vw,36px);line-height:1.2;margin:0;letter-spacing:-.01em}
.ys-h2-gap{margin-bottom:36px}
.ys-h3{font-weight:800;font-size:clamp(24px,2.4vw,34px);line-height:1.2;margin:16px 0 0;letter-spacing:-.01em}
.ys-h3 a{color:inherit;text-decoration:none}
.ys-h3 a:hover{color:var(--color-accent)}
.ys-lead{font-size:17px;line-height:28px;max-width:56ch;margin:36px 0 0;color:color-mix(in srgb,var(--color-text) 80%,transparent)}
.ys-copy{font-size:15.5px;line-height:28px;margin:20px 0 0;color:color-mix(in srgb,var(--color-text) 78%,transparent);max-width:44ch}
.ys-meta{font-size:13px;color:color-mix(in srgb,var(--color-text) 70%,transparent);margin:10px 0 0}
.ys-why{font-size:16px;line-height:28px;margin:24px 0 0;max-width:52ch;color:color-mix(in srgb,var(--color-text) 85%,transparent)}
.ys-link{font-weight:800;font-size:14px;color:var(--color-accent);text-decoration:none}
.ys-link:hover{color:var(--color-accent-600)}
.ys-more{margin:24px 0 0;font-size:14px;font-weight:800}
.ys-more a{color:var(--color-accent);text-decoration:none}
.ys-empty{padding:14px 0;color:color-mix(in srgb,var(--color-text) 60%,transparent);font-size:14px}

/* 按鈕三種：實心／線框／純文字（§3） */
.ys-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:28px}
.ys-btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;line-height:1.2;padding:12px 18px;min-height:44px;text-decoration:none;color:var(--color-text);border:1px solid transparent;white-space:nowrap}
.ys-btn-solid{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}
.ys-btn-solid:hover{background:var(--color-accent-600);border-color:var(--color-accent-600);color:var(--color-bg)}
.ys-btn-line{border-color:var(--color-divider)}
.ys-btn-line:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent);color:var(--color-text)}
.ys-btn-text{color:var(--color-accent);padding-inline:6px}
.ys-btn-text:hover{background:color-mix(in srgb,var(--color-accent) 10%,transparent);color:var(--color-accent)}
.ys-btn-md{padding:10px 16px;min-height:40px}
.ys-btn-paper{background:var(--color-bg);border-color:var(--color-bg);color:var(--color-accent)}
.ys-btn-paper:hover{background:var(--color-accent-100);border-color:var(--color-accent-100);color:var(--color-accent)}
.ys-btn-paperline{border-color:var(--color-bg);color:var(--color-bg)}
.ys-btn-paperline:hover{background:color-mix(in srgb,var(--color-bg) 14%,transparent);color:var(--color-bg)}
.ys-actions-lg{margin-top:40px}
.ys-actions-lg .ys-btn{font-size:15px;padding:12px 20px}

/* Hero（§4.2、§5） */
.ys-hero-grid{padding:clamp(56px,8vw,112px) 0 clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:48px clamp(24px,5vw,96px);align-items:end}
.ys-grain-track{position:relative;height:12px;margin-bottom:28px;border-top:2px solid var(--color-divider)}
.ys-grain{position:absolute;top:-7px;left:0;width:12px;height:12px;background:var(--color-accent);animation:ysGrain 7s cubic-bezier(.45,0,.55,1) infinite alternate}
.ys-wipe{display:block;animation:ysWipe .9s cubic-bezier(.7,0,.2,1) both}
.ys-wipe:nth-child(1){animation-delay:.15s}
.ys-wipe:nth-child(2){animation-delay:.5s}
.ys-hero-poem{border-left:2px solid var(--color-divider);padding-left:clamp(16px,2.5vw,32px);min-width:0}
.ys-hero-poem .ys-eyebrow{margin-bottom:20px}
.ys-poem{font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1.6;letter-spacing:.08em}
.ys-poem-line{margin:0;white-space:nowrap}
.ys-ch{display:inline-block;animation:ysRise .7s cubic-bezier(.2,.7,.2,1) both}
.ys-poem-en{font-size:13px;line-height:20px;color:color-mix(in srgb,var(--color-text) 70%,transparent);margin:20px 0 0;max-width:36ch}
.ys-poem-by{font-size:13px;line-height:20px;color:color-mix(in srgb,var(--color-text) 70%,transparent);margin:12px 0 0}

/* Stats（§4.3） */
.ys-stats-grid{padding:56px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:32px 24px}
.ys-num{font-weight:800;font-size:clamp(34px,3.4vw,52px);line-height:1;color:var(--color-accent);margin:0;font-variant-numeric:tabular-nums}
.ys-stat-label{font-size:13px;letter-spacing:.06em;color:color-mix(in srgb,var(--color-text) 70%,transparent);margin:14px 0 0}

/* 01 · 先問問老師寫過什麼（§4.4） */
.ys-askbar{display:flex;gap:0;margin:0;border:1px solid var(--color-divider);background:var(--color-surface)}
.ys-askinput{flex:1;min-width:0;min-height:52px;padding:8px 14px;font:inherit;font-size:15px;color:var(--color-text);background:transparent;border:0;border-radius:0;caret-color:var(--color-accent);-webkit-appearance:none;appearance:none}
.ys-askinput::-webkit-search-decoration,.ys-askinput::-webkit-search-cancel-button{-webkit-appearance:none}
.ys-askinput:focus-visible{outline-offset:-2px}
.ys-askbtn{display:inline-flex;align-items:center;font-weight:800;font-size:14px;padding:0 18px;background:var(--color-accent);color:var(--color-bg);text-decoration:none;white-space:nowrap;text-align:left}
.ys-askbtn:hover{background:var(--color-accent-600);color:var(--color-bg)}
.ys-askbtn.is-busy{opacity:.7;cursor:progress}
.ys-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ys-chip{font-family:inherit;font-size:12.5px;line-height:1.4;padding:8px 12px;border:1px solid var(--color-divider);border-radius:0;background:transparent;color:var(--color-text);cursor:pointer;text-align:left}
.ys-chip:hover{border-color:var(--color-accent);color:var(--color-accent)}
.ys-matches{margin-top:28px;border-top:2px solid var(--color-divider)}
.ys-matchlabel{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 60%,transparent);margin:14px 0 0;font-weight:600}
.ys-list{list-style:none;margin:0;padding:0}
.ys-list>li{border-bottom:1px solid var(--color-divider)}
.ys-artrow{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;color:var(--color-text);text-decoration:none;min-width:0}
.ys-artrow:hover{color:var(--color-accent)}
.ys-date{font-size:12px;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--color-text) 60%,transparent);white-space:nowrap}
.ys-arttitle{font-weight:700;font-size:15.5px;line-height:1.5;overflow-wrap:anywhere}
.ys-series{font-size:12px;color:var(--color-accent-700);white-space:nowrap}
.ys-aicard{margin-top:16px;padding:16px 18px;background:var(--color-surface);border-left:2px solid var(--color-accent)}
.ys-ailabel{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-700);margin:0 0 8px;font-weight:600}
.ys-aibody{font-size:15px;line-height:26px}
.ys-aibody p{margin:0}
.ys-aibody p+p{margin-top:8px}
.ys-aibody .ys-answer{white-space:pre-wrap;word-break:break-word}
.ys-aibody .ys-aimeta{font-size:12px;color:color-mix(in srgb,var(--color-text) 60%,transparent);margin-top:10px}
.ys-aisources{margin:12px 0 0;padding:12px 0 0 1.4em;border-top:1px solid var(--color-divider);font-size:13px;line-height:22px}
.ys-aisources li{margin:2px 0}
.ys-aisources .ys-date{margin-left:6px}

/* 02 · 學習路徑（§4.5） */
.ys-path{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 clamp(24px,5vw,96px);border-top:2px solid var(--color-divider)}
.ys-stages{list-style:none;margin:0;padding:0}
.ys-stage{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) 16px;gap:12px;align-items:center;text-align:left;font-family:inherit;font-size:15.5px;font-weight:500;line-height:1.4;padding:16px 16px 16px 0;min-height:44px;border:0;border-bottom:1px solid var(--color-divider);border-radius:0;background:transparent;color:var(--color-text);cursor:pointer}
.ys-stage:hover{color:var(--color-accent)}
.ys-stage.is-active{font-weight:800;color:var(--color-accent)}
.ys-stagenum{font-size:12px;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--color-text) 60%,transparent)}
.ys-dot{display:inline-block;width:10px;height:10px;background:var(--color-accent);opacity:0}
.ys-stage.is-active .ys-dot,.ys-dot-on{opacity:1}
.ys-stagepanes{padding:32px 0 0;min-height:320px}
.ys-stagepane[hidden]{display:none}

/* 03 · 七本著作（§4.6） */
.ys-headrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:36px}
.ys-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:2px;background:var(--color-divider);border:2px solid var(--color-divider)}
.ys-book{display:flex;flex-direction:column;gap:12px;padding:20px;min-height:220px;background:var(--color-bg);color:var(--color-text);text-decoration:none;transition:background .2s,color .2s;min-width:0}
a.ys-book:hover{background:var(--color-accent);color:var(--color-bg)}
.ys-bookmeta{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.ys-booktitle{font-weight:800;font-size:19px;line-height:1.3;letter-spacing:-.005em;margin-top:auto;overflow-wrap:anywhere}
.ys-booksub{font-size:13px;line-height:20px;opacity:.85}
.ys-book-note{justify-content:flex-end;gap:8px;background:var(--color-surface);color:color-mix(in srgb,var(--color-text) 70%,transparent)}

/* 最新討論／最新文章（§4.7） */
.ys-tabs{display:flex;gap:0;align-items:center;border-bottom:2px solid var(--color-divider)}
.ys-tab{font-family:inherit;font-weight:800;font-size:15px;line-height:1.2;padding:12px 20px;min-height:44px;border:0;border-radius:0;background:transparent;color:var(--color-text);cursor:pointer}
.ys-tab:first-child{padding-left:0}
.ys-tab:hover{color:var(--color-accent)}
.ys-tab.is-active{color:var(--color-accent);box-shadow:inset 0 -2px 0 var(--color-accent)}
.ys-tabs-more{margin-left:auto}
.ys-nojs-title{display:none;font-weight:800;font-size:clamp(22px,2.2vw,30px);line-height:1.2;margin:40px 0 0;letter-spacing:-.01em}
html:not(.js) .ys-tab{display:none}
html:not(.js) .ys-nojs-title{display:block}
html:not(.js) .ys-tabpanel+.ys-tabpanel{margin-top:32px;border-top:2px solid var(--color-divider)}
.js .ys-tabpanel:not(.is-active){display:none}
.ys-boards{border-top:1px solid var(--color-divider)}
.ys-threads{border-top:1px solid var(--color-divider)}
.ys-boardrow,.ys-threadrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;color:var(--color-text);text-decoration:none}
.ys-boardrow:hover,.ys-threadrow:hover{color:var(--color-accent)}
.ys-rowtitle{font-weight:800;font-size:15.5px;overflow-wrap:anywhere}
.ys-rowsub{display:block;font-size:13px;line-height:20px;color:color-mix(in srgb,var(--color-text) 65%,transparent);margin-top:2px}
.ys-count{font-size:12px;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--color-text) 60%,transparent);white-space:nowrap}
.ys-boardrow-more .ys-count{color:var(--color-accent);font-weight:800}
.ys-articles{padding-top:24px}
.ys-artitem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline}
.ys-artrow-lg{grid-template-columns:96px minmax(0,1fr) auto;padding:16px 0}
.ys-artrow-lg .ys-date{font-size:12.5px}
.ys-artrow-lg .ys-arttitle{font-size:16px}
.ys-ext{font-size:12px;color:color-mix(in srgb,var(--color-text) 60%,transparent);text-decoration:none;white-space:nowrap}
.ys-ext:hover{color:var(--color-accent)}

/* 04 · 企業家工具箱（§4.8） */
.ys-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 clamp(24px,4vw,64px);border-top:2px solid var(--color-divider)}
.ys-tool{display:block;padding:24px 0 28px;border-bottom:1px solid var(--color-divider);color:var(--color-text);text-decoration:none}
.ys-tool:hover{color:var(--color-accent)}
.ys-toolnum{font-size:12px;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--color-text) 60%,transparent)}
.ys-tooltitle{display:block;font-weight:800;font-size:20px;line-height:1.25;margin-top:12px}
.ys-tooldesc{display:block;font-size:14px;line-height:22px;margin-top:10px;color:color-mix(in srgb,var(--color-text) 72%,transparent)}

/* Close CTA（§4.9） */
.ys-close{background:var(--color-accent);color:var(--color-bg)}
.ys-close .ys-in{padding:84px 0}
.ys-closetitle{font-weight:900;font-size:clamp(34px,4.4vw,64px);line-height:1.1;margin:0;letter-spacing:-.01em;color:inherit}
.ys-closecopy{font-size:clamp(17px,1.6vw,22px);line-height:1.5;margin:24px 0 0;max-width:40ch;font-weight:600}
.ys-close :focus-visible{outline-color:var(--color-bg)}

/* 響應式（§7）：< 560px 收窄間距、日期欄下方放系列 */
@media (max-width:560px){
  .ys-block{padding:56px 0}
  .ys-stats-grid{padding:40px 0;gap:28px 16px}
  .ys-artrow,.ys-artrow-lg{grid-template-columns:72px minmax(0,1fr);row-gap:4px}
  .ys-artrow .ys-series{grid-column:2}
  .ys-askbtn{padding:0 14px}
  .ys-books{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .ys-book{padding:16px;min-height:180px}
  .ys-booktitle{font-size:17px}
  .ys-close .ys-in{padding:64px 0}
  .ys-tab{padding:12px 14px}
}

/* ---- 捲到才動（theme.js reveal）----
   有 JS 時先停住 hero 的動畫，元素進入視窗（.is-inview）才播放；沒有 JS 時這些規則不生效，動畫照舊在載入時播。
   手機上 hero 詩句與統計數字都在第一屏之下，舊版在載入時就跑完了，捲到時像沒有動畫。 */
.js [data-reveal]:not(.is-inview) .ys-wipe,
.js [data-reveal]:not(.is-inview) .ys-ch{animation-play-state:paused}
.js [data-reveal]:not(.is-inview) .ys-grain{animation-play-state:paused}
/* 各區塊的眉標、標題、第一段說明依序浮起（只在 JS 判定進入視窗後） */
.js [data-reveal] .ys-block>.ys-eyebrow,.js [data-reveal] .ys-block>.ys-h2,.js [data-reveal] .ys-two>div>.ys-eyebrow,
.js [data-reveal] .ys-two>div>.ys-h2,.js [data-reveal] .ys-two>div>.ys-copy,.js [data-reveal] .ys-headrow>div>*,
.js [data-reveal] .ys-closetitle,.js [data-reveal] .ys-closecopy,.js [data-reveal] .ys-close .ys-actions{opacity:0;transform:translateY(.5em)}
.js [data-reveal].is-inview .ys-block>.ys-eyebrow,.js [data-reveal].is-inview .ys-block>.ys-h2,.js [data-reveal].is-inview .ys-two>div>.ys-eyebrow,
.js [data-reveal].is-inview .ys-two>div>.ys-h2,.js [data-reveal].is-inview .ys-two>div>.ys-copy,.js [data-reveal].is-inview .ys-headrow>div>*,
.js [data-reveal].is-inview .ys-closetitle,.js [data-reveal].is-inview .ys-closecopy,.js [data-reveal].is-inview .ys-close .ys-actions{animation:ysRise .6s cubic-bezier(.2,.7,.2,1) both}
.js [data-reveal].is-inview .ys-h2,.js [data-reveal].is-inview .ys-two>div>.ys-h2,.js [data-reveal].is-inview .ys-closecopy{animation-delay:.08s}
.js [data-reveal].is-inview .ys-two>div>.ys-copy,.js [data-reveal].is-inview .ys-close .ys-actions{animation-delay:.16s}
/* 統計格：逐格浮起＋計數；數字下方一條會掃過的細線，計數中發亮 */
.js .ys-stats[data-reveal] .ys-stats-grid>div{opacity:0;transform:translateY(.5em)}
.js .ys-stats[data-reveal].is-inview .ys-stats-grid>div{animation:ysRise .6s cubic-bezier(.2,.7,.2,1) both}
.js .ys-stats[data-reveal].is-inview .ys-stats-grid>div:nth-child(2){animation-delay:.07s}
.js .ys-stats[data-reveal].is-inview .ys-stats-grid>div:nth-child(3){animation-delay:.14s}
.js .ys-stats[data-reveal].is-inview .ys-stats-grid>div:nth-child(4){animation-delay:.21s}
.js .ys-stats[data-reveal].is-inview .ys-stats-grid>div:nth-child(5){animation-delay:.28s}
.ys-stats-grid>div{position:relative;padding-top:14px;border-top:2px solid var(--color-divider)}
.ys-stats-grid>div::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--color-accent);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.ys-stats-grid>div:hover::after,.js .ys-stats.is-inview .ys-stats-grid>div.is-hot::after{width:100%}
.ys-num[data-count]{cursor:default;font-feature-settings:"tnum" 1,"lnum" 1;transition:color .2s}
.js .ys-num[data-count]{cursor:pointer}
.ys-num.is-counting{color:var(--color-accent-700)}
.ys-num.is-counting::after{content:"";display:inline-block;width:.32em;height:.9em;margin-left:.08em;vertical-align:-.08em;background:var(--color-accent);animation:ysBlink .5s steps(2,end) infinite}
@keyframes ysBlink{to{opacity:0}}
/* reduced-motion：全部靜止，直接顯示最終狀態（club.css 已把 animation 關掉；這裡把 opacity/transform 還原） */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal] *,.js .ys-stats[data-reveal] .ys-stats-grid>div{opacity:1!important;transform:none!important}
}

/* 窄螢幕：H1 讓「都是一個完整的世界。」十個字放得進一行（375px 內距後約 343px），避免在「完／整」之間斷字 */
@media (max-width:420px){
  .ys-h1{font-size:clamp(30px,9.2vw,40px)}
  .ys-poem{font-size:clamp(20px,5.6vw,22px);letter-spacing:.06em}
}

/* H1 字級跟著自己那一欄的寬度走（容器查詢單位）：「都是一個完整的世界。」十個字永遠放在同一行，不在「完／整」之間斷字。
   不支援 cqw 的舊瀏覽器沿用上面的 vw 規則。 */
.ys-hero-main{container-type:inline-size}
@supports (font-size:1cqw){.ys-h1{font-size:clamp(30px,9.4cqw,88px)}}
/* 手機版導覽列可以左右滑；右緣淡出提示還有項目 */
@media (max-width:560px){
  .site-head .nav{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
}