/* Tokento's website: the approved design, "The next chapter" in Silver (Abhi, 23 Sep 2026).
   Charcoal and silver interface, white text, pixel type, game-style controls. All the colour comes
   from the game's own artwork, never from the interface.
   Every page shares this file, so a change lands everywhere. The wording in the pages is a draft. */

@font-face {
  font-family: Tokento;
  src: url("PixelifySans.ttf") format("truetype");   /* the game's own font */
  font-display: swap;
}

:root {
  --bg: #101112;        /* the page */
  --panel: #24272B;     /* raised things */
  --edge: #5A5F65;      /* hairlines */
  --text: #F7F7F2;      /* words */
  --sub: #D4D5D2;       /* quieter words, and the silver of every control */
  --key: #D4D5D2;
  --key-ink: #24272B;
  --bad: #E5A3A3;
  --good: #A8D5B5;
  --pad: 6%;
}

* { box-sizing: border-box; }
/* The browser's own rule for `hidden` loses to any class that sets display, such as
   .game-button below. Say it again here so hiding something actually hides it. */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.7 ui-rounded, "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; image-rendering: pixelated; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: Tokento, monospace; font-weight: 500; line-height: 1.05; margin: 0; }
h2 { font-size: clamp(30px, 5.4vw, 52px); }
h3 { font-size: clamp(20px, 3vw, 27px); }
p { margin: 0 0 14px; max-width: 62ch; }
:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.pad { padding-inline: var(--pad); }
.pixel { font-family: Tokento, monospace; }
.micro {
  font: 12px/1.4 Tokento, monospace; letter-spacing: 1.6px;
  text-transform: uppercase; color: #fff; margin-bottom: 10px;
}
.muted { color: var(--sub); }
.wrap { max-width: 1180px; margin: 0 auto; }

/* ---------- the bar at the top ---------- */
.nav {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding-block: 18px; border-bottom: 1px solid var(--edge); background: var(--bg);
  position: sticky; top: 0; z-index: 5;
}
.brand { font: 30px/1 Tokento, monospace; letter-spacing: 1px; color: var(--key); }
.nav nav { display: flex; gap: 22px; align-items: center; font: 15px Tokento, monospace; }
.nav .nav-join { border: 1px solid var(--key); padding: 8px 14px; color: var(--key); }
@media (max-width: 640px) { .nav nav a:not(.nav-join) { display: none; } }

/* ---------- the game-style button ---------- */
.game-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 49px; padding: 12px 24px; cursor: pointer;
  background: var(--key); color: var(--key-ink); border: 2px solid #f4f4f4;
  box-shadow: inset -3px -3px 0 #67676777, 0 4px 0 #0a0a0a;
  font: 19px/1.2 Tokento, monospace; text-transform: uppercase;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
                     100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px),
                     calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);
}
.game-button:active { transform: translateY(2px); box-shadow: inset -3px -3px 0 #67676777, 0 2px 0 #0a0a0a; }
.game-button[disabled] { opacity: .55; cursor: default; transform: none; }

/* ---------- sections ---------- */
section { padding-block: clamp(48px, 8vw, 96px); border-bottom: 1px solid var(--edge); }
.section-top { margin-bottom: 34px; }

/* hero */
.hero { position: relative; padding-block: clamp(40px, 7vw, 84px); overflow: hidden; }
.hero-art {
  position: absolute; inset: 0; z-index: 0; background: url("../images/city.webp") center right/cover no-repeat;
  filter: saturate(1.08);
}
/* The words sit on the near-solid left; the city shows through on the right, and the bottom fades
   into the page so the ribbon below joins on cleanly. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(16,17,18,.97) 0%, rgba(16,17,18,.93) 38%, rgba(16,17,18,.42) 100%),
    linear-gradient(180deg, rgba(16,17,18,.5) 0%, rgba(16,17,18,0) 30%, rgba(16,17,18,.75) 100%);
}
@media (max-width: 760px) {
  /* Narrow: the words cover the whole width, so darken evenly instead of left-to-right. */
  .hero::after { background: linear-gradient(180deg, rgba(16,17,18,.82) 0%, rgba(16,17,18,.9) 100%); }
}
.hero > .wrap { position: relative; z-index: 2; }   /* not `> *`: that would un-absolute .hero-art */
.logo { font-size: clamp(56px, 13vw, 132px); letter-spacing: 2px; margin: 4px 0 10px; }
.tagline { font: clamp(15px, 2.4vw, 22px)/1.35 Tokento, monospace; color: var(--sub); text-transform: uppercase; }
.hero-copy { margin-top: 18px; font-size: 16px; }
.hero-actions { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.ribbon {
  display: flex; gap: 26px; flex-wrap: wrap; align-items: center;
  font: 12px Tokento, monospace; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--sub); padding-block: 14px; border-bottom: 1px solid var(--edge);
}

/* a framed picture, like a window in the game */
.frame { border: 1px solid var(--edge); background: var(--panel); }
.frame-bar {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--edge); font: 12px Tokento, monospace;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--sub);
}
/* Phone screenshots are tall (402x874). Sized by width, three of them make a band over 500px
   deep with a lot of empty game floor in it. Size them by HEIGHT instead, so they read as three
   phones standing side by side, and the width follows the picture rather than the column. */
#life .frame { max-width: 760px; margin: 0 auto; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.shots figure {
  margin: 0; border-right: 1px solid var(--edge);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.shots figure:last-child { border-right: 0; }
.shots img { display: block; height: 340px; width: auto; max-width: 100%; margin: 0 auto; }
.shots figcaption { padding: 10px 14px; font-size: 13px; color: var(--sub); border-top: 1px solid var(--edge); }

/* On a phone there is no room for three side by side, and stacking them would be a very long
   scroll. Make them a strip you swipe: the strip scrolls sideways, the page never does.
   This block comes last on purpose, so it wins over the sizing above. */
@media (max-width: 560px) {
  .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .shots figure { flex: 0 0 74%; scroll-snap-align: center; }
  .shots img { height: auto; width: 100%; }
  .shots figcaption { text-align: center; }
}

/* the people */
.crew { display: flex; gap: 10px; flex-wrap: wrap; }
.crew button {
  background: var(--panel); border: 1px solid var(--edge); color: var(--text);
  padding: 12px 10px 8px; cursor: pointer; min-width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 12px Tokento, monospace; letter-spacing: 1.2px; text-transform: uppercase;
}
.crew button[aria-pressed="true"] { background: var(--key); color: var(--key-ink); border-color: #fff; }
/* One box per character, whatever shape the sprite is: a wide cat mustn't widen its card. */
.crew img { height: 88px; width: 88px; object-fit: contain; object-position: bottom; }
.crew-message { margin-top: 18px; min-height: 3em; }

/* the map */
.map { border: 1px solid var(--edge); background: var(--panel); }
.map img { display: block; width: 100%; height: auto; }

/* the list */
.join { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .join { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.field { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.field input[type="email"] {
  flex: 1 1 260px; min-height: 49px; padding: 12px 14px; font: 15px/1.2 inherit;
  background: #0b0c0d; color: var(--text); border: 1px solid var(--edge);
}
.field input[type="email"]::placeholder { color: #7c8187; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note { font-size: 13px; color: var(--sub); margin-top: 10px; }
.result { margin-top: 14px; font-size: 14px; min-height: 1.6em; }
.result.ok { color: var(--good); }
.result.bad { color: var(--bad); }

footer { padding-block: 34px; color: var(--sub); font-size: 13px; }
footer .brand { display: block; margin-bottom: 8px; }
footer a { text-decoration: underline; }

/* a marked gap: something that must be settled before this page is published */
.todo { background: #4a3f12; color: #ffe9a3; padding: 1px 7px; border-radius: 4px; }

/* long-form pages (privacy) */
.doc { max-width: 760px; margin: 0 auto; padding-block: clamp(36px, 6vw, 72px); }
.doc h2 { font-size: clamp(22px, 3.4vw, 30px); margin: 30px 0 10px; }
.doc ul { padding-left: 20px; max-width: 62ch; }
.doc li { margin-bottom: 8px; }

/* a plain panel of words inside a .frame */
.panel-body { padding: 16px 18px; }
.panel-body p:last-child { margin-bottom: 0; }

/* the top of a page that is only words */
.doc-head { border-bottom: 1px solid var(--edge); }
.doc-head h1 { font-size: clamp(34px, 8vw, 56px); margin-bottom: 8px; }