/* NULLPORT — the landing IS a terminal. Not a page with a terminal on it.
 *
 * THE PROBLEM THAT SHAPE NORMALLY CREATES, AND HOW THIS ONE AVOIDS IT. A page
 * whose content appears only after you type has no content: no crawler, no
 * answer engine, no reader with JS off and nobody who simply does not want to
 * play ever sees it. So the whole of Chapter Zero is ALREADY PRINTED in this
 * session's scrollback, as ordinary h1/h2/p markup. You arrive mid-session and
 * scroll. Typing adds to the session; it never unlocks it.
 *
 * Colours are the game's own, read out of Nullport/Resources/Assets.xcassets,
 * so the page and the product are the same object rather than a look applied
 * to one of them. Single-theme on purpose: a terminal that turns beige in a
 * light OS is not a terminal. */
:root {
  --bg:    #0A0B0D;
  --sur:   #14161A;
  --hi:    #1E2126;
  --ln:    #2A2E35;
  --tx:    #ECEEF1;
  --dim:   #83888E;
  --ac:    #6FD3C7;
  --w:     #F5D46F;
  --d:     #EE8777;
  --ok:    #A4C797;
  /* No web font: the app draws the system monospace too, and a font host is a third party
     every visitor would be handed to. JetBrains Mono still wins where it is installed. */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 76ch;
}
* { box-sizing: border-box; }

/* The shell: status line, scrollback, prompt. The scrollback is the only thing
   that moves, which is what makes this a terminal rather than a long page with
   a prompt stuck to the bottom. `dvh` because `vh` and a mobile address bar
   disagree by about 60px, and the disagreement lands on the input. */
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tx);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; height: 100dvh;
}

.hud {
  flex: none; display: flex; gap: 0 1.3rem; flex-wrap: wrap; align-items: baseline;
  padding: 0.55rem clamp(0.85rem, 3vw, 1.6rem);
  border-bottom: 1px solid var(--ln); background: var(--sur);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: lowercase; color: var(--dim);
}
.hud .brand { color: var(--tx); font-weight: 700; letter-spacing: 0.22em; text-transform: none; }
.hud .hud-sp { flex: 1; }
.hud b { color: var(--w); font-weight: 500; }
@media (max-width: 30rem) { .hud span:nth-child(3) { display: none; } }

.scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.wrap { max-width: var(--measure); margin: 0 auto;
        padding: clamp(1rem, 4vw, 2rem) clamp(0.85rem, 3vw, 1.6rem) 3rem; }

.boot { color: var(--dim); margin: 0 0 1.6rem; }

h1 { font-size: clamp(2.2rem, 9vw, 4rem); font-weight: 700; letter-spacing: 0.06em;
     line-height: 1; margin: 0 0 0.5rem; }
.kicker { color: var(--ac); margin: 0 0 2.4rem; }

/* every block opens with the command that printed it — the page's whole
   structure is a session transcript, and the headings are its output */
.blk { margin: 0 0 2.4rem; }
.cmd { color: var(--dim); margin: 0 0 0.75rem; }
.cmd span { color: var(--ac); }
h2 { font-size: 1em; font-weight: 700; color: var(--w); letter-spacing: 0.02em;
     margin: 0 0 0.6rem; }
h3 { font-size: 1em; font-weight: 700; margin: 0 0 0.3rem; }
p { margin: 0 0 0.85rem; max-width: 72ch; }
p:last-child { margin-bottom: 0; }
b { color: var(--tx); font-weight: 700; }
.sub { color: var(--dim); }
a { color: var(--ac); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--ac); outline-offset: 2px;
}

.l-err { color: var(--d); }
.l-ok  { color: var(--ok); }
.l-out { background: var(--sur); border-left: 2px solid var(--ln);
         padding: 0.7rem 0.9rem; margin: 0 0 0.9rem; color: var(--dim);
         font: inherit; overflow-x: auto; white-space: pre; }
.l-out .w { color: var(--w); }
.l-msg { background: var(--sur); border-left: 2px solid var(--ac);
         padding: 0.7rem 0.9rem; margin: 0 0 0.9rem; white-space: pre-line; }
.l-msg .who { color: var(--ac); display: block; margin-bottom: 0.2rem; }

/* screenshots printed INTO the session, the way a terminal that can draw
   images prints them. 300px minimum: the first version served 331px files at
   150px and the one section whose job is proof was six smears. */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
         gap: 1.4rem 1.1rem; margin: 1.2rem 0 0; }
.shots figure { margin: 0; }
.shots img { width: 100%; height: auto; display: block;
             border: 1px solid var(--ln); border-radius: 12px; background: var(--sur); }
.shots figcaption { color: var(--dim); font-size: 0.78rem; line-height: 1.5; margin-top: 0.5rem; }

/* the turn: the session stops being a session */
.turn { border-top: 1px solid var(--ln); padding-top: 2rem; margin-top: 3rem; }
.drop { font-size: clamp(1.35rem, 5vw, 2rem); font-weight: 700; letter-spacing: -0.01em;
        line-height: 1.22; margin: 1.4rem 0 1.2rem; max-width: 24ch; }
.drop span { color: var(--ac); }

.facts { margin: 1.8rem 0; border-top: 1px solid var(--ln); }
.facts div { display: flex; gap: 1.2rem; padding: 0.7rem 0; border-bottom: 1px solid var(--ln); }
.facts dt { color: var(--dim); flex: 0 0 8rem; margin: 0; }
.facts dd { margin: 0; max-width: 58ch; }
@media (max-width: 34rem) {
  .facts div { flex-direction: column; gap: 0.15rem; }
  .facts dt { flex: none; }
}

.ask { border: 1px solid var(--ln); background: var(--sur);
       padding: clamp(1rem, 4vw, 1.5rem); margin: 2rem 0; }
.ask > p { color: var(--dim); margin: 0 0 1rem; }
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
input[type=email] { flex: 1 1 14rem; min-width: 0; background: var(--bg); color: var(--tx);
                    border: 1px solid var(--ln); padding: 0.6rem 0.7rem; font: inherit; }
input[type=email]::placeholder { color: var(--dim); }
button[type=submit] { background: var(--ac); color: #06100E; border: 0; cursor: pointer;
                      padding: 0.6rem 1.2rem; font: inherit; font-weight: 700; }
button[type=submit]:hover { filter: brightness(1.08); }
.note { color: var(--dim); font-size: 0.78rem; margin: 0.9rem 0 0; }
.foot { color: var(--dim); font-size: 0.78rem; margin-top: 2.5rem; }

/* the privacy and support pages: the same session, printing a document */
.hud a { color: inherit; text-decoration: none; }
.hud a:hover, .hud a[aria-current] { color: var(--tx); }
.doc h1 { font-size: clamp(1.5rem, 6vw, 2.2rem); letter-spacing: 0.02em; line-height: 1.2;
          margin-bottom: 0.8rem; }
.doc h2 { margin-top: 2.2rem; }
.doc h3 { margin-top: 1.4rem; color: var(--ac); }
.doc ul { margin: 0 0 0.85rem; padding-left: 1.4rem; max-width: 72ch; }
.doc li { margin: 0.3rem 0; }
.doc li::marker { color: var(--dim); }
.doc .lettered { list-style: none; padding-left: 0; }   /* a, b, c, ç: the law's own letters */

/* the prompt, pinned. It is the page's one control and it never scrolls away. */
.prompt { flex: none; display: flex; align-items: center; gap: 0.5rem;
          border-top: 1px solid var(--ln); background: var(--sur);
          padding: 0.5rem clamp(0.85rem, 3vw, 1.6rem); }
.prompt span { color: var(--ac); }
.t-in { flex: 1; min-width: 0; background: none; border: 0; outline: none;
        color: var(--tx); font: inherit; padding: 0.35rem 0; }
.t-in::placeholder { color: var(--dim); }

.t-chips { flex: none; display: flex; flex-wrap: wrap; gap: 0.35rem;
           padding: 0.55rem clamp(0.85rem, 3vw, 1.6rem);
           background: var(--sur); border-top: 1px solid var(--ln); }
.t-chips button { background: none; color: var(--dim); border: 1px solid var(--ln);
                  border-radius: 2px; padding: 0.24rem 0.5rem; font: inherit;
                  font-size: 0.76rem; cursor: pointer; }
.t-chips button:hover { color: var(--tx); border-color: var(--dim); }
.t-chips button.next { color: var(--ac); border-color: var(--ac); }
.t-note { flex: none; margin: 0; padding: 0.5rem clamp(0.85rem, 3vw, 1.6rem) 0.7rem;
          background: var(--sur); color: var(--dim); font-size: 0.72rem; line-height: 1.5; }
@media (max-height: 40rem) { .t-note { display: none; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }