/* /styles/styles.css */
:root {
  --bg: #0b1220;
  --fg: #e9ecf1;
  --muted: #a8b0bf;
  --line: #1e2a40;
  --work: #0a2a6a;        /* deep navy */
  --writing: #8b2d2d;     /* warm oxide red */
  --accent: #d46a2e;      /* accent for links/badges */
  --surface: #111a2c;
  --card: #0f1726;
  --focus: #99c1ff;

  --font-ui: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  --step--1: clamp(0.88rem, 0.82rem + 0.2vw, 0.98rem);
  --step-0: clamp(1.00rem, 0.95rem + 0.35vw, 1.06rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2rem);
  --step-3: clamp(2.25rem, 1.7rem + 2.6vw, 2.75rem);
  --radius: 14px;
  --gap: 16px;
  --wrap: 1120px;
  --shadow: 0 10px 30px rgba(0,0,0,.3);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --fg: #0e1320;
    --muted: #515b6d;
    --line: #e8ecf4;
    --surface: #f7f9fc;
    --card: #ffffff;
    --focus: #1f5eff;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wrap { max-width: var(--wrap); margin-inline: auto; padding: 0 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin:-1px; clip:rect(0 0 0 0); overflow: hidden; }
.skip-link { position: absolute; left: -9999px; top: 0; padding: 8px 12px; background: var(--focus); color: #000; z-index: 1000; }
.skip-link:focus { left: 10px; }

.site-header { position: sticky; top: 0; backdrop-filter: blur(8px); background: color-mix(in oklab, var(--bg), transparent 10%); border-bottom: 1px solid var(--line); z-index: 50; }
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 650; }
.logo { width: 28px; height: 28px; fill: var(--work); }
.brand-text { letter-spacing: 0.2px; }

.primary-nav ul { display: flex; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.primary-nav a { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px; text-decoration: none; color: var(--fg); border: 1px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.primary-nav a:hover { background: var(--surface); border-color: var(--line); }
.primary-nav .tab.is-active { background: var(--surface); border-color: var(--line); }
.primary-nav .utility a, .primary-nav li.utility a { opacity: .85; }
.context-bar { height: 3px; width: 100%; background: var(--work); transition: background .2s ease; }

.site-main { display: block; }
.hero { padding: 72px 0 48px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in oklab, var(--work), transparent 92%), transparent 100%); }
.hero .wrap { max-width: 900px; }
h1 { font-size: var(--step-3); line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.02em; }
.lede { font-size: var(--step-1); color: var(--muted); margin: 0 0 20px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 999px; text-decoration: none; border: 1px solid var(--line); }
.button.primary { background: var(--work); color: #fff; border-color: color-mix(in oklab, var(--work), black 10%); }
.button.ghost { background: transparent; color: var(--fg); }

.split { padding: 48px 0; }
.grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px){ .grid { grid-template-columns: 1fr 1fr; } }

.panel { background: var(--card); border: 1px solid var(--line); padding: 28px; border-radius: var(--radius); box-shadow: var(--shadow); }
.panel h2 { font-size: var(--step-2); margin: 0 0 6px; }
.panel .kicker { margin: 0 0 16px; color: var(--muted); }
.value-list { margin: 0 0 18px; padding: 0 0 0 18px; }
.cards { display: grid; gap: 14px; }
.card { display: block; padding: 18px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in oklab, var(--card), var(--surface) 20%); text-decoration: none; color: var(--fg); transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent), white 30%); }
.card h3 { margin: 0 0 6px; font-size: var(--step-1); }
.card .summary { margin: 0 0 10px; color: var(--muted); }
.badge { display: inline-block; font-size: var(--step--1); padding: 4px 8px; border-radius: 999px; background: color-mix(in oklab, var(--accent), var(--bg) 75%); color: #fff; }

.search { margin: 8px 0 12px; }
.search input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); }
.post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.post a { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--fg); background: color-mix(in oklab, var(--card), var(--surface) 15%); }
.post a:hover { border-color: color-mix(in oklab, var(--work), white 50%); }
.post h3 { margin: 0; font-size: 1.05rem; letter-spacing: -0.01em; }
.post .meta, .post .summary { margin: 0; color: var(--muted); }
.post .external { align-self: center; }

.logos { border-top: 1px solid var(--line); background: var(--surface); }
.logo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 28px 20px; }
.logo-box { display: grid; place-items: center; height: 64px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: .9rem; }

.site-footer { border-top: 1px solid var(--line); }
.footer-links { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-wrap: wrap; gap: 14px; }
.small { color: var(--muted); font-size: .92rem; margin: 0 0 24px; }

.text-link { color: var(--fg); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.text-link:hover { color: var(--accent); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Context coloring */
body[data-context="work"] .context-bar { background: var(--work); }
body[data-context="writing"] .context-bar { background: var(--writing); }
body[data-context="writing"] .logo { fill: var(--writing); }