/* nxtlevel.systems - placeholder page
 *
 * The wordmark is the Datum construction from
 * ops-deck/projects/nxt-level-systems/brand/datum/component/wordmark.css.
 * Class names are kept identical to that file on purpose, so the two stay
 * diffable. Read brand/datum/DECISIONS.md before changing any value in the
 * wordmark block: every number there is script-measured and two verifiers
 * gate it.
 *
 * Page palette and the contact line come from brand/identity.md. Every figure
 * in that document is measured; do not adjust values here without
 * re-measuring there.
 *
 * The CloudFront CSP is default-src 'none' with style-src 'self' and
 * font-src 'self', so this file must stay external, the fonts must stay
 * self-hosted, and the page must carry no inline style attribute or style
 * block. There is no script-src directive at all, which is why the wordmark's
 * size bands below are media queries rather than the component's variant
 * classes: nothing can swap a class on this page.
 */

/* ---------------------------------------------------------------- fonts ---
 *
 * DejaVu Sans Mono, subset to Latin plus common punctuation and served under
 * the family name "NLS Mono": 12,264 and 11,504 bytes.
 *
 *   Copyright (c) 2003 by Bitstream, Inc. All Rights Reserved.
 *   Bitstream Vera is a trademark of Bitstream, Inc.
 *   DejaVu changes are in the public domain.
 *
 * The Bitstream Vera licence requires the copyright, trademark and permission
 * notices to travel with every copy of the Font Software. They ship three
 * ways: inside each woff2 name table, in the comment above, and in full at
 * /fonts/LICENSE-dejavu.txt. The subset is a modification, so it is renamed,
 * as that licence requires of any modified copy; "NLS Mono" contains neither
 * "Bitstream" nor "Vera".
 *
 * block, not swap, on all three faces. The whole meaning of the mark is the
 * split between its two halves. During a swap period a fallback renders both
 * halves at one weight, so the wordmark would flash WRONG before it flashed
 * right. A short invisible period is the lesser fault on a page that is only
 * a wordmark. */

@font-face {
  font-family: "NLS Mono";
  src: url("/fonts/dejavu-sans-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "NLS Mono";
  src: url("/fonts/dejavu-sans-mono-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* One file carries the whole 400-700 axis: Familjen Grotesk is variable, and
 * Google's twelve font-face blocks resolve to three woff2 files, one per
 * subset. Latin is all this page needs. See identity.md section 2.
 *
 * It is now carrying one line of text. Kept deliberately: the wordmark is a
 * logotype, not the page's typeface, and the body face is an open decision
 * that cannot be settled from a single line that happens to be an identifier.
 * Revisit when the real page has prose. */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("/fonts/familjen-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
}

/* --------------------------------------------------------------- tokens --- */

:root {
  --paper:     #E4E6DF;  /* page ground */
  --sheet:     #F5F6F1;  /* raised panels */
  --ink:       #13171A;  /* primary type, the strong half of the mark, square */
  --deck:      #2B3236;  /* secondary type, the contact line */
  --graphite:  #5B5F59;  /* identity.md secondary display grey, unused here */
  --rule:      #C3C7BD;  /* hairlines only, never type */
  --verdigris: #2E6A5C;  /* single accent */

  /* The mark's own two greys. They are NOT --graphite: the Datum mark was
   * measured on its own ladder and its quiet half is a cool grey where
   * --graphite is warm, so substituting one shifts the mark's cast. See
   * brand/datum/README.md, Palette. */
  --mark-quiet: #6C7174;  /* the quiet half, "systems" */
  --mark-slate: #7F8285;  /* datum rule and origin triangle */
}

/* Dark values mirror the light ratios rather than being picked by eye:
 * graphite 5.18:1 against 5.17:1, deck 10.49:1 against 10.35:1, rule
 * 1.38:1 against 1.36:1. Verdigris is provisional at 5.84:1 and unused
 * on this page. identity.md section 3 defines light only; these are
 * derived here and owed back to it. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #13171A;
    --sheet:     #1C2124;
    --ink:       #F5F6F1;
    --deck:      #C3C7BD;
    --graphite:  #868B84;
    --rule:      #2B3236;
    --verdigris: #57A08B;

    /* The mark inverts, but NOT to the component's inverted tokens, because
     * that variant was measured against its own #16181A ground and this page
     * grounds on #13171A. Measured on this ground: of the four combinations
     * of ink and quiet available, #F5F6F1 over #868B84 gives the widest tonal
     * split at 3.20:1, against 2.89 / 2.85 / 2.57 for the others, with the
     * quiet half still at 5.18:1 on the ground. It is also the pair already
     * in this token block, so dark mode adds no new value here.
     *
     * The split is weaker than the light mode's 3.65:1 in every available
     * combination. Weight and the square still carry it; this is the ground
     * being darker, not a defect in the pair.
     *
     * The slate is the one new value: #626568 measures 3.07:1 on this ground,
     * matching the light slate's 3.07:1 on paper exactly, so the rule stays
     * as subordinate to the type in dark as it is in light. It deliberately
     * does not go to full paper the way the component's inverted variant
     * does; at this size on this ground that reads as a second wordmark. */
    --mark-quiet: #868B84;
    --mark-slate: #626568;
  }
}

/* ---------------------------------------------------------------- reset --- */

*, *::before, *::after { box-sizing: border-box }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- stage --- */

.stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.75rem;
  padding: 2rem 1.5rem;
}

/* --------------------------------------------------------------- lockup --- */

.lockup {
  margin: 0;
  font-weight: inherit;
}

/* -------------------------------------------------------------- wordmark ---
 *
 * Ported from brand/datum/component/wordmark.css. Two deviations from that
 * file, both forced by this page rather than chosen:
 *
 * 1. The palette is wired to the page tokens above instead of being declared
 *    here, so light and dark are one decision in one place.
 * 2. The size bands are media queries, not the component's --primary and
 *    --compact classes, because there is no script on this page to swap one.
 *    The band boundaries are the component's own: primary 40-64px, compact
 *    24-39px. Nothing about the geometry changed.
 *
 * Everything else is that file's construction verbatim, including the
 * asymmetric period gutter whose margins must keep summing to 0.12em. */

.nls-wordmark {
  --nls-quiet: var(--mark-quiet);
  --nls-ink:   var(--ink);
  --nls-datum: var(--mark-slate);

  display: inline-flex;
  flex-direction: column;
  align-items: stretch;

  font-family: "NLS Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
               "IBM Plex Mono", monospace;
  line-height: 1;
  letter-spacing: -0.03em;  /* at all sizes */
  white-space: nowrap;

  /* No faux bold. If a fallback without a real 700 ever resolves, the split
   * degrades to tone plus square rather than to a smeared synthetic bold. */
  font-synthesis: none;

  /* The one knob. The mark's rendered width is a fixed multiple of it,
   * because the face is monospaced: 15 characters at 0.60205em advance, less
   * 15 tracking steps of 0.03em, plus what the square and its gutter occupy.
   * That is 8.831em in this band and 8.816em in the primary band below, the
   * 0.015em being the square's extra width down here. The primary figure is
   * confirmed against the built reference, where the rule measures 1552
   * device pixels at 44px and scale 4, which is 8.818em.
   *
   * So the size is derived from the width the mark is allowed to have, not
   * guessed at in vw. Available width is 100vw less the stage's 3rem of
   * horizontal padding, and the divisor is 9.4 rather than 8.816 to leave
   * about 6.5% of air at the narrowest widths. Measured off the render at
   * fourteen viewport widths from 320px up: the narrowest slack is 16px at
   * 320px and no ink touches either edge at any width.
   *
   * This band is the component's COMPACT: 1px rule, no triangle, wider
   * square. It is the only band that fits a phone. Familjen at the same
   * point size was 6.18em wide against this face's 8.816em, so the clamp
   * that shipped with the Familjen lockup does not transfer. */
  font-size: clamp(1.5rem, calc((100vw - 3rem) / 9.4), 2.4375rem);
}

.nls-wordmark__row {
  display: flex;
  align-items: baseline;   /* the square sits ON the baseline, not optically centred */
}

/* The tokens are named for TONE, not for position: --nls-ink is the strong
 * tone and --nls-quiet is the quiet one, whichever half is wearing them.
 * On this build the strong half is the prefix. */

.nls-wordmark__prefix {
  font-weight: 700;
  color: var(--nls-ink);
}

.nls-wordmark__suffix {
  font-weight: 400;
  color: var(--nls-quiet);
}

/* ---------------------------------------------------------------- square --- */

/* A solid square on the baseline, replacing the round dot. This is the entire
 * personality budget of the mark, about 1.5% of total ink.
 *
 * Drawn as a border rather than a background, and so is the rule below.
 * Forced-colours mode force-adjusts background-color and border-color
 * independently, so a background-filled square can be flattened to the canvas
 * colour and vanish while the border-built triangle survives. Both as borders
 * means both are adjusted together, or neither is. */

.nls-wordmark__period {
  flex: none;
  width: 0.13em;
  height: 0;
  /* Asymmetric on purpose, and the two margins are NOT the whole story: the
   * 'l' brings 2.87px of right side bearing and the 's' brings 3.72px of
   * left, measured at 44px. At a symmetric gutter the square reads as a full
   * stop closing 'nxtlevel'. At 0.095 / 0.025 the ink gaps come out 7.00px
   * against 4.75px, which groups it with the suffix instead.
   *
   * KEEP margin-left + margin-right = 0.12em. The rendered width and the rule
   * length depend on that sum, not on how it is split. Move the square by
   * trading one against the other, never by changing the total. */
  margin: 0 0.025em 0 0.095em;
  border-top: 0.13em solid var(--nls-ink);
}

/* ------------------------------------------------------- datum and origin --- */

/* The rule spans the full rendered width of the wordmark by stretching to the
 * shrink-wrapped column, never by a pixel width. The triangle marks the
 * ORIGIN of the datum, so its left edge is flush with x = 0 of the wordmark.
 * It is not centred under the rule. */

.nls-wordmark__rule {
  height: 0;
  border-top: 1px solid var(--nls-datum);
  margin-top: 5px;
}

/* No triangle in the compact band. */
.nls-wordmark__triangle { display: none }

/* ------------------------------------------------------------ primary band ---
 *
 * 480px, and the number is a device class rather than a fit.
 *
 * The fit alone would allow 425px: the primary band floors at 40px, which
 * needs 40 x 9.4 = 376px of content plus the stage's 48px of padding, so
 * anything from 424px up holds it. 400px would not, and would overflow.
 *
 * But 425px cuts straight through the phone lineup in portrait. Measured on
 * the render, a 402px phone gets compact with a 1px rule and no origin
 * triangle while a 430px phone gets primary with a 2px rule and the triangle,
 * so two people holding current handsets see a structurally different mark.
 * The band is meant to track how much room the mark has, not which handset
 * someone bought.
 *
 * 480px puts every phone in portrait on one side of the line, with room above
 * the widest current handset at 440px, and leaves the primary lockup to
 * tablets, landscape and desktop, which is the audience that has the width
 * for the triangle to mean anything. */

@media (min-width: 480px) {
  .nls-wordmark {
    /* Caps at 3.5rem, the size the Familjen lockup shipped at. The mark is
     * still visibly larger there, because 8.816em of mono is 43% wider than
     * 6.18em of Familjen at the same point size. That is inherent to the
     * direction, not something the clamp can tune away. The component's band
     * allows 64px; it is not taken. */
    font-size: clamp(2.5rem, calc((100vw - 3rem) / 9.4), 3.5rem);
  }

  .nls-wordmark__period {
    /* The square shrinks in the primary band. It is the smallest element in
     * the mark and the first thing to turn to mush, so it is given
     * proportionally more ink where the raster is coarse, not less. */
    width: 0.115em;
    border-top-width: 0.115em;
  }

  .nls-wordmark__rule {
    border-top-width: 2px;
    margin-top: 7px;
  }

  .nls-wordmark__triangle {
    display: block;
    align-self: flex-start;   /* must not stretch with the rule */
    width: 0;
    height: 0;
    margin-top: 7px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid var(--nls-datum);   /* 12 wide x 8 tall, apex up */
  }
}

/* -------------------------------------------------------------- contact --- */

/* Familjen Grotesk, unchanged. deck rather than graphite: graphite conforms at
 * any size on its nominal value, but it only presents at about 2.2:1 once
 * rasterised at 16px, so it is a display-size colour. identity.md section 3.
 *
 * The address repeats the wordmark verbatim, so this line and the mark render
 * the same sixteen characters in two faces. That is a known open question and
 * not an oversight; it is not settled from a placeholder. */
.contact {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: .005em;
}

.contact a {
  color: var(--deck);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}

.contact a:hover,
.contact a:focus-visible {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.contact a:focus-visible {
  outline: 2px solid var(--verdigris);
  outline-offset: .35em;
  text-decoration: none;
}