/* Strategic Stability Alliance: production landing page ("Coming soon.").
   The "Gundo" design of 28 September 2026, restored as it was. The only
   changes: the styles live in this file instead of the page, font addresses
   are absolute, and the status marker no longer pulses. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2-variations"),
       url("/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --graphite: #16191E;
  --bone: #F3F0E9;
  --signal: #B9721E;
  --muted: rgba(243, 240, 233, 0.56);
  --line: rgba(243, 240, 233, 0.12);
  --grid: rgba(243, 240, 233, 0.035);
  --pad: clamp(16px, 3.2vw, 44px);
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--graphite);
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--sans);
  /* faint 12-column survey grid */
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px);
  background-size: calc((100vw - 2 * var(--pad)) / 12) 100%;
  background-position: var(--pad) 0;
}

.frame {
  position: fixed;
  inset: var(--pad);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
}

/* registration ticks on the four corners */
.tick { position: absolute; width: 11px; height: 11px; }
.tick::before, .tick::after { content: ""; position: absolute; background: var(--bone); }
.tick::before { left: 5px; top: 0; width: 1px; height: 11px; }
.tick::after  { top: 5px; left: 0; height: 1px; width: 11px; }
.tl { top: -6px; left: -6px; }
.tr { top: -6px; right: -6px; }
.bl { bottom: -6px; left: -6px; }
.br { bottom: -6px; right: -6px; }

.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2.4vw, 32px);
  font-family: var(--mono);
  font-size: clamp(10.5px, 0.8vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bar.top { border-bottom: 1px solid var(--line); }
.bar.bottom { border-top: 1px solid var(--line); }

.abbr {
  font-family: var(--sans);
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.08em;
  color: var(--bone);
}

main {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 clamp(16px, 2.4vw, 32px) clamp(20px, 5vh, 64px);
  min-height: 0;
}

h1 {
  margin: 0;
  font-weight: 700;
  font-stretch: 125%;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.012em;
  font-size: clamp(34px, min(10.4vw, 15.5vh), 168px);
}
h1 span { display: block; }

.status {
  margin: clamp(18px, 3.4vh, 40px) 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 400;
  font-stretch: 100%;
  font-size: clamp(17px, 1.6vw, 24px);
  letter-spacing: 0;
  color: var(--bone);
}
.status::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--signal);
  flex: none;
}
.status a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--signal);
}

.contact { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.contact a {
  font-family: var(--sans);
  font-stretch: 100%;
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid var(--signal);
  padding-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}
.contact a:hover { color: var(--signal); }
.contact a:focus-visible { outline: 1px solid var(--signal); outline-offset: 4px; }

.signup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(100%, 520px);
}
.signup label {
  flex: none;
  font-family: var(--mono);
  font-size: clamp(10.5px, 0.8vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  background: rgba(243, 240, 233, 0.02);
  transition: border-color 0.15s ease;
}
.field:focus-within { border-color: rgba(243, 240, 233, 0.45); }
.field input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bone);
  font: 400 16px/1.2 var(--sans);
  font-stretch: 100%;
  outline: none;
}
.field input::placeholder { color: rgba(243, 240, 233, 0.34); }
.field button {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--bone);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.field button:hover, .field button:focus-visible { background: var(--signal); color: var(--graphite); outline: none; }
.field button[disabled] { opacity: 0.5; cursor: default; }
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup .msg {
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  line-height: 1.2;
  margin: 0;
  text-transform: none;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.signup .msg.err { color: #D9895A; }
.signup.done label, .signup.done .field { display: none; }
.signup.done { justify-content: flex-end; }
.signup .msg:empty { display: none; }
.signup.done .msg { position: static; font-family: var(--sans); font-size: 15px; letter-spacing: 0; color: var(--bone); }

@media (max-width: 760px) {
  .bar.bottom { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .signup { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
  .signup .msg { position: static; }
  .signup.done { justify-content: flex-start; }
}
@media (max-width: 640px) {
  h1 { font-size: clamp(30px, min(10.6vw, 11vh), 80px); }
}
@media (max-height: 420px) {
  .bar { padding-top: 10px; padding-bottom: 10px; }
  .status { margin-top: 12px; }
}
/* a phone held sideways: keep the name clear of the top bar and the footer on one row */
@media (max-height: 480px) and (min-width: 560px) {
  h1 { font-size: clamp(26px, min(8.6vw, 12.5vh), 168px); }
  .bar { padding-top: 10px; padding-bottom: 10px; }
  .status { margin-top: 12px; }
  .bar.bottom { flex-direction: row; align-items: center; gap: 16px; }
  .contact { flex: none; }
  .signup { flex: 0 1 400px; width: auto; min-width: 0; flex-direction: row; align-items: center; gap: 12px; }
  .signup .msg { position: absolute; }
  .signup.done { justify-content: flex-end; }
  .signup.done .msg { position: static; }
  main { padding-bottom: 14px; }
}
/* ...and where even that row is short of room, the field's own prompt is label enough */
@media (max-height: 480px) and (min-width: 560px) and (max-width: 820px) {
  .signup label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* the address is never cut short; the signup field gives way instead */
@media (min-width: 761px) {
  .contact { flex: none; }
  .signup { flex: 0 1 520px; width: auto; min-width: 0; }
}
@media (max-height: 480px) and (min-width: 560px) and (max-width: 620px) {
  .field input { padding-left: 10px; padding-right: 6px; font-size: 15px; }
  .field button { padding: 0 10px; gap: 6px; letter-spacing: 0.08em; }
}
@media (max-width: 380px) {
  .field input { padding-left: 12px; padding-right: 8px; }
  .field button { padding: 0 12px; gap: 8px; letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}