:root {
  --color-bg: #F4F6F8;
  --color-surface: #FFFFFF;
  --color-surface-muted: #E9EEF2;
  --color-text: #18212A;
  --color-text-muted: #5F6C77;
  --color-line: #CFD7DF;
  --color-accent: #2D64C8;
  --color-signal: #B45132;
  --color-signal-text: #84371F;
  --color-focus: #084FBD;
  --content-width: 76rem;
  --reading-width: 46rem;

  /* Consent is injected at runtime and still consumes these variable names. */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --border: var(--color-line);
  --link: var(--color-accent);
  --code-bg: var(--color-surface-muted);
}

:root[data-theme="dark"] {
  --color-bg: #121820;
  --color-surface: #1B252E;
  --color-surface-muted: #24313C;
  --color-text: #EDF2F5;
  --color-text-muted: #B5C1CA;
  --color-line: #40505F;
  --color-accent: #79A9FF;
  --color-signal: #EF8B6C;
  --color-signal-text: var(--color-signal);
  --color-focus: #B9D3FF;
}

* { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: "Inter", Arial, "Noto Sans TC", "Noto Sans JP", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

html[lang="zh-TW"] body { line-height: 1.85; }
html[lang="ja"] body { line-height: 1.8; }

button,
input { font: inherit; letter-spacing: 0; }

a {
  color: var(--color-accent);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-text);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 200;
  top: 0.75rem;
  left: 0.75rem;
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  color: var(--color-surface);
  background: var(--color-accent);
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.site-header,
main,
.site-footer {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
}

.site-header {
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-line);
}

.site-brand,
.site-controls,
.content-navigation,
.site-utilities,
.language-navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.site-brand { flex: 0 0 auto; gap: 0.55rem; }

.site-title {
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 750;
  text-decoration: none;
}

.site-title:hover { color: var(--color-accent); }

.site-parent,
.site-footer .meta,
.site-footer .quiet {
  color: var(--color-text-muted);
}

.site-parent { font-size: 0.875rem; }

.site-controls {
  flex: 1 1 auto;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-width: 0;
}

.site-utilities {
  justify-content: flex-end;
  gap: 0.35rem 0.75rem;
  min-width: 0;
}

.content-navigation,
.language-navigation {
  gap: 0.15rem;
}

.content-navigation { padding-right: 0.75rem; border-right: 1px solid var(--color-line); }

.site-header nav a,
.theme-trigger,
.privacy-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid transparent;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"],
.theme-trigger:hover,
.privacy-settings:hover {
  border-color: var(--color-line);
  color: var(--color-accent);
  background: var(--color-surface-muted);
}

.site-header nav a[aria-current="page"] {
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.theme-control { position: relative; }

.theme-trigger { gap: 0.35rem; white-space: nowrap; }
.theme-trigger-icon { width: 1.25rem; font-size: 1.125rem; line-height: 1; text-align: center; }

.theme-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.35rem);
  right: 0;
  width: min(18rem, calc(100vw - 2rem));
  padding: 0.5rem;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  box-shadow: 0 0.5rem 1.25rem rgb(24 33 42 / 16%);
}

.theme-menu[hidden] { display: none; }
.theme-options { padding: 0; margin: 0; border: 0; }

.theme-options label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.5rem;
  color: var(--color-text);
  cursor: pointer;
}

.theme-options label:hover,
.theme-options label:has(input:checked) { background: var(--color-surface-muted); }

main {
  min-height: 0;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

main:focus:not(:focus-visible),
.site-header:focus:not(:focus-visible) { outline: none; }

.site-footer {
  margin-top: 2rem;
  padding-top: 1.75rem;
  padding-bottom: max(1.75rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-line);
  font-size: 0.9375rem;
}

.site-footer p { margin: 0.45rem 0; }
.site-footer .quiet { max-width: 48rem; }

.privacy-settings {
  min-width: 0;
  padding-inline: 0.25rem;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

h1,
h2,
h3 {
  margin: 2.25rem 0 0.75rem;
  color: var(--color-text);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

h1 { margin-top: 0; font-size: 2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }

p,
li { margin: 0 0 1rem; }

ul,
ol { padding-left: 1.4rem; }

em,
i { font-style: normal; }

/* Latest */
.latest-shell {
  display: grid;
  grid-template-columns: minmax(20rem, 28rem) minmax(20rem, 42rem);
  grid-template-rows: max-content max-content max-content 1fr;
  align-items: start;
  gap: 0 2.5rem;
  max-width: 72.5rem;
}

.latest-shell > :not(.latest-list) { grid-column: 1; }
.latest-shell > .latest-list { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }

.section-kicker,
.post-topic-label {
  margin-bottom: 0.45rem;
  color: var(--color-signal-text);
  font-size: 0.8125rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: uppercase;
}

.latest-intro {
  max-width: 42rem;
  margin-bottom: 1.25rem;
  color: var(--color-text-muted);
  font-size: 1.0625rem;
}

.primary-action,
.pagination-link,
.all-stories-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  width: fit-content;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: var(--color-surface);
  font-weight: 700;
  text-decoration: none;
}

.primary-action:hover,
.pagination-link:hover,
.all-stories-link:hover {
  color: var(--color-surface);
  background: var(--color-accent);
}

.latest-list,
.series-list,
.topic-map-list {
  padding: 0;
  margin: 2rem 0 0;
  list-style: none;
}

.latest-item { margin: 0; border-top: 1px solid var(--color-line); }
.latest-item:last-child { border-bottom: 1px solid var(--color-line); }

.latest-item > a {
  display: grid;
  grid-template-columns: minmax(2.5rem, 4rem) minmax(min(100%, 20rem), 42rem);
  gap: 0.75rem;
  align-items: start;
  min-height: 9rem;
  padding: 1rem 0.25rem;
  color: var(--color-text);
  text-decoration: none;
}

.latest-item > a:hover { background: var(--color-surface-muted); }

.latest-item-number {
  color: var(--color-signal-text);
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1.45;
}

.latest-item-copy {
  display: grid;
  grid-template-columns: minmax(min(100%, 20rem), 42rem);
  gap: 0.35rem;
  min-width: 0;
}

.latest-item-copy strong { font-size: 1.125rem; line-height: 1.35; }
.latest-item-copy > span,
.latest-item-copy small { color: var(--color-text-muted); overflow-wrap: anywhere; }
.latest-item-copy small { font-size: 0.8125rem; line-height: 1.5; }

.pagination-nav { max-width: var(--reading-width); margin-top: 2rem; }
.pagination-status { color: var(--color-text-muted); }
.pagination-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Series and topic map */
.series-page,
.topic-map-page { max-width: 64rem; }

.series-page > p:not(:has(a)),
.topic-map-page > p { max-width: var(--reading-width); color: var(--color-text-muted); }

.series-list { counter-reset: series; }

.series-row {
  counter-increment: series;
  display: grid;
  grid-template-columns: minmax(3rem, 5rem) minmax(min(100%, 20rem), 48rem);
  gap: 0.75rem;
  min-height: 7.5rem;
  margin: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--color-line);
}

.series-row::before {
  content: counter(series, decimal-leading-zero);
  color: var(--color-signal-text);
  font-size: 0.8125rem;
  font-weight: 750;
}

.series-row > a { align-self: start; font-size: 1.125rem; font-weight: 750; line-height: 1.35; }
.series-row > p { grid-column: 2; margin: 0; color: var(--color-text-muted); }

.topic-tag-index,
.topic-article-index { margin-top: 2rem; }

.topic-tag-index h2,
.topic-article-index h2 {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-line);
}

.topic-tag-list,
.article-topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-tag,
.article-topic-tags li {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-line);
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  font-size: 0.875rem;
  font-weight: 700;
}

.topic-tag { color: var(--color-text); font-size: 1rem; }
.topic-article-list { margin: 0; padding: 0; border-top: 1px solid var(--color-line); list-style: none; }
.topic-article-row { padding: 1rem 0; border-bottom: 1px solid var(--color-line); }
.topic-article-row h3 { margin: 0 0 0.65rem; font-size: 1.125rem; overflow-wrap: anywhere; }

/* Article */
article { max-width: var(--reading-width); margin-inline: auto; }
article > :first-child { margin-top: 0; }
article > h1 { font-size: 2.25rem; }
article hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--color-line); }

article blockquote {
  margin: 1.5rem 0;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 3px solid var(--color-signal);
  color: var(--color-text-muted);
}

article code {
  padding: 0.1em 0.3em;
  color: var(--color-text);
  background: var(--color-surface-muted);
  font-family: "PingFang TC", "Noto Sans TC", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, "SFMono-Regular", "Cascadia Mono", monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

article pre {
  max-width: 100%;
  padding: 1rem;
  border: 1px solid var(--color-line);
  background: var(--color-surface-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

article pre code { padding: 0; background: transparent; }
article h2 { padding-bottom: 0.35rem; border-bottom: 1px solid var(--color-line); }
article h2 a,
article h3 a { color: inherit; }
article h2 a:hover,
article h3 a:hover { color: var(--color-accent); }

.article-context {
  margin-top: 2.5rem;
  padding: 1rem;
  border-top: 2px solid var(--color-signal);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-muted);
}

.article-context p { margin: 0.35rem 0; }
.article-context span { margin-right: 0.4rem; color: var(--color-text-muted); font-size: 0.875rem; font-weight: 750; }

.post-footer {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
}

.post-meta { color: var(--color-text-muted); font-size: 0.875rem; }

.post-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(min(100%, 20rem), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.post-navigation-link {
  display: grid;
  grid-template-columns: minmax(min(100%, 20rem), 1fr);
  align-content: start;
  gap: 0.4rem;
  min-height: 8rem;
  padding: 1rem;
  border: 1px solid var(--color-line);
  color: var(--color-text);
  background: var(--color-surface);
  text-decoration: none;
}

.post-navigation-link:hover { border-color: var(--color-accent); background: var(--color-surface-muted); }
.post-navigation-link span { color: var(--color-text-muted); font-size: 0.8125rem; }
.post-navigation-link strong { line-height: 1.35; overflow-wrap: anywhere; }
.post-navigation-next { grid-column: 2; }
.all-stories-link { margin-top: 1rem; }

/* Raven */
.back-to-top {
  position: fixed;
  z-index: 40;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  color: var(--color-surface);
  background: var(--color-text);
  cursor: pointer;
}

.back-to-top[hidden] { display: none; }
.back-to-top:hover { border-color: var(--color-signal); color: var(--color-surface); background: var(--color-signal); }
.back-to-top-icon { display: block; width: 52px; height: 52px; margin: auto; }

@media (max-width: 60rem) {
  .site-header { display: grid; grid-template-columns: minmax(min(100%, 20rem), 48rem); }
  .site-brand { justify-self: start; }
  .site-controls { width: 100%; }
  .site-controls { justify-content: space-between; }
  .content-navigation { padding-right: 0; border-right: 0; }
  .post-navigation { grid-template-columns: minmax(min(100%, 20rem), 46rem); }
  .post-navigation-next { grid-column: 1; }
}

@media (max-width: 52rem) {
  .latest-shell {
    grid-template-columns: minmax(min(100%, 20rem), 46rem);
    grid-template-rows: none;
  }
  .latest-shell > .latest-list { grid-column: 1; grid-row: auto; margin-top: 2rem; }
}

@media (max-width: 42rem) {
  .site-header,
  main,
  .site-footer { padding-inline: max(0.875rem, env(safe-area-inset-left)) max(0.875rem, env(safe-area-inset-right)); }
  main { padding-top: 1rem; padding-bottom: 3rem; }
  .site-header { gap: 0.35rem; padding-top: max(0.625rem, env(safe-area-inset-top)); padding-bottom: 0.625rem; }
  .site-brand { gap: 0.35rem; }
  .site-parent { font-size: 0.75rem; }
  .site-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.35rem; width: 100%; }
  .content-navigation { grid-column: 1 / -1; justify-content: center; }
  .site-utilities { grid-column: 1 / -1; justify-content: center; }
  .content-navigation,
  .language-navigation { gap: 0.1rem; }
  .site-header nav a,
  .theme-trigger { padding-inline: 0.5rem; }
  .theme-trigger-label { display: none; }
  h1,
  article > h1 { font-size: 1.75rem; }
  .latest-shell h1 { font-size: 1.5rem; }
  .latest-intro { font-size: 1rem; line-height: 1.5; }
  h2 { font-size: 1.3rem; }
  .latest-item > a,
  .series-row,
  .latest-item-copy,
  .topic-map-list { grid-template-columns: minmax(min(100%, 20rem), 1fr); }
  .latest-item > a { min-height: 0; gap: 0.35rem; }
  .series-row { gap: 0.35rem; }
  .series-row > p { grid-column: 1; }
  .topic-map-node details > p,
  .topic-map-node details > ul { margin-left: 0.25rem; }
  .back-to-top { width: 44px; height: 44px; }
  .back-to-top-icon { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
  .site-header,
  .site-footer,
  .latest-item,
  .series-row,
  .topic-map-list,
  .topic-map-node,
  .post-footer,
  .post-navigation-link { border-color: CanvasText; }
  .primary-action,
  .pagination-link,
  .all-stories-link,
  .post-navigation-link { forced-color-adjust: auto; }
}