.story-gameplay-page {
  overflow: hidden;
}

.story-gameplay-page .section,
.story-gameplay-page .section--large {
  position: relative;
}

.story-gameplay-page .eyebrow {
  margin-block-end: 0;
}

.sg-hero {
  padding-block: var(--space-10) var(--space-9);
}

.sg-hero__layout {
  display: grid;
  grid-template-columns: minmax(31.25rem, 54fr) minmax(22.5rem, 40fr);
  gap: 6%;
  align-items: start;
}

.sg-hero__layout > * { min-width: 0; width: 100%; }

.sg-hero__sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7);
}

.sg-hero__sheet h1,
.sg-hero__lead { max-width: 38rem; margin: 0; }
.sg-hero__lead { font-size: var(--text-lead); line-height: var(--leading-lead); }
.sg-hero__independence { max-width: 30rem; margin: 0; color: var(--color-muted-ink); font-size: var(--text-caption); line-height: var(--leading-caption); }
.sg-hero__action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.sg-hero__action > * { min-width: 0; margin: 0; }
.sg-hero__action .caption { max-width: 30rem; }
.sg-hero__media { align-self: end; margin: 0 0 0.75rem; padding: var(--space-3); }
.sg-hero__media img { width: 100%; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.sg-loop__intro { max-width: 40rem; }
.sg-loop__intro p { margin-block-end: 0; }
.sg-loop__worktable { display: grid; grid-template-columns: minmax(0, 17fr) minmax(0, 17fr) minmax(4rem, 10fr) minmax(0, 23fr) minmax(0, 27fr); gap: var(--space-4); align-items: stretch; margin-block-start: var(--space-7); padding: var(--space-5); border: var(--border-default); border-radius: var(--radius-sheet); background-image: linear-gradient(rgba(48,45,56,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(48,45,56,.10) 1px, transparent 1px); background-size: 1.5rem 1.5rem; }
.sg-loop__worktable > * { min-width: 0; width: 100%; }
.sg-loop__tile, .sg-loop__finish-note { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: var(--border-default); border-radius: var(--radius-panel); }
.sg-loop__tile > *, .sg-loop__finish-note > * { margin: 0; min-width: 0; }
.sg-loop__tile h3, .sg-loop__finish-note h3 { font-size: 1.35rem; }
.sg-loop__tile p, .sg-loop__finish-note p { font-size: var(--text-caption); line-height: var(--leading-caption); }
.sg-loop__tile--source { background: var(--color-lavender); }
.sg-loop__tile--second { background: color-mix(in srgb, var(--color-lavender) 72%, var(--color-paper-bright)); }
.sg-loop__tile--result { background: var(--color-sage); }
.sg-loop__finish-note { background: var(--color-dusty-pink); }
.sg-loop__connector { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--color-ink); font-weight: 700; }
.sg-loop__connector i { width: 1px; height: 3.5rem; background: var(--color-ink); }
.sg-loop__caption { max-width: 42rem; margin-block: var(--space-5) 0; }

.sg-story-context__layout { display: grid; grid-template-columns: minmax(34rem, 68fr) minmax(17.5rem, 28fr); gap: 2.5rem; align-items: start; }
.sg-story-context__layout > * { min-width: 0; width: 100%; }
.sg-story-context__article { padding: var(--space-7); }
.sg-story-context__copy { max-width: 44rem; }
.sg-story-context__copy > :last-child { margin-block-end: 0; }
.sg-story-context__article h2 { margin-block-end: var(--space-6); }
.sg-story-context__article h3 { margin-block-start: var(--space-6); }
.sg-story-context__article h3:first-child { margin-block-start: 0; }
.sg-story-context__article blockquote { max-width: 34rem; margin-block: var(--space-6) var(--space-4); background: var(--color-dusty-pink); }
.sg-story-context__quote-note { max-width: 40rem; }
.sg-story-context__rail { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) 0 0 var(--space-5); border-left: 1px dashed var(--color-line); }
.sg-story-context__rail > * { margin: 0; min-width: 0; }
.sg-story-context__rail ol { display: flex; flex-direction: column; gap: var(--space-3); padding: 0; list-style: none; }
.sg-story-context__rail li { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.sg-story-context__rail li span { display: inline-grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border: var(--border-default); border-radius: var(--radius-pill); background: var(--color-paper-bright); font-size: var(--text-micro); font-weight: 700; }

.sg-merging__layout { display: grid; grid-template-columns: minmax(22.5rem, 43fr) minmax(22.5rem, 51fr); gap: 6%; align-items: start; margin-block-start: var(--space-6); }
.sg-merging__layout > * { min-width: 0; width: 100%; }
.sg-merging__lead-panel { position: relative; max-width: 38rem; background: var(--color-paper-bright); overflow: hidden; }
.sg-merging__lead-panel::after { position: absolute; inset: auto -2rem -2rem auto; width: 10rem; height: 10rem; border: 1px solid rgba(48,45,56,.16); background-image: linear-gradient(90deg, rgba(48,45,56,.12) 1px, transparent 1px), linear-gradient(rgba(48,45,56,.12) 1px, transparent 1px); background-size: 1rem 1rem; content: ""; transform: rotate(8deg); }
.sg-merging__lead-panel > * { position: relative; z-index: 1; }
.sg-merging__notes { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.sg-merging__notes > * { min-width: 0; width: 100%; }
.sg-merging__note { max-width: 27rem; }
.sg-merging__source { max-width: 27rem; border-top: 4px solid var(--color-terracotta); }
.sg-merging__source p { margin-block-end: var(--space-3); }

.sg-restoration__layout { display: grid; grid-template-columns: minmax(22.5rem, 48fr) minmax(34rem, 44fr); gap: 8%; align-items: start; }
.sg-restoration__layout > * { min-width: 0; width: 100%; }
.sg-restoration__media { margin: 0; padding: var(--space-3); }
.sg-restoration__media img { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sg-restoration__reading { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.sg-restoration__reading > * { min-width: 0; width: 100%; }
.sg-restoration__main { max-width: 40rem; }
.sg-restoration__callout { max-width: 26rem; padding-left: var(--space-5); border-left: 4px solid var(--color-sage); }
.sg-restoration__callout h3 { font-size: var(--text-h4); }
.sg-restoration__check { max-width: 28rem; }
.sg-restoration__check ul { margin-block-end: var(--space-3); }

.sg-design__layout { display: grid; grid-template-columns: minmax(0, 52fr) minmax(21.25rem, 40fr); gap: 8%; align-items: start; }
.sg-design__layout > * { min-width: 0; width: 100%; }
.sg-design__reading { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-7); }
.sg-design__reading > * { min-width: 0; margin: 0; }
.sg-design__reading h2 { max-width: 38rem; }
.sg-design__lead { max-width: 38rem; }
.sg-design__relationship { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); max-width: 38rem; font-size: var(--text-caption); font-weight: 700; }
.sg-design__relationship span { min-width: 0; padding: var(--space-2) var(--space-3); border: var(--border-default); background: var(--color-paper); }
.sg-design__relationship i { width: 1.5rem; height: 1px; flex: 0 0 1.5rem; background: var(--color-ink); }
.sg-design__checkpoint { max-width: 28rem; }
.sg-design__board { position: relative; margin: 0; padding: var(--space-3); transform: rotate(-1deg); }
.sg-design__board img { width: 100%; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sg-design__swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-block-start: calc(var(--space-5) * -1); padding-inline: var(--space-3); position: relative; z-index: 1; }
.sg-design__swatches > * { min-width: 0; padding: var(--space-3); border: var(--border-default); background: var(--color-paper-bright); font-size: var(--text-micro); line-height: var(--leading-micro); }
.sg-design__swatches > :nth-child(1) { border-top: 4px solid var(--color-lavender); }
.sg-design__swatches > :nth-child(2) { border-top: 4px solid var(--color-sage); }
.sg-design__swatches > :nth-child(3) { border-top: 4px solid var(--color-dusty-pink); }
.sg-design__swatches b { display: block; margin-block-end: var(--space-1); }

.sg-session__layout { display: grid; grid-template-columns: minmax(0, 70fr) minmax(12rem, 25fr); gap: 5%; }
.sg-session__layout > * { min-width: 0; width: 100%; }
.sg-session__content h2 { max-width: 42rem; }
.sg-session__intro { max-width: 40rem; }
.sg-session__strip { display: flex; flex-direction: column; gap: var(--space-3); width: min(100%, 34rem); margin-block: var(--space-5); padding: var(--space-5); }
.sg-session__strip > * { min-width: 0; margin: 0; }
.sg-session__strip--lavender { border-left: 4px solid var(--color-lavender); }
.sg-session__strip--sage { margin-left: 2.5rem; border-left: 4px solid var(--color-sage); }
.sg-session__strip--pink { margin-left: 1rem; border-left: 4px solid var(--color-dusty-pink); }
.sg-session__synthesis { max-width: 32rem; margin-block-start: var(--space-6); border-bottom: 1px solid var(--color-terracotta); }
.sg-session__margin { display: flex; flex-direction: column; gap: var(--space-7); align-items: center; padding-top: var(--space-7); color: var(--color-muted-ink); font-family: var(--font-heading); font-size: var(--text-h3); }
.sg-session__margin span { display: block; padding-bottom: var(--space-2); border-bottom: 1px dashed var(--color-line); }

.sg-boundary__panels { display: grid; grid-template-columns: repeat(2, minmax(22.5rem, 1fr)); gap: var(--space-6); align-items: stretch; margin-block-start: var(--space-6); }
.sg-boundary__panels > * { min-width: 0; width: 100%; }
.sg-boundary__confirmed, .sg-boundary__listing { display: flex; flex-direction: column; gap: var(--space-4); }
.sg-boundary__confirmed > *, .sg-boundary__listing > * { min-width: 0; margin: 0; }
.sg-boundary__confirmed ul { padding-inline-start: 1.25rem; }
.sg-boundary__listing { border-top: 4px solid var(--color-terracotta); }
.sg-boundary__caption { max-width: 42rem; margin-block: var(--space-5) 0; }

.sg-routes__intro { max-width: 40rem; }
.sg-routes__intro p { margin-block-end: 0; }
.sg-routes__cards { display: grid; grid-template-columns: minmax(15.625rem, 31fr) minmax(15.625rem, 36fr) minmax(15.625rem, 31fr); gap: var(--space-5); align-items: start; margin-block-start: var(--space-6); }
.sg-routes__cards > * { min-width: 0; width: 100%; }
.sg-routes__card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.sg-routes__card > * { min-width: 0; margin: 0; }
.sg-routes__card--guide { transform: translateY(-0.75rem); }
.sg-routes__card--review { border-top: 4px solid var(--color-terracotta); }
.sg-routes__card--guide { border-top: 4px solid var(--color-lavender); }
.sg-routes__card--design { border-top: 4px solid var(--color-sage); }
.sg-routes__card a { align-self: flex-start; font-weight: 700; }

.sg-final { padding-block: var(--space-10); }
.sg-final__sheet { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); width: min(64%, 42.5rem); margin-inline: auto; border-left: 4px solid var(--color-terracotta); box-shadow: var(--shadow-sheet); }
.sg-final__sheet > * { min-width: 0; margin: 0; }
.sg-final__sheet h2, .sg-final__sheet > p:not(.sg-final__note) { max-width: 38rem; }
.sg-final__note { max-width: 30rem; }

@media (max-width: 899px) {
  .sg-hero__layout, .sg-story-context__layout, .sg-merging__layout, .sg-restoration__layout, .sg-design__layout, .sg-session__layout, .sg-routes__cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .sg-hero__sheet, .sg-hero__media, .sg-story-context__article, .sg-restoration__media, .sg-design__reading, .sg-design__board, .sg-session__content, .sg-routes__card { width: 100%; max-width: none; }
  .sg-hero__media { margin: 0; }
  .sg-loop__worktable { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-loop__tile--source { grid-column: span 1; }
  .sg-loop__connector { grid-column: 1 / -1; flex-direction: row; min-height: 1.75rem; }
  .sg-loop__connector i { width: 3.5rem; height: 1px; }
  .sg-loop__tile--result, .sg-loop__finish-note { grid-column: 1 / -1; }
  .sg-story-context__rail { flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--space-4) 0 0; border-top: 1px dashed var(--color-line); border-left: 0; }
  .sg-story-context__rail ol { flex: 1 1 26rem; flex-direction: row; flex-wrap: wrap; margin: 0; }
  .sg-story-context__rail > .caption { flex: 1 1 16rem; }
  .sg-merging__lead-panel, .sg-merging__note, .sg-merging__source { max-width: none; }
  .sg-restoration__layout { display: flex; flex-direction: column; }
  .sg-restoration__reading { order: -1; }
  .sg-restoration__main, .sg-restoration__callout, .sg-restoration__check { max-width: none; }
  .sg-design__board { transform: none; }
  .sg-session__margin { display: none; }
  .sg-session__strip, .sg-session__strip--sage, .sg-session__strip--pink { width: 100%; max-width: none; margin-inline: 0; }
  .sg-routes__card--guide { transform: none; }
}

@media (max-width: 799px) {
  .sg-boundary__panels { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 719px) {
  .sg-hero { padding-block-start: var(--space-8); }
  .sg-hero__sheet, .sg-story-context__article, .sg-design__reading { padding: var(--space-5); }
  .sg-hero__sheet h1 { font-size: clamp(2.4rem, 10vw, 2.7rem); }
  .sg-hero__action { width: 100%; }
  .sg-hero__action .button { width: 100%; }
  .sg-loop__worktable { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .sg-loop__tile--source, .sg-loop__tile--result, .sg-loop__finish-note, .sg-loop__connector { grid-column: 1; }
  .sg-loop__connector { flex-direction: column; min-height: 3rem; }
  .sg-loop__connector i { width: 1px; height: 1.5rem; }
  .sg-story-context__article blockquote { margin-inline: 0; padding: var(--space-4); }
  .sg-story-context__rail { display: block; }
  .sg-story-context__rail ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .sg-story-context__rail li { flex-direction: column; align-items: flex-start; gap: var(--space-2); font-size: var(--text-caption); }
  .sg-design__relationship { align-items: stretch; flex-direction: column; }
  .sg-design__relationship i { width: 1px; height: 1rem; margin-inline-start: var(--space-4); }
  .sg-design__swatches { grid-template-columns: minmax(0, 1fr); margin-block-start: var(--space-3); padding-inline: 0; }
  .sg-final { padding-block: var(--space-8); }
  .sg-final__sheet { width: 100%; padding: var(--space-5); }
  .sg-final__sheet .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .story-gameplay-page .interactive-sheet,
  .story-gameplay-page .sg-design__board,
  .story-gameplay-page .sg-routes__card--guide { transform: none; }
}