/* ============================================================
   Brick — marketing site design system
   "Volt" — Brand System v1.0, Sept 2026.

   Source of truth: the Claude Design project "Brick endurance training
   design system". This file is the site's implementation of it.

   NOTE ON SCOPE: ../brand/tokens.css is still on the previous palette
   ("Warm Paper" — teal #0F766E, Manrope), and app/ imports it. The site
   deliberately does not import it any more, because the two systems no
   longer describe the same brand. Migrating brand/ and app/ to Volt is a
   separate job — until it happens, app.trybrick.io and trybrick.io look
   like different products. See site/README.md.

   The identity is DARK-ONLY. There is no light theme: Ink and Void are the
   ground, Bone is the text, and the Ink-on-Bone lockup exists for print and
   documents, not for a light web surface. Every colour is therefore painted
   explicitly rather than inherited from the viewer.
   ============================================================ */

:root {
  /* ---- brand ----
     Two brand colours and one neutral ramp. Volt is the only saturated
     colour that ever appears in brand work. */
  --volt:      #D9FF00;   /* Pantone 389 C · oklch(0.95 0.24 118) */
  --volt-lift: #EEFF66;   /* hover only — not a second brand colour */
  --ink:       #0F0F14;   /* Pantone Black 6 C */
  --bone:      #F2F2EE;

  /* ---- neutral ramp ---- */
  --void:      #0B0B0E;   /* the page ground */
  --surface:   #14141A;
  --raised:    #1C1C23;
  --line:      #23232B;
  --dim:       #5A5A62;   /* 2.8:1 on Ink — DECORATIVE ONLY, never text */
  --muted:     #8C8C93;
  --soft:      #C9C9C4;

  /* ---- training-state colours — PRODUCT ONLY ----
     "These never appear in marketing. They exist so a chart can say
     something a single accent can't." They are declared here because the
     load chart on this page is a product specimen, and for nothing else.
     Do not reach for them to colour a marketing panel. */
  --state-key:       #D9FF00;   /* on track / key session */
  --state-aerobic:   #4AA3FF;   /* aerobic / easy volume */
  --state-threshold: #FFB020;   /* threshold / caution load */
  --state-over:      #FF5A4A;   /* overreach / missed / error */

  /* ---- type ----
     Three roles, no exceptions.
     Helvetica Now is not licensed for the web here, so Role 02 runs on the
     documented fallback stack. That is deliberate: it also means body text
     needs no webfont and paints on the first frame. */
  --f-display: "Barlow Condensed", "Helvetica Neue Condensed", Impact, sans-serif;
  --f-text:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale. Display sizes are fluid; the token name is the ceiling. */
  --display-xl: clamp(40px, 8vw, 104px);   --lh-display-xl: 0.88;
  --display-l:  clamp(40px, 7vw,  76px);   --lh-display-l:  0.90;
  --display-m:  clamp(30px, 5vw,  52px);   --lh-display-m:  0.95;
  --display-s:  clamp(24px, 3vw,  30px);   --lh-display-s:  1.00;
  --text-xl:    clamp(21px, 2.4vw, 30px);  --lh-text-xl:    1.25;
  --text-l:     19px;                      --lh-text-l:     1.50;
  --text-m:     15px;                      --lh-text-m:     1.55;
  --text-s:     13px;                      --lh-text-s:     1.60;
  --mono-m:     12px;                      --lh-mono-m:     1.80;
  --mono-s:     10px;                      --lh-mono-s:     1.40;

  --tr-display: -0.01em;
  --tr-mono:     0.14em;

  /* ---- space ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 22px; --s6: 28px; --s7: 48px; --s8: 72px;
  --bay: clamp(18px, 4vw, 28px);       /* page gutter */
  --measure: 1280px;                   /* max content width */
  --section-y: clamp(56px, 9vw, 96px);

  /* ---- geometry ----
     Square corners. 0 radius everywhere. The app icon's 36/160 is the one
     documented exception and it lives in the SVG, not here. */
  --radius: 0;
  --touch: 48px;                       /* minimum touch target height */

  /* ---- motion ---- */
  --snap:  120ms cubic-bezier(0.2, 0, 0, 1);        /* mechanical, lap-button */
  --drive: 280ms cubic-bezier(0.16, 1, 0.3, 1);     /* settles without bounce */
  --hold:  600ms linear;                            /* real elapsed work only */

  color-scheme: dark;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  background: var(--void);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--f-text);
  font-size: var(--text-m);
  line-height: var(--lh-text-m);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
p { margin: 0; }
a { color: var(--volt); text-decoration: none; }
a:hover { color: var(--volt-lift); }
::selection { background: var(--volt); color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  text-wrap: balance;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
}

/* ---- the three type roles, as utilities ---- */
.display-xl { font-family: var(--f-display); font-weight: 700; font-size: var(--display-xl); line-height: var(--lh-display-xl); text-transform: uppercase; letter-spacing: var(--tr-display); }
.display-l  { font-family: var(--f-display); font-weight: 700; font-size: var(--display-l);  line-height: var(--lh-display-l);  text-transform: uppercase; letter-spacing: var(--tr-display); }
.display-m  { font-family: var(--f-display); font-weight: 600; font-size: var(--display-m);  line-height: var(--lh-display-m);  text-transform: uppercase; letter-spacing: var(--tr-display); }
.display-s  { font-family: var(--f-display); font-weight: 600; font-size: var(--display-s);  line-height: var(--lh-display-s);  text-transform: uppercase; letter-spacing: var(--tr-display); }

.text-xl { font-size: var(--text-xl); line-height: var(--lh-text-xl); }
.text-l  { font-size: var(--text-l);  line-height: var(--lh-text-l); }
.text-s  { font-size: var(--text-s);  line-height: var(--lh-text-s); }

/* Role 03 — technical. Never for sentences longer than a line. */
.mono {
  font-family: var(--f-mono);
  font-size: var(--mono-m);
  line-height: var(--lh-mono-m);
  font-variant-numeric: tabular-nums;
}
.kicker {
  font-family: var(--f-mono);
  font-size: var(--mono-s);
  line-height: var(--lh-mono-s);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--muted);
}
.kicker-volt { color: var(--volt); }

.soft  { color: var(--soft); }
.muted { color: var(--muted); }
.dim   { color: var(--dim); }
.volt  { color: var(--volt); }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--bay);
}
.section { padding-block: var(--section-y); }
/* The nav is sticky, so an anchored section would otherwise land with its
   number and title hidden underneath it. */
[id] { scroll-margin-top: 84px; }
.rule { border-top: 1px solid var(--line); }

/* Section head — number, title, and a right-aligned technical label. */
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s5);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s5);
  margin-bottom: var(--s8);
}
.section-head .no { font-family: var(--f-mono); font-size: var(--mono-m); letter-spacing: 0.1em; color: var(--volt); }
.section-head .meta { margin-left: auto; }

/* ============================================================
   BUTTONS
   Square corners, 48px minimum touch height.
   ============================================================ */
.btn {
  font-family: var(--f-text);
  font-size: var(--text-m);
  font-weight: 500;
  line-height: 1;
  min-height: var(--touch);
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  text-align: center;
  transition: background var(--snap), color var(--snap), border-color var(--snap);
}
.btn-primary { background: var(--volt); color: var(--ink); border-color: var(--volt); }
.btn-primary:hover { background: var(--volt-lift); border-color: var(--volt-lift); color: var(--ink); }
.btn-secondary { border-color: var(--dim); color: var(--bone); }
.btn-secondary:hover { border-color: var(--bone); color: var(--bone); }
/* On a full-Volt panel the roles invert: Ink is the button, Volt is the type. */
.btn-on-volt { background: var(--ink); color: var(--volt); border-color: var(--ink); }
.btn-on-volt:hover { background: #000; color: var(--volt); border-color: #000; }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--raised);
  color: var(--dim);
  border-color: var(--line);
  cursor: not-allowed;
}
.btn-link {
  color: var(--volt);
  font-size: var(--text-m);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-link:hover { color: var(--volt-lift); }

/* ============================================================
   TAGS & METRICS
   ============================================================ */
.tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--mono-s);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.tag-key { border-color: var(--volt); color: var(--volt); }
.tag-missed { background: var(--state-over); color: var(--ink); border-color: var(--state-over); }

.metric .val {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 0.9;
  letter-spacing: var(--tr-display);
}
.metric .val .unit { font-size: 22px; }
.metric .cap {
  font-family: var(--f-mono);
  font-size: var(--mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* ============================================================
   PANELS
   ============================================================ */
.panel { border: 1px solid var(--line); background: var(--ink); }
.panel-volt { border-color: var(--volt); }
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.panel-body { padding: var(--s5); }

/* The one full-Volt surface. Allowed at any scale; a Volt gradient never is.
   Type on it is always Ink — Bone on Volt is 1.2:1 and unreadable. */
.volt-panel {
  background: var(--volt);
  color: var(--ink);
  padding: clamp(36px, 6vw, 72px);
}
.volt-panel a:not(.btn) { color: var(--ink); text-decoration: underline; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field > label {
  font-family: var(--f-mono);
  font-size: var(--mono-s);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--muted);
}
.input {
  font-family: var(--f-text);
  font-size: 14px;
  line-height: 1.4;
  min-height: var(--touch);
  width: 100%;
  padding: 14px 16px;
  background: var(--ink);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--snap);
}
.input::placeholder { color: var(--muted); }   /* --dim is 2.8:1, below AA */
.input:hover { border-color: var(--dim); }
.input:focus { outline: none; border-color: var(--volt); }
.input:focus-visible { outline: none; border-color: var(--volt); }
textarea.input { min-height: 88px; resize: vertical; }
select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.input-error { border-color: var(--state-over); }
.note-error {
  font-family: var(--f-mono);
  font-size: var(--mono-s);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--state-over);
}

/* ============================================================
   PHOTOGRAPHY
   Default treatment: desaturate to B&W, lift contrast, crush blacks.
   Volt only ever sits on top as type or mark — never as a wash over skin.

   The Ink scrim under text runs 30–60%.

   FALLBACK: until the real photography is dropped into assets/, .shot
   paints a dark Ink field so the hero reads as an intentional black frame
   rather than a broken image. Drop the files in and it takes over with no
   markup change.
   ============================================================ */
/* The bed sits behind the photograph. When assets/ has no file yet the <img>
   removes itself on error and this is what shows — a deliberate Ink field
   rather than a broken-image icon. */
.shot-bed {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 78% 12%, #1C1C23 0%, #101015 45%, var(--void) 100%);
}
.shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The hero photograph is a lone rider right of centre on lit tarmac. As the
     viewport narrows, cover crops from the edges — anchoring right of centre
     keeps the subject in frame instead of trimming it away, and keeps the
     darker rock mass under the headline. */
  object-position: 50% 40%;
  filter: grayscale(1) contrast(1.15);
}
.shot-hard { filter: grayscale(1) contrast(1.45) brightness(0.9); }
.shot-natural { filter: saturate(0.9) contrast(1.05); }

 /* No page currently lays type over a photograph — the hero puts its copy on
   Ink and lets the frame run clean. These stay because the art direction
   requires a 30–60% Ink scrim under type wherever that does happen next
   (a section band, a social crop), and because getting the value wrong is
   how type ends up sitting on lit tarmac. */
.scrim { position: absolute; inset: 0; }
/* Left-weighted, for type sitting on the left of a wide frame.

   Held near-opaque across the full width of the headline column, then
   dropped fast so the subject stays bright. The brand puts the scrim at
   30–60%; the deep end of that range is needed here because display type
   at 148px sits over lit tarmac, not over shadow. */
.scrim-l {
  background: linear-gradient(90deg,
    rgba(11, 11, 14, 0.92) 0%,
    rgba(11, 11, 14, 0.82) 40%,
    rgba(11, 11, 14, 0.38) 62%,
    rgba(11, 11, 14, 0.10) 100%);
}
/* Bottom-weighted, for type on a 4:5 or 9:16 crop. */
.scrim-b {
  background: linear-gradient(180deg,
    rgba(11, 11, 14, 0.15) 0%,
    rgba(11, 11, 14, 0.55) 60%,
    rgba(11, 11, 14, 0.92) 100%);
}

/* ============================================================
   CHARTS
   Square ends, 0 radius, 3–5px gaps. Volt marks only the datum being
   discussed; everything else is Raised. One baseline, no gridlines.
   ============================================================ */
.chart { display: flex; align-items: flex-end; gap: 4px; height: 140px; border-bottom: 1px solid var(--line); }
.chart .bar { flex: 1; background: var(--raised); min-width: 3px; }
.chart .bar-volt { background: var(--volt); }
.chart .bar-threshold { background: var(--state-threshold); }
.chart .bar-aerobic { background: var(--state-aerobic); }
.chart-axis { display: flex; justify-content: space-between; margin-top: var(--s2); }

/* ============================================================
   MOTION
   "Respect reduced motion. Every transition degrades to an instant state
   change. Nothing in Brick requires motion to be understood."
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Type arrives flat — appears or wipes from one edge. Never scales, spins,
   blurs or letter-staggers in. */
@media (prefers-reduced-motion: no-preference) {
  .arrive {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    animation: wipe var(--drive) forwards;
  }
  @keyframes wipe {
    to { opacity: 1; clip-path: inset(0 0 0 0); }
  }
}

/* ============================================================
   ACCESSIBILITY HELPERS
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Parked well clear of the viewport rather than at translateY(-100%), which
   lands its bottom edge on exactly 0 and leaks a 1px Volt line at the top of
   the page on fractional-DPR screens. */
.skip-link {
  position: fixed;
  top: -100px; left: 0;
  background: var(--volt);
  color: var(--ink);
  padding: 12px 18px;
  z-index: 100;
  font-weight: 500;
  transition: top var(--snap);
}
.skip-link:focus { top: 0; color: var(--ink); }


/* ============================================================
   SITE CHROME — nav, brand lockup, footer.
   Shared by every page (index, privacy, terms, thanks), which is why it
   lives here and not in a page's own <style> block.
   ============================================================ */
/* ---- nav ---- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 11, 14, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: var(--s6); padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--volt); }
.brand:hover { color: var(--volt-lift); }
.brand-mark { height: 22px; width: auto; }
.brand-word {
  font-family: var(--f-text); font-weight: 500; font-size: 19px;
  letter-spacing: -0.01em; color: var(--bone);
}
.nav-links { margin-left: auto; display: flex; gap: var(--s5); }
.nav-links a { font-size: 14px; color: var(--muted); transition: color var(--snap); }
.nav-links a:hover { color: var(--bone); }
.nav-cta { display: flex; align-items: center; gap: var(--s4); }
.nav-login { font-size: 14px; color: var(--muted); }
.nav-login:hover { color: var(--bone); }
.btn-sm { min-height: 38px; padding: 0 18px; font-size: 14px; }
@media (max-width: 900px) { .nav-links { display: none; } .nav-cta { margin-left: auto; } }
@media (max-width: 460px) { .nav-login { display: none; } }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s7); }
.footer-inner { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; }
.footer-links { display: flex; gap: var(--s5); flex-wrap: wrap; }
.footer-links a { font-size: 14px; color: var(--muted); }
.footer-links a:hover { color: var(--bone); }
.footer-fine { margin-left: auto; }
@media (max-width: 700px) { .footer-fine { margin-left: 0; width: 100%; } }

/* ============================================================
   DOCUMENT PAGES — privacy, terms
   Long-form legal prose. The display face is condensed and uppercase, so
   it does the headings and nothing else; the body runs in Role 02 at a
   comfortable measure.
   ============================================================ */
.doc { max-width: 74ch; margin: 0 auto; padding: var(--s8) var(--bay) var(--s8); }
.doc h1 { font-size: var(--display-l); line-height: var(--lh-display-l); }
.doc h2 {
  font-size: var(--display-s);
  line-height: var(--lh-display-s);
  font-weight: 600;
  margin-top: var(--s8);
  margin-bottom: var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.doc p { margin-block: var(--s4); color: var(--soft); }
.doc ul, .doc ol { color: var(--soft); padding-left: 1.2em; margin-block: var(--s4); }
.doc li { margin-block: var(--s2); }
.doc strong { color: var(--bone); font-weight: 500; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }
.doc .lede { font-size: var(--text-xl); line-height: var(--lh-text-xl); color: var(--bone); margin-top: var(--s4); }
.doc .date {
  font-family: var(--f-mono); font-size: var(--mono-s);
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--muted); margin-top: var(--s5);
}
.doc table { width: 100%; border-collapse: collapse; margin-block: var(--s5); font-size: var(--text-s); }
.doc th, .doc td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--line); color: var(--soft); vertical-align: top; }
.doc th { color: var(--muted); font-weight: 500; font-family: var(--f-mono); font-size: var(--mono-s); letter-spacing: var(--tr-mono); text-transform: uppercase; }

/* Single-message page — thanks. */
.slab {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: var(--s7) var(--bay);
}
.slab-card { max-width: 46ch; display: flex; flex-direction: column; gap: var(--s5); }
.slab-card h1 { font-size: var(--display-l); line-height: var(--lh-display-l); }
.doc-nav { justify-content: space-between; }