/* ==========================================================================
   gate.css — the access-code screen in front of the Under NDA case
   A dark full-viewport panel: brand mark top-left (from site.css), one field,
   one button. Font sizes are in `em` against the 10px root — see base.css.
   ========================================================================== */

/*
 * `color` as well as `--color`: base.css puts `color: var(--color)` on `body`,
 * which resolves against the value at *body* level, so redefining the token
 * further down only reaches the rules that read it by name. Everything that
 * just inherits — the headline here — would stay black on black.
 */
.page.gate {
  color: var(--color);

  --page-background: #08080a;
  --color: #f2f2f4;
  --link-color: #f2f2f4;
  --nav-link-color: #f2f2f4;

  /* Ink for the quieter lines, on this background rather than on white. */
  --gate-muted: rgba(242, 242, 244, 0.52);
  --gate-line: rgba(242, 242, 244, 0.16);
  --gate-line-hover: rgba(242, 242, 244, 0.34);
  --gate-error: #ff6a5e;
}

/* --- brand mark on a dark page ----------------------------------------- */
/*
 * site.css drives the mark to pure black with `brightness(0)`, which is right
 * on every other page and invisible on this one. `invert(1)` after it takes
 * that black to white — appended rather than replaced, so the mark still
 * normalises whatever colour logo.svg happens to carry.
 */
.page.gate .navigation .logo {
  filter: brightness(0) invert(1);
}

/*
 * One screen, no scrollbar. The panel takes whatever is left after the header
 * and the footer rather than a guessed height — `flex: 1` against a column
 * that is itself the viewport minus the header is exact whatever the footer
 * ends up weighing.
 *
 * min-height, not height: on a phone with the keyboard up, and at text sizes
 * above the default, the content still has somewhere to go.
 */
.page.gate > .guts {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-height, 126px));
}

.gate-panel {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 40px var(--site-margin);
}

.gate-panel > .content {
  width: 100%;
  max-width: 420px;
}

.gate-panel .kicker {
  color: var(--gate-muted);
  font-size: 1.3em;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.gate-panel .headline {
  margin-top: 20px;
  font-size: 4.2em;
  line-height: 1.15;
  font-weight: var(--title-weight);
}

.gate-panel .standfirst {
  margin-top: 20px;
  color: var(--gate-muted);
  font-size: 1.7em;
  line-height: 1.6;
}

/* --- the field --------------------------------------------------------- */

.gate-form {
  margin-top: 40px;
}

.gate-form .field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/*
 * An underline rather than a box: one rule that thickens on focus is the whole
 * affordance, and it keeps the screen as quiet as the copy.
 */
.gate-form .field input {
  display: block;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--gate-line);
  background: none;
  color: var(--color);
  font-family: inherit;
  font-size: 2em;
  line-height: 1.4;
  transition: border-color 200ms ease;
}

/*
 * The label is hidden visually, so this placeholder is the only *visible* name
 * the field has and it has to clear 4.5:1 like body text rather than sit at the
 * hint-grey a placeholder normally gets. At .5 it measures 4.87:1 on #08080a
 * and still reads lighter than the value typed into it, which is the whole job.
 */
.gate-form .field input::placeholder {
  color: rgba(242, 242, 244, 0.5);
}

.gate-form .field input:hover {
  border-bottom-color: var(--gate-line-hover);
}

.gate-form .field input:focus {
  outline: none;
  border-bottom-color: var(--color);
}

/*
 * Reserved, not conditional: the message appears and disappears as codes are
 * tried, and a box that only takes up space once it has something to say
 * would shove the button down under the cursor mid-click.
 */
.gate-form .message {
  display: block;
  min-height: 2.6em;
  padding-top: 10px;
  color: var(--gate-error);
  font-size: 1.5em;
  line-height: 1.5;
}

.gate-form .actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}

.gate-form button {
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--color);
  color: #08080a;
  font-family: inherit;
  font-size: 1.6em;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: opacity 150ms ease, transform 150ms ease;
}

.gate-form button:hover {
  opacity: 0.86;
}

.gate-form button:active {
  transform: translateY(1px);
}

.gate-form .aside {
  color: var(--gate-muted);
  font-size: 1.5em;
  line-height: 1.5;
}

.gate-form .aside a {
  color: var(--color);
  border-bottom: 1px solid var(--gate-line);
}

.gate-form .aside a:hover {
  border-bottom-color: var(--color);
}

@media (prefers-reduced-motion: reduce) {
  .gate-form .field input,
  .gate-form button {
    transition: none;
  }
}

@media (max-width: 768px) {
  .gate-panel .headline {
    font-size: clamp(1em, 4.2em, 8vw);
  }

  .gate-form .actions {
    flex-flow: row wrap;
    gap: 16px;
  }
}