/* Holding page only. Palette from the preview (planning/reference/preview/index.html). */
:root {
  --night: oklch(0.165 0.016 235);
  --night-deep: oklch(0.12 0.012 235);
  --ink: oklch(0.94 0.012 85);
  --ink-soft: oklch(0.82 0.014 85);
  --gold: oklch(0.80 0.095 80);
  --ember: oklch(0.71 0.155 52);
}
* { box-sizing: border-box; }
html { background: var(--night); color: var(--ink); }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  font-family: Georgia, "Times New Roman", serif; }
.gate { width: 100%; max-width: 26rem; text-align: center; }
.gate-logo { width: 120px; height: auto; }
.gate-badge { margin: 1.5rem 0 0; font: 600 0.8rem/1 system-ui, sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
h1 { margin: 0.6rem 0 0; font-weight: 400; font-style: italic; font-size: clamp(1.8rem, 6vw, 2.4rem);
  line-height: 1.15; }
.gate-line { margin: 1rem 0 0; color: var(--ink-soft); line-height: 1.55; }
.gate-error { margin: 1rem 0 0; color: var(--ember); font-family: system-ui, sans-serif; }
form { margin-top: 1.75rem; text-align: left; }
label { display: block; font: 500 0.9rem system-ui, sans-serif; color: var(--ink-soft); }
.gate-row { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
input[type="password"] { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0 0.8rem; font: inherit;
  color: var(--ink); background: var(--night-deep); border: 1px solid var(--ink-soft); border-radius: 3px; }
button { min-height: 2.75rem; padding: 0 1.2rem; font: 600 1rem system-ui, sans-serif; cursor: pointer;
  color: var(--night-deep); background: var(--gold); border: 0; border-radius: 3px; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }