/* ============================================================================
   OBSIDIAN DESIGN LANGUAGE v1  —  the shared visual system for the whole suite
   (Onyx · PizzaOps · Tephra · Tracker · Yield Calculator · System Lab · Site)

   Aesthetic: "observatory instrument meets rare-book library."
   Obsidian volcanic glass base · gold leaf used with restraint · aged-vellum
   surfaces · a single warm ember light so nothing is flat black · gold hairlines
   etched like an instrument panel · instrument-grade tabular numerals.

   Locked brand: obsidian #08070A · gold #F1B43E · cream #F4E9D7 · ZERO green ·
   no emojis · no exclamation marks · library-grade · mobile == desktop.

   Drop-in: link this file, put `class="odl"` on <body> (or a root wrapper),
   and add `<div class="odl-ember" aria-hidden="true"></div>` as the first child
   for the signature light. Everything else is opt-in via the classes below.
   ============================================================================ */

/* ---- Fonts (self-hostable; Google fallback links in the spec) -------------- */
/* Display: Fraunces (high-contrast optical serif, soft/wonk axes = character)
   Body:    Hanken Grotesk (warm refined grotesque — a deliberate anti-Inter)
   Data:    IBM Plex Mono (tabular, instrument feel for every figure)          */

:root,
.odl {
  /* — core palette — */
  --od-obsidian:        #08070A;   /* base */
  --od-obsidian-2:      #0E0C11;   /* raised base / gradient partner */
  --od-vellum:          #141119;   /* surface (card) */
  --od-vellum-2:        #1B1721;   /* surface raised */
  --od-gold:            #F1B43E;   /* accent — the ONE focal color */
  --od-gold-hi:         #F8D77A;   /* light gold (highlights, top of leaf) */
  --od-gold-lo:         #C99A2C;   /* deep gold (shadow side of leaf) */
  --od-cream:           #F4E9D7;   /* primary text */
  --od-cream-dim:       #C6BCA9;   /* secondary text */
  --od-muted:           #8B8397;   /* tertiary / labels */
  --od-faint:           #5A5566;   /* disabled / hint */
  --od-danger:          #C46A5E;   /* the only non-brand hue — muted terracotta */

  /* — engraved hairline (etched-into-glass rule) — */
  --od-line:            rgba(241,180,62,.14);   /* gold-tinted, low */
  --od-line-strong:     rgba(241,180,62,.28);
  --od-etch-hi:         rgba(255,236,193,.06);  /* top highlight of an etch */
  --od-etch-lo:         rgba(0,0,0,.55);         /* bottom shadow of an etch */

  /* — type — */
  --od-display: "Fraunces", "Cormorant Garamond", ui-serif, Georgia, serif;
  --od-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --od-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* modular type scale (1.25 major-third for UI; display leans larger) */
  --od-fs-3xs: .6875rem;   /* 11px  labels / eyebrow */
  --od-fs-2xs: .75rem;     /* 12px */
  --od-fs-xs:  .8125rem;   /* 13px */
  --od-fs-sm:  .9375rem;   /* 15px */
  --od-fs-md:  1.0625rem;  /* 17px  body default */
  --od-fs-lg:  1.375rem;   /* 22px */
  --od-fs-xl:  1.875rem;   /* 30px */
  --od-fs-2xl: 2.75rem;    /* 44px */
  --od-fs-3xl: 4rem;       /* 64px  hero display */

  --od-lh-tight: 1.08;
  --od-lh-snug:  1.28;
  --od-lh-body:  1.6;

  /* — spacing (4px base) — */
  --od-1: 4px;  --od-2: 8px;  --od-3: 12px; --od-4: 16px; --od-5: 24px;
  --od-6: 32px; --od-7: 48px; --od-8: 64px; --od-9: 96px;

  /* — radii — */
  --od-r-sm: 8px; --od-r-md: 12px; --od-r-lg: 18px; --od-r-xl: 26px; --od-r-pill: 999px;

  /* — elevation (ambient + key; top level earns a faint gold rim) — */
  --od-e1: 0 1px 2px rgba(0,0,0,.5);
  --od-e2: 0 2px 6px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  --od-e3: 0 4px 10px rgba(0,0,0,.5), 0 20px 50px rgba(0,0,0,.45);
  --od-e-glow: 0 0 0 1px rgba(241,180,62,.22), 0 8px 30px rgba(241,180,62,.10);

  /* — motion — */
  --od-ease: cubic-bezier(.22,.61,.36,1);   /* refined ease-out */
  --od-ease-io: cubic-bezier(.65,.05,.36,1);
  --od-fast: 160ms; --od-med: 280ms; --od-slow: 520ms;

  color-scheme: dark;
}

/* ---- reset-ish base -------------------------------------------------------- */
.odl *,
.odl *::before,
.odl *::after { box-sizing: border-box; }

.odl {
  margin: 0;
  min-height: 100%;
  position: relative;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--od-obsidian-2), var(--od-obsidian) 60%);
  color: var(--od-cream);
  font-family: var(--od-body);
  font-size: var(--od-fs-md);
  line-height: var(--od-lh-body);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---- SIGNATURE 1: the ember (warm light so nothing is flat black) ---------- */
/* Place <div class="odl-ember" aria-hidden="true"></div> as the first child.   */
.odl-ember {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 40% at 68% 88%, rgba(241,180,62,.16), rgba(241,180,62,0) 70%),
    radial-gradient(38% 30% at 22% 8%,  rgba(201,154,44,.08), rgba(201,154,44,0) 72%);
  mix-blend-mode: screen;
  animation: od-breathe 8s var(--od-ease-io) infinite;
}
/* faint grain over the whole field — obsidian has tooth, not plastic flatness */
.odl-ember::after {
  content: "";
  position: absolute; inset: 0;
  opacity: .04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@keyframes od-breathe {
  0%, 100% { opacity: .85; transform: translateY(0) scale(1); }
  50%      { opacity: 1;   transform: translateY(-1.5%) scale(1.03); }
}
/* keep content above the ember */
.odl > *:not(.odl-ember) { position: relative; z-index: 1; }

/* ---- typography ------------------------------------------------------------ */
.od-display {
  font-family: var(--od-display);
  font-weight: 340;
  font-optical-sizing: auto;
  line-height: var(--od-lh-tight);
  letter-spacing: -.015em;
  color: var(--od-cream);
}
.od-display--hero { font-size: clamp(2.25rem, 6vw, var(--od-fs-3xl)); }
.od-display--xl   { font-size: clamp(1.75rem, 4.2vw, var(--od-fs-2xl)); }
.od-display em, .od-serif-em {           /* Cormorant italic pull, ties to the video brand */
  font-family: "Cormorant Garamond", var(--od-display);
  font-style: italic; font-weight: 500; color: var(--od-gold-hi);
}
.od-eyebrow {                            /* small-caps label above a heading */
  font-family: var(--od-body);
  font-size: var(--od-fs-3xs);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--od-gold);
  font-weight: 600;
}
.od-lede { font-size: var(--od-fs-lg); color: var(--od-cream-dim); line-height: var(--od-lh-snug); font-weight: 350; }
.od-muted { color: var(--od-muted); }
.od-label { font-size: var(--od-fs-2xs); text-transform: uppercase; letter-spacing: .12em; color: var(--od-muted); }

/* SIGNATURE 2: instrument-grade numerals — every figure is tabular mono */
.od-num, .od-metric {
  font-family: var(--od-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--od-cream);
}
.od-metric { font-size: var(--od-fs-2xl); font-weight: 500; }
.od-metric--gold { color: var(--od-gold-hi); }

/* ---- SIGNATURE 3: engraved hairlines (etched into the glass) --------------- */
.od-hairline {
  height: 0; border: 0;
  border-top: 1px solid var(--od-line);
  box-shadow: 0 1px 0 var(--od-etch-hi);   /* the etch: line + highlight beneath */
  margin: var(--od-5) 0;
}
.od-hairline--v {
  width: 0; height: auto; align-self: stretch;
  border-top: 0; border-left: 1px solid var(--od-line);
  box-shadow: 1px 0 0 var(--od-etch-hi);
}

/* ---- SIGNATURE 4: vellum surfaces (aged material, inner top-light, depth) --- */
.od-surface {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,236,193,.03), rgba(255,236,193,0) 42%),
    linear-gradient(180deg, var(--od-vellum), var(--od-vellum-2));
  border: 1px solid var(--od-line);
  border-radius: var(--od-r-lg);
  box-shadow: var(--od-e2), inset 0 1px 0 var(--od-etch-hi);
  padding: var(--od-5);
  transition: box-shadow var(--od-med) var(--od-ease),
              border-color var(--od-med) var(--od-ease),
              transform var(--od-med) var(--od-ease);
}
.od-surface--raised { box-shadow: var(--od-e3), inset 0 1px 0 var(--od-etch-hi); }
.od-surface--interactive { cursor: pointer; }
.od-surface--interactive:hover {
  border-color: var(--od-line-strong);
  box-shadow: var(--od-e3), var(--od-e-glow), inset 0 1px 0 var(--od-etch-hi);
  transform: translateY(-2px);
}
/* a hairline gold seam along the top edge of a focal surface */
.od-surface--seam::before {
  content: ""; position: absolute; left: var(--od-5); right: var(--od-5); top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--od-gold), transparent);
  opacity: .5;
}

/* ---- buttons --------------------------------------------------------------- */
.od-btn {
  font-family: var(--od-body); font-size: var(--od-fs-sm); font-weight: 550;
  letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: var(--od-2);
  padding: 10px 18px; border-radius: var(--od-r-pill);
  border: 1px solid var(--od-line-strong);
  background: transparent; color: var(--od-cream);
  cursor: pointer;
  transition: all var(--od-fast) var(--od-ease);
}
.od-btn:hover { border-color: var(--od-gold); color: var(--od-gold-hi); }
.od-btn:focus-visible { outline: 2px solid var(--od-gold); outline-offset: 2px; }
/* SIGNATURE 5: gold-leaf primary — the ONE focal element per view */
.od-btn--gold {
  border: 0; color: #1A1206; font-weight: 650;
  background: linear-gradient(180deg, var(--od-gold-hi), var(--od-gold) 55%, var(--od-gold-lo));
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px rgba(241,180,62,.22);
}
.od-btn--gold:hover { color: #1A1206; filter: brightness(1.05); transform: translateY(-1px); }

/* ---- SIGNATURE 6: gold underline that draws in on hover/active ------------- */
.od-link {
  color: var(--od-cream); text-decoration: none; position: relative; padding-bottom: 2px;
}
.od-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--od-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--od-med) var(--od-ease);
}
.od-link:hover::after, .od-link[aria-current="page"]::after,
.od-link.is-active::after { transform: scaleX(1); }

/* ---- data table (instrument panel) ---------------------------------------- */
.od-table { width: 100%; border-collapse: collapse; font-size: var(--od-fs-sm); }
.od-table th {
  text-align: left; font-weight: 600; color: var(--od-muted);
  font-size: var(--od-fs-2xs); text-transform: uppercase; letter-spacing: .1em;
  padding: var(--od-2) var(--od-3);
  border-bottom: 1px solid var(--od-line-strong);
}
.od-table td {
  padding: var(--od-3); border-bottom: 1px solid var(--od-line);
  color: var(--od-cream-dim);
}
.od-table td.od-num { color: var(--od-cream); text-align: right; }
.od-table tr { transition: background var(--od-fast) var(--od-ease); }
.od-table tbody tr:hover td { background: rgba(241,180,62,.04); }

/* ---- pill / badge / tier chip --------------------------------------------- */
.od-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--od-fs-2xs); font-weight: 600; letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--od-r-pill);
  border: 1px solid var(--od-line-strong); color: var(--od-cream-dim);
}
.od-pill--gold { border-color: var(--od-gold); color: var(--od-gold-hi); }
.od-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }

/* ---- inputs ---------------------------------------------------------------- */
.od-field {
  width: 100%; font-family: var(--od-body); font-size: var(--od-fs-sm);
  color: var(--od-cream); background: rgba(0,0,0,.28);
  border: 1px solid var(--od-line-strong); border-radius: var(--od-r-md);
  padding: 11px 14px;
  transition: border-color var(--od-fast) var(--od-ease), box-shadow var(--od-fast) var(--od-ease);
}
.od-field::placeholder { color: var(--od-faint); }
.od-field:focus { outline: 0; border-color: var(--od-gold); box-shadow: 0 0 0 3px rgba(241,180,62,.14); }

/* ---- SIGNATURE 7: orchestrated load — staggered reveal --------------------- */
.od-reveal { opacity: 0; transform: translateY(10px); animation: od-rise var(--od-slow) var(--od-ease) forwards; }
.od-reveal-1 { animation-delay: 60ms; }
.od-reveal-2 { animation-delay: 140ms; }
.od-reveal-3 { animation-delay: 220ms; }
.od-reveal-4 { animation-delay: 300ms; }
.od-reveal-5 { animation-delay: 380ms; }
@keyframes od-rise { to { opacity: 1; transform: translateY(0); } }

/* count-up hook: JS toggles [data-od-countup]; CSS just keeps numerals tabular */

/* ---- layout helpers -------------------------------------------------------- */
.od-container { width: min(1160px, 92vw); margin-inline: auto; }
.od-stack > * + * { margin-top: var(--od-4); }
.od-row { display: flex; gap: var(--od-4); align-items: center; }
.od-grid { display: grid; gap: var(--od-4); }

/* ---- accessibility: honor reduced motion ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .odl-ember { animation: none; }
  .od-reveal { animation: none; opacity: 1; transform: none; }
  .od-surface, .od-btn, .od-link::after, .od-table tr { transition: none; }
}

/* ---- responsive: mobile == desktop, same system, tighter rhythm ----------- */
@media (max-width: 640px) {
  .odl { font-size: var(--od-fs-sm); }
  .od-surface { padding: var(--od-4); border-radius: var(--od-r-md); }
  .od-metric { font-size: var(--od-fs-xl); }
  .od-container { width: 92vw; }
}