.progression-page { overflow-wrap: anywhere; }
.progression-page .container > * { min-width: 0; }
.progression-hero { padding-block: var(--space-8); }
.progression-hero__frame { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); align-items: center; min-height: 32rem; }
.progression-hero__media { grid-column: 5 / 13; grid-row: 1; width: 100%; height: 31rem; min-width: 0; border-color: rgb(243 233 208 / 30%); }
.progression-hero__media img { object-position: 72% center; }
.progression-hero__panel { grid-column: 1 / 7; grid-row: 1; z-index: 1; width: 100%; max-width: 37.5rem; min-width: 0; background: rgb(11 23 34 / 94%); padding: var(--space-7); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.progression-hero__panel > * { margin: 0; min-width: 0; }
.progression-hero__panel .lead { max-width: 35rem; }
.progression-hero__related { max-width: 35rem; font-size: 0.96rem; line-height: 1.55; }
.progression-profiles__intro { width: 58.333%; max-width: 42.5rem; min-width: 0; }
.progression-profiles__intro .rule-rune { margin-block: 0 var(--space-5); }
.progression-profiles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.progression-profile { min-width: 0; border: 1px solid var(--color-border-light); background: var(--color-worn-parchment); padding: var(--space-6); transition: border-color var(--transition-fast), transform var(--transition-fast); }
.progression-profile:hover { border-color: var(--color-weathered-timber); transform: translateY(-2px); }
.progression-profile--scout { background: var(--color-storm-grey); color: var(--color-mist-white); border-color: rgb(243 233 208 / 35%); }
.progression-profile--scout .meta { color: var(--color-aged-paper); }
.progression-profile--hunter { border-inline-start: 3px solid var(--color-ember-red); }
.progression-profile dl { margin: 0; display: grid; gap: var(--space-2); }
.progression-profile dt { margin-top: var(--space-2); font-size: var(--text-meta); letter-spacing: .09em; text-transform: uppercase; }
.progression-profile dd { margin: 0; }
.progression-upgrades__intro { width: 50%; max-width: 38.75rem; min-width: 0; }
.progression-upgrades__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--space-5); margin-top: var(--space-6); align-items: stretch; }
.progression-advice { min-width: 0; padding: var(--space-6); border: 1px solid var(--color-border-light); background: var(--color-worn-parchment); color: var(--color-midnight-navy); }
.progression-advice--boat { background: var(--color-storm-grey); color: var(--color-mist-white); border-color: rgb(243 233 208 / 35%); }
.progression-advice__decision { margin-bottom: 0; border-inline-start: 3px solid var(--color-weathered-timber); padding-inline-start: var(--space-3); font-weight: 600; }
.progression-route__container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.progression-route__intro { grid-column: 1 / 8; width: 100%; max-width: 42.5rem; min-width: 0; }
.progression-route__timeline { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 0; min-width: 0; }
.progression-step { grid-column: 1 / 10; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr); column-gap: var(--space-5); min-width: 0; border-top: 3px double var(--color-border-light); padding-block: var(--space-5); }
.progression-step__number { min-width: 0; color: var(--color-weathered-timber); font-family: var(--font-heading); font-size: 2rem; line-height: 1; }
.progression-step__content { min-width: 0; max-width: 40rem; border-inline-start: 1px solid var(--color-weathered-timber); padding-inline-start: var(--space-4); }
.progression-step__check { margin-bottom: 0; color: var(--color-link); font-weight: 600; }
.progression-step--tinted .progression-step__content { background: var(--color-aged-paper); padding: var(--space-4); border-inline-start: 0; }
.progression-step--danger .progression-step__number { color: var(--color-ember-red); }
.progression-route__annotation { grid-column: 10 / 13; grid-row: 2 / 4; align-self: center; min-width: 0; border-inline-start: 1px solid var(--color-weathered-timber); padding: var(--space-4); color: var(--color-text-muted); font-family: var(--font-heading); }
.progression-route__annotation span { display: block; margin-bottom: var(--space-2); color: var(--color-weathered-timber); font-family: var(--font-body); font-size: var(--text-meta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.progression-route__annotation p { margin: 0; }
.progression-map__intro { width: 58.333%; max-width: 38.75rem; min-width: 0; }
.progression-map__legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; color: var(--color-aged-paper); font-size: var(--text-meta); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.progression-map__legend > li { min-width: 0; border-inline-start: 2px solid var(--color-cold-sea-blue); padding-inline-start: var(--space-2); }
.progression-map__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(19.375rem, 1fr); gap: var(--space-5); min-width: 0; align-items: stretch; }
.progression-map__visual { position: relative; width: 100%; min-width: 0; height: 32.5rem; border-color: rgb(243 233 208 / 35%); }
.progression-map__visual img { object-position: center; }
.progression-map__marker { position: absolute; z-index: 1; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; border-color: var(--color-cold-sea-blue); background: var(--color-dark-iron); color: var(--color-mist-white); padding: .25rem; font-size: .75rem; }
.progression-map__marker[aria-pressed="true"] { background: var(--color-cold-sea-blue); color: var(--color-midnight-navy); }
.progression-map__marker--start { inset: 58% auto auto 18%; }
.progression-map__marker--route { inset: 37% auto auto 50%; }
.progression-map__marker--limit { inset: 21% 13% auto auto; border-color: var(--color-ember-red); }
.progression-map__notes { min-width: 0; background: var(--color-worn-parchment); color: var(--color-midnight-navy); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.progression-map__note { min-width: 0; border-bottom: 1px solid var(--color-border-light); padding-bottom: var(--space-4); transition: background-color var(--transition-fast), outline-color var(--transition-fast); }
.progression-map__note:last-child { border-bottom: 0; padding-bottom: 0; }
.progression-map__note > :last-child { margin-bottom: 0; }
.progression-map__note.is-highlighted { outline: 2px solid var(--color-cold-sea-blue); outline-offset: 4px; background: var(--color-aged-paper); }
.progression-map__note--danger .meta { color: var(--color-ember-red); }
.progression-preparation__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.progression-preparation__method { grid-column: 7 / 12; grid-row: 1; width: 100%; max-width: 35rem; min-width: 0; }
.progression-preparation__media { grid-column: 1 / 6; grid-row: 1; width: 100%; min-width: 0; aspect-ratio: 3 / 2; border-color: rgb(243 233 208 / 35%); }
.progression-preparation__media img { object-position: center; }
.progression-checklist { display: grid; gap: var(--space-4); margin-bottom: 0; padding: 0; }
.progression-checklist > li { position: relative; min-width: 0; padding-inline-start: var(--space-5); }
.progression-checklist > li::before { position: absolute; inset: .6em auto auto 0; width: .8rem; height: .35rem; border-bottom: 2px solid var(--color-cold-sea-blue); border-radius: 0 0 60% 60%; content: ""; }
.progression-kraken-note { grid-column: 3 / 11; grid-row: 2; min-width: 0; border: 1px solid var(--color-ember-red); border-inline-start-width: 3px; background: var(--color-dark-iron); color: var(--color-mist-white); padding: var(--space-6); }
.progression-kraken-note > :last-child { margin-bottom: 0; }
.progression-kraken-note .meta { color: var(--color-aged-paper); }
.progression-detours__intro { width: 58.333%; max-width: 42.5rem; min-width: 0; }
.progression-detours__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.progression-detour { min-width: 0; border: 1px solid var(--color-border-light); background: var(--color-worn-parchment); color: var(--color-midnight-navy); padding: var(--space-5); }
.progression-detour--storm { background: var(--color-abyss-blue); color: var(--color-mist-white); border-color: rgb(243 233 208 / 35%); }
.progression-detour--storm .meta, .progression-detour--iron .meta { color: var(--color-aged-paper); }
.progression-detour--iron { border-color: var(--color-ember-red); border-top-width: 3px; background: var(--color-dark-iron); color: var(--color-mist-white); }
.progression-faq__intro { width: 66.667%; max-width: 45rem; min-width: 0; margin-inline: auto; }
.progression-faq__list { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 52.5rem; min-width: 0; margin: var(--space-6) auto 0; }
.progression-faq__item { min-width: 0; border: 1px solid var(--color-border-light); }
.progression-faq__item h3 { margin: 0; }
.progression-faq__button { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; gap: var(--space-3); width: 100%; min-width: 0; min-height: 3.25rem; border: 0; border-radius: 0; background: var(--color-dark-iron); color: var(--color-mist-white); padding: var(--space-4); text-align: left; }
.progression-faq__button:hover { background: var(--color-weathered-timber); border: 0; }
.progression-faq__symbol { align-self: center; justify-self: end; font-size: 1.5rem; line-height: 1; }
.progression-faq__answer { min-width: 0; background: var(--color-aged-paper); padding: var(--space-5); }
.progression-faq__answer > :last-child { margin-bottom: 0; }
.progression-next__frame { position: relative; }
.progression-next__panel { width: 100%; max-width: 52.5rem; min-width: 0; border: 1px solid var(--color-weathered-timber); background: var(--color-dark-iron); padding: var(--space-7); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.progression-next__panel > * { margin: 0; min-width: 0; }
.progression-next__panel p { max-width: 35rem; }
.progression-next__links { display: flex; flex-wrap: wrap; gap: var(--space-4); min-width: 0; }
.progression-next__links > a { min-width: 0; }
.progression-editorial-note__content { width: 100%; max-width: 45rem; min-width: 0; margin-inline: auto; }
.progression-editorial-note__content p:last-child { margin-bottom: 0; }
@media (max-width: 61.24rem) {
  .progression-hero { padding-block: var(--space-7); }
  .progression-hero__frame { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .progression-hero__media { grid-column: 1; grid-row: 1; height: min(56vw, 32rem); }
  .progression-hero__panel { grid-column: 1; grid-row: 2; max-width: none; padding: var(--space-6); }
  .progression-upgrades__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progression-advice--gear { grid-column: 1 / 3; }
  .progression-route__annotation { display: none; }
  .progression-map__layout { grid-template-columns: 1fr; }
  .progression-map__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .progression-map__note { border-bottom: 0; border-inline-end: 1px solid var(--color-border-light); padding: 0 var(--space-3); }
  .progression-map__note:first-child { padding-inline-start: 0; }
  .progression-map__note:last-child { border-inline-end: 0; padding-inline-end: 0; }
  .progression-preparation__grid { grid-template-columns: 1fr; }
  .progression-preparation__method { grid-column: 1; grid-row: 1; max-width: 35rem; }
  .progression-preparation__media { grid-column: 1; grid-row: 2; max-width: 42rem; }
  .progression-kraken-note { grid-column: 1; grid-row: 3; }
  .progression-detours__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 56.24rem) {
  .progression-profiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progression-profile--hunter { grid-column: 1 / 3; }
  .progression-step { grid-column: 1 / 13; }
}
@media (max-width: 43.74rem) {
  .progression-hero__media { height: 60vw; min-height: 14rem; }
  .progression-hero__panel { padding: var(--space-5); }
  .progression-hero__panel h1 { font-size: clamp(2.45rem, 11vw, 3rem); }
  .progression-profiles__intro, .progression-upgrades__intro, .progression-route__intro, .progression-map__intro, .progression-detours__intro, .progression-faq__intro { width: 100%; max-width: none; }
  .progression-profiles__grid, .progression-upgrades__grid, .progression-detours__grid { grid-template-columns: 1fr; }
  .progression-profile--hunter, .progression-advice--gear { grid-column: 1; }
  .progression-profile, .progression-advice { padding: var(--space-5); }
  .progression-route__container { display: block; }
  .progression-route__timeline { display: flex; flex-direction: column; margin-top: var(--space-6); }
  .progression-step { display: block; width: 100%; padding-block: var(--space-5); }
  .progression-step__number { margin-bottom: var(--space-3); font-size: 1.65rem; }
  .progression-step__content { max-width: none; border-inline-start: 2px solid var(--color-weathered-timber); }
  .progression-step--tinted .progression-step__content { padding: var(--space-4); }
  .progression-map__visual { height: clamp(16.25rem, 70vw, 20rem); }
  .progression-map__notes { grid-template-columns: 1fr; padding: var(--space-4); }
  .progression-map__note, .progression-map__note:first-child, .progression-map__note:last-child { border-inline-end: 0; border-bottom: 1px solid var(--color-border-light); padding: 0 0 var(--space-4); }
  .progression-map__note:last-child { border-bottom: 0; padding-bottom: 0; }
  .progression-preparation__method, .progression-preparation__media { max-width: none; }
  .progression-kraken-note { padding: var(--space-5); }
  .progression-faq__list { margin-top: var(--space-5); }
  .progression-faq__button { min-height: 3.25rem; padding: var(--space-3) var(--space-4); }
  .progression-faq__answer { padding: var(--space-4); }
  .progression-next__panel { padding: var(--space-5); }
  .progression-next__links { display: grid; grid-template-columns: 1fr; width: 100%; }
  .progression-next__links > a { display: flex; align-items: center; min-height: 2.75rem; }
}