:root {
  /* Soft dark reading palette: anthracite background, off-white prose, no harsh pure black/white. */
  --color-bg: #15181d;
  --color-bg-2: #181c22;
  --color-surface: #1c2128;
  --color-surface-2: #232933;
  --color-text: #d4dae1;
  --color-text-strong: #eef2f5;
  --color-muted: #98a2ad;
  --color-line: #343b46;
  --color-accent: #e7bb58;
  --color-link: #9dccd8;

  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure-article: 61ch;
  --measure-wide: 1180px;

  --step--1: 0.9rem;
  --step-0: clamp(1.0625rem, 0.45vw + 1rem, 1.2rem);
  --step-1: clamp(1.18rem, 0.6vw + 1rem, 1.45rem);
  --step-2: clamp(1.55rem, 1.2vw + 1.2rem, 2.15rem);
  --step-3: clamp(2rem, 4.5vw, 4rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
}


* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: linear-gradient(180deg, #171a20, var(--color-bg-2) 42%, var(--color-bg));
  font-kerning: normal;
  font-feature-settings: "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  line-height: 1.58;
}
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .16em; }
img { max-width: 100%; }
.wrap { max-width: var(--measure-wide); margin: 0 auto; padding: 0 22px; }
.section { padding: 42px 0; }
.section-first { padding-top: 34px; }
.section h1, .section h2 {
  font-size: var(--step-2);
  line-height: 1.12;
  margin: 0 0 20px;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.footer { border-top: 1px solid var(--color-line); padding: 28px 0; color: var(--color-muted); font-size: .9rem; }
.back { color: var(--color-link); text-decoration: none; }
.small { color: var(--color-muted); font-size: .9rem; }


.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }
.card {
  background: linear-gradient(180deg, var(--color-surface), #181d24);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
  height: 100%;
}
.card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.thumb { display: block; aspect-ratio: 16/9; width: 100%; object-fit: cover; background: #222; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-height: 2.55em;
  color: var(--color-muted);
  font-size: .84rem;
  margin-bottom: 8px;
}
.meta .meta-sep { flex: 0 0 auto; }
.meta .meta-channel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card h3 { font-size: 1.05rem; line-height: 1.27; margin: 0 0 12px; text-wrap: balance; }
.button { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; margin-top: auto; color: #0b0d12; background: var(--color-accent); padding: 9px 12px; border-radius: 10px; font-weight: 750; }
.archive { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 800px) { .archive { grid-template-columns: 1fr; } }
.archive-box { background: rgba(255,255,255,.035); border: 1px solid var(--color-line); border-radius: 18px; padding: 18px; }
.archive-box h2 { margin-top: 0; }
.picker-label { display: block; color: var(--color-muted); font-size: .92rem; margin: 0 0 8px; }
.archive-select {
  width: 100%;
  appearance: none;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 12px 42px 12px 12px;
  font: inherit;
  line-height: 1.25;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.archive-select:focus { outline: 2px solid color-mix(in srgb, var(--color-accent), transparent 35%); outline-offset: 2px; }
.archive-preview { margin-top: 18px; }
.archive-box ul { margin: 10px 0 0; padding-left: 1.2rem; }
.archive-box li { margin: 8px 0; max-width: 72ch; }
.channel-groups { margin-top: 18px; display: grid; gap: 16px; }
.channel-group { border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }
.channel-group:first-child { border-top: 0; padding-top: 0; }
.channel-group h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--color-text-strong); }
.channel-group li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 6px 0; margin: 0; }
.channel-group li span { color: var(--color-muted); font-size: .86rem; white-space: nowrap; }
@media (max-width: 620px) { .channel-group li { grid-template-columns: 1fr; gap: 2px; } }


.article-header { padding: 38px 0 26px; border-bottom: 1px solid var(--color-line); }
.article-header h1 {
  font-size: var(--step-3);
  line-height: 1.04;
  margin: 16px 0;
  letter-spacing: -0.04em;
  text-wrap: balance;
  max-width: 16ch;
}
.article-layout { display: grid; grid-template-columns: minmax(0, var(--measure-article)) 280px; gap: 52px; align-items: start; }
.article { padding: 34px 0 64px; }
.article-main {
  font-size: var(--step-0);
  line-height: 1.66;
  hyphens: auto;
  overflow-wrap: break-word;
}
.article-main > * { max-width: var(--measure-article); }
.article-main h1, .article-main h2, .article-main h3 { hyphens: none; text-wrap: balance; }
.article-main h1 { font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 .8em; }
.article-main h2 { font-size: var(--step-2); line-height: 1.14; margin: 2.4em 0 .8em; border-top: 1px solid var(--color-line); padding-top: 1em; letter-spacing: -0.025em; }
.article-main h3 { font-size: var(--step-1); line-height: 1.2; margin: 1.75em 0 .45em; color: var(--color-text-strong); }
.article-main h3.numbered-heading {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: .35rem;
  margin-left: -2.75rem;
  max-width: calc(var(--measure-article) + 2.75rem);
}
.article-main h3.numbered-heading .heading-marker {
  color: var(--color-accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.article-main h3.numbered-heading .heading-text { min-width: 0; }
.article-main p { margin: 0 0 1.25em; }

/* Hanging list markers: marker hangs outside, text aligns with paragraphs. */
.article-main ol,
.article-main ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.35em;
}
.article-main li {
  position: relative;
  margin: .5em 0;
  padding-left: 0;
}
.article-main ul > li::before {
  content: "–";
  position: absolute;
  left: -1.35rem;
  color: var(--color-accent);
}
.article-main ol { counter-reset: item; }
.article-main ol > li { counter-increment: item; }
.article-main ol > li::before {
  content: counter(item) ".";
  position: absolute;
  left: -2.65rem;
  min-width: 2rem;
  text-align: right;
  color: var(--color-accent);
}
.article-main strong { color: var(--color-text-strong); }
.toc { position: sticky; top: 18px; background: rgba(255,255,255,.035); border: 1px solid var(--color-line); border-radius: 18px; padding: 16px; color: var(--color-muted); font-size: .92rem; line-height: 1.45; }
.toc a { display: block; text-decoration: none; color: var(--color-text); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.toc-mobile { display: none; margin: 0 0 18px; padding: 10px; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--color-line); border-radius: 14px; }
.toc-mobile a { flex: 1 1 0; text-align: center; text-decoration: none; padding: 10px 8px; border-radius: 10px; background: var(--color-surface-2); color: var(--color-text); font-size: .9rem; font-weight: 600; }
.toc-mobile a + a { margin-left: 8px; }
@media (max-width: 980px) {
  .article-layout { grid-template-columns: 1fr; }
  .toc { display: none; }
  .toc-mobile { display: flex; grid-column: 1; }
  .article-main > * { max-width: 100%; }
}
@media (max-width: 700px) {
  .article-main {
    /* Mobile safety gutter: markers hang, but never touch the phone edge. */
    padding-left: 2.75rem;
  }
  .article-main h3.numbered-heading {
    margin-left: -2.75rem;
    max-width: calc(100% + 2.75rem);
  }
  .article-main ol > li::before { left: -2.45rem; }
  .article-main ul > li::before { left: -1.3rem; }
}
.article-cover { width: 100%; max-width: 780px; border-radius: 18px; border: 1px solid var(--color-line); box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.notice { background: rgba(242,193,78,.1); border: 1px solid rgba(242,193,78,.35); border-radius: 16px; padding: 14px; color: #f7e8b8; margin-top: 18px; max-width: var(--measure-article); }