/* ==========================================================================
   EGREGIUM — AI Standards & Certification Lab
   Design system: clinical white lab document · fine hairlines · signal gold
   IBM Plex Sans + IBM Plex Mono
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,18..72,400;0,18..72,500;1,18..72,400&display=swap');

:root {
  /* paper / ink */
  --paper:      #FAF9F5;
  --paper-2:    #F3F1EA;
  --paper-3:    #ECEAE1;
  --ink:        #16150F;
  --ink-2:      #57544A;
  --ink-3:      #8C8879;
  --hairline:   #DAD7CC;
  --hairline-2: #C8C4B6;

  /* signal gold */
  --gold:       #B8860B;
  --gold-bright:#D9A521;
  --gold-soft:  #F3E6C0;
  --gold-wash:  #FBF4DF;

  /* verification states */
  --pass:       #2F7A52;
  --pass-soft:  #E3EFE7;
  --fail:       #A33A2A;

  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: 'IBM Plex Sans', system-ui, sans-serif;

  --maxw: 1240px;
  --gutter: 40px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- dark "vault" mode ---- */
.theme-dark {
  --paper:      #0E0E0C;
  --paper-2:    #16160F;
  --paper-3:    #1E1D15;
  --ink:        #F4F2E9;
  --ink-2:      #A9A595;
  --ink-3:      #6E6B5E;
  --hairline:   #2A2920;
  --hairline-2: #3A3829;
  --gold:       #E0B43E;
  --gold-bright:#F2CB5C;
  --gold-soft:  #3A3015;
  --gold-wash:  #1C1810;
  --pass:       #5FC08A;
  --pass-soft:  #15241A;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

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

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- layout primitives ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-tight { max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); }

@media (max-width: 720px) {
  :root { --gutter: 22px; }
}

/* ---------- monospace eyebrow / labels ---------- */
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .tick { color: var(--gold); }

/* ---------- type scale ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.025em; margin: 0; }
.display {
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.h-xl { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.03em; }
.h-lg { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.h-md { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.lede { font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.5; color: var(--ink-2); letter-spacing: -0.015em; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.gold-text { color: var(--gold); }

/* fine-print serif for certificate body */
.serif { font-family: 'Newsreader', Georgia, serif; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  border-radius: 0;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-gold {
  background: var(--gold); border-color: var(--gold); color: #1B1606;
}
.btn-gold:hover { background: transparent; color: var(--gold); }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- hairline rules ---------- */
.rule { height: 1px; background: var(--hairline); border: 0; }
.rule-strong { height: 1px; background: var(--hairline-2); border: 0; }

/* corner registration marks */
.regmark { position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: 0.9; }
.regmark::before, .regmark::after { content: ''; position: absolute; background: var(--gold); }
.regmark::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-0.5px); }
.regmark::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-0.5px); }
.regmark.tl { top: 0; left: 0; } .regmark.tr { top: 0; right: 0; }
.regmark.bl { bottom: 0; left: 0; } .regmark.br { bottom: 0; right: 0; }

/* ---------- tags / chips ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border: 1px solid var(--hairline-2); color: var(--ink-2);
}
.tag.pass { color: var(--pass); border-color: var(--pass); background: var(--pass-soft); }
.tag.gold { color: var(--gold); border-color: var(--gold); background: var(--gold-wash); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ---------- cards ---------- */
.card {
  border: 1px solid var(--hairline);
  background: var(--paper);
  position: relative;
}
.card-pad { padding: 34px; }

/* section spacing */
.section { padding: clamp(70px, 9vw, 140px) 0; }
.section-tight { padding: clamp(48px, 6vw, 84px) 0; }

/* grid backing (faint dotted) */
.gridfield {
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
}

/* utility — reveal. Content is visible by default so it never depends on the
   animation timeline (which is frozen in non-painting/background contexts).
   The entrance animation is pure enhancement layered on top. */
.fade-up { opacity: 1; }
.reveal-anim.fade-up.in { animation: fadeUpIn 0.7s var(--ease) both; }
@keyframes fadeUpIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal-anim.fade-up.in { animation: none; } }

.numlabel { font-family: var(--font-mono); font-size: 12px; color: var(--gold); letter-spacing: 0.12em; }