/* ==========================================================================
   Base: reset, type roles, layout, surfaces
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-stretch: var(--body-stretch);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--n-900);
  background: var(--n-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: inherit; }
fieldset { border: 0; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus, var(--cg-black)); outline-offset: 3px; }
.surface-dark :focus-visible, .surface-photo :focus-visible { --focus: var(--cg-yellow); }

.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(--s-4); top: -100px; z-index: 1000;
  background: var(--cg-yellow); color: var(--cg-black); padding: var(--s-3) var(--s-4); font-weight: 700;
}
.skip-link:focus { top: var(--s-4); }

/* --- Type roles ---------------------------------------------------------- */
.t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  font-stretch: var(--display-stretch);
  text-wrap: balance;
}
.t-display { font-size: calc(var(--t-display) * var(--display-scale)); }
.t-h1      { font-size: calc(var(--t-h1) * var(--display-scale)); }
.t-h2      { font-size: calc(var(--t-h2) * var(--display-scale)); }
.t-h3      { font-size: calc(var(--t-h3) * var(--display-scale)); line-height: 1.05; }
.t-h4      { font-size: var(--t-h4); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.t-lead    { font-size: var(--t-lead); line-height: 1.55; }
.t-body    { font-size: var(--t-body); }
.t-small   { font-size: var(--t-small); line-height: 1.55; }
.t-label {
  font-family: var(--font-label);
  font-stretch: var(--label-stretch);
  font-size: var(--t-label);
  font-weight: var(--label-weight);
  text-transform: var(--label-transform);
  letter-spacing: var(--label-tracking);
  line-height: 1.3;
}
.t-data {
  font-family: var(--font-data);
  font-weight: var(--data-weight);
  letter-spacing: var(--data-tracking);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--muted); }
.measure { max-width: 60ch; }
.measure-narrow { max-width: 44ch; }

/* The single permitted yellow type element on a page */
.is-signal { color: var(--cg-yellow); }

/* --- Surfaces -------------------------------------------------------------
   Every section declares a surface; components read --fg / --muted / --rule */
.surface-light  { --bg: var(--n-50);  --fg: var(--n-900); --muted: var(--n-600); --rule: var(--rule-light); --card: var(--cg-white); background: var(--bg); color: var(--fg); }
.surface-paper  { --bg: var(--paper); --fg: var(--n-900); --muted: var(--n-600); --rule: rgba(23,22,19,0.18); --card: #F8F6F0; background: var(--bg); color: var(--fg); }
.surface-white  { --bg: var(--cg-white); --fg: var(--n-900); --muted: var(--n-600); --rule: var(--rule-light); --card: var(--n-50); background: var(--bg); color: var(--fg); }
.surface-dark   { --bg: var(--cg-black); --fg: var(--cg-white); --muted: var(--n-400); --rule: var(--rule-dark); --card: var(--cg-black); background: var(--bg); color: var(--fg); }
.surface-yellow { --bg: var(--cg-yellow); --fg: var(--cg-black); --muted: rgba(0,0,0,0.72); --rule: rgba(0,0,0,0.2); --card: var(--cg-yellow); background: var(--bg); color: var(--fg); }
.surface-photo  { --fg: var(--cg-white); --muted: rgba(255,255,255,0.78); --rule: var(--rule-dark); color: var(--fg); }

/* --- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }
.section.surface-light + .section.surface-light,
.section.surface-white + .section.surface-white,
.section.surface-dark + .section.surface-dark { padding-top: 0; }

.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) var(--s-6); }
.stack > * + * { margin-top: var(--stack, var(--s-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

@media (max-width: 1023px) {
  .grid-12 { gap: var(--s-5); }
}
@media (max-width: 767px) {
  .grid-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
}

/* --- Reveal on scroll (respect reduced motion) ---------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}