@font-face { font-family: "Sud"; src: url("fonts/Sud.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "GT America Extended"; src: url("fonts/GT-America-Extended-Regular.OTF") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GT America Extended"; src: url("fonts/GT-America-Extended-Medium.OTF") format("opentype"); font-weight: 500; font-display: swap; }

:root {
  --beige: #dfd2bc;
  --red: #41140e;
  --blue: #8a99c1;
  --hair: 0.5px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--beige);
  color: var(--red);
  font-family: "GT America Extended", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
}
::selection { background: var(--red); color: var(--beige); }
:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* XXII pattern: every tile is the emblem used as a mask, coloured by field.js. Fully hidden until lit. */
.field { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.field__tile { position: absolute; background-color: rgba(138, 153, 193, 0); -webkit-mask: url("img/emblem-mask.png") center / contain no-repeat; mask: url("img/emblem-mask.png") center / contain no-repeat; }

.center { position: fixed; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--pad); gap: clamp(20px, 2.6vw, 32px); pointer-events: none; }
.center > * { pointer-events: auto; }
.center__logo { width: clamp(200px, 22vw, 340px); height: auto; display: block; }
.center__soon { font-weight: 400; font-size: clamp(11px, 1.05vw, 14px); letter-spacing: 0.42em; margin-right: -0.42em; text-transform: uppercase; }

.signup { display: flex; width: min(100%, 420px); border-bottom: var(--hair) solid var(--red); margin-top: clamp(8px, 1.4vw, 20px); }
.signup input { flex: 1; min-width: 0; background: transparent; border: 0; border-radius: 0; font: inherit; font-size: 13px; letter-spacing: 0.04em; color: var(--red); padding: 12px 0; outline: none; text-align: left; }
.signup input::placeholder { color: rgba(65, 20, 14, 0.55); }
.signup input:focus-visible { outline: none; }
.signup:focus-within { border-bottom-color: var(--blue); }
.signup__ok { font-size: 13px; letter-spacing: 0.04em; margin-top: clamp(8px, 1.4vw, 20px); padding: 12px 0; }

.link { position: relative; display: inline-block; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); padding: 12px 0 4px 20px; white-space: nowrap; transition: color 0.4s var(--ease); }
.link:hover, .link:focus-visible { color: var(--blue); }
.bottom .link { padding: 0 0 4px; }
.bottom .link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--hair); background: currentColor; transform-origin: right; transition: transform 0.6s var(--ease); }
.bottom .link:hover::after { transform: scaleX(0); }
.signup .link { padding-bottom: 12px; }

.bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: center; padding: clamp(20px, 2.6vw, 36px) var(--pad); }

/* entrance */
.js .center > *, .js .bottom { opacity: 0; transform: translateY(14px); animation: rise 1.2s var(--ease) forwards; }
.js .center > :nth-child(2) { animation-delay: 0.15s; }
.js .center > :nth-child(3) { animation-delay: 0.3s; }
.js .bottom { animation-delay: 0.6s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .center > *, .js .bottom { animation: none; opacity: 1; transform: none; } }