/* ==========================================================================
   MERITALIEN — base: reset, type, layout primitives
   ========================================================================== */

/* ---------- typefaces ---------- */
@font-face {
  font-family: "Departure Mono";
  src: url("../fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Geist and Newsreader were previously loaded from the Google Fonts CDN. They
   are self-hosted now: no third-party request, no dependency on someone else's
   uptime, and no visitor IP handed to Google (which is a GDPR problem in the
   EU — a German court has ruled against exactly this). Converted TTF -> woff2,
   509KB -> 189KB. */
@font-face {
  font-family: "Geist"; src: url("../fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist"; src: url("../fonts/Geist-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist"; src: url("../fonts/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist"; src: url("../fonts/Geist-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader"; src: url("../fonts/Newsreader-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader"; src: url("../fonts/Newsreader-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Lenis takes over when JS is present; this is the no-JS fallback */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper-100);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

/* the parts you did not draw still carry the design */
::selection { background: var(--accent); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-ink :focus-visible { outline-color: var(--accent); }

/* custom scrollbar — themed, not the browser default */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 99px;
  border: 3px solid var(--paper-100);
}
.on-ink ::-webkit-scrollbar-thumb { background: var(--line-invert-strong); border-color: var(--ink-900); }

/* ---------- typography ---------- */
.display {
  font-family: var(--font-sans);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.014em;
}

.lead {
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--text-muted);
  font-weight: 400;
  max-width: 34ch;
}
.on-ink .lead { color: var(--text-invert-muted); }

p { max-width: 68ch; }

/* the serif italic carries meaning — never use it decoratively */
em, .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* eyebrow: the mono voice. Departure Mono was drawn from departure boards. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}
.on-ink .eyebrow { color: var(--text-invert-muted); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.small { font-size: var(--t-small); color: var(--text-muted); }
.on-ink .small { color: var(--text-invert-muted); }

/* ---------- layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-x);
}

/* The navigator band runs a little tighter than the rest of the site: 68rem
   rather than 76rem, so the section does not sprawl across a wide desktop.
   It deliberately stops short of narrowing the globe — the column still clears
   544px, so the sphere keeps its full size. The height comes down separately,
   in extra.css, by trimming this one section's band padding rather than by
   shrinking what is inside it. Desktop only: below 60rem the navigator is one
   column and there is nothing to narrow. */
@media (min-width: 60.001rem) {
  .shell--nav { max-width: 72rem; }
}

.band { padding-block: var(--band-y); }
.band--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.band--paper-200 { background: var(--paper-200); }
.band--ink { background: var(--ink-900); color: var(--text-invert); }
.band--ink-800 { background: var(--ink-800); color: var(--text-invert); }

.rule { height: 1px; background: var(--line); border: 0; }
.on-ink .rule { background: var(--line-invert); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }

.grid { display: grid; gap: var(--s-8); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 60rem) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Collapse multi-column grids at 40rem, not 48rem. At 768px a one-column grid
   gave 1,015px-tall cards and an 11,233px page — a tablet holds two columns
   comfortably. Phones still stack. */
@media (max-width: 40rem) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* section header: eyebrow + heading + optional lead, one consistent shape */
.sec-head { display: grid; gap: var(--s-4); max-width: 46rem; }
.sec-head--wide { max-width: 60rem; }

/* ---------- grain: the cheapest signal that a page was built ---------- */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- motion: everything TRANSLATES. nothing fades in place. ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="left"]  { transform: translate3d(-28px, 0, 0); }
[data-reveal="right"] { transform: translate3d(28px, 0, 0); }
[data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* no JS: never leave content invisible */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- a11y ---------- */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s-4); top: -100px;
  z-index: 100; background: var(--ink-900); color: var(--text-invert);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  font-size: var(--t-small); transition: top var(--dur-fast) var(--ease);
}
.skip:focus { top: var(--s-4); }