/* Alignment corrections. Artwork, colours and existing interactions are retained. */
:root { --landing-content: 81.25rem; --landing-header: 4.875rem; }
html { scroll-padding-top: calc(var(--landing-header) + var(--space-4)); }
header {
  height: var(--landing-header);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  padding-inline: var(--layout-gutter);
  gap: var(--space-6);
}
header > a:first-child { justify-self: start; }
header .header-cta { justify-self: end; margin: 0; }
.top-nav { min-width: 0; gap: var(--space-1); }
.top-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: var(--space-2) var(--space-3); }
.hero {
  display: grid;
  place-items: center;
  min-height: max(45rem, 100svh);
  height: auto;
  max-height: none;
  padding: calc(var(--landing-header) + var(--space-8)) var(--layout-gutter) var(--space-16);
}
.hero .hero-copy {
  position: relative;
  inset: auto;
  width: min(100%, 42rem);
  max-width: none;
  justify-self: center;
  transform: none !important;
}
.hero .hero-actions { display: grid; justify-items: center; margin-top: var(--space-8); }
.hero .gold-button { min-width: 0; max-width: 100%; }
.hero-shade {
  background: radial-gradient(ellipse at center, #06122370, transparent 72%), linear-gradient(0deg, #071426, transparent 24%);
}
.section {
  width: min(100%, var(--landing-content));
  max-width: var(--landing-content);
  margin-inline: auto;
  padding: var(--layout-section-pad) var(--layout-gutter);
}
.section-heading { margin-bottom: var(--space-12); }
.section-heading h2 { transform-origin: center; }
.intro-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-12); }
.intro-layout > *, .class-stage > *, .faq > *, .news-grid > *, .team-features > * { min-width: 0; }
.intro-features article { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.feature-symbol { display: grid; place-items: center; width: 100%; }
.class-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); min-height: 0; }
.class-art { justify-self: center; }
.class-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.class-tabs button { flex: 0 1 10rem; min-width: 0; }
.world { width: min(100%, var(--landing-content)); }
.exploration, .explore-scene { width: 100%; min-width: 0; }
.scene-dialogue { inset-inline: var(--space-6); width: auto; max-width: none; display: grid; grid-template-columns: clamp(5rem, 15vw, 8.5rem) minmax(0, 1fr); gap: var(--space-4); align-items: end; }
.scene-speaker { width: 100%; min-width: 0; }
.scene-speech { min-width: 0; width: 100%; }
.dialogue-actions { flex-wrap: wrap; gap: var(--space-3); }
.together { padding: var(--layout-section-pad) var(--layout-gutter); }
.together-content { width: min(100%, calc(var(--landing-content) - 2 * var(--layout-gutter))); margin-inline: auto; }
.team-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding: var(--space-6); }
.news-card, .news-card:nth-child(n) { transform: none; display: flex; flex-direction: column; }
.news-card > div { display: flex; flex-direction: column; flex: 1; gap: var(--space-3); padding: var(--space-6); }
.news-card h3 { min-height: 2.9em; }
.news-card p { min-height: 0; }
.news-card .text-link { margin-top: auto; padding-top: var(--space-3); }
.faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-12); }
.community { padding: var(--layout-section-pad) var(--layout-gutter); }
.community-overlay { margin-inline: auto; max-width: var(--landing-content); }
.community-links, .footer-socials { justify-content: center; gap: var(--space-4); }
footer { justify-content: center; flex-wrap: wrap; padding: var(--space-8) var(--layout-gutter); gap: var(--space-6); text-align: center; }
footer button { margin: 0; }
dialog { max-height: calc(100svh - 2 * var(--layout-gutter)); overflow: auto; padding: var(--space-12) var(--space-8) var(--space-8); }
dialog h2 { padding-inline: var(--space-6); text-align: center; }
@media (max-width: 1199px) {
  :root { --landing-header: 7rem; }
  header { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: var(--space-1); padding-block: var(--space-2); }
  .top-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; width: 100%; }
  .header-cta { grid-column: 2; grid-row: 1; }
  .rail { display: none; }
  .rail.open { display: block; }
  .rail-toggle { display: inline-flex; align-items: center; gap: var(--space-2); position: fixed; z-index: 31; bottom: var(--space-4); right: var(--space-4); border: 1px solid var(--gold); border-radius: 2rem; padding: var(--space-3) var(--space-4); background: #10213bf2; color: var(--gold); }
  .rail.open { top: auto; bottom: 5rem; transform: none; max-height: calc(100svh - var(--landing-header) - 7rem); }
  .intro-layout, .class-stage, .faq { grid-template-columns: minmax(0, 1fr); }
  .class-stage { gap: var(--space-8); }
  .class-info { min-height: 0; text-align: center; }
  .class-info .elements, .class-info .paths { justify-content: center; }
  .class-art { width: min(100%, 24rem); }
  .faq > div:first-child { position: relative; min-height: 10rem; padding-right: 7rem; }
  .faq .guide-character { position: absolute; right: 0; top: 0; height: 9rem; margin: 0; }
  .news-grid { grid-template-columns: minmax(0, 1fr); }
  .news-card h3 { min-height: 0; }
}
@media (max-width: 699px) {
  :root { --landing-header: 9rem; }
  header { gap: var(--space-1) var(--space-3); }
  .top-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: var(--space-1); }
  .top-nav a { padding: var(--space-1); font-size: .75rem; line-height: 1.3; min-height: 2rem; }
  .top-nav a:last-child { grid-column: 3; }
  .hero .hero-copy { width: 100%; }
  .hero-logo { max-width: 16rem; }
  .hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .hero-sub { font-size: 1rem; }
  .hero .gold-button { width: min(100%, 22rem); padding-inline: var(--space-4); font-size: 1.5rem; gap: var(--space-3); }
  .team-features { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .scene-dialogue { inset-inline: var(--space-3); grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-2); }
  .scene-speech { padding: var(--space-4); }
  .speaker-heading { padding-right: var(--space-6); flex-wrap: wrap; }
  .scene-markers button small { max-width: 6rem; white-space: normal; }
  .news-grid { padding: var(--space-4); }
  .news-card > div { padding: var(--space-4); }
  .community .gold-button { min-width: 0; width: min(100%, 22rem); }
  footer { padding-bottom: 6rem; }
  dialog { padding-inline: var(--space-4); }
}
header { align-items: center; }
@media (max-width: 699px) {
  .top-nav { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .top-nav a { grid-column: span 2; }
  .top-nav a:nth-child(5) { grid-column: 2 / span 2; }
  .top-nav a:nth-child(6) { grid-column: 4 / span 2; }
  .top-nav a:nth-child(7) { grid-column: 6 / span 2; }
}
/* A hotspot only exists when its painted object is inside the cropped scene. */
.scene-anchor[hidden] { display: none; }
.together-content { text-align: center; }
.together-content h2 { margin-inline: auto; }
.team-features article { text-align: center; }
/* Let each feature occupy its grid track instead of retaining the old fixed card width. */
.team-features article { width: 100%; max-width: none; justify-self: stretch; }