/* Site styles. Sections appear in the same order as in index.html and docs/CONTENT.md.
   Colours, fonts, spacing: only via tokens from tokens.css.
   Responsive rules are grouped at the end, per breakpoint, in the same section order. */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Three soft lights on the page ground: top left, middle right, bottom left. */
  background-color: var(--color-bg);
  background-image:
    radial-gradient(var(--glow-size) at 18% 0%, var(--color-glow) 0%, transparent 70%),
    radial-gradient(var(--glow-size) at 92% 50%, var(--color-glow) 0%, transparent 70%),
    radial-gradient(var(--glow-size) at 12% 100%, var(--color-glow) 0%, transparent 70%);
  background-repeat: no-repeat;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

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

.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------- typography ---------- */
h1, h2, h3, p { margin: 0; }

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}

h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
}

h1 em, h2 em, .footer-story em {
  font-style: italic;
  color: var(--color-accent);
}

.label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-label);
  line-height: var(--leading-list);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.caption {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--leading-list);
  letter-spacing: var(--tracking-caption);
  color: var(--color-muted);
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-muted);
  max-width: 30em;
}

.body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-muted);
}

.body-small { font-size: var(--text-small); }

/* Hairline list: rows separated by rules, no bullets */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list li {
  padding: var(--space-3) 0;
  border-top: var(--hairline) solid var(--color-rule);
  font-size: var(--text-small);
  line-height: var(--leading-list);
  color: var(--color-text);
}

/* ---------- buttons ---------- */
.button-primary {
  display: inline-block;
  padding: 14px var(--space-6);
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 500;
  font-size: var(--text-small);
  line-height: 1.2;
  border-radius: var(--radius);
  transition: opacity var(--duration-fast) var(--ease-out);
}

.button-primary:hover { opacity: 0.9; }

.button-link {
  display: inline-block;
  padding-bottom: 2px;
  font-size: var(--text-small);
  line-height: 1.2;
  color: var(--color-text);
  border-bottom: var(--hairline) solid var(--color-border);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.button-link:hover { border-color: var(--color-accent); }

/* ---------- charts (inline SVG) ---------- */
.chart {
  width: 100%;
  height: auto;
}

.chart-line { stroke: var(--color-accent); fill: none; }
.chart-ref { stroke: var(--color-border); fill: none; }
.chart-fill { fill: var(--color-accent); }
.chart-axis { stroke: var(--color-rule); }
.chart-tick { stroke: var(--color-border); }

.chart-text {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--color-muted);
}

.chart-text-ref { fill: var(--color-border); }
.chart-text-accent { fill: var(--color-accent); }

/* ---------- logo ---------- */
.logo { display: block; }
.logo-svg { display: block; width: auto; }
.logo-mark { color: var(--color-accent); }
.logo-word { color: var(--color-text); }

/* Tagline inside the print lockup (footer). Sizes are SVG user units, not CSS px:
   18 units on a 40-unit x-height, tracking 0.12em, justified by word gaps in the markup. */
.logo-tagline {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 2.16px;
  fill: var(--color-muted);
}

/* ---------- section: header ---------- */
.site-header {
  border-bottom: var(--hairline) solid var(--color-rule);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 14px var(--space-7);
  /* Symmetric padding: the row's centre line is the header's centre line.
     16px around the 33px CTA button keeps the header at about 66px. */
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: auto;
}

.site-header .logo-svg { height: 26px; }

.tagline {
  letter-spacing: var(--tracking-tagline);
  white-space: nowrap;
  /* Uppercase mono sits 1px high in its line box; nudge it onto the header centre line. */
  position: relative;
  top: 1px;
}

/* The d's ascender makes the logo box taller than the mark; the mark's axis sits
   2px below the box centre. Pulling the logo up by 2px puts that axis on the header
   centre line, where the tagline and the nav are centred as well. */
.site-header .logo { margin-top: -4px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -8px -8px -8px 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--color-text);
  cursor: pointer;
}

.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="false"] .icon-close { display: none; }

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-nav);
  color: var(--color-muted);
}

.nav-list a {
  display: inline-block;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-list a:hover { color: var(--color-text); }

/* Header CTA: the same solid button as the hero primary, at nav size. */
.nav-cta {
  padding: 8px 16px;
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 500;
  line-height: 1.2;
  border-radius: var(--radius);
  transition: opacity var(--duration-fast) var(--ease-out);
}

.nav-list a.nav-cta:hover {
  color: var(--color-bg);
  opacity: 0.9;
}

/* ---------- section: hero ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-10);
  align-items: start;
  padding-top: var(--section-pad);
  padding-bottom: calc(var(--section-pad) + var(--space-2));
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  min-width: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7);
  margin-top: var(--space-1);
}

.hero-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  margin-top: 10px;
  padding-left: var(--space-8);
  border-left: var(--hairline) solid var(--color-rule);
}

.formulas {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  line-height: var(--leading-formula);
  color: var(--color-text);
}

.formula + .formula { margin-top: var(--space-3); }
.formula dt, .formula dd { margin: 0; }
.formula dd { color: var(--color-muted); }

.chart-tail { max-width: 360px; }

/* ---------- sections: shared ---------- */
.section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  border-top: var(--hairline) solid var(--color-rule);
}

.section > .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---------- section: who ---------- */
.who-head { max-width: 40em; }

.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--hairline) solid var(--color-border);
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-6) var(--space-6) var(--space-2);
  border-left: var(--hairline) solid var(--color-rule);
}

.tile:first-child { padding-left: 0; border-left: 0; }
.tile:last-child { padding-right: 0; }

.closing {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-closing);
  line-height: var(--leading-h3);
  color: var(--color-accent);
}

/* ---------- section: services ---------- */
.services-head {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-10);
  align-items: end;
}

.columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.column {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 0 var(--space-8);
  border-left: var(--hairline) solid var(--color-rule);
}

.column:first-child { padding-left: 0; border-left: 0; }
.column:last-child { padding-right: 0; }

/* ---------- section: approach ---------- */
.approach-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-10);
  align-items: start;
}

.approach-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.approach-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding-top: var(--space-2);
}

.chart-dist { max-width: 500px; }

.principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-9) var(--space-10);
  padding-top: var(--space-9);
  border-top: var(--hairline) solid var(--color-border);
}

.principle {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* ---------- section: engagement ---------- */
.formats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  align-items: stretch;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
  padding: var(--space-9);
  background: var(--color-surface);
  border-radius: var(--radius);
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-card-title);
  line-height: var(--leading-h2);
}

.card-badge { color: var(--color-accent); }

.card-text { color: var(--color-text); }

.card-action {
  margin-top: auto;
  padding-top: var(--space-2);
}

.format {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
  padding: var(--space-9) 0 var(--space-9) var(--space-9);
  border-left: var(--hairline) solid var(--color-rule);
}

/* ---------- section: faq ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-10);
}

.qa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: var(--space-6) 0;
  border-top: var(--hairline) solid var(--color-rule);
}

.qa h3 { font-size: var(--text-question); }

/* ---------- section: contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-10);
  align-items: start;
}

.contact-copy { min-width: 0; }

.channels {
  margin: 0;
  padding-top: var(--space-2);
  min-width: 0;
}

.channel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding: 18px 0;
  border-top: var(--hairline) solid var(--color-rule);
}

.channel:first-child { border-top-color: var(--color-border); }
.channel:last-child { border-bottom: var(--hairline) solid var(--color-rule); }

.channel dt, .channel dd { margin: 0; }

.channel dd {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--color-text);
}

.channel dd a {
  transition: color var(--duration-fast) var(--ease-out);
}

.channel dd a:hover { color: var(--color-accent); }

/* ---------- section: footer ---------- */
.site-footer {
  border-top: var(--hairline) solid var(--color-rule);
}

.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8) var(--space-10);
  align-items: start;
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.site-footer .logo-svg { width: 300px; height: auto; }

/* The brand story lives under the footer logo (moved from its own section, 2026-09-05). */
.footer-story {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: var(--leading-story);
  color: var(--color-muted);
  max-width: 30em;
}

/* "con" and "rod" inside "connecting rod": the name spelled out, marked by colour only. */
.footer-story-mark { color: var(--color-text); }

/* Footer menu: one item per line. */
.footer-nav .nav-list {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-caption);
}

.copyright {
  grid-column: 1 / -1;
  padding-top: var(--space-4);
  border-top: var(--hairline) solid var(--color-rule);
}

/* ---------- motion ---------- */
[data-reveal] {
  opacity: var(--reveal-opacity);
  transform: translateY(var(--reveal-rise));
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Chart lines: main.js sets dasharray/dashoffset to the path length, then releases it. */
[data-draw].is-drawing {
  transition: stroke-dashoffset var(--duration-draw) var(--ease-out);
}

.chart-dist [data-draw].is-drawing {
  transition-duration: var(--duration-draw-long);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-draw] {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ---------- responsive: tablet (<= 960px) ---------- */
@media (max-width: 960px) {
  .container { padding-inline: var(--container-pad-tablet); }

  h1 { font-size: var(--text-h1-tablet); }
  h2 { font-size: var(--text-h2-tablet); }

  /* header: nav drops to a second row under the brand */
  .site-header-inner { flex-wrap: wrap; }
  .site-nav { flex-basis: 100%; }
  .site-nav .nav-list { flex-wrap: wrap; gap: var(--space-3) var(--space-6); }

  /* hero: single column, formula panel below */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-9);
    padding-top: var(--space-11);
    padding-bottom: var(--space-11);
  }
  .hero-panel { margin-top: 0; }

  /* who: 2 x 2 */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: var(--space-6) var(--space-6) var(--space-2); }
  .tile:nth-child(odd) { padding-left: 0; border-left: 0; }
  .tile:nth-child(even) { padding-right: 0; }
  .tile:nth-child(n+3) { border-top: var(--hairline) solid var(--color-rule); }

  /* services: stacked */
  .services-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .columns { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
  .column { padding: 0; border-left: 0; }
  .column + .column { padding-top: var(--space-9); border-top: var(--hairline) solid var(--color-rule); }

  /* approach: stacked, chart under copy */
  .approach-top { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
  .approach-figure { padding-top: 0; }

  /* engagement: stacked */
  .formats { grid-template-columns: minmax(0, 1fr); }
  .format { padding: var(--space-2) 0 0; border-left: 0; }

  /* process: 2 x 2 */

  /* contact: stacked */
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .channels { padding-top: 0; }

}

/* ---------- responsive: mobile (<= 640px) ---------- */
@media (max-width: 640px) {
  .container { padding-inline: var(--container-pad-mobile); }

  h1 { font-size: var(--text-h1-mobile); }
  h2 { font-size: var(--text-h2-mobile); }

  .section {
    padding-top: var(--section-pad-mobile);
    padding-bottom: var(--section-pad-mobile);
  }

  /* header: tagline hidden, nav behind a toggle */
  .site-header-inner { padding-top: 18px; padding-bottom: 18px; }
  .tagline { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; padding-top: var(--space-2); }
  .site-nav.is-open { display: block; }
  .site-nav .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: var(--text-nav-mobile);
  }
  .site-nav .nav-list li { border-top: var(--hairline) solid var(--color-rule); }
  .site-nav .nav-list a { display: block; padding: 14px 0; }
  .site-nav .nav-list .nav-cta {
    display: inline-block;
    margin: 14px 0;
    padding: 12px 20px;
  }

  /* hero: tighter to the header than other sections */
  .hero-grid {
    padding-top: var(--space-7);
    padding-bottom: var(--section-pad-mobile);
  }
  .hero-panel { padding-left: var(--space-5); }

  /* who: single column */
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile, .tile:nth-child(odd), .tile:nth-child(even) {
    padding: var(--space-5) 0 var(--space-2);
    border-left: 0;
  }
  .tile + .tile { border-top: var(--hairline) solid var(--color-rule); }
  .closing { font-size: var(--text-h3); }

  /* approach: principles single column */
  .principles { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }

  /* engagement: tighter card */
  .card { padding: var(--space-6); }
  .card-title { font-size: var(--text-closing); }

  /* process: single column */

  /* faq: single column */
  .faq-grid { grid-template-columns: minmax(0, 1fr); }

  /* footer: stacked */
  .site-footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}