.characters-secrets-page {
  overflow: hidden;
}

.characters-secrets-page .section {
  padding-block: var(--space-9);
}

.cs-hero {
  position: relative;
  padding-top: var(--space-10);
}

.cs-hero::before,
.cs-download__panel::before {
  position: absolute;
  content: "✦  ·  ✦  ·  ✦";
  color: color-mix(in srgb, var(--color-ember) 42%, transparent);
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  letter-spacing: 0.5rem;
  pointer-events: none;
}

.cs-hero::before { top: var(--space-7); right: 8%; }

.cs-hero__grid {
  display: grid;
  grid-template-columns: minmax(25rem, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: var(--space-7);
}

.cs-hero__copy,
.cs-hero__media,
.cs-split > *,
.cs-item-intro > *,
.cs-relics__top > * { min-width: 0; }

.cs-hero__copy {
  width: 100%;
  max-width: 35rem;
}

.cs-hero__copy .lead { max-width: 34rem; }

.cs-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.cs-hero__links > * { min-width: 0; }

.cs-note {
  width: 100%;
  max-width: 34rem;
  border-left: 3px solid var(--color-ember);
  padding-left: var(--space-4);
  color: var(--color-ink-muted);
}

.cs-note strong { color: var(--color-ink-primary); }

.cs-note p,
.cs-note:last-child { margin-bottom: 0; }

.cs-hero__media { width: 100%; margin: 0; }
.cs-hero__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.cs-section-head { width: 100%; max-width: 38.75rem; margin-bottom: var(--space-6); }
.cs-section-head--wide { max-width: 42.5rem; }

.cs-router { padding-block: var(--space-7); }
.cs-router__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.cs-router__card,
.cs-related__card {
  display: flex;
  min-width: 0;
  min-height: 14.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-panel);
  padding: var(--space-5);
  color: var(--color-ink-primary);
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-base);
}

.cs-router__card > *,
.cs-related__card > * { min-width: 0; }
.cs-router__card h3,
.cs-related__card h3 { margin: 0; font-size: 1.05rem; }
.cs-router__card p,
.cs-related__card p { margin: 0; color: var(--color-ink-muted); font-size: 0.94rem; line-height: 1.55; }
.cs-router__number { color: var(--color-ember); font-family: var(--font-heading); font-size: var(--text-label); }
.cs-router__card:hover,
.cs-router__card:focus-visible,
.cs-related__card:hover,
.cs-related__card:focus-visible { border-color: var(--color-ember); background: var(--color-bg-panel-raised); color: var(--color-ink-primary); transform: translateY(-2px); }

.cs-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(16rem, 0.8fr);
  gap: var(--space-8);
  align-items: start;
}

.cs-checks__steps { width: 100%; max-width: 45rem; }
.cs-step {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-4);
  position: relative;
  padding-bottom: var(--space-5);
}
.cs-step:not(:last-child)::before { position: absolute; top: 2.3rem; bottom: 0; left: 1.05rem; width: 1px; background: var(--color-line-subtle); content: ""; }
.cs-step__number { z-index: 1; width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-line-subtle); background: var(--color-bg-void); color: var(--color-ember); font-family: var(--font-heading); font-size: var(--text-micro); }
.cs-step h3 { margin-bottom: var(--space-2); font-size: 1.1rem; }
.cs-step--ember > div { border-left: 3px solid var(--color-ember); padding-left: var(--space-4); }
.cs-aside-note { width: 100%; max-width: 17.5rem; border: var(--border-subtle); background: var(--color-bg-panel); padding: var(--space-5); }
.cs-aside-note h3 { font-size: 1rem; }
.cs-aside-note p:last-child { margin-bottom: 0; }

.cs-character-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.cs-card { display: flex; min-width: 0; min-height: 100%; flex-direction: column; gap: var(--space-4); border: var(--border-subtle); border-radius: var(--radius-sm); background: var(--color-bg-panel); padding: var(--space-5); transition: background-color var(--transition-fast); }
.cs-card:hover { background: var(--color-bg-panel-raised); }
.cs-card > * { min-width: 0; margin: 0; }
.cs-card h3 { font-size: 1.15rem; }
.cs-card p { color: var(--color-ink-muted); }
.cs-card__top { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--color-ember); font-family: var(--font-heading); font-size: var(--text-micro); }
.cs-mini-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: auto; }
.cs-mini-flow span { border-top: 1px solid var(--color-line-subtle); padding-top: var(--space-2); color: var(--color-ember); font-size: var(--text-label); }
.cs-tactical { width: 100%; margin-top: var(--space-5); border-left: 3px solid var(--color-ember); padding: var(--space-4); background: color-mix(in srgb, var(--color-bg-panel) 92%, var(--color-ember) 8%); }

.cs-secrets__copy { width: 100%; max-width: 45rem; }
.cs-secrets__copy article { margin-bottom: var(--space-6); }
.cs-secrets__copy article h3 { font-size: 1.2rem; }
.cs-inline-warning { color: var(--color-blood); font-weight: 700; }
.cs-warning { margin-bottom: var(--space-6); border-left: 3px solid var(--color-blood); padding: var(--space-4); background: color-mix(in srgb, var(--color-bg-panel) 94%, var(--color-blood) 6%); }
.cs-warning p { margin: var(--space-2) 0 0; color: var(--color-ink-muted); }
.cs-note-template { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.cs-note-template span { border: 1px solid var(--color-line-subtle); padding: var(--space-3); color: var(--color-ink-muted); font-size: var(--text-label); }
.cs-checklist { display: flex; width: 100%; max-width: 17.5rem; flex-direction: column; gap: var(--space-3); border: var(--border-subtle); background: var(--color-bg-panel); padding: var(--space-5); }
.cs-checklist > * { min-width: 0; margin: 0; }
.cs-checklist h3 { font-size: 1rem; }
.cs-checklist label { display: flex; min-height: 2.75rem; align-items: center; gap: var(--space-2); border-top: 1px solid var(--color-line-subtle); padding-top: var(--space-3); color: var(--color-ink-primary); font-size: var(--text-label); }
.cs-checklist input { width: 1.15rem; min-width: 1.15rem; min-height: 1.15rem; accent-color: var(--color-relic-green); }

.cs-map-items > .container > h2,
.cs-relics > .container > h2,
.cs-exploration > .container > h2,
.cs-roadmap > .container > h2,
.cs-related > .container > h2 { max-width: 43rem; }
.cs-item-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.6fr); gap: var(--space-7); margin-top: var(--space-6); align-items: center; }
.cs-item-intro > div { max-width: 43rem; }
.cs-item-intro h3,
.cs-item-copy h3 { font-size: 1.2rem; }
.cs-process { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: 0; padding: 0; }
.cs-process li { border-left: 2px dashed var(--color-relic-green); padding: var(--space-2) 0 var(--space-2) var(--space-4); color: var(--color-ink-primary); font-weight: 700; }
.cs-item-copy { width: 100%; max-width: 45rem; display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-7); }
.cs-item-copy article { min-width: 0; }
.cs-decision { margin-top: var(--space-6); border: var(--border-subtle); border-radius: var(--radius-md); background: var(--color-bg-panel-raised); padding: var(--space-5); }
.cs-decision h3 { font-size: 1.15rem; }
.cs-decision > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.cs-decision p { margin: 0; color: var(--color-ink-muted); }
.cs-decision strong { color: var(--color-ink-primary); }

.cs-relics__top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 0.8fr); gap: var(--space-7); margin-top: var(--space-6); align-items: stretch; }
.cs-relic-panel { width: 100%; max-width: 45rem; border: 1px solid var(--color-relic-green); border-radius: var(--radius-md); background: var(--color-bg-panel); padding: var(--space-6); }
.cs-relic-panel h3 { margin-top: var(--space-4); font-size: 1.25rem; }
.cs-relic-panel p:last-child { margin-bottom: 0; }
.cs-relic-compare { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: var(--space-3); border-left: 3px solid var(--color-relic-green); padding-left: var(--space-4); color: var(--color-ink-muted); }
.cs-relic-compare strong { color: var(--color-relic-green); }
.cs-relic-copy { width: 100%; max-width: 45rem; margin-top: var(--space-6); }
.cs-relic-copy h3 { font-size: 1.2rem; border-top: 2px solid var(--color-arcana-violet); padding-top: var(--space-3); }
.cs-criteria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.cs-criteria article { min-width: 0; border-top: 3px solid var(--color-relic-green); background: var(--color-bg-panel); padding: var(--space-5); }
.cs-criteria h3 { font-size: 1rem; }
.cs-criteria p { margin-bottom: 0; color: var(--color-ink-muted); }

.cs-run-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.cs-run-types article { min-width: 0; border: var(--border-subtle); background: var(--color-bg-panel); padding: var(--space-5); }
.cs-run-types h3 { font-size: 1.15rem; }
.cs-run-types p:last-child { margin-bottom: 0; }
.cs-signal { width: 100%; max-width: 44rem; margin-top: var(--space-6); }
.cs-signal h3 { font-size: 1.2rem; }
.cs-signal > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.cs-signal span { min-width: 0; border-top: 1px solid var(--color-line-subtle); padding-top: var(--space-3); color: var(--color-ink-muted); font-size: var(--text-label); }
.cs-signal strong { display: block; color: var(--color-ink-primary); }
.cs-focus-note { width: 100%; max-width: 43rem; margin-top: var(--space-5); border-left: 3px solid var(--color-focus-cyan); padding: var(--space-4); background: color-mix(in srgb, var(--color-bg-panel) 92%, var(--color-focus-cyan) 8%); }
.cs-focus-note strong { color: var(--color-focus-cyan); }
.cs-focus-note p { margin-bottom: 0; }

.cs-roadmap__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.cs-roadmap__grid article { position: relative; min-width: 0; border-top: 2px solid var(--color-ember); padding-top: var(--space-4); }
.cs-roadmap__grid article > span:first-child { display: block; margin-bottom: var(--space-3); color: var(--color-ember); font-family: var(--font-heading); font-size: var(--text-label); }
.cs-roadmap__grid h3 { font-size: 1rem; }
.cs-roadmap__grid p { color: var(--color-ink-muted); font-size: 0.94rem; line-height: 1.58; }
.cs-roadmap__summary { width: 100%; margin-top: var(--space-6); background: var(--color-ember); color: var(--color-bg-void); padding: var(--space-5); }
.cs-roadmap__summary strong { display: block; margin-bottom: var(--space-2); }

.cs-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.cs-related__card { min-height: 16rem; }
.cs-related__card > span:last-child { margin-top: auto; color: var(--color-ember); font-size: var(--text-label); font-weight: 700; }
.cs-related__card--ember { border-left: 3px solid var(--color-ember); }
.cs-related__card--arcana { border-left: 3px solid var(--color-arcana-violet); }
.cs-related__card--danger { border-left: 3px solid var(--color-blood); }

.cs-download { padding-bottom: var(--space-10); }
.cs-download__panel { position: relative; display: flex; width: 100%; max-width: 47.5rem; min-width: 0; flex-direction: column; align-items: center; gap: var(--space-4); margin-inline: auto; overflow: hidden; border: var(--border-ember); border-radius: var(--radius-md); background: var(--color-bg-panel-raised); padding: var(--space-7); text-align: center; }
.cs-download__panel::before { top: var(--space-4); right: var(--space-4); opacity: 0.5; }
.cs-download__panel > * { position: relative; min-width: 0; margin: 0; }
.cs-download__panel h2 { max-width: 37rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.cs-download__panel > p:not(.eyebrow):not(.meta) { max-width: 36.875rem; }
.cs-download__button { min-width: 20rem; min-height: 3.25rem; }

@media (max-width: 65.625rem) {
  .cs-router__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-roadmap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}

@media (max-width: 60rem) {
  .cs-character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-character-grid > :nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 56.25rem) {
  .cs-hero__grid { grid-template-columns: minmax(22.5rem, 0.55fr) minmax(0, 1fr); gap: var(--space-5); }
  .cs-split,
  .cs-relics__top { grid-template-columns: 1fr; gap: var(--space-5); }
  .cs-aside-note,
  .cs-checklist { max-width: none; }
  .cs-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-checklist > :first-child,
  .cs-checklist > :nth-child(2),
  .cs-checklist > :nth-child(3) { grid-column: 1 / -1; }
  .cs-item-intro { grid-template-columns: 1fr; gap: var(--space-5); }
  .cs-process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cs-process li { min-width: 0; }
}

@media (max-width: 55rem) {
  .cs-decision > div { grid-template-columns: 1fr; gap: var(--space-3); }
  .cs-decision p { border-top: 1px solid var(--color-line-subtle); padding-top: var(--space-3); }
}

@media (max-width: 52.5rem) {
  .cs-related__grid { grid-template-columns: 1fr; }
  .cs-related__card { min-height: auto; }
}

@media (max-width: 48rem) {
  .characters-secrets-page .section { padding-block: var(--space-8); }
  .cs-hero { padding-top: var(--space-8); }
  .cs-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .cs-hero__copy { max-width: none; }
  .cs-hero__copy .lead,
  .cs-note { max-width: none; }
  .cs-hero__media { order: 2; }
  .cs-run-types { grid-template-columns: 1fr; }
}

@media (max-width: 43.75rem) {
  .cs-criteria { grid-template-columns: 1fr; gap: var(--space-3); }
  .cs-signal > div { grid-template-columns: 1fr; }
  .cs-signal span { padding-block: var(--space-3); }
}

@media (max-width: 42.5rem) {
  .cs-character-grid { grid-template-columns: 1fr; }
  .cs-character-grid > :nth-child(3) { grid-column: auto; }
  .cs-mini-flow { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .cs-roadmap__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .cs-roadmap__grid article { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-3); }
  .cs-roadmap__grid article > span:first-child { grid-row: 1 / span 2; }
  .cs-roadmap__grid article h3,
  .cs-roadmap__grid article p { grid-column: 2; }
}

@media (max-width: 38.75rem) {
  .cs-router__grid { grid-template-columns: 1fr; }
  .cs-router__card { min-height: auto; }
  .cs-checklist { grid-template-columns: 1fr; }
  .cs-checklist > * { grid-column: auto !important; }
  .cs-process { grid-template-columns: 1fr; }
  .cs-note-template { grid-template-columns: 1fr; }
  .cs-download__panel { padding: var(--space-5); }
  .cs-download__button { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-router__card:hover,
  .cs-router__card:focus-visible,
  .cs-related__card:hover,
  .cs-related__card:focus-visible { transform: none; }
}

.characters-secrets-page ul { list-style: none !important; }