:root{
  color-scheme:light;
  --paper:#F3EEE3;
  --ink:#211D16; --ink-soft:#4B4536; --ink-faint:#6A6355;
  --line:rgba(33,29,22,.16); --line-soft:rgba(33,29,22,.08);
  --accent:#B03F28;
  --ssa:#B03F28; --kairos:#332C5C; --onemuse:#7A5A1E;
  --serif:"Cormorant Garamond","Noto Serif TC",serif;
  --sans:"Outfit","Noto Sans TC",sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --text:var(--ink); --text-dim:var(--ink-soft);
  --wrap:min(1160px, 100% - 48px);
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); margin:0; line-height:1.8; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3{font-family:var(--serif); font-weight:600; text-wrap:balance; margin:0; color:var(--ink); word-break:keep-all}
p{word-break:keep-all; overflow-wrap:anywhere}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:18px}
a:focus-visible,label:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
img{max-width:100%; display:block}

/* ── nav ── */
nav.top{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft)}
.nav-row{width:var(--wrap); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.wordmark{display:flex; align-items:baseline; gap:8px; font-family:var(--serif); font-size:22px; font-weight:600; letter-spacing:.03em; color:var(--ink); text-decoration:none}
.wordmark small{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent); font-weight:500}
.nav-links{display:flex; gap:30px; font-size:13.5px}
.nav-links a{position:relative; color:var(--ink-soft); text-decoration:none; padding-bottom:3px; transition:color .18s ease}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent); transition:right .22s cubic-bezier(.4,0,.2,1)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.hamburger{display:none; background:none; border:0; color:var(--ink); font-size:22px; cursor:pointer}
#navToggle{display:none}
#navToggle:focus-visible + .hamburger{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
@media(max-width:820px){
  #navToggle{display:block; position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
  .nav-links{position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; gap:0; max-height:0; overflow:hidden; visibility:hidden; transition:max-height .25s ease, visibility .25s}
  .nav-links a{padding:15px 24px; border-top:1px solid var(--line-soft)}
  #navToggle:checked ~ .nav-links{max-height:440px; visibility:visible}
  .hamburger{display:block}
}

/* ── full-bleed image band：圖滿版，文字左右交錯 ── */
.band{position:relative; display:flex; align-items:center; height:clamp(600px, 50vw, 980px); overflow:hidden}
.band-art{position:absolute; inset:0; z-index:0; margin:0}
.band-art img{width:100%; height:100%; object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%)}
.band.copy-left .band-art img{object-position:right center}
.band.copy-right .band-art img{object-position:left center}
.band-copy{position:relative; z-index:1; width:var(--wrap); margin:0 auto; display:flex}
.band.copy-right .band-copy{justify-content:flex-end}
.band-copy .inner{max-width:27em}
.band h1{font-size:clamp(34px,4.4vw,62px); line-height:1.2; letter-spacing:-.005em}
.band h1 .line{display:block; white-space:nowrap}
.band h1 em{font-style:normal; color:var(--accent)}
.band h2{font-size:clamp(30px,3.4vw,46px); line-height:1.2}
.band .slogan{font-family:var(--serif); font-size:clamp(20px,1.9vw,26px); line-height:1.5; color:var(--ink); margin:14px 0 0}
.band .lead{font-size:17px; color:var(--ink-soft); margin:22px 0 0}
.band .state{display:block; margin-top:26px; font-size:13.5px; color:var(--ink-faint)}
.cta{display:inline-block; margin-top:14px; font-size:15px; color:var(--c, var(--accent)); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px}
.cta:hover{text-decoration-thickness:2px}
.band.ssa{--c:var(--ssa)} .band.kairos{--c:var(--kairos)} .band.onemuse{--c:var(--onemuse)}
.band .eyebrow{color:var(--c, var(--accent))}

@media(max-width:900px){
  .band{display:block; height:auto}
  .band-art{position:relative}
  .band-art img{height:auto}
  .band-copy{display:block; padding:8px 0 72px}
  .band-copy .inner{max-width:34em}
}

/* ── 過場（純文字，同紙色） ── */
.interlude{width:var(--wrap); margin:0 auto; padding:88px 0}
.interlude .inner{max-width:34em}
.interlude.center .inner{margin:0 auto; text-align:center}
.interlude h2{font-size:clamp(26px,3vw,38px); line-height:1.3}
.interlude p{color:var(--ink-soft); font-size:17px; margin:16px 0 0}
.interlude .quote{font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.4vw,42px); line-height:1.45; margin:0; color:var(--ink)}
.quote span{color:var(--accent)}
.interlude .credit{margin-top:18px; font-size:13.5px; letter-spacing:.08em; color:var(--ink-faint)}
.waterline{width:var(--wrap); margin:0 auto; display:flex; align-items:center; gap:18px; padding:28px 0; color:var(--ink-faint); font-size:13.5px; letter-spacing:.2em}
.waterline::before,.waterline::after{content:""; flex:1; height:1px; background:var(--line)}

/* ── 子頁用 ── */
.hero-copy{width:var(--wrap); margin:0 auto; padding:96px 0 56px}
.hero-copy h1{font-size:clamp(32px,4.2vw,54px); line-height:1.2; max-width:18em}
.hero-copy p{max-width:36em; margin:22px 0 0; color:var(--ink-soft); font-size:17px}
.section{width:var(--wrap); margin:0 auto; padding:72px 0}
.section.narrow{max-width:720px}
.section.tight{padding:48px 0}
.section-head{max-width:36em; margin:0 0 40px}
.section-head h2{font-size:clamp(25px,3vw,36px)}
.section-head p{color:var(--ink-soft); margin-top:12px; font-size:15px}
.prose{font-size:17px; color:var(--ink)}
.prose p{margin:0 0 22px}
.prose p:last-child{margin-bottom:0}
.stack{display:flex; flex-direction:column}
.rowcard{display:flex; justify-content:space-between; align-items:baseline; gap:20px; border-bottom:1px solid var(--line); padding:26px 4px; text-decoration:none; color:var(--ink)}
.stack .rowcard:first-child{border-top:1px solid var(--line)}
.rowcard .kind{font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px}
.rowcard h3{font-size:18px; margin:0}
.rowcard .meta{color:var(--ink-faint); font-size:13.5px; margin-top:4px}
.rowcard .go{color:var(--ink-faint); font-size:13.5px; flex-shrink:0}

footer{border-top:1px solid var(--line); width:var(--wrap); margin:40px auto 0; padding:28px 0; text-align:center; color:var(--ink-faint); font-size:13.5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}