/* ============================================================================
   SAṄGA · 同行 — design system (extracted verbatim from the approved prototype
   00_design-system.html v2.0). This is the single shared stylesheet; every page
   builds on these tokens/components. Spacing: 2 → 4 → ×8. Buttons/inputs = pill.
   ============================================================================ */

:root{
  /* ===== Color Tokens ===== */
  --cream:#f3e2c5;        /* 主底色 · 抓自 Lakshmi 圖背 */
  --cream-2:#efddc0;      /* 卡面深一階 */
  --cream-3:#e8d4c0;      /* 分隔線/邊框 */
  --ink:#6a4438;          /* 主文 暖棕 */
  --ink-soft:#a8806a;     /* 副文 褪色棕 */
  --ink-faint:#c8a888;    /* 提示文字 */
  --accent:#c4533a;       /* 主強調 朱砂紅 */
  --accent-soft:#d97560;
  --gold:#d4a040;         /* 次強調 琥珀金 */
  --gold-deep:#b8862a;
  --pink:#e89cb0;         /* 輔色 蓮粉 */
  --success:#5a8a60;
  --warning:#c4844a;
  --error:#a83a2a;

  /* ===== Radius ===== */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:20px;
  --radius-pill:999px;

  /* ===== Shadow / Elevation ===== */
  --shadow-sm:0 1px 0 #6a443820;
  --shadow-md:0 6px 16px -8px #6a443840;
  --shadow-lg:0 18px 40px -16px #6a443860;
  --shadow-xl:0 30px 70px -25px #6a443880;

  /* ===== Fonts ===== */
  --font-serif:"Noto Serif TC", serif;
  --font-sans:"Noto Sans TC", sans-serif;
  --font-sanskrit:"Cormorant Garamond","Tiro Devanagari Sanskrit", serif;
  --font-mono:"JetBrains Mono", monospace;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-family:var(--font-sans);
  background:var(--cream);
  color:var(--ink);
  min-height:100vh;
  line-height:1.5;
  overflow-x:hidden;   /* iOS 15 / old Safari fallback (no `clip` support) */
  overflow-x:clip;     /* iOS 16+: later valid value wins; clip won't create a scroll container */
  /* NB: deliberately NO -webkit-font-smoothing / text-rendering — the prototypes
     (00 + 04) set neither, and `antialiased` renders CJK text noticeably lighter
     on macOS. Omitting them matches the prototype's font weight 1:1. */
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ============================ LAYOUT ============================ */
.container{max-width:1180px;margin:0 auto;padding:0 32px}
.section{padding:56px 0}
.center{text-align:center}
.muted{color:var(--ink-soft)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.hidden{display:none !important}

/* ============================ TYPOGRAPHY ============================ */
.t-sanskrit{font-family:var(--font-sanskrit);font-size:72px;font-weight:700;letter-spacing:.02em;line-height:.95;color:var(--ink)}
.t-archetype{font-family:var(--font-serif);font-size:15px;font-weight:500;letter-spacing:.06em;color:var(--accent);display:flex;align-items:center;gap:16px;justify-content:center}
.t-archetype::before,.t-archetype::after{content:"";width:24px;height:1px;background:var(--gold)}
.t-display{font-family:var(--font-serif);font-size:48px;font-weight:800;letter-spacing:0;line-height:1.05}
.t-h1{font-family:var(--font-serif);font-size:32px;font-weight:700;letter-spacing:0;line-height:1.15}
.t-h2{font-family:var(--font-serif);font-size:24px;font-weight:700;letter-spacing:0;line-height:1.25}
.t-h3{font-family:var(--font-serif);font-size:18px;font-weight:600;letter-spacing:0;line-height:1.35}
.t-oracle{font-family:var(--font-serif);font-size:15px;font-weight:500;line-height:1.4;color:var(--ink);letter-spacing:0}
.t-body{font-family:var(--font-sans);font-size:15px;font-weight:400;letter-spacing:0;line-height:1.5}
.t-body-sm{font-family:var(--font-sans);font-size:13px;font-weight:400;letter-spacing:0;line-height:1.5}
.t-caption{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--ink-soft);line-height:1.7}
.t-overline{font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.t-mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--gold-deep)}

/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 24px;border-radius:var(--radius-pill);font-size:13px;cursor:pointer;letter-spacing:.06em;font-weight:600;border:1.5px solid;transition:.2s;font-family:var(--font-sans);text-align:center}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-primary:hover{background:#583a30;border-color:#583a30}
.btn-secondary{background:var(--cream-2);color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:#e7d3b6}
.btn-ghost{background:transparent;color:var(--accent);border-color:transparent;padding:8px 16px}
.btn-ghost:hover{color:var(--accent-soft)}
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-lg{padding:14px 40px;font-size:15px}
.btn-sm{padding:6px 16px;font-size:12px}
.btn-block{width:100%}

/* ============================ CHIP ============================ */
.chip{display:inline-flex;align-items:center;padding:2px 16px;border-radius:24px;font-size:11px;letter-spacing:0;font-weight:600;border:1.2px solid}
.chip-tag{color:var(--ink);border-color:var(--gold);background:#ffffff80}
.chip-on{color:var(--cream);border-color:var(--ink);background:var(--ink)}
.chip-alert{color:var(--accent);border-color:var(--accent);background:#ffffff80}

/* ============================ INPUT / FORM ============================ */
.input{padding:10px 16px;border-radius:var(--radius-pill);border:1.5px solid var(--cream-3);background:#fff;font-size:14px;color:var(--ink);font-family:var(--font-sans);width:100%;outline:none;transition:border-color .2s}
.input:focus{border-color:var(--accent)}
.input::placeholder{color:var(--ink-faint)}
.input-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:8px;display:block}
.field{margin-bottom:16px}
select.input{appearance:none;-webkit-appearance:none}

/* ============================ CARD ============================ */
.card{background:var(--cream-2);border:1.5px solid var(--cream-3);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-md)}
.card--gold{border-color:var(--gold)}
.card .card-ttl{font-family:var(--font-serif);font-size:16px;font-weight:700;color:var(--ink)}
.card .card-dsc{font-size:12px;color:var(--ink-soft);line-height:1.5}
.surface{background:#fff;border:1px solid var(--cream-3);border-radius:var(--radius-lg)}

/* ============================ DIVIDER ============================ */
.div-line{width:100%;height:1px;background:var(--cream-3)}
.div-dash{width:100%;height:0;border-top:1.2px dashed var(--gold)}
.div-orn{width:100%;text-align:center;display:flex;align-items:center;gap:8px;color:var(--accent);font-size:13px}
.div-orn::before,.div-orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ============================ DEITY CARD (composed) ============================ */
.deity-card{max-width:520px;width:100%}
.dc-overline{font-size:11px;letter-spacing:.32em;color:var(--accent);font-weight:700;text-transform:uppercase;margin-bottom:32px}
.dc-zh{font-size:13px;letter-spacing:.16em;color:var(--accent);font-weight:600;margin-bottom:4px}
.dc-sanskrit{font-family:var(--font-sanskrit);font-size:72px;font-weight:700;letter-spacing:.02em;line-height:.95;margin-bottom:8px;color:var(--ink)}
.dc-archetype{font-family:var(--font-serif);font-size:15px;letter-spacing:.06em;color:var(--accent);font-weight:500;display:flex;align-items:center;gap:16px;margin-bottom:16px}
.dc-archetype::before,.dc-archetype::after{content:"";width:24px;height:1px;background:var(--gold)}
.dc-traits{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.dc-traits span{font-size:12px;padding:2px 16px;border-radius:24px;font-weight:600;letter-spacing:0;border:1.5px solid var(--gold);color:var(--ink);background:#ffffff70}
.dc-oracle{margin-bottom:24px;padding:24px;border-radius:var(--radius-lg);background:#ffffff70;border:1px solid #d4a04030}
.dc-oracle-label{font-size:10px;letter-spacing:.24em;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px;color:var(--accent)}
.dc-oracle-label::after{content:"";flex:1;height:1px;background:var(--gold)}
.dc-oracle p{font-family:var(--font-serif);font-size:15px;line-height:1.4;font-weight:500;letter-spacing:0;color:var(--ink)}
.dc-bond{padding:16px;border-left:2px solid var(--gold)}
.dc-bond-label{font-size:10px;letter-spacing:.24em;font-weight:700;margin-bottom:8px;color:var(--accent)}
.dc-bond p{font-size:13px;line-height:1.35;color:var(--ink);opacity:.85;letter-spacing:0}

/* ============================ ICONS ============================ */
.icon{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ============================ SITE HEADER ============================ */
.site-header{position:sticky;top:0;z-index:40;background:rgba(243,226,197,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--cream-3)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.site-logo{display:flex;align-items:center;gap:9px;color:var(--ink)}
.site-logo img{height:34px;width:auto;object-fit:contain}
/* 同行 stacked OVER SAṄGA, both justified to the same width (prototype 04 logo) */
.site-logo .logo-word{display:inline-flex;flex-direction:column;align-items:stretch;line-height:1}
.site-logo .logo-word .zh{font-family:var(--font-serif);font-weight:700;font-size:20px;letter-spacing:.04em;color:var(--ink);text-align:justify;text-align-last:justify}
.site-logo .logo-word small{font-family:var(--font-sanskrit);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--ink-soft);margin-top:3px;text-align:justify;text-align-last:justify}
.site-nav{display:flex;align-items:center;gap:24px;list-style:none}
.site-nav a{font-size:14px;color:var(--ink);font-weight:500;transition:color .2s}
.site-nav a:hover{color:var(--accent)}
.points-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:var(--radius-pill);border:1.5px solid var(--gold);background:#ffffff70;font-size:13px;font-weight:700;color:var(--gold-deep)}

/* ============================ SITE FOOTER ============================ */
.site-footer{margin-top:64px;background:var(--ink);color:var(--cream)}
.site-footer .container{padding-top:48px;padding-bottom:48px}
.footer-logo{font-family:var(--font-serif);font-size:20px;font-weight:700;margin-bottom:16px;color:var(--cream)}
.footer-disclaimer{font-size:12px;line-height:1.7;color:#e8d4c0aa;max-width:760px;margin-bottom:24px}
.footer-disclaimer strong{color:var(--cream)}
.footer-links{display:flex;flex-wrap:wrap;gap:24px;list-style:none;margin-bottom:16px}
.footer-links a{font-size:13px;color:#e8d4c0cc;transition:color .2s}
.footer-links a:hover{color:var(--cream)}
.footer-copy{font-size:11px;color:#e8d4c088;font-family:var(--font-mono);letter-spacing:.04em}

/* ============================ RESPONSIVE ============================ */
@media(max-width:920px){
  .container{padding:0 20px}
  .t-display{font-size:36px}
  .t-h1{font-size:26px}
  .t-sanskrit,.dc-sanskrit{font-size:56px}
}
@media(max-width:560px){
  .site-nav{gap:16px}
  .t-display{font-size:30px}
  .t-sanskrit,.dc-sanskrit{font-size:44px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}