/* gate.css — the coming-soon holding page only.
 *
 * Everything else the page needs — colour, type, the mark, the primary
 * button, the inline link — comes from tokens.css and styles.css unchanged,
 * loaded before this file. This stylesheet adds exactly the parts styles.css
 * has no reason to carry for the rest of the site: the page's own header/
 * footer scaffolding and the access-code form. Same discipline as the file
 * it follows: every colour and face below is a token by name, nothing
 * inline, nothing invented.
 *
 * .gate deliberately does NOT reuse .hero verbatim, even though the two are
 * close cousins — .hero's padding-block was tuned against the sticky .nav
 * bar and the section that follows it (see styles.css "gate 44a"), neither
 * of which exists on this page. The 7fr/5fr split IS reused as-is: that
 * ratio is the one already-measured asymmetric composition the tokens this
 * page draws from was built around, and there is no reason to retune it for
 * a page with the same two-thing (words, mark) shape.
 */

/* ---- Header: identity only, no nav ---------------------------------- */

.gate-top {
  display: flex;
  align-items: center;
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

/* Not a link: while the site is gated there is nowhere else on it for a
   visitor to go, so this is identity, not the first item of a nav. */
.gate-top__brand {
  font-family: var(--font-mark);
  font-weight: var(--weight-mark);
  font-synthesis: none;
  font-size: var(--text-mark-sm);
  line-height: 1;
  letter-spacing: var(--track-mark-sm);
  color: var(--color-accent);
}

/* ---- The split: words + form on the wide side, the mark on the other -- */

.gate {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-3xl);
  min-height: calc(100svh - var(--nav-height) * 2);
}

.gate__text { min-width: 0; }

.gate__title {
  max-width: 18ch;
  margin-block-end: var(--space-lg);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: normal;
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

.gate__lede {
  max-width: var(--measure-lede);
  font-size: var(--text-md);
  line-height: var(--lh-lede);
  color: var(--color-ink);
}

/* ---- The form ---------------------------------------------------------
   nginx decides the answer, not this markup — see gate.js. Everything here
   is about making a visitor's own attempt legible: a clear focus state
   going in, a clear wrong-code state coming back. */

.gate__form {
  max-width: var(--measure-lede);
  margin-block-start: var(--space-xl);
}

.gate__label {
  display: block;
  margin-block-end: var(--space-2xs);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.gate__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.gate__input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: var(--target-min);
  padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  background-color: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  letter-spacing: 0.2em;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.gate__input::placeholder { color: var(--color-muted); }

/* Inputs sit outside the global :where(a, button, summary):focus-visible
   rule in styles.css, so the ring is restated here at the same values. */
.gate__input:focus-visible {
  outline: 2px solid var(--color-accent-peak);
  outline-offset: 2px;
  border-color: var(--color-accent-peak);
}

/* The wrong-code state. tokens.css carries no red/danger hue — the palette
   was built for a five-page marketing site that never needed one — so the
   signal here is weight and a stronger neutral border, not colour-coding,
   backed by the text in .gate__error itself (role="alert", never silent). */
.gate__input[aria-invalid="true"] {
  border-color: var(--color-ink);
}

.gate__submit {
  flex: none;
}

.gate__error {
  display: flex;
  align-items: center;
  margin-block: var(--space-sm) 0;
  font-weight: var(--weight-display);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

/* A same-specificity class selector (.gate__error) declared after the UA
   stylesheet's [hidden] rule wins the cascade and would otherwise show this
   row on first load, every time — restated explicitly so [hidden] always
   wins over the flex layout above regardless of source order. */
.gate__error[hidden] { display: none; }

.gate__aside {
  max-width: var(--measure-lede);
  margin-block-start: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.gate__noscript {
  max-width: var(--measure-lede);
  margin-block-start: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ---- Footer: the one line every page on this site carries -------------- */

.gate-foot {
  padding-block: var(--space-lg) var(--space-2xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.gate-foot__line { margin-block-end: var(--space-2xs); }

.gate-foot__copy { font-size: var(--text-xs); }

/* ---- Narrow viewports · same floors as the rest of the site ------------ */

@media (max-width: 60rem) {
  .gate {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    padding-block: var(--space-lg) var(--space-xl);
    min-height: 0;
  }

  .gate__title,
  .gate__lede,
  .gate__form,
  .gate__aside { max-width: none; }

  .hero__form { justify-content: flex-start; }
}

@media (max-width: 30rem) {
  .gate-top__brand { font-size: var(--text-mark-xs); }
}

/* The theme toggle in the gate bar. Added 2026-08-28 with the dual-mode
   rebrand.

   .gate-top is a plain flex row holding one item, so the toggle landed
   directly against the wordmark with no separation. `margin-inline-start:
   auto` pushes it to the far end instead of spacing it by a fixed amount --
   the bar is full-width, so there is always room, and the gap never has to be
   re-tuned per viewport.

   Safe here in a way it was NOT in the main nav: .nav__right sits in a
   `justify-self: end` grid column, where a margin on a child widens the
   container and drags its left edge back over the wordmark (measured: 0px
   clearance became -11px, and the toggle's hit area then captured the
   wordmark's last 6px). .gate-top has no such column -- it is the flex
   container itself, so `auto` resolves against real free space. */
.gate-top .theme-toggle {
  margin-inline-start: auto;
}