/* Shared chrome for Tensile content pages (/learn/*). Deliberately NOT used by
   index.html: that page's stylesheet is tuned to the pinned scroll tour and
   pulling it apart would risk the scrub for no gain. This file exists so every
   article shares one cached stylesheet instead of duplicating tokens.

   Pairs with fonts.css, which must be linked first. */

:root {
  /* same tokens as index.html, so a reader landing here cold from Google
     sees the same site they would see on the homepage */
  --chalk: #EFF1EA;
  --chalk-raised: #F7F9F2;
  --ink: #131810;
  --moss: #5C6A58;
  --line: #D9DDD0;
  --lime: #C6F432;
  --lime-ink: #55691E;
  --pitch: #0B0F0D;
  --srf: #141A17;
  --bdr: #26302B;
  --txt: #E8EFEA;
  --dim: #8FA098;

  --disp: "Big Shoulders", "Arial Narrow", sans-serif;
  --body: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:focus-visible { outline: 2px solid var(--lime-ink); outline-offset: 3px; }
img, svg { max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }

/* ---- nav: same shape as the homepage's light state ---- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--chalk) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.brand svg { flex: 0 0 auto; }
.brand-name {
  font-family: var(--disp); font-weight: 800; font-size: 25px;
  letter-spacing: .05em; text-transform: uppercase; padding-top: 2px;
}
.nav .spacer { flex: 1; }
.nav .btn {
  font-family: var(--body); font-weight: 800; font-size: 14px;
  background: var(--ink); color: var(--chalk); text-decoration: none;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap;
}
.nav .btn:hover { background: var(--lime-ink); }

/* ---- article ---- */
.art { max-width: 720px; margin: 0 auto; padding: clamp(34px, 6vw, 68px) 0 20px; }
.eyebrow {
  font-family: var(--body); font-weight: 800; font-size: 11.5px;
  letter-spacing: .17em; text-transform: uppercase; color: var(--lime-ink);
  display: flex; align-items: center; gap: 11px;
}
.eyebrow::before { content: ""; width: 22px; height: 11px; background: var(--lime); border: 1.5px solid var(--ink); flex: 0 0 auto; }
.art h1 {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(44px, 7.6vw, 86px); line-height: .89; letter-spacing: .006em;
  margin: 18px 0 0; text-wrap: balance;
}
.art .standfirst {
  font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--moss);
  margin: 20px 0 0; max-width: 60ch;
}
.art .byline {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--moss);
  margin: 26px 0 0; padding-top: 14px; border-top: 2px solid var(--ink);
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  /* .art p sets max-width in ch, and ch resolves against the element's OWN font.
     On this 11.5px mono that came out ~470px, so the rule above the byline
     stopped two thirds of the way across the column. */
  max-width: none;
}

.art h2 {
  font-family: var(--disp); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 42px); line-height: .95; letter-spacing: .008em;
  margin: 52px 0 0; text-wrap: balance;
}
.art h3 { font-size: 19px; font-weight: 800; margin: 32px 0 0; }
.art p { margin: 18px 0 0; max-width: 68ch; }
.art p strong, .art li strong { font-weight: 700; }
.art a { color: var(--lime-ink); text-decoration: underline; text-underline-offset: 2px; }
.art ul, .art ol { margin: 18px 0 0 22px; max-width: 66ch; }
.art li { margin-top: 9px; }
.art hr { border: 0; border-top: 1px solid var(--line); margin: 46px 0 0; }

/* a claim with the number in it, pulled out of the flow */
.pull {
  margin: 34px 0 0; padding: 22px 24px;
  background: var(--pitch); color: var(--txt); border-radius: 4px;
}
.pull .n {
  font-family: var(--disp); font-weight: 800; font-size: clamp(46px, 6vw, 70px);
  line-height: .92; letter-spacing: .01em; color: var(--lime); display: block;
  font-variant-numeric: tabular-nums;
}
.pull .c { font-size: 15.5px; line-height: 1.55; color: var(--dim); margin-top: 10px; max-width: 46ch; }
.pull .c b { color: var(--txt); font-weight: 700; }

/* data table: the noise simulation */
.tw { overflow-x: auto; margin: 30px 0 0; }
table { border-collapse: collapse; width: 100%; min-width: 470px; font-size: 15px; }
caption {
  caption-side: bottom; text-align: left; font-size: 13px; color: var(--moss);
  padding-top: 12px; line-height: 1.5;
}
th, td { text-align: right; padding: 11px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; }
thead th {
  font-family: var(--body); font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--moss);
  border-bottom: 2px solid var(--ink);
}
tbody tr.hit td { background: color-mix(in srgb, var(--lime) 22%, transparent); font-weight: 700; }
td.bad { color: #A0341F; font-weight: 700; }

/* the "what to ask" checklist */
.ask { margin: 30px 0 0; border-top: 2px solid var(--ink); }
.ask li {
  list-style: none; margin: 0; padding: 16px 0;
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px;
}
.ask li .q { font-family: var(--disp); font-weight: 800; font-size: 19px; color: var(--lime-ink); letter-spacing: .04em; }
.ask ul { margin: 0; }

/* ---- /learn/ hub: the article list ---- */
.hub { max-width: 860px; margin: 0 auto; padding: clamp(34px, 6vw, 68px) 0 10px; }
.hub h1 {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(48px, 8.4vw, 104px); line-height: .88; letter-spacing: .006em;
  margin: 18px 0 0;
}
.hub .standfirst { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--moss); margin: 20px 0 0; max-width: 58ch; }
.list { margin: clamp(30px, 4vw, 48px) 0 0; border-top: 2px solid var(--ink); }
.list a.item {
  display: block; text-decoration: none; color: inherit;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.list a.item:hover { background: var(--chalk-raised); }
.list .meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--moss);
  display: flex; flex-wrap: wrap; gap: 5px 14px;
}
.list h2 {
  font-family: var(--disp); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3.2vw, 40px); line-height: .96; letter-spacing: .008em;
  margin: 10px 0 0; text-wrap: balance;
}
.list a.item:hover h2 { color: var(--lime-ink); }
.list p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--moss); max-width: 64ch; }
.list .more { display: inline-block; margin-top: 12px; font-weight: 800; font-size: 14.5px; color: var(--lime-ink); }

/* closing CTA */
.cta-band { background: var(--pitch); color: var(--txt); margin-top: 62px; padding: clamp(38px, 5.5vw, 64px) 0; }
.cta-band h2 {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(32px, 4.6vw, 56px); line-height: .95; margin: 0; max-width: 22ch;
}
.cta-band p { color: var(--dim); font-size: 16.5px; line-height: 1.6; margin: 16px 0 0; max-width: 52ch; }
.cta-band .go {
  display: inline-block; margin-top: 24px; background: var(--lime); color: var(--pitch);
  font-weight: 800; font-size: 16px; text-decoration: none; padding: 15px 26px; border-radius: 999px;
}
.cta-band .go:hover { background: #D7FF4A; }
/* --dim, not the homepage's #5C6A63: that colour is under 4.5:1 on pitch, which
   is too low for 12.5px text even as fine print. */
.cta-band .fine { font-size: 12.5px; color: var(--dim); margin-top: 16px; }

footer {
  border-top: 1px solid var(--line); margin-top: 0;
  padding: 26px 0; font-size: 13.5px; color: var(--moss);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
footer a { color: var(--moss); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}