/* ------------------------------------------------------------------
   Self-hosted webfonts (latin subset) — served locally, no CDN.
   Binaries copied UNCHANGED from Google Fonts (Chrome woff2); do not
   re-subset (Source Serif reserves the name "Source"). Per-family SIL
   OFL 1.1 licenses + SHA-256 provenance live in fonts/PROVENANCE.md.
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-v20-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-v20-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-v20-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-tight-v9-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-tight-v9-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/inter-tight-v9-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-v24-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-v24-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-serif-4-v14-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-serif-4-v14-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===================================================================
   DidemBio — website drafts, round 2 (2026-06)
   Shared design system. Brand v2.0 tokens, extended for a darker,
   more interactive, data-forward direction.

   Anchored on the real brand package (D:/Visuals): network-node mark,
   Ink #0B1F3A + Signal cyan #14B8A6, Inter Tight / Inter / JetBrains Mono,
   tagline "Multiparameter biology, decoded."
   =================================================================== */

:root {
  /* core brand */
  --ink:          #0B1F3A;   /* Didem blue — primary */
  --ink-deep:     #081629;   /* deeper, for gradients / hovers */
  --ink-700:      #15294a;   /* raised surface on dark */
  --ink-600:      #1d3556;   /* hairline on dark */
  --signal:       #14B8A6;   /* accent cyan */
  --signal-light: #5EEAD4;   /* lighter accent for dark bg text */
  --signal-deep:  #0F8C80;   /* accessible cyan on light bg */

  /* neutrals */
  --surface:  #F7F8FA;       /* canvas */
  --surface-2:#EEF1F5;       /* slightly deeper canvas */
  --white:    #FFFFFF;
  --divider:  #E5E8EC;
  --muted:    #6B7280;
  --muted-on-dark: #9CB0CB;  /* muted text on ink */
  --text:     #1A1F2E;

  /* chart-only accents (never used as brand color) */
  --coral: #F97066;
  --amber: #F59E0B;
  --violet:#8B7CF6;

  /* type */
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* spacing / radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --maxw: 1180px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

/* ---------- typography ---------- */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.04;
}
h1 { font-size: clamp(42px, 6vw, 76px); }
h2 { font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -0.02em; line-height: 1.1; }
h3 { font-size: 20px; letter-spacing: -0.01em; font-weight: 650; line-height: 1.25; }

p  { font-size: 16px; color: var(--text); }
.lead { font-size: clamp(17px, 1.4vw, 21px); color: var(--muted); line-height: 1.6; max-width: 60ch; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal-deep);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }

/* ---------- layout ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 860px; margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.center { text-align: center; }

/* ---------- dark sections ---------- */
.dark {
  background: var(--ink);
  color: var(--surface);
  position: relative;
}
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark .lead { color: var(--muted-on-dark); }
.dark .eyebrow { color: var(--signal-light); }

/* radial glow for hero depth */
.glow::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 78% 18%, rgba(20,184,166,0.16), transparent 60%),
    radial-gradient(700px 700px at 8% 90%, rgba(20,184,166,0.06), transparent 60%);
  pointer-events: none;
}

/* ---------- nav ---------- */
/* sticky full-width header (the container is centered; ::after paints the surface
   edge-to-edge behind it so full-width dark sections don't peek past the sides) */
header.container { position: sticky; top: 0; z-index: 100; background: var(--surface); }
header.container::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; background: var(--surface); border-bottom: 1px solid var(--divider); z-index: -1;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0;
}
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.dark .nav-links a { color: var(--muted-on-dark); }
.dark .nav-links a:hover { color: #fff; }

.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo .word { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.logo .didem { color: var(--ink); }
.logo .bio { color: var(--signal-deep); }
.dark .logo .didem { color: #fff; }
.dark .logo .bio { color: var(--signal-light); }
.logo svg { color: var(--ink); }          /* spokes + outer nodes inherit; cyan core is fixed */
.dark .logo svg { color: #fff; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; font-weight: 550;
  border-radius: var(--r-sm); font-size: 14.5px; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s var(--ease), background .15s, border-color .15s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--signal); color: var(--ink); font-weight: 650; }
.btn-primary:hover { background: var(--signal-light); box-shadow: 0 8px 24px -8px rgba(20,184,166,.5); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--divider); }
.btn-ghost:hover { border-color: var(--ink); }
.dark .btn-ghost { color: #fff; border-color: var(--ink-600); }
.dark .btn-ghost:hover { border-color: var(--signal-light); }
.btn-arrow::after { content: '→'; transition: transform .15s var(--ease); }
.btn:hover .btn-arrow::after, .btn-arrow:hover::after { transform: translateX(3px); }

/* keyboard focus visibility (WCAG 2.4.7) */
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--signal-deep); outline-offset: 2px; border-radius: 5px; }
.dark .btn:focus-visible, .dark a:focus-visible { outline-color: var(--signal-light); }

/* screen-reader-only utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- pills / chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em;
  padding: 5px 11px; border-radius: 100px; border: 1px solid var(--divider);
  color: var(--muted); background: var(--white);
}
.dark .chip { border-color: var(--ink-600); background: rgba(255,255,255,0.03); color: var(--muted-on-dark); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }

/* ---------- bento grid ---------- */
.bento { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.cell {
  background: var(--white); border: 1px solid var(--divider); border-radius: var(--r-md);
  padding: 26px; position: relative; overflow: hidden;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease);
}
.cell:hover { border-color: #cdd4dc; transform: translateY(-2px); box-shadow: 0 14px 40px -22px rgba(11,31,58,.35); }
.dark .cell { background: var(--ink-700); border-color: var(--ink-600); }
.dark .cell:hover { border-color: #2b496f; box-shadow: 0 14px 50px -22px rgba(0,0,0,.6); }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.cell .ctag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.dark .cell .ctag { color: var(--muted-on-dark); }

/* big stat number */
.statnum { font-family: var(--font-display); font-weight: 750; letter-spacing: -0.03em; color: var(--ink);
  font-size: clamp(34px, 4vw, 52px); line-height: 1; }
.dark .statnum { color: #fff; }
.statnum .unit { font-size: 0.5em; color: var(--signal-deep); font-weight: 650; letter-spacing: 0; }
.dark .statnum .unit { color: var(--signal-light); }
.statlabel { font-size: 14px; color: var(--text); margin-top: 12px; line-height: 1.45; }
.dark .statlabel { color: #d6deea; }
.statsub { font-size: 12.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.dark .statsub { color: var(--muted-on-dark); }

/* ---------- figure / chart card ---------- */
.figure { background: var(--white); border: 1px solid var(--divider); border-radius: var(--r-md); padding: 22px; }
.dark .figure { background: var(--ink-700); border-color: var(--ink-600); }
.figure .cap { font-size: 12.5px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.dark .figure .cap { color: var(--muted-on-dark); }
.figure .cap b { color: var(--text); font-weight: 600; }
.dark .figure .cap b { color: #e7edf5; }
.repro { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--divider); display: flex; align-items: center; gap: 8px; }
.dark .repro { color: var(--muted-on-dark); border-color: var(--ink-600); }
.repro::before { content: '↻'; color: var(--signal-deep); }
.dark .repro::before { color: var(--signal-light); }

/* svg chart helpers */
.axis { stroke: var(--divider); stroke-width: 1; }
.dark .axis { stroke: var(--ink-600); }
.gridline { stroke: var(--divider); stroke-width: 1; stroke-dasharray: 2 4; }
.dark .gridline { stroke: var(--ink-600); }
.tick { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); }
.dark .tick { fill: var(--muted-on-dark); }
.bar-ours { fill: var(--signal); }
.bar-ref  { fill: #b9c2cf; }
.dark .bar-ref { fill: #3a567d; }

/* ---------- comparison table ---------- */
.table-wrap { border: 1px solid var(--divider); border-radius: var(--r-md); overflow: hidden; background: var(--white); }
.dark .table-wrap { border-color: var(--ink-600); background: var(--ink-700); }
table.compare { width: 100%; border-collapse: collapse; }
table.compare th, table.compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--divider);
  font-size: 14px; vertical-align: top; line-height: 1.45; }
.dark table.compare th, .dark table.compare td { border-color: var(--ink-600); }
table.compare thead th { background: var(--surface); font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.dark table.compare thead th { background: var(--ink-deep); color: var(--muted-on-dark); }
table.compare thead th.us { background: var(--ink); color: var(--signal-light); }
.dark table.compare thead th.us { background: var(--signal); color: var(--ink); }
table.compare td.us { background: rgba(20,184,166,0.05); color: var(--ink); font-weight: 550; }
.dark table.compare td.us { background: rgba(20,184,166,0.10); color: #fff; }
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare .lbl { font-weight: 550; color: var(--ink); }
.dark table.compare .lbl { color: #fff; }
table.compare .meh { color: var(--muted); }
.dark table.compare .meh { color: var(--muted-on-dark); }
.ok { color: var(--signal-deep); font-weight: 600; }
.dark .ok { color: var(--signal-light); }

/* ---------- node-network motif (animated, decorative) ---------- */
.netmark line { stroke: currentColor; opacity: .55; }
.netmark .node { fill: currentColor; }
.netmark .core { fill: var(--signal); }
.netmark .pulse { transform-origin: center; animation: pulse 3.4s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: .25; r: 5; } 50% { opacity: 1; r: 7.5; } }
.netbg { position: absolute; pointer-events: none; opacity: .9; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .06s; }
.reveal.d2 { transition-delay: .12s; }
.reveal.d3 { transition-delay: .18s; }
.reveal.d4 { transition-delay: .24s; }

/* ---------- misc ---------- */
.kicker-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rule { height: 1px; background: var(--divider); border: 0; margin: 0; }
.dark .rule { background: var(--ink-600); }

.arrow-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.arrow-list li { padding-left: 24px; position: relative; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.arrow-list li::before { content: '→'; position: absolute; left: 0; color: var(--signal-deep); font-family: var(--font-mono); }
.dark .arrow-list li { color: var(--muted-on-dark); }
.dark .arrow-list li::before { color: var(--signal-light); }
.arrow-list li b { color: var(--ink); font-weight: 600; }
.dark .arrow-list li b { color: #fff; }

/* ---------- footer ---------- */
footer.site { padding: 56px 0 40px; border-top: 1px solid var(--divider); margin-top: 8px; }
.dark footer.site, footer.site.dark { border-color: var(--ink-600); }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.dark .foot-row { color: var(--muted-on-dark); }

/* ---------- draft chrome (review only — strip on promote) ---------- */
.draftbar { background: var(--ink-deep); color: var(--signal-light); font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.1em; padding: 9px 0; }
.draftbar .container { display: flex; justify-content: space-between; gap: 12px; }
.draftbar a { color: var(--signal-light); }
.draftbar a:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .span-3 { grid-column: span 3; } .span-4 { grid-column: span 6; }
  .span-5, .span-6 { grid-column: span 6; }
  .span-7, .span-8 { grid-column: span 6; }
}
@media (max-width: 680px) {
  .bento { grid-template-columns: 1fr; }
  [class*="span-"] { grid-column: span 1 !important; }
  .nav-links a:not(.btn) { display: none; }
  .section { padding: 64px 0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .pulse, .netbg * { animation: none !important; }
  .btn:hover, .cell:hover { transform: none; }
}