/* ============================================================
   深時間測繪 · 共用設計系統
   Palette: 冷調亞麻紙 + 深青墨 + 銅綠 + 古銅 + 鏽紅
   ============================================================ */
:root{
  --ink:#181611;
  --ink-soft:#413a2e;
  --muted:#6d6353;
  --paper:#e7e3d6;
  --paper-2:#ddd8c8;
  --surface:#f1ede1;
  --surface-2:#eae5d6;
  --deep:#132321;
  --deep-2:#1b302c;
  --deep-3:#25423c;
  --verd:#2f8f7a;
  --verd-bright:#43b39b;
  --verd-dim:#5c8a80;
  --bronze:#a9791f;
  --bronze-soft:#c39a4a;
  --rust:#a8432f;
  --slate:#4d84ad;
  --violet:#8a6bb0;
  --line:#c8bfa8;
  --line-soft:#d6cdb8;
  --line-strong:#b0a488;
  --shadow:0 20px 50px rgba(30,22,8,.14);
  --shadow-soft:0 8px 24px rgba(30,22,8,.09);
  --radius:14px;
  --radius-lg:22px;
  --maxw:1180px;
  --font-display:"Fraunces","Noto Serif TC","Songti TC",Georgia,serif;
  --font-body:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;
  --font-mono:"IBM Plex Mono","Space Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.65;
  font-size:16px;
  letter-spacing:.005em;
}
body::before{
  /* faint survey grid, masked */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(24,22,17,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(24,22,17,.028) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 0%,black,transparent 78%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;position:relative;z-index:1}

/* ---- year / data mono tick ---- */
.tick{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---- stratum rule: the recurring layered-hairline divider ---- */
.strata{height:6px;border:0;margin:0;background:
  linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,
  linear-gradient(var(--line-soft),var(--line-soft)) 0 3px/100% 1px no-repeat,
  linear-gradient(var(--line-soft),var(--line-soft)) 0 5px/100% 1px no-repeat;
  opacity:.9}

/* ============================ NAV ============================ */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.01em}
.brand .glyph{
  width:30px;height:30px;flex:none;border-radius:7px;
  background:radial-gradient(circle at 35% 30%,var(--verd-bright),var(--deep-3) 75%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  position:relative;
}
.brand .glyph::after{content:"";position:absolute;inset:0;border-radius:7px;
  background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(255,255,255,.10) 5px 6px)}
.nav-links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav-links a{
  font-size:14px;color:var(--ink-soft);padding:7px 12px;border-radius:9px;
  transition:background .15s,color .15s;white-space:nowrap;
}
.nav-links a:hover{background:var(--surface-2);color:var(--ink)}
.nav-links a.active{background:var(--deep);color:#eef3ec}
.nav-links a .en{font-family:var(--font-mono);font-size:11px;opacity:.55;margin-left:5px}

/* ============================ BUTTONS ============================ */
.btn{
  font-family:var(--font-body);font-size:14px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  padding:9px 15px;border-radius:10px;transition:.15s;display:inline-flex;align-items:center;gap:7px;
}
.btn:hover{border-color:var(--verd);background:var(--surface-2)}
.btn.on{background:var(--deep);color:#eef3ec;border-color:var(--deep)}
.btn.mini{padding:6px 11px;font-size:13px}

.chip{
  font-family:var(--font-body);font-size:13px;cursor:pointer;user-select:none;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  padding:6px 12px;border-radius:999px;transition:.15s;
}
.chip:hover{border-color:var(--line-strong);color:var(--ink-soft)}
.chip.on{background:var(--deep);color:#eef3ec;border-color:var(--deep)}

/* ============================ HERO (shared shell) ============================ */
.hero{position:relative;overflow:hidden;background:var(--deep);color:#e9efe8}
.hero .wrap{padding-top:54px;padding-bottom:44px}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(70% 90% at 82% 8%,rgba(67,179,155,.20),transparent 60%),
    radial-gradient(60% 80% at 8% 92%,rgba(169,121,31,.16),transparent 60%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(180deg,transparent,black 30%,black 70%,transparent);
}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--verd-bright);position:relative;z-index:1;
}
.hero h1{
  font-family:var(--font-display);font-weight:600;line-height:1.02;
  font-size:clamp(38px,7.4vw,80px);letter-spacing:-.035em;margin:14px 0 16px;
  position:relative;z-index:1;color:#f2f6ef;
}
.hero .lead{font-size:clamp(16px,2vw,20px);max-width:760px;color:#c3cfc6;position:relative;z-index:1;margin:0}

/* ============================ CARD ============================ */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);overflow:hidden;
}

/* ============================ FOOTER ============================ */
.foot{margin-top:56px;background:var(--deep);color:#b9c6bd}
.foot .wrap{padding:34px 20px}
.foot h4{font-family:var(--font-display);color:#e9efe8;margin:0 0 8px;font-weight:600;font-size:16px}
.foot p{margin:0 0 6px;font-size:13.5px;line-height:1.6}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
.foot a{color:var(--verd-bright)}
.foot .mono{font-family:var(--font-mono);font-size:12px;color:#8ea79a}
.foot .strata-d{height:6px;margin-bottom:24px;background:
  linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) 0 0/100% 1px no-repeat,
  linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) 0 3px/100% 1px no-repeat,
  linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) 0 5px/100% 1px no-repeat}

/* ============================ misc ============================ */
.section-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 6px}
.section-head h2{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em;margin:0}
.section-head .idx{font-family:var(--font-mono);font-size:13px;color:var(--verd);letter-spacing:.05em}
.section-sub{color:var(--muted);max-width:720px;margin:2px 0 0}

.note{font-size:13px;color:var(--muted);line-height:1.6}
.mono-sm{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em}

::selection{background:rgba(47,143,122,.24)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--verd);outline-offset:2px;border-radius:4px;
}

@media (max-width:640px){
  body{font-size:15px}
  .nav-in{gap:10px;padding:9px 14px}
  .brand{font-size:16px}
  .nav-links{gap:2px}
  .nav-links a{padding:6px 9px;font-size:13px}
  .nav-links a .en{display:none}
  .wrap{padding:0 14px}
  .foot .cols{grid-template-columns:1fr;gap:18px}
}