/* ===========================================================================
   CryptoWar — landing page

   Built on the game's own instrument palette so the site reads as part of the
   same object: two team colours plus materiel amber on near-black.

   Colour is semantic here, never decorative:
     blue / red  = territory and team, only ever that
     brass       = WAR, payouts and the single call to action
     neutrals    = everything else

   The page's structural device is the frontline itself. `landing.js` runs the
   game's contour simulation down the length of the document, so the rule
   dividing the columns is a live line that bends toward whichever section you
   are reading — the same way presence bends it in a match.
   =========================================================================== */

:root {
  /* Ground and structure — lifted from public/style.css */
  --void: #090d11;
  --pit: #05080a;
  --steel: #141b22;
  --steel-hi: #1d2831;
  --edge: #2b3a46;
  --edge-soft: #1b242c;

  /* Type colours */
  --chalk: #e3e9ee;
  --dust: #7a8b9a;
  --dim: #4d5c69;

  /* Semantic accents */
  --blue: #3e9bff;
  --red: #ff4d5e;
  --brass: #e9b44c;
  --brass-deep: #8a6520;
  --good: #64d99a;

  /* Condensed signage face for display, wide mono for telemetry, grotesque for
     reading. The narrow/wide tension between the first two is the page's voice. */
  --display: 'Big Shoulders Display', 'Bahnschrift', 'Franklin Gothic Medium', 'Arial Narrow', sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: 220px;   /* the channel the contour lives in */
  --shell: 1280px;
  --pad: clamp(20px, 5vw, 64px);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--void);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* The contour sits behind everything and is decorative to a screen reader. */
#spine {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

main, .nav, .foot { position: relative; z-index: 1; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 10px 16px;
  background: var(--brass);
  color: #16130a;
  font-family: var(--mono);
  font-size: 12px;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------------------
   Shared type
   --------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 18px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(34px, 4.6vw, 60px);
  margin-bottom: 22px;
}

.lede {
  font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.62;
  color: var(--dust);
  max-width: 46ch;
}
.lede-wide { max-width: 62ch; }

.micro {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--dim);
}

.micro-head {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 14px;
}

kbd {
  font-family: var(--mono);
  font-size: 0.82em;
  padding: 1px 5px;
  border: 1px solid var(--edge);
  color: var(--chalk);
}

/* ---------------------------------------------------------------------------
   Buttons — brass is the only action colour on the page
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  color: #16130a;
  background: linear-gradient(180deg, #f0c05e, #cf9a2c);
  border-bottom: 3px solid var(--brass-deep);
  transition: filter 140ms, transform 90ms;
}
.btn:hover { filter: brightness(1.09); }
.btn:active { transform: translateY(2px); border-bottom-width: 1px; }

.btn-sm {
  padding: 8px 16px 7px;
  font-size: 15px;
  letter-spacing: 0.16em;
}

.btn-lg {
  padding: 17px 34px 15px;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: 0.22em;
}

.btn-arrow { font-size: 0.7em; transform: translateY(-1px); }

/* ---------------------------------------------------------------------------
   Nav
   --------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--pad);
  background: linear-gradient(180deg, rgba(9,13,17,0.95) 60%, rgba(9,13,17,0));
  backdrop-filter: blur(3px);
}

.mark {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.mark-glyph {
  font-size: 18px;
  letter-spacing: -3px;
  color: var(--brass);
}
.mark-word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: 0.03em;
}
.mark-word em { font-style: normal; color: var(--brass); }

.nav-right { display: flex; align-items: center; gap: 16px; }

/* Community links stay neutral. Brass is the deploy button's alone, so the one
   thing we want people to do stays the one bright thing on the bar. */
.social { display: flex; align-items: center; gap: 4px; }
.social a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--dust);
  border: 1px solid transparent;
  transition: color 140ms, border-color 140ms, background 140ms;
}
.social a:hover {
  color: var(--chalk);
  border-color: var(--edge);
  background: var(--steel);
}
.social svg { width: 15px; height: 15px; fill: currentColor; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.live-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--dust);
  white-space: nowrap;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
  animation: pulse 1.8s ease-in-out infinite;
}
.live-pill.is-down .live-dot { background: var(--dim); box-shadow: none; animation: none; }
@keyframes pulse { 50% { opacity: 0.3; } }

/* ---------------------------------------------------------------------------
   Band: the one place section rhythm is declared.

   Three tracks — left column, the contour's channel, right column — so text
   never sits under the line.
   --------------------------------------------------------------------------- */

.band {
  display: grid;
  grid-template-columns: 1fr var(--gutter) 1fr;
  width: min(var(--shell), 100%);
  margin: 0 auto;
  padding: clamp(90px, 13vh, 150px) var(--pad);
}

.col-left { grid-column: 1; }
.col-right { grid-column: 3; }
.col-wide { grid-column: 1 / -1; }

.band-wide { --gutter: 0px; }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.hero {
  grid-template-columns: 1fr;
  align-content: center;
  min-height: 88vh;
  padding-top: clamp(40px, 8vh, 90px);
}

/* Everything in the hero stays left of the contour. The right third is left to
   the live front, its contested band and its pressure ticks — that emptiness is
   the point, not a gap waiting to be filled. */
.hero-inner { grid-column: 1; max-width: min(600px, 54%); }

.hero-title {
  font-size: clamp(52px, 9.4vw, 132px);
  line-height: 0.84;
  letter-spacing: -0.005em;
  margin-bottom: 26px;
}
.hero-title em { font-style: normal; color: var(--brass); }

.hero .lede { max-width: 52ch; }

.hero-act {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 38px;
}

.hero-note {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--dust);
}

/* Live readout — telemetry for the curve drawn through the hero */
.readout {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0;
  max-width: min(600px, 54%);
  margin-top: clamp(48px, 9vh, 96px);
  border-top: 1px solid var(--edge);
  padding-top: 16px;
}

.readout-cell {
  flex: 0 0 auto;
  min-width: 132px;
  padding-right: 32px;
}

.readout dt {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
}

.readout dd {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--chalk);
}

.readout .split { display: flex; align-items: baseline; gap: 4px; }
.readout .slash { color: var(--dim); }
.t-blue { color: var(--blue); }
.t-red { color: var(--red); }

.readout-caption {
  flex: 1 0 100%;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--edge-soft);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--dim);
}

/* ---------------------------------------------------------------------------
   Property list — labelled behaviours of the line
   --------------------------------------------------------------------------- */

.props {
  margin-top: 34px;
  border-top: 1px solid var(--edge-soft);
}
.props > div {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--edge-soft);
}
.props dt {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  padding-top: 3px;
}
.props dd {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--dust);
}

.aside {
  margin-top: 26px;
  padding: 14px 18px;
  border-left: 2px solid var(--brass);
  background: rgba(20,15,4,0.5);
  font-size: 14px;
  line-height: 1.6;
  color: var(--dust);
}
.aside strong { color: var(--brass); font-weight: 600; }

/* ---------------------------------------------------------------------------
   The loop — a genuine sequence, so it is genuinely numbered
   --------------------------------------------------------------------------- */

/* Two columns of three. The steps are a real sequence, so they carry real
   numbers — set inline with the heading rather than in their own track, which
   keeps each step a plain block and the whole loop about a screen tall. */
.loop {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
  margin-top: 30px;
}
.loop > li {
  counter-increment: step;
  padding: 14px 0 16px;
  border-top: 1px solid var(--edge-soft);
}
.loop h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 21px;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.loop h3::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--blue);
}
.loop p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--dust);
}

/* ---------------------------------------------------------------------------
   Field plates, arsenal table, classes
   --------------------------------------------------------------------------- */

/* Stacked, not columned. These sit in a side column roughly 460px wide, where
   three tracks would leave each plate about 150px and wrap every line to two
   words. Title and text side by side keeps each plate one tight block. */
.plates {
  display: grid;
  gap: 1px;
  margin-top: 34px;
  background: var(--edge-soft);
  border: 1px solid var(--edge-soft);
}
.plate {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 20px;
  background: var(--void);
  padding: 18px 20px;
}
.plate h3 {
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--chalk);
  padding-top: 2px;
}
.plate p { font-size: 13.5px; line-height: 1.6; color: var(--dust); }

.arsenal { margin-top: 44px; }
.arsenal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--edge);
}
.arsenal-head h3 { font-size: 22px; letter-spacing: 0.1em; }
.arsenal-head .micro { max-width: 34ch; text-align: right; }

.arsenal table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.arsenal th {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: left;
  padding: 10px 8px 8px 0;
}
.arsenal td {
  font-size: 11.5px;
  color: var(--dust);
  padding: 7px 8px 7px 0;
  border-top: 1px solid var(--edge-soft);
}
/* Right-aligned figures still need a gap before the next column, or the range
   runs straight into its source. */
.arsenal .num { text-align: right; padding-right: 22px; }
.arsenal th.num { padding-right: 22px; }
.arsenal .w-name { color: var(--chalk); }
.arsenal tr.is-starter .w-name { color: var(--dust); }
.arsenal .w-src { font-size: 9.5px; letter-spacing: 0.08em; color: var(--dim); }
.arsenal .empty td { color: var(--dim); font-size: 11px; }

.classes { margin-top: 40px; }
.class-list { list-style: none; display: grid; gap: 1px; background: var(--edge-soft); border: 1px solid var(--edge-soft); }
.class-list > li { background: var(--void); padding: 13px 16px; }
.class-list .empty { color: var(--dim); font-family: var(--mono); font-size: 11px; }
.cls-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 3px; }
.cls-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cls-stat {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.cls-blurb { font-size: 13.5px; color: var(--dust); }

/* ---------------------------------------------------------------------------
   Economy
   --------------------------------------------------------------------------- */

.pays { margin-top: 34px; }
.pay-list { list-style: none; border-top: 1px solid var(--edge-soft); margin-bottom: 12px; }
.pay-list > li {
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--edge-soft);
}
.pay-k {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brass);
  padding-top: 2px;
}
.pay-v { font-size: 14px; line-height: 1.55; color: var(--dust); }

.disclosure {
  margin-top: 36px;
  padding: 20px 22px;
  border: 1px solid var(--edge);
  border-left: 3px solid var(--brass);
  background: var(--steel);
}
.disclosure-tag {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 10px;
}
.disclosure p { font-size: 14.5px; line-height: 1.65; color: var(--dust); }
.disclosure strong { color: var(--chalk); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Allocation — read as territory, using the game's zone strip
   --------------------------------------------------------------------------- */

.alloc {
  display: flex;
  gap: 2px;
  height: 132px;
  margin-top: 30px;
  padding: 2px;
  background: var(--pit);
  border: 1px solid var(--edge);
  box-shadow: inset 0 2px 14px rgba(0,0,0,0.7);
}
.alloc-seg {
  flex: var(--w);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 14px;
  min-width: 0;
  overflow: hidden;
}
.alloc-seg[data-tone="launch"] { background: repeating-linear-gradient(135deg, #1a232b 0 7px, #131a21 7px 14px); }
.alloc-seg[data-tone="drop"] { background: linear-gradient(180deg, #1e5a8f 0%, #0f2f4c 100%); }
.alloc-seg[data-tone="grant"] { background: linear-gradient(180deg, #8f2530 0%, #4c1219 100%); }

.alloc-pct {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 0.8;
  color: var(--chalk);
}
.alloc-name {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(227,233,238,0.72);
  white-space: nowrap;
}

.alloc-notes {
  display: grid;
  gap: 26px;
  margin-top: 30px;
}
.alloc-notes h3 {
  font-size: 19px;
  letter-spacing: 0.06em;
  margin-bottom: 7px;
  color: var(--brass);
}
.alloc-notes p { font-size: 14.5px; line-height: 1.6; color: var(--dust); }

.alloc-foot {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--edge-soft);
  font-size: 14px;
  line-height: 1.65;
  color: var(--dust);
  max-width: 72ch;
}

/* ---------------------------------------------------------------------------
   The board — one ranking, two fronts
   --------------------------------------------------------------------------- */

.board {
  display: grid;
  gap: 1px;
  margin-top: 34px;
  background: var(--edge);
  border: 1px solid var(--edge);
}
.board-col { background: var(--void); padding: 20px; }
.board-col > header {
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--edge-soft);
}
.board-col h3 { font-size: 21px; letter-spacing: 0.1em; margin-bottom: 5px; }
.board-col[data-front="field"] h3 { color: var(--blue); }
.board-col[data-front="repo"] h3 { color: var(--red); }

.board-list { list-style: none; counter-reset: rank; }
.board-list > li {
  counter-increment: rank;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid rgba(43,58,70,0.35);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.board-list > li::before {
  content: counter(rank);
  font-size: 10px;
  color: var(--dim);
}
.bl-name { color: var(--chalk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-val { color: var(--brass); font-weight: 600; }
.board-list .empty { color: var(--dim); font-size: 11px; }
.board-list .empty::before { content: ''; }

.board-list .empty-state {
  display: block;
  border-bottom: none;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--dust);
  padding-top: 10px;
}
.board-list .empty-state::before { content: ''; }
.empty-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--chalk);
  margin-bottom: 7px;
}

/* ---------------------------------------------------------------------------
   Deploy
   --------------------------------------------------------------------------- */

.deploy { padding-bottom: clamp(110px, 16vh, 190px); }

.deploy-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.deploy-title {
  font-size: clamp(34px, 6vw, 76px);
  max-width: 16ch;
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--edge-soft);
  background: var(--pit);
}
.foot-inner {
  display: grid;
  gap: 18px;
  width: min(var(--shell), 100%);
  margin: 0 auto;
  padding: 34px var(--pad) 44px;
}
.foot-mark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.14em;
  color: var(--dust);
}
.foot-mark span { color: var(--brass-deep); letter-spacing: -3px; margin-right: 6px; }
.foot-legal {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--dim);
  max-width: 66ch;
}
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-links a {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dust);
  text-decoration: none;
  border-bottom: 1px solid var(--edge);
  padding-bottom: 2px;
}
.foot-links a:hover { color: var(--brass); border-bottom-color: var(--brass); }

/* ---------------------------------------------------------------------------
   Wider viewports
   --------------------------------------------------------------------------- */

@media (min-width: 760px) {
  .alloc-notes { grid-template-columns: repeat(3, 1fr); }
  .board { grid-template-columns: 1fr 1fr; }
  .hero-inner { padding-right: 40px; }
}

/* ---------------------------------------------------------------------------
   Narrow viewports — the contour retreats to the left margin and every column
   becomes one column beside it.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --gutter: 0px; }

  .band { grid-template-columns: 1fr; padding-left: calc(var(--pad) + 22px); }
  .col-left, .col-right, .col-wide { grid-column: 1; }

  .lede, .lede-wide { max-width: none; }
  .hero-inner, .readout { max-width: none; }

  .readout-cell { min-width: 108px; padding-right: 22px; }
  .readout dd { font-size: 18px; }
  .loop { grid-template-columns: 1fr; }

  .arsenal-head .micro { text-align: left; }
  .props > div { grid-template-columns: 92px 1fr; gap: 12px; }
  .plate { grid-template-columns: 1fr; gap: 7px; }
  .pay-list > li { grid-template-columns: 1fr; gap: 3px; }
  .alloc { height: 108px; }
  .alloc-name { font-size: 8.5px; letter-spacing: 0.1em; }
}

@media (max-width: 620px) {
  /* The hero readout carries the live count on small screens, so the nav can
     drop it and keep the community links and Deploy reachable. */
  .live-pill { display: none; }
  .nav { padding-left: 16px; padding-right: 16px; }
  .nav-right { gap: 8px; }
}

@media (max-width: 560px) {
  .alloc { flex-direction: column; height: auto; }
  .alloc-seg { flex: none; min-height: 74px; }
  .arsenal table { font-size: 10px; }
  .arsenal th:nth-child(5), .arsenal td:nth-child(5) { display: none; }
  .hero-act { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}