.shadow-guide {
  background: var(--color-ink-950);
}

.shadow-guide__section {
  padding-block: var(--space-8);
}

.shadow-guide__hero {
  padding-block: var(--space-7) var(--space-8);
  background-image: linear-gradient(135deg, rgb(214 168 79 / 4%), transparent 44%);
}

.shadow-guide__hero-grid,
.shadow-guide__scene-grid,
.shadow-guide__summary-layout {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: var(--space-6);
}

.shadow-guide__hero-grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.shadow-guide__hero-copy,
.shadow-guide__hero-media,
.shadow-guide__reader-copy,
.shadow-guide__rail,
.shadow-guide__toc,
.shadow-guide__scene-media,
.shadow-guide__scene-copy,
.shadow-guide__summary-copy,
.shadow-guide__related,
.shadow-guide__download-copy,
.shadow-guide__download-actions {
  min-width: 0;
}

.shadow-guide__hero-copy {
  width: 100%;
  max-width: 33.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.shadow-guide__hero-copy > * {
  margin: 0;
}

.shadow-guide__breadcrumb {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
}

.shadow-guide__breadcrumb a {
  color: var(--color-text-muted);
}

.shadow-guide__eyebrow {
  color: var(--color-amber-400);
}

.shadow-guide__hero-actions {
  margin-top: var(--space-2);
}

.shadow-guide__hero-actions > .button {
  min-width: 0;
}

.shadow-guide__hero-media,
.shadow-guide__scene-media {
  width: 100%;
  margin: 0;
}

.shadow-guide__hero-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.82) saturate(0.82);
}

.shadow-guide__reader-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 47.5rem) minmax(18.75rem, 1fr);
  gap: var(--space-6);
}

.shadow-guide__reader-copy {
  width: 100%;
  max-width: 47.5rem;
}

.shadow-guide__rail {
  width: 100%;
}

.shadow-guide__principles {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-6);
}

.shadow-guide__principle {
  display: grid;
  min-width: 0;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-4);
}

.shadow-guide__principle-number {
  color: var(--color-amber-400);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
}

.shadow-guide__principle--tip > div {
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--color-mist-400);
}

.shadow-guide__micro-label {
  margin-block: 0 var(--space-2);
  color: var(--color-mist-400);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--leading-xs);
  text-transform: uppercase;
}

.shadow-guide__accent {
  color: var(--color-amber-400);
}

.shadow-guide__mist {
  color: var(--color-mist-400);
}

.shadow-guide__intro-copy {
  width: 100%;
  max-width: 45rem;
}

.shadow-guide__decision-grid,
.shadow-guide__tool-grid,
.shadow-guide__mistake-grid {
  display: grid;
  min-width: 0;
  gap: var(--space-5);
}

.shadow-guide__decision-grid,
.shadow-guide__mistake-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-6);
}

.shadow-guide__decision-card,
.shadow-guide__tool-card,
.shadow-guide__mistake-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.shadow-guide__decision-card > *,
.shadow-guide__tool-card > *,
.shadow-guide__mistake-card > * {
  margin: 0;
}

.shadow-guide__decision-card--safe {
  border-top: 3px solid var(--color-mist-400);
}

.shadow-guide__decision-card--danger {
  border-inline-start: 3px solid var(--color-danger-400);
}

.shadow-guide__guard-note {
  padding-block: var(--space-2) var(--space-5);
  border-block-end: 1px solid var(--color-border);
}

.shadow-guide__guard-note:first-of-type {
  border-inline-start: 3px solid var(--color-amber-400);
  padding-inline-start: var(--space-4);
}

.shadow-guide__danger-callout {
  width: 100%;
  max-width: 40rem;
  margin-block: var(--space-6) 0;
}

.shadow-guide__toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-5));
  align-self: start;
  width: 100%;
  max-width: 21.25rem;
  padding: var(--space-5);
  border-inline-start: 1px solid var(--color-border);
}

.shadow-guide__toc-toggle {
  display: none;
}

.shadow-guide__toc-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.shadow-guide__toc-list a {
  display: block;
  padding-block: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.shadow-guide__toc-list a[aria-current="true"] {
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--color-amber-400);
  color: var(--color-paper-100);
}

.shadow-guide__checklist,
.shadow-guide__routine {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.shadow-guide__check-item,
.shadow-guide__routine-item {
  display: grid;
  min-width: 0;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.shadow-guide__check-toggle {
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border-color: var(--color-amber-400);
  background: transparent;
  color: var(--color-amber-400);
}

.shadow-guide__check-toggle[aria-pressed="true"] {
  background: var(--color-mist-400);
  border-color: var(--color-mist-400);
  color: var(--color-ink-950);
}

.shadow-guide__check-item > div,
.shadow-guide__routine-item > div {
  min-width: 0;
}

.shadow-guide__closing-line {
  width: 100%;
  max-width: 32.5rem;
  margin-top: var(--space-6);
  color: var(--color-paper-100);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--leading-md);
}

.shadow-guide__tool-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-6);
}

.shadow-guide__tool-card a {
  margin-top: auto;
  padding-block: var(--space-2);
}

.shadow-guide__tool-links {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}

.shadow-guide__routine-item {
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}

.shadow-guide__routine-item > span {
  color: var(--color-amber-400);
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.shadow-guide__mistake-card > div {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.shadow-guide__mistake-label {
  margin-block: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--leading-xs);
  text-transform: uppercase;
}

.shadow-guide__mistake-label--danger { color: var(--color-danger-400); }
.shadow-guide__mistake-label--safe { color: var(--color-mist-400); }

.shadow-guide__scene-grid {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.shadow-guide__scene-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: left center;
  filter: brightness(0.83) saturate(0.82);
}

.shadow-guide__scene-copy {
  width: 100%;
  max-width: 29.375rem;
}

.shadow-guide__scene-copy article {
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.shadow-guide__scene-copy article:first-of-type {
  border-block-start: 0;
  padding-block-start: 0;
}

.shadow-guide__summary-layout {
  grid-template-columns: minmax(0, 47.5rem) minmax(0, 18.75rem);
  align-items: start;
}

.shadow-guide__summary-copy {
  width: 100%;
  max-width: 38.75rem;
}

.shadow-guide__summary-copy article {
  display: grid;
  min-width: 0;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.shadow-guide__summary-copy article > span {
  color: var(--color-amber-400);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
}

.shadow-guide__summary-copy article > div {
  min-width: 0;
}

.shadow-guide__related {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 18.75rem;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgb(214 168 79 / 4%);
}

.shadow-guide__related > * { margin: 0; }
.shadow-guide__related a { padding-block: var(--space-2); }

.shadow-guide__section--cta {
  padding-top: var(--space-7);
}

.shadow-guide__download {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-slate-800);
}

.shadow-guide__download-copy {
  flex: 1 1 auto;
  width: 100%;
  max-width: 31.25rem;
}

.shadow-guide__download-copy > :last-child { margin-bottom: 0; }

.shadow-guide__download-actions {
  display: flex;
  flex: 0 0 18.75rem;
  width: 18.75rem;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.shadow-guide__download-actions > a:last-child {
  align-self: flex-start;
  padding-block: var(--space-2);
}

@media (max-width: 74.99rem) {
  .shadow-guide__tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 63.99rem) {
  .shadow-guide__hero-grid,
  .shadow-guide__scene-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shadow-guide__hero-media { order: -1; }
  .shadow-guide__hero-copy { max-width: 42.5rem; }
  .shadow-guide__scene-media img { aspect-ratio: 16 / 10; }
  .shadow-guide__scene-copy { max-width: 42.5rem; }

  .shadow-guide__reader-layout,
  .shadow-guide__summary-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .shadow-guide__rail { display: none; }

  .shadow-guide__toc {
    position: static;
    order: -1;
    max-width: 47.5rem;
    padding: 0;
    border: 0;
  }

  .shadow-guide__toc-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    border-color: var(--color-border);
    background: var(--color-slate-800);
    color: var(--color-paper-100);
  }

  .shadow-guide__toc-list {
    display: none;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--color-slate-800);
  }

  .shadow-guide__toc-list.is-open { display: flex; }
  .shadow-guide__related { max-width: 100%; }
  .shadow-guide__decision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shadow-guide__decision-card--danger { grid-column: 1 / -1; }
}

@media (max-width: 61.24rem) {
  .shadow-guide__mistake-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 51.24rem) {
  .shadow-guide__download {
    flex-direction: column;
    align-items: flex-start;
  }

  .shadow-guide__download-actions {
    flex: 0 1 auto;
    width: 100%;
  }
}

@media (max-width: 44.99rem) {
  .shadow-guide__section { padding-block: var(--space-6); }
  .shadow-guide__hero { padding-block: var(--space-5) var(--space-6); }
  .shadow-guide__hero-grid,
  .shadow-guide__scene-grid,
  .shadow-guide__summary-layout { gap: var(--space-5); }
  .shadow-guide__hero-media img { aspect-ratio: auto; height: 15rem; }
  .shadow-guide__hero-actions { flex-direction: column; align-items: stretch; }
  .shadow-guide__hero-actions > .button { width: 100%; min-height: 2.75rem; }
  .shadow-guide__principle { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .shadow-guide__principle-number { font-size: var(--text-lg); }
  .shadow-guide__decision-grid,
  .shadow-guide__tool-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .shadow-guide__decision-card--danger { grid-column: auto; }
  .shadow-guide__check-item,
  .shadow-guide__routine-item,
  .shadow-guide__summary-copy article { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); }
  .shadow-guide__check-toggle { width: 2rem; min-width: 2rem; min-height: 2rem; padding: 0; }
  .shadow-guide__routine-item > span { font-size: var(--text-xl); }
  .shadow-guide__scene-media img { height: 15rem; aspect-ratio: auto; }
  .shadow-guide__download { padding: var(--space-5); gap: var(--space-5); }
  .shadow-guide__download-actions > .button { width: 100%; min-height: 2.75rem; }
}
