/* blava — minimal, grid-aligned. Bauhaus / Swiss (International Typographic
   Style): black + fine 14px grid, flush-left type, boxes that are holes in the
   grid, asymmetric composition on active negative space. */

:root {
  /* RULE: --bg is the ONE background. Page and every box interior use it (a box
     is a hole in the grid over this same surface — never a different black). */
  --bg: #0d0d0d;
  --fg: #ffffff;
  --grid: rgba(255, 255, 255, 0.14);
  --gridline: #2f2f2f;        /* = white 0.14 flattened over --bg; a box border == a grid line */
  --muted: #7d7d7d;

  --yellow: #ffd500;
  --blue:   #1b4bd8;
  --red:    #e30513;

  --grotesk: "Poppins", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --cell: 14px;               /* the grid unit — everything snaps to it */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  position: relative;
  height: var(--page-h, 100vh);   /* JS snaps to a whole number of cells */
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--grotesk);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Grid (z0) and animation plane (z1); boxes sit on top (z2) ── */
.grid-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: left bottom;   /* anchor lines to the bottom-left corner */
  pointer-events: none;
}
.anim {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
/* Coloured lines that trace paths along the grid (90° turns, squares). Drawn
   and undrawn via stroke-dashoffset — no opacity fade. Hard mitre corners. */
.anim svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anim polyline {
  fill: none; stroke-width: 2;
  stroke-linecap: butt; stroke-linejoin: miter;
}

/* ── Box rules (shared) — a box is a hole in the grid ────────────
   Grid-aligned on all four sides: border-box insets the right/bottom borders
   1px, so width must be 14n+1 and the vertical padding (13+14) makes height
   ≡ 1 mod 14 → all four borders land on grid lines. */
.box {
  position: absolute; z-index: 2;
  background: var(--bg);              /* interior == page background */
  border: 1px solid var(--gridline); /* == a grid line */
  padding: 13px 13px 14px;           /* even 1-cell module all round */
  color: var(--fg);
}

/* logo box — top-left. Same typo / size / colour as the statement. */
.logo-box {
  top: 70px; left: 70px;
  width: 113px;                      /* 14*8 + 1 — smallest cell width that holds "blava" */
  font-weight: 300; font-size: 26px; line-height: 28px; letter-spacing: -0.01em;
  text-decoration: none;
}

/* statement box — bottom-left */
.hero-copy {
  left: 70px; bottom: 69px;
  width: 645px;                      /* 14*46 + 1 */
  text-align: left;                  /* flush-left — never centre */
}
.hero-h {
  font-weight: 300; font-size: 26px; line-height: 28px; letter-spacing: -0.01em;
}
/* inline link at the end of the phrase — same type/size as the text, just
   dimmer so it reads as a link. Arrow lifts up-right on hover. */
.manifesto-link {
  color: var(--muted); text-decoration: none;
  white-space: nowrap; margin-left: 0.35em;
  transition: color .2s;
}
.manifesto-link:hover { color: var(--fg); }
.manifesto-link .arrow { display: inline-block; transition: transform .2s; }
.manifesto-link:hover .arrow { transform: translate(3px, -3px); }

@media (max-width: 860px) {
  /* stay on the 14px grid at EVERY size — a 2-cell margin (28 = 14×2), never an
     off-grid offset. The box is always a hole in the grid, not a block on top of it. */
  .logo-box { top: 28px; left: 28px; }
}