/* ============================================================================
   liftandpace.com — site stylesheet
   Monochrome sports-editorial: near-black base, photography, condensed display
   type for headlines, monospace micro-labels, and numbers set in tabular mono.
   No accent hue — the result number carries its weight through scale, contrast
   and a heavy rule instead of color.
   Cloudflare Workers static assets: no build step, no webfonts, no external
   requests of any kind (the privacy page promises exactly that).
   ============================================================================ */

/* ── Display face ─────────────────────────────────────────────────────────
   Anton (SIL OFL 1.1), served from this origin. The mockup asked for Impact,
   which exists on macOS and Windows but not on Android — where the headline
   was falling back to a regular-width sans and losing the design entirely.
   Anton is the closest open equivalent.

   Subset to the 57 characters the display type actually renders (every rule
   below uppercases, so there are no lowercase glyphs): 167 KB -> 2.8 KB.

   Nothing is requested from fonts.googleapis.com, fonts.gstatic.com or any
   other third party — the privacy page's promise depends on that.

   font-weight is declared 400-900 so the browser maps the heavy weights the
   rules ask for onto this single face instead of synthesizing a fake bold.
   ────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Anton";
  src: url("/assets/fonts/anton-subset.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Base — near-black with a faint blue-gray undertone, not pure black. */
  --bg:         #0a0c0f;
  --panel:      #111419;   /* cards, input panel */
  --recessed:   #0b0e12;   /* input fields, sunk below the panel */
  --result-bg:  #0e1116;   /* result block — darker than the panel around it */

  /* Hairlines */
  --line:        #292d33;
  --line-strong: #3a4049;
  --line-bright: #68717c;  /* the 2px rule that caps the result block */

  /* Ink */
  --ink:    #f1f2f3;
  --muted:  #969ca5;
  --dim:    #6b7280;

  /* One accent, reserved for the result: the figure, the button that
     produces it, and the working range read off it. Nothing else on the
     site uses it — the homepage carries no orange because it carries no
     result. */
  --accent:      #ff7a29;
  --accent-deep: #e5650f;
  --accent-ink:  #111111;
  --focus:       rgba(255, 122, 41, 0.45);

  /* Validation. Functional color only — it never appears unless an input
     is wrong, so it does not compete with the accent for attention. */
  --error: #ef8d78;

  /* Working range inside a table — amber, a half-step off the accent so it
     reads as a band rather than as another result. */
  --band:      rgba(179, 138, 49, 0.15);
  --band-edge: #a47d32;

  /* The ad slot deliberately breaks from the dark page — display creative is
     built for light backgrounds and shouldn't be forced onto near-black. A
     monochrome page doesn't change that. */
  --ad-bg:   #f3ede1;
  --ad-ink:  #262019;
  --ad-line: #d6cbb3;

  /* Type. Condensed display for headlines, tabular monospace for anything
     numeric, system sans for prose. All locally installed faces. */
  --display: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --sans:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;

  --wrap:      46rem;
  --wrap-wide: 75rem;
}

/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* The calculators drive visibility with the hidden attribute. Keep that
   authoritative no matter what display value a component rule sets. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { color: var(--ink); margin: 0 0 0.55em; line-height: 1.15; font-weight: 700; }
h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); letter-spacing: -0.02em; }
h3 { font-size: 1.05rem; letter-spacing: -0.01em; }

p { margin: 0 0 0.95rem; }
a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--ink); }
strong { font-weight: 650; color: var(--ink); }

:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* ── Display headline ────────────────────────────────────────────────────── */
.display {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  /* Impact and Arial Narrow are already heavy; keep the synthesized weight
     off on platforms that fall back to a regular-width sans. */
  font-synthesis-weight: none;
}

/* ── Monospace micro-label ───────────────────────────────────────────────── */
.kicker {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ── Layout wrappers ─────────────────────────────────────────────────────── */
.wrap      { width: 100%; max-width: var(--wrap);      margin-inline: auto; padding-inline: 1.25rem; }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: 1.25rem; }
main.wrap, main.wrap-wide { padding-bottom: 3.5rem; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--line); }
.header-inner {
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding: 1.15rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}
.site-logo {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.055em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-logo .logo-thin { font-weight: 400; color: #adb2b8; }

.site-nav { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Home hero — full-bleed photograph, display headline over it ─────────── */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #32363b;
  background: #101215;
  padding: 3.25rem 2.75rem 3.75rem;
  min-height: 35rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 2.25rem;
}
.home-hero .hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.64;
}
/* Scrim — keeps the headline legible over the photograph rather than
   relying on the image happening to be dark in the right places. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(10, 12, 15, 0.92) 0%, rgba(10, 12, 15, 0.72) 42%, rgba(10, 12, 15, 0.18) 78%);
}
.hero-copy { position: relative; max-width: 42rem; }
.home-hero h1 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3.25rem, 8.2vw, 5.5rem);
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin: 1.5rem 0;
  font-synthesis-weight: none;
}
.home-hero .lead { font-size: 0.95rem; line-height: 1.75; color: #e0e2e4; max-width: 34rem; margin: 0; }
.home-hero .kicker { color: #e1e2e4; }

.hero-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.hero-links a {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  min-width: 10rem;
  border: 1px solid #b6bac0;
  background: rgba(10, 12, 15, 0.9);
  padding: 0.8rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.14s ease, color 0.14s ease;
}
.hero-links a:hover { background: var(--ink); color: var(--bg); }

.hero-index {
  position: absolute;
  right: 1.75rem;
  bottom: 1.4rem;
  text-align: right;
  font-family: var(--mono);
  font-size: 0.5625rem;
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: #c4c7ca;
  text-transform: uppercase;
}

/* ── Claims strip — thin rule-separated band ─────────────────────────────── */
.utility-strip {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0.2rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #aab0b8;
}

/* ── Catalog head ────────────────────────────────────────────────────────── */
.catalog { margin-top: 2.5rem; }
.catalog-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 3rem 0 1.6rem;
}
.catalog-head h2 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0.8rem 0 0;
  font-synthesis-weight: none;
}
.catalog-head p { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.2rem; }

/* ── Photo cards ─────────────────────────────────────────────────────────── */
.card-grid { display: grid; gap: 1.5rem; }

.photo-card {
  display: block;
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: border-color 0.16s ease;
}
.photo-card:hover { border-color: #6b737f; }

.card-photo { position: relative; height: 13.9rem; overflow: hidden; background: #171a1e; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.photo-card:hover .card-photo img { transform: scale(1.035); }

.photo-label {
  position: absolute;
  top: 1.1rem;
  left: 1.25rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--bg);
  padding: 0.44rem 0.6rem;
}
.round-arrow {
  position: absolute;
  right: 1.1rem;
  top: 1.1rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: rgba(10, 12, 15, 0.55);
  font-family: var(--sans);
  font-size: 1.1rem;
  line-height: 1.85rem;
  text-align: center;
}

.card-body { padding: 1.55rem; }
.card-body h3 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: -0.025em;
  margin: 0.7rem 0;
}
.card-body p { font-size: 0.875rem; line-height: 1.65; color: var(--muted); margin: 0; }

/* Worked example on the card — the number is the point, so it is set large
   in tabular monospace, the same face the result block uses. */
.card-example {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.25rem 0;
  margin-top: 1.4rem;
  font-family: var(--mono);
}
.card-example .sample-input { font-size: 0.75rem; color: #b6bdc7; }
.card-example .sample-arrow { color: var(--muted); }
.card-example strong {
  font-size: clamp(1.4rem, 3.4vw, 1.75rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.card-example small { font-size: 0.75rem; color: #b6bdc7; margin-left: 0.25rem; }

.card-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #bbc0c7;
}

/* ── Manifesto band ──────────────────────────────────────────────────────── */
.manifesto {
  display: grid;
  gap: 1.25rem;
  margin-top: 3.4rem;
  padding: 2rem 0 1rem;
  border-top: 1px solid var(--line);
  align-items: start;
}
.manifesto h2 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  line-height: 1.02;
  margin: 0;
  font-synthesis-weight: none;
}
.manifesto p { margin: 0; font-size: 0.82rem; line-height: 1.8; color: var(--muted); max-width: 40ch; }
.manifesto a { display: inline-block; margin-top: 1.05rem; font-size: 0.78rem; }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb .sep { color: #535a64; margin: 0 0.7rem; }

/* ── Calculator page intro banner ────────────────────────────────────────── */
.calc-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 1.9rem 1.9rem 2rem;
  margin-top: 1.5rem;
}
.calc-intro h1 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5.4vw, 3.1rem);
  line-height: 1.0;
  letter-spacing: -0.005em;
  margin: 0.85rem 0 0.6rem;
  font-synthesis-weight: none;
}
.calc-intro .lead { color: #c3c8cf; font-size: 0.95rem; margin: 0; max-width: 46ch; }

/* ── Page head (utility pages) ───────────────────────────────────────────── */
.page-head { padding: 2rem 0 1.25rem; }
.page-head h1 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.3rem, 6vw, 3.4rem);
  line-height: 1.0;
  margin: 0 0 0.5rem;
  font-synthesis-weight: none;
}
.page-head .lead { font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 54ch; margin: 0; }

/* ── Two-column tool layout ──────────────────────────────────────────────── */
.calc-layout { display: grid; gap: 1.75rem; margin-top: 1.75rem; }
.calc-layout > * { min-width: 0; }

/* ── Input panel ─────────────────────────────────────────────────────────── */
.calc-card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.6rem;
}
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.panel-title h2 { font-size: 1.2rem; letter-spacing: -0.02em; margin: 0; }
.panel-step { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--muted); }

.field { margin-bottom: 1rem; }
.field:last-of-type { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.field .hint {
  display: block;
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 0.2rem;
}
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.field-label-row label { margin-bottom: 0; }

/* Segmented toggles */
.unit-toggle, .solve-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #1b1f26;
  border: 1px solid #343941;
}
.unit-btn {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: #9299a4;
  background: transparent;
  border: 0;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.unit-btn:hover { color: var(--ink); }
.unit-btn.active { background: #41464f; color: #fff; }

.solve-toggle { display: flex; width: 100%; }
.solve-toggle .unit-btn { flex: 1; text-align: center; padding: 0.55rem 0.4rem; }

.input {
  width: 100%;
  min-width: 0;
  font-family: var(--mono);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--recessed);
  border: 1px solid #363b44;
  border-radius: 0;
  padding: 0.85rem 0.9rem;
  min-height: 3rem;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.input::placeholder { color: #565d6b; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus); }
.input:disabled { opacity: 0.38; cursor: not-allowed; }
select.input {
  font-family: var(--sans);
  font-size: 0.875rem;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23969ca5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.field-row { display: grid; gap: 0.9rem; }
.field-row .field { display: flex; flex-direction: column; margin-bottom: 1rem; }
.field-row .field > .input { margin-top: auto; }

/* Distance presets */
.preset-group { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.7rem; }
.preset-btn {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--recessed);
  border: 1px solid #363b44;
  padding: 0.42rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.preset-btn:hover { color: var(--ink); border-color: var(--line-bright); }
.preset-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Time / pace clusters */
.time-inputs, .pace-inputs { display: flex; align-items: center; gap: 0.3rem; }
.time-input, .pace-input { width: 100%; min-width: 0; text-align: center; padding-inline: 0.4rem; }
.time-sep { color: var(--muted); font-family: var(--mono); font-weight: 700; }
.pace-unit { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); white-space: nowrap; }

/* Primary button — white on near-black, no hue */
.btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0;
  padding: 0.95rem 1.1rem;
  min-height: 3rem;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.btn::after { content: "\2197"; font-family: var(--sans); }
.btn:hover { background: #ff8a45; border-color: #ff8a45; }
.btn:active { background: var(--accent-deep); border-color: var(--accent-deep); }

/* Inline validation message, sits directly under the field it belongs to. */
.field-error {
  margin: 0.45rem 0 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--error);
}
.input.invalid { border-color: var(--error); }
.input.invalid:focus { box-shadow: 0 0 0 2px rgba(239, 141, 120, 0.4); }

/* A solved value written back into its own box gets one brief flash in the
   accent, so it is obvious where the answer landed. */
@keyframes solved-flash {
  from { background-color: rgba(255, 122, 41, 0.3); }
  to   { background-color: var(--recessed); }
}
.input.just-solved { animation: solved-flash 1.1s ease-out; }

.panel-footnote {
  border-top: 1px solid var(--line);
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  font-size: 0.6875rem;
  line-height: 1.7;
  color: var(--muted);
}

.sidebar-note { padding: 1.4rem 0.2rem; font-size: 0.75rem; line-height: 1.7; color: var(--muted); }
.sidebar-note strong { display: block; color: #d8dce1; margin-bottom: 0.3rem; }
.sidebar-note p { margin: 0; }

/* ── Result block — the moment the page delivers ─────────────────────────────
   Monochrome has to do what a saturated accent used to. Three devices carry
   it: the block sits on the darkest surface on the page, the figure is pure
   white at display scale, and a 3px rule runs under it like a scoreboard
   underline. Small monospace type above and below frames the number so the
   jump in scale reads as deliberate.
   ────────────────────────────────────────────────────────────────────────── */
.result {
  background: var(--result-bg);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-bright);
  padding: 1.6rem 1.5rem 1.75rem;
}
.result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.result-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.result-badge {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid #424851;
  padding: 0.32rem 0.5rem;
  color: #b2b7be;
  white-space: nowrap;
}

.result-hero {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.7rem 0 0;
}
.result-number {
  font-family: var(--mono);
  font-size: clamp(3.9rem, 15vw, 7rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.result-unit {
  font-family: var(--mono);
  font-size: clamp(1rem, 2.6vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #b2b7be;
}
.result-reading {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0.9rem 0 1.4rem;
  max-width: 54ch;
}

/* Breakdown rows */
.breakdown { margin-top: 0.5rem; }
.breakdown .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #20242b;
  font-size: 0.8125rem;
}
.breakdown .row span:first-child { color: var(--muted); }
.breakdown .row .val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

/* Validation / caution notice */
.notice {
  margin-top: 1.3rem;
  padding: 0.9rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ink);
}
.notice.caution { border-left-color: var(--band-edge); background: var(--band); }

.method-note { font-size: 0.6875rem; line-height: 1.7; color: var(--muted); margin: 0.7rem 0 0; max-width: 64ch; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin: 1.9rem 0 0.75rem;
}
.table-top h2 { font-size: 1.1rem; letter-spacing: -0.02em; margin: 0; }
.legend { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.legend::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #aa8442;
  margin-right: 6px;
}

.compare-table-wrap { overflow-x: auto; margin-top: 0.4rem; }
.compare-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.8125rem; min-width: 22rem; }
.compare-table th, .compare-table td {
  text-align: right;
  padding: 0.65rem 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.compare-table th:first-child, .compare-table td:first-child { text-align: left; }
.compare-table thead th {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.compare-table tbody td { border-bottom: 1px solid #20242b; color: var(--ink); }
/* Working range — the band most programming actually uses, called out as a
   zone rather than as eight identical rows. */
.compare-table tbody tr.working td { background: var(--band); }
.compare-table tbody tr.working td:first-child { border-left: 2px solid var(--band-edge); }
.compare-table tbody tr.highlight td { background: var(--band); font-weight: 700; }

/* A column holding a sentence rather than a figure drops the numeric
   treatment the rest of the row uses. */
.compare-table td.note-cell {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-variant-numeric: normal;
  color: var(--muted);
  text-align: left;
  white-space: normal;
  min-width: 15rem;
}

/* Splits can run to dozens of rows (a marathon is 42), so the table scrolls
   inside a fixed-height box instead of stretching the page. */
.splits-wrap {
  max-height: 20rem;
  overflow: auto;
  margin-top: 0.4rem;
  border: 1px solid var(--line);
}
.splits-wrap .compare-table thead th { position: sticky; top: 0; background: var(--result-bg); }
.splits-wrap .compare-table { min-width: 0; }
.splits-note { font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); margin-top: 0.6rem; }

/* ── Ad slot — deliberately breaks from the dark page ────────────────────────
   Display creative is built for light backgrounds; a unit dropped straight
   onto near-black looks pasted on. Monochrome doesn't change that, so the
   slot keeps its own light band.
   ────────────────────────────────────────────────────────────────────────── */
.ad-slot {
  margin-top: 1.6rem;
  background: var(--ad-bg);
  border: 1px solid var(--ad-line);
  padding: 1.5rem;
  color: var(--ad-ink);
  min-height: 6rem;
}

/* ── Prose sections below the tool ───────────────────────────────────────── */
.answer { margin-top: 2.75rem; }
.answer h2 { margin-bottom: 0.7rem; }
.answer p { max-width: 68ch; color: #c8ccd2; }
.answer strong { color: var(--ink); }

.section-rule {
  border-top: 1px solid var(--line);
  margin-top: 3rem;
  padding-top: 1.75rem;
}

/* FAQ */
.faq { margin-top: 2.75rem; }
.faq h2 { margin-bottom: 0.9rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 0.2rem 0; }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 2rem 0.85rem 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0 0 1rem; max-width: 68ch; color: var(--muted); font-size: 0.925rem; }

.disclaimer {
  margin-top: 1.75rem;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 70ch;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  margin-top: 3.5rem;
  padding: 2.5rem 0 2.25rem;
  font-size: 0.85rem;
}
.footer-cols { display: grid; gap: 2rem; padding-bottom: 1.75rem; }
.site-footer h4 {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
}
.footer-brand { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.045em; color: var(--ink); margin-bottom: 0.6rem; }
.footer-brand .logo-thin { font-weight: 400; color: #adb2b8; }
.site-footer p { color: var(--muted); max-width: 42ch; font-size: 0.8125rem; line-height: 1.7; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a { color: var(--muted); text-decoration: none; font-size: 0.8125rem; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-legal { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.footer-legal p { font-size: 0.6875rem; line-height: 1.7; color: var(--dim); max-width: 95ch; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 48rem) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .card-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .manifesto { grid-template-columns: 1fr 1.4fr 1.3fr; gap: 1.5rem; }
  .footer-cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
  .calc-intro { padding: 2.4rem 2.4rem 2.6rem; }
  .result { padding: 1.9rem 1.8rem 2rem; }
  .calc-card { padding: 1.9rem; }
}

@media (min-width: 62rem) {
  /* Input panel left, result right — the mockup's tool layout. */
  .calc-layout { grid-template-columns: 23rem 1fr; gap: 2.5rem; align-items: start; }
}

@media (max-width: 47.99rem) {
  .home-hero {
    margin-inline: -1.25rem;
    margin-top: 0;
    border-left: 0;
    border-right: 0;
    padding: 2.25rem 1.4rem 4rem;
    min-height: 33rem;
  }
  .home-hero .hero-image { object-position: 63% center; opacity: 0.44; }
  .home-hero::after {
    background: linear-gradient(170deg, rgba(10, 12, 15, 0.86) 0%, rgba(10, 12, 15, 0.7) 55%, rgba(10, 12, 15, 0.5) 100%);
  }
  .utility-strip { font-size: 0.5rem; letter-spacing: 0.06em; }
  .hero-index { font-size: 0.5rem; right: 1.25rem; bottom: 1rem; }
  .catalog-head { display: block; }
  .catalog-head p { margin-top: 1rem; }
  .card-photo { height: 12.8rem; }
  .table-top { flex-wrap: wrap; gap: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card-photo img, .photo-card, .btn, .unit-btn, .input { transition: none; }
  .input.just-solved { animation: none; }
}

/* Prose below the tool reads at a narrower measure than the tool layout. */
.prose { max-width: 48rem; margin-top: 3rem; }

/* Plain text card — the 404 points at the calculators without the weight of
   a photograph. */
.tool-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.4rem 1.5rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.16s ease;
}
.tool-card:hover { border-color: #6b737f; }
.tool-card h3 { margin: 0 0 0.4rem; font-size: 1.25rem; letter-spacing: -0.02em; }
.tool-card p { margin: 0; font-size: 0.875rem; line-height: 1.65; color: var(--muted); }

/* ── Guides ──────────────────────────────────────────────────────────────────
   Long-form pages paired with a calculator. The call-out sends the reader to
   the tool; lists and the sources block sit at the prose measure.
   ────────────────────────────────────────────────────────────────────────── */
.guide-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 1rem 1.2rem;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  max-width: 48rem;
  transition: border-color 0.16s ease;
}
.guide-cta::after { content: "\2197"; color: var(--muted); }
.guide-cta:hover { border-color: #6b737f; border-left-color: var(--ink); }
.guide-cta-group { display: grid; gap: 0.6rem; margin-top: 1.5rem; max-width: 48rem; }
.guide-cta-group .guide-cta { margin: 0; }

.answer ul, .answer ol { max-width: 68ch; color: #c8ccd2; padding-left: 1.2rem; margin: 0 0 0.95rem; }
.answer li { margin-bottom: 0.45rem; }
.answer h3 { margin-top: 1.6rem; }

/* Link from a calculator's intro to its guide. */
.guide-link { margin: 1rem 0 0; font-size: 0.8125rem; }
.guide-link a { color: #c3c8cf; }
.guide-link a:hover { color: var(--ink); }

/* ── Embeds ──────────────────────────────────────────────────────────────────
   /embed/<slug>/ pages: the input card, its note and the result, stacked in a
   single column that fits an iframe from 300px up.
   ────────────────────────────────────────────────────────────────────────── */
.embed-wrap { display: grid; gap: 0.6rem; max-width: 30rem; margin-inline: auto; padding: 0.5rem; }
.embed-wrap > * { min-width: 0; }
.embed-wrap .sidebar-note { padding: 0 0.2rem; }
.embed-credit { margin: 0; font-size: 0.75rem; color: var(--muted); text-align: center; }
.embed-credit a { color: var(--ink); }

/* Compact sizing. An embed sits inside someone else's page, so the form and
   result are tightened to keep the frame short. The full pages are untouched. */
.embed .calc-card { padding: 1rem; }
.embed .panel-title { margin-bottom: 0.2rem; }
.embed .field, .embed .field:last-of-type { margin-bottom: 0.65rem; }
.embed .field label, .embed .field-label-row { margin-bottom: 0.3rem; }
.embed .field .hint { margin-top: 0.1rem; line-height: 1.45; }
.embed .input { font-size: 1.05rem; padding: 0.45rem 0.7rem; min-height: 2.4rem; }
.embed .preset-group { margin-bottom: 0.4rem; }
.embed .btn { padding-block: 0.55rem; min-height: 2.6rem; }
.embed .result { padding: 1rem; }
.embed .result-hero { margin-top: 0.35rem; }
.embed .result-number { font-size: 2.6rem; }
.embed .result-reading { margin: 0.5rem 0 0; line-height: 1.55; }
.embed .result .compare-table th, .embed .result .compare-table td { padding: 0.4rem 0.6rem; }
/* Commentary that only makes sense beside the full breakdown: the 1RM
   formula note promises both estimates "with the result", and the heart rate
   hint is the formula itself. The badge repeats what the toggle or the
   reading already says. */
.embed #formula + .hint, .embed #formula-hint, .embed .result-badge { display: none; }
.embed .result .table-top { display: none; }
/* The zone table's "For" column is description, not result. */
.embed #zone-table tr > :nth-child(4) { display: none; }
.embed #zone-table { min-width: 0; }

/* ── Embed code page ─────────────────────────────────────────────────────────
   Copy-paste snippets and their live previews on /embed-calculators/.
   ────────────────────────────────────────────────────────────────────────── */
.embed-item { max-width: 48rem; }
.snippet { margin-top: 1rem; border: 1px solid var(--line); background: var(--recessed); }
.snippet pre {
  margin: 0;
  padding: 0.9rem 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: #c8ccd2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.snippet-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--line);
}
.copy-status { font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); }
.embed-preview-box { margin-top: 1rem; }
.embed-preview-box summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; padding: 0.4rem 0; }
.embed-preview { display: block; width: 100%; max-width: 30rem; border: 0; margin-top: 0.75rem; }