:root{
  --paper: #fbf3f6;
  --surface: #f5e4ea;
  --surface-2: #eed3dd;
  --ink: #2a1520;
  --ink-soft: #5e4550;
  --ink-faint: #8f7580;
  --line: rgba(42,21,32,0.14);
  --line-strong: rgba(42,21,32,0.28);
  --accent: #b0245f;
  --accent-strong: #8a1748;
  --accent-2: #8f5f14;
  --accent-2-strong: #6b450a;
  --shadow: 0 1px 2px rgba(42,21,32,0.06);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: #180d13;
    --surface: #23131b;
    --surface-2: #2e1a24;
    --ink: #f6e9ee;
    --ink-soft: #cfb6c1;
    --ink-faint: #957c88;
    --line: rgba(246,233,238,0.14);
    --line-strong: rgba(246,233,238,0.26);
    --accent: #f08ab4;
    --accent-strong: #f7b0c9;
    --accent-2: #d9a252;
    --accent-2-strong: #ecc17c;
    --shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"]{
  --paper: #180d13;
    --surface: #23131b;
    --surface-2: #2e1a24;
    --ink: #f6e9ee;
    --ink-soft: #cfb6c1;
    --ink-faint: #957c88;
    --line: rgba(246,233,238,0.14);
    --line-strong: rgba(246,233,238,0.26);
    --accent: #f08ab4;
    --accent-strong: #f7b0c9;
    --accent-2: #d9a252;
    --accent-2-strong: #ecc17c;
    --shadow: 0 1px 2px rgba(0,0,0,0.4);
}

*{ box-sizing: border-box; }
html{ background: var(--paper); }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--accent); color: var(--paper); }

a{ color: var(--accent-strong); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover{ color: var(--accent); }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap{ max-width: 980px; margin: 0 auto; padding: 0 28px; }
.prose{ max-width: 66ch; }

h1,h2,h3{ font-family: "IBM Plex Serif", ui-serif, Georgia, serif; font-weight: 600; text-wrap: balance; color: var(--ink); margin: 0; }

.eyebrow{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.mono{ font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ---------- topbar ---------- */
.topbar{
  position: sticky; top:0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:56px; }
.topbar-name{ font-family:"IBM Plex Serif",serif; font-weight:600; font-size:1rem; }
.topbar nav{ display:flex; gap:22px; }
.topbar nav a{ font-size:0.85rem; color: var(--ink-soft); text-decoration:none; }
.topbar nav a:hover{ color: var(--accent-strong); }
@media (max-width: 620px){ .topbar nav{ display:none; } }

/* ---------- hero ---------- */
header.hero{ padding: 64px 0 0; border-bottom: 1px solid var(--line); }
.hero-top{ display:flex; flex-wrap:wrap; gap: 24px; justify-content:space-between; align-items:flex-end; }
.hero h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); line-height:1.04; letter-spacing:-0.01em; }
.hero-headline{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px 32px; }
.hero-headline .stat-item{ margin:0; font-family:"IBM Plex Serif",serif; font-weight:600; font-size: clamp(1.1rem, 2.1vw, 1.3rem); line-height:1.35; color: var(--ink); }
.hero-headline .stat-item::before{ content:"\2022"; color: var(--accent); margin-right:0.5em; }
.hero .role{ margin-top:10px; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--accent-strong); font-family:"IBM Plex Serif",serif; font-style:italic; }
.hero-keywords{ margin-top:14px; font-family:"IBM Plex Mono",monospace; font-size:0.8rem; color: var(--ink-faint); }
.founder{ margin:10px 0 0; font-family:"IBM Plex Mono",monospace; font-size:0.8rem; letter-spacing:0.08em; color: var(--ink-faint); }
.founder-photo{ width:160px; height:160px; border-radius:50%; object-fit:cover; border:1px solid var(--line-strong); flex:none; }
.section-head.founder-head{ align-items:center; }
.founder-head h2{ margin-bottom:2px; }
.founder-head .founder{ margin:0; }

.i-mark{ display:inline-block; width:0.56em; vertical-align:-0.22em; }
.i-mark svg{ display:block; width:100%; height:1.18em; overflow:visible; }
.i-mark ellipse, .i-mark polygon{ fill: var(--accent); }
.i-mark line{ stroke: var(--accent); stroke-width:1.6; stroke-linecap:round; }

.megaphone-mark{ display:inline-block; width:8em; vertical-align:-1.35em; margin-left:0.05em; transform: scaleX(-1); }
.megaphone-mark svg{ display:block; width:100%; height:3em; overflow:visible; }
.megaphone-mark polygon, .megaphone-mark rect{ fill: var(--accent); }
.megaphone-mark path{ stroke: var(--accent); fill:none; stroke-width:1.1; stroke-linecap:round; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.contact-block{ text-align:right; font-family:"IBM Plex Mono",monospace; font-size:0.82rem; color: var(--ink-soft); line-height:1.9; }
.contact-block a{ color: var(--ink-soft); text-decoration:none; }
.contact-block a:hover{ color: var(--accent-strong); }
@media (max-width: 620px){ .contact-block{ text-align:left; } }

/* ---------- sections ---------- */
section{ padding: 56px 0; border-bottom: 1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
.section-head{ display:flex; align-items:baseline; gap:16px; margin-bottom: 28px; }
.section-head h2{ font-size: 1.5rem; }

.summary p{ margin:0 0 16px; color: var(--ink-soft); }
.summary p:last-child{ margin-bottom:0; }
.summary strong{ color: var(--ink); font-weight:600; }

/* competencies */
.comp-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.comp-card{ background: var(--surface); padding: 22px 24px; }
.comp-card h3{ font-family:"IBM Plex Sans",sans-serif; font-weight:600; font-size:0.95rem; color: var(--accent-strong); margin-bottom:10px; }
.comp-card .tags{ display:flex; flex-wrap:wrap; gap:6px 8px; }
.comp-card .tags span{ font-family:"IBM Plex Mono",monospace; font-size:0.74rem; color: var(--ink-soft); background: var(--surface-2); padding:3px 8px; border-radius:3px; }
@media (max-width: 700px){ .comp-grid{ grid-template-columns: 1fr; } }

/* AI statement */
.ai-quote{
  margin: 0 0 24px;
  padding-left: 24px;
  border-left: 3px solid var(--accent);
  font-family: "IBM Plex Serif", serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 66ch;
}

/* services + contact */
.lede{ margin:0 0 28px; color: var(--ink-soft); font-size:1.05rem; }
.eng-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--line); border:1px solid var(--line); margin-bottom:36px; }
.eng-card{ background: var(--surface); padding: 24px; }
.eng-card h3{ font-size:1.1rem; margin:6px 0 8px; }
.eng-card p:last-child{ margin:0; color: var(--ink-soft); font-size:0.93rem; }
.cap-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:28px; margin-bottom:28px; }
.cap-group h3{ font-family:"IBM Plex Sans",sans-serif; font-size:0.95rem; color: var(--accent-strong); padding-bottom:8px; border-bottom:1px solid var(--line-strong); margin-bottom:10px; }
.cap-group ul{ margin:0; padding:0; list-style:none; color: var(--ink-soft); font-size:0.92rem; }
.cap-group li{ padding:5px 0; }
.scope-note{ font-size:0.88rem; color: var(--ink-faint); font-style:italic; margin:0 0 20px; }
@media (max-width: 800px){ .eng-grid, .cap-grid{ grid-template-columns: 1fr; } }
.cta{ display:inline-block; padding:12px 24px; background: var(--accent); color: var(--paper); text-decoration:none; font-weight:600; border-radius:3px; }
.cta:hover{ background: var(--accent-strong); color: var(--paper); }
.cta .i-mark ellipse, .cta .i-mark polygon{ fill: var(--paper); }
.cta .i-mark line{ stroke: var(--paper); }

/* featured work */
.work-grid{ display:flex; flex-direction:column; gap:1px; background: var(--line); border:1px solid var(--line); }
.work-card{ background: var(--surface); padding:30px; display:flex; flex-direction:column; gap:14px; }
.work-card h3{ font-size:1.25rem; }
.work-card p{ margin:0; color: var(--ink-soft); font-size:0.97rem; }
.work-tags{ display:flex; flex-wrap:wrap; gap:6px 8px; }
.work-tags span{ font-family:"IBM Plex Mono",monospace; font-size:0.72rem; color: var(--ink-soft); background: var(--surface-2); padding:3px 8px; border-radius:3px; }
.work-links{ display:flex; gap:20px; margin-top:auto; padding-top:4px; }
.work-links a{ font-family:"IBM Plex Mono",monospace; font-size:0.82rem; font-weight:600; color: var(--accent-strong); text-decoration:none; }
.work-links a:hover{ color: var(--accent); }

footer{ padding: 40px 0 60px; }
footer .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; }
footer .fname{ font-family:"IBM Plex Serif",serif; font-weight:600; }
footer .fmeta{ font-family:"IBM Plex Mono",monospace; font-size:0.78rem; color: var(--ink-faint); }
footer a{ text-decoration:none; }

@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.in{ opacity:1; transform:none; }
}

/* ---------- blog ---------- */
.blog-lede{ color: var(--ink-soft); font-size:1.05rem; max-width:66ch; margin:0 0 36px; }
.post-list{ display:flex; flex-direction:column; gap:1px; background: var(--line); border:1px solid var(--line); }
.post-card{ background: var(--surface); padding:26px 28px; display:block; text-decoration:none; color: inherit; }
.post-card:hover{ background: var(--surface-2); }
.post-card .post-date{ font-family:"IBM Plex Mono",monospace; font-size:0.78rem; color: var(--ink-faint); letter-spacing:0.03em; }
.post-card h3{ font-size:1.15rem; margin:6px 0 8px; color: var(--ink); }
.post-card p{ margin:0; color: var(--ink-soft); font-size:0.95rem; }
.post-card .post-topic{ display:inline-block; margin-top:10px; font-family:"IBM Plex Mono",monospace; font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase; color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 12%, transparent); padding:2px 8px; border-radius:3px; }
.post-coming-soon{ background: var(--surface); padding:26px 28px; opacity:0.6; }
.post-coming-soon .post-date{ font-family:"IBM Plex Mono",monospace; font-size:0.78rem; color: var(--ink-faint); }
.post-coming-soon h3{ font-size:1.15rem; margin:6px 0 8px; }
.post-coming-soon p{ margin:0; color: var(--ink-soft); font-size:0.95rem; font-style:italic; }

article.post{ padding: 48px 0 64px; }
.post-header{ margin-bottom:40px; border-bottom:1px solid var(--line); padding-bottom:32px; }
.post-header .eyebrow{ margin-bottom:14px; display:block; }
.post-header h1{ font-size: clamp(1.8rem, 4vw, 2.6rem); line-height:1.15; margin-bottom:14px; }
.post-header .post-meta{ font-family:"IBM Plex Mono",monospace; font-size:0.82rem; color: var(--ink-faint); }
.post-body{ max-width:68ch; color: var(--ink-soft); font-size:1.05rem; line-height:1.75; }
.post-body h2{ font-size:1.35rem; color: var(--ink); margin:40px 0 16px; }
.post-body p{ margin:0 0 20px; }
.post-body ul, .post-body ol{ margin:0 0 20px; padding-left:22px; }
.post-body li{ margin-bottom:8px; }
.post-body strong{ color: var(--ink); font-weight:600; }
.post-body blockquote{ margin:28px 0; padding-left:20px; border-left:3px solid var(--accent); font-style:italic; color: var(--ink); }
.post-footer{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
.back-link{ font-family:"IBM Plex Mono",monospace; font-size:0.85rem; }