/* ==========================================================================
   XYFitAI — site styles

   BRAND, FROM THE APP: carbon black and the #27ae60 green family, taken from
   theme/colors.js. Someone who scans the QR, reads this page, then opens the
   app should not feel a seam. Spacing and radii follow theme/spacing.js.

   WHAT THIS DELIBERATELY DOES NOT INHERIT: the rest of theme/colors.js is the
   2013 Flat UI palette unmodified — #3498db, #e74c3c, #f39c12, #2ecc71 are
   Peter River, Alizarin, Orange and Emerald. The app needs several hues because
   protein, carbs and fat have to be told apart on a ring. A web page has no
   such requirement, and importing the full rainbow is what made the previous
   site (built from #2c3e50 and #e74c3c, the same palette) read as dated.

   So: one accent, spent only where it carries meaning — the computed signal and
   the primary action. Everything else is greyscale, and the green does its work
   as LIGHT rather than as fill. On carbon that reads as an instrument trace,
   which is what the product actually is.

   No build step by design. The previous site was a Next.js app whose source was
   lost; this one should still be editable in five years by opening the file.
   ========================================================================== */

:root {
  /* Ground: layered carbon. The app's bgGradient flattened out at large sizes,
     so this keeps the same blacks but gives the page depth to sit in. */
  --bg:        #08090a;
  --bg-1:      #0d0f10;
  --bg-2:      #131617;
  --bg-3:      #191d1e;

  /* The one accent. From the app, unchanged — this is the recognisable part. */
  --green:      #27ae60;
  --green-lit:  #2ecc71;
  --green-hot:  #4ee88b;   /* highlight only: hairlines, the live trace */
  --green-deep: #1e8449;
  --glow:       rgba(46, 204, 113, 0.28);
  --glow-soft:  rgba(39, 174, 96, 0.10);

  --text:   #f4f6f5;
  --text-2: #9aa3a0;
  --text-3: #626b68;

  --surface:      rgba(255, 255, 255, 0.035);
  --surface-lift: rgba(255, 255, 255, 0.06);
  --line:         rgba(255, 255, 255, 0.08);
  --line-lit:     rgba(255, 255, 255, 0.14);

  /* theme/spacing.js */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px;
  --sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 48px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;

  --measure: 66ch;
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --page:    1200px;

  /* Sora carries the headlines — geometric, engineered, distinct at display
     sizes in a way the platform font is not. Manrope reads underneath it. */
  --display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --step--2: 0.72rem;
  --step--1: clamp(0.8rem, 0.77rem + 0.14vw, 0.875rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.06rem);
  --step-1:  clamp(1.125rem, 1.05rem + 0.36vw, 1.32rem);
  --step-2:  clamp(1.45rem, 1.28rem + 0.8vw, 2rem);
  --step-3:  clamp(2rem, 1.65rem + 1.6vw, 3.1rem);
  --step-4:  clamp(2.6rem, 1.85rem + 3.5vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  /* Green as light: one bloom behind the hero, so the accent is present in the
     room before any component uses it as a colour. */
  background-image:
    radial-gradient(52rem 34rem at 74% -6%, var(--glow-soft), transparent 62%),
    radial-gradient(38rem 30rem at 4% 22%, rgba(39, 174, 96, 0.05), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-1) 38%, var(--bg-2) 100%);
  background-attachment: fixed;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--green-lit); outline-offset: 3px; border-radius: var(--r-sm); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green); color: #04140a; font-weight: 700;
  padding: var(--sp-md); border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------- typography */
h1, h2, h3, h4 { margin: 0; font-family: var(--display); line-height: 1.12; text-wrap: balance; }
h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; }
h2 { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.035em; }
h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; }
p  { margin: 0 0 var(--sp-md); max-width: var(--measure); color: var(--text-2); text-wrap: pretty; }

/* A hairline of the accent, then the label. The rule is the signal; the words
   name what is below it. */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--2); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--green-lit);
  margin: 0 0 var(--sp-md);
  display: flex; align-items: center; gap: var(--sp-sm);
}
.eyebrow::before {
  content: ''; width: 2rem; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--green-hot), transparent);
  box-shadow: 0 0 8px var(--glow);
}

.lede { font-size: var(--step-1); color: var(--text-2); line-height: 1.6; font-weight: 400; }

.wrap { width: min(100% - (var(--gutter) * 2), var(--page)); margin-inline: auto; }
section { padding-block: clamp(3.5rem, 8vw, 7rem); }
section + section { border-top: 1px solid var(--line); }

/* -------------------------------------------------------------- controls */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  font-family: var(--body); font-weight: 700; font-size: var(--step-0);
  padding: 0.95rem 1.6rem; border: 1px solid transparent; border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--green-lit), var(--green-deep));
  color: #04140a; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 26px rgba(39,174,96,0.30);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 14px 34px rgba(39,174,96,0.4); }
.btn--ghost {
  background: var(--surface); border-color: var(--line-lit); color: var(--text);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--surface-lift); border-color: rgba(46,204,113,0.4); box-shadow: none; }
.btn__sub { font-size: var(--step--2); opacity: 0.75; display: block; font-weight: 500; }
.btn__stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.store-row { display: flex; flex-wrap: wrap; gap: var(--sp-md); margin-top: var(--sp-xl); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 9, 10, 0.7); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding-block: 0.85rem; }
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  letter-spacing: -0.04em; text-decoration: none; color: var(--text);
  display: inline-flex; align-items: baseline;
}
.wordmark b { color: var(--green-lit); font-weight: 700; }
.nav__links { display: flex; gap: var(--sp-lg); align-items: center; }
.nav__links a { font-size: var(--step--1); text-decoration: none; color: var(--text-2); font-weight: 500; }
.nav__links a:hover { color: var(--green-lit); }
@media (max-width: 760px) { .nav__links .nav__hide { display: none; } }

/* ----------------------------------------------------------------- hero */
.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2rem, 5vw, 4rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }
.hero h1 { margin-bottom: var(--sp-lg); }
.hero__claim {
  color: var(--green-lit);
  text-shadow: 0 0 44px rgba(46, 204, 113, 0.35);
}

/* The signature: an instrument trace. Dim readings, one live green line
   through them, lit rather than merely coloured. */
.plot {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)),
    radial-gradient(30rem 18rem at 50% 0%, rgba(39,174,96,0.10), transparent 70%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-lg) var(--sp-lg) var(--sp-md);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  overflow: hidden;
}
/* A single hairline of accent along the top edge — the only chrome. */
.plot::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-hot), transparent);
  opacity: 0.6;
}
.plot__caption {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-md); flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--step--2); color: var(--text-3);
  letter-spacing: 0.06em;
  border-top: 1px solid var(--line); margin-top: var(--sp-md); padding-top: var(--sp-md);
}
.plot__caption strong { color: var(--green-lit); font-weight: 500; font-variant-numeric: tabular-nums; }
.plot__key { display: flex; gap: var(--sp-md); flex-wrap: wrap; }
.plot__key span { display: inline-flex; align-items: center; gap: var(--sp-xs); }
.plot__swatch { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-3); }
.plot__swatch--line {
  width: 1.2rem; height: 0; border-radius: 0; border-top: 2px solid var(--green-hot);
  box-shadow: 0 0 8px var(--glow);
}

.dot   { fill: #4a5350; }
.trend { fill: none; stroke: var(--green-hot); stroke-width: 2.5; stroke-linecap: round;
         filter: drop-shadow(0 0 6px rgba(78, 232, 139, 0.55)); }
.axis  { stroke: rgba(255,255,255,0.07); stroke-width: 1; }

/* ------------------------------------------------------------- measured */
.measured { display: grid; gap: var(--sp-md); margin-top: var(--sp-xl); }
@media (min-width: 780px) { .measured { grid-template-columns: repeat(3, 1fr); } }
.measured__cell {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-lg);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.measured__cell:hover { border-color: rgba(46,204,113,0.28); background: var(--surface-lift); }
.measured__n {
  font-family: var(--display); font-size: var(--step-2); font-weight: 700;
  letter-spacing: -0.035em; color: var(--text); line-height: 1.1;
}
.measured__l {
  font-family: var(--mono); font-size: var(--step--2); color: var(--green-lit);
  text-transform: uppercase; letter-spacing: 0.16em; margin-top: var(--sp-xs);
}
.measured__d { font-size: var(--step--1); color: var(--text-2); margin: var(--sp-md) 0 0; line-height: 1.65; }

/* ------------------------------------------------------------- features */
.features { display: grid; gap: var(--sp-md); }
@media (min-width: 720px)  { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-lg);
  transition: border-color 220ms ease, transform 220ms ease;
}
.feature:hover { border-color: rgba(46,204,113,0.26); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .feature:hover { transform: none; } }
.feature__i {
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--green-lit); margin-bottom: var(--sp-md);
}
.feature h3 { margin-bottom: var(--sp-sm); color: var(--text); }
.feature p { color: var(--text-2); font-size: var(--step--1); margin: 0; line-height: 1.7; }

/* --------------------------------------------------------------- derive */
.derive { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.derive__row {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-xs);
  padding: var(--sp-md) var(--sp-lg); border-top: 1px solid var(--line);
  transition: background-color 180ms ease;
}
.derive__row:first-child { border-top: 0; }
.derive__row:not(.derive__head):hover { background: rgba(46,204,113,0.045); }
@media (min-width: 780px) {
  .derive__row { grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1.15fr); align-items: center; gap: 0; }
}
.derive__in  { font-weight: 600; color: var(--text); }
.derive__arw { color: var(--green-lit); text-align: center; font-family: var(--mono); }
.derive__out { color: var(--text-2); font-size: var(--step--1); }
.derive__head {
  background: rgba(255,255,255,0.03);
  font-family: var(--mono); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-3);
}
.derive__head .derive__in { color: var(--text-3); font-weight: 500; font-family: var(--mono); }

/* -------------------------------------------------------------- pricing */
.price {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)),
    radial-gradient(24rem 14rem at 88% 0%, rgba(39,174,96,0.14), transparent 70%);
  border: 1px solid var(--line-lit); border-radius: var(--r-xl);
  padding: clamp(1.6rem, 4vw, 2.6rem); max-width: 34rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.price__n { font-family: var(--display); font-size: var(--step-3); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--text); }
.price__n span { font-family: var(--body); font-size: var(--step-0); font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.price ul { list-style: none; padding: 0; margin: var(--sp-lg) 0 0; display: grid; gap: var(--sp-sm); }
.price li { display: flex; gap: var(--sp-sm); align-items: flex-start; font-size: var(--step--1); color: var(--text-2); }
.price li::before { content: '✓'; color: var(--green-lit); font-weight: 700; flex: none; }

/* --------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); padding-block: var(--sp-xxl) var(--sp-xl); }
.foot__grid { display: grid; gap: var(--sp-xl); }
@media (min-width: 780px) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.foot h4 { font-family: var(--mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-3); font-weight: 500; margin-bottom: var(--sp-md); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-sm); }
.foot a { color: var(--text-2); text-decoration: none; font-size: var(--step--1); }
.foot a:hover { color: var(--green-lit); }
.foot__bottom {
  margin-top: var(--sp-xl); padding-top: var(--sp-md); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--step--2); color: var(--text-3); letter-spacing: 0.06em;
}

/* ------------------------------------------------------------ documents */
.doc { padding-block: clamp(2.5rem, 6vw, 4rem); }
.doc__head { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-lg); margin-bottom: var(--sp-xl); }
.doc__body { max-width: var(--measure); }
.doc__body h2 { font-size: var(--step-2); margin: var(--sp-xl) 0 var(--sp-md); padding-top: var(--sp-lg); border-top: 1px solid var(--line); color: var(--text); }
.doc__body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.doc__body h3 { font-size: var(--step-1); margin: var(--sp-lg) 0 var(--sp-sm); color: var(--text); }
.doc__body ul { padding-left: 1.15rem; margin: 0 0 var(--sp-md); }
.doc__body li { margin-bottom: var(--sp-sm); color: var(--text-2); }
.doc__body li::marker { color: var(--green); }
.doc__body strong { color: var(--text); font-weight: 700; }
.doc__body a { color: var(--green-lit); }
.doc__meta { font-family: var(--mono); font-size: var(--step--2); color: var(--text-3); letter-spacing: 0.06em; }

/* ------------------------------------------------------------------ /get */
.get { min-height: 100dvh; display: grid; place-items: center; padding: var(--gutter); text-align: center; }
.get__card { max-width: 30rem; }
.get__spinner {
  width: 2.25rem; height: 2.25rem; margin: 0 auto var(--sp-lg);
  border: 2px solid var(--line-lit); border-top-color: var(--green-hot);
  border-radius: 50%; animation: spin 780ms linear infinite;
  box-shadow: 0 0 20px var(--glow);
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .get__spinner { animation-duration: 3s; } }
.get .store-row { justify-content: center; }
.get__manual { display: none; }
.get__manual.is-shown { display: block; }

/* ----------------------------------------------------------- entrances */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(16px); animation: rise 700ms cubic-bezier(.2,.7,.3,1) forwards; }
  .rise-1 { animation-delay: 60ms; }
  .rise-2 { animation-delay: 160ms; }
  .rise-3 { animation-delay: 260ms; }
  .rise-4 { animation-delay: 360ms; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ==========================================================================
   Pillars — the three systems, given equal weight.

   The site previously led with nutrition alone. By line count the app is
   ~15k lines of training and ~12k of AI coaching against ~6k of nutrition,
   so leading with one third of it misrepresented the product.
   ========================================================================== */
.pillars { display: grid; gap: var(--sp-md); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-lg);
  display: flex; flex-direction: column;
  transition: border-color 220ms ease, background-color 220ms ease;
}
.pillar:hover { border-color: rgba(46, 204, 113, 0.24); background: var(--surface-lift); }
.pillar__k {
  font-family: var(--mono); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--green-lit); margin: 0 0 var(--sp-md);
}
.pillar h3 { margin-bottom: var(--sp-sm); color: var(--text); }
.pillar > p { color: var(--text-2); font-size: var(--step--1); line-height: 1.7; }
.pillar__l {
  list-style: none; margin: auto 0 0; padding: var(--sp-md) 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: var(--sp-xs);
}
.pillar__l li { font-size: var(--step--1); color: var(--text-2); display: flex; gap: var(--sp-sm); align-items: baseline; }
.pillar__l li::before { content: '·'; color: var(--green); font-weight: 700; }
.pillar__l b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Learning profile — the signature panel.

   Rendered as the app's own screen rather than as marketing copy, because the
   point being made is that this screen exists at all. Field names are the
   real ones from AILearningProfileScreen.
   ========================================================================== */
.learn {
  background: var(--surface);
  border: 1px solid var(--line-lit);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.learn__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md); flex-wrap: wrap;
  padding: var(--sp-md) var(--sp-lg);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-3);
}
.learn__state { color: var(--green-lit); display: inline-flex; align-items: center; gap: var(--sp-sm); }
.learn__state::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-hot); box-shadow: 0 0 10px var(--glow); flex: none;
}
.learn__grid { display: grid; gap: 0; margin: 0; }
@media (min-width: 720px)  { .learn__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .learn__grid { grid-template-columns: repeat(3, 1fr); } }
.learn__item {
  padding: var(--sp-lg);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.learn__item dt {
  font-weight: 700; color: var(--text); font-size: var(--step-0);
  margin-bottom: var(--sp-xs);
}
.learn__item dd {
  margin: 0; color: var(--text-2); font-size: var(--step--1); line-height: 1.6;
}

/* The plot gets a title now that it is making a named point. */
.plot__title {
  margin: 0 0 var(--sp-md);
  font-family: var(--mono); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-3);
  max-width: none;
}

/* ==========================================================================
   Blog — the post list and the post page.

   No new stylesheet and almost no new vocabulary. A post page is a .doc, the
   same component that already renders /privacy and /terms; the additions
   below are the tags .doc__body did not previously need, because a legal
   document only ever uses h2, h3, ul, strong and a.

   The post list is a LOG rather than a card grid. Cards would be the default
   choice and the wrong one: this site's argument is that a series of readings
   means more than any single one, and the .derive table already established
   the visual grammar for that — mono, tabular, one row per entry, the accent
   arriving on hover rather than sitting there. A blog index is a series of
   dated readings. It should look like one.
   ========================================================================== */

/* ------------------------------------- the tags a post uses and a policy doc does not */
.doc__body ol { padding-left: 1.15rem; margin: 0 0 var(--sp-md); }
.doc__body ol li { margin-bottom: var(--sp-sm); color: var(--text-2); }
.doc__body ol li::marker { color: var(--green); font-family: var(--mono); font-size: var(--step--1); }
.doc__body em { color: var(--text); font-style: italic; }
.doc__body hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-xl) 0; }

.doc__body blockquote {
  margin: var(--sp-lg) 0;
  padding: var(--sp-md) var(--sp-lg);
  border-left: 2px solid var(--green);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface);
}
.doc__body blockquote p:last-child { margin-bottom: 0; }

.doc__body code {
  font-family: var(--mono); font-size: 0.88em;
  background: var(--surface-lift); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 0.1rem 0.35rem; color: var(--text);
}
.doc__body pre {
  margin: 0 0 var(--sp-md); padding: var(--sp-md);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow-x: auto;   /* code scrolls inside its own box; the page never does */
}
.doc__body pre code { background: none; border: 0; padding: 0; font-size: var(--step--1); }

.doc__body figure { margin: var(--sp-xl) 0; }
.doc__body img { border: 1px solid var(--line); border-radius: var(--r-md); }
.doc__body figcaption {
  margin-top: var(--sp-sm);
  font-family: var(--mono); font-size: var(--step--2);
  color: var(--text-3); letter-spacing: 0.06em;
}

/* ------------------------------------------------------------ post page */
.post__meta {
  margin: 1rem 0 0;
  font-family: var(--mono); font-size: var(--step--2);
  color: var(--text-3); letter-spacing: 0.06em;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm);
  max-width: none;
}
.post__tags { display: inline-flex; flex-wrap: wrap; gap: var(--sp-sm); }
.post__tags span {
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--line-lit); border-radius: 999px;
  color: var(--green-lit);
}

.post__end {
  max-width: var(--measure);
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--line);
}
.post__end h2 { margin-bottom: var(--sp-md); }

/* ------------------------------------------------------------- the log */
/* No top border: .doc__head above it already draws one, and two hairlines a
   line-height apart reads as a mistake rather than a frame. */
.log { border-top: 0; }
.log__row {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-xs);
  padding: var(--sp-lg) var(--sp-md);
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background-color 180ms ease;
}
.log__row:hover { background: rgba(46, 204, 113, 0.045); }
@media (min-width: 780px) {
  .log__row { grid-template-columns: 10rem minmax(0, 1fr) 4.5rem; gap: var(--sp-lg); align-items: baseline; }
  .log__read { text-align: right; }
}
.log__date, .log__read {
  font-family: var(--mono); font-size: var(--step--2);
  color: var(--text-3); letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.log__body { display: block; min-width: 0; }
.log__title {
  display: block;
  font-family: var(--display); font-size: var(--step-1); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.25; color: var(--text);
  transition: color 180ms ease;
}
.log__row:hover .log__title { color: var(--green-lit); }
.log__desc {
  display: block; margin-top: var(--sp-xs); max-width: var(--measure);
  color: var(--text-2); font-size: var(--step--1); line-height: 1.6;
}

/* A post may need a table; a privacy policy never did. Wrapped in its own
   scroll container so a wide table scrolls itself rather than the page. */
.doc__body .table { overflow-x: auto; margin: var(--sp-lg) 0; border: 1px solid var(--line); border-radius: var(--r-md); }
.doc__body table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--step--1); }
.doc__body th, .doc__body td { padding: var(--sp-sm) var(--sp-md); text-align: left; border-top: 1px solid var(--line); }
.doc__body thead th {
  border-top: 0; background: rgba(255,255,255,0.03);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-3);
  white-space: nowrap;
}
.doc__body td { color: var(--text-2); }
.doc__body tbody tr:hover { background: rgba(46, 204, 113, 0.045); }
.doc__body td:first-child { color: var(--text); font-weight: 600; }
/* Loads and distances are numbers being compared down a column. */
.doc__body td:not(:first-child) { font-family: var(--mono); font-variant-numeric: tabular-nums; }