/* ===================================================================
   Direction B — shared chrome
   Tokens, masthead, footer, section frame, eyebrows, utilities.
   Page-specific styles live inline in each page.
   =================================================================== */

:root {
  --paper:     #FFFFFF;
  --paper-2:   #FFFFFF;
  --paper-3:   #FFFFFF;
  --ink:       #15140F;
  --ink-soft:  #3B362A;
  --ink-mute:  #76705F;
  --ink-dim:   #A7A08E;
  --rule:      rgba(21,20,15,0.16);
  --rule-soft: rgba(21,20,15,0.08);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --accent: #CF4520;  /* International Orange, the one accent */
  --accent-soft: #A7341E;
  --measure: 64ch;
  --col: 1240px;
  --gutter: 28px;

  /* Vertical rhythm. The modular grid is a 28px module with a 24px gutter
     (52px pitch); the 24 matches the horizontal column gap so gutters read the
     same both ways. Spacing steps are 4px atoms anchored on those units. Full
     rationale and the snapping rules are in docs/PROJECT-NOTES.md section 4. */
  --v-module: 28px;   /* one module (also the horizontal --gutter) */
  --v-gutter: 24px;   /* vertical gutter, matches the column gap */
  --v-pitch:  52px;   /* module + gutter */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-24:  24px;     /* = gutter */
  --sp-28:  28px;     /* = module */
  --sp-52:  52px;     /* = pitch */
  --sp-104: 104px;    /* = two pitches, the between-section gap */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #ffffff; color: var(--ink); }
body {
  font-family: "Switzer", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "ss01";
}
::selection { background: var(--accent); color: var(--paper); }
a { color: inherit; text-decoration: none; }
/* inline text link inside body copy: subtle rule underline, International Orange on hover */
.tlink {
  color: inherit;
  border-bottom: 1px solid var(--rule);
  transition: color 180ms ease, border-color 180ms ease;
}
.tlink:hover { color: var(--accent); border-bottom-color: var(--accent); }
a:focus-visible, button:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* utilities --------------------------------------------------------- */
.wrap { max-width: var(--col); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 720px) { :root { --gutter: 20px; } }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule-thick { height: 2px; background: var(--ink); border: 0; margin: 0; }

.eyebrow {
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.num { font-variant-numeric: tabular-nums lining-nums; }

/* masthead ---------------------------------------------------------- */
header.mast {
  position: sticky; top: 0; z-index: 50;
  background: #ffffff;
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.mast .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 60px;
}
.mast .left { display: flex; gap: 14px; align-items: baseline; }
.mast .mid {
  text-align: center;
  font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.mast .right { display: flex; gap: 22px; justify-content: flex-end; align-items: baseline; }
.wordmark {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: baseline;
}
.wordmark .slash { color: var(--accent); font-weight: 500; }
.wordmark .role { font-weight: 400; color: var(--ink-mute); }
.mast nav a {
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  position: relative;
  padding-bottom: 2px;
}
/* The last nav link carries 0.18em of trailing letter-space after its final
   glyph, which left CONNECT optically 2.2px inside the right margin while the
   wordmark sat exactly on column 1. Pull it back by its own letter-space so the
   masthead is flush on both edges. Keep this value in step with the
   letter-spacing above, including the mobile override below. */
.mast nav a:last-child { margin-right: -0.18em; }
.mast nav a.is-current { color: var(--ink); }
.mast nav a.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--accent);
}
.mast nav a:hover { color: var(--ink); }
.mast nav a:not(.is-current)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 220ms ease;
}
.mast nav a:not(.is-current):hover::after { transform: scaleX(1); }

@media (max-width: 760px) {
  .mast .wrap { grid-template-columns: 1fr auto; height: 56px; }
  .mast .mid { display: none; }
  .mast nav { gap: 16px; }
  .mast nav a { font-size: var(--t-micro); letter-spacing: 0.16em; }
  .mast nav a:last-child { margin-right: -0.16em; }
}
/* Positional nav hiding retired with the four-link nav. With Work out, the
   third child is Connect, so this was hiding the conversion link on phones.
   Three links fit at 360px. Restore only if the nav grows past four. */

/* page hero (shared shell) ------------------------------------------ */
.page-hero {
  padding: 80px 0 56px;
  position: relative;
}
.page-hero .topline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 48px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 14px;
}
.page-hero .topline .left,
.page-hero .topline .mid,
.page-hero .topline .right {
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.page-hero .topline .left { color: var(--ink); }
.page-hero .topline .mid { color: var(--ink-mute); text-align: center; font-weight: 400; }
.page-hero .topline .right { color: var(--ink-mute); text-align: right; }
.page-hero h1 {
  margin: 0;
  font-weight: 500;
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.034em;
  color: var(--ink);
  max-width: 18ch;
  text-wrap: balance;
}
.page-hero h1 .light { font-weight: 300; color: var(--ink-soft); }
.page-hero h1 .accent { color: var(--accent); font-weight: 500; }
.page-hero .lede {
  margin: 36px 0 0;
  max-width: 56ch;
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-soft);
}
.page-hero .lede b { font-weight: 600; color: var(--ink); }
@media (max-width: 720px) {
  .page-hero { padding: 56px 0 40px; }
  .page-hero .topline { grid-template-columns: 1fr; gap: 6px; }
  .page-hero .topline .mid, .page-hero .topline .right { text-align: left; }
}

/* section frame ----------------------------------------------------- */
section { padding: var(--sp-52) 0; border-top: 2px solid var(--ink); }
@media (max-width: 720px) { section { padding: 40px 0; } }

.sec-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 24px;
  margin-bottom: var(--sp-52);
}
.sec-head .nm {
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.sec-head h2 {
  margin: 0;
  font-weight: 500;
  font-size: var(--t-head);
  letter-spacing: -0.022em;
  line-height: 1.06;
  color: var(--ink);
  text-wrap: balance;
}
.sec-head h2 .light { font-weight: 300; color: var(--ink-soft); }
.sec-head h2 .vm { color: var(--accent); }
.sec-head .meta {
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
  font-weight: 500;
}
@media (max-width: 720px) {
  .sec-head { grid-template-columns: 1fr; gap: 12px; }
  .sec-head .meta { text-align: left; }
}

/* footer ------------------------------------------------------------ */
footer.foot {
  border-top: 2px solid var(--ink);
  padding: 30px 0 48px;
  background: #ffffff;
}
.colophon {
  margin-top: 0;
  text-align: left;
}
.colophon .contact-head {
  display: block;
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}
.colophon .channels {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}
.colophon .channels a {
  font-family: inherit;
  font-size: var(--t-body);
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  width: fit-content;
}
.colophon .channels a:hover { color: var(--accent); }
.footline {
  margin-top: 52px;
  font-family: inherit;
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 820px) {
  .colophon .channels a { font-size: var(--t-body); }
  .footline { font-size: var(--t-micro); letter-spacing: 0.12em; }
}

/* scroll-in --------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(8px); transition: opacity 600ms ease, transform 600ms ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
}