/* Euclid 官方介紹頁 — 沿用遊戲內的紙面語彙 */
:root {
  --paper:#faf6ee; --card:#fffdf6; --ink:#2c2a26; --ink-soft:#6d6659;
  --accent:#c05b3c; --gold:#c9a227; --line:#e4dcc9;
  --serif:Georgia,'Iowan Old Style','Songti TC','Hiragino Mincho ProN','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang TC','Noto Sans TC',sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.75;
  background-image:
    linear-gradient(rgba(196,186,160,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,186,160,.13) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { width:100%; max-width:960px; margin:0 auto; padding:0 22px; }

/* ---- 導覽 ---- */
.nav { border-bottom:1px solid var(--line); background:rgba(255,253,246,.85);
  backdrop-filter:blur(8px); position:sticky; top:0; z-index:20; }
.nav .wrap { display:flex; align-items:center; height:60px; gap:20px; }
.nav .logo { font-family:var(--serif); font-size:23px; font-weight:600;
  color:var(--accent); letter-spacing:.02em; }
.nav nav { margin-left:auto; display:flex; gap:20px; font-size:14.5px; }
.nav nav a { color:var(--ink-soft); }
.nav nav a:hover { color:var(--ink); text-decoration:none; }

/* ---- Hero ---- */
.hero { padding:70px 0 54px; text-align:center; }
.kicker { font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.hero h1 {
  font-family:var(--serif); font-size:66px; font-weight:600; letter-spacing:.02em;
  color:var(--accent); line-height:1.1; margin:6px 0 0;
}
.hero h1 .zh {
  display:block; font-size:21px; color:var(--ink); letter-spacing:.3em;
  margin-top:8px; font-weight:400;
}
.tagline { font-family:var(--serif); font-style:italic; color:var(--ink-soft);
  font-size:17px; margin-top:12px; }
.lede { max-width:600px; margin:22px auto 0; font-size:16.5px; color:#443f36; }
.lede b { color:var(--accent); font-family:var(--serif); }

.cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.badge {
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  background:var(--ink); color:var(--card); border:1.5px solid var(--ink);
  border-radius:12px; padding:9px 20px; min-width:190px;
}
.badge:hover { text-decoration:none; opacity:.92; }
.badge.ghost { background:transparent; color:var(--ink); }
.badge span { display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.badge small { font-size:10.5px; opacity:.75; letter-spacing:.04em; }
.badge b { font-size:16px; font-weight:600; }
.badge.disabled { opacity:.38; pointer-events:none; }
.soon { margin-top:14px; font-size:13.5px; color:var(--ink-soft); font-style:italic; }

/* ---- 圖形展示 ---- */
.strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--card); padding:34px 0; }
.figures { display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.figures figure { text-align:center; }
.fig { width:190px; height:152px; }
.fig line, .fig path { stroke:var(--ink); stroke-width:1.7; fill:none; stroke-linecap:round; }
.fig .wedge { fill:rgba(192,91,60,.16); stroke:var(--accent); stroke-width:1.3; }
.fig .tick { stroke:var(--accent); stroke-width:1.6; }
.fig .common { stroke:var(--gold); stroke-width:2.2; }
.fig .arrow { stroke:var(--blue,#4a6b8a); stroke-width:1.4; }
.fig .pt { fill:var(--ink); stroke:none; }
.fig .lbl { font-family:var(--serif); font-style:italic; font-size:12px;
  fill:var(--ink); stroke:none; }
.figures figcaption { font-size:13.5px; color:var(--ink-soft); margin-top:4px; }

/* ---- 區塊 ---- */
.sec { padding:56px 0; }
.sec.alt { background:var(--card); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); }
.sec h2 { font-family:var(--serif); font-size:28px; font-weight:600;
  text-align:center; margin-bottom:26px; }
.steps { max-width:600px; margin:0 auto; counter-reset:s; list-style:none; }
.steps li {
  position:relative; padding-left:44px; margin-bottom:16px; font-size:16px; color:#443f36;
}
.steps li::before {
  counter-increment:s; content:counter(s);
  position:absolute; left:0; top:2px; width:29px; height:29px;
  border:1.5px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:15px; background:var(--card);
}
.note { max-width:600px; margin:26px auto 0; text-align:center; font-size:14.5px;
  color:var(--ink-soft); font-style:italic; }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; }
.item h3 { font-family:var(--serif); font-size:18px; margin-bottom:5px; }
.item h3::before { content:"—"; color:var(--gold); margin-right:8px; }
.item p { font-size:14.5px; color:var(--ink-soft); }

.quote { padding:52px 0; }
.quote blockquote {
  font-family:var(--serif); font-size:19px; font-style:italic; text-align:center;
  color:var(--ink-soft); max-width:620px; margin:0 auto; line-height:1.9;
}

/* ---- 頁尾 ---- */
.foot { border-top:1px solid var(--line); padding:28px 0 46px; font-size:14px; }
.foot .wrap { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.foot .dim { color:var(--ink-soft); font-size:13px; }
.foot nav { margin-left:auto; display:flex; gap:18px; flex-wrap:wrap; }
.foot nav a { color:var(--ink-soft); }

@media (max-width:640px) {
  .hero { padding:46px 0 38px; }
  .hero h1 { font-size:46px; }
  .sec h2 { font-size:23px; }
  .foot .wrap { flex-direction:column; }
  .foot nav { margin-left:0; }
}