/* =========================================================================
   BASE: reset, type, cursors, focus, grid, motion
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--localnav-h) + var(--s-5)); }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: "liga", "kern", "onum";
  cursor: default;
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { font-weight: 400; }
blockquote { margin: 0; }

/* ---- Cursor rules (DESIGN.md §8) ---------------------------------------- */
a, button, label[for], [role="option"], [role="menuitem"], [data-action] { cursor: var(--cursor-action); }
input, textarea { cursor: var(--cursor-text); }
button:disabled, [aria-disabled="true"] { cursor: var(--cursor-disabled); }

/* ---- Focus: keyboard only ---------------------------------------------- */
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus-ring); border-radius: 2px; }

::selection { background: color-mix(in srgb, var(--candlelight) 60%, var(--paper)); color: var(--ink); }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Type roles ----------------------------------------------------------- */

/* Engraved capitals: nav, section labels, buttons, captions' first line */
.label {
  font-family: var(--font-label);
  font-size: var(--label-size);
  line-height: 16px;
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.label--sm { font-size: var(--label-size-sm); }

.title {
  font-family: var(--font-serif);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: -0.01em;
}
.title em { font-style: italic; }

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.body { font-size: var(--fs-body); line-height: var(--lh-body); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-style: italic; }
.italic { font-style: italic; }
.muted { color: var(--text-secondary); }
.faint { color: var(--text-tertiary); }

/* Underlined text links (Caslon) */
.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--dur-1) var(--ease);
}
@media (hover: hover) { .link:hover { text-decoration-color: var(--ink); } }

/* Label links: underline draws in from the left */
.label-link { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); height: var(--control); }
.label-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.label-link[aria-current="true"]::after, .label-link[aria-current="page"]::after, .label-link[aria-expanded="true"]::after { transform: scaleX(1); }
@media (hover: hover) { .label-link:hover::after { transform: scaleX(1); } }
.label-link svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }

/* ---- Grid ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: calc(var(--grid-max) + 2 * var(--grid-margin));
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}
.grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); }

/* Hidden designer overlay. Toggle with G. */
.grid-overlay {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
  background: repeating-linear-gradient(to bottom, transparent 0 7px, color-mix(in srgb, var(--frost) 80%, transparent) 7px 8px);
}
.grid-overlay .container, .grid-overlay .grid { height: 100%; }
.grid-overlay .grid > span { background: color-mix(in srgb, var(--berry) 8%, transparent); }
@media (max-width: 743px) { .grid-overlay .grid > span:nth-child(n + 5) { display: none; } }
.show-grid .grid-overlay { opacity: 1; }

/* ---- Motion ---------------------------------------------------------------- */
/* Content fades up in reading order (JS sets --i). Calm, like turning a page. */
.reveal { animation: rise var(--dur-3) var(--ease) backwards; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.is-settled .reveal { animation: none; }
.is-settled .reveal--new { animation: rise var(--dur-3) var(--ease) backwards; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes shimmer { to { background-position: -200% 0; } }

#app { transition: opacity var(--dur-2) var(--ease); }
#app.is-leaving { opacity: 0; }