/* ==========================================================================
   yydev.net — design system
   Dark-first editorial. Inter (UI) · Newsreader (long-form) · JetBrains Mono.
   ========================================================================== */

/* ---- Theme tokens ------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  --bg:#0b0d12; --surface:#12141b; --surface-2:#171a22;
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.17);
  --text:#e8eaf0; --text-2:#9ca3af; --text-3:#6b7280;
  --accent-1:#6366f1; --accent-2:#8b5cf6;
  --grad:linear-gradient(135deg,#6366f1,#8b5cf6);
  --link:#a5b4fc; --link-hover:#c7d0ff;
  --nav-bg:rgba(11,13,18,.72);
  --code-bg:#0d0f15; --code-text:#c9cdd6; --code-border:rgba(255,255,255,.08);
  --ad-bg:rgba(255,255,255,.02);
  --card-hover:rgba(255,255,255,.03);
  --body-serif:#d5d8e0;
}
:root[data-theme="light"] {
  --bg:#fafafa; --surface:#ffffff; --surface-2:#f4f4f5;
  --border:rgba(9,9,11,.11); --border-strong:rgba(9,9,11,.20);
  --text:#0b0d12; --text-2:#52525b; --text-3:#8a8a92;
  --accent-1:#6366f1; --accent-2:#8b5cf6;
  --grad:linear-gradient(135deg,#6366f1,#8b5cf6);
  --link:#4f46e5; --link-hover:#4338ca;
  --nav-bg:rgba(250,250,250,.78);
  --code-bg:#0d0f15; --code-text:#c9cdd6; --code-border:rgba(255,255,255,.06);
  --ad-bg:rgba(9,9,11,.02);
  --card-hover:rgba(9,9,11,.02);
  --body-serif:#26262b;
}

/* ---- Base --------------------------------------------------------------- */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
  min-height:100vh; display:flex; flex-direction:column;
}
a { color:var(--link); text-decoration:none; }
a:hover { color:var(--link-hover); }
h1,h2,h3,h4 { line-height:1.15; font-weight:700; letter-spacing:-.022em; margin:0; }
p { text-wrap:pretty; margin:0; }
img { max-width:100%; display:block; }
::selection { background:rgba(139,92,246,.30); }
:focus-visible { outline:2px solid var(--accent-2); outline-offset:3px; border-radius:2px; }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); }

.skip-link {
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--surface); color:var(--text); padding:10px 16px;
  border:1px solid var(--border-strong);
}
.skip-link:focus { left:12px; top:12px; }

.wrap { max-width:1080px; width:100%; margin:0 auto; padding:0 clamp(20px,4vw,40px); }

/* ---- Header / nav ------------------------------------------------------- */
.site-header {
  position:sticky; top:0; z-index:50;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  background:var(--nav-bg); border-bottom:1px solid var(--border);
}
.nav {
  max-width:1080px; margin:0 auto; padding:15px clamp(20px,4vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.brand { display:flex; align-items:center; gap:11px; color:var(--text); }
.brand:hover { color:var(--text); }
.brand .logo { width:30px; height:30px; }
.brand-word { font-size:18px; font-weight:400; letter-spacing:-.02em; }
.brand-word b { font-weight:700; }

.nav-links { display:flex; align-items:center; gap:clamp(14px,2.4vw,26px); list-style:none; margin:0; padding:0; }
.nav-links a { color:var(--text-2); font-size:14.5px; font-weight:500; display:inline-flex; align-items:center; gap:3px; }
.nav-links a:hover { color:var(--text); }
.nav-links a[aria-current="page"] { color:var(--text); font-weight:600; }
.nav-links .ext { opacity:.5; font-size:12px; }

.nav-actions { display:flex; align-items:center; gap:12px; }
.icon-btn {
  cursor:pointer; width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border); color:var(--text-2); padding:0;
  transition:border-color .18s ease,color .18s ease;
}
.icon-btn:hover { border-color:var(--border-strong); color:var(--text); }
.theme-toggle .moon { display:none; }
.theme-toggle .sun  { display:block; }
:root[data-theme="light"] .theme-toggle .moon { display:block; }
:root[data-theme="light"] .theme-toggle .sun  { display:none; }

.nav-toggle { display:none; }

/* ---- Main / sections ---------------------------------------------------- */
main { flex:1; width:100%; }
.section { padding:clamp(28px,4vw,44px) 0; }
.section-top { border-top:1px solid var(--border); }

.eyebrow {
  display:block; text-transform:uppercase; letter-spacing:.14em;
  font-size:12px; font-weight:600; color:var(--link); margin-bottom:20px;
}
.eyebrow.muted { color:var(--text-3); }

.hero { padding:clamp(56px,10vw,104px) 0 clamp(36px,6vw,60px); max-width:660px; }
.hero h1 { font-size:clamp(2.15rem,5.6vw,3.4rem); }
.lead { margin-top:24px; font-size:clamp(1.05rem,2.2vw,1.22rem); line-height:1.66; color:var(--text-2); }

.page-head { padding:clamp(52px,9vw,92px) 0 clamp(30px,5vw,48px); max-width:700px; }
.page-head h1 { font-size:clamp(2rem,5vw,3rem); }

/* ---- Platform cards (home) --------------------------------------------- */
.card-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:16px;
}
.card {
  position:relative; display:block; background:var(--surface);
  border:1px solid var(--border); padding:26px 24px 26px 27px; overflow:hidden;
  transition:border-color .18s ease,background .18s ease;
}
.card:hover { border-color:var(--border-strong); background:var(--card-hover); }
.card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad); }
.card-icon {
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); color:var(--accent-2); margin-bottom:20px;
}
.card h3 { font-size:1.12rem; color:var(--text); }
.card p { margin-top:8px; color:var(--text-2); font-size:14.5px; line-height:1.55; }
.card .card-meta { margin-top:16px; color:var(--text-3); font-size:12.5px; letter-spacing:.01em; }

/* ---- Recent writing list (home) ---------------------------------------- */
.list-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:26px; }
.list-head h2 { font-size:clamp(1.3rem,3vw,1.6rem); }
.list-head a { font-size:14px; font-weight:500; white-space:nowrap; }

.post-list { border-top:1px solid var(--border); }
.post-row {
  position:relative; display:block; padding:22px 18px 22px 24px;
  border-bottom:1px solid var(--border); transition:background .16s ease;
}
.post-row:hover { background:var(--card-hover); }
.post-row::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--grad); }
.cat { text-transform:uppercase; letter-spacing:.13em; font-size:11px; font-weight:600; color:var(--link); }
.post-row h3 { margin-top:9px; font-size:1.24rem; color:var(--text); }
.post-row p { margin-top:7px; color:var(--text-2); font-size:15px; line-height:1.5; }
.post-meta { color:var(--text-3); font-size:12.5px; letter-spacing:.02em; }
.post-row .post-meta { margin-top:12px; }

/* ---- Post cards grid (blog index) -------------------------------------- */
.post-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.post-card {
  position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); padding:26px 24px 26px 27px; overflow:hidden;
  min-height:180px; transition:border-color .18s ease,background .18s ease;
}
.post-card:hover { border-color:var(--border-strong); background:var(--card-hover); }
.post-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad); }
.post-card h3 { margin-top:11px; font-size:1.28rem; color:var(--text); }
.post-card p { margin-top:9px; color:var(--text-2); font-size:14.5px; line-height:1.55; flex:1; }
.post-card .post-meta { margin-top:18px; }

/* ---- "Why this exists" note -------------------------------------------- */
.why { max-width:620px; border-left:2px solid var(--border-strong); padding:4px 0 4px 26px; }
.why p { font-size:clamp(1rem,2vw,1.12rem); line-height:1.7; color:var(--text-2); }

/* ---- Ad slot ------------------------------------------------------------ */
.ad {
  margin:16px 0; border:1px solid var(--border); background:var(--ad-bg); padding:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:132px;
}
.ad-label { text-transform:uppercase; letter-spacing:.16em; font-size:10.5px; font-weight:600; color:var(--text-3); margin-bottom:8px; }
.ad p { color:var(--text-3); font-size:13.5px; max-width:520px; line-height:1.5; }

/* ---- Article ------------------------------------------------------------ */
.article { max-width:720px; margin:0 auto; padding:0 clamp(20px,5vw,32px); }
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; color:var(--text-2); }
.back-link:hover { color:var(--text); }
.article-top { padding-top:clamp(40px,7vw,72px); }
.article-head { padding:clamp(28px,4vw,40px) 0 clamp(24px,3vw,32px); border-bottom:1px solid var(--border); }
.article-head h1 { font-size:clamp(2.05rem,5.2vw,3rem); line-height:1.08; }
.article-dek {
  margin-top:22px; font-family:'Newsreader',Georgia,serif;
  font-size:clamp(1.15rem,2.3vw,1.35rem); line-height:1.55; color:var(--text-2);
}
.byline { margin-top:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--text-3); font-size:13.5px; }
.avatar {
  width:34px; height:34px; border-radius:50%; background:var(--grad);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:13px;
}
.byline .who { color:var(--text-2); font-weight:500; }

/* ---- Prose (long-form) -------------------------------------------------- */
.prose { padding-top:clamp(28px,4vw,40px); }
.prose > p, .prose > ul, .prose > ol {
  font-family:'Newsreader',Georgia,serif; font-size:1.22rem; line-height:1.72;
  color:var(--body-serif); margin:0 0 1.35em;
}
.prose > ul, .prose > ol { padding-left:1.2em; line-height:1.7; }
.prose li { margin:.4em 0; }
.prose li::marker { color:var(--accent-2); }
.prose h2 { font-size:clamp(1.4rem,3vw,1.7rem); margin:2.1em 0 .7em; color:var(--text); }
.prose h3 { font-size:1.24rem; margin:1.8em 0 .5em; color:var(--text); }
.prose a { text-decoration:underline; text-decoration-color:var(--accent-2); text-underline-offset:3px; text-decoration-thickness:1.5px; }
.prose strong { color:var(--text); font-weight:600; }
.prose em { font-style:italic; }
.prose code {
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.86em;
  background:var(--surface-2); border:1px solid var(--border); padding:.12em .4em; color:var(--text);
}
.prose pre {
  background:var(--code-bg); border:1px solid var(--code-border);
  padding:20px 22px; overflow:auto; margin:0 0 1.35em; line-height:1.65;
}
.prose pre code {
  background:none; border:none; padding:0; color:var(--code-text);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13.5px;
}
.prose pre .cmt { color:#7c8391; }
.prose blockquote {
  margin:1.8em 0; padding:6px 0 6px 26px; border-left:3px solid;
  border-image:var(--grad) 1; font-family:'Newsreader',Georgia,serif;
  font-size:1.35rem; line-height:1.5; font-style:italic; color:var(--text);
}
.prose hr { border:none; border-top:1px solid var(--border); margin:2.8em 0 1.8em; }
.signoff { font-family:'Newsreader',Georgia,serif; font-style:italic; color:var(--text-2); font-size:1.1rem; }
.sign-name { margin-top:1.4em; font-size:14px; color:var(--text-3); }
.prose .muted { color:var(--text-3); }

/* In-prose table of contents (used by some articles) */
.prose .toc {
  font-family:'Inter',system-ui,sans-serif; background:var(--surface); border:1px solid var(--border);
  border-left:2px solid var(--accent-2); padding:20px 24px; margin:0 0 1.6em;
}
.prose .toc strong { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3); margin-bottom:12px; font-weight:600; }
.prose .toc ol { font-family:'Inter',system-ui,sans-serif; font-size:.98rem; line-height:1.5; color:var(--text-2); margin:0; padding-left:1.3em; }
.prose .toc li { margin:.35em 0; }
.prose .toc a { color:var(--link); text-decoration:none; }
.prose .toc a:hover { text-decoration:underline; }

/* Legacy in-article ad slot (matches the new .ad look) */
.ad-slot {
  margin:2.6em 0; border:1px solid var(--border); background:var(--ad-bg); padding:22px;
  display:flex; align-items:center; justify-content:center; text-align:center; min-height:130px;
  font-family:'Inter',system-ui,sans-serif;
}
.ad-slot .ad-label { text-transform:uppercase; letter-spacing:.16em; font-size:10.5px; font-weight:600; color:var(--text-3); margin-bottom:8px; }
.ad-slot .ad-ph { color:var(--text-3); font-size:13.5px; max-width:520px; line-height:1.5; margin:0 auto; }

/* ---- Read next ---------------------------------------------------------- */
.read-next { margin:clamp(40px,6vw,64px) 0 clamp(56px,8vw,80px); }
.read-next .eyebrow { color:var(--text-3); margin-bottom:12px; }
.next-card {
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:var(--surface); border:1px solid var(--border); padding:24px 24px 24px 27px;
  overflow:hidden; transition:border-color .18s ease,background .18s ease;
}
.next-card:hover { border-color:var(--border-strong); background:var(--card-hover); }
.next-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad); }
.next-card .cat { display:block; }
.next-card .n-title { display:block; margin-top:8px; font-size:1.2rem; font-weight:700; letter-spacing:-.02em; color:var(--text); }
.next-card .n-dek { display:block; margin-top:6px; color:var(--text-2); font-size:14px; }
.next-card .arrow { font-size:22px; color:var(--accent-2); flex-shrink:0; }

/* ---- Prose page (about / legal) ---------------------------------------- */
.doc { max-width:720px; }
.doc h1 { font-size:clamp(2rem,5vw,3rem); }
.doc .lead { max-width:640px; }
.doc h2 { font-size:clamp(1.35rem,3vw,1.65rem); margin:2em 0 .6em; }
.doc h3 { font-size:1.2rem; margin:1.6em 0 .5em; }
.doc p, .doc ul, .doc ol { color:var(--text-2); font-size:1.02rem; line-height:1.72; margin:0 0 1.1em; }
.doc ul, .doc ol { padding-left:1.3em; }
.doc li { margin:.45em 0; }
.doc li::marker { color:var(--accent-2); }
.doc a { text-decoration:underline; text-decoration-color:var(--accent-2); text-underline-offset:3px; }
.doc strong { color:var(--text); font-weight:600; }

.doc .updated { color:var(--text-3); font-size:.9rem; margin:-.4em 0 2em; }

.note {
  background:var(--surface); border:1px solid var(--border); border-left:2px solid var(--accent-2);
  padding:18px 22px; margin:1.6em 0; color:var(--text-2); font-size:.98rem; line-height:1.65;
}
.note strong { color:var(--text); }
.note p { color:inherit; font-size:inherit; margin:0; }
.note p + p { margin-top:.8em; }

/* ---- Forms (contact) ---------------------------------------------------- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; }
.form { display:flex; flex-direction:column; gap:16px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-size:13.5px; font-weight:500; color:var(--text-2); }
.field input, .field select, .field textarea {
  width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:11px 13px; font:inherit; font-size:15px; transition:border-color .16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--accent-2); outline:none; }
.field textarea { min-height:130px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder { color:var(--text-3); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  border:1px solid transparent; transition:opacity .16s ease,border-color .16s ease;
}
.btn-primary { background:var(--grad); color:#fff; }
.btn-primary:hover { opacity:.92; color:#fff; }
.form-note { font-size:13px; color:var(--text-3); }
.form-note a { color:var(--link); }

.contact-card { background:var(--surface); border:1px solid var(--border); border-left:2px solid var(--accent-2); padding:20px 22px; margin-bottom:1.1rem; }
.contact-card h3 { font-size:1rem; color:var(--text); margin-bottom:6px; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { border-top:1px solid var(--border); background:var(--surface); }
.footer-top {
  max-width:1080px; margin:0 auto; padding:44px clamp(20px,4vw,40px) 30px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px;
}
.footer-brand .brand { margin-bottom:12px; }
.footer-brand p { color:var(--text-2); font-size:14px; line-height:1.6; max-width:300px; }
.footer-col h4 { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3); margin-bottom:14px; font-weight:600; }
.footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a { color:var(--text-2); font-size:14px; }
.footer-col a:hover { color:var(--text); }
.footer-bottom {
  border-top:1px solid var(--border);
  max-width:1080px; margin:0 auto; padding:20px clamp(20px,4vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:var(--text-3); font-size:13px;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:720px) {
  .nav-links { position:fixed; inset:56px 0 auto 0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--bg); border-bottom:1px solid var(--border); padding:8px 0;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s ease,transform .18s ease; }
  .nav-links.open { transform:none; opacity:1; pointer-events:auto; }
  .nav-links li { width:100%; }
  .nav-links a { width:100%; padding:13px clamp(20px,4vw,40px); font-size:15.5px; }
  .nav-toggle { display:inline-flex; }
  .grid-2 { grid-template-columns:1fr; gap:2rem; }
  .footer-top { grid-template-columns:1fr 1fr; gap:26px; }
}
@media (max-width:440px) {
  .footer-top { grid-template-columns:1fr; }
}