/* Niamos Labs shared base: fonts, tokens, base element styles. Used by every page on the site. Page layouts live in their own files. */
/* ---------- Fonts (self-hosted, OFL; licences beside the files) ---------- */
@font-face {
  font-family: "Young Serif";
  src: url("fonts/YoungSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Dark only (Dev, 2026-10-18: "keep only dark mode"). One palette, no scheme switch. */
  color-scheme: dark;

  /* Palette: the shore at evening */
  --color-paper:   oklch(19% 0.03 228);
  --color-paper-2: oklch(23% 0.033 228);
  --color-ink:     oklch(94% 0.018 82);
  --color-ink-2:   oklch(84% 0.02 80);
  --color-muted:   oklch(74% 0.02 220);
  --color-rule:    oklch(35% 0.03 226);
  --color-sea:     oklch(82% 0.07 195);
  --color-sun:     oklch(73% 0.14 50);
  --color-focus:   oklch(80% 0.15 55);
  --color-glow:    oklch(45% 0.09 40 / 0.14); /* kept for name stability; no rule paints it since 2026-10-18 */

  /* Type */
  --font-display: "Young Serif", "Iowan Old Style", "Palatino", serif;
  --font-body: "Hanken Grotesk", -apple-system, "Helvetica Neue", sans-serif;

  --text-label:   0.8125rem;                       /* 13 */
  --text-body:    1.0625rem;                       /* 17 */
  --text-lead:    1.375rem;                        /* 22 */
  --text-title:   1.875rem;                        /* 30 */
  --text-display: clamp(2.75rem, 13.5vw, 6.875rem); /* 44 to 110; fills the column on a phone */

  --leading-display: 0.95;
  --leading-title: 1.1;
  --leading-lead: 1.38;
  --leading-body: 1.6;   /* light text on a dark ground wants the extra air */

  --weight-body: 400;
  --weight-strong: 500;
  --weight-label: 650;

  /* Space, 4pt scale */
  --space-3xs: 0.25rem;  /* 4 */
  --space-2xs: 0.5rem;   /* 8 */
  --space-xs:  0.75rem;  /* 12 */
  --space-sm:  1rem;     /* 16 */
  --space-md:  1.5rem;   /* 24 */
  --space-lg:  2rem;     /* 32 */
  --space-xl:  3rem;     /* 48 */
  --space-2xl: 4rem;     /* 64 */
  --space-3xl: 6rem;     /* 96 */
  --space-4xl: 8rem;     /* 128 */

  --gutter: var(--space-sm);
  --shell: 77.5rem;      /* 1240 */

  --rule: 1px;
  --radius-icon: 22.4%;
  --sun-size: 3.5rem;    /* 56 */
  --col-side: 32rem;     /* 512, fits the intro line on one line: the right-hand column; sun, intro, app links and footer share its edge */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 160ms;
}

@media (min-width: 48rem) {
  :root { --gutter: var(--space-xl); }
}
@media (min-width: 80rem) {
  /* Wordmark shares the row with the intro: sized to the space left of --col-side */
  :root { --text-display: min(7.6vw, 6.625rem); } /* 106 max: 6.35em wide, fits beside --col-side */
}

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

html, body { overflow-x: clip; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--rule);
  text-decoration-color: var(--color-rule);
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur-quick) var(--ease-out);
}
a:hover { text-decoration-color: var(--color-sun); text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
  transition: none;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-ink);
  color: var(--color-paper);
}
.skip:focus { top: var(--space-sm); }

.shell {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}