/* ============================================================
   InterHive - Design tokens, reset, base typography
   ============================================================ */

:root{
  /* Palette */
  --void:      #0A0A0A;
  --paper:     #FFFFFF;
  --gold:      #C89B3C;
  --ember:     #E8B94D;
  --ash:       #4A4A4A;
  --hairline:  #262626;

  /* Derived ink levels */
  --ink-1: #FFFFFF;
  --ink-2: rgba(255,255,255,.74);
  --ink-3: rgba(255,255,255,.50);
  /* #6A6A6A previously, which measured 3.46:1 on --surface-3 and so failed
     WCAG AA (4.5:1) for the small mono labels, column titles, form labels and
     captions that use it. #7E7E7E is the first step that clears 4.5:1 on all
     three surfaces. Derived ink level, not one of the six named brand colours,
     so the palette itself is unchanged. */
  --ink-4: #7E7E7E;

  /* Derived surfaces */
  --surface-1: #0A0A0A;
  --surface-2: #0D0D0D;
  --surface-3: #121212;
  --surface-4: #171717;

  /* Gold washes */
  --gold-06: rgba(200,155,60,.06);
  --gold-12: rgba(200,155,60,.12);
  --gold-20: rgba(200,155,60,.20);
  --gold-35: rgba(200,155,60,.35);
  --gold-glow-sm: 0 0 18px rgba(200,155,60,.30);
  --gold-glow-md: 0 0 38px rgba(200,155,60,.26);
  --gold-glow-lg: 0 0 90px rgba(200,155,60,.20);

  /* Type */
  --font-display: "Times New Roman", Times, serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --wrap: 1100px;
  --nav-h: 72px;
  --gutter: 24px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

html{
  background: var(--void);
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--void);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink-1);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
}

h1{ font-size: clamp(2.6rem, 6.2vw, 4.5rem); }
h2{ font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h3{ font-size: clamp(1.35rem, 2.4vw, 1.85rem); letter-spacing: -.01em; }
h4{ font-size: 1.1rem; letter-spacing: -.005em; }

p{ margin: 0 0 1.15em; }
p:last-child{ margin-bottom: 0; }

a{ color: inherit; text-decoration: none; }

strong{ color: var(--ink-1); font-weight: 600; }

::selection{ background: var(--gold); color: var(--void); }

img, svg{ max-width: 100%; }

:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link{
  position: absolute; top: -60px; left: 12px; z-index: 999;
  background: var(--gold); color: var(--void);
  padding: 10px 16px; font-family: var(--font-mono); font-size: .75rem;
}
.skip-link:focus{ top: 12px; }