@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&family=Space+Grotesk:wght@300..700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

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

  :root {
    --sleep: #EFC15E;
    --physical: #67C8D3;
    --mental: #BD227F;
    --diet: #ED604D;
    --unified: #7FA89E;
    --cross_pillar: #7FA89E;
    --sage: #678B83;
    --sage-bright: #7FA89E;
    --bg-deep: #1A1A1A;
    --bg: #2A2A2A;
    --bg-abyss: #111111;
    --surface: #333333;
    --text: #FFFFFF;
    --offwhite: #E0E0E0;
    --muted: #777777;
    --subtle: #444444;
    --grid-line: rgba(255,255,255,0.04);
    --grid-line-strong: rgba(255,255,255,0.06);
    --font-display: 'Unbounded', sans-serif;
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;
    --font-mono: 'Space Mono', monospace;
  }

  html { font-size: 16px; scroll-behavior: smooth; }
  body { background: var(--bg-abyss); color: var(--text); font-family: var(--font-body); font-weight: 400; -webkit-font-smoothing: antialiased; min-height: 100vh; }
  body::after { content: ''; position: fixed; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); pointer-events: none; z-index: 10000; }
  a { color: inherit; text-decoration: none; }

  /* ═══ NAV ═══ */
  .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; padding: 20px 64px; display: flex; align-items: center; justify-content: space-between; background: rgba(17,17,17,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--grid-line); }
  .nav-left { display: flex; align-items: center; gap: 32px; }
  .nav-logo { font-family: var(--font-heading); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; color: white; }
  .nav-number { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; }
  .nav-right { display: flex; align-items: center; gap: 36px; }
  .nav-right a { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.3s; }
  .nav-right a:hover { color: white; }
  .nav-right a.active { color: white; }
  .nav-back { display: inline-flex; align-items: center; gap: 8px; }
  .nav-back .arrow { font-family: var(--font-mono); font-size: 14px; }

  /* ═══ HERO ═══ */
  .page-hero { padding: 160px 64px 80px; position: relative; max-width: 1440px; margin: 0 auto; }
  .page-hero .bg-text { position: absolute; top: 50%; right: 64px; transform: translateY(-50%); font-family: var(--font-display); font-size: 240px; font-weight: 900; color: rgba(255,255,255,0.012); line-height: 0.85; text-align: right; user-select: none; pointer-events: none; }
  .page-hero .section-marker { position: absolute; left: 20px; top: 200px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: rgba(255,255,255,0.15); writing-mode: vertical-rl; text-orientation: mixed; }
  .page-hero .section-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--muted); margin-bottom: 24px; }
  .page-hero h1 { font-family: var(--font-heading); font-size: clamp(44px, 5.5vw, 80px); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; max-width: 900px; margin-bottom: 28px; }
  .page-hero h1 .accent { background: linear-gradient(135deg, var(--sage-bright), var(--sage)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .page-hero .subtitle { font-size: 18px; color: var(--offwhite); line-height: 1.55; max-width: 680px; margin-bottom: 16px; font-weight: 300; }
  .page-hero .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; color: var(--muted); text-transform: uppercase; }

  /* ═══ METHODOLOGY ═══ */
  .methodology { max-width: 1440px; margin: 0 auto; padding: 0 64px 100px; }
  .meth-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--sage-bright); margin-bottom: 24px; text-transform: uppercase; }
  .tier-ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-bottom: 48px; border: 1px solid var(--grid-line); }
  .tier-card { background: var(--bg); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 200px; }
  .tier-card-num { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
  .tier-card-num::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .tier-card-desc { font-family: var(--font-body); font-size: 13px; color: var(--offwhite); line-height: 1.55; font-weight: 300; }
  /* Tier color coding */
  .tc-foundational { color: var(--sage-bright); }
  .tc-strong { color: var(--sage); opacity: 1; }
  .tc-moderate { color: var(--sage); opacity: 0.75; }
  .tc-emerging { color: var(--sage); opacity: 0.5; }
  .tc-experimental { color: var(--muted); }

  .meth-criteria { background: var(--bg); border: 1px solid var(--grid-line); padding: 36px 40px; margin-bottom: 32px; }
  .meth-criteria h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 600; margin-bottom: 16px; color: var(--text); }
  .meth-criteria p { font-size: 15px; color: var(--offwhite); line-height: 1.7; font-weight: 300; }
  .meth-criteria p + p { margin-top: 12px; }
  .meth-genetic { background: var(--bg); border: 1px solid var(--grid-line); border-left: 3px solid var(--sage); padding: 32px 40px; margin-bottom: 32px; scroll-margin-top: 100px; }
  .meth-genetic:target { border-color: var(--sage-bright); box-shadow: 0 0 0 1px var(--sage-bright); transition: border-color 0.4s ease, box-shadow 0.4s ease; }
  .meth-genetic .gdc-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--sage-bright); text-transform: uppercase; margin-bottom: 14px; font-weight: 700; }
  .meth-genetic h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 14px; color: var(--text); max-width: 720px; }
  .meth-genetic p { font-size: 15px; color: var(--offwhite); line-height: 1.7; font-weight: 300; max-width: 760px; }
  .meth-genetic p strong { color: var(--text); font-weight: 600; }
  .meth-honesty { padding: 20px 28px; border-left: 3px solid var(--sage); background: rgba(103, 139, 131, 0.06); font-size: 14px; color: var(--offwhite); line-height: 1.6; font-style: italic; font-weight: 300; }

  /* ═══ CONTROLS (sticky search + filters) ═══ */
  .controls { position: sticky; top: 72px; z-index: 100; background: rgba(17,17,17,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line); padding: 24px 64px; }
  .controls-inner { max-width: 1440px; margin: 0 auto; }
  .search-row { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
  .search-input { flex: 1; padding: 14px 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: var(--text); font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color 0.3s; }
  .search-input::placeholder { color: var(--subtle); }
  .search-input:focus { border-color: var(--sage); }
  .result-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; white-space: nowrap; }

  .filter-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
  .filter-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .filter-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--muted); text-transform: uppercase; margin-right: 4px; }
  .chip { padding: 6px 12px; background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--offwhite); font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; }
  .chip:hover { border-color: rgba(255,255,255,0.4); }
  .chip.active { background: var(--sage); border-color: var(--sage); color: var(--bg-deep); }
  .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .chip-pillar.active.p-sleep { background: var(--sleep); border-color: var(--sleep); color: var(--bg-deep); }
  .chip-pillar.active.p-diet { background: var(--diet); border-color: var(--diet); color: var(--bg-deep); }
  .chip-pillar.active.p-physical { background: var(--physical); border-color: var(--physical); color: var(--bg-deep); }
  .chip-pillar.active.p-mental { background: var(--mental); border-color: var(--mental); color: var(--bg-deep); }
  .chip-clear { color: var(--muted); border: none; padding: 6px 8px; }
  .chip-clear:hover { color: var(--sage-bright); }

  /* ═══ GRID ═══ */
  .grid-wrap { max-width: 1440px; margin: 0 auto; padding: 60px 64px 120px; }
  .kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--grid-line); }
  .kb-card { background: var(--bg); padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; position: relative; cursor: pointer; transition: background 0.25s; min-height: 320px; border-top: 3px solid transparent; }
  .kb-card:hover { background: var(--surface); }
  .kb-card.p-sleep { border-top-color: var(--sleep); }
  .kb-card.p-diet { border-top-color: var(--diet); }
  .kb-card.p-physical { border-top-color: var(--physical); }
  .kb-card.p-mental { border-top-color: var(--mental); }
  .kb-card.p-unified { border-top-color: var(--sage-bright); }
  .kb-card.p-cross_pillar { border-top-color: var(--sage-bright); }

  .kb-card-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .kb-card-tier { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
  .kb-card-tier::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .kb-card-pillar-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--grid-line); }
  .kb-card-flags { display: inline-flex; gap: 6px; margin-left: auto; }
  .kb-card-flag { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; padding: 3px 6px; text-transform: uppercase; border: 1px solid; }
  .kb-card-flag.bias { color: #D4843A; border-color: rgba(212, 132, 58, 0.4); }
  .kb-card-flag.mixed { color: var(--muted); border-color: var(--grid-line-strong); }

  .kb-card-title { font-family: var(--font-heading); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--text); }
  .kb-card-summary { font-size: 13.5px; color: var(--offwhite); line-height: 1.55; font-weight: 300; flex: 1; }
  .kb-card-reasoning { padding-top: 14px; border-top: 1px solid var(--grid-line); font-size: 12px; color: var(--muted); line-height: 1.6; }
  .kb-card-reasoning .reasoning-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; color: var(--sage-bright); text-transform: uppercase; display: block; margin-bottom: 6px; }
  .kb-card-cta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--sage-bright); text-transform: uppercase; padding-top: 10px; opacity: 0; transition: opacity 0.25s; }
  .kb-card:hover .kb-card-cta { opacity: 1; }

  .empty-state { padding: 80px 40px; text-align: center; color: var(--muted); font-family: var(--font-body); font-size: 15px; }
  .empty-state em { font-style: normal; color: var(--sage-bright); }

  /* ═══ DETAIL OVERLAY ═══ */
  .detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.25s; overflow-y: auto; padding: 40px 24px; }
  .detail-overlay.open { opacity: 1; pointer-events: auto; }
  .detail-panel { max-width: 880px; margin: 0 auto; background: var(--bg-abyss); border: 1px solid var(--grid-line-strong); padding: 60px 64px; position: relative; transform: translateY(20px); transition: transform 0.25s; }
  .detail-overlay.open .detail-panel { transform: translateY(0); }
  .detail-close { position: absolute; top: 24px; right: 24px; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--offwhite); width: 40px; height: 40px; cursor: pointer; font-family: var(--font-mono); font-size: 14px; transition: all 0.2s; }
  .detail-close:hover { background: white; color: var(--bg-deep); }
  .detail-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
  .detail-title { font-family: var(--font-heading); font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 24px; padding-right: 60px; }
  .detail-section { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--grid-line); }
  .detail-section:last-child { border-bottom: none; padding-bottom: 0; }
  .detail-section h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--sage-bright); text-transform: uppercase; margin-bottom: 14px; font-weight: 700; }
  .detail-section h3.tier-reasoning-h { color: var(--sage-bright); }
  .detail-section p { font-size: 15.5px; color: var(--offwhite); line-height: 1.7; font-weight: 300; }
  .detail-section p + p { margin-top: 12px; }
  .detail-section ul { list-style: none; padding: 0; }
  .detail-section ul li { font-size: 14px; color: var(--offwhite); line-height: 1.7; font-weight: 300; padding: 8px 0 8px 24px; position: relative; border-bottom: 1px solid var(--grid-line); }
  .detail-section ul li:last-child { border-bottom: none; }
  .detail-section ul li::before { content: '→'; position: absolute; left: 0; top: 8px; color: var(--sage); font-family: var(--font-mono); font-size: 13px; }
  .detail-bias-box { padding: 20px 24px; background: rgba(212, 132, 58, 0.05); border-left: 3px solid #D4843A; margin-top: 14px; }
  .detail-bias-box .bias-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: #D4843A; text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
  .detail-bias-box p { font-size: 14px; color: var(--offwhite); line-height: 1.65; }
  .detail-wwcm-box { padding: 20px 24px; background: rgba(103, 139, 131, 0.06); border-left: 3px solid var(--sage); margin-top: 14px; }
  .detail-wwcm-box .wwcm-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--sage-bright); text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
  .detail-wwcm-box p { font-size: 14px; color: var(--offwhite); line-height: 1.65; }
  .detail-mixed-note { padding: 14px 20px; background: rgba(255,255,255,0.03); border-left: 2px solid var(--muted); font-size: 13px; color: var(--offwhite); line-height: 1.6; margin-top: 12px; font-style: italic; }
  .detail-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }

  /* Axiom statement block (Tier 0 entries) */
  .detail-axiom-statement { padding: 24px 28px; background: rgba(127, 168, 158, 0.06); border-left: 3px solid var(--sage-bright); font-family: var(--font-heading); font-size: 19px; line-height: 1.5; font-weight: 500; color: var(--text); font-style: italic; }
  .detail-axiom-statement::before { content: '"'; font-family: var(--font-display); font-size: 36px; color: var(--sage-bright); line-height: 0; margin-right: 4px; vertical-align: -10px; }
  .detail-axiom-statement::after { content: '"'; font-family: var(--font-display); font-size: 36px; color: var(--sage-bright); line-height: 0; margin-left: 4px; vertical-align: -10px; }

  /* Source links — clickable when DOI / PubMed pattern present or fall back to scholar search */
  .detail-section ul li a { color: var(--offwhite); border-bottom: 1px dotted rgba(127, 168, 158, 0.35); transition: color 0.2s, border-color 0.2s; }
  .detail-section ul li a:hover { color: var(--sage-bright); border-bottom-color: var(--sage-bright); }
  .detail-section ul li .src-arrow { display: inline-block; margin-left: 4px; color: var(--muted); font-size: 10px; transition: transform 0.2s, color 0.2s; }
  .detail-section ul li a:hover .src-arrow { transform: translate(2px, -2px); color: var(--sage-bright); }

  /* ═══ FOOTER ═══ */
  .page-footer { border-top: 1px solid var(--grid-line); padding: 40px 64px; max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
  .page-footer a { color: var(--offwhite); }
  .page-footer a:hover { color: var(--sage-bright); }

  /* ═══ RESPONSIVE ═══ */
  @media (max-width: 1100px) {
    .kb-grid { grid-template-columns: repeat(2, 1fr); }
    .tier-ladder { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    .site-nav { padding: 16px 24px; }
    .nav-right { gap: 18px; }
    .nav-right a:not(.nav-back) { display: none; }
    .page-hero { padding: 120px 24px 60px; }
    .page-hero .bg-text { display: none; }
    .methodology { padding: 0 24px 60px; }
    .controls { padding: 16px 24px; }
    .grid-wrap { padding: 40px 24px 80px; }
    .kb-grid { grid-template-columns: 1fr; }
    .tier-ladder { grid-template-columns: 1fr; }
    .detail-panel { padding: 48px 24px; }
    .detail-title { font-size: 24px; padding-right: 50px; }
    .page-footer { padding: 30px 24px; flex-direction: column; gap: 16px; text-align: center; }
    .filter-row { gap: 12px; }
    .controls { top: 60px; }
  }

/* ── static entry page layout (build artifact) ── */
.entry-wrap { padding: 140px 24px 60px; }
.detail-static { transform: none; }
.detail-static .detail-title { padding-right: 0; }
.entry-back { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--grid-line); }
.entry-back a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-bright); }
.entry-back a:hover { color: var(--text); }

.nav-right a.nav-cta-btn{display:inline-flex;align-items:center;padding:8px 18px;border:1px solid rgba(255,255,255,0.35);color:#fff;border-radius:0;transition:background .25s ease,color .25s ease}.nav-right a.nav-cta-btn:hover{background:#fff;color:#1A1A1A}@view-transition{navigation:auto}@media (prefers-reduced-motion:no-preference){::view-transition-old(root){animation:asmVtOut .26s ease both}::view-transition-new(root){animation:asmVtIn .42s cubic-bezier(.22,.61,.36,1) both}@keyframes asmVtOut{to{opacity:0}}@keyframes asmVtIn{from{opacity:0;transform:translateY(10px)}}@keyframes asmRise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}@keyframes asmFade{from{opacity:0}to{opacity:1}}.feed-item,.pl-item,.conn-card,.spine-row,.ent-card,.hub-cta-row{animation:asmRise .5s cubic-bezier(.22,.61,.36,1) both}.kb-grid,.controls{animation:asmFade .5s ease both}.feed-item:nth-child(2),.pl-item:nth-child(2),.conn-card:nth-child(2),.ent-card:nth-child(2),.spine-row:nth-child(2){animation-delay:.06s}.feed-item:nth-child(3),.pl-item:nth-child(3),.conn-card:nth-child(3),.ent-card:nth-child(3),.spine-row:nth-child(3){animation-delay:.12s}.feed-item:nth-child(4),.pl-item:nth-child(4),.conn-card:nth-child(4),.ent-card:nth-child(4),.spine-row:nth-child(4){animation-delay:.18s}.feed-item:nth-child(5),.ent-card:nth-child(5),.spine-row:nth-child(5){animation-delay:.24s}.feed-item:nth-child(n+6),.ent-card:nth-child(n+6){animation-delay:.30s}}