@import url('./tokens.css');

/* Base and typography: one family, five text roles. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; background: var(--color-page); }
body { margin: 0; color: var(--color-text); background: var(--color-page); font: var(--text-body)/1.65 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { color: var(--color-text); font-weight: 600; letter-spacing: -.04em; line-height: 1.15; text-wrap: balance; }
h1 { font-size: var(--text-title); }
h2 { font-size: var(--text-heading); }
h3 { font-size: var(--text-subheading); letter-spacing: -.025em; }
p { max-width: 65ch; }
a { color: var(--color-link); text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
img, svg { max-width: 100%; }
code, pre { font-family: var(--font-mono); }
.eyebrow { font-size: var(--text-small); font-weight: 500; color: var(--color-muted); margin-bottom: var(--space-3); }
.lead, .muted { color: var(--color-muted); }

/* Layout primitives. Section rows and cards share the same column lines. */
.container { width: min(var(--width-page), calc(100% - 2 * var(--page-gutter))); margin-inline: auto; }
.narrow { max-width: var(--width-reading); }
.stack > * + * { margin-top: var(--space-3); }
.cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.section, .contact-band { padding-block: var(--space-6); }
/* Dividers follow the content width, including on ultrawide screens. */
.section, .contact-band, .site-header, .site-footer { position: relative; }
.section::before, .contact-band::before, .site-header::before, .site-footer::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  width: min(var(--width-page), calc(100% - 2 * var(--page-gutter)));
  height: 1px;
  margin-inline: auto;
  background: var(--color-line);
  opacity: .55;
  pointer-events: none;
}
.site-header::before { inset-block-start: auto; inset-block-end: 0; }
.section--subtle, .contact-band { background: var(--color-subtle); }
.section-row, .section-heading { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.section-row > :last-child, .section-heading > :last-child { grid-column: span 2; }
.section-heading { margin-bottom: var(--space-5); }
.section-heading > p, .section-copy p { color: var(--color-muted); }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.feature-row { padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.card-grid + .feature-row { margin-top: var(--space-5); }
.feature-row p { color: var(--color-muted); }

/* Page introductions: the same type and spacing in both themes. */
.hero, .page-hero { padding-block: var(--space-6); }
.hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: center; }
.hero h1 span { display: block; }
.hero .lead, .page-hero .lead { margin-top: var(--space-4); max-width: 52ch; }
.hero .cluster { margin-top: var(--space-4); }
.page-hero { max-width: var(--width-reading); padding-bottom: var(--space-5); }
.hero-status { margin-top: var(--space-3); color: var(--color-muted); font-size: var(--text-small); }

/* Single-page introductions and sections use the same spacing scale. */
.hero--centered { text-align: center; background: radial-gradient(ellipse at top, var(--color-subtle), transparent 75%); }
.hero--centered h1 { max-width: 24ch; margin-inline: auto; }
.hero--centered .eyebrow { color: var(--color-accent); margin-inline: auto; }
.hero--centered .lead { max-width: 62ch; margin-inline: auto; }
.section-heading--stacked { display: flex; flex-direction: column; gap: var(--space-3); }
.card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Actions. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-action); border-radius: var(--radius); background: var(--color-action); color: var(--color-on-action); text-decoration: none; font-size: var(--text-small); font-weight: 500; cursor: pointer; transition: opacity var(--motion); }
.button:hover { opacity: .85; }
.button--secondary { color: var(--color-text); background: transparent; border-color: var(--color-line); }
.button:disabled { opacity: .5; cursor: not-allowed; }
.text-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-line); padding-block: var(--space-1); }
.text-link:hover { border-color: var(--color-text); }

/* Header and footer. */
.header-inner { display: flex; justify-content: space-between; align-items: center; min-height: 96px; gap: var(--space-4); }
.brand { display: inline-flex; gap: var(--space-1); align-items: center; text-decoration: none; color: var(--color-text); font-size: var(--text-subheading); font-weight: 600; letter-spacing: -.04em; }
.brand svg { width: 42px; height: 42px; flex: none; }
.brand-suffix { color: var(--color-accent); font-weight: 400; }
.site-nav { display: flex; align-items: center; gap: var(--space-4); }
.site-nav a { color: var(--color-muted); font-size: var(--text-small); text-decoration: none; padding-block: var(--space-1); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--color-text); }
.site-nav a[aria-current] { box-shadow: 0 1px var(--color-accent); }
.site-nav .nav-contact { border: 1px solid var(--color-line); padding: var(--space-1) var(--space-2); color: var(--color-text); border-radius: var(--radius); }
.menu-toggle { display: none; }
.skip-link { position: fixed; left: var(--space-2); top: -5rem; padding: var(--space-2); background: var(--color-action); color: var(--color-on-action); z-index: 100; }
.skip-link:focus { top: var(--space-2); }
.site-footer { padding: var(--space-5) 0 var(--space-3); }
.footer-top { display: flex; justify-content: space-between; gap: var(--space-4); align-items: start; padding-bottom: var(--space-5); }
.footer-tagline { margin-top: var(--space-2); font-size: var(--text-small); color: var(--color-muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-links a { font-size: var(--text-small); color: var(--color-muted); text-decoration: none; }
.footer-bottom { border-top: 1px solid var(--color-line); padding-top: var(--space-3); display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-small); color: var(--color-muted); }

/* Cards. Subgrid aligns descriptions even when a heading wraps. */
.card { border: 1px solid var(--color-line); padding: var(--space-4); border-radius: var(--radius); background: var(--color-surface); }
.card p, .card .text-link { margin-top: var(--space-2); }
.card p { color: var(--color-muted); }
.feature-card { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.feature-card p { color: var(--color-muted); }
.case-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-block: var(--space-4); }
.case-list:empty { display: none; }
.tag { display: inline-block; border: 1px solid var(--color-line); padding: var(--space-1); border-radius: var(--radius); font-size: var(--text-small); color: var(--color-muted); }
.callout { border-left: 2px solid var(--color-accent); padding-left: var(--space-3); color: var(--color-muted); }
.quote { border-block: 1px solid var(--color-line); padding-block: var(--space-4); margin: 0; }
.quote cite { display: block; margin-top: var(--space-3); color: var(--color-muted); font-size: var(--text-small); font-style: normal; }
.contact-band .button { margin-top: var(--space-3); }
.contact-address { font-size: var(--text-subheading); overflow-wrap: anywhere; }
.fact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--space-5); }
.fact-list div { border-top: 1px solid var(--color-line); padding-top: var(--space-2); }
.fact-list dt { font-size: var(--text-small); font-weight: 500; color: var(--color-muted); margin-bottom: var(--space-1); }
.fact-list dd { margin: 0; color: var(--color-muted); }

/* Reading pages use the same type scale and a consistent vertical rhythm. */
.prose { max-width: var(--width-reading); padding-bottom: var(--space-6); }
.prose > * + * { margin-top: var(--space-3); }
.prose h2 { margin-top: var(--space-5); }
.prose h3 { margin-top: var(--space-4); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { color: var(--color-muted); }
.prose ul, .prose ol { padding-left: var(--space-3); }
.prose li + li { margin-top: var(--space-1); }
.prose strong { color: var(--color-text); font-weight: 600; }
.prose blockquote { margin-left: 0; padding-left: var(--space-3); border-left: 2px solid var(--color-accent); }
.prose hr { border: 0; border-top: 1px solid var(--color-line); margin-block: var(--space-5); }
.prose img { height: auto; }
.prose pre { overflow-x: auto; padding: var(--space-2); background: var(--color-subtle); }
.draft-banner { padding: var(--space-2); text-align: center; background: #f4db9b; color: #352913; font-size: var(--text-small); }
details { border-bottom: 1px solid var(--color-line); padding-block: var(--space-3); }
summary { cursor: pointer; }
details p { padding-top: var(--space-2); color: var(--color-muted); }

/* One stacking breakpoint for the shared layouts. */
@media (max-width: 760px) {
  .header-inner { min-height: 80px; flex-wrap: wrap; gap: 0; }
  .site-nav { flex-basis: 100%; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding-block: var(--space-2); }
  .js .menu-toggle { display: inline-flex; align-items: center; gap: var(--space-1); border: 1px solid var(--color-line); padding: var(--space-1) var(--space-2); min-height: 44px; background: transparent; color: var(--color-text); border-radius: var(--radius); font-size: var(--text-small); }
  .js .site-nav[data-open='false'] { display: none; }
  .hero-grid, .section-row, .section-heading, .card-grid, .case-list, .fact-list { grid-template-columns: 1fr; }
  .section-row > :last-child, .section-heading > :last-child { grid-column: auto; }
  .footer-top, .footer-bottom { flex-direction: column; align-items: start; }
  .footer-links { gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}