/* ==========================================================================
   Eldyne — base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Every in-page anchor (#field, #contact, the skip link's #main) used to land
     its heading underneath the 64px fixed nav. */
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-0);
  line-height: var(--lh-body);
  /* tnum belongs on stat blocks and tables, not on running prose, where it
     makes years and figures sit oddly. Applied per-component instead. */
  font-optical-sizing: auto;
  letter-spacing: var(--track-body);
  overflow-wrap: break-word;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
/* height:100% resolves against the parent, so a video in an auto-height box
   collapsed to 0px. .media sets its own aspect-ratio and handles its video. */
video { width: 100%; height: auto; }

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 4px;
  border-radius: var(--r-1);
}

::selection { background: var(--rose); color: #fff; }

/* Type roles ----------------------------------------------------------- */
.display {
  font-size: var(--display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  font-weight: 500;
  text-wrap: balance;
}
.display-sm {
  font-size: var(--display-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  font-weight: 500;
  text-wrap: balance;
}
.h2 { font-size: var(--t-4); line-height: var(--lh-snug); letter-spacing: var(--track-head); font-weight: 500; text-wrap: balance; }
.h3 { font-size: var(--t-2); line-height: var(--lh-snug); letter-spacing: var(--track-head); font-weight: 500; }
.lead { font-size: var(--t-1); line-height: 1.45; color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
.body { max-width: var(--measure); color: var(--ink-2); text-wrap: pretty; }
.small { font-size: var(--t--1); color: var(--ink-3); }
.num {
  font-size: var(--t-7);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Layout primitives ---------------------------------------------------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-4);
}
/* Span is set on grid-column-end so an explicit start (.start-*) does not collapse it to one column */
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-12 { grid-column-end: span 12; }
.start-2 { grid-column-start: 2; }
.start-7 { grid-column-start: 7; }
.start-9 { grid-column-start: 9; }

@media (max-width: 900px) {
  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: 1 / -1; }
  .start-2, .start-7, .start-9 { grid-column-start: 1; }
}

.section { padding-block: var(--s-7); }
.section--tight { padding-block: var(--s-6); }
/* Full-bleed children (.pillars) sit flush, but the section keeps its top
   rhythm so its heading does not butt into the section above. */
.section--flush { padding-block: var(--s-7) 0; }
.stack > * + * { margin-top: var(--s-3); }
.stack--lg > * + * { margin-top: var(--s-5); }

/* Accessibility utilities --------------------------------------------- */
.visually-hidden {
  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; top: -100%; left: var(--gutter);
  background: var(--rose); color: #fff;
  padding: .6rem 1rem; z-index: 100; border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
}
.skip-link:focus { top: 1rem; color: #fff; }

/* Motion --------------------------------------------------------------
   Reveal-on-scroll is an ENHANCEMENT, never a gate. Content is visible in
   plain CSS; only once site.js has confirmed it is running (html.js) does
   anything start hidden. If the script is blocked, fails to parse, or throws,
   every page still reads normally. */
.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  /* Was 480ms and only started once the element was 8% PAST the fold, so it
     felt like the page was waiting. Now it starts just before it arrives
     and settles quickly. */
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

/* Reduced motion: cross-fades instead of movement, never no feedback (Apple skill §14) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  html.js .reveal { transform: none; transition: opacity 200ms ease; }
}
@media (prefers-contrast: more) {
  :root { --line: currentColor; }
  .btn--ghost { box-shadow: inset 0 0 0 1.5px currentColor; }
}

/* Tables scroll inside their own box; the page never scrolls sideways */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line); }
.table { width: 100%; border-collapse: collapse; font-size: var(--t--1); font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { font-weight: 500; color: var(--ink-2); }
.table td:not(:first-child), .table th:not(:first-child) { text-align: right; }
.table tbody tr:hover td { background: var(--bg-2); }