/* base.css: the /website structure layer. Write it exactly. Brand colors, fonts, radius and
   type sizes go in site.css (Step 3 direction). Spacing stays on the 4/8 scale, stepped per screen. */
:root {
  --gutter: 16px; --section: 48px; --gap: 16px;
  --wide: 2200px;     /* content stops growing here; backgrounds and photos keep going */
  --measure: 62ch;    /* running text only: tune per font so lines stay at 75 characters or less */
  --header-h: 72px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 744px)  { :root { --gutter: 32px; --section: 64px; --gap: 24px; } }
@media (min-width: 1180px) { :root { --gutter: 48px; --section: 96px; --gap: 32px; } }
@media (min-width: 1920px) { :root { --gutter: 64px; --section: 120px; } }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }
input, select, textarea, button { font: inherit; }
input, select, textarea { font-size: max(1rem, 16px); }

/* fill the width, cap only text */
.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.band { padding-block: var(--section); }
.prose { max-width: var(--measure); }
.split, .split--hero { display: grid; gap: calc(var(--gap) * 2); align-items: center; }
@media (min-width: 744px)  { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .split--hero { grid-template-columns: 1fr 1fr; } }
.hero-copy { container-type: inline-size; }
.hero-copy h1 { font-size: clamp(2.25rem, 8.5cqi, 4.5rem); }
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.frame { overflow: hidden; }
.doc { display: grid; gap: calc(var(--gap) * 2); }
.doc > nav { align-self: start; }
.doc > nav a { display: block; padding-block: 12px; }
@media (min-width: 744px) {
  .doc { grid-template-columns: minmax(160px, 1fr) minmax(0, var(--measure)); }
  .doc > nav { grid-row: span 2; position: sticky; top: calc(var(--header-h) + 24px); }
  .doc > aside { grid-column: 2; }
}
@media (min-width: 1280px) {
  .doc { grid-template-columns: minmax(200px, 1fr) minmax(0, var(--measure)) minmax(240px, 1fr); }
  .doc > nav { grid-row: auto; }
  .doc > aside { grid-column: auto; }
}

/* header: sticky, hides on scroll down, comes back on scroll up or keyboard focus */
.site-header { position: sticky; top: 0; z-index: 40; transition: transform 300ms var(--ease); view-transition-name: site-header; }
.site-header.is-hidden:not(:focus-within) { transform: translateY(-100%); }
.site-header .wrap { display: flex; align-items: center; gap: var(--gap); min-height: var(--header-h); }
.nav { display: none; }
.nav a { display: block; padding: 12px; }
.menu-btn { min-height: 48px; min-width: 48px; }
.mobile-nav a { display: block; padding: 14px var(--gutter); }
@media (min-width: 1024px) { .nav { display: flex; gap: 4px; } .menu-btn, .mobile-nav { display: none; } }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px;
  text-decoration: none; border: 0; cursor: pointer; transition: transform 120ms var(--ease); }
.btn:active { transform: scale(0.97); }
.site-footer a { display: inline-block; padding-block: 12px; }

/* phones: sticky call bar; scroll-padding keeps focused links out from under it (WCAG 2.4.11) */
.callbar { position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; gap: 8px;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); }
.callbar a { flex: 1; }
@media (max-width: 743px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (min-width: 744px) { .callbar { display: none; } }

.skip { position: absolute; left: 8px; top: -64px; z-index: 100; padding: 12px 16px; }
.skip:focus { top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 2px; }

/* motion: one opening moment, a light entrance on inner pages, page transitions, at most 3 scroll
   moments per page. All of it off with reduced motion. The LCP element never starts invisible. */
.intro-line { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .intro-media { animation: intro-settle 1000ms var(--ease-out) both; }
  .intro-line { overflow: hidden; padding-bottom: 0.08em; }
  .intro-line > span { display: block; animation: intro-rise 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
  .intro-fade { animation: intro-fade 600ms var(--ease-out) both; animation-delay: calc(200ms + var(--i, 0) * 80ms); }
  .page-intro h1 { animation: intro-lift 500ms var(--ease-out) both; }
  .page-intro .lead { animation: intro-fade 500ms var(--ease-out) 80ms both; }
  @supports (animation-timeline: view()) {
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease); }
}
@keyframes intro-settle { from { transform: scale(1.06); } }
@keyframes intro-rise { from { transform: translateY(105%); } }
@keyframes intro-lift { from { transform: translateY(16px); } }
@keyframes intro-fade { from { opacity: 0; transform: translateY(12px); } }
@keyframes rise { from { transform: translateY(48px); } }
@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; }
}