/* ============================================================
   SToConsult — styles.css
   Organized: Reset → Base → @font-face → Motion suppression
   All values reference tokens.css custom properties.
   ============================================================ */

/* ==========================================================
   1. RESET
   ========================================================== */

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

* {
  margin: 0;
  padding: 0;
}

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

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

/* ==========================================================
   2. BASE
   ========================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — Spectral 300, display role */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  max-width: 24ch;
}

h1 {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-display-l);
}

h3 {
  font-size: var(--fs-display-m);
}

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
}

/* Prose measure */
p, li, dd, blockquote {
  max-width: var(--measure);
}

/* Structural rows are not prose — they must span their container.
   Without this, the Span year axis inherits the prose measure and
   stops lining up with the track above it. */
.span-scale,
.span-note {
  max-width: none;
}

/* Links */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--dur) var(--ease);
}

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

/* Focus indicators — 2px solid verdigris, 3px offset */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ==========================================================
   3. @FONT-FACE DECLARATIONS
   Self-hosted fonts from /fonts/ — no external CDN.
   ========================================================== */

/* Spectral 300 — display headings */
@font-face {
  font-family: "Spectral";
  src: url("/fonts/spectral-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("/fonts/spectral-300-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Instrument Sans — body text and UI */
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono — labels and tabular figures only */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================
   4. MOTION — blanket suppression for reduced-motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   5. LAYOUT
   ========================================================== */

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.section {
  padding: var(--s-16) 0;
  border-bottom: var(--hairline) solid var(--rule);
}

.section:last-of-type {
  border-bottom: none;
}

.section-grid {
  display: grid;
  gap: var(--s-8);
}

@media (min-width: 62rem) {
  .section-grid {
    grid-template-columns: var(--rail) 1fr;
    gap: var(--s-12);
  }
}

.rail {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.rail-number {
  font-weight: 500;
  color: var(--accent-mark);
  display: block;
}

/* ==========================================================
   6b. PROSE RHYTHM
   Stacked paragraphs and sub-headings inside a section body.
   Replaces per-element inline margins so spacing stays
   adjustable from tokens.css alone.
   ========================================================== */

.section-grid p + p,
.section-body p + p {
  margin-top: var(--s-4);
}

/* Headings need air beneath them before their own body copy */
.section-grid h2,
.section-body h2 {
  margin-bottom: var(--s-4);
}

.section-grid h3,
.section-body h3 {
  margin-bottom: var(--s-3);
}

/* A sub-heading following earlier content needs the larger step above */
.section-grid h3,
.section-body h3 {
  margin-top: var(--s-8);
}

/* ...except immediately after its own section heading */
.section-grid h2 + h3,
.section-body h2 + h3 {
  margin-top: 0;
}

.section-grid ul,
.section-body ul {
  padding-left: var(--s-6);
}

.section-grid ul + p,
.section-body ul + p {
  margin-top: var(--s-6);
}

/* ==========================================================
   6. COMPONENTS — Buttons
   ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  padding: var(--s-3) var(--s-6);
}

.btn-primary:hover {
  background: var(--c-ink);
}

.btn-quiet {
  background: transparent;
  color: var(--text);
  border: var(--hairline) solid var(--rule-strong);
  padding: var(--s-3) var(--s-6);
}

.btn-quiet:hover {
  border-color: var(--text);
  background: var(--bg-raised);
}

.btn-text {
  background: transparent;
  color: var(--accent);
  border: none;
  padding: 0;
}

.btn-text:hover {
  color: var(--text);
}

/* ==========================================================
   7. COMPONENTS — Cards
   ========================================================== */

.cards-grid {
  display: grid;
  gap: var(--s-8);
  margin-top: var(--s-12);
}

@media (min-width: 62rem) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: var(--bg-raised);
  border: var(--hairline) solid var(--rule);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s-8);
  max-width: 26rem;
}

.card-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}

.card-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  margin-bottom: var(--s-4);
}

.card-body {
  color: var(--text-muted);
  margin-bottom: var(--s-6);
}

/* ==========================================================
   8. COMPONENTS — Pullquote
   ========================================================== */

.pullquote {
  border-left: 2px solid var(--accent-mark);
  padding-left: var(--s-6);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lh-title);
  max-width: 44ch;
  color: var(--text);
}

/* ==========================================================
   9. COMPONENTS — Definition list
   ========================================================== */

/* The FAQ list carries its own rhythm: each question is a block,
   so pairs are separated by the larger step. */
.deflist {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-8);
}

.deflist dd + dt {
  margin-top: var(--s-8);
}

.deflist dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.deflist dd {
  max-width: var(--measure);
}

/* ==========================================================
   10. COMPONENTS — Masthead
   ========================================================== */

.masthead {
  padding: var(--s-24) 0 var(--s-16);
}

.masthead-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}

.masthead h1 {
  margin-bottom: var(--s-6);
}

.masthead-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 58ch;
}

.masthead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
  margin-top: var(--s-8);
}

/* ==========================================================
   10b. SECTION HEADINGS (homepage)
   ========================================================== */

.section-heading {
  margin-bottom: var(--s-3);
}

.section-intro {
  color: var(--text-muted);
  max-width: var(--measure);
}

/* ==========================================================
   11. DARK SECTION
   ========================================================== */

.dark-section {
  background: var(--c-ink);
  color: var(--c-paper);
  padding: var(--s-24) 0;
}

.dark-section .wrap {
  text-align: center;
}

.dark-section h2 {
  margin-left: auto;
  margin-right: auto;
  color: var(--c-paper);
  margin-bottom: var(--s-4);
}

.dark-section p {
  margin-left: auto;
  margin-right: auto;
  color: #A7B4B0;
}

.dark-section .btn-primary {
  background: var(--c-verdigris-light);
  color: var(--c-ink);
  margin-top: var(--s-8);
}

.dark-section .btn-primary:hover {
  background: var(--c-paper);
}

/* ==========================================================
   12. HEADER & FOOTER
   ========================================================== */

.site-header {
  padding: var(--s-6) 0;
}

.wordmark {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--accent);
}

.site-footer {
  padding: var(--s-16) 0;
  border-top: var(--hairline) solid var(--rule);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
  margin-bottom: var(--s-8);
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-decoration: none;
}

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

.footer-nav .nav-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: currentColor;
}

.footer-app-icon {
  width: 1.2em;
  height: 1.2em;
  border-radius: 3px;
  vertical-align: -0.15em;
  margin-right: 0.3em;
}

.footer-legal {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ==========================================================
   THE SPAN — career timeline visualization
   ========================================================== */

.span-set {
  display: grid;
  gap: var(--s-8);
  margin-top: var(--s-12);
}

/* Each row: label and years on one baseline, track beneath.
   Grid keeps the dt/dd pairing valid for assistive tech while
   still laying out as a two-column head plus full-width track. */
.span {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-3) var(--s-4);
}

.span-label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text);
  max-width: none;
}

.span-years {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
  max-width: none;
}

.span-track {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  position: relative;
  max-width: none;
}

.span-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: left center;
}

/* Brass marks a single milestone rather than elapsed experience */
.span-bar-mark {
  background: var(--accent-mark);
}

/* A true-scale interval can fall below a pixel. Render it as a tick
   rather than inflating the width — the scale stays honest. */
.span-bar-tick {
  min-width: 2px;
}

.span-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: var(--hairline) solid var(--rule);
}

.span-note {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: var(--s-6);
}

/* ==========================================================
   COMPONENTS — App entries (apps page)
   ========================================================== */

.app-list {
  display: grid;
  gap: var(--s-8);
}

.app-entry {
  padding-bottom: var(--s-8);
  border-bottom: var(--hairline) solid var(--rule);
}

.app-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.app-entry h2 {
  font-size: var(--fs-display-m);
  margin-bottom: var(--s-2);
}

.app-entry h2 a {
  text-decoration: none;
}

.app-entry p {
  color: var(--text-muted);
}

/* Animation — only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .span-bar {
    transform: scaleX(0);
    animation: draw var(--dur) var(--ease) forwards;
  }

  @keyframes draw {
    to {
      transform: scaleX(1);
    }
  }
}

/* ==========================================================
   CONFIRMATION PAGE
   ========================================================== */

.confirmed-content {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--s-24) var(--s-6);
}

.confirmed-content h1 {
  margin-bottom: var(--s-8);
}

.confirmed-content .deflist {
  margin: var(--s-8) 0;
}

/* ==========================================================
   HEADER NAV
   ========================================================== */

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.btn-small {
  font-size: var(--fs-small);
  padding: var(--s-2) var(--s-4);
  white-space: nowrap;
}

/* A plain nav destination. Matches .nav-dropdown-toggle so the Apps
   menu and the Blog link read as peers rather than two devices. */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--s-2) 0;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

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

.nav-link .nav-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: currentColor;
}

/* Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--s-2) 0;
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}

.nav-dropdown-toggle:hover {
  color: var(--text);
}

.nav-dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--s-2);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--s-2);
  background: var(--bg-raised);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-2) 0;
  list-style: none;
  min-width: 10rem;
  z-index: 100;
}

.nav-dropdown-menu li a {
  display: grid;
  grid-template-columns: 1.2em 1fr;
  column-gap: 0.4em;
  align-items: baseline;
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-small);
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.nav-dropdown-menu li a:hover {
  background: var(--bg-sunken);
}

.nav-app-tagline {
  grid-column: 2;
  font-size: var(--fs-label);
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}

.nav-app-icon {
  width: 1.2em;
  height: 1.2em;
  border-radius: 3px;
  align-self: center;
  margin-right: 0.3em;
}

/* Footer groups */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
}

.footer-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.footer-group-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}

/* ==========================================================
   NARROW SCREENS
   Below ~26rem the wordmark, Apps menu and CTA no longer fit
   on one line at full size. Tighten the gaps and step the type
   down rather than let the labels wrap into two-line blocks.
   ========================================================== */

@media (max-width: 26rem) {
  .site-header .wrap {
    gap: var(--s-3);
  }

  .header-nav {
    gap: var(--s-4);
  }

  .wordmark,
  .header-nav .btn-small,
  .header-nav .nav-link,
  .nav-dropdown-toggle {
    font-size: var(--fs-label);
    letter-spacing: 0;
  }

  .header-nav .btn-small {
    padding: var(--s-2) var(--s-3);
  }
}

/* Narrower still: wordmark, Apps, Blog and the CTA need ~369px on one
   line and none of them may wrap mid-label. Break the header into two
   rows instead of shrinking the type again or demoting the CTA. */
@media (max-width: 22rem) {
  .site-header .wrap {
    flex-wrap: wrap;
  }

  .header-nav {
    width: 100%;
    justify-content: space-between;
    margin-top: var(--s-3);
  }
}