@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#EDEEE7; --paper-raised:#F8F8F3;
  --ink:#201D18; --ink-soft:#5A5544; --ink-faint:#8A8471;
  --accent:#8A5D1E; --accent-bg:rgba(138,93,30,0.10);
  --accent2:#2F5C55; --accent2-bg:rgba(47,92,85,0.10);
  --line:#D2CDBC; --line-strong:#B7B097;
  --shadow: 0 1px 2px rgba(32,29,24,0.06), 0 8px 24px -12px rgba(32,29,24,0.18);
  --radius: 3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1B1914; --paper-raised:#232019;
    --ink:#ECE8DC; --ink-soft:#B3AC97; --ink-faint:#7E7869;
    --accent:#D9AC5C; --accent-bg:rgba(217,172,92,0.12);
    --accent2:#72B7A6; --accent2-bg:rgba(114,183,166,0.12);
    --line:#39362B; --line-strong:#4C4838;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
  }
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Public Sans", -apple-system, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset:3px; }
a:hover{ text-decoration-color: var(--accent); }
h1,h2,h3{ font-family:"Arvo", Georgia, serif; font-weight:700; text-wrap:balance; margin:0; color:var(--ink); }
.mono{ font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace; }
.eyebrow{ font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); font-weight:500; }
.shell{ max-width:1020px; margin:0 auto; padding:0 28px; }

/* header */
header.site{ border-bottom:1px solid var(--line); padding:20px 0; }
header.site .shell{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.logo{ font-family:"Arvo", Georgia, serif; font-weight:700; font-size:1.15rem; letter-spacing:-0.01em; color:var(--ink); text-decoration:none; }
.logo span{ color:var(--accent); }
nav.main{ display:flex; gap:28px; font-family:"IBM Plex Mono", monospace; font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; }
nav.main a{ color:var(--ink-soft); text-decoration:none; }
nav.main a:hover, nav.main a.active{ color:var(--accent); }

/* hero */
.hero{ padding:80px 0 60px; border-bottom:1px solid var(--line); }
.hero h1{ font-size:clamp(2.1rem, 4.6vw, 3.2rem); line-height:1.08; max-width:18ch; }
.hero .lede{ margin-top:20px; max-width:60ch; font-size:1.15rem; color:var(--ink-soft); line-height:1.55; }
.hero .cta-row{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }

.btn{ display:inline-block; font-family:"IBM Plex Mono", monospace; font-size:13px; letter-spacing:0.04em; text-transform:uppercase; padding:12px 22px; border-radius:var(--radius); text-decoration:none; font-weight:500; }
.btn-primary{ background:var(--ink); color:var(--paper-raised); }
.btn-primary:hover{ background:var(--accent); }
.btn-secondary{ background:transparent; border:1px solid var(--line-strong); color:var(--ink); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }

/* sections */
section.block{ padding:56px 0; border-bottom:1px solid var(--line); }
section.block:last-of-type{ border-bottom:none; }
.section-head{ margin-bottom:26px; }
.section-head h2{ font-size:1.7rem; margin-top:8px; max-width:22ch; }
.section-intro{ max-width:66ch; color:var(--ink-soft); margin-top:14px; font-size:1.02rem; }

.grid3{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:30px; }
.grid3 .card{ background:var(--paper-raised); padding:24px 22px; }
.grid3 .card h3{ font-size:1.05rem; margin-bottom:10px; }
.grid3 .card p{ margin:0; color:var(--ink-soft); font-size:0.95rem; }
.grid3 .card .num{ font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--accent); display:block; margin-bottom:10px; }

.callout{ background:var(--accent-bg); border:1px solid var(--accent); border-radius:var(--radius); padding:22px 26px; margin-top:28px; }
.callout p{ margin:0; color:var(--ink); font-size:1rem; max-width:70ch; }
.callout strong{ font-weight:700; }

.stat-row{ display:flex; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:30px; flex-wrap:wrap; }
.stat{ flex:1; min-width:160px; background:var(--paper-raised); padding:20px 18px; }
.stat .n{ font-family:"Arvo", Georgia, serif; font-size:1.7rem; color:var(--accent); }
.stat .l{ font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px; }

.timeline-list{ margin-top:28px; display:flex; flex-direction:column; gap:0; }
.timeline-list .step{ display:grid; grid-template-columns:32px 1fr; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
.timeline-list .step:first-child{ border-top:none; }
.timeline-list .step .idx{ font-family:"IBM Plex Mono", monospace; color:var(--accent); font-size:13px; padding-top:2px; }
.timeline-list .step h4{ font-family:"Public Sans"; font-weight:600; font-size:1rem; margin:0 0 4px; color:var(--ink); }
.timeline-list .step p{ margin:0; color:var(--ink-soft); font-size:0.94rem; max-width:60ch; }

.quote-block{ border-left:3px solid var(--accent2); background:var(--accent2-bg); padding:16px 20px; margin-top:26px; border-radius:2px; }
.quote-block p{ margin:0; color:var(--ink); font-size:0.96rem; }

.contact-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px; margin-top:30px; max-width:560px; }
.contact-card .flabel{ font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px; }
.contact-card .email-link{ font-family:"Arvo", Georgia, serif; font-size:1.3rem; color:var(--ink); text-decoration:none; display:inline-block; margin-bottom:8px; }
.contact-card .email-link:hover{ color:var(--accent); }
.contact-card p{ color:var(--ink-soft); margin:10px 0 0; font-size:0.95rem; }

footer.site{ padding:40px 0; color:var(--ink-faint); font-size:0.82rem; }
footer.site .shell{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
footer.site a{ color:var(--ink-faint); }

nav.main{ align-items:center; }

/* hero with visual */
.hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:center; }
.hero-visual{ display:flex; align-items:center; justify-content:center; }
.hero-visual svg{ width:100%; max-width:340px; height:auto; }
@media (max-width: 760px){ .hero-grid{ grid-template-columns:1fr; } .hero-visual{ order:-1; margin-bottom:12px; } .hero-visual svg{ max-width:220px; } }

/* icon badges */
.icon-badge{ width:52px; height:52px; border-radius:50%; background:var(--accent-bg); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.icon-badge svg{ width:26px; height:26px; stroke:var(--accent); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.grid3 .card.icon-card{ padding:26px 22px 24px; }

/* element tiles (periodic-table style) */
.tile-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:12px; margin-top:28px; }
.element-tile{ position:relative; overflow:hidden; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:16px; text-align:left; transition:border-color .15s, transform .15s; text-decoration:none; display:block; }
.element-tile:hover{ border-color:var(--accent); transform:translateY(-2px); }
.element-tile .at-num{ font-family:"IBM Plex Mono", monospace; font-size:10px; color:var(--ink-faint); }
.element-tile .symbol{ font-family:"Arvo", Georgia, serif; font-size:2.1rem; color:var(--accent); margin:6px 0 4px; line-height:1; }
.element-tile .name{ font-family:"IBM Plex Mono", monospace; font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; }
.element-tile.featured{ border-color:var(--accent); background:var(--accent-bg); }

.element-tile.tile-soon{ cursor:default; }
.element-tile.tile-soon:hover{ transform:none; border-color:var(--line); }
.element-tile.tile-soon .tile-content{ transition:opacity .15s ease, filter .15s ease; }
.element-tile.tile-soon:hover .tile-content{ opacity:0.2; filter:grayscale(100%); }
.element-tile .soon-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s ease; pointer-events:none;
  font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-faint);
}
.element-tile.tile-soon:hover .soon-overlay{ opacity:1; }

.tile-hero{ background:var(--paper-raised); border:1px solid var(--accent); border-radius:var(--radius); padding:26px 30px; width:170px; text-align:left; box-shadow:var(--shadow); }
.tile-hero .at-num{ font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--ink-faint); }
.tile-hero .symbol{ font-family:"Arvo", Georgia, serif; font-size:4rem; color:var(--accent); line-height:1; margin:6px 0; }
.tile-hero .name{ font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; }
.tile-hero .mass{ font-family:"IBM Plex Mono", monospace; font-size:10px; color:var(--ink-faint); margin-top:4px; }

/* concentration bar chart */
.bar-chart{ margin-top:30px; }
.bar-row{ display:grid; grid-template-columns:140px 1fr 70px; align-items:center; gap:14px; margin-bottom:12px; font-size:0.9rem; }
.bar-row .bar-label{ color:var(--ink-soft); }
.bar-track{ height:14px; background:var(--line); border-radius:8px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--accent); border-radius:8px; }
.bar-row .bar-val{ font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--ink-faint); text-align:right; }

/* illustration color utilities (so inline SVGs follow light/dark theme) */
.illus-line{ stroke:var(--line-strong); fill:none; }
.illus-accent{ stroke:var(--accent); fill:none; }
.illus-accent2{ stroke:var(--accent2); fill:none; }
.illus-dot{ fill:var(--accent); stroke:none; }
.illus-dot2{ fill:var(--accent2); stroke:none; }
.illus-soft{ stroke:var(--ink-faint); fill:none; }

/* headshot / avatar */
.profile-row{ display:flex; gap:28px; align-items:flex-start; margin-top:28px; flex-wrap:wrap; }
.avatar{ width:120px; height:120px; border-radius:50%; flex-shrink:0; background:var(--accent-bg); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar .initials{ font-family:"Arvo", Georgia, serif; font-size:2.2rem; color:var(--accent); }
.profile-text{ flex:1; min-width:240px; }
.profile-text h3{ font-size:1.1rem; margin-bottom:4px; }
.profile-text .role{ font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; display:block; }
.profile-text p{ color:var(--ink-soft); margin:0 0 10px; font-size:0.95rem; max-width:56ch; }
.placeholder-note{ font-family:"IBM Plex Mono", monospace; font-size:10.5px; color:var(--ink-faint); margin-top:6px; display:block; }

@media (max-width: 640px){
  .shell{ padding:0 18px; }
  .hero{ padding:56px 0 44px; }
  header.site .shell{ flex-direction:column; align-items:flex-start; }
  nav.main{ flex-wrap:wrap; gap:16px 22px; }
}