/* ====== Jay's notes — shared design tokens & components ====== */
:root{
  --bg:            #0c0a0a;
  --bg-elev:       #141111;
  --bg-elev-2:     #1a1616;
  --bg-code:       #0d0c0c;
  --border:        rgba(255,255,255,.06);
  --border-strong: rgba(255,255,255,.10);
  --border-stronger:rgba(255,255,255,.14);
  --text:          #ece8e6;
  --text-2:        #c5beba;
  --text-3:        #8d8682;
  --text-4:        #555150;

  --brand:         #ef4d6b;
  --brand-soft:    #f4708a;
  --brand-tint:    rgba(239,77,107,.12);
  --brand-tint-2:  rgba(239,77,107,.22);

  --accent-blue:   #4f8df0;
  --accent-purple: #8b6cf0;
  --accent-green:  #34c98a;
  --accent-amber:  #d9a05b;
  --accent-cyan:   #4cc5d1;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --shadow-card: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px -12px rgba(0,0,0,.55);
  --heading:       #ffffff;
  --nav-bg:        rgba(12,10,10,.78);
  --strip-bg:      rgba(20,17,17,.55);
}

/* === LIGHT THEME === */
:root[data-theme="light"]{
  --bg:            #fbf6f1;
  --bg-elev:       #ffffff;
  --bg-elev-2:     #f4ede5;
  --bg-code:       #faf4ec;
  --border:        rgba(28,22,22,.08);
  --border-strong: rgba(28,22,22,.14);
  --border-stronger:rgba(28,22,22,.22);
  --text:          #1c1616;
  --text-2:        #4a4340;
  --text-3:        #807973;
  --text-4:        #b3aaa5;
  --heading:       #0e0a0a;
  --nav-bg:        rgba(251,246,241,.78);
  --strip-bg:      rgba(255,255,255,.6);

  --brand:         #de2f51;
  --brand-soft:    #b9243f;
  --brand-tint:    rgba(222,47,81,.08);
  --brand-tint-2:  rgba(222,47,81,.20);

  --accent-blue:   #2862c9;
  --accent-purple: #6240c9;
  --accent-green:  #1d8a5a;
  --accent-amber:  #aa7035;
  --accent-cyan:   #1f8e9c;

  --shadow-card: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 18px -12px rgba(28,22,22,.18);
  color-scheme: light;
}

/* light overrides for hardcoded values */
[data-theme="light"] .hero::before{
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(222,47,81,.12) 0%, rgba(222,47,81,0) 60%),
    radial-gradient(80% 100% at 50% 100%, rgba(255,232,219,.55) 0%, rgba(251,246,241,0) 70%),
    linear-gradient(180deg, #fceee2 0%, #fbf6f1 100%) !important;
}
[data-theme="light"] .hero::after{ opacity:.25; mix-blend-mode:multiply; }
[data-theme="light"] .hero h1{ color:var(--heading) !important; text-shadow:0 1px 0 rgba(255,255,255,.4) !important; }
[data-theme="light"] .post h2,
[data-theme="light"] .article h1,
[data-theme="light"] .article h2,
[data-theme="light"] .article h3,
[data-theme="light"] .article h4,
[data-theme="light"] .topic-title,
[data-theme="light"] .identity h1,
[data-theme="light"] .year-head h2,
[data-theme="light"] .brand{ color:var(--heading) !important; }

[data-theme="light"] .nav-link{ color:var(--text-2); }
[data-theme="light"] .nav-link:hover{ color:var(--text); background:rgba(0,0,0,.03); }
[data-theme="light"] .nav-link.active{ color:var(--brand); }
/* code highlighting tuned for light bg */
[data-theme="light"] .codeblock pre{ color:#2a2222; }
[data-theme="light"] .kw  { color:#b22c4d; }
[data-theme="light"] .fn  { color:#2862c9; }
[data-theme="light"] .str { color:#1d7d4d; }
[data-theme="light"] .com { color:#9b9590; font-style:italic; }
[data-theme="light"] .num { color:#aa7035; }
[data-theme="light"] .var { color:#4a4340; }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:80px;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--brand-tint-2); color:#fff; }
a{ color:inherit; text-decoration:none; }
code,.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }

/* ====== NAV ====== */
.nav-wrap{
  position:sticky; top:0; z-index:20;
  background:var(--nav-bg);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--border);
}
.nav{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex; align-items:center; gap:24px;
  height:56px;
}
.nav .nav-links{ flex:1; }
.nav .theme-toggle{ margin-left:auto; }
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; color:#fff;
  font-size:15px;
  letter-spacing:.04em;
}
.brand-mark{
  width:24px; height:24px; border-radius:7px;
  background:linear-gradient(135deg, var(--brand) 0%, var(--accent-purple) 100%);
  display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:13px;
  box-shadow:0 4px 12px -4px rgba(239,77,107,.5);
}
.brand-logo{
  width:36px;
  height:36px;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.nav-links{ display:flex; gap:4px; }
.nav-link{
  position:relative;
  padding:8px 14px;
  font-size:14px;
  font-weight:500;
  color:var(--text-2);
  border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.nav-link:hover{ color:var(--text); background:rgba(255,255,255,.03); }
.nav-link.active{ color:var(--brand); }
.nav-link.active::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:-1px;
  height:2px;
  background:var(--brand);
  border-radius:2px;
}
.theme-toggle{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:10px;
  color:var(--text-2);
  cursor:pointer;
  background:transparent; border:none;
  transition:background .15s ease, color .15s ease, transform .3s ease;
}
.theme-toggle:hover{ background:rgba(255,255,255,.04); color:var(--text); transform:rotate(-15deg);}

/* ====== HERO (shared across all pages) ====== */
.hero{
  position:relative;
  padding:96px 24px 88px;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(239,77,107,.16) 0%, rgba(239,77,107,0) 60%),
    radial-gradient(80% 100% at 50% 100%, rgba(70,40,38,.6) 0%, rgba(12,10,10,0) 70%),
    linear-gradient(180deg, #181111 0%, #0c0a0a 100%);
  z-index:-2;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode:overlay;
  opacity:.6;
  z-index:-1;
  pointer-events:none;
}
.hero h1{
  margin:0;
  font-family:'Inter','Noto Sans SC',sans-serif;
  font-weight:800;
  font-size:clamp(40px, 5vw, 56px);
  letter-spacing:-.025em;
  line-height:1.05;
  color:#fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.hero .tagline{
  margin-top:18px;
  font-size:15px;
  letter-spacing:.32em;
  color:var(--brand-soft);
  font-weight:500;
  text-indent:.32em;
}
/* page label strip — shows under the shared hero on sub pages */
.page-strip{
  border-bottom:1px solid var(--border);
  background:var(--strip-bg);
}
.page-strip-inner{
  max-width:1200px;
  margin:0 auto;
  padding:14px 32px;
  display:flex; align-items:center; gap:10px;
  font-size:12.5px;
  color:var(--text-3);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.page-strip-inner a{ color:var(--text-3); }
.page-strip-inner a:hover{ color:var(--brand); }
.page-strip-inner .sep{ color:var(--text-4); }
.page-strip-inner .current{ color:var(--text); font-weight:600;}
.page-strip-inner .spacer{ flex:1; }
.page-strip-inner .meta{
  display:flex; gap:18px;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--text-4);
}
.page-strip-inner .meta span{ display:inline-flex; align-items:center; gap:6px;}
.page-strip-inner .meta svg{ width:13px; height:13px;}

/* ====== FOOTER ====== */
footer.site-foot{
  border-top:1px solid var(--border);
  padding:28px 32px;
  text-align:center;
  color:var(--text-4);
  font-size:12.5px;
  letter-spacing:.04em;
}
footer.site-foot a{ color:var(--text-3);}
footer.site-foot a:hover{ color:var(--brand);}

/* ====== utility ====== */
.container-page{
  max-width:1200px;
  margin:0 auto;
  padding:32px 32px 80px;
}