/* base.css (award-level-websites). Load after tokens.css: reset, type roles, layout primitives, interactive
   states, print. The hooks for motion.js live in motion.css. */

/* 1. Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  hanging-punctuation: first last;
  accent-color: var(--c-accent); caret-color: var(--c-accent);
  scrollbar-color: color-mix(in oklab, var(--c-ink) 35%, transparent) transparent;
}
@media (prefers-reduced-motion: no-preference) {
  /* smooth only while something on the page has focus (an in-page link was used), so scripted scrolls,
     find-in-page and restored positions jump instantly instead of fighting it */
  html:focus-within { scroll-behavior: smooth; }
  @view-transition { navigation: auto; }
}
body {
  min-height: 100vh; min-height: 100svh;
  background: var(--c-bg); color: var(--c-ink);
  font-family: var(--font-body); font-size: var(--step-0); font-weight: var(--body-weight);
  line-height: var(--leading-body);
  letter-spacing: var(--body-tracking, 0);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; overflow-wrap: break-word; }
h1, h2, h3, h4, h5 { text-wrap: balance; overflow-wrap: break-word; }
[id] { scroll-margin-top: var(--scroll-offset, 5.5rem); }
table, time, .tabular, .price, [data-count-to] { font-variant-numeric: tabular-nums; }
strong, b { font-weight: var(--strong-weight); }
hr { border: 0; border-top: var(--border); }
::selection { background: var(--c-selection); color: var(--c-ink); }

/* 2. Links and focus */
a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.link-underline {
  color: inherit; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size var(--dur-ui, 160ms) var(--ease-out);
}
.link-underline:hover, .link-underline:focus-visible, .link-underline[aria-current] { background-size: 100% 1px; }

/* 3. Type roles */
h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display); font-weight: var(--heading-weight); font-stretch: var(--display-stretch);
  letter-spacing: var(--heading-tracking); line-height: var(--leading-tight);
}
h1, .h1, .display, h2, .h2 { text-transform: var(--display-case); }
h1, .h1, .display { font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: var(--leading-display); }
.display { font-size: var(--step-6); }
h1, .h1 { font-size: var(--step-5); }
h2, .h2 { font-size: var(--step-4); }
h3, .h3 { font-size: var(--step-2); }
h4, .h4 { font-size: var(--step-1); }
.lede { font-size: var(--step-1); line-height: 1.45; max-width: 52ch; }
.small, small { font-size: var(--step--1); }
.muted { color: var(--c-muted); }
.eyebrow { /* budget: at most 1 per 3 sections (see direction.md) */
  font-family: var(--font-label); font-size: var(--step--1); font-weight: var(--strong-weight);
  text-transform: var(--label-case); letter-spacing: var(--label-tracking); color: var(--c-muted);
}
.mono, code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-s); }
.prose > :is(h2, h3) { margin-top: var(--space-l); }
.prose blockquote { padding-left: var(--space-s); border-left: 2px solid var(--c-accent); }
.prose ul, .prose ol { padding-left: var(--space-m); }
.prose li + li { margin-top: var(--space-3xs); }

/* 4. Layout primitives */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.surface { background: var(--c-surface); }
.invert { background: var(--c-ink); color: var(--c-bg); --c-muted: color-mix(in oklab, var(--c-bg) 72%, var(--c-ink)); }
.invert a:not(.btn) { color: inherit; }
.stack { display: flex; flex-direction: column; gap: var(--stack, var(--space-s)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-s)); }
.grid-auto { display: grid; gap: var(--grid-gap, var(--space-m)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 16rem)), 1fr)); }
.split { display: grid; gap: var(--split-gap, var(--space-l-2xl)); align-items: var(--split-align, center); }
@media (min-width: 52em) {
  .split { grid-template-columns: var(--split); }
  .split--flip > :first-child { order: 2; }
}
.bento { display: grid; gap: var(--space-s); grid-template-columns: minmax(0, 1fr); }
:where(.split, .bento, .grid-auto, .layout, .cluster) > * { min-width: 0; } /* long words/code can't widen the page */
@media (min-width: 48em) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(11rem, auto); }
  .bento > * { grid-column: span 2; }
  .bento > .span-3 { grid-column: span 3; } .bento > .span-4 { grid-column: span 4; }
  .bento > .span-6 { grid-column: span 6; } .bento > .row-2 { grid-row: span 2; }
}
.layout { /* page grid: children sit in the content column; .wide / .full-bleed break out without 100vw */
  display: grid;
  grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [wide-start] minmax(0, var(--space-2xl))
    [content-start] min(100% - 2 * var(--gutter), var(--container)) [content-end] minmax(0, var(--space-2xl))
    [wide-end] minmax(var(--gutter), 1fr) [full-end];
}
.layout > * { grid-column: content; }
.layout > .wide { grid-column: wide; }
.layout > .full-bleed { grid-column: full; }
.frame { overflow: hidden; border-radius: var(--radius-m); background: var(--c-surface); }
.frame > img, .frame > svg, .frame > video { width: 100%; height: 100%; object-fit: cover; }
.arch { border-radius: 999px 999px var(--radius-s) var(--radius-s); }

/* 5. Buttons and controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 44px; padding: var(--space-2xs) var(--space-m);
  border: var(--btn-border, 2px solid transparent); border-radius: var(--radius-btn);
  background: var(--c-accent); color: var(--c-accent-ink); box-shadow: var(--shadow-1);
  font-family: var(--font-body); font-size: var(--step-0); font-weight: var(--strong-weight); line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-ui, 160ms) var(--ease-out), color var(--dur-ui, 160ms) var(--ease-out),
    border-color var(--dur-ui, 160ms) var(--ease-out), transform var(--dur-press, 120ms) var(--ease-out),
    box-shadow var(--dur-press, 120ms) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.98); box-shadow: none; }
.btn:focus-visible { outline-offset: 4px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: currentColor; box-shadow: none; }
.btn--brand { background: var(--c-accent-raw); color: var(--c-accent-raw-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--c-ink); color: var(--c-bg); }
  .btn--ghost:hover { border-color: var(--c-ink); }
  .invert .btn:hover { background: var(--c-bg); color: var(--c-ink); }
}
label { font-weight: var(--strong-weight); }
input:not([type="checkbox"], [type="radio"]), textarea, select {
  width: 100%; min-height: 44px; padding: var(--space-2xs) var(--space-xs); background: var(--c-bg); font-size: var(--step-0);
  border: 1px solid color-mix(in oklab, var(--c-ink) 45%, var(--c-bg)); border-radius: var(--radius-s);
}
input:hover, textarea:hover, select:hover { border-color: var(--c-ink); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 1px; border-color: var(--c-accent); }
input:disabled, textarea:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; }
input:user-invalid, textarea:user-invalid { border-color: var(--c-accent); outline: 1px solid var(--c-accent); }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* 6. Utilities */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-s); top: var(--space-s); z-index: 100;
  padding: var(--space-2xs) var(--space-s); background: var(--c-ink); color: var(--c-bg); border-radius: var(--radius-s);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
[data-header] { position: sticky; top: 0; z-index: 50; background: var(--c-bg); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
[data-header].is-scrolled { box-shadow: 0 1px 0 var(--c-line); }
[data-header].is-hidden { transform: translateY(-100%); }
[data-progress] { position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; background: var(--c-accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

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

/* 7. Print */
@media print {
  [data-header], [data-progress], [data-motion-toggle], .skip-link, [data-marquee] { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .section { padding-block: 1.5rem; }
  img, figure { break-inside: avoid; }
}