/* Bluelink Studio site: the parts every public page shares.
   A dark room in the Bluelink Dashboard's graphite (its public/app.css), with gold as the one accent.
   The site's links sit down the right side as a HUD weapon list, set in B612, the typeface made
   for cockpit displays: each link is a slot with a code, a name and a status, and one slot is
   armed at a time (gold code block, bright row). The HUD's tiny parts (codes, markers, numbers,
   statuses) are Tamzen, a bitmap font, at exactly 16px, its pixel size, so it stays sharp. The
   assessment form and its admin page keep the dashboard's own reading-page style and don't use
   this file. */
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlex/IBMPlexSans-wdth-wght.ttf") format("truetype"); font-weight: 100 700; font-stretch: 85% 100%; font-display: swap; }
@font-face { font-family: "B612"; src: url("/fonts/B612/B612-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tamzen"; src: url("/fonts/Tamzen/Tamzen8x16r.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tamzen"; src: url("/fonts/Tamzen/Tamzen8x16b.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --ground: #121214; --raised: #232326;
  --ink: #ededed; --muted: #b6b6b9; --link: #f2f2f2;
  --accent: #e6b85c; --primary: #f2f2f2; --on-primary: #0e0e0f; --selection: #3a3324;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --instrument: "B612", var(--font);
  /* Tamzen draws on a 16px grid: use it at 16px only */
  --marker: "Tamzen", var(--instrument);
  --margin: clamp(20px, 3vw, 40px);
  /* the type scale, largest first: the home mark, page titles (one line), the name under the mark,
     leads, text, small */
  --size-mark: clamp(120px, 20vw, 300px);
  --size-title: clamp(28px, 6.8cqi, 50px);
  --size-head: clamp(24px, 2.4vw, 32px);
  --size-lead: clamp(20px, 1.8vw, 26px);
  --size-text: 18px;
  --size-small: 14px;
  --frame-line: #3e3e42;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: var(--size-text)/1.6 var(--font); }
h1, h2, p, ul, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--selection); }
a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: 0.2em; transition: text-decoration-color 160ms var(--ease-out); }
a:hover { text-decoration-color: var(--accent); }

/* ---------- the frame ----------
   A fixed centre column for the page's content, with the readouts on its left and the weapon
   list on its right, the footer along the bottom. The centre column's width depends only on the
   window, never on the page, so the side panels and their lines sit in the same place on every
   page. On wide screens each side panel is pinned to the middle of the window and hugs the centre
   column; its 1px line runs two-thirds of the window's height, clear of the top and the footer,
   like the speed and altitude tapes either side of a HUD's gunsight; the readouts sit right-aligned
   against the left line and the weapon list left-aligned against the right one. Below 1281px the
   layout stacks and the lines are left off. */
.frame { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "hud" "left" "foot"; row-gap: 48px; min-height: 100svh; padding: 0 var(--margin); }
.frame > main { grid-area: main; justify-self: center; width: fit-content; max-width: 100%; padding: 96px 0 0; }
.frame > .left { grid-area: left; }
.frame > .hud { grid-area: hud; }
.frame > footer { grid-area: foot; }
/* stacked, from tablet width: one centred column (content, weapon list, readouts) */
@media (min-width: 641px) and (max-width: 1280px) {
  .frame > .left, .frame > .hud { justify-self: center; }
}
/* wide: the side panels hug the centre column, each against its line */
@media (min-width: 1281px) {
  .frame { grid-template-columns: minmax(260px, 1fr) minmax(0, 760px) minmax(330px, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "left main hud" "foot foot foot"; row-gap: 0; }
  .frame > main { align-self: center; justify-self: stretch; width: auto; container-type: inline-size; padding: 72px 48px; }
  .frame > .left, .frame > .hud { position: sticky; top: 50%; align-self: start; transform: translateY(-50%); }
  .frame > .left { justify-self: end; padding-right: 16px; }
  .frame > .hud { justify-self: start; padding-left: 16px; }
  .frame > .left::after, .frame > .hud::before {
    content: ""; position: absolute; top: 50%; height: 66svh; width: 1px; transform: translateY(-50%);
    background: var(--frame-line); /* taste-skill-ignore: the maintainer's HUD frame lines */
  }
  .frame > .left::after { right: 0; }
  .frame > .hud::before { left: 0; }
}

/* ---------- the HUD weapon list: left-aligned against its line, code block first ---------- */
.hud ul { display: grid; gap: 6px; padding: 0; list-style: none; }
.slot {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: baseline;
  padding: 10px 14px 10px 0; color: var(--muted); font-family: var(--instrument); text-decoration: none;
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.slot .code { grid-row: span 2; align-self: center; padding: 6px 0; color: var(--muted); font-family: var(--marker); font-size: 16px; line-height: 16px; font-weight: 700; text-align: center; background: var(--raised); transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.slot .label { color: var(--ink); font-size: var(--size-text); line-height: 1.35; }
.slot .state { margin-top: 2px; font-family: var(--marker); font-size: 16px; line-height: 16px; text-transform: uppercase; overflow-wrap: anywhere; }
.slot .state.address { text-transform: none; }
/* armed: the selected slot. Hover and focus arm a slot; with neither, the slot marked data-armed is armed. */
.slot.armed { color: var(--ink); background: color-mix(in srgb, var(--raised) 70%, transparent); }
.slot.armed .code { color: var(--on-primary); background: var(--accent); }

/* ---------- the instrument cluster: marker first, like the slots; on wide screens it faces its
   line instead, right-aligned with the marker last ---------- */
.readouts { display: grid; gap: 14px; font-family: var(--instrument); }
.readouts div { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "mark value"; column-gap: 14px; align-items: baseline; }
.readouts dt { grid-area: mark; color: var(--accent); font-family: var(--marker); font-size: 16px; line-height: 16px; font-weight: 700; }
.readouts dd { grid-area: value; font-family: var(--marker); font-size: 16px; line-height: 16px; }
.readouts .sub { display: block; margin-top: 4px; color: var(--muted); font-family: var(--marker); font-size: 16px; line-height: 16px; }
@media (min-width: 1281px) {
  .readouts div { grid-template-columns: minmax(0, 1fr) 56px; grid-template-areas: "value mark"; text-align: right; }
}
html:not(.js) .js-only { display: none; }

/* ---------- subpage parts: the title lit in B612, a lead, the one solid action ---------- */
/* Titles scale with the centre column (cqi), so the longest, "Ballistic Dynamics System", always
   fits on one line beside the HUD. */
.title { font-family: var(--instrument); font-size: var(--size-title); line-height: 1.1; font-weight: 400; letter-spacing: -0.01em; }
@media (min-width: 1281px) { .title { white-space: nowrap; } }
.lead { margin-top: 24px; max-width: 38ch; font-size: var(--size-lead); line-height: 1.4; }
.copy { margin-top: 16px; max-width: 46ch; }
.button {
  display: inline-block; padding: 14px 26px; border: 0; background: var(--primary); color: var(--on-primary);
  font: inherit; font-size: 16px; line-height: 20px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.button:hover { background: var(--accent); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: 0.6; cursor: default; }

/* ---------- request forms: an email address, an optional message, one button ---------- */
.request { display: grid; gap: 8px; max-width: 46ch; margin-top: 28px; }
.request label { color: var(--muted); font-size: var(--size-small); }
.request label + input, .request label + textarea { margin-bottom: 12px; }
.request input, .request textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #3e3e42; background: var(--ground); color: var(--ink);
  font: inherit; font-size: 16px; line-height: 24px; border-radius: 0; transition: border-color 160ms var(--ease-out);
}
.request input:hover, .request textarea:hover { border-color: #55555a; }
.request input:focus-visible, .request textarea:focus-visible { outline-offset: 0; border-color: transparent; }
.request textarea { min-height: 120px; resize: vertical; }
.request .ts:empty { display: none; }
.request .error { min-height: 0; color: #e5667a; font-size: var(--size-small); }
.request .error:empty { display: none; }
.request .button { justify-self: start; margin-top: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: the hidden honeypot field, not a rule */
.sent { margin-top: 28px; }
.sent .sent-title { color: var(--accent); font-family: var(--marker); font-size: 16px; line-height: 16px; font-weight: 700; text-transform: uppercase; }
.sent p + p { margin-top: 8px; }

/* ---------- footer ---------- */
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 24px 0 28px; color: var(--muted); font-size: var(--size-small); line-height: 1.6; }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }

/* ---------- motion: importance runs opposite to movement ----------
   The page's own content (title, mark, lead, form, button) only fades in, quickly and almost at
   once, so it can be read straight away. The secondary HUD parts (readouts, weapon slots, footer)
   cascade in from the sides after it, one after another. Slots then arm smoothly on hover. */
.lines .line { display: block; }
.lines [data-line] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-line] { opacity: 0; animation: fade 320ms var(--ease-out) forwards; animation-delay: calc(60ms + var(--i, 0) * 40ms); }
  .js [data-load] { opacity: 0; animation: fade 320ms var(--ease-out) forwards; animation-delay: 120ms; }
  .js .hud li, .js .readouts > div, .js footer p { opacity: 0; transform: translateX(var(--from, 16px)); animation: boot 520ms var(--ease-out) forwards; animation-delay: calc(380ms + var(--n, 0) * 90ms); }
  .js .readouts > div, .js footer p:first-child { --from: -16px; }
}
@keyframes fade { to { opacity: 1; } }
@keyframes boot { to { opacity: 1; transform: none; } }