/* Numen v3 base (WP-SHELL): fonts, reset, body, focus, utilities. */

@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/source-sans-3-400.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/source-sans-3-600.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/source-sans-3-700.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/cormorant-garamond-500.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/cormorant-garamond-600.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/cormorant-garamond-500-italic.woff2) format('woff2'); }

/* metric-adjusted fallbacks so the swap moves nothing (numbers from tools/subset-fonts.py) */
@font-face { font-family: 'Cormorant Fallback'; src: local('Georgia'); size-adjust: 88.01%; ascent-override: 104.98%; descent-override: 32.61%; line-gap-override: 0%; }
@font-face { font-family: 'Source Sans Fallback'; src: local('Arial'), local('ArialMT'), local('Roboto'), local('Helvetica Neue'); size-adjust: 93.43%; ascent-override: 109.6%; descent-override: 42.81%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
/* a focused control never scrolls in under the sticky top bar or the fixed tab bar (WCAG 2.4.11) */
html { scroll-padding-top: calc(var(--top-h) + 8px); scroll-padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 8px); }
@media (min-width: 900px) { html { scroll-padding-bottom: 8px; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--ink);
  font-weight: 400; font-size: var(--fs-body); line-height: 1.55; font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 500; }
img, svg, canvas, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
button:disabled { cursor: default; }
a { color: var(--glow-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
b, strong { font-weight: 600; color: var(--ink); }
time { font-variant-numeric: lining-nums tabular-nums; }
[hidden] { display: none !important; }
::selection { background: rgba(242, 200, 121, .3); color: var(--ink); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--glow-ink); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus-visible { outline: none; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }

/* utilities */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.num { font-family: var(--font-text); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; }
.kicker { font-weight: 600; font-size: var(--fs-label); line-height: 1.3; font-family: var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 66ch; }
.fine { font-size: var(--fs-fine); line-height: 1.5; color: var(--ink-3); }
/* site/index.html with JavaScript off: what still works, then the disclaimer (round 18 H05) */
.ns { display: grid; gap: var(--s3); padding-top: var(--s5); padding-bottom: var(--s5); }
.body { max-width: 66ch; }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }
.only-phone { display: revert; }
.only-wide { display: none; }
@media (min-width: 760px) { .only-phone { display: none; } .only-wide { display: revert; } }
.only-desk { display: none; }
@media (min-width: 900px) { .only-desk { display: revert; } .no-desk { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; }
}
html.is-still *, html.is-still *::before, html.is-still *::after { transition-duration: 0ms !important; }
