/* roulang page: index */
:root {
  --paper: #F3EEE4;
  --plum: #4A2340;
  --copper: #C4622D;
  --moss: #3E6B52;
  --ink: #241C22;
  --muted: #5E534C;
  --line: #E2D8CC;
  --card: #FFFBF6;
  --dark: #2C2430;
  --cream: #F6EFE6;
  --tint: #EFE6DC;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(36, 28, 34, .08);
  --gap: 16px;
  --fast: 160ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0;
}
img { max-width: 100%; display: block; }
a { color: var(--plum); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--plum); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
button, input, select, textarea { font-family: inherit; color: var(--ink); }
h1, h2, h3, h4 { margin: 0 0 12px; letter-spacing: 0; font-weight: 700; line-height: 1.35; color: var(--ink); }
h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: clamp(22px, 3vw, 30px); }
h3 { font-size: 18px; }
p { margin: 0 0 12px; }
.num { font-variant-numeric: tabular-nums; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--card);
  border-top: 3px solid var(--plum);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.site-header .grid-container { padding-top: 14px; padding-bottom: 12px; }
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; color: var(--ink); text-decoration: none; }
.logo:hover { text-decoration: none; color: var(--ink); }
.logo-main { font-size: 18px; font-weight: 700; line-height: 1.3; }
.logo[aria-current="page"] .logo-main { box-shadow: inset 0 -2px 0 var(--copper); }
.logo-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.nav-cta { flex: 0 0 auto; }
.chip-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 4px;
  scrollbar-width: thin;
}
.chip, button.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
}
.chip:hover, button.chip:hover { text-decoration: underline; color: var(--ink); background: var(--paper); }
.chip.is-on, button.chip.is-on {
  background: var(--plum);
  color: var(--cream);
  border-color: var(--plum);
}
.chip.is-on:hover, button.chip.is-on:hover { color: var(--cream); text-decoration: underline; }
.btn, button.btn, a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--plum);
  background: var(--plum);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
}
.btn:hover, button.btn:hover, a.btn:hover {
  background: var(--copper);
  color: var(--plum);
  border-color: var(--copper);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.section { padding: 72px 0; }
.section-paper { background: var(--paper); }
.section-card { background: var(--card); }
.section-tint { background: var(--tint); }
.lead { max-width: 42em; color: var(--muted); margin-bottom: 22px; }
.metric-bar { background: var(--dark); color: var(--cream); padding: 48px 0 42px; }
.metric-bar h1, .metric-bar p { color: var(--cream); }
.metric-sub { color: #E2D8CC; margin-bottom: 10px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.metric {
  background: rgba(246, 239, 230, .06);
  border: 1px solid rgba(226, 216, 204, .28);
  border-radius: var(--radius);
  padding: 14px 12px;
  min-height: 118px;
}
.metric span { display: block; color: var(--copper); font-size: 13px; font-weight: 700; }
.metric b { display: block; margin: 8px 0 6px; font-size: 40px; line-height: 1; font-weight: 700; color: var(--cream); font-variant-numeric: tabular-nums; }
.metric small { display: block; color: #E2D8CC; font-size: 13px; line-height: 1.5; }
.panel, .card, .ladder, .news-item, .t-node, .qa-item, .alt-cell, .form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel { padding: 8px 18px; }
.region-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  border-bottom: 1px solid var(--line);
}
.region-row:last-child { border-bottom: 0; }
.region-row a { font-weight: 700; }
.region-row b { font-variant-numeric: tabular-nums; font-size: 28px; color: var(--plum); line-height: 1; }
.mini-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-tags span, .badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--plum);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.badge-hd { background: var(--moss); color: var(--cream); border-color: var(--moss); }
.badge-uhd { background: var(--plum); color: var(--cream); border-color: var(--plum); }
.badge-sd { background: var(--tint); color: var(--muted); }
.ladder { padding: 18px; height: 100%; }
.ladder ol { list-style: none; margin: 0; padding: 0; }
.ladder li { display: flex; gap: 12px; margin-bottom: 14px; }
.ladder li:last-child { margin-bottom: 0; }
.step-no {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--plum);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.step-body { flex: 1; }
.step-body p { margin: 0; color: var(--muted); font-size: 14px; }
.moss-line { height: 8px; background: var(--line); border-radius: 999px; margin-top: 8px; }
.moss-line i { display: block; height: 100%; background: var(--moss); border-radius: 999px; }
.w46 { width: 46%; }
.w72 { width: 72%; }
.w100 { width: 100%; }
.track { margin-top: 18px; }
.track-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.track-head h3 { margin: 0; }
.track-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.track-row a {
  flex: 1 0 120px;
  min-height: 64px;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-weight: 700;
}
.track-row a:nth-child(1) { flex-basis: 180px; min-height: 88px; background: #F7F1EA; }
.track-row a:nth-child(2) { flex-basis: 120px; }
.track-row a:nth-child(3) { flex-basis: 150px; min-height: 96px; }
.track-row a:nth-child(4) { flex-basis: 130px; }
.track-row a:nth-child(5) { flex-basis: 168px; }
.track-row a:nth-child(6) { flex-basis: 140px; min-height: 80px; }
.scene-card { padding: 18px; height: 100%; }
.scene-card .ph { margin-bottom: 12px; }
.h-a { min-height: 280px; }
.h-b { min-height: 210px; }
.h-c { min-height: 240px; }
.h-d { min-height: 190px; }
.h-e { min-height: 160px; }
.ph {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: var(--plum);
  overflow: hidden;
}
.ph.r43 { aspect-ratio: 4 / 3; }
.ph-b { background: #5C3148; }
.ph-c { background: #2C2430; }
.ph-d { background: #3E6B52; }
.ph em {
  position: absolute;
  left: 12px;
  bottom: 12px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--copper);
  color: var(--plum);
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
}
.compare { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.compare-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.compare-col header { padding: 16px 18px; background: var(--plum); color: var(--cream); }
.compare-col header h3 { margin: 0; color: var(--cream); }
.compare-col.low header { background: #5E534C; }
.crow { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.crow strong { color: var(--plum); }
.euro-card { padding: 18px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.euro-card p { color: var(--muted); margin: 0 0 14px; }
.timeline { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.t-node { flex: 0 0 220px; padding: 16px; position: relative; }
.t-node::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--moss);
  margin-bottom: 8px;
}
.t-node b { display: block; font-variant-numeric: tabular-nums; color: var(--plum); font-size: 18px; }
.t-node p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.split-list { list-style: none; margin: 0; padding: 0 8px 0 0; }
.kr-col .split-list { padding: 0 0 0 8px; }
.jp-col { border-right: 1px solid var(--line); }
.split-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
}
.filter-row { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; }
.news-stack { display: flex; flex-direction: column; gap: 14px; }
.news-item { display: grid; grid-template-columns: 240px 1fr; gap: 16px; padding: 14px; align-items: center; }
.news-item h3 { margin-bottom: 4px; font-size: 18px; }
.news-item .summary { color: var(--muted); margin: 0; max-width: 40em; }
.news-meta { display: flex; gap: 8px; align-items: center; margin-top: 8px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.more-row { margin-top: 16px; }
.is-hidden { display: none !important; }
.alt-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.alt-grid article:nth-child(1),
.alt-grid article:nth-child(4),
.alt-grid article:nth-child(5) { grid-column: span 2; }
.alt-grid article:nth-child(2),
.alt-grid article:nth-child(3) { grid-column: span 1; }
.alt-grid article:nth-child(6) { grid-column: span 4; }
.alt-cell { padding: 18px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; }
.alt-cell span { color: var(--copper); font-size: 13px; font-weight: 700; }
.alt-cell p { margin: 8px 0 0; color: var(--muted); }
.promise-bar {
  display: flex;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.promise-bar article { flex: 1; padding: 18px 16px; border-right: 1px solid var(--line); }
.promise-bar article:last-child { border-right: 0; }
.promise-bar h3 { font-size: 16px; }
.promise-bar p { margin: 0; color: var(--muted); font-size: 14px; }
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--moss);
  display: inline-block;
  margin-right: 6px;
}
.q-line { margin-bottom: 18px; }
.q-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.q-top span { color: var(--muted); font-size: 14px; }
.bar { height: 8px; background: var(--line); border-radius: 999px; margin: 8px 0; }
.bar i { display: block; height: 100%; background: var(--moss); border-radius: 999px; }
.qa-list { display: flex; flex-direction: column; gap: 10px; }
.qa-item { padding: 14px 16px; box-shadow: none; }
.qa-item h3 { margin: 0 0 6px; font-size: 16px; }
.qa-item p { margin: 0; color: var(--muted); }
.fold { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 16px; margin-bottom: 10px; box-shadow: var(--shadow); }
.fold summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "＋"; margin-left: auto; color: var(--copper); font-weight: 700; }
.fold[open] summary::after { content: "－"; }
.fold p { color: var(--muted); margin: 0 0 14px; max-width: 46em; }
.form-card { padding: 20px; max-width: 760px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
input[type="text"], select {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: none;
}
input::placeholder { color: var(--muted); }
.form-note { min-height: 1.75em; color: var(--moss); font-weight: 700; }
.site-footer { background: var(--dark); color: var(--cream); padding: 42px 0 28px; }
.site-footer h2, .site-footer h3, .site-footer p, .site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--cream); }
.site-footer .muted { color: #E2D8CC; }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin: 0 0 8px; }
.foot-links a { min-height: 44px; display: inline-flex; align-items: center; }
.copy { margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(226, 216, 204, .25); color: #E2D8CC; font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) {
  .section { padding: 56px 0; }
  .logo-main { font-size: 16px; }
  .alt-grid { grid-template-columns: 1fr 1fr; }
  .alt-grid article:nth-child(n) { grid-column: auto; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .h-a, .h-b, .h-c, .h-d, .h-e { min-height: 0; }
}
@media (max-width: 768px) {
  .section { padding: 42px 0; }
  .compare, .news-item { grid-template-columns: 1fr; }
  .promise-bar { flex-direction: column; }
  .promise-bar article { border-right: 0; border-bottom: 1px solid var(--line); }
  .promise-bar article:last-child { border-bottom: 0; }
  .jp-col { border-right: 0; border-bottom: 1px solid var(--line); margin-bottom: 12px; padding-bottom: 8px; }
  .kr-col .split-list, .split-list { padding: 0; }
  .region-row { grid-template-columns: 64px 1fr; }
  .region-row b { grid-column: 2; }
  .metric b { font-size: 34px; }
}
@media (max-width: 520px) {
  .logo-main { font-size: 14px; }
  .nav-cta { padding: 0 12px; font-size: 14px; }
  h1 { font-size: 26px; }
  .metric-bar { padding: 32px 0 28px; }
  .alt-grid { grid-template-columns: 1fr; }
  .crow { grid-template-columns: 1fr; gap: 4px; }
  .track-head { align-items: flex-start; flex-direction: column; }
}

/* roulang page: category1 */
:root {
  --paper: #F3EEE4;
  --plum: #4A2340;
  --copper: #C4622D;
  --moss: #3E6B52;
  --ink: #241C22;
  --muted: #5E534C;
  --line: #E2D8CC;
  --card: #FFFBF6;
  --dark: #2C2430;
  --cream: #F6EFE6;
  --tint: #EFE6DC;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(36, 28, 34, .08);
  --gap: 16px;
  --fast: 160ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0;
}
img { max-width: 100%; display: block; }
a { color: var(--plum); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--plum); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
button, input, select, textarea { font-family: inherit; color: var(--ink); }
p { margin: 0 0 12px; }
h1, h2, h3 { font-weight: 700; letter-spacing: 0; line-height: 1.35; color: var(--ink); }
h2 { font-size: 28px; margin: 0 0 18px; }
h3 { font-size: 20px; margin: 0 0 8px; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--card);
  border-top: 3px solid var(--plum);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.site-header .grid-container { padding-top: 14px; padding-bottom: 12px; }
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; color: var(--ink); text-decoration: none; }
.logo:hover { text-decoration: none; color: var(--ink); }
.logo-main { font-size: 18px; font-weight: 700; line-height: 1.3; }
.logo-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.nav-cta { flex: 0 0 auto; }
.chip-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 4px;
  scrollbar-width: thin;
}
.chip, button.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
}
.chip:hover, button.chip:hover { text-decoration: underline; color: var(--ink); background: var(--paper); }
.chip.is-on, button.chip.is-on {
  background: var(--plum);
  color: var(--cream);
  border-color: var(--plum);
}
.chip.is-on:hover, button.chip.is-on:hover { color: var(--cream); text-decoration: underline; }
.btn, button.btn, a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--plum);
  background: var(--plum);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
}
.btn:hover, button.btn:hover, a.btn:hover {
  background: var(--copper);
  color: var(--plum);
  border-color: var(--copper);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], button.btn[disabled] {
  background: var(--tint);
  color: var(--muted);
  border-color: var(--line);
  cursor: not-allowed;
  transform: none;
}
.btn[disabled]:hover, button.btn[disabled]:hover {
  background: var(--tint);
  color: var(--muted);
  border-color: var(--line);
}
.section { padding: 72px 0; }
.section-paper { background: var(--paper); }
.section-card { background: var(--card); }
.section-tint { background: var(--tint); }
.lead { max-width: 42em; color: var(--muted); margin: 0; }
.muted { color: var(--muted); }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--plum);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.badge-hd { background: var(--moss); color: var(--cream); border-color: var(--moss); }
.badge-uhd { background: var(--plum); color: var(--cream); border-color: var(--plum); }
.badge-sd { background: var(--tint); color: var(--muted); }
.kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 10px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--plum);
  font-size: 13px;
  font-weight: 700;
}
.cat-title { font-size: 36px; margin: 0 0 10px; }
.quick-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.entry-list { display: flex; flex-direction: column; gap: 14px; }
.entry {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: stretch;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform var(--fast) ease, box-shadow var(--fast) ease;
}
.entry:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(36, 28, 34, .1); }
.entry.is-lead { grid-template-columns: 320px 1fr; background: #F7F1EA; }
.entry.is-hidden { display: none; }
.ph {
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(74, 35, 64, .88), rgba(196, 98, 45, .72)),
    var(--plum);
  color: var(--cream);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 12px;
  min-height: 124px;
  aspect-ratio: 16 / 9;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.entry:nth-child(3n) .ph { aspect-ratio: 4 / 3; background: linear-gradient(160deg, #3E6B52, #2C2430); }
.entry:nth-child(2n) .ph { background: linear-gradient(160deg, #4A2340, #6A3A38); }
.ph small { font-size: 12px; font-weight: 700; opacity: .9; }
.entry-body { display: flex; flex-direction: column; min-width: 0; }
.entry-body h3 { margin: 0 0 6px; font-size: 22px; }
.entry-body h3 a { color: var(--ink); }
.entry-body p { color: var(--muted); margin: 0 0 12px; }
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  margin-bottom: 10px;
}
.entry-meta time {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 14px;
}
.text-link { font-weight: 700; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }
.filter-board {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr .8fr;
  gap: 18px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.filter-group h3 { font-size: 16px; margin-bottom: 10px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.q-strip {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  align-items: center;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.q-strip h2 { font-size: 22px; margin: 0 0 6px; }
.q-lines { display: flex; flex-direction: column; gap: 10px; }
.q-line { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; }
.q-line b { font-variant-numeric: tabular-nums; }
.bar {
  height: 8px;
  background: var(--tint);
  border-radius: 999px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--moss);
  border-radius: inherit;
}
.w-sd { width: 38%; }
.w-hd { width: 68%; }
.w-uhd { width: 100%; }
.scope-card {
  height: 100%;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.scope-card p { color: var(--muted); flex: 1; }
.scope-a { min-height: 280px; border-top: 4px solid var(--plum); background: #F7F1EA; }
.scope-b { min-height: 230px; border-top: 4px solid var(--copper); }
.scope-c { min-height: 200px; border-top: 4px solid var(--moss); }
.timeline {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.t-node {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  min-height: 148px;
  position: relative;
}
.t-node::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--copper);
  margin-bottom: 10px;
}
.t-node time {
  display: block;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--plum);
  margin-bottom: 6px;
}
.t-node p { margin: 0; color: var(--muted); }
.list-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.qa { border-top: 1px solid var(--line); }
.qa summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--copper); font-weight: 700; font-size: 20px; }
.qa[open] summary::after { content: "–"; }
.qa p { color: var(--muted); margin: 0 0 14px; max-width: 46em; }
.empty-note {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
}
.site-footer {
  background: var(--dark);
  color: var(--cream);
  padding: 48px 0 28px;
}
.site-footer h3 { color: var(--cream); font-size: 16px; }
.site-footer a { color: var(--cream); }
.site-footer .muted { color: #D9CFC4; }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links a { display: inline-flex; min-height: 44px; align-items: center; }
.copy {
  border-top: 1px solid rgba(246, 239, 230, .18);
  margin: 18px 0 0;
  padding-top: 16px;
  color: #D9CFC4;
  font-size: 14px;
}
@media (max-width: 1024px) {
  .entry.is-lead, .entry { grid-template-columns: 180px 1fr; }
  .filter-board { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .q-strip { grid-template-columns: 1fr; }
  .cat-title { font-size: 30px; }
}
@media (max-width: 768px) {
  .section { padding: 48px 0; }
  .quick-filters { justify-content: flex-start; margin-top: 16px; }
  .entry, .entry.is-lead { grid-template-columns: 1fr; }
  .ph, .entry:nth-child(3n) .ph { aspect-ratio: 16 / 9; min-height: 0; }
  .timeline { grid-template-columns: 1fr; }
  .list-end { flex-direction: column; align-items: flex-start; }
  h2 { font-size: 24px; }
}
@media (max-width: 520px) {
  .logo-main { font-size: 15px; }
  .nav-cta { padding: 0 12px; font-size: 14px; }
  .cat-title { font-size: 26px; }
  .site-header .grid-container { padding-left: 16px; padding-right: 16px; }
}