/* ========================================================================
   THE ENTRANCE
   A threshold in institute blue that sits over the whole site until the
   visitor answers one question. It is deliberately kept out of style.css:
   nothing here touches a single existing selector, so it can be removed by
   deleting two lines from the head and this file.

   Shown by html.gate-on, which the inline bootstrap in index.html adds
   synchronously — the blue therefore covers the first paint and the site is
   never glimpsed behind it. No class means no door, so a visitor with JS
   disabled goes straight to the site.
   ======================================================================== */

.gate { display: none; }

html.gate-on .gate { display: block; }
/* Scroll is held only while the door is up, and released by gate.js. */
html.gate-on, html.gate-on body { overflow: hidden; height: 100%; }

.gate {
  --k-bg:    #1400ff;
  --k-fg:    #ffffff;
  --k-dim:   rgba(255, 255, 255, 0.64);
  --k-ghost: rgba(255, 255, 255, 0.34);
  --k-line:  rgba(255, 255, 255, 0.28);
  --k-ink:   #14130f;

  position: fixed; inset: 0;
  /* above the fixed nav, and above the film-grain overlay on body::before */
  z-index: 9999;
  background: var(--k-bg);
  color: var(--k-fg);
  overflow: hidden;
  will-change: transform;
  font-family: 'Satoshi', system-ui, sans-serif;
}

.gate [hidden] { display: none !important; }

/* ---------- the standing mark ---------- */
/* Live text, not the raster lockup: a lockup with a three-line wordmark has one
   size at which its type is right, and this is not that size. Set as markup it
   stays crisp, stays readable by a crawler, and keeps the institute's name. */
.gate__markbar {
  position: absolute; top: clamp(20px, 3.4vh, 40px); left: 0; right: 0;
  padding: 0 clamp(18px, 4vw, 56px);
  z-index: 2; opacity: 0; pointer-events: none;
}
.gate__markbar-in { max-width: 1120px; margin: 0 auto; }
.gate__wordmark {
  display: inline-block;
  font-family: 'Clash Display', 'Satoshi', sans-serif;
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(11px, 1.02vw, 14px);
  line-height: 1.42; letter-spacing: 0.17em;
}
/* The tracking leaves loose space hanging off the last letter of every line;
   pulling it back lines the block up with the question below it. */
.gate__wordmark span { display: block; margin-right: -0.17em; }

/* ---------- the claim, which performs the load ---------- */
.gate__intro {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(18px, 4vw, 56px);
  pointer-events: none;
}
.gate__claim {
  margin: 0; text-align: center;
  font-family: 'Clash Display', 'Satoshi', sans-serif;
  font-size: clamp(2.2rem, 8vw, 7.5rem);
  font-weight: 700; line-height: 0.96; letter-spacing: -0.022em; word-spacing: 0.04em;
  text-transform: uppercase;
  max-width: min(96vw, 1400px);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.gate__claim .hollow { color: transparent; -webkit-text-stroke: 1.4px var(--k-fg); }
/* Tabular figures, or the three-to-one digit drop shuffles the words beside it. */
.gate__pct { font-variant-numeric: tabular-nums; }

/* ---------- the question ---------- */
.gate__centre {
  position: absolute; inset: 0; z-index: 1;
  display: grid; align-content: center;
  padding: clamp(130px, 22vh, 220px) clamp(18px, 4vw, 56px) clamp(36px, 6vh, 70px);
  /* A centred grid overflows in both directions, so on a short viewport the
     question would be clipped off the top with no way to reach it. */
  overflow-y: auto;
}
.gate__centre-in { max-width: 1120px; margin: 0 auto; width: 100%; }

.gate__q {
  margin: 0;
  font-family: 'Clash Display', 'Satoshi', sans-serif;
  font-size: clamp(2.3rem, 7.2vw, 6.2rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -0.012em; word-spacing: 0.06em;
  text-wrap: balance; max-width: 16ch;
}

.gate__field, .gate__meta { max-width: 820px; }
.gate__field {
  margin-top: clamp(24px, 4.4vh, 46px);
  border-bottom: 1px solid var(--k-line);
  transition: border-color 0.25s;
}
.gate__field:focus-within { border-bottom-color: var(--k-fg); }
.gate__answer {
  display: block; width: 100%; resize: none; overflow: hidden;
  background: none; border: 0; padding: 0 0 15px;
  color: var(--k-fg); font-family: inherit;
  font-size: clamp(1.1rem, 2vw, 1.75rem);
  font-weight: 500; line-height: 1.35; letter-spacing: -0.015em;
  min-height: 1.7em;
}
.gate__answer:focus { outline: none; }
.gate__answer::placeholder { color: var(--k-ghost); }

.gate__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 15px;
}
.gate__count {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--k-dim);
}
.gate__go, .gate__cont {
  font-family: inherit; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--k-bg); background: var(--k-fg);
  border: 1px solid var(--k-fg); border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gate__go { font-size: 0.88rem; padding: 13px 26px; }

.gate__cont {
  font-size: 0.92rem; padding: 16px 30px;
  margin-top: clamp(18px, 2.6vh, 26px);
  display: inline-flex; align-items: center; gap: 12px;
}
.gate__go:hover, .gate__cont:hover {
  background: var(--k-ink); border-color: var(--k-ink); color: var(--k-fg);
}
.gate__go:disabled {
  background: none; color: var(--k-ghost);
  border-color: var(--k-line); cursor: not-allowed;
}
.gate__go:focus-visible, .gate__cont:focus-visible {
  outline: 2px solid var(--k-fg); outline-offset: 3px;
}

/* The page moves on by itself once the reply has landed, so this rule shows how
   long that is. Without it the transition arrives unannounced, which reads as
   the page deciding something rather than waiting for you. */
.gate__dwell {
  display: block; height: 1px; width: 100%; max-width: 320px;
  margin: clamp(22px, 3.4vh, 34px) 0 0;
  background: var(--k-line);
  transform-origin: left; transform: scaleX(0);
}
.gate__dwell.is-off { display: none; }

/* ---------- the reply ---------- */
/* One block, one size, sized by gate.js to the space it has: a short reply gets
   to be enormous, a longer one still lands. */
.gate__say {
  margin: 0;
  font-family: 'Clash Display', 'Satoshi', sans-serif;
  font-weight: 700; line-height: 1.0; letter-spacing: -0.015em; word-spacing: 0.05em;
  min-height: 0.98em;
  /* balance evens the rag; without it the last line orphans short, which is what
     makes a big type block read as accidental rather than set */
  text-wrap: balance;
  hyphens: none; overflow-wrap: normal;
  font-size: 4rem; /* replaced before anything is typed */
}
.gate__say:focus { outline: none; }
.gate__caret {
  display: inline-block; width: 0.5em; height: 0.82em;
  background: var(--k-fg); vertical-align: -0.06em; margin-left: 0.06em;
}
.gate__caret.is-idle { animation: gate-blink 1s steps(1, end) infinite; }
@keyframes gate-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.gate__chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: clamp(18px, 2.6vh, 26px) 0 0; padding: 0; list-style: none;
}
.gate__chips li {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px; color: var(--k-dim);
  border: 1px solid var(--k-line); padding: 7px 12px; border-radius: 100px;
}

@media (max-height: 640px) {
  .gate__centre { padding-top: clamp(96px, 15vh, 150px); align-content: start; }
  .gate__q { font-size: clamp(1.7rem, 5vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .gate__caret.is-idle { animation: none; }
}