.gameplay-guide-page {
  background: var(--color-paper);
  color: var(--color-asphalt);
}

.gameplay-guide-page .container {
  max-width: 80rem;
}

.gg-masthead {
  padding-block: var(--space-9) var(--space-10);
}

.gg-masthead__grid,
.gg-exploration__grid,
.gg-driving__grid,
.gg-next-pages__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.gg-masthead__copy,
.gg-masthead__media,
.gg-scope-rail,
.gg-exploration__intro,
.gg-exploration__media,
.gg-exploration__copy,
.gg-driving__heading,
.gg-driving__content,
.gg-driving__media,
.gg-next-pages__intro,
.gg-editorial-index {
  min-inline-size: 0;
  inline-size: 100%;
}

.gg-masthead__copy h1 {
  max-inline-size: 25ch;
  font-size: clamp(2.625rem, 1.9rem + 4vw, 4rem);
  line-height: 0.98;
}

.gg-masthead__copy .lead {
  max-inline-size: 42rem;
  color: var(--color-mist);
}

.gg-masthead__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.gg-masthead__media img,
.gg-exploration__media img,
.gg-driving__media img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  object-fit: cover;
}

.gg-masthead__media img { object-position: 62% center; }

.gg-scope-rail {
  align-self: end;
}

.gg-scope-rail p:last-child { margin-block-end: 0; }

.gg-rail-label,
.gg-city-label,
.gg-caution-note__label,
.gg-next-route span,
.gg-related-strip__label,
.gg-index-entry__label {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-utility);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: var(--leading-utility);
  text-transform: uppercase;
}

.gg-rail-label { color: var(--color-amber); margin-block-end: var(--space-3); }

.gg-reading-section { padding-block: var(--space-9); }

.gg-margin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.gg-chapter-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: #596467;
  font-family: var(--font-heading);
  font-size: var(--text-utility);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: var(--leading-utility);
  text-transform: uppercase;
}

.gg-chapter-label span:first-child {
  color: var(--color-amber);
  font-size: var(--text-h3);
  letter-spacing: -0.04em;
}

.gg-reading-lane { min-inline-size: 0; }
.gg-reading-lane h2 { max-inline-size: 19ch; }
.gg-reading-lane h3 { max-inline-size: 28rem; }
.gg-reading-lane > p { max-inline-size: 46rem; }

.gg-question-callout {
  max-inline-size: 36rem;
}

.gg-question-callout ol {
  margin-block: var(--space-3);
}

.gg-rhythm { padding-block: var(--space-9); }
.gg-rhythm__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
.gg-rhythm__heading { min-inline-size: 0; inline-size: 100%; }
.gg-rhythm__heading h2 { max-inline-size: 25rem; }

.gg-step-list { display: flex; flex-direction: column; gap: var(--space-6); min-inline-size: 0; }
.gg-step { display: grid; grid-template-columns: 1fr; gap: var(--space-3); min-inline-size: 0; padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border-light); }
.gg-step__number { color: var(--color-amber); font-family: var(--font-heading); font-size: clamp(2rem, 2vw, 2.75rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.gg-step__text { min-inline-size: 0; inline-size: 100%; }
.gg-step__text h3 { margin-block-start: 0; max-inline-size: 28rem; }
.gg-step__text p { max-inline-size: 42rem; }
.gg-step__takeaway { max-inline-size: 30rem !important; }

.gg-exploration { padding-block: var(--space-9); }
.gg-exploration__intro h2 { max-inline-size: 22rem; }
.gg-exploration__media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.gg-exploration__media img { object-position: center; }
.gg-exploration__copy { color: var(--color-mist); }
.gg-exploration__copy > p { max-inline-size: 44rem; }
.gg-exploration__copy h3 { max-inline-size: 28rem; }
.gg-city-label { color: var(--color-city-blue); padding-inline-start: var(--space-3); border-inline-start: 3px solid var(--color-city-blue); margin-block-end: var(--space-4); }
.gg-exploration__list { max-inline-size: 38rem; }

.gg-related-strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  inline-size: 100%;
  margin-block-start: var(--space-6);
  padding: var(--space-4);
  border-inline-start: 3px solid var(--color-city-blue);
  border-block: 1px solid var(--color-border-dark);
  color: var(--color-mist);
  text-decoration: none;
}
.gg-related-strip:hover,
.gg-related-strip:focus-visible { border-inline-start-color: var(--color-amber); color: var(--color-amber); }
.gg-related-strip__label { color: var(--color-city-blue); }
.gg-related-strip__title { display: flex; justify-content: space-between; gap: var(--space-3); font-family: var(--font-heading); font-weight: 600; }
.gg-related-strip__title span { transition: transform var(--transition-fast); }
.gg-related-strip:hover .gg-related-strip__title span,
.gg-related-strip:focus-visible .gg-related-strip__title span { transform: translateX(4px); }

.gg-reset-section .rule-accent { margin-block-start: var(--space-5); }
.gg-diagnostic-list { max-inline-size: 32rem; margin-inline-start: var(--space-4); }
.gg-diagnostic-list li + li { margin-block-start: var(--space-2); }
.gg-caution-note { max-inline-size: 46rem; margin-block-start: var(--space-6); padding: var(--space-5); border-inline-start: 3px solid var(--color-signal-red); background: var(--color-paper-muted); }
.gg-caution-note__label { color: var(--color-signal-red); margin-block-end: var(--space-2); }
.gg-caution-note h3 { margin-block-start: 0; }
.gg-caution-note p:last-child { margin-block-end: 0; }

.gg-driving { padding-block: var(--space-9); }
.gg-driving__heading h2 { max-inline-size: 28rem; }
.gg-driving__content { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.gg-driving-panel,
.gg-route-copy { min-inline-size: 0; inline-size: 100%; }
.gg-driving-panel h3 { margin-block-start: 0; max-inline-size: 26rem; }
.gg-driving-panel p { max-inline-size: 32rem; }
.gg-route-copy h3 { max-inline-size: 28rem; }
.gg-route-copy > p { max-inline-size: 38rem; }
.gg-route-copy blockquote { max-inline-size: 30rem; }
.gg-driving__media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.gg-driving__media img { object-position: center; }
.gg-next-route { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); inline-size: 100%; padding-block: var(--space-4); border-block: 1px solid var(--color-border-dark); color: var(--color-mist); text-decoration: none; }
.gg-next-route span { grid-column: 1; color: var(--color-amber); }
.gg-next-route strong { grid-column: 1; font-family: var(--font-heading); font-weight: 600; }
.gg-next-route i { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--color-amber); font-family: var(--font-heading); font-size: 1.5rem; font-style: normal; transition: transform var(--transition-fast); }
.gg-next-route:hover i,
.gg-next-route:focus-visible i { transform: translateX(4px); }

.gg-next-pages { padding-block: var(--space-9); }
.gg-next-pages__intro h2 { max-inline-size: 25rem; }
.gg-next-pages__intro .lead { max-inline-size: 30rem; }
.gg-editorial-index { display: flex; flex-direction: column; border-block-start: 1px solid var(--color-border-light); }
.gg-index-entry { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3) var(--space-4); inline-size: 100%; padding-block: var(--space-5); border-block-end: 1px solid var(--color-border-light); color: var(--color-asphalt); text-decoration: none; }
.gg-index-entry__label { grid-column: 1; color: var(--color-amber); }
.gg-index-entry__content { grid-column: 1; display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }
.gg-index-entry__content strong { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: 600; line-height: var(--leading-heading); }
.gg-index-entry__content span { max-inline-size: 30rem; font-family: var(--font-body); line-height: var(--leading-body); }
.gg-index-entry i { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--color-amber); font-family: var(--font-heading); font-size: 1.5rem; font-style: normal; transition: transform var(--transition-fast); }
.gg-index-entry:hover,
.gg-index-entry:focus-visible { border-inline-start: 3px solid var(--color-amber); padding-inline-start: var(--space-3); color: var(--color-asphalt); }
.gg-index-entry:hover i,
.gg-index-entry:focus-visible i { transform: translateX(4px); }
.gg-index-entry--blue .gg-index-entry__label { color: var(--color-city-blue); }
.gg-index-entry--red .gg-index-entry__label { color: var(--color-signal-red); }

.gg-checklist-section { padding-block: var(--space-9); }
.gg-checklist { padding: var(--space-5); border-inline-start: 3px solid var(--color-amber); background: var(--color-amber-soft); color: var(--color-asphalt); }
.gg-checklist__heading { min-inline-size: 0; inline-size: 100%; }
.gg-checklist__heading h2 { max-inline-size: 32rem; margin-block-start: 0; }
.gg-checklist__items { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-block-start: var(--space-6); }
.gg-checklist__item { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); min-inline-size: 0; padding-block-start: var(--space-4); border-block-start: 1px solid rgba(32, 39, 42, 0.25); }
.gg-checklist__item > span { color: #9b6220; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; line-height: 1; }
.gg-checklist__item > div { min-inline-size: 0; }
.gg-checklist__item h3 { margin-block: 0 var(--space-2); font-size: var(--text-h4); }
.gg-checklist__item p { max-inline-size: 32rem; margin-block-end: 0; }

.gg-closing { padding-block: var(--space-9); }
.gg-closing__copy { min-inline-size: 0; inline-size: 100%; max-inline-size: 40rem; padding-block-start: var(--space-5); border-block-start: 3px solid var(--color-amber); }
.gg-closing__copy h2 { max-inline-size: 27rem; }
.gg-closing__copy p:last-child { max-inline-size: 40rem; margin-block-end: 0; color: var(--color-mist); font-size: var(--text-lead); font-weight: 500; line-height: var(--leading-lead); }

.gg-play-path { padding-block: var(--space-8); }
.gg-play-path__panel { display: grid; grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--color-border-dark); background: var(--color-ink-raised); color: var(--color-mist); }
.gg-play-path__copy,
.gg-play-path__action { min-inline-size: 0; inline-size: 100%; }
.gg-play-path__copy h2 { max-inline-size: 34rem; margin-block-start: 0; }
.gg-play-path__copy p { max-inline-size: 34rem; margin-block-end: 0; }
.gg-play-path__action { display: flex; align-items: flex-end; }
.gg-play-path__action .button { inline-size: 100%; }

@media (min-width: 48rem) {
  .gg-masthead { padding-block: var(--space-10); }
  .gg-masthead__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); }
  .gg-masthead__copy { grid-column: 1 / span 4; }
  .gg-masthead__media { grid-column: 5 / span 2; }
  .gg-scope-rail { grid-column: 1 / -1; }

  .gg-margin-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); }
  .gg-chapter-label { grid-column: 1 / -1; }
  .gg-reading-lane { grid-column: 1 / -1; }

  .gg-step { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-5); }

  .gg-exploration__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); }
  .gg-exploration__intro { grid-column: 1 / -1; }
  .gg-exploration__media { grid-column: 1 / span 3; }
  .gg-exploration__copy { grid-column: 4 / span 3; }

  .gg-driving__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); }
  .gg-driving__heading { grid-column: 1 / -1; }
  .gg-driving__content { grid-column: 1 / span 4; }
  .gg-driving__media { grid-column: 5 / span 2; align-self: start; }

  .gg-next-pages__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6); }
  .gg-next-pages__intro { grid-column: 1 / span 3; }
  .gg-editorial-index { grid-column: 4 / span 3; }

  .gg-checklist { padding: var(--space-6); }
  .gg-checklist__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .gg-checklist__item { min-inline-size: 0; }

  .gg-play-path__panel { padding: var(--space-6); }
  .gg-play-path__action .button { inline-size: auto; }
}

@media (min-width: 64rem) {
  .gg-masthead__grid,
  .gg-exploration__grid,
  .gg-driving__grid,
  .gg-next-pages__grid,
  .gg-margin-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); }

  .gg-masthead__copy { grid-column: 1 / span 7; }
  .gg-masthead__media { grid-column: 9 / span 4; align-self: end; }
  .gg-scope-rail { grid-column: 8 / span 5; }

  .gg-chapter-label { grid-column: 1 / span 2; display: flex; flex-direction: column; align-items: flex-start; }
  .gg-reading-lane { grid-column: 3 / span 7; }

  .gg-rhythm__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); }
  .gg-rhythm__heading { grid-column: 1 / span 2; }
  .gg-step-list { grid-column: 3 / span 7; }
  .gg-step { grid-template-columns: 5rem minmax(0, 1fr); }

  .gg-exploration__intro { grid-column: 1 / span 12; }
  .gg-exploration__media { grid-column: 1 / span 6; }
  .gg-exploration__copy { grid-column: 8 / span 5; }

  .gg-driving__heading { grid-column: 1 / span 8; }
  .gg-driving__content { grid-column: 1 / span 8; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .gg-driving-panel { grid-column: 1; }
  .gg-route-copy { grid-column: 2; }
  .gg-driving__media { grid-column: 9 / span 4; grid-row: 1 / span 2; }

  .gg-next-pages__intro { grid-column: 1 / span 4; }
  .gg-editorial-index { grid-column: 6 / span 7; }
  .gg-index-entry { grid-template-columns: minmax(5rem, 1fr) minmax(0, 5fr) 2rem; }
  .gg-index-entry__label { grid-column: 1; grid-row: 1; }
  .gg-index-entry__content { grid-column: 2; grid-row: 1; }
  .gg-index-entry i { grid-column: 3; grid-row: 1; }

  .gg-checklist { max-inline-size: 68rem; margin-inline: auto; }
  .gg-checklist__heading { max-inline-size: 50%; }

  .gg-closing__copy { margin-inline-start: calc((100% + var(--space-5)) / 12 * 2); }

  .gg-play-path__panel { grid-template-columns: repeat(8, minmax(0, 1fr)); max-inline-size: 66rem; margin-inline: auto; }
  .gg-play-path__copy { grid-column: 1 / span 5; }
  .gg-play-path__action { grid-column: 6 / span 3; justify-content: flex-start; }
}

@media (min-width: 80rem) {
  .gg-masthead__grid,
  .gg-exploration__grid,
  .gg-driving__grid,
  .gg-next-pages__grid,
  .gg-margin-grid,
  .gg-rhythm__inner { column-gap: var(--space-5); }
}

@media (max-width: 47.99rem) {
  .gg-masthead__copy h1 { font-size: clamp(2.625rem, 10vw, 3rem); }
  .gg-masthead__copy .lead { font-size: var(--text-lead); }
  .gg-masthead__media { order: 2; }
  .gg-scope-rail { order: 3; }
  .gg-exploration__intro { order: 1; }
  .gg-exploration__media { order: 2; aspect-ratio: 16 / 10; }
  .gg-exploration__copy { order: 3; }
  .gg-driving__heading { order: 1; }
  .gg-driving__content { order: 2; }
  .gg-driving__media { order: 3; aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .gg-related-strip__title span,
  .gg-next-route i,
  .gg-index-entry i { transition: none; }
}