:root{
  --paper:#f3f0e8;
  --ink:#171713;
  --muted:#746f63;
  --line:rgba(23,23,19,.13);
  --accent:#7f1f1f;
  --deep:#25231f;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Serif TC","PingFang TC","Microsoft JhengHei",serif;min-height:100vh}
a{color:inherit;text-decoration:none}
.shell{width:min(calc(100% - 48px),var(--max));margin:0 auto}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);font-family:Inter,"Helvetica Neue",Arial,sans-serif}
.brand-mini{display:flex;align-items:baseline;gap:14px;letter-spacing:.04em}
.brand-mini strong{font-family:"Noto Serif TC","PingFang TC",serif;font-size:17px;font-weight:700}
.brand-mini span{font-size:11px;letter-spacing:.22em;color:var(--muted)}
.topbar nav{display:flex;gap:22px;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.hero{position:relative;min-height:720px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);align-items:center;gap:70px;padding:78px 0 72px;overflow:hidden}
.hero-copy{position:relative;z-index:2;padding:24px 0}
.kicker{font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
h1{margin:0;font-size:clamp(64px,10vw,148px);font-weight:700;letter-spacing:-.065em;line-height:.86}
.roman{font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-size:clamp(20px,2.4vw,34px);font-weight:500;letter-spacing:.24em;margin:26px 0 62px;color:var(--deep)}
.motto{margin:0;font-size:clamp(31px,4.4vw,62px);font-weight:600;line-height:1.35;letter-spacing:.06em}
.motto-secondary{margin:18px 0 0;font-size:clamp(17px,2vw,25px);line-height:1.8;letter-spacing:.16em;color:var(--muted);font-weight:500}
.hero-art{position:relative;height:520px;display:flex;align-items:center;justify-content:center}
.mark{position:relative;width:min(34vw,410px);aspect-ratio:1/1}
.mark::before,.mark::after{content:"";position:absolute;inset:0;border:1px solid var(--line);transform:rotate(45deg)}
.mark::after{inset:14%;border-color:rgba(127,31,31,.24)}
.rivers{position:absolute;inset:0;display:grid;place-items:center}
.rivers svg{width:86%;height:86%;overflow:visible}
.caption{position:absolute;right:0;bottom:22px;writing-mode:vertical-rl;letter-spacing:.28em;font-size:12px;color:var(--muted)}
.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1.4fr;gap:70px;padding:64px 0}
.statement .label{font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.statement p{margin:0;max-width:760px;font-size:19px;line-height:2;letter-spacing:.04em;color:#403c34}
.statement p strong{color:var(--ink);font-weight:600}
.footer{padding:42px 0 48px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;font-family:Inter,"Helvetica Neue",Arial,sans-serif;color:var(--muted)}
.footer .left strong{display:block;font-family:"Noto Serif TC","PingFang TC",serif;color:var(--ink);font-size:16px;margin-bottom:8px}
.footer .left span,.footer .right{font-size:12px;letter-spacing:.06em;line-height:1.8}
.footer .right{text-align:right}
.footer a:hover{color:var(--ink)}
.subpage{padding:74px 0 90px;min-height:70vh}
.subpage h1{font-size:clamp(48px,7vw,88px);letter-spacing:-.04em;line-height:1;margin-bottom:34px}
.subpage .lede{font-size:18px;line-height:1.9;max-width:760px;color:#48443b}
.subpage section{max-width:820px;margin-top:46px;padding-top:34px;border-top:1px solid var(--line)}
.subpage h2{font-size:22px;margin:0 0 16px}
.subpage p{font-size:16px;line-height:1.9;color:#4f4a41}
@media(max-width:900px){
  .shell{width:min(calc(100% - 34px),var(--max))}
  .hero{grid-template-columns:1fr;gap:20px;min-height:auto;padding:58px 0 64px}
  .hero-art{height:300px;justify-content:flex-start}
  .mark{width:270px}
  .caption{right:auto;left:300px;bottom:20px}
  .roman{margin-bottom:44px}
  .statement{grid-template-columns:1fr;gap:24px;padding:48px 0}
}
@media(max-width:620px){
  .topbar{padding:22px 0}
  .brand-mini span{display:none}
  .topbar nav{gap:14px;font-size:11px}
  h1{font-size:62px;line-height:.92}
  .roman{font-size:16px;letter-spacing:.18em;margin:18px 0 36px}
  .motto{font-size:31px}
  .motto-secondary{font-size:16px;letter-spacing:.08em}
  .hero-art{height:240px}
  .mark{width:210px}
  .caption{left:auto;right:4px;bottom:12px}
  .statement p{font-size:17px}
  .footer{align-items:flex-start;flex-direction:column}
  .footer .right{text-align:left}
}