.difficulty-page {
  background: var(--color-cream-50);
}

.difficulty-page__section {
  position: relative;
}

.difficulty-page__section:not(.difficulty-page__hero) {
  border-block-start: 1px solid var(--color-line-oak);
}

.difficulty-page__stage-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.difficulty-page__stage-row .technical-label {
  margin-block-end: 0;
}

.difficulty-page__hero {
  padding-block: var(--space-8);
}

.difficulty-page__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: start;
}

.difficulty-page__hero-copy {
  grid-column: 1;
  min-width: 0;
  max-width: 43.75rem;
}

.difficulty-page__hero-copy > :last-child,
.difficulty-page__analysis-copy > :last-child,
.difficulty-page__progression-copy > :last-child,
.difficulty-page__final-panel > :last-child {
  margin-block-end: 0;
}

.difficulty-page__hero-copy .lead {
  max-width: 40rem;
}

.difficulty-page__hero-media {
  grid-column: 2;
  min-width: 0;
  width: 100%;
  margin-block: var(--space-7) 0;
}

.difficulty-page__hero-media figcaption,
.difficulty-page__complexity-media figcaption,
.difficulty-page__progression-media figcaption {
  padding: var(--space-3);
  background: var(--color-cream-100);
}

.difficulty-page__brief {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-line-oak);
  background: var(--color-cream-100);
}

.difficulty-page__brief h2 {
  margin: 0;
  font-size: var(--text-h4);
}

.difficulty-page__brief-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.difficulty-page__brief-items > p {
  min-width: 0;
  margin: 0;
  padding-inline: var(--space-4);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.difficulty-page__brief-items > p:first-child {
  padding-inline-start: 0;
}

.difficulty-page__brief-items > p + p {
  border-inline-start: 1px solid var(--color-line-oak);
}

.difficulty-page__hero-action {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  min-width: 0;
}

.difficulty-page__hero-action .meta {
  max-width: 35rem;
  margin: 0;
}

.difficulty-page__play-button {
  min-height: 2.75rem;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
  text-underline-offset: 0.16em;
}

.difficulty-page__observation {
  padding-block: var(--space-8);
  background: var(--color-oak-100);
}

.difficulty-page__observation-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: start;
}

.difficulty-page__observation-title,
.difficulty-page__observation-deck,
.difficulty-page__rail {
  min-width: 0;
}

.difficulty-page__observation-title {
  grid-column: 1;
}

.difficulty-page__observation-title h2,
.difficulty-page__practice-heading h2,
.difficulty-page__audience-heading h2,
.difficulty-page__method-heading h2,
.difficulty-page__map-heading h2 {
  margin-block-end: 0;
}

.difficulty-page__observation-deck {
  grid-column: 2;
  max-width: 22.5rem;
  margin: 2.75rem 0 0;
}

.difficulty-page__rail {
  grid-column: 3;
  display: grid;
  gap: var(--space-5);
  position: relative;
}

.difficulty-page__rail::before {
  position: absolute;
  inset-block: 1rem;
  inset-inline-start: 1.1rem;
  width: 1px;
  background: var(--color-graphite-900);
  content: "";
  opacity: 0.42;
}

.difficulty-page__rail-item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
  position: relative;
}

.difficulty-page__rail-number,
.difficulty-page__tip-number,
.difficulty-page__factor-index {
  display: grid;
  place-items: center;
  min-width: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.difficulty-page__rail-number {
  z-index: 1;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-copper-600);
  background: var(--color-cream-50);
  color: var(--color-graphite-900);
  font-size: 0.75rem;
}

.difficulty-page__rail-item:hover .difficulty-page__rail-number {
  color: var(--color-copper-600);
}

.difficulty-page__rail-copy {
  min-width: 0;
  max-width: 34rem;
}

.difficulty-page__rail-copy h3 {
  margin-block-end: var(--space-3);
}

.difficulty-page__working-question,
.difficulty-page__metal-note {
  margin-block-end: 0;
  padding: var(--space-3) var(--space-4);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.difficulty-page__working-question {
  border-inline-start: 2px solid var(--color-petrol-700);
  background: var(--color-petrol-100);
}

.difficulty-page__metal-note {
  border: 1px solid var(--color-metal-300);
  background: color-mix(in srgb, var(--color-metal-300) 25%, var(--color-cream-50));
  color: var(--color-graphite-900);
}

.difficulty-page__complexity {
  padding-block: var(--space-8);
}

.difficulty-page__complexity-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: start;
}

.difficulty-page__analysis-copy {
  grid-column: 1;
  min-width: 0;
  max-width: 43.75rem;
}

.difficulty-page__analysis-copy .lead {
  max-width: 40rem;
}

.difficulty-page__complexity-media {
  grid-column: 3;
  min-width: 0;
  width: 100%;
  margin-block: var(--space-7) 0;
}

.difficulty-page__complexity-media:hover {
  border-color: var(--color-petrol-700);
}

.difficulty-page__question-panel {
  display: grid;
  gap: var(--space-3);
  max-width: 35rem;
  margin-block: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-petrol-700);
  background: var(--color-petrol-100);
}

.difficulty-page__question-panel h3,
.difficulty-page__question-panel p,
.difficulty-page__question-panel ol {
  margin: 0;
}

.difficulty-page__question-panel ol {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: 1.5rem;
}

.difficulty-page__editorial-note {
  max-width: 43.75rem;
  margin-block-end: 0;
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--color-graphite-900);
}

.difficulty-page__editorial-note .technical-label {
  margin-inline-end: var(--space-2);
}

.difficulty-page__map {
  padding-block: var(--space-8);
  background: var(--color-cream-100);
}

.difficulty-page__map-heading {
  max-width: 40.625rem;
}

.difficulty-page__map-heading .lead {
  margin-block-end: var(--space-6);
}

.difficulty-page__factor-board {
  display: grid;
  gap: var(--space-3);
  width: 100%;
}

.difficulty-page__factor-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
  gap: var(--space-4);
  align-items: stretch;
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-line-oak);
  background: var(--color-cream-50);
  transition: border-color var(--transition-fast);
}

.difficulty-page__factor-row:hover,
.difficulty-page__factor-row:focus-within {
  border-color: var(--color-petrol-700);
}

.difficulty-page__factor-index {
  align-self: start;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-copper-600);
  color: var(--color-copper-600);
  font-size: 0.75rem;
}

.difficulty-page__factor-name,
.difficulty-page__factor-description,
.difficulty-page__factor-help {
  min-width: 0;
}

.difficulty-page__factor-name h3,
.difficulty-page__factor-description p,
.difficulty-page__factor-help p {
  margin: 0;
}

.difficulty-page__factor-help {
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--color-line-oak);
}

.difficulty-page__factor-help > span {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--color-petrol-700);
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.difficulty-page__map-afterword {
  max-width: 42.5rem;
  margin-block: var(--space-5) 0;
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--color-copper-600);
}

.difficulty-page__progression {
  padding-block: var(--space-8);
  background: var(--color-petrol-100);
}

.difficulty-page__progression-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: start;
}

.difficulty-page__progression-copy {
  grid-column: 1;
  min-width: 0;
  max-width: 43.75rem;
}

.difficulty-page__progression-copy .lead {
  max-width: 40rem;
}

.difficulty-page__quote {
  display: grid;
  gap: var(--space-3);
  max-width: 35rem;
  margin-block: var(--space-5) 0;
  padding: var(--space-5);
  border: 1px solid var(--color-graphite-900);
  background: var(--color-graphite-900);
  color: var(--color-cream-50);
}

.difficulty-page__quote p,
.difficulty-page__quote cite {
  margin: 0;
}

.difficulty-page__quote p {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.4;
}

.difficulty-page__quote cite {
  color: var(--color-oak-100);
  font-size: var(--text-meta);
  font-style: normal;
}

.difficulty-page__progression-media {
  grid-column: 3;
  min-width: 0;
  width: 100%;
  margin-block: var(--space-7) 0;
}

.difficulty-page__progression-transition {
  grid-column: 1;
  min-width: 0;
  max-width: 43.75rem;
  margin-block-start: var(--space-5);
}

.difficulty-page__progression-transition h3 {
  margin-block-end: var(--space-3);
}

.difficulty-page__progression-transition p {
  margin-block-end: 0;
}

.difficulty-page__practice {
  padding-block: var(--space-8);
}

.difficulty-page__practice-heading {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
  gap: var(--space-5);
  align-items: start;
  margin-block-end: var(--space-6);
}

.difficulty-page__practice-heading .difficulty-page__stage-row,
.difficulty-page__practice-heading h2 {
  grid-column: 1;
}

.difficulty-page__practice-heading h2 {
  margin-block-start: 2.5rem;
}

.difficulty-page__practice-heading .lead {
  grid-column: 2;
  max-width: 30rem;
  margin: 2.5rem 0 0;
}

.difficulty-page__tips {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.difficulty-page__tip {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-line-oak);
  background: var(--color-oak-100);
}

.difficulty-page__tip:nth-child(1) { grid-column: 1; }
.difficulty-page__tip:nth-child(2) { grid-column: 2; }
.difficulty-page__tip:nth-child(3) { grid-column: 3; }

.difficulty-page__tip:hover {
  border-color: var(--color-petrol-700);
}

.difficulty-page__tip-number {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-copper-600);
  color: var(--color-copper-600);
  font-size: 0.75rem;
}

.difficulty-page__tip h3,
.difficulty-page__tip p {
  margin: 0;
}

.difficulty-page__audience {
  padding-block: var(--space-8);
  border-block-start: 1px solid var(--color-line-oak);
}

.difficulty-page__audience-heading {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: var(--space-5);
  align-items: start;
  margin-block-end: var(--space-6);
}

.difficulty-page__audience-heading .difficulty-page__stage-row,
.difficulty-page__audience-heading h2 { grid-column: 1; }
.difficulty-page__audience-heading h2 { margin-block-start: 2.5rem; }
.difficulty-page__audience-heading .lead { grid-column: 2; margin: 2.5rem 0 0; max-width: 30rem; }

.difficulty-page__audience-panels {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr);
  gap: var(--space-4);
  align-items: stretch;
}

.difficulty-page__audience-panel {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-line-oak);
}

.difficulty-page__audience-panel--fit { grid-column: 1; background: var(--color-cream-100); }
.difficulty-page__audience-panel--consider { grid-column: 3; background: var(--color-oak-100); }

.difficulty-page__audience-panel h3,
.difficulty-page__audience-panel ul { margin: 0; }

.difficulty-page__audience-panel ul {
  display: grid;
  gap: var(--space-3);
  padding-inline-start: 1.35rem;
}

.difficulty-page__audience-divider {
  display: grid;
  grid-column: 2;
  place-items: center;
  min-width: 0;
  color: var(--color-copper-600);
  font-family: var(--font-heading);
  font-size: 1.5rem;
}

.difficulty-page__audience-summary {
  display: grid;
  gap: var(--space-3);
  max-width: 47.5rem;
  margin-block: var(--space-5) 0;
  padding: var(--space-5);
  border: 1px solid var(--color-line-oak);
  background: var(--color-cream-100);
}

.difficulty-page__audience-summary strong,
.difficulty-page__audience-summary p { margin: 0; }

.difficulty-page__method {
  padding-block: var(--space-8);
  background: var(--color-oak-100);
}

.difficulty-page__method-heading {
  max-width: 47.5rem;
}

.difficulty-page__method-heading p {
  margin-block-end: var(--space-6);
}

.difficulty-page__method-modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.difficulty-page__method-module {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-line-oak);
}

.difficulty-page__method-module--facts { background: var(--color-petrol-100); border-color: var(--color-petrol-700); }
.difficulty-page__method-module--editorial { background: var(--color-cream-100); }

.difficulty-page__method-module .technical-label,
.difficulty-page__method-module h3,
.difficulty-page__method-module p { margin: 0; }

.difficulty-page__final {
  padding-block: var(--space-8);
  background: var(--color-graphite-900);
  color: var(--color-cream-50);
}

.difficulty-page__final h2,
.difficulty-page__final .technical-label { color: var(--color-cream-50); }

.difficulty-page__final .stage-marker {
  background: var(--color-graphite-900);
}

.difficulty-page__final-panel {
  display: grid;
  gap: var(--space-4);
  width: min(100%, 50rem);
  margin-inline: auto;
  padding: var(--space-6);
  border: 1px solid var(--color-oak-100);
  background: var(--color-graphite-900);
}

.difficulty-page__final-panel h2,
.difficulty-page__final-panel p { margin: 0; }

.difficulty-page__final-panel > p {
  max-width: 42.5rem;
}

.difficulty-page__final-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
  margin-block-start: var(--space-2);
}

.difficulty-page__final-action > * { min-width: 0; }
.difficulty-page__final-action .meta { max-width: 28.75rem; margin: 0; color: var(--color-oak-100); }

@media (min-width: 42.5rem) and (max-width: 63.99rem) {
  .difficulty-page__hero-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 2fr); gap: var(--space-5); }
  .difficulty-page__hero-media { margin-block-start: var(--space-6); }
  .difficulty-page__brief-items { grid-template-columns: 1fr; gap: var(--space-3); }
  .difficulty-page__brief-items > p { padding-inline: 0; }
  .difficulty-page__brief-items > p + p { padding-block-start: var(--space-3); border-inline-start: 0; border-block-start: 1px solid var(--color-line-oak); }
  .difficulty-page__observation-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .difficulty-page__observation-title { grid-column: 1 / -1; }
  .difficulty-page__observation-deck { grid-column: 1 / -1; margin: 0; max-width: 38.75rem; }
  .difficulty-page__rail { grid-column: 1 / -1; max-width: 45rem; }
  .difficulty-page__complexity-grid, .difficulty-page__progression-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 2fr); gap: var(--space-5); }
  .difficulty-page__analysis-copy, .difficulty-page__progression-copy { grid-column: 1; }
  .difficulty-page__complexity-media, .difficulty-page__progression-media { grid-column: 2; margin-block-start: var(--space-6); }
  .difficulty-page__progression-transition { grid-column: 1 / -1; max-width: 43.75rem; }
  .difficulty-page__factor-row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .difficulty-page__factor-name { grid-column: 2; }
  .difficulty-page__factor-description { grid-column: 2; }
  .difficulty-page__factor-help { grid-column: 1 / -1; padding: var(--space-3) 0 0; border-inline-start: 0; border-block-start: 1px solid var(--color-line-oak); }
  .difficulty-page__practice-heading { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .difficulty-page__practice-heading .difficulty-page__stage-row, .difficulty-page__practice-heading h2 { grid-column: 1 / -1; }
  .difficulty-page__practice-heading h2 { margin-block-start: 0; }
  .difficulty-page__practice-heading .lead { grid-column: 1 / -1; margin: 0; }
  .difficulty-page__tips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .difficulty-page__tip:nth-child(1) { grid-column: 1 / span 3; }
  .difficulty-page__tip:nth-child(2) { grid-column: 4 / span 3; }
  .difficulty-page__tip:nth-child(3) { grid-column: 1 / -1; }
  .difficulty-page__audience-heading { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .difficulty-page__audience-heading .difficulty-page__stage-row, .difficulty-page__audience-heading h2, .difficulty-page__audience-heading .lead { grid-column: 1 / -1; margin: 0; }
  .difficulty-page__audience-panels { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .difficulty-page__audience-panel--fit { grid-column: 1 / span 3; }
  .difficulty-page__audience-panel--consider { grid-column: 4 / span 3; }
  .difficulty-page__audience-divider { display: none; }
}

@media (max-width: 42.49rem) {
  .difficulty-page__hero, .difficulty-page__observation, .difficulty-page__complexity, .difficulty-page__map, .difficulty-page__progression, .difficulty-page__practice, .difficulty-page__audience, .difficulty-page__method, .difficulty-page__final { padding-block: var(--space-7); }
  .difficulty-page__hero-grid, .difficulty-page__observation-grid, .difficulty-page__complexity-grid, .difficulty-page__progression-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .difficulty-page__hero-copy, .difficulty-page__hero-media, .difficulty-page__observation-title, .difficulty-page__observation-deck, .difficulty-page__rail, .difficulty-page__analysis-copy, .difficulty-page__complexity-media, .difficulty-page__progression-copy, .difficulty-page__progression-media, .difficulty-page__progression-transition { grid-column: 1; }
  .difficulty-page__hero-media, .difficulty-page__complexity-media, .difficulty-page__progression-media { margin: 0; }
  .difficulty-page__brief { padding: var(--space-4); }
  .difficulty-page__brief-items { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .difficulty-page__brief-items > p { padding-inline: 0; }
  .difficulty-page__brief-items > p + p { padding-block-start: var(--space-3); border-inline-start: 0; border-block-start: 1px solid var(--color-line-oak); }
  .difficulty-page__hero-action { justify-items: stretch; }
  .difficulty-page__hero-action .button { width: 100%; }
  .difficulty-page__observation-deck { margin: 0; }
  .difficulty-page__rail { gap: var(--space-5); }
  .difficulty-page__rail::before { inset-inline-start: 0.875rem; opacity: 0.26; }
  .difficulty-page__rail-item { grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3); }
  .difficulty-page__rail-number { width: 1.75rem; height: 1.75rem; font-size: 0.6875rem; }
  .difficulty-page__question-panel, .difficulty-page__quote, .difficulty-page__tip, .difficulty-page__audience-panel, .difficulty-page__audience-summary, .difficulty-page__method-module { padding: var(--space-4); }
  .difficulty-page__factor-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
  .difficulty-page__factor-index, .difficulty-page__factor-name, .difficulty-page__factor-description, .difficulty-page__factor-help { grid-column: 1; }
  .difficulty-page__factor-help { padding: var(--space-3) 0 0; border-inline-start: 0; border-block-start: 1px solid var(--color-line-oak); }
  .difficulty-page__practice-heading, .difficulty-page__audience-heading { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .difficulty-page__practice-heading .difficulty-page__stage-row, .difficulty-page__practice-heading h2, .difficulty-page__practice-heading .lead, .difficulty-page__audience-heading .difficulty-page__stage-row, .difficulty-page__audience-heading h2, .difficulty-page__audience-heading .lead { grid-column: 1; margin: 0; }
  .difficulty-page__tips, .difficulty-page__audience-panels, .difficulty-page__method-modules { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .difficulty-page__tip:nth-child(1), .difficulty-page__tip:nth-child(2), .difficulty-page__tip:nth-child(3), .difficulty-page__audience-panel--fit, .difficulty-page__audience-panel--consider { grid-column: 1; }
  .difficulty-page__audience-divider { display: none; }
  .difficulty-page__final-panel { width: 100%; padding: var(--space-5); }
  .difficulty-page__final-action { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .difficulty-page__final-action .button { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .difficulty-page__section { transition: opacity 180ms ease, transform 180ms ease; }
  .difficulty-page__section:not(.difficulty-page__hero):not(.difficulty-page__section--seen) { opacity: 0.96; transform: translateY(6px); }
  .difficulty-page__section--seen { opacity: 1; transform: translateY(0); }
}