/* site.css — "Signal" design system (Concept B), shared across all pages */
:root, [data-theme="light"]{
  --color-bg:#F3F1EA; --color-surface:#FFFFFF; --color-surface-2:#FAF9F5; --color-surface-offset:#EAE7DC;
  --color-border:#D8D4C6; --color-divider:#E2DFD3;
  --color-text:#12151A; --color-text-muted:#5B5F66; --color-text-faint:#9A9D9F; --color-text-inverse:#F3F1EA;
  --color-ink:#0E1218; --color-ink-2:#171C24;
  --color-primary:#C98A1F; --color-primary-hover:#A56E14; --color-primary-highlight:#F1E1BE;
  --font-display:'Cabinet Grotesk','Georgia',sans-serif; --font-body:'Satoshi','Inter',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --shadow-sm:0 1px 2px oklch(0.2 0 0/.08); --shadow-md:0 12px 32px oklch(0.2 0 0/.14);
}
[data-theme="dark"]{
  --color-bg:#0E1218; --color-surface:#151A21; --color-surface-2:#1A1F27; --color-surface-offset:#1E2430;
  --color-border:#2B323D; --color-divider:#232A34;
  --color-text:#E9E7DF; --color-text-muted:#9AA0A8; --color-text-faint:#5E656E; --color-text-inverse:#0E1218;
  --color-primary:#E0A63C; --color-primary-hover:#EFBE60; --color-primary-highlight:#3A2F16;
}
body{background:var(--color-bg);color:var(--color-text)}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:700;letter-spacing:-0.015em}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-mono)}

/* Nav */
.nav{background:color-mix(in oklab, var(--color-bg) 85%, transparent);border-bottom:1px solid var(--color-divider)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-block:var(--space-4)}
.brand{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:700;font-size:var(--text-base)}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--color-primary)}
.nav-links{display:flex;gap:var(--space-8);font-size:var(--text-sm);color:var(--color-text-muted)}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--color-primary)}
.theme-toggle{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-md);border:1px solid var(--color-border)}
.nav-cta{font-size:var(--text-sm);font-weight:600;padding:var(--space-2) var(--space-5);border-radius:var(--radius-sm);background:var(--color-primary);color:#14100A}
.nav-cta:hover{background:var(--color-primary-hover)}
.nav-actions{display:flex;align-items:center;gap:var(--space-4)}
.nav-mobile-toggle{display:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:1px solid var(--color-divider);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text)}

/* Dark hero block (reused for page headers too) */
.hero-wrap{background:linear-gradient(180deg,var(--color-ink) 0%, var(--color-ink-2) 100%);color:var(--color-text-inverse)}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-2)}
.hero{padding-block:clamp(var(--space-20),12vw,var(--space-32)) var(--space-16);display:grid;grid-template-columns:1fr auto;gap:var(--space-12);align-items:end}
.hero h1{font-size:var(--text-hero);line-height:.98;margin-bottom:var(--space-6);color:#F3F1EA}
.hero p.lede{font-size:var(--text-lg);color:#B9BEC6;max-width:56ch;margin-bottom:var(--space-8)}
.page-header{padding-block:clamp(var(--space-16),9vw,var(--space-24))}
.page-header h1{font-size:var(--text-2xl);color:#F3F1EA;margin-bottom:var(--space-4)}
.page-header p.lede{font-size:var(--text-lg);color:#B9BEC6;max-width:60ch}

.btn-row{display:flex;gap:var(--space-4);flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:600;font-family:var(--font-body)}
.btn-primary{background:var(--color-primary);color:#14100A}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-ghost{border:1px solid #3A414C;color:#F3F1EA}
.btn-ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn-outline{border:1px solid var(--color-border);color:var(--color-text)}
.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary)}
.hero-tile{width:220px;aspect-ratio:1;border:1px solid #2B323D;border-radius:var(--radius-md);display:grid;place-items:center;position:relative;overflow:hidden}
.hero-tile::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 12%, transparent) 0 2px, transparent 2px 14px)}
.hero-tile img{position:relative;width:100%;height:100%;object-fit:cover}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-divider);border:1px solid var(--color-divider);border-radius:var(--radius-lg);overflow:hidden}
.stat-tile{background:var(--color-surface);padding:var(--space-8)}
.stat-num{font-family:var(--font-mono);font-size:var(--text-xl);color:var(--color-primary);font-weight:600}
.stat-label{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2)}

.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-10);gap:var(--space-6);flex-wrap:wrap}
.section-head h2{font-size:var(--text-xl)}

/* Experience table */
.exp-table{border:1px solid var(--color-divider);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface)}
.exp-row{display:grid;grid-template-columns:140px 1fr 220px;gap:var(--space-6);padding:var(--space-6) var(--space-8);border-bottom:1px solid var(--color-divider);align-items:center}
.exp-row:last-child{border-bottom:none}
.exp-row.linked{cursor:pointer}
.exp-row.linked:hover{background:var(--color-surface-2)}
.exp-period{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-muted)}
.exp-role{font-family:var(--font-display);font-weight:700;font-size:var(--text-base)}
.exp-org{font-size:var(--text-sm);color:var(--color-primary);text-align:right;font-weight:600}

/* Detailed experience blocks (Experience page) */
.exp-block{border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface);padding:clamp(var(--space-6),4vw,var(--space-10));margin-bottom:var(--space-8)}
.exp-block-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-divider)}
.exp-block-head h3{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:var(--space-1)}
.exp-block-org{color:var(--color-primary);font-weight:600;font-size:var(--text-sm)}
.exp-block-period{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-muted);white-space:nowrap}
.exp-bullets{display:flex;flex-direction:column;gap:var(--space-3)}
.exp-bullets li{list-style:none;position:relative;padding-left:var(--space-6);font-size:var(--text-base);color:var(--color-text)}
.exp-bullets li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--color-primary);border-radius:50%}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.chip{padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-sm);background:var(--color-surface);font-family:var(--font-mono)}

/* Insights */
.insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--color-divider);border:1px solid var(--color-divider);border-radius:var(--radius-lg);overflow:hidden}
.insight-card{background:var(--color-surface);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.insight-card h3{font-family:var(--font-display);font-size:var(--text-lg)}
.insight-card p{color:var(--color-text-muted);font-size:var(--text-sm)}
.insight-tag{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-primary);font-weight:600}
.insight-meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-faint);margin-top:auto}

/* Personal */
.personal{background:var(--color-ink);color:#F3F1EA;border-radius:var(--radius-lg);padding:clamp(var(--space-8),5vw,var(--space-16))}
.personal .eyebrow{color:var(--color-primary)}
.personal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#2B323D;margin-top:var(--space-8);border-radius:var(--radius-md);overflow:hidden}
.personal-item{background:var(--color-ink-2);padding:var(--space-6);text-align:center;font-family:var(--font-display);font-size:var(--text-lg);font-weight:700}
.personal-item span{display:block;font-family:var(--font-mono);font-size:var(--text-xs);color:#9AA0A8;margin-top:var(--space-2);font-weight:400}

/* Article / long-form reading */
.article-header{border-bottom:1px solid var(--color-divider);padding-bottom:var(--space-10);margin-bottom:var(--space-10)}
.article-header h1{font-size:var(--text-2xl);margin-top:var(--space-3)}
.article-meta{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-4)}
.article-body{max-width:68ch;font-size:var(--text-base);line-height:1.75}
.article-body p{margin-bottom:var(--space-6)}
.article-body strong{color:var(--color-text);font-weight:600}
.back-link{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-8)}
.back-link:hover{color:var(--color-primary)}
.related{margin-top:var(--space-16);padding-top:var(--space-10);border-top:1px solid var(--color-divider)}

/* Footer */
footer{border-top:1px solid var(--color-divider);padding-block:var(--space-16)}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--space-6)}
.footer-links{display:flex;gap:var(--space-6);font-size:var(--text-sm);font-family:var(--font-mono)}
.footer-links a:hover{color:var(--color-primary)}
.footer-bottom{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--color-divider);font-size:var(--text-xs);color:var(--color-text-faint);font-family:var(--font-mono);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero-tile{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .exp-row{grid-template-columns:1fr;text-align:left}
  .exp-org{text-align:left}
  .exp-block-head{flex-direction:column}
  .insights-grid,.personal-grid{grid-template-columns:1fr}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--color-bg);border-bottom:1px solid var(--color-divider);padding:var(--space-2) clamp(1.25rem,4vw,3rem) var(--space-4)}
  .nav-links a{padding-block:var(--space-3);border-bottom:1px solid var(--color-divider)}
  .nav-links a:last-child{border-bottom:none}
  .nav.nav-open{position:relative}
  .nav.nav-open .nav-links{display:flex}
  .nav-mobile-toggle{display:flex}
  .footer-bottom{flex-direction:column}
}
@media (min-width:861px){
  .nav-mobile-toggle{display:none}
}