/* Three cinematic treatments for the Legend's claims, loadout, and boundaries. */
.legend-page .legend-results,
.legend-page .legend-features,
.legend-page .legend-safety {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-content: center;
  align-items: center;
  column-gap: clamp(35px, 5vw, 110px);
  padding-left: max(90px, 8vw);
  padding-right: max(90px, 8vw);
}

/* Claims: a signal readout over the existing infrastructure scene. */
.legend-results-intro h2 {
  margin: 20px 0 0;
  font: 800 clamp(46px, 5.6vw, 105px)/.83 var(--display);
  letter-spacing: -.022em;
}
.legend-results-intro h2 em { color: var(--blue); font-style: normal; }
.legend-results-counter {
  display: flex;
  align-items: end;
  gap: 13px;
  margin-top: clamp(24px, 5vh, 55px);
  color: rgba(127, 200, 255, .18);
  -webkit-text-stroke: 2px rgba(127, 200, 255, .72);
  font: 800 clamp(105px, 14vw, 240px)/.72 var(--display);
}
.legend-results-counter span {
  max-width: 110px;
  margin-bottom: 7px;
  color: #9acdf1;
  -webkit-text-stroke: 0;
  font: 600 10px/1.4 var(--mono);
  letter-spacing: .1em;
}
.legend-results-readout { border-left: 1px solid rgba(127, 200, 255, .52); padding-left: clamp(20px, 2.3vw, 45px); }
.legend-results-readout ol { margin: 0; padding: 0; list-style: none; }
.legend-results-readout li { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 12px; align-items: start; padding: clamp(9px, 1.35vh, 18px) 0; border-top: 1px solid rgba(157, 204, 247, .25); }
.legend-results-readout li:last-child { border-bottom: 1px solid rgba(157, 204, 247, .25); }
.legend-results-readout li > span { color: var(--copper); font: 600 10px/1.8 var(--mono); letter-spacing: .06em; }
.legend-results-readout li p { margin: 0; color: #ecf6ff; font-size: clamp(15px, 1.12vw, 21px); line-height: 1.3; font-weight: 600; }
.legend-results-readout .lore-footnote { margin: 15px 0 0; font-size: 10px; }

/* Quotes: notes pinned at different heights, not arranged as a neat row. */
.legend-page .legend-voice-grid { margin-top: 10px; padding-bottom: 145px; }
.legend-page .legend-voice-grid blockquote:first-child { transform: rotate(-5deg) translate(-8px, 64px); }
.legend-page .legend-voice-grid blockquote:nth-child(2) { transform: rotate(3deg) translate(7px, -8px); }
.legend-page .legend-voice-grid blockquote:nth-child(3) { transform: rotate(-4deg) translate(13px, 111px); }

/* Features: a character loadout rather than another grid of claims. */
.legend-feature-hero { position: relative; }
.legend-feature-hero h2 { margin: 18px 0 22px; font: 800 clamp(65px, 7.5vw, 132px)/.8 var(--display); }
.legend-feature-emblem { position: relative; display: grid; place-items: center; width: min(100%, clamp(160px, 24vh, 280px)); aspect-ratio: 1; margin: 8px 0 20px; border: 1px solid rgba(143, 203, 255, .36); border-radius: 50%; box-shadow: inset 0 0 44px rgba(32, 136, 227, .14), 0 0 55px rgba(31, 121, 201, .11); }
.legend-feature-emblem::before, .legend-feature-emblem::after { content: ""; position: absolute; border: 1px solid rgba(143, 203, 255, .27); border-radius: 50%; }
.legend-feature-emblem::before { inset: 13%; }
.legend-feature-emblem::after { inset: 28%; border-color: rgba(143, 203, 255, .5); }
.legend-feature-emblem span { z-index: 1; color: #d8eeff; font: 900 clamp(92px, 10vw, 170px)/.7 var(--display); letter-spacing: -.1em; text-shadow: 0 0 32px rgba(91, 182, 255, .56); }
.legend-feature-caption { color: #a6c5db; font: 600 9px var(--mono); letter-spacing: .12em; }
.legend-page .legend-feature-list { display: grid; grid-template-columns: 1fr; gap: 7px; margin: 0; padding: 0; list-style: none; }
.legend-page .legend-feature-list li { position: relative; min-height: 66px; padding: clamp(8px, 1.3vh, 16px) 18px; border: 1px solid rgba(137, 198, 246, .24); border-left: 3px solid var(--blue); background: linear-gradient(90deg, rgba(15, 49, 82, .9), rgba(8, 25, 43, .42)); backdrop-filter: blur(9px); }
.legend-page .legend-feature-list li:nth-child(even) { margin-left: clamp(10px, 2vw, 30px); border-left-color: var(--copper); }
.legend-feature-list span { display: block; margin-bottom: 4px; color: var(--blue); font: 600 9px var(--mono); letter-spacing: .11em; }
.legend-feature-list li:nth-child(even) span { color: #ffbf95; }
.legend-feature-list p { margin: 0; color: #edf6ff; font-size: clamp(15px, 1.2vw, 21px); line-height: 1.25; font-weight: 600; }

/* Safety: an operator boundary scene with theatrical copper typography. */
.legend-page .legend-safety { border-top: 0; border-bottom: 0; }
.legend-safety::before { content: ""; position: absolute; top: 86px; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(110deg, var(--copper) 0 22px, transparent 22px 36px); opacity: .75; }
.legend-safety .lore-kicker { color: #ffc39b; }
.legend-safety-hero h2 { margin: 21px 0 24px; font: 800 clamp(62px, 7.1vw, 122px)/.8 var(--display); letter-spacing: -.022em; }
.legend-safety-hero h2 em { color: var(--copper); font-style: normal; }
.legend-safety-hero > p:last-child { display: inline-block; margin: 0; padding-top: 12px; border-top: 1px solid rgba(255, 174, 126, .7); color: #ffd1b3; font: 600 10px/1.4 var(--mono); letter-spacing: .11em; }
.legend-safety-rules { border-left: 1px solid rgba(255, 169, 111, .55); padding-left: clamp(20px, 2.7vw, 52px); }
.legend-safety-rules p { margin: 0; padding: clamp(16px, 2.4vh, 28px) 0; border-top: 1px solid rgba(255, 195, 155, .31); color: #fff0e5; font-size: clamp(17px, 1.35vw, 24px); line-height: 1.34; font-weight: 600; }
.legend-safety-rules p:last-child { border-bottom: 1px solid rgba(255, 195, 155, .31); }
.legend-safety-rules span { display: block; margin-bottom: 8px; color: #ffba8d; font: 600 10px var(--mono); letter-spacing: .1em; }
.legend-safety-rules .legend-safety-consequence { color: #fbd1b9; font-size: clamp(15px, 1.15vw, 21px); font-weight: 500; }

@media (max-width: 1000px) {
  .legend-page .legend-results, .legend-page .legend-features, .legend-page .legend-safety { column-gap: 28px; }
  .legend-feature-hero h2 { font-size: clamp(60px, 7.5vw, 90px); }
}

@media (max-width: 700px) {
  .legend-page .legend-results, .legend-page .legend-features, .legend-page .legend-safety { display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding-left: 24px; padding-right: 24px; }
  .legend-results-intro h2 { margin-top: 12px; font-size: clamp(47px, 11vw, 70px); }
  .legend-results-counter { display: none; }
  .legend-results-readout { margin-top: 20px; padding-left: 16px; }
  .legend-results-readout li { grid-template-columns: 27px 1fr; gap: 7px; padding: 8px 0; }
  .legend-results-readout li p { font-size: clamp(12px, 3.5vw, 16px); line-height: 1.25; }
  .legend-results-readout li > span { font-size: 8px; }
  .legend-results-readout .lore-footnote { margin-top: 8px; font-size: 8px; }
  .legend-page .legend-voice-grid { margin-top: 12px; padding-bottom: 28px; }
  .legend-page .legend-voice-grid blockquote:first-child { transform: rotate(-4deg) translate(-4px, 18px); }
  .legend-page .legend-voice-grid blockquote:nth-child(2) { transform: rotate(3deg) translate(5px, -8px); }
  .legend-page .legend-voice-grid blockquote:nth-child(3) { transform: rotate(-3deg) translate(11px, 8px); }
  .legend-feature-hero h2 { margin: 14px 0 22px; font-size: clamp(57px, 14vw, 85px); }
  .legend-feature-emblem, .legend-feature-caption { display: none; }
  .legend-page .legend-feature-list { gap: 5px; }
  .legend-page .legend-feature-list li { min-height: 0; padding: 8px 12px; }
  .legend-feature-list span { font-size: 8px; }
  .legend-feature-list p { font-size: clamp(13px, 3.6vw, 17px); line-height: 1.2; }
  .legend-safety-hero h2 { margin: 15px 0; font-size: clamp(52px, 13vw, 80px); }
  .legend-safety-hero > p:last-child { font-size: 8px; }
  .legend-safety-rules { margin-top: 24px; padding-left: 16px; }
  .legend-safety-rules p { padding: 12px 0; font-size: clamp(14px, 3.7vw, 18px); }
  .legend-safety-rules span { margin-bottom: 5px; font-size: 8px; }
  .legend-safety-rules .legend-safety-consequence { font-size: clamp(13px, 3.4vw, 16px); }
}

@media (max-height: 700px) {
  .legend-page .legend-voice-grid { padding-bottom: 55px; }
  .legend-page .legend-voice-grid blockquote:first-child { transform: rotate(-4deg) translate(-6px, 28px); }
  .legend-page .legend-voice-grid blockquote:nth-child(2) { transform: rotate(3deg) translate(5px, 0); }
  .legend-page .legend-voice-grid blockquote:nth-child(3) { transform: rotate(-3deg) translate(9px, 52px); }
  .legend-results-counter { margin-top: 18px; font-size: 100px; }
  .legend-results-readout li { padding-top: 7px; padding-bottom: 7px; }
  .legend-feature-emblem { width: min(100%, 150px); }
  .legend-page .legend-feature-list li { min-height: 0; padding-top: 7px; padding-bottom: 7px; }
  .legend-safety-rules p { padding-top: 12px; padding-bottom: 12px; }
}

@media (max-width: 700px) and (max-height: 700px) {
  .legend-page .legend-results, .legend-page .legend-features, .legend-page .legend-safety { padding-top: 76px; padding-bottom: 72px; }
  .legend-results-intro h2 { font-size: 45px; }
  .legend-results-readout { margin-top: 12px; }
  .legend-results-readout li p { font-size: 12px; }
  .legend-feature-hero h2 { font-size: 54px; margin-bottom: 13px; }
  .legend-feature-list p { font-size: 13px; }
  .legend-safety-hero h2 { font-size: 48px; }
  .legend-safety-rules { margin-top: 16px; }
}