/* 興泰集團. Implements DESIGN.md: ENERGY 1 / RHYTHM 2 / MOTION 1.
   Two core colours plus one accent on paper. Red and green stay unused so they
   keep meaning price direction if quote data is ever added, which matters more
   in a Chinese-language market context where red means up. */

:root {
  --paper:    #FBFAF7;
  --surface:  #FFFFFF;
  --ink:      #16161A;
  --ink-soft: #5A5C63;
  --rule:     #DCD8D0;
  --accent:   #1F4E79;
  --accent-hi:#163C5E;

  --measure: 42em;
  /* Traditional Chinese first: PingFang/Microsoft JhengHei are the system faces
     on macOS/iOS and Windows in Taiwan. Noto Serif TC carries the headings. */
  --serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
  --sans: system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei",
          "Noto Sans TC", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark mode is a real toggle, both directions verified (R-34). Paper is the
   identity, so light stays the default rather than defaulting dark for looks. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#14161A; --surface:#1A1D22; --ink:#E9E7E2; --ink-soft:#A2A6AE;
    --rule:#2C3037; --accent:#7FA9D4; --accent-hi:#A6C4E4;
  }
}
:root[data-theme="dark"] {
  --paper:#14161A; --surface:#1A1D22; --ink:#E9E7E2; --ink-soft:#A2A6AE;
  --rule:#2C3037; --accent:#7FA9D4; --accent-hi:#A6C4E4;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* CJK needs more leading than latin text at the same size to stay readable. */
  font: 16px/1.8 var(--sans);
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* main plus sponsor rail. Single column until there is room for both. */
.shell { display: block; }
@media (min-width: 1000px) {
  .shell { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 40px; align-items: start; }
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--accent);
  color: #fff; padding: 10px 14px; z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

/* ---- masthead: the rule line and date stamp, the identity motif ---- */
.masthead { border-bottom: 2px solid var(--ink); }
.masthead-bar { display: flex; align-items: center; gap: 12px; padding: 14px 0 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); min-height: 44px; }
.brand:hover { text-decoration: none; }
.brand svg { color: var(--accent); flex: none; }
.brand b { font: 700 26px/1 var(--serif); letter-spacing: .04em; }
.stamp {
  margin-left: auto; font: 500 12px/1.5 var(--mono);
  font-variant-numeric: tabular-nums; color: var(--ink-soft); text-align: right;
}
.stamp b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 3px; font-family: var(--mono); }

.masthead-art { display: block; width: 100%; height: 132px; object-fit: cover;
  object-position: 50% 12%; border-bottom: 1px solid var(--rule); }

nav.sections { border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
nav.sections ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; }
nav.sections a {
  display: flex; align-items: center; padding: 0 13px; min-height: 44px;
  color: var(--ink-soft); font: 600 14px/1 var(--sans); white-space: nowrap;
}
nav.sections a:hover { color: var(--ink); text-decoration: none; }

/* ---- section heads: hairline rule plus slug ---- */
.sec { margin: 32px 0 0; }
.sec-head {
  display: flex; align-items: baseline; gap: 10px;
  border-top: 1px solid var(--ink); padding-top: 8px; margin-bottom: 2px;
}
.sec-head h2 { font: 700 19px/1.4 var(--serif); margin: 0; letter-spacing: .02em; }
.sec-head .sym {
  font: 600 11px/1 var(--mono); color: var(--paper); background: var(--accent);
  padding: 4px 6px; border-radius: 2px; letter-spacing: .04em;
}
.sec-head .count { margin-left: auto; font: 500 12px/1 var(--mono);
  font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* ---- headline rows. One treatment: both feeds carry identical fields. ---- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed > li { border-bottom: 1px solid var(--rule); }
.feed > li:last-child { border-bottom: 0; }

.item { display: flex; gap: 13px; padding: 12px 2px; align-items: flex-start; }
.item .body { min-width: 0; }
.item h3 { margin: 0 0 4px; font: 500 16.5px/1.6 var(--serif); }
.item h3 a { color: var(--ink); }
.item h3 a:hover { color: var(--accent); }
.item p { margin: 3px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }
.meta {
  font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink-soft); display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; margin-top: 5px;
}
.meta .dot { opacity: .5; }

/* ---- the seven tracked names sit two up: the structural break from the
       full-width market feed above (DESIGN.md RHYTHM note) ---- */
.tickers { display: grid; gap: 0 34px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .tickers { grid-template-columns: 1fr 1fr; } }

/* ---- notices: a failed feed is reported, never hidden ---- */
.notice {
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  background: var(--surface); padding: 12px 14px; margin: 16px 0;
  font-size: 14px; color: var(--ink-soft);
}
.notice b { color: var(--ink); }

/* ---- sponsor rail ---- */
.rail { margin: 32px 0 0; }
@media (min-width: 1000px) { .rail { position: sticky; top: 16px; } }
.rail-head { border-top: 1px solid var(--ink); padding-top: 8px; margin-bottom: 10px; }
.rail-head h2 { font: 700 15px/1.4 var(--serif); margin: 0; letter-spacing: .04em; }
.sponsor {
  display: block; border: 1px solid var(--rule); background: var(--surface);
  padding: 13px 14px; margin-bottom: 9px; border-radius: 2px; min-height: 60px;
}
a.sponsor:hover { border-color: var(--accent); text-decoration: none; }
.sponsor-name { display: block; font: 600 14px/1.5 var(--sans); color: var(--ink); }
.sponsor-note { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
/* Empty slots must never read as a real partner: dashed, muted, not a link. */
.sponsor-empty { border-style: dashed; background: transparent; }
.sponsor-empty .sponsor-name { color: var(--ink-soft); font-weight: 500; }
.rail-note { font-size: 12px; line-height: 1.7; color: var(--ink-soft); margin: 10px 0 0; }

/* ---- evergreen prose ---- */
.evergreen { max-width: var(--measure); margin: 44px 0 0; padding-top: 10px; border-top: 2px solid var(--ink); }
.evergreen h2 { font: 700 20px/1.5 var(--serif); margin: 30px 0 10px; }
.evergreen h2:first-child { margin-top: 14px; }
.evergreen p { margin: 0 0 14px; }
.evergreen ul { padding-left: 1.4em; margin: 0 0 15px; }
.evergreen li { margin-bottom: 10px; }
.evergreen b { font-weight: 700; }

/* ---- original articles ---- */
.post { max-width: var(--measure); }
.post .dek { font: 500 17px/1.8 var(--serif); color: var(--ink-soft); margin: 10px 0 10px; }
.post .meta { margin-bottom: 22px; }
.post h2 { font: 700 18px/1.6 var(--serif); margin: 28px 0 9px; }
.post .sec-head h2 { font-size: 25px; line-height: 1.45; }
.post p { margin: 0 0 14px; }

/* ---- archive ---- */
.archive { list-style: none; padding: 0; margin: 0; column-gap: 30px; }
@media (min-width: 640px) { .archive { columns: 2; } }
.archive li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.archive a { display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 2px; min-height: 44px; align-items: center; color: var(--ink); }
.archive .d { font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.archive .n { font: 500 12px/1 var(--mono); color: var(--ink-soft); }

/* ---- footer ---- */
footer { margin-top: 48px; border-top: 2px solid var(--ink); padding: 18px 0 40px;
  font-size: 13px; line-height: 1.85; color: var(--ink-soft); }
footer .cols { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; }
footer a { color: var(--ink-soft); }
footer a:hover { color: var(--accent); }
.disclaim { max-width: var(--measure); }

#theme {
  font: 600 12px/1 var(--sans); color: var(--ink-soft); background: transparent;
  border: 1px solid var(--rule); border-radius: 2px; padding: 9px 14px;
  min-height: 44px; cursor: pointer;
}
#theme:hover { color: var(--ink); border-color: var(--ink-soft); }

.analysis { max-width: var(--measure); }
.analysis p { margin: 0 0 14px; }
.analysis .method { font-size: 13px; color: var(--ink-soft);
  border-left: 3px solid var(--rule); padding-left: 12px; }

@media (max-width: 520px) {
  .brand b { font-size: 22px; }
  .masthead-art { height: 92px; }
  .stamp { margin-left: 0; text-align: left; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- PARTNERS: footer link block. Dofollow by request, so these are ordinary
       links with no rel directive beyond noopener for the new tab. ---- */
.partners { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); }
.partners h5 {
  font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 14px;
}
.partners ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px 32px;
  grid-template-columns: 1fr; }
@media (min-width: 620px) { .partners ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .partners ul { grid-template-columns: repeat(3, 1fr); } }
.partners h6 { font: 700 15px/1.5 var(--serif); margin: 0 0 4px; }
.partners h6 a { color: var(--ink); }
.partners h6 a:hover { color: var(--accent); }
.partners li p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--ink-soft); }