:root {
  --bg:#f7f4ee;
  --surface:#f0ece3;
  --text:#232421;
  --muted:#6c6f68;
  --accent:#5c6f5d;
  --line:rgba(35,36,33,.14);
  --display:"Fraunces", Georgia, serif;
  --body:"DM Sans", Arial, sans-serif;
  --ui:"DM Mono", monospace;
  --radius:16px;
  --shadow:none;
  --max:1160px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.65;
  transition:.3s ease;
}
a { color:inherit; }

.shell {
  width:min(calc(100% - 40px), var(--max));
  margin-inline:auto;
}

.theme-bar {
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}

.theme-bar__inner {
  width:min(calc(100% - 24px), 1400px);
  min-height:58px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:18px;
}

.theme-bar__label,
.meta,.kicker,.eyebrow,.issue,.hero-side-note,.note-label,.chart-title {
  font-family:var(--ui);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.7rem;
}
.theme-bar__label { opacity:.6; white-space:nowrap; }

.theme-buttons {
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.theme-buttons button {
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:9px 12px;
  font:500 .72rem/1 var(--body);
  cursor:pointer;
  white-space:nowrap;
}
.theme-buttons button.is-active,
.theme-buttons button:hover {
  background:var(--text);
  color:var(--bg);
}

.site-header {
  min-height:88px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.brand {
  text-decoration:none;
  font-weight:600;
  letter-spacing:-.03em;
}
nav { display:flex; gap:22px; }
nav a,.footer a { text-decoration:none; font-size:.9rem; }

.hero {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:40px;
  padding:100px 0 130px;
}
.hero-side-note {
  color:var(--accent);
  padding-top:12px;
}
.hero-main { max-width:900px; }
.eyebrow { color:var(--accent); margin-bottom:20px; }
.hero h1,
.feature-card h2,
.project-card h2,
.about h2 {
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:.98;
  margin:0;
}
.hero h1 { font-size:clamp(4rem, 8vw, 8.4rem); }
.hero-copy {
  max-width:650px;
  font-size:1.25rem;
  margin-top:32px;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
  margin-bottom:24px;
}
.kicker { margin:0; color:var(--accent); }
.issue { opacity:.55; }

.feature-card {
  display:grid;
  grid-template-columns:1.3fr .7fr;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.feature-copy {
  padding:clamp(30px,5vw,70px);
}
.feature-card h2,
.project-card h2 {
  font-size:clamp(2.6rem,5vw,5rem);
  margin:12px 0 24px;
}
.margin-note {
  border-left:1px solid var(--line);
  padding:40px 34px;
  background:color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.margin-note span {
  font:500 .7rem/1 var(--ui);
  text-transform:uppercase;
  color:var(--accent);
}
.margin-note p {
  margin-top:14px;
  font-size:.95rem;
}

.writing-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:34px 0 120px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.writing-grid article {
  padding:26px 26px 32px 0;
}
.writing-grid article + article {
  padding-left:26px;
  border-left:1px solid var(--line);
}
.writing-grid h3 {
  font-family:var(--display);
  font-size:1.8rem;
  line-height:1.08;
  margin:10px 0 12px;
  font-weight:500;
  letter-spacing:-.03em;
}

.project-section { margin-bottom:110px; }
.project-card {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:60px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(30px,5vw,65px);
  box-shadow:var(--shadow);
}
.project-actions {
  display:flex;
  gap:20px;
  align-items:center;
  margin-top:28px;
}
.button-link {
  text-decoration:none;
  background:var(--text);
  color:var(--bg);
  padding:13px 18px;
  border-radius:999px;
  font-size:.85rem;
}
.text-link {
  font-size:.9rem;
  text-underline-offset:4px;
}
.chart-wrap { padding:10px 0; }
.chart-title { color:var(--muted); margin-bottom:10px; }
.mini-chart {
  height:280px;
  display:flex;
  align-items:end;
  gap:12px;
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 16px 0;
}
.mini-chart span {
  flex:1;
  height:var(--h);
  background:var(--accent);
}

.note-section {
  padding:80px 0 110px;
  border-top:1px solid var(--line);
}
.note-label { color:var(--accent); }
blockquote {
  margin:25px 0 0;
  max-width:950px;
  font:500 clamp(2.4rem,5vw,4.8rem)/1.05 var(--display);
  letter-spacing:-.04em;
}

.about {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
  padding:90px 0 110px;
  border-top:1px solid var(--line);
}
.about h2 { font-size:clamp(3rem,6vw,6rem); }
.about-copy { max-width:650px; font-size:1.08rem; }

.footer {
  min-height:100px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  font-size:.85rem;
}
.footer div { display:flex; gap:16px; }

.theme-notes {
  position:fixed;
  right:18px;
  bottom:18px;
  background:var(--text);
  color:var(--bg);
  padding:12px 15px;
  border-radius:12px;
  max-width:360px;
  font:.8rem/1.35 var(--body);
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}
.theme-notes strong { display:block; margin-bottom:3px; }

/* 01 Soft Notebook */
body[data-theme="soft"] {
  --bg:#f7f4ee;
  --surface:#f0ece3;
  --text:#232421;
  --muted:#6c6f68;
  --accent:#5c6f5d;
  --line:rgba(35,36,33,.14);
  --display:"Fraunces", Georgia, serif;
  --body:"DM Sans", Arial, sans-serif;
  --ui:"DM Mono", monospace;
  --radius:16px;
  --shadow:none;
}

/* 02 Editorial Notebook */
body[data-theme="editorial"] {
  --bg:#f5f4ef;
  --surface:#e9e7df;
  --text:#151515;
  --muted:#65635f;
  --accent:#334f63;
  --line:rgba(21,21,21,.2);
  --display:"Libre Franklin", Arial, sans-serif;
  --body:"DM Sans", Arial, sans-serif;
  --ui:"DM Mono", monospace;
  --radius:0;
  --shadow:none;
}
body[data-theme="editorial"] .hero {
  grid-template-columns:120px 1fr;
}
body[data-theme="editorial"] .hero h1 {
  text-transform:uppercase;
  letter-spacing:-.06em;
  max-width:1000px;
}
body[data-theme="editorial"] .feature-card {
  grid-template-columns:1fr 1fr;
}
body[data-theme="editorial"] .margin-note {
  background:var(--accent);
  color:#fff;
  border-left:0;
}
body[data-theme="editorial"] .margin-note span {
  color:#fff;
  opacity:.75;
}
body[data-theme="editorial"] .project-card {
  border-top:4px solid var(--accent);
}

/* 03 Scientific Notebook */
body[data-theme="scientific"] {
  --bg:#fbfbf8;
  --surface:#f3f4ef;
  --text:#20231f;
  --muted:#6c716b;
  --accent:#49604d;
  --line:rgba(32,35,31,.16);
  --display:"DM Sans", Arial, sans-serif;
  --body:"DM Sans", Arial, sans-serif;
  --ui:"DM Mono", monospace;
  --radius:4px;
  --shadow:none;
}
body[data-theme="scientific"] {
  background-image:
    linear-gradient(rgba(73,96,77,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73,96,77,.035) 1px, transparent 1px);
  background-size:28px 28px;
}
body[data-theme="scientific"] .hero h1 {
  letter-spacing:-.055em;
}
body[data-theme="scientific"] .feature-card,
body[data-theme="scientific"] .project-card {
  border:1px solid var(--accent);
}
body[data-theme="scientific"] .margin-note {
  background:#edf1ec;
}
body[data-theme="scientific"] .mini-chart span:nth-child(2n) {
  opacity:.55;
}
body[data-theme="scientific"] .writing-grid h3 {
  font-family:var(--body);
  font-weight:600;
  letter-spacing:-.035em;
}

@media (max-width:800px) {
  .hero { grid-template-columns:1fr; gap:16px; padding:70px 0 90px; }
  .hero-side-note { padding-top:0; }
  .feature-card,.project-card,.about { grid-template-columns:1fr; }
  .margin-note { border-left:0; border-top:1px solid var(--line); }
  .writing-grid { grid-template-columns:1fr; }
  .writing-grid article,
  .writing-grid article + article {
    padding:24px 0;
    border-left:0;
  }
  .writing-grid article + article { border-top:1px solid var(--line); }
  .about { gap:30px; }
  .theme-notes { position:static; margin:20px; max-width:none; }
}

@media (max-width:520px) {
  .shell { width:min(calc(100% - 28px), var(--max)); }
  .theme-bar__label { display:none; }
  nav { gap:12px; }
  nav a:nth-child(2) { display:none; }
  .feature-copy,.project-card { padding:24px; }
  .feature-card h2,.project-card h2 { font-size:2.5rem; }
}