.ground {
  --aspect: 0.924907;
  --gap: 64px;
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  --edge-r: max(0px, calc((100vw - var(--container)) / 2));
  --col-min: 430px;
  --h-cap: clamp(700px, 94svh, 1000px);
  --plate-w: min(calc(var(--h-cap) * var(--aspect)),
                 calc(100vw - var(--col-min) - var(--gap) - var(--edge) - var(--edge-r)));
  --main-h: calc(var(--plate-w) / var(--aspect));
  --col-max: max(var(--col-min), calc(100vw - var(--plate-w) - var(--gap) - var(--edge) - var(--edge-r)));
  --pad: calc(var(--plate-w) * 0.0397);
  --pad-b: calc(var(--plate-w) * 0.0340);
  --top-pad: clamp(72px, 8vh, 120px);
  --measure: min(760px, 100cqw);

  position: relative;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: minmax(var(--main-h), auto);
  min-height: var(--main-h);
  background: var(--black);
  color: var(--white);
  isolation: isolate;
  overflow: clip;
}

.ground__plate {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: start;
  position: relative;
  z-index: 1;
  width: var(--plate-w);
  height: var(--main-h);
  margin-inline-end: var(--edge-r);
}
.ground__canvas,
.ground__ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ground__canvas { opacity: 0; transition: opacity var(--slow) var(--ease-out); }
.ground.is-ready .ground__canvas { opacity: 1; }
.ground__canvas canvas { outline: none; }
.ground__ink { overflow: visible; pointer-events: none; }
.ground__ink .ink__hit { pointer-events: all; cursor: default; }

.ground__col {
  grid-area: 1 / 1;
  justify-self: start;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: var(--col-max);
  max-width: calc(100vw - var(--edge) * 2);
  margin-inline-start: var(--edge);
  padding-block: var(--top-pad) var(--pad-b);
}


.ground__top { container-type: inline-size; }

.ground__eyebrow {
  margin: 0;
  font: 700 14px/1 var(--font-head);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
}
.ground__rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--rule-on-dark);
  transform-origin: left center;
}
.ground__rule--top { margin-top: 15px; }

.ground__h2 {
  margin: 34px 0 0;
  color: var(--white);
  font-weight: 800;
  line-height: .88;
  letter-spacing: 0;
  outline: none;
}
.ground__head { display: block; }
.ground__head svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.ground__headline {
  display: block;
  font-family: var(--font-head);
  font-size: min(104px, calc(.158 * var(--measure)));
  text-transform: uppercase;
  letter-spacing: .16em;
}
.ground__headline--hollow {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--orange);
}

.ground__lede {
  margin: 26px 0 0;
  max-width: 46ch;
  font: 400 17.5px/1.55 var(--font-body);
  color: rgba(255, 255, 255, .80);
}
.ground__place { transition: color var(--fast) var(--ease-out); }
.ground__place.is-lit { color: var(--orange); }

.ground__keywrap { grid-row: 3; container-type: inline-size; }
.ground__rule--key { margin-bottom: 20px; }
.ground__key {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@container (max-width: 479px) {
  .ground__key { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
}
.ground__chip {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  background: none;
  font: 700 13px/1 var(--font-head);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: color var(--base) var(--ease-out);
}
.ground__chip i {
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--orange);
  transition: background-color var(--base) var(--ease-out);
}
.ground__chip--solid i { background: var(--orange); }
.ground__chip:hover,
.ground__chip:focus-visible,
.ground__chip.is-lit { color: var(--white); }
.ground__chip:hover i,
.ground__chip:focus-visible i,
.ground__chip.is-lit i { box-shadow: 0 0 0 3px rgba(254, 138, 51, .18); }

.ground__fine {
  margin: 26px 0 0;
  font: 400 11px/1.5 var(--font-body);
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .40);
}
.ground__fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ground__fine a:hover { color: var(--orange); }

.ground :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }


.ink__name {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: 0;
  text-anchor: middle;
  fill: none;
  transition: fill var(--base) var(--ease-out), stroke var(--base) var(--ease-out),
              stroke-width var(--base) var(--ease-out);
}
.ink__name--solid { fill: var(--orange); stroke: none; }
.ink__name--hollow { stroke: var(--orange); fill: transparent; }
.ink__name--hollow.is-lit { fill: var(--orange); stroke-width: 0; }

.ink__pinname {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  fill: var(--white);
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .72);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.ink__pinaddr {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .06em;
  fill: var(--gray-on-dark);
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .72);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.ink__sight {
  stroke: var(--orange);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0;
}
.ink__ping {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.25;
  opacity: 0;
}

.ink__imprint {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .14em;
  fill: rgba(255, 255, 255, .32);
}
.ink__halo {
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .8);
  stroke-width: 3px;
  stroke-linejoin: round;
}


@media (min-width: 1800px) {
  .ground { --h-cap: clamp(700px, 94svh, 1120px); }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .ground {
    --col-min: 340px;
    --h-cap: clamp(520px, 78svh, 760px);
    --gap: 48px;
    --top-pad: clamp(56px, 7vh, 88px);
  }
  .ground__key { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
}


@media (max-width: 899px) {
  .ground {
    --main-h: auto;
    --plate-w: 100vw;
    --measure: min(760px, 100cqw);
    display: flex;
    flex-direction: column;
    height: auto;
    padding-block: clamp(44px, 9vw, 72px) clamp(48px, 10vw, 76px);
  }
  .ground__col { display: contents; }
  .ground__top { order: 1; }
  .ground__plate { order: 2; }
  .ground__keywrap { order: 3; }

  .ground__top,
  .ground__keywrap { padding-inline: var(--gutter); }

  .ground__plate {
    justify-self: auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--aspect);
    margin-block: clamp(30px, 7vw, 48px) clamp(26px, 6vw, 40px);
    pointer-events: none;
  }

  .ground__h2 { margin-top: 24px; }
  .ground__headline--hollow { -webkit-text-stroke-width: 1.25px; }
  .ground__lede { margin-top: 22px; font-size: 16px; }
  .ground__rule--top { margin-top: 13px; }
  .ground__rule--key { margin-bottom: 16px; }
  .ground__keywrap { margin-top: clamp(26px, 6vw, 36px); }
  .ground__key { gap: 2px 30px; }
  .ground__chip { padding-block: 15px; }
}
@media (max-width: 599px) {
  .ground__key { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
}


.ground--live .ink__draw,
.ground--live .ink__fade,
.ground--live .ink__pin { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ground *,
  .ground *::before,
  .ground *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}


.ground__canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ground__canvas .ground__mesh { will-change: opacity; }

.no-js .ground:not(.ground--live),
.ground.ground--text {
  --plate-w: 0px;
  --gap: var(--edge);
  display: block;
  height: auto;
  min-height: 0;
  padding-block: 72px 80px;
}
.no-js .ground:not(.ground--live) .ground__plate,
.ground.ground--text .ground__plate { display: none; }
.no-js .ground:not(.ground--live) .ground__col,
.ground.ground--text .ground__col {
  display: block;
  max-width: min(var(--container), calc(100vw - var(--edge) * 2));
  margin-inline: auto;
  padding-block: 0;
  padding-inline: var(--gutter);
}
.no-js .ground:not(.ground--live) .ground__keywrap,
.ground.ground--text .ground__keywrap { margin-top: 48px; }
.no-js .ground:not(.ground--live) .ground__headline,
.ground.ground--text .ground__headline { font-size: min(104px, 11vw); }


.ground--centred .ground__col {
  grid-template-rows: none;
  align-content: center;
  padding-block: var(--top-pad);
}
.ground--centred .ground__title { margin: 0; color: var(--white); text-wrap: balance; outline: none; }
.ground--centred .ground__lede { margin-top: 20px; }
.ground--centred .ground__keywrap { grid-row: auto; margin-top: 36px; }

@media (min-width: 900px) {
  .ground--centred .ground__col { position: relative; }
  .ground--centred .ground__fine { position: absolute; left: 0; bottom: var(--pad-b); margin: 0; }
}
@media (max-width: 899px) {
  .ground--centred .ground__keywrap { margin-top: clamp(26px, 6vw, 36px); }
}

.no-js .ground--centred:not(.ground--live) .ground__fine,
.ground--centred.ground--text .ground__fine { position: static; margin-top: 26px; }