/* Gravitational Radiation — landing page.
   Every colour, type size, weight, spacing step, duration and easing comes
   from tokens.css. This file only arranges them. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--gr-bg);
  color: var(--gr-fg);
  font-family: var(--gr-font);
  font-size: var(--gr-body-size);
  font-weight: var(--gr-body-weight);
  line-height: var(--gr-body-leading);
  letter-spacing: var(--gr-body-tracking);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-thickness var(--gr-duration-fast) var(--gr-ease-standard); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
p { margin: 0; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.wrap { max-width: var(--gr-grid-max); margin-inline: auto; padding-inline: var(--gr-grid-margin); }

/* Catalogue rows: a small label column, then the content. */
.row { display: grid; grid-template-columns: 1fr; gap: var(--gr-space-5) var(--gr-grid-gutter); }
@media (min-width: 64rem) {
  .row { grid-template-columns: repeat(12, 1fr); }
  .row > .label { grid-column: 1 / span 3; }
  .row > .content { grid-column: 4 / -1; }
}

.label {
  margin: 0;
  font-size: var(--gr-caption-size); font-weight: var(--gr-caption-weight);
  line-height: var(--gr-caption-leading); letter-spacing: var(--gr-caption-tracking);
  color: var(--gr-fg-muted);
}
.num { font-feature-settings: "tnum" 1; }

.section { padding-block: var(--gr-section-gap) 0; }
.section + .section { border-top: 0; }
.rule { border-top: 1px solid var(--gr-rule); padding-top: var(--gr-space-5); }
.section-head { margin-bottom: var(--gr-space-7); }

/* ---- 1. Hero ---------------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 32rem;
  overflow: hidden;
  background: var(--gr-black);
  color: var(--gr-white);
  --rx: min(34vw, 24svh);
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-mark { position: absolute; top: var(--gr-space-6); left: var(--gr-grid-margin); margin: 0; z-index: 1; }
.hero-mark img { width: 10.5rem; height: auto; }
/* The static symbol: shown without JS and with reduced motion. Centred by
   its drawn outline (x 10–88.47 of 98.473), so the big body's weight does
   not pull it right; site.js reads the orbit's centre from this box. */
.hero-symbol {
  position: absolute;
  left: 50%;
  top: 46%;
  width: calc(var(--rx) * 2.7354);
  height: auto;
  transform: translate(-50%, -54.881%);
}
.hero.is-animating .hero-symbol { visibility: hidden; }
.hero-line {
  position: absolute;
  left: var(--gr-grid-margin); right: var(--gr-grid-margin);
  bottom: var(--gr-space-8);
  z-index: 1;
  margin-inline: auto;
  max-width: 18em;
  text-align: center;
  font-size: var(--gr-headline-size);
  font-weight: var(--gr-weight-light);
  line-height: var(--gr-headline-leading);
  letter-spacing: var(--gr-headline-tracking);
}
/* Landscape phones: the hero fits the short screen instead of running
   past it, and the symbol scales to the height. */
@media (orientation: landscape) and (max-height: 32rem) {
  .hero { min-height: 0; --rx: min(22vw, 25svh); }
  .hero-mark { top: var(--gr-space-5); }
  .hero-mark img { width: 8.5rem; }
  .hero-symbol { top: 47%; }
  .hero-line { bottom: var(--gr-space-5); max-width: 24em; }
}
@media (max-width: 40rem) {
  .hero { --rx: min(36vw, 22svh); }
  .hero-mark { left: 50%; transform: translateX(-50%); }
  .hero-symbol { top: 44%; }
  .hero-line { bottom: var(--gr-space-7); max-width: 12em; }
}

/* ---- 2. Wordmark convergence ----------------------------------------- */
.converge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--gr-space-7), 8vh, var(--gr-space-9));
  padding-block: var(--gr-space-10) var(--gr-space-8);
  overflow: hidden;
  overflow: clip;
}
/* The studio follows the wave closely: as the two words leave, its text
   arrives in their place. site.js fades it in from the same scroll value
   that moves the wordmark; without JS it simply shows. */
.converge + .section { padding-top: 0; }
.converge + .section .wrap { will-change: opacity, transform; }
.converge-mark { width: min(88vw, 64rem); }
.converge-mark svg { width: 100%; height: auto; overflow: visible; }
.converge-mark path { fill: currentColor; }
.converge-mark .line { will-change: transform; }

/* The merger signal: traced left to right, then it settles, fades, and
   comes again. site.js arms it (hidden) and plays it while it is in view;
   without JS, or with reduced motion, the whole signal simply shows. */
.signal { width: 100%; }
.signal svg { width: 100%; height: clamp(5rem, 11vw, 10rem); overflow: visible; }
.signal path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.signal.is-armed svg { clip-path: inset(-25% 100% -25% 0); }
.signal.is-playing svg {
  animation:
    gr-trace var(--gr-duration-ripple) var(--gr-ease-orbit) both,
    gr-settle var(--gr-duration-slow) var(--gr-ease-standard) calc(var(--gr-duration-ripple) + var(--gr-duration-slow)) both;
}
@keyframes gr-trace { from { clip-path: inset(-25% 100% -25% 0); } to { clip-path: inset(-25% 0 -25% 0); } }
@keyframes gr-settle { from { opacity: 1; } to { opacity: 0; } }

/* ---- 3. Statement ---------------------------------------------------- */
.statement-text {
  font-size: var(--gr-headline-size);
  font-weight: var(--gr-weight-light);
  line-height: var(--gr-headline-leading);
  letter-spacing: var(--gr-headline-tracking);
  max-width: 24em;
}
.statement-text + .statement-text { margin-top: var(--gr-space-5); }

/* ---- 4. The model ---------------------------------------------------- */
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 var(--gr-grid-gutter); }
@media (min-width: 40rem) { .stages { grid-template-columns: repeat(3, 1fr); } }
.stage { border-top: 1px solid var(--gr-rule); padding: var(--gr-space-4) 0 var(--gr-space-7); }
.stage svg { width: 100%; height: auto; margin: var(--gr-space-5) 0 var(--gr-space-5); color: var(--gr-fg); }
.stage svg .orbit { fill: none; stroke: currentColor; }
.stage svg .body { fill: currentColor; }
.stage svg .halo { stroke: none; }
/* The glow and the ring travel past the frame; let them fade, not clip. */
.stage svg {
  -webkit-mask-image: radial-gradient(farthest-side at 50% 52%, var(--gr-black) 70%, transparent);
  mask-image: radial-gradient(farthest-side at 50% 52%, var(--gr-black) 70%, transparent);
}
.stage h3 {
  margin: 0 0 var(--gr-space-2);
  font-size: var(--gr-headline-size); font-weight: var(--gr-headline-weight);
  line-height: var(--gr-headline-leading); letter-spacing: var(--gr-headline-tracking);
}
.stage p { color: var(--gr-fg-muted); max-width: 22em; }

/* ---- 5. Principles --------------------------------------------------- */
.principles { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0 var(--gr-grid-gutter); }
@media (min-width: 40rem) { .principles { grid-template-columns: 1fr 1fr; } }
.principle { border-top: 1px solid var(--gr-rule); padding: var(--gr-space-4) 0 var(--gr-space-8); }
.principle dt {
  font-size: var(--gr-headline-size); font-weight: var(--gr-headline-weight);
  line-height: var(--gr-headline-leading); letter-spacing: var(--gr-headline-tracking);
  margin-bottom: var(--gr-space-3);
}
.principle dd { margin: 0; color: var(--gr-fg-muted); max-width: 24em; }

/* ---- 6. Venture index ------------------------------------------------ */
.index { width: 100%; border-collapse: collapse; }
.index th {
  text-align: left; font-weight: var(--gr-caption-weight);
  font-size: var(--gr-caption-size); line-height: var(--gr-caption-leading); letter-spacing: var(--gr-caption-tracking);
  color: var(--gr-fg-muted);
  padding: 0 var(--gr-space-4) var(--gr-space-3) 0;
  border-bottom: 1px solid var(--gr-fg);
}
.index td { padding: var(--gr-space-5) var(--gr-space-4) var(--gr-space-5) 0; border-bottom: 1px solid var(--gr-rule); vertical-align: middle; }
.index th:last-child, .index td:last-child { padding-right: 0; text-align: right; }
.index .name { width: 24%; }
.index .desc { width: 40%; }
.index .name a {
  font-size: var(--gr-headline-size); font-weight: var(--gr-headline-weight);
  line-height: var(--gr-headline-leading); letter-spacing: var(--gr-headline-tracking);
  text-decoration: none; white-space: nowrap;
}
.index .name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.index .name .arrow { font-weight: var(--gr-weight-light); }
.index td.desc, .index td.meta { font-size: var(--gr-small-size); line-height: var(--gr-small-leading); letter-spacing: var(--gr-small-tracking); }
.index td.meta { white-space: nowrap; }
.status::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; margin-right: 0.5em; vertical-align: 0.1em; }
.status.is-building::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

@media (max-width: 48rem) {
  .index thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .index, .index tbody, .index tr, .index td { display: block; width: auto; }
  .index tr { display: grid; grid-template-columns: auto auto 1fr; gap: var(--gr-space-2) var(--gr-space-5); padding: var(--gr-space-5) 0; border-top: 1px solid var(--gr-fg); }
  .index td { padding: 0; border: 0; text-align: left !important; }
  .index td.name, .index td.desc { grid-column: 1 / -1; width: auto; }
  .index td.meta::before { content: attr(data-label); display: block; font-size: var(--gr-caption-size); font-weight: var(--gr-caption-weight); letter-spacing: var(--gr-caption-tracking); color: var(--gr-fg-muted); }
}

/* ---- 7. Footer -------------------------------------------------------
   Black, like the hero: the page opens and closes on the same field.
   A contact band, then a catalogue row (mark, studio, ventures), then a
   single base line. */
.footer {
  margin-top: var(--gr-section-gap);
  background: var(--gr-black);
  color: var(--gr-white);
  padding-block: var(--gr-space-10) var(--gr-space-6);
  font-size: var(--gr-small-size); line-height: var(--gr-small-leading); letter-spacing: var(--gr-small-tracking);
}
.footer p { margin: 0; }
.footer .label, .footer .muted { color: var(--gr-gray-400); }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gr-space-7) var(--gr-grid-gutter);
}
@media (min-width: 40rem) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-mark { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .footer-grid { grid-template-columns: repeat(12, 1fr); }
  .footer-mark { grid-column: 1 / span 4; }
  .footer-grid > :nth-child(2) { grid-column: 5 / span 2; }
  .footer-grid > :nth-child(3) { grid-column: 7 / span 2; }
  .footer-grid > :nth-child(4) { grid-column: 9 / span 4; }
}
.footer-email a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.footer-email a:hover { text-decoration-thickness: 2px; }
.footer-mark img { width: var(--gr-space-8); height: auto; margin-bottom: var(--gr-space-5); }
.footer-name { font-weight: var(--gr-weight-semibold); }
.footer-mark .muted { max-width: 22em; }
.footer-mark .label { margin-top: var(--gr-space-4); }
.footer-col .label { margin-bottom: var(--gr-space-3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: var(--gr-space-2); }
/* Touch: every footer link gets a full-size target (44px). */
/* Phones: less dead space around the wordmark and wave, the diagrams,
   and the footer. */
@media (max-width: 40rem) {
  .converge { padding-block: var(--gr-space-10) var(--gr-space-7); }
  .converge + .section { padding-top: var(--gr-space-5); }
  .stage svg { max-height: 13rem; margin-block: var(--gr-space-3); }
  .stage { padding-bottom: var(--gr-space-6); }
  .footer { padding-top: var(--gr-space-8); }
  .footer-base { margin-top: var(--gr-space-7); }
}
@media (pointer: coarse) {
  .footer-col a, .footer-email a, .footer-base a { display: inline-block; padding-block: var(--gr-space-3); }
  .footer-col li + li { margin-top: 0; }
  .footer-col .label, .footer-contact .label { margin-bottom: 0; }
}

.footer-base {
  margin-top: var(--gr-space-9);
  padding-top: var(--gr-space-5);
  border-top: 1px solid var(--gr-gray-600);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gr-space-2) var(--gr-space-6);
}
@media (max-width: 40rem) { .footer-base { flex-direction: column; } }

@media (prefers-reduced-motion: reduce) {
  .converge-mark .line, .converge + .section .wrap { transform: none !important; opacity: 1 !important; }
  .signal svg { animation: none !important; clip-path: none !important; opacity: 1 !important; }
}