/* METANOIA — the gate (pre-launch coming-soon page)
   One idea: a technical frame printed over a flowing field. The pattern runs
   on its own tide; the reader is invited to question it before it opens.
   Layout language studied from wodniack.dev (boxed cells, readout strips,
   one giant switching-letter band) and rebuilt bone + ink, Archivo only.
   Taste file: Metanoia HQ Resources/METANOIA-DNA.md (it wins).
   Deliberately standalone from main.css: this page is temporary and gets
   deleted at launch, so it carries its own tokens rather than coupling
   to the store. */

:root {
  --bone: #EDE6DA;
  --unbleached: #D9CFBF;
  --earth: #6B5138;
  --olive: #5A5A40;
  --soot: #26221E;
  --signal: #B3301B;
  --rule: rgba(38, 34, 30, 0.55);       /* cell hairlines */
  --rule-soft: rgba(38, 34, 30, 0.22);
  --grain-opacity: 0.035;
}

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

html { height: 100%; }
body {
  min-height: 100%;
  background: var(--soot);              /* the dark surround the frame sits in */
  color: var(--soot);
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 450;
  font-size: 16px;
  line-height: 1.6;
  padding: clamp(6px, 1vw, 12px);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
::selection { background: var(--soot); color: var(--bone); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- type roles (Archivo, one family, width + weight only) ---------- */
.placard {
  font-variation-settings: 'wdth' 63, 'wght' 900;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.label {
  font-variation-settings: 'wdth' 100, 'wght' 500;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--olive);
}

.grain {
  position: fixed; inset: -50px;
  z-index: 5; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ============ the frame ============ */
.frame {
  min-height: calc(100dvh - 2 * clamp(6px, 1vw, 12px));
  background: var(--bone);
  border: 1px solid var(--soot);
  display: grid;
  grid-template-rows: auto minmax(160px, 1fr) auto auto auto auto;
}

/* ============ the bar ============ */
.bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  grid-template-areas: "logo vision loc ftp status qr";
  border-bottom: 1px solid var(--rule);
  min-height: 104px;
}
.cell {
  padding: 14px 18px;
  border-right: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bar .cell:last-child { border-right: none; }

.cell-logo {
  grid-area: logo;
  align-items: flex-start;
  gap: 4px;
  min-width: 128px;
}
.logo-m { width: 64px; height: 64px; display: block; }
.logo-word { color: var(--soot); letter-spacing: 0.26em; font-size: 10px; }

.cell-vision { grid-area: vision; justify-content: center; }
.vision {
  height: calc(2 * 1.5em);  /* two lines visible, older ones scroll away above */
  overflow: hidden;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.5;
  color: var(--soot);
  max-width: 56ch;
}
.vision-lines { transition: transform 0.45s cubic-bezier(0.33, 0, 0.15, 1); }
.vline { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.vline.gone { opacity: 0.25; transition: opacity 0.45s ease; }
.vcursor {
  display: inline-block;
  width: 0.5em; height: 0.95em;
  margin-left: 2px;
  background: var(--signal);
  vertical-align: -0.12em;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.cell-loc { grid-area: loc; gap: 3px; }
.loc-line {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--olive);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  white-space: nowrap;
}
.loc-clock { color: var(--earth); font-variant-numeric: tabular-nums; }

.cell-ftp {
  grid-area: ftp;
  align-items: center;
  text-align: center;
  min-width: 104px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--olive);
  text-transform: uppercase;
  font-variation-settings: 'wdth' 100, 'wght' 600;
}

.cell-status { grid-area: status; gap: 5px; max-width: 240px; }
.status-line { font-size: 13px; line-height: 1.35; }

.cell-qr {
  grid-area: qr;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  padding: 12px 14px;
}
.cell-qr img { width: 68px; height: 68px; }
.qr-tag { font-size: 7.5px; letter-spacing: 0.22em; color: var(--olive); }
.cell-qr:focus-visible { outline: 2px solid var(--soot); outline-offset: -4px; }

/* ============ the field ============ */
.field { position: relative; min-height: 160px; }
#print {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ============ the readout strips ============ */
.strip {
  height: 22px;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
}
.strip + .band { border-top: none; }
.strip-track {
  white-space: nowrap;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--olive);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  will-change: transform;
  animation: strip-l 160s linear infinite;
}
.strip:last-of-type .strip-track { animation-name: strip-r; }
@keyframes strip-l { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes strip-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ============ the band ============ */
.band {
  border-top: 1px solid var(--rule);
  padding: clamp(10px, 1.6vw, 22px) clamp(12px, 1.8vw, 26px);
  overflow: hidden;
}
.headline {
  font-variation-settings: 'wdth' 63, 'wght' 900;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  white-space: nowrap;
  font-size: 100px;             /* landing.js fits this to the frame width */
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
/* each letter sits in a slot of locked size; the only move is the whole
   glyph scrolling out one side while its double scrolls in from the other,
   so weight and width never change and the row itself never moves */
.headline .hl {
  flex: none;
  overflow: hidden;
  height: 1.06em;   /* a breath of room under the baseline for the Q tail */
}
.headline .hl-in { display: flex; position: relative; }
.headline .hl-g { flex: none; text-align: center; }
.headline .hl-sp { flex: none; width: 0.32em; }
.headline .hl-star {
  flex: none;
  font-size: 0.5em;
  align-self: center;
  padding: 0 0.24em;
}
.headline.no-anim .hl-in { transition: none !important; }
/* during measurement: start-aligned so scrollWidth sees the full line
   (centered overflow spills left, and scrollWidth cannot count that) */
.headline.no-anim { justify-content: flex-start; }

.band-sub {
  margin-top: clamp(8px, 1.2vw, 14px);
  text-align: center;
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--soot);
  font-variation-settings: 'wdth' 100, 'wght' 550;
}

/* ============ the join band — the gate's one job, and it must read that way:
   a placard, a tall row, one red block. The only red slab on the page. ============ */
.join { border-top: 1px solid var(--rule); }

.join-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 28px;
  padding: clamp(14px, 2vw, 24px) 18px clamp(10px, 1.4vw, 16px);
}
.join-title { font-size: clamp(24px, 3.2vw, 42px); }

.micro {
  font-size: 12px;
  line-height: 1.5;
  color: var(--earth);
}
.micro a {
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(107, 81, 56, 0.45);
}
.micro a:hover { border-bottom-color: var(--soot); }
#form-msg { color: var(--signal); padding: 0 18px 10px; }
#form-msg:empty { display: none; }

#join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: clamp(88px, 12vh, 132px);
  border-top: 1px solid var(--rule-soft);
}
.join-input { display: flex; }
#email {
  font: inherit;
  font-variation-settings: 'wdth' 70, 'wght' 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(19px, 2.6vw, 32px);
  color: var(--soot);
  background: transparent;
  border: none;
  padding: 0 18px;
  width: 100%;
  transition: background-color 0.25s ease;
}
#email::placeholder { color: var(--olive); opacity: 1; }
#email:focus-visible { outline: none; background: rgba(255, 255, 255, 0.42); }
#email.is-wrong { box-shadow: inset 0 0 0 1px var(--signal); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.btn-signal {
  background: var(--signal);
  color: var(--bone);
  padding: 0 clamp(28px, 5vw, 68px);
  font-variation-settings: 'wdth' 80, 'wght' 700;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(14px, 1.7vw, 20px);
  white-space: nowrap;
  transition: filter 0.25s ease;
}
.btn-signal:hover { filter: brightness(1.08); }
.btn-signal:active { filter: brightness(0.95); }
.btn-signal:focus-visible { outline: 2px solid var(--soot); outline-offset: -4px; }
.btn-signal[disabled] { filter: saturate(0.5); cursor: default; }

.state { transition: opacity 0.5s ease; }
.state[hidden] { display: none; }
.state.is-out { opacity: 0; }
.state-done { padding: clamp(18px, 2.6vw, 30px) 18px; }
.state-done .placard { font-size: clamp(26px, 4vw, 44px); margin-bottom: 6px; }

/* ============ responsive ============ */
@media (max-width: 1180px) {
  .bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo vision qr"
      "loc  ftp    status";
  }
  .cell { border-bottom: 1px solid var(--rule-soft); }
  .bar .cell-qr, .bar .cell-status { border-right: none; }
  .cell-loc, .cell-ftp, .cell-status { border-bottom: none; }
  .cell-ftp { align-items: flex-start; text-align: left; }
  .cell-status { max-width: none; margin-left: auto; text-align: right; align-items: flex-end; }
}

/* ---------- phone: the signup is the page, so it is pulled above the fold.
   The bar dissolves (display: contents) and its cells are re-placed directly
   in the frame's grid: logo left, vision right, then the join, then the
   moving field, and the coordinates settle at the foot. Nothing is hidden
   from the page, only re-ordered — except the QR square, which is useless on
   the device that would scan it; its handle survives as a tappable line. */
@media (max-width: 640px) {
  .frame {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(120px, 1fr) auto auto auto auto auto;
    grid-template-areas:
      "logo   vision"
      "join   join"
      "field  field"
      "stripa stripa"
      "band   band"
      "stripb stripb"
      "loc    status"
      "tag    tag";
  }
  .bar { display: contents; }

  .cell-logo   { grid-area: logo; }
  .cell-vision { grid-area: vision; }
  .join        { grid-area: join; }
  .field       { grid-area: field; }
  .strip-a     { grid-area: stripa; }
  .band        { grid-area: band; }
  .strip-b     { grid-area: stripb; }
  .cell-loc    { grid-area: loc; }
  .cell-status { grid-area: status; }
  .cell-qr     { grid-area: tag; }
  .cell-ftp    { display: none; }

  /* the head row: a narrow logo box, the vision beside it */
  .cell-logo {
    padding: 10px 12px;
    min-width: 0;
    gap: 2px;
    border-right: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule);
  }
  .logo-word { font-size: 9px; letter-spacing: 0.11em; }   /* the word no longer sets the box width; the logo stays 64px */
  .cell-vision {
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .vision {
    height: calc(3 * 1.45em);
    max-width: none;
    font-size: 12px;
    line-height: 1.45;
  }
  .vline { white-space: normal; }

  /* the field keeps its own line now that the join sits above it */
  .field { border-top: 1px solid var(--rule); }

  /* the join, tightened so the button clears the fold */
  .join-head { padding: 12px 14px 10px; gap: 3px 18px; }
  .join-title { font-size: 22px; }
  .micro { font-size: 11px; }
  #form-msg { padding: 0 14px 8px; }
  #join { grid-template-columns: 1fr; min-height: 0; }
  .join-input { border-bottom: 1px solid var(--rule-soft); }
  #email { padding: 15px 14px; font-size: 18px; }
  .btn-signal { padding: 15px; }

  /* the foot: coordinates left, the state of things right, handle beneath */
  .cell-loc, .cell-status {
    padding: 7px 12px;
    border-top: 1px solid var(--rule);
    border-bottom: none;
  }
  .cell-loc { gap: 1px; }
  .loc-line { font-size: 8.5px; letter-spacing: 0.11em; }
  .cell-status { gap: 2px; }
  .status-line { font-size: 10.5px; line-height: 1.3; }
  .cell-status .label { font-size: 8.5px; letter-spacing: 0.11em; }

  .cell-qr {
    flex-direction: row;
    justify-content: center;
    padding: 6px 12px;
    border-top: 1px solid var(--rule-soft);
    border-bottom: none;
  }
  .cell-qr img { display: none; }
  .qr-tag { font-size: 8.5px; letter-spacing: 0.2em; }
}

/* ---------- reduced motion: everything holds still ---------- */
@media (prefers-reduced-motion: reduce) {
  .strip-track { animation: none; }
  .vcursor { animation: none; }
  .vision-lines, .state, .btn-signal, #email { transition: none; }
  .headline .hl-in { transition: none; }
}