/* Ontologica — shared design tokens
   Editorial restraint, three palette modes, Cormorant + Switzer */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Bodoni FLF & Optima — self-hosted brand faces (assets/fonts/).
   bodoni-icg is a Bodoni FLF stand-in (same editorial Bodoni cut); swap in the
   client's licensed Bodoni FLF web-font here if/when available. local() lets an
   installed copy win first. */
@font-face {
  font-family: 'Bodoni FLF';
  src: local('Bodoni FLF'), local('Bodoni 72'), local('Bodoni MT'),
       url('../assets/fonts/bodoni-icg.woff2') format('woff2'),
       url('../assets/fonts/bodoni-icg.woff') format('woff');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optima';
  src: local('Optima'), local('Optima Nova'), local('URW Classico'),
       url('../assets/fonts/optima-roman.woff2') format('woff2'),
       url('../assets/fonts/optima-roman.woff') format('woff');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Inline citation link — discreet gold underline */
.m-inline-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.m-inline-link:hover {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
}
.m-section--ink .m-inline-link:hover,
.m-section--burgundy .m-inline-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold-soft);
}

:root {
  /* Burgundy from the user's reference — sampled from screenshot */
  --burgundy: #5C1A1F;
  --burgundy-deep: #2A0E12;
  --burgundy-ink: #160606;

  /* Gold accent — kept as the brand identity colour */
  --gold: #C9A84C;
  --gold-soft: #D4B968;
  --gold-deep: #9C7E2E;

  /* Light surfaces — three flavours, used per direction */
  --parchment: #F5F0E8;       /* Direction A — bright parchment */
  --bone: #EFE9DC;            /* Direction B — slightly cooler bone */
  --pulp: #EDE5D3;            /* Direction C — warm paper pulp */

  /* Inks */
  --ink: #1A1410;             /* warm near-black */
  --ink-soft: #3A2E26;
  --ink-mute: #6B5E52;
  --rule: rgba(26, 20, 16, 0.18);
  --rule-soft: rgba(26, 20, 16, 0.10);
  --rule-gold: rgba(201, 168, 76, 0.45);

  /* Type families */
  --serif: 'Bodoni FLF', 'Bodoni 72', 'Bodoni MT', 'Didot', 'Cormorant Garamond', 'Garamond', serif;
  --sans:  'Montserrat', 'Optima', 'Inter', system-ui, -apple-system, sans-serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing scale (8px base, but editorial pages need a wider range) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 192px;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--parchment);
  text-rendering: optimizeLegibility;
}

/* Editorial primitives */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--ink  { color: var(--ink-soft); }

.serif { font-family: var(--serif); font-weight: 300; letter-spacing: -0.005em; }
.serif-italic { font-family: var(--serif); font-weight: 300; font-style: italic; }
.sovereign { font-family: var(--serif); font-style: italic; font-weight: 600; color: var(--burgundy); }

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.rule--gold { border-top-color: var(--rule-gold); }
.rule--short { width: 56px; border-top-color: var(--gold); border-top-width: 1px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 500;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 0;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: all 200ms ease;
}
.btn--primary {
  background: var(--gold); color: var(--burgundy-ink); border-color: var(--gold);
}
.btn--primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--parchment); }
.btn--ghost-light {
  background: transparent; color: var(--parchment); border-color: var(--parchment);
}
.btn--ghost-light:hover { background: var(--parchment); color: var(--burgundy-ink); }

/* Numerals / small caps helpers */
.tabular { font-variant-numeric: tabular-nums; }
.smallcaps {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
}

/* Drop cap */
.dropcap::first-letter {
  font-family: var(--serif);
  font-weight: 400;
  float: left;
  font-size: 4.6em;
  line-height: 0.85;
  padding: 6px 10px 0 0;
  color: var(--burgundy);
}

/* Selection */
::selection { background: var(--gold); color: var(--burgundy-ink); }

/* Keyboard focus — visible ring for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 1px;
}
/* On dark burgundy fields, use the brighter gold for contrast */
.m-section--ink a:focus-visible,
.m-section--ink button:focus-visible,
.m-footer a:focus-visible,
.m-cta a:focus-visible {
  outline-color: var(--gold);
}