/*
 * UNICA SPACE FORCE homepage - revision 0.11 shared-scene composition.
 *
 * The authored SVG and the homepage content now occupy one uniformly scaled
 * reference scene. Their room geometry cannot drift when the viewport aspect
 * ratio changes; surplus viewport area remains identity blue.
 */

.home-page {
  --home-field: var(--identity-blue);
  --home-fg: var(--identity-white);
  --home-payoff-colour: #fefefe;
  --home-statement-colour: #cbced0;
  --home-line-colour: #08142b;
  --home-edge: clamp(1rem, 3vw, 4rem);

  /* Wide reference scene: 80 x 54 design units. */
  --home-reference-inline: 80;
  --home-reference-block: 54;
  --home-max-inline: 108rem;
  --home-available-inline: calc(100dvw - (2 * var(--home-edge)));
  --home-height-fit-inline: calc(100dvh * 1.4814814815);
  --home-used-inline: min(
    var(--home-available-inline),
    var(--home-max-inline),
    var(--home-height-fit-inline)
  );
  --home-stage-block: calc(var(--home-used-inline) * 0.675);

  margin: 0;
  background: var(--home-field);
  color: var(--home-fg);
}

.home-page .skip-link {
  background: var(--identity-white);
  color: var(--identity-blue);
}

.home-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-block-size: max(100dvh, var(--home-stage-block));
  background: var(--home-field);
  color: var(--home-fg);
}

.home-boundary {
  position: relative;
  inline-size: var(--home-used-inline);
  block-size: var(--home-stage-block);
  margin-inline: var(--home-edge) 0;
  container-type: inline-size;
}

.home-stage {
  --home-unit: 1.25cqi;
  --home-logo-width: calc(var(--home-unit) * 25);
  --home-payoff-size: calc(var(--home-unit) * 3.65);
  --home-support-size: calc(var(--home-unit) * 1.45);
  --home-gateway-size: calc(var(--home-unit) * 1.85);
  --home-language-size: calc(var(--home-unit) * 1.4);
  --home-payoff-support-gap: calc(var(--home-unit) * 2.2);
  --home-paragraph-gap: calc(var(--home-unit) * 1.3);
  --home-gateway-gap: calc(var(--home-unit) * 0.8);
  --home-gateway-pad-block: calc(var(--home-unit) * 0.45);
  --home-gateway-pad-inline: calc(var(--home-unit) * 0.8);
  --home-language-width: calc(var(--home-unit) * 4.4);
  --home-language-height: calc(var(--home-unit) * 3.2);
  --home-language-top: calc(var(--home-unit) * 0.6);
  --home-university-width: calc(var(--home-unit) * 16);

  position: relative;
  inline-size: 100%;
  block-size: 100%;
}

.home-line-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

.home-line-field img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--home-unit) * -4);
  display: block;
  inline-size: calc(var(--home-unit) * 128);
  max-inline-size: none;
  block-size: calc(var(--home-unit) * 54);
  opacity: 0.9;
}

.home-top-controls {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--home-language-top);
  inset-inline: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.home-university,
.home-language { pointer-events: auto; }

.home-university {
  display: flex;
  inline-size: max(var(--home-university-width), 8rem);
  min-block-size: max(var(--home-language-height), 2.75rem);
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
}

.home-university img {
  display: block;
  inline-size: 100%;
  max-block-size: max(var(--home-language-height), 2.75rem);
  object-fit: contain;
  object-position: left center;
}

.home-language {
  display: flex;
  inline-size: max(var(--home-language-width), 2.75rem);
  min-block-size: max(var(--home-language-height), 2.75rem);
  align-items: center;
  justify-content: center;
  border: 3px solid var(--home-line-colour);
  background: var(--home-field);
  color: var(--identity-white);
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--home-language-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  text-decoration: none;
}

.home-language[href]:hover { background: rgba(255, 255, 255, 0.1); }
.home-language:not([href]) { cursor: default; }

.home-opening {
  position: absolute;
  z-index: 1;
  inset: 0;
}

/* The room is formed by pattern coordinates x=8..40, y=6..36. */
.home-logo {
  position: absolute;
  inset-inline-start: calc(var(--home-unit) * 4);
  inset-block-start: calc(var(--home-unit) * 6);
  inline-size: calc(var(--home-unit) * 32);
  block-size: calc(var(--home-unit) * 30);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-logo img {
  display: block;
  inline-size: var(--home-logo-width);
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 656.16 / 653.37;
}

/* The room is formed by pattern coordinates x=44..84, y=6..39. */
.home-statement-module {
  position: absolute;
  inset-inline-start: calc(var(--home-unit) * 40);
  inset-block-start: calc(var(--home-unit) * 6);
  inline-size: calc(var(--home-unit) * 40);
  block-size: calc(var(--home-unit) * 33);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block-start: calc(var(--home-unit) * 1.05);
  padding-block-end: calc(var(--home-unit) * 0.35);
  padding-inline: calc(var(--home-unit) * 2);
  text-align: left;
}

.home-payoff {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  color: var(--home-payoff-colour);
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--home-payoff-size);
  font-weight: 400;
  line-height: 0.99;
  letter-spacing: normal;
}

.home-payoff-line {
  display: block;
  white-space: nowrap;
}

.home-payoff .payoff-dot {
  color: var(--identity-red);
  font-weight: 700;
}

.home-supporting-statement {
  display: grid;
  gap: var(--home-paragraph-gap);
  inline-size: 100%;
  margin-block-start: var(--home-payoff-support-gap);
  color: var(--home-statement-colour);
  font-family: "IBM Plex Sans", "Inter", Arial, sans-serif;
  font-size: var(--home-support-size);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
}

.home-supporting-statement p { margin: 0; }
.home-supporting-statement strong { font-weight: 600; }

.home-gateways {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  inset-block-start: calc(var(--home-unit) * 47.8);
  block-size: calc(var(--home-unit) * 4.1);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--home-gateway-gap);
}

.home-gateway {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  justify-content: flex-start;
  padding: var(--home-gateway-pad-block) var(--home-gateway-pad-inline);
  border: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--home-gateway-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
}

.home-gateway:hover { filter: brightness(0.94); }
.home-gateway-actions { background: var(--identity-white); color: var(--identity-blue); }
.home-gateway-thoughts { background: var(--identity-silver); color: var(--identity-blue); }
.home-gateway-manifesto { background: var(--identity-red); color: var(--identity-white); }
.home-gateway-about { background: var(--identity-blue); color: var(--identity-white); }

.home-page .site-footer {
  flex-direction: row;
  align-items: center;
  gap: clamp(0.5rem, 3vw, 2rem);
  padding-inline: clamp(0.75rem, 4vw, var(--page));
  background: var(--identity-blue);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.56rem, 2.25vw, 0.72rem);
}

.home-page .site-footer p {
  white-space: nowrap;
}

/*
 * Portrait scene: 40 x 86 design units. The authored pattern extends four
 * units beyond both horizontal scene edges, while the content and line rooms
 * remain registered to the same uniformly scaled coordinate system.
 */
@media (max-width: 50rem) and (orientation: portrait) {
  .home-page {
    --home-edge: 1rem;
    --home-reference-inline: 40;
    --home-reference-block: 86;
    --home-available-inline: calc(100dvw - (2 * var(--home-edge)));
    --home-height-fit-inline: calc(100dvh * 0.4651162791);
    --home-used-inline: min(var(--home-available-inline), var(--home-height-fit-inline));
    --home-stage-block: calc(var(--home-used-inline) * 2.15);
  }

  .home-boundary { margin-inline: auto; }

  .home-stage {
    --home-unit: 2.5cqi;
    --home-gateway-gap: calc(var(--home-unit) * 0.4);
    --home-gateway-pad-inline: calc(var(--home-unit) * 0.2);
  }

  .home-line-field img {
    inset-inline-start: calc(var(--home-unit) * -4);
    inline-size: calc(var(--home-unit) * 48);
    block-size: calc(var(--home-unit) * 86);
  }

  /* Pattern room x=6..42, y=6..35; scene coordinates subtract four. */
  .home-logo {
    inset-inline-start: calc(var(--home-unit) * 2);
    inset-block-start: calc(var(--home-unit) * 6);
    inline-size: calc(var(--home-unit) * 36);
    block-size: calc(var(--home-unit) * 29);
  }

  /* Pattern room x=4..44, y=38..76. */
  .home-statement-module {
    inset-inline-start: 0;
    inset-block-start: calc(var(--home-unit) * 38);
    inline-size: calc(var(--home-unit) * 40);
    block-size: calc(var(--home-unit) * 38);
    padding-block-start: calc(var(--home-unit) * 2.1);
    padding-block-end: calc(var(--home-unit) * 0.1);
    padding-inline: calc(var(--home-unit) * 2);
  }

  .home-gateways {
    inset-block-start: calc(var(--home-unit) * 79.8);
    block-size: calc(var(--home-unit) * 4.1);
  }
}

/* Accessibility and exceptional reflow: preserve reachability over scene fit. */
@media (max-width: 19.5rem), (max-height: 34rem) {
  .home-line-field { display: none; }

  .home-cover,
  .home-boundary,
  .home-stage {
    min-block-size: auto;
    block-size: auto;
  }

  .home-boundary {
    inline-size: calc(100dvw - 2rem);
    margin-inline: auto;
    padding-block-end: 1rem;
  }

  .home-stage {
    display: grid;
    gap: 1.5rem;
  }

  .home-top-controls,
  .home-opening,
  .home-logo,
  .home-statement-module,
  .home-gateways {
    position: static;
    inline-size: auto;
    block-size: auto;
    translate: none;
  }

  .home-top-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .home-university { min-inline-size: 8rem; }
  .home-opening { display: grid; gap: 1.5rem; }
  .home-logo { min-block-size: 12rem; }
  .home-statement-module { padding: 0; }
  .home-payoff-line { white-space: normal; }
  .home-gateways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-gateway { min-block-size: 2.75rem; white-space: normal; }
}

@media (forced-colors: active) {
  .home-line-field { display: none; }
}

@media print {
  .home-line-field { display: none; }

  .home-cover,
  .home-boundary,
  .home-stage { min-block-size: auto; block-size: auto; }

  .home-boundary,
  .home-stage,
  .home-opening { display: block; }

  .home-top-controls,
  .home-opening,
  .home-logo,
  .home-statement-module,
  .home-gateways {
    position: static;
    inline-size: auto;
    block-size: auto;
    translate: none;
  }

  .home-top-controls { display: flex; justify-content: space-between; }
  .home-opening,
  .home-gateways { margin-block-start: 1rem; }
}