/* Re-theme for the existing guide pages: Cinema hero + chapter index on top,
   the page's own reading layout below with the new type and dark tones. Loaded after each page's own CSS. */
:root{
  --ths-ink:#0E0D0B;--ths-ink2:#17140F;--ths-line:#26221D;--ths-fg:#F3EFE7;--ths-sub:#BDB5A8;--ths-mute:#857D71;--ths-gold:#C9A84C;
  --fin:#2E86AB;--fin-l:#6BB8D8;--house:#A23B72;--house-l:#D77AA8;--edu:#1B998B;--edu-l:#5CC9BB;
  --ths-sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;--ths-latin:"Manrope","Noto Sans TC",system-ui,sans-serif;
  /* the pages' own tokens, mapped to the Cinema palette */
  --dark:#17140F;--darkest:#0E0D0B;--darker:#0E0D0B;--border-dark:#26221D;
  --serif:"Noto Sans TC","PingFang TC",system-ui,sans-serif;--sans:"Noto Sans TC","PingFang TC",system-ui,sans-serif;
}
html{scroll-padding-top:76px}
body.ths-remade{margin:0;font-family:var(--ths-sans)}
/* type: one sans family, heavier headings, like the overview pages */
.ths-body h1,.ths-body h2{font-family:var(--ths-sans)!important;font-weight:900!important;letter-spacing:0!important;text-wrap:balance}
.ths-body h3,.ths-body h4{font-family:var(--ths-sans)!important;font-weight:700!important}
.ths-body blockquote,.ths-body .serif,.ths-body [class*="quote"],.ths-body em{font-family:var(--ths-sans)!important}
.ths-body h2{font-size:clamp(28px,4.2vw,46px)!important;line-height:1.25!important}
/* the pages' own floating buttons: keep back-to-top, drop WhatsApp (removed in markup too) */
.wa-float{display:none!important}

/* ---------- nav / footer ---------- */
.ths-nav,.ths-foot,.ths-hero,.ths-toc{box-sizing:border-box;font-family:var(--ths-sans)}
.ths-nav *,.ths-foot *,.ths-hero *,.ths-toc *{box-sizing:border-box}
.ths-nav{position:sticky;top:0;z-index:1000;height:60px;background:rgba(14,13,11,.9);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--ths-line);line-height:1.5}
.ths-nav .in{max-width:1160px;margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ths-logo{display:flex;align-items:center;gap:10px;text-decoration:none!important;font:800 15px var(--ths-latin);color:var(--ths-fg)!important;white-space:nowrap}
.ths-logo i{width:22px;height:22px;border:2px solid var(--ths-gold);border-radius:50%;position:relative;flex:none}
.ths-logo i::after{content:"";position:absolute;left:50%;top:2px;bottom:2px;width:2px;background:var(--ths-gold);transform:translateX(-50%) rotate(40deg)}
.ths-links{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:15px}
.ths-links li{margin:0;padding:0}
.ths-links a{text-decoration:none!important;color:var(--ths-sub)!important}
.ths-links a:hover,.ths-links a[aria-current="page"]{color:var(--ths-fg)!important}
.ths-lang{font:700 12px var(--ths-latin);border:1px solid #4a443c;border-radius:999px;padding:4px 10px;color:var(--ths-sub)}
.ths-menu{display:none;background:none;border:0;color:var(--ths-fg);font-size:22px;cursor:pointer;padding:6px}
.ths-foot{background:var(--ths-ink);border-top:1px solid var(--ths-line);color:var(--ths-mute);font-size:14px;line-height:1.7}
.ths-foot .in{max-width:1160px;margin:0 auto;padding:40px 24px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.ths-foot b{display:block;color:var(--ths-fg);font-weight:700;margin-bottom:10px}
.ths-foot a{display:block;text-decoration:none!important;color:var(--ths-mute)!important;padding:3px 0}
.ths-foot a:hover{color:var(--ths-fg)!important}
.ths-foot .base{grid-column:1/-1;border-top:1px solid var(--ths-line);padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- hero ---------- */
.ths-hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ths-ink);color:var(--ths-fg)}
.ths-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ths-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,13,11,.88) 0%,rgba(14,13,11,.4) 58%,rgba(14,13,11,0) 100%),linear-gradient(0deg,rgba(14,13,11,.92) 0%,rgba(14,13,11,0) 45%)}
.ths-hero .ths-in{position:relative;z-index:1;max-width:1160px;margin:0 auto;width:100%;padding:0 24px 60px;display:flex;flex-direction:column;gap:18px}
.ths-eb{font:800 13px var(--ths-sans);letter-spacing:.16em;color:var(--cl)}
.ths-hero h1{margin:0;font:900 clamp(38px,6.4vw,82px)/1.12 var(--ths-sans);max-width:14em;text-wrap:balance;color:var(--ths-fg)}
.ths-hero h1 em{font-style:normal;color:var(--cl);display:inline-block;font-size:.62em;line-height:1.35;font-weight:700;margin-top:10px}
.ths-sub{margin:0;font-size:clamp(16px,1.9vw,19px);line-height:1.8;color:#d9d2c6;max-width:36em}
.ths-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.ths-btn{display:inline-flex;align-items:center;border-radius:999px;padding:12px 22px;font-weight:700;font-size:15px;text-decoration:none!important;background:var(--ths-gold);color:#1a1714!important}
.ths-backlink{font-size:14px;color:var(--ths-gold)!important;text-decoration:none!important}

/* ---------- chapter index ---------- */
.ths-toc{position:sticky;top:60px;z-index:900;background:rgba(23,20,15,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--ths-line);display:flex;align-items:center;gap:14px;padding:0 24px;height:52px}
.ths-toc > span{font:800 12px var(--ths-sans);letter-spacing:.14em;color:var(--ths-mute);flex:none}
.ths-toc div{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.ths-toc div::-webkit-scrollbar{display:none}
.ths-toc a{flex:none;font-size:14px;color:var(--ths-sub)!important;text-decoration:none!important;border:1px solid #3a342c;border-radius:999px;padding:5px 12px;white-space:nowrap}
.ths-toc a b{font:800 11px var(--ths-latin);color:var(--ths-gold);margin-right:6px}
.ths-toc a:hover{color:var(--ths-fg)!important;border-color:var(--ths-gold)}

/* chapter pages (Absorbent Mind): their own bar sits under the site menu */
.ths-chapter .chapter-nav{top:60px!important}
.ths-chapter #progress-bar{top:60px!important}

@media (max-width:820px){
  .ths-links{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;gap:0;background:var(--ths-ink);border-bottom:1px solid var(--ths-line);padding:8px 24px 16px}
  .ths-links.open{display:flex}
  .ths-links a{display:block;padding:12px 0;border-bottom:1px solid var(--ths-line);font-size:17px}
  .ths-menu{display:block}
  .ths-foot .in{grid-template-columns:1fr 1fr}
  .ths-hero::after{background:linear-gradient(0deg,rgba(14,13,11,.95) 0%,rgba(14,13,11,.6) 60%,rgba(14,13,11,.25) 100%)}
  .ths-toc{padding:0 16px}
  .ths-toc > span{display:none}
}
@media (prefers-reduced-motion:reduce){.ths-hero video{display:none}}

/* chapter pages: the closed table-of-contents drawer sits off-screen; clip it so phones never scroll sideways */
html:has(body.ths-chapter),body.ths-chapter{overflow-x:clip}

/* phones: the loop art sits right of centre in a wide frame; show it in the top part, above the title */
@media (max-width:640px){
  .ths-hero video{height:42%;object-position:90% 50%}
}
.ths-lang{text-decoration:none!important}