/* =============================================================
   Boldmarsk — coming soon
   Static, single page. Mobile-first.

   A "blueprint" layout matched 1:1 to the supplied design frame
   (1912 × 1142): a white page divided by 1px black hairlines that
   run edge to edge — five vertical, two horizontal — with content
   left-aligned inside specific cells:

     - kicker        foot of the top band, column 3
     - wordmark      middle band, across columns 2–3
     - pillars       top of the bottom band, column 2
     - tagline       top of the bottom band, column 3
     - copyright     foot of the bottom band, column 4

   The lines are real items in the SAME CSS Grid the content uses,
   each pinned to the start edge of a track, so they can't drift out
   of alignment with the content.

   Every size and offset is written as frame pixels × --u, where
   --u = 1/1912 of the viewport width, so the page is the frame
   scaled to any wide screen. Band heights follow the viewport height
   in the frame's proportions.

   Below 58rem wide the grid collapses to one stacked column and the
   lines hide.

   Palette: black on white only. Type: Barlow Regular throughout.
   The wordmark is an inline SVG (see #logo-drag) — draggable, with
   a trailing-echo bounce-back; see dragLogo() in script.js.
   ============================================================= */

:root {
  color-scheme: light;

  --bg:       #ffffff;
  --text:     #000000;
  --gridline: #000000;
  --hairline: 1px;

  /* One frame pixel: the design frame is 1912px wide. */
  --u: calc(100vw / 1912);

  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset-ish ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
p, h1 { margin: 0; font: inherit; }

/* ---------- Frame (mobile: stacked) ---------- */
.frame {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem;
}

.divider { display: none; pointer-events: none; background: var(--gridline); }

.cell--copyright { margin-top: auto; }

/* ---------- Logo (drag + bounce-back) ---------- */
/* viewBox is the logo's own natural box (0 0 2665 557), so CSS width/height
   below set exactly how much layout space it occupies — same as the old
   <img> did. overflow:visible lets the dragged head and its echo trail
   draw outside that box (e.g. off to the side) without affecting layout;
   an ancestor's overflow can still clip it, which is intentional (keeps a
   wild drag from spilling past the page). */
.cell--logo {
  display: block;
  width: min(85vw, 26rem);
  height: auto;
  overflow: visible;
  touch-action: none; /* let JS own drag gestures instead of the browser (scroll/zoom) */
}

#logo-hitzone {
  fill: transparent;
  cursor: default;
}
.drag-ready #logo-hitzone { cursor: grab; }
.drag-ready #logo-hitzone:active { cursor: grabbing; }

/* Belt-and-suspenders alongside pointerdown's preventDefault() in script.js:
   without this, a fast drag can still start selecting the surrounding text
   in some browsers. */
.dragging {
  user-select: none;
  -webkit-user-select: none;
}

/* Trailing echoes: outline-only copies of the wordmark. Stroke width is
   fixed in screen pixels (vector-effect="non-scaling-stroke", set in the
   markup) rather than viewBox units, so it reads the same weight at every
   breakpoint — like the grid hairlines. */
#logo-echoes use {
  fill: none;
  stroke: #000;
}

/* ---------- Entrance animation ---------- */
.js .cell { opacity: 0; translate: 0 10px; }
.js.ready .cell {
  opacity: 1;
  translate: 0 0;
  transition: opacity 650ms var(--ease), translate 650ms var(--ease);
}
.js.ready .cell--kicker    { transition-delay: 0ms; }
.js.ready .cell--logo      { transition-delay: 90ms; }
.js.ready .cell--pillars   { transition-delay: 180ms; }
.js.ready .cell--tagline   { transition-delay: 180ms; }
.js.ready .cell--copyright { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .js .cell, .js.ready .cell { opacity: 1; translate: 0 0; transition: none; }
}

/* ---------- Wide screens: the frame ---------- */
/* Tracks measured off the frame, in frame pixels:
     columns 31.5 | 368 | 556 | 552 | 362.5 | 42   (lines at 31.5, 399.5, 955.5, 1507.5, 1870)
     rows    437.5 | 281 | 423.5                  (lines at 437.5, 718.5)                     */
@media (min-width: 58rem) {
  body {
    font-size: calc(25 * var(--u));
    line-height: calc(30 * var(--u));
  }

  .frame {
    height: 100svh;
    min-height: 0;
    display: grid;
    grid-template-columns: 31.5fr 368fr 556fr 552fr 362.5fr 42fr;
    grid-template-rows: 437.5fr 281fr 423.5fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  /* Hairlines: each sits on the start edge of its track and runs edge to edge. */
  .divider { display: block; }
  .divider--v { width: var(--hairline); grid-row: 1 / -1; justify-self: start; height: 100%; }
  .divider--h { height: var(--hairline); grid-column: 1 / -1; align-self: start; width: 100%; }
  .divider--v1 { grid-column: 2; }
  .divider--v2 { grid-column: 3; }
  .divider--v3 { grid-column: 4; }
  .divider--v4 { grid-column: 5; }
  .divider--v5 { grid-column: 6; }
  .divider--h1 { grid-row: 2; }
  .divider--h2 { grid-row: 3; }

  .cell--kicker {
    grid-column: 4; grid-row: 1;
    align-self: end; justify-self: start;
    margin: 0 0 calc(21 * var(--u)) calc(25.5 * var(--u));
  }

  .cell--logo {
    grid-column: 3 / 5; grid-row: 2;
    align-self: start; justify-self: start;
    width: calc(1076 * var(--u));
    margin: calc(22.5 * var(--u)) 0 0 calc(17.5 * var(--u));
  }

  .cell--pillars {
    grid-column: 3; grid-row: 3;
    align-self: start; justify-self: start;
    margin: calc(22 * var(--u)) 0 0 calc(17.5 * var(--u));
  }

  .cell--tagline {
    grid-column: 4; grid-row: 3;
    align-self: start; justify-self: start;
    margin: calc(12 * var(--u)) 0 0 calc(25.5 * var(--u));
  }

  .cell--copyright {
    grid-column: 5; grid-row: 3;
    align-self: end; justify-self: start;
    margin: 0 0 calc(18.5 * var(--u)) calc(24.5 * var(--u));
  }
}