/* prospekt.mmaraju.com gate: the cover's look (photo, logo, kicker, slogan) with one password field. Tokens = src/css/10-tokens.css */
@font-face { font-family: "Industrie Cd"; src: url("fs-industrie-cd-black-italic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("ibm-plex-mono-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink: #101012; --paper: #f0ebe1; --volt: #d4ff28; --on-volt: #101012;
  --text-2: color-mix(in oklab, var(--paper) 72%, var(--ink));
  --line-strong: color-mix(in oklab, var(--paper) 38%, transparent);
  --font-display: "Industrie Cd", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --slant: -12deg;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--paper); }
body { font-family: var(--font-mono); -webkit-font-smoothing: antialiased; }

.gate {
  position: relative; isolation: isolate; overflow: clip;
  min-block-size: 100svh; display: grid; align-items: end;
  padding: max(var(--gutter), env(safe-area-inset-top)) var(--gutter) max(var(--gutter), env(safe-area-inset-bottom));
}
.gate__media {
  position: absolute; inset: 0; z-index: -1;
  img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 63% 30%; filter: grayscale(1) contrast(1.05) brightness(.62); }
  &::after {   /* the text side reads on ink: left on wide screens, bottom on narrow */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, var(--ink) 8%, color-mix(in oklab, var(--ink) 55%, transparent) 55%, transparent 85%);
  }
}
@media (width >= 64rem) {
  .gate__media img { object-position: 88% 32%; }
  .gate__media::after { background: linear-gradient(to right, var(--ink) 18%, color-mix(in oklab, var(--ink) 60%, transparent) 52%, transparent 78%); }
  .gate { align-items: center; }
}

.gate__inner { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); max-inline-size: 44rem; }
.gate__logo { inline-size: clamp(7.5rem, 12vw, 11rem); block-size: auto; }
.gate__kicker {
  display: flex; align-items: center; gap: .9em; margin: 0;
  font-weight: 500; font-size: clamp(.75rem, .7rem + .2vw, .875rem); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
  &::before { content: ""; inline-size: 2.2em; block-size: 2px; background: var(--volt); transform: skewX(var(--slant)); flex: none; }
}
.gate__title {
  margin: 0; font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: clamp(2.6rem, 1.2rem + 6vw, 6rem); line-height: .92; letter-spacing: -.005em;
  > span { display: block; }
  .v { color: var(--volt); }
}

.gate__form { display: grid; gap: .7rem; margin-block-start: .5rem; max-inline-size: 30rem; }
.gate__label { font-weight: 500; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.gate__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.gate__input {
  flex: 1 1 12rem; min-block-size: 48px; padding: .7em 1em;
  font: 500 1rem/1 var(--font-mono); color: var(--paper);
  background: color-mix(in oklab, var(--ink) 70%, transparent); border: 1px solid var(--line-strong); border-radius: 999px;
  &:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }   /* one ring: the outline covers the border */
  &[aria-invalid="true"] { border-color: var(--volt); }
}
.gate__btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 48px; padding: .75em 1.4em; cursor: pointer; white-space: nowrap;
  font: 500 .8125rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-volt); background: var(--volt); border: 1px solid var(--volt); border-radius: 999px;
  transition: background .15s, border-color .15s;
  > span { text-box: trim-both cap alphabetic; }
  &:hover { background: var(--paper); border-color: var(--paper); }
  &:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
}
/* phone: field and button full width, stacked; bottom-anchored like the cover, but in the dynamic viewport and with
   room under the button, so Safari's floating toolbar never covers the password field (Sten 14.10, iPhone; centred
   was rejected) */
@media (width < 40rem) {
  .gate { min-block-size: 100dvh; padding-block-end: calc(env(safe-area-inset-bottom) + 4.5rem); }
  .gate__inner { gap: 1rem; }
  .gate__logo { inline-size: 6.5rem; }
  .gate__media::after { background: linear-gradient(to top, var(--ink) 15%, color-mix(in oklab, var(--ink) 70%, transparent) 65%, color-mix(in oklab, var(--ink) 25%, transparent)); }
  .gate__input, .gate__btn { flex-basis: 100%; }
}
.gate__error { margin: 0; font-size: .875rem; color: var(--volt); text-wrap: pretty; }