/* ================================================================
   852.news — bilingual news reader (EN / 繁體中文)
   Warm Hong Kong paper-and-ink palette, light + dark, reading-first.
   ================================================================ */

:root{
  --bg: #f1e7d6;
  --bg-2: #e9dcc3;
  --panel: #fbf4e6;
  --ink: #241f18;
  --ink-soft: #6a5c47;
  --line: #d8c6a4;
  --cinnabar: #b5231f;   /* cyber accent */
  --gold: #c4912f;
  --jade: #1e684a;       /* ai accent */
  --shadow: rgba(70,46,18,.16);
  --radius: 14px;
  --font-cjk: "LXGW WenKai TC","Kaiti SC","STKaiti","KaiTi","DFKai-SB","BiauKai","標楷體","楷體",serif;
  --font-ui: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","PingFang HK","Microsoft JhengHei",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #17130d; --bg-2: #211a11; --panel: #221b12;
    --ink: #f1e6cf; --ink-soft: #b59f7c; --line: #3c2f1d;
    --cinnabar: #e0563f; --gold: #e2b659; --jade: #5fae84;
    --shadow: rgba(0,0,0,.45);
  }
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; }
body{
  font-family:var(--font-ui); color:var(--ink); line-height:1.5;
  background:
    radial-gradient(1100px 520px at 85% -12%, rgba(196,145,47,.16), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  background-attachment:fixed; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:10;
  padding:14px 24px 0; backdrop-filter:saturate(1.1) blur(6px);
  -webkit-backdrop-filter:saturate(1.1) blur(6px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, transparent), transparent);
  border-bottom:1px solid var(--line);
}
.head-row{ max-width:1080px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{
  font-family:var(--font-cjk); font-weight:700; font-size:clamp(40px,9vw,68px);
  line-height:.98; letter-spacing:.01em; color:var(--ink);
}
.brand .dot{ color:var(--cinnabar); }
/* right cluster — 朱紅印章 + language toggle (seal motif borrowed from 852.games) */
.head-right{ display:flex; align-items:center; gap:12px; }
.seal{
  flex:none; width:clamp(58px,13vw,84px); height:auto;
  transform:rotate(-5deg); filter:drop-shadow(0 3px 7px var(--shadow)); opacity:.97;
}
.seal-ground{ fill:var(--cinnabar); }
.seal-frame{ fill:none; stroke:var(--panel); stroke-width:3.5; }
.seal-grid{ fill:none; stroke:var(--panel); stroke-width:2; }
.seal-char{
  font-family:var(--font-cjk); font-weight:700; font-size:33px;
  text-anchor:middle; dominant-baseline:middle; fill:var(--panel);
}
.tagline{
  max-width:1080px; margin:18px auto 0; font-family:var(--font-cjk);
  color:var(--ink-soft); font-size:clamp(15px,3.6vw,19px); letter-spacing:.16em;
}
/* cinnabar→gold rule — header motif borrowed from 852.games */
.rule{
  display:block; max-width:1080px; margin:14px auto 0;
  height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--cinnabar), var(--gold)) left center / 74px 100% no-repeat;
}

/* language toggle (segmented) */
.lang-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--panel); }
.lang{
  font-family:var(--font-ui); font-size:13px; letter-spacing:.06em; font-weight:600;
  padding:6px 13px; border:0; background:transparent; color:var(--ink-soft); cursor:pointer;
}
.lang.on{ background:var(--cinnabar); color:#fff; }

/* tabs */
.tabs{ max-width:1080px; margin:10px auto 0; display:flex; gap:6px; }
.tab{
  font-family:var(--font-cjk); font-size:clamp(15px,4vw,18px); font-weight:700; letter-spacing:.06em;
  padding:9px 4px; margin-right:14px; border:0; background:transparent; color:var(--ink-soft);
  cursor:pointer; position:relative;
}
.tab.on{ color:var(--ink); }
.tab.on::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--cinnabar), var(--gold));
}

/* ---------- Feed ---------- */
.wrap{ max-width:1080px; margin:0 auto; padding:48px 24px 64px; }
.status{ color:var(--ink-soft); padding:28px 4px; text-align:center; font-size:15px; }

.feed{ display:flex; flex-direction:column; gap:14px; }
.card{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--accent, var(--ink-soft));
  border-radius:var(--radius); padding:16px 18px; box-shadow:0 8px 22px var(--shadow);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card.ai{ --accent:var(--jade); }
.card.cyber{ --accent:var(--cinnabar); }
.card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px var(--shadow); }
.card-title{ margin:0 0 7px; font-size:clamp(17px,4.4vw,20px); line-height:1.32; font-weight:700; }
.card-title a{ color:var(--ink); text-decoration:none; }
.card-title a:hover{ text-decoration:underline; text-decoration-color:var(--accent); }
.card-sum{ margin:0 0 12px; color:var(--ink); opacity:.92; font-size:15.5px; line-height:1.62; }
.card-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); }
.card-meta .src{ font-weight:600; color:var(--accent); }
.card-meta .sep{ opacity:.5; }
.card-meta .orig{ margin-left:auto; color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line); }
.card-meta .orig:hover{ color:var(--ink); border-color:var(--accent); }

/* ---------- Footer ---------- */
.site-foot{
  max-width:1080px; margin:44px auto 0; padding:18px 24px 30px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  color:var(--ink-soft); font-size:13.5px; letter-spacing:.04em;
}
.site-foot .updated{ color:var(--ink-soft); }