/* TrueLake coming-soon page: one page on one Navy ground. The hero carries the lake drawn by
   lake.js; Build, Activate, Own follows; a single footer line closes it.
   Every color, space, radius and type value comes from truelake-tokens.css (the design-system
   export); this file only arranges them. lake.js measures .hero, .hero__title and .hero__lead
   to place the horizon and the quiet zone, so their boxes are part of the lake's layout.
   The page is one Navy ground: index.html sets data-theme="dark" on <html>, so the semantic
   tokens (bg-canvas is Navy, text-primary is Pearl) carry their dark values and no ramp step
   is needed. */

@font-face { font-family: "Exo"; src: url("../fonts/exo-latin.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin.woff") format("woff"); font-weight: 200 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg-canvas); }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
h1, h2, h3, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text-link-hover); }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

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

/* 12 columns with space-6 gutters from breakpoint-lg, 8 from breakpoint-md, one below. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) { .container { padding-inline: var(--space-10); } }
@media (min-width: 1280px) { .container { padding-inline: var(--space-16); } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.lake { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }

/* The top bar: the logo, and who makes it. Quiet, plain text, nothing to click.
   The credit sits on the wordmark's baseline, not on the center of the logo box: the
   wordmark's baseline is 0.885 of the logo's height, 4 px above its bottom edge at 35 px.
   The credit is label size (14 px, 600) on a 16 px line, a deliberate optical deviation from
   label's 20 px: on a single line the leading only places the baseline, and 16 px (on the
   4 px scale) puts it the same 4 px above the line's bottom, so bottom alignment puts both
   on one line. */
.hero__bar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
  padding-top: var(--space-6);
}
@media (min-width: 768px) { .hero__bar { padding-top: var(--space-10); } }
.hero__logo { flex: none; height: 28px; width: auto; }
@media (min-width: 768px) { .hero__logo { height: 35px; } }
.hero__status {
  font-size: 14px; line-height: 16px; font-weight: 600; color: var(--text-secondary);
  text-align: right;
}
.hero__status-lead { font-weight: 400; color: var(--text-muted); }
.hero__status-name { white-space: nowrap; }
/* A phone has no room beside the logo for one line: the credit sets in two lines at caption
   size. DELIBERATE OPTICAL DEVIATION: the lines are 14 px, not caption's 16, because the
   leading is what places the last baseline. Measured at 375 px, the wordmark's baseline is at
   48.8; 14 px lines put the credit's last baseline at 48.5, and the pair spans exactly the
   28 px logo. Caption's 16 px lines put it at 47.5, 1.3 px high, which no step of the spacing
   scale can correct. */
@media (max-width: 479px) {
  .hero__status { font-size: 12px; line-height: 14px; }
  .hero__status-lead { display: block; }
}
@media (max-width: 359px) { .hero__logo { height: 24px; } }

.hero__body {
  align-self: start;
  padding-block: var(--space-12) var(--space-16);
}
@media (min-width: 768px) { .hero__body { padding-top: var(--space-20); } }
@media (min-width: 1280px) and (min-height: 820px) { .hero__body { padding-top: var(--space-24); } }
/* A tall screen (a portrait tablet, a 1080 p desktop) puts the horizon at half the height,
   well below the lead: the block moves down by space-8 so it sits midway between the bar and
   the water instead of hanging under the bar. */
@media (min-width: 768px) and (min-height: 960px) { .hero__body { padding-top: calc(var(--space-24) + var(--space-8)); } }
/* A short laptop (1366 x 768, 1280 x 720) sets the 72 px headline under a shorter top space,
   so the horizon rises and the lake keeps about two fifths of the screen, as it does on the
   taller desktops, instead of a compressed band under the lead. */
@media (min-width: 1280px) and (max-height: 800px) { .hero__body { padding-top: var(--space-12); } }

/* overline: Source Sans 3 700, 12 / 16, +0.08em, capitals */
.hero__eyebrow {
  margin-bottom: var(--space-4);
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
}
/* display-black: Exo 900, -0.012em; 56 / 1.05 from the tablet up. A phone sets it at the
   display size, 40 / 44. */
.hero__title {
  max-width: 14.5em;
  font-family: var(--font-display); font-weight: 900; letter-spacing: -0.012em;
  font-size: 40px; line-height: 44px;
  text-wrap: balance;
}
/* Phones narrower than 375 px scale the 40 px size down so the headline keeps its three lines
   ("platform you own." measures 8.53 em); the leading scales with it (44 / 40). */
@media (max-width: 374px) { .hero__title { font-size: calc((100vw - 2 * var(--space-4)) / 8.6); line-height: 1.1; } }
@media (min-width: 768px) { .hero__title { font-size: 56px; line-height: 1.05; } }
/* body-lg. The measure is set so each line closes on a comma at 18 and 20 px (72, 64 and 38
   characters); a phone balances its lines instead. */
.hero__lead {
  max-width: 30.5em;
  margin-top: var(--space-6);
  font-size: 18px; line-height: 28px; color: var(--text-secondary);
}
@media (max-width: 639px) { .hero__lead { text-wrap: balance; } }
/* MARKETING DEVIATION, pending the owner's sign-off. From 1280 px the headline is 72 px and
   the lead 20 / 30, larger than the type table's display-black (56 / 1.05) and body-lg
   (18 / 28), and the 30 px leading is off the 4 px scale. Both sizes come from the base the
   owner chose, so they are kept as they were. They stand only with the owner's explicit
   sign-off; without it, delete this block to cap at 56 px and 18 / 28. */
@media (min-width: 1280px) {
  .hero__title { font-size: 72px; }
  .hero__lead { font-size: 20px; line-height: 30px; }
}

/* ---------- Build. Activate. Own. ----------
   Typeset as a three-row table: the word, its one-line meaning, then the supporting copy.
   Read down the left edge, the three words are the section's title. */
.story { padding-block: var(--space-16); }
/* The last row's own padding already sits under the last line, so the section closes one
   step shorter than it opens and the footer stays with the page. */
@media (min-width: 768px) { .story { padding-block: var(--space-20) var(--space-16); } }
@media (min-width: 1024px) { .story { padding-block: var(--space-24) var(--space-16); } }

/* The section opens on a separator (border-default) and the rows part on dividers
   (border-subtle), so the first rule reads as the start of the part. */
.story__list { border-top: 1px solid var(--border-default); }
.story__item { padding-block: var(--space-8); }
.story__item + .story__item { border-top: 1px solid var(--border-subtle); }

/* Exo 900, one step below the hero headline at every width, so the page keeps one top line:
   32 / 36 under the 40 px phone headline, the display size 40 / 44 under the 56 px tablet
   headline, and display-black 56 / 1.05 under the 72 px desktop headline. The pull of 0.04 em
   is the stem's side bearing in Exo Black: B and O then meet the rule's left end, and the
   diagonal of A hangs by the same amount, as diagonals should. */
.story__word {
  margin-left: -0.04em;
  font-family: var(--font-display); font-weight: 900; letter-spacing: -0.012em;
  font-size: 32px; line-height: 36px;
}
/* heading-3 */
.story__claim {
  margin-top: var(--space-4);
  font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 28px;
  color: var(--text-primary);
  text-wrap: balance;
}
/* 32.5 em holds the copy between 59 and 77 characters a line at 18 px, with an even rag. */
.story__body {
  max-width: 32.5em;
  margin-top: var(--space-3);
  color: var(--text-secondary);
}
/* Below 552 px the column is narrower than that measure and the breaks move with every width;
   greedy wrapping then leaves two-word last lines ("before handover.", "your context.") at
   common phone widths, and Firefox has no text-wrap: pretty. A phone balances these
   paragraphs, as it balances the lead: audited at every width from 320 to 639 px, no last
   line is shorter than 0.7 of the line above it, and the desktop measure is untouched. */
@media (max-width: 639px) { .story__body { text-wrap: balance; } }

/* heading-2 from the tablet up, where the meaning holds one line */
@media (min-width: 768px) {
  .story__item { padding-block: var(--space-10); }
  .story__word { font-size: 40px; line-height: 44px; }
  .story__claim { margin-top: var(--space-5); font-size: 24px; line-height: 32px; font-weight: 700; }
  .story__body { font-size: 18px; line-height: 28px; }
}
/* Both columns hang from one line under the rule: with these line heights the cap height
   of the word and of the meaning sits about 6 px below the top of each box (Exo caps are
   0.75 em), so top alignment is cap alignment, the way a ledger row reads. */
@media (min-width: 1024px) {
  .story__item {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6);
    align-items: start;
  }
  .story__word { grid-column: 1 / span 4; }
  .story__text { grid-column: 5 / span 8; }
  .story__claim { margin-top: 0; }
}
/* With the full container the word takes five columns and the text the other seven: the
   widest meaning still holds one line, and the copy keeps its 32.5 em measure. */
@media (min-width: 1280px) {
  .story__word { grid-column: 1 / span 5; font-size: 56px; line-height: 1.05; }
  .story__text { grid-column: 6 / span 7; }
}

/* ---------- Footer ----------
   One line under a hairline of the text width, so every rule on the page starts and ends on
   the same two edges: the copyright on the left, the maker's address on the right, as the
   top bar sets the logo against the maker's name. */
.footer__line {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--space-8);
  font-size: 14px; line-height: 20px; color: var(--text-muted);
}
/* caption size on a phone, where both parts then still share one line from 360 px up;
   narrower, the address drops under the copyright, flush left */
@media (max-width: 479px) { .footer__line { font-size: 12px; line-height: 16px; } }