/* ============================================================
   GOALDOOR · DESIGN SYSTEM  (Direction C · Light)
   tokens · base · nav · sub-bar · footer · common components
   ============================================================ */

:root{
  --bg:#F4F0E3;
  --surface:#FFFFFF;
  --surface-2:#FAF6E9;
  --border:#E2DBC4;
  --border-hi:#C4BCA1;
  --text:#1A1A1A;
  --muted:#6E6859;
  --dim:#9A9486;
  --accent:#5C8323;
  --accent-2:#6E9A2E;
  --warn:#A87214;
  --hot:#D63B5C;
  --text-soft:#3A3530;
  --text-soft-2:#5C5648;
  --hover-accent:#84B23A;
  --hover-surface:#F0EBDA;
  --nav-bg:rgba(244,240,227,.85);
  --grid-opacity:.4;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:"Space Grotesk","Noto Sans TC",sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(180,200,40,.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(110,154,46,.06) 0%, transparent 40%);
}
a{color:inherit;text-decoration:none}

/* HELPERS */
.mono{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tc{font-family:"Noto Sans TC",sans-serif}
.container{max-width:1360px;margin:0 auto;padding:0 28px;position:relative;z-index:1}

/* GRID LINES */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:88px 88px;
  background-position:0 0;
  mask-image:radial-gradient(ellipse 70% 50% at 50% 30%,#000 0%,transparent 100%);
  opacity:var(--grid-opacity);
}

/* ANIMATIONS */
@keyframes pulse{ 50%{opacity:.4} }
@keyframes blink{ 50%{opacity:0} }

/* ===== NAV ===== */
nav.top{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
nav.top .row{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk";font-weight:700;font-size:18px;letter-spacing:-0.01em;color:var(--text)}
.logo .mark{width:30px;height:30px;flex:none;object-fit:contain;display:block}
.logo .ch{font-family:"Noto Sans TC";font-weight:700;font-size:13px;color:var(--muted);border-left:1px solid var(--border);padding-left:10px;margin-left:4px}
.logo .status{font-family:"JetBrains Mono";font-size:10px;color:var(--accent-2);display:flex;align-items:center;gap:5px;margin-left:8px}
.logo .status::before{content:"";width:6px;height:6px;background:var(--accent-2);border-radius:50%;box-shadow:0 0 8px var(--accent-2);animation:pulse 2s infinite}

nav .links{display:flex;gap:4px;font-family:"Space Grotesk";font-weight:500;font-size:13.5px}
nav .links a{padding:7px 14px;border-radius:6px;display:flex;align-items:center;gap:6px;color:var(--text);transition:all .15s}
nav .links a:hover{background:var(--surface);color:var(--accent)}
nav .links a.active{color:var(--accent)}
nav .links a.active .ic{color:var(--accent)}
nav .links a .ic{font-family:"JetBrains Mono";font-size:10px;color:var(--dim)}
nav .right{display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:2px;font-family:"JetBrains Mono";font-size:10px;border:1px solid var(--border);border-radius:6px;padding:2px;background:var(--surface)}
.lang span,.lang a{padding:4px 8px;border-radius:4px;cursor:pointer;color:var(--muted);text-decoration:none;transition:background .15s,color .15s}
.lang span.on,.lang a.on{background:var(--surface-2);color:var(--text)}
.lang a:not(.on):hover{color:var(--text);background:var(--hover-surface)}
.ncta{background:var(--accent);color:var(--bg);font-family:"Space Grotesk";font-weight:600;font-size:13px;padding:8px 16px;border-radius:6px;display:inline-flex;align-items:center;gap:7px;transition:all .15s;border:1px solid var(--accent)}
.ncta:hover{background:var(--hover-accent);border-color:var(--hover-accent)}
.ncta .k{font-family:"JetBrains Mono";font-size:10px;background:rgba(0,0,0,.18);padding:2px 5px;border-radius:3px;color:var(--bg)}
@media (max-width:980px){ nav .links{display:none} }

/* ===== SUB BAR ===== */
.sub-bar{border-bottom:1px solid var(--border);background:var(--bg)}
.sub-bar .row{display:flex;align-items:center;justify-content:space-between;height:36px;font-family:"JetBrains Mono";font-size:10.5px;color:var(--muted);letter-spacing:.06em}
.sub-bar .left{display:flex;gap:24px;align-items:center}
.sub-bar .left span b{color:var(--text);font-weight:500;margin-left:6px}
.sub-bar .right{display:flex;gap:18px;align-items:center}
.sub-bar .right .blink{color:var(--accent-2)}
@media (max-width:780px){ .sub-bar .left span:nth-child(n+3),.sub-bar .right span:nth-child(n+2){display:none} }

/* ===== BUTTONS ===== */
.btn{font-family:"Space Grotesk";font-weight:600;font-size:14px;padding:12px 20px;border-radius:8px;transition:all .15s;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border-hi);cursor:pointer}
.btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn.primary:hover{background:var(--hover-accent);border-color:var(--hover-accent)}
.btn.ghost{background:var(--surface);color:var(--text)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--accent)}
.btn .k{font-family:"JetBrains Mono";font-size:10.5px;color:var(--muted);background:var(--surface-2);padding:2px 6px;border-radius:3px;margin-left:4px}
.btn.primary .k{color:var(--bg);background:rgba(0,0,0,.18)}

/* ===== SECTION HEADS ===== */
section{padding:110px 0;position:relative}

/* numbered editorial-style head: [label] | [title] | [meta] */
.sect-head{display:grid;grid-template-columns:240px 1fr 200px;gap:40px;margin-bottom:60px;align-items:start}
.sect-head .lab .num{font-family:"JetBrains Mono";font-size:12px;color:var(--accent);letter-spacing:.16em}
.sect-head .lab .tit{font-family:"Space Grotesk";font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-top:6px}
.sect-head h2{font-family:"Space Grotesk";font-weight:500;font-size:clamp(40px,5.5vw,72px);line-height:1.02;letter-spacing:-0.03em;text-wrap:balance}
.sect-head h2 .ch{font-family:"Noto Sans TC";font-weight:700}
.sect-head h2 em{font-style:normal;color:var(--accent)}
.sect-head .meta{font-family:"JetBrains Mono";font-size:11px;color:var(--muted);text-align:right;line-height:1.7;letter-spacing:.06em}
.sect-head .meta b{color:var(--text);font-weight:500}
@media (max-width:880px){ .sect-head{grid-template-columns:1fr;gap:16px} .sect-head .meta{text-align:left} }

/* horizontal editorial head: [mono] | [title] */
.ed-head{display:grid;grid-template-columns:240px 1fr;gap:40px;margin-bottom:48px;align-items:start}
.ed-head .mono{padding-top:10px;color:var(--accent);letter-spacing:.14em}
.ed-head h2{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(40px,5.5vw,72px);line-height:1.02;letter-spacing:-0.03em;text-wrap:balance;color:var(--text)}
.ed-head h2 em{font-style:normal;color:var(--accent)}
.ed-head h2 .ch{font-family:"Noto Sans TC",sans-serif;font-weight:700}
@media (max-width:880px){ .ed-head{grid-template-columns:1fr;gap:14px} }

/* ===== PAGE HERO (used on subpages) ===== */
.page-hero{padding:80px 0 64px;border-bottom:1px solid var(--border);position:relative}
.page-hero .meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:48px;font-family:"JetBrains Mono";font-size:11px;color:var(--muted);letter-spacing:.12em}
.page-hero .meta-grid > div{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:14px}
.page-hero .meta-grid b{color:var(--text);font-weight:500}
.page-hero .crumbs{font-family:"JetBrains Mono";font-size:11px;color:var(--muted);letter-spacing:.12em;margin-bottom:20px}
.page-hero .crumbs a{color:var(--muted);transition:color .15s}
.page-hero .crumbs a:hover{color:var(--accent)}
.page-hero .crumbs .sep{margin:0 10px;color:var(--dim)}
.page-hero h1{font-family:"Space Grotesk";font-weight:500;font-size:clamp(48px,7.5vw,104px);line-height:.96;letter-spacing:-0.03em;text-wrap:balance;margin-bottom:24px}
.page-hero h1 .ch{font-family:"Noto Sans TC";font-weight:700;letter-spacing:-0.02em}
.page-hero h1 em{font-style:normal;color:var(--accent)}
.page-hero .lede{font-family:"Noto Sans TC";font-size:19px;line-height:1.75;color:var(--text-soft);max-width:680px;font-weight:500;text-wrap:pretty;margin-top:24px}
.page-hero .lede b{color:var(--text);font-weight:700;background:linear-gradient(transparent 70%,rgba(180,200,40,.32) 70%);padding:0 2px}
@media (max-width:980px){ .page-hero .meta-grid{grid-template-columns:1fr} }

/* ===== PLACEHOLDER IMAGE BLOCKS ===== */
.ph-img{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:16px}
.ph-img::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,transparent 0,transparent 12px,rgba(110,154,46,.06) 12px,rgba(110,154,46,.06) 24px);
  pointer-events:none;
}
.ph-img .ph-lab{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.14em;color:var(--muted);background:var(--surface);padding:5px 9px;border-radius:4px;border:1px solid var(--border);text-transform:uppercase;position:relative}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--border);background:var(--bg);padding:60px 0 32px;margin-top:80px;position:relative;z-index:1}
.ftr-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:50px;margin-bottom:50px}
.ftr-brand{font-family:"Space Grotesk";font-weight:500;font-size:32px;letter-spacing:-0.02em;margin-bottom:10px;display:flex;align-items:center;gap:10px;color:var(--text)}
.ftr-brand .mark{width:34px;height:34px;flex:none;object-fit:contain;display:block}
.ftr-addr{font-family:"Noto Sans TC";font-size:13px;color:var(--muted);line-height:1.7}
.ftr-top h4{font-family:"JetBrains Mono";font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px;font-weight:500}
.ftr-top ul{list-style:none}
.ftr-top li{padding:5px 0}
.ftr-top li a{font-family:"Noto Sans TC";font-size:13.5px;color:var(--text-soft-2);transition:color .15s}
.ftr-top li a:hover{color:var(--accent)}
.ftr-bot{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;font-family:"JetBrains Mono";font-size:11px;color:var(--dim);letter-spacing:.1em}
.ftr-bot .right span{margin-left:18px}
@media (max-width:980px){
  .ftr-top{grid-template-columns:1fr 1fr;gap:36px}
  .ftr-top > div:first-child{grid-column:1/-1}
}