/* =====================================================================
   COMING SOON — Pinnacle Science Labs

   One page, one job: say who this is, look like it was made on purpose,
   and capture an address without losing it. Every colour, face and size
   comes from tokens.css.

   Layout is a three-row grid pinned to the viewport (mark / statement /
   foot) so the page composes at any height instead of stacking into a
   scroll. Below 640px it releases and scrolls normally, because a fixed
   viewport grid on a phone fights the address bar.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font);
  font-size: var(--fs-small);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  min-height: 100vh;        /* fallback for older mobile Safari */
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  overflow-x: hidden;
}

/* -- The contour field --------------------------------------------------
   Generated at build time by build.py, inlined as static SVG. Elevation
   lines around an off-centre peak — which is the brand mark drawn the way
   a survey would draw it, so the background is the logo's own subject
   rather than decoration bolted on.

   Drawn, not animated with JS: a holding page that burns a main-thread
   loop to look busy is the thing we are trying not to be. The only motion
   is a very slow CSS drift.                                             */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  animation: drift 64s ease-in-out infinite alternate;
}
.field svg { width: 100%; height: 100%; display: block; }

@keyframes drift {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}

/* A vignette so the copy never sits on the busiest part of the field. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 16% 52%, rgba(24,15,8,.94) 0%, rgba(24,15,8,.74) 38%, rgba(24,15,8,0) 78%),
    linear-gradient(180deg, rgba(24,15,8,.72) 0%, rgba(24,15,8,0) 26%, rgba(24,15,8,0) 64%, rgba(24,15,8,.90) 100%);
}

.wrap {
  position: relative;
  z-index: 2;
  width: min(100% - 48px, 1180px);
  margin-inline: auto;
}

/* ---- Masthead ---------------------------------------------------- */

.top {
  padding: 28px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The supplied logo is a raster with a baked drop shadow, so it is used
   as an image and never recoloured. Padding, not height, gives it a real
   tap target without moving it optically. */
.mark { display: block; padding: 8px 4px; margin: -8px -4px; }
.mark img { display: block; height: 82px; width: auto; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 9px 16px 9px 13px;
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.8s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0   transparent; }
}

/* ---- Statement ---------------------------------------------------- */

.main {
  display: flex;
  align-items: center;
  padding: 44px 0;
}
/* The block is wide; the HEADLINE is what gets constrained. A ch-based
   cap here instead would strangle the lede into a four-word column,
   because a child cannot be wider than its parent. */
.statement { max-width: 820px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--accent-line);
  flex: none;
}

h1 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-hero);
  line-height: .98;
  color: var(--text);
  text-wrap: balance;
}
h1 .soft { color: var(--accent); }

.lede {
  margin: 0 0 34px;
  max-width: 46ch;
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--text-body);
}

/* ---- Notify form --------------------------------------------------- */

.notify { max-width: 30rem; }

.notify__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.notify input[type="email"] {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 15px 20px;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-small);
  transition: border-color var(--t-fast);
}
.notify input[type="email"]::placeholder { color: var(--text-faint); }
.notify input[type="email"]:focus { outline: none; border-color: var(--accent); }

.notify button {
  border: 0;
  border-radius: 999px;
  padding: 15px 28px;
  background: var(--gold);
  color: var(--brown);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-black);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast);
}
.notify button:hover    { background: var(--accent-bright); }
.notify button:disabled { opacity: .55; cursor: default; }

/* Consent is a plain sentence, not a pre-ticked box. Submitting IS the
   opt-in and the sentence says so — a ticked-by-default checkbox is not
   consent under CAN-SPAM and is worse under UK/EU rules. */
.notify__consent {
  margin: 13px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-faint);
}

.notify__msg {
  margin: 13px 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-med);
  letter-spacing: .06em;
  min-height: 1.2em;
}
.notify__msg[data-state="ok"]  { color: var(--accent); }
.notify__msg[data-state="err"] { color: var(--text-error); }

/* ---- Foot ---------------------------------------------------------- */

.foot {
  padding: 24px 0 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  border-top: 1px solid var(--line-faint);
}

.ruo { max-width: 68ch; }
.ruo__label {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}
/* --text-faint, not lower. The research-use notice is the one paragraph
   on this page that has to be readable — on Derby City this exact block
   shipped at 1.01:1 because it inherited a light-ground token onto a
   dark footer. */
.ruo p {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-faint);
}

.foot__meta {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-med);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: right;
  white-space: nowrap;
}

/* ---- Responsive ---------------------------------------------------- */

@media (max-width: 860px) {
  .main { padding: 38px 0; }
  .mark img { height: 68px; }
}

@media (max-width: 640px) {
  body { display: block; min-height: 0; }
  .wrap { width: calc(100% - 40px); }
  .top { padding-top: 22px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .mark img { height: 58px; }
  .main { padding: 34px 0 40px; }
  .notify__row { grid-template-columns: 1fr; }
  .notify button { padding: 16px 28px; }   /* 44px+ target */
  .foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .foot__meta { text-align: left; white-space: normal; }
  .field { opacity: .38; }
}

@media (prefers-reduced-motion: reduce) {
  .field { animation: none; }
  .status::before { animation: none; }
}