/* FGC one-page mockups: shared tokens and the locked wordmark (Sora 200 caps at 114% + Open Sans Light). */
/* fonts are linked from each page's head (preconnect + stylesheet), not @import, so they start loading at once */

:root {
  --ink: #1F2328;
  --ink-2: #464C53;      /* secondary text: still dark enough for Light weights */
  --ink-3: #686E75;      /* captions, map furniture, stamp: 5.15:1 on paper, AA at any size */
  --paper: #FFFFFF;
  --paper-2: #F6F6F3;
  --hair: #E2E2DD;
  --steel: #2E6A97;      /* blue accent */
  --ochre: #C9762B;      /* orange accent */
  --magenta: #C2187A;    /* mineralisation focal colour, used sparingly */
  --display: 'Sora', 'Segoe UI', sans-serif;
  --text: 'Open Sans', 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ECEDEE; --ink-2: #C3C7CC; --ink-3: #8D939A;
    --paper: #121416; --paper-2: #1A1D20; --hair: #2B2F33;
    --steel: #6FA8D6; --ochre: #E39A55;
  }
}
:root[data-theme="dark"] {
  --ink: #ECEDEE; --ink-2: #C3C7CC; --ink-3: #8D939A;
  --paper: #121416; --paper-2: #1A1D20; --hair: #2B2F33;
  --steel: #6FA8D6; --ochre: #E39A55;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); }
body { font-family: var(--text); font-weight: 300; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Wordmark: F, G, C in Sora ExtraLight at 114%, the rest Open Sans Light */
.wordmark { font-family: var(--text); font-weight: 300; letter-spacing: 0.003em; line-height: 1.05; white-space: nowrap; }
.wordmark .cap { font-family: var(--display); font-weight: 200; font-size: 1.14em; }
.wordmark.thin .cap { font-weight: 100; }

.display { font-family: var(--display); font-weight: 100; letter-spacing: -0.01em; line-height: 1.08; }
.display.xl { font-weight: 200; }
.eyebrow { font-family: var(--text); font-weight: 400; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }

.contact a { border-bottom: 1px solid var(--hair); transition: border-color .2s; }
.contact a:hover, .contact a:focus-visible { border-color: var(--ink); }
.contact .num { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* the corner stamp, as on the figures */
.stamp { font-family: var(--text); font-weight: 400; font-size: 14px; letter-spacing: 0.02em; color: var(--ink-3); }