:root {
  --paper: #f5f1e8;
  --paper-bright: #fbfaf6;
  --ink: #15221f;
  --muted: #5e6864;
  --line: rgba(21, 34, 31, 0.16);
  --forest: #14352f;
  --forest-2: #1e5147;
  --sage: #a8bcad;
  --amber: #c97836;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --content: 1180px;
}

* { box-sizing: border-box; }

html { background: var(--paper); scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 8%, rgba(168, 188, 173, 0.19), transparent 27rem),
    var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

.navbar {
  min-height: 78px;
  padding: 0 5vw;
  background: rgba(245, 241, 232, 0.92) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.navbar-brand {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.navbar-nav .nav-link {
  color: var(--ink) !important;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#quarto-content { padding: 0; }

main.content { margin: 0 !important; padding: 0 !important; max-width: none !important; }

.hero {
  width: min(var(--content), calc(100% - 10vw));
  min-height: 690px;
  margin: 0 auto;
  padding: 110px 0 90px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(350px, 0.8fr);
  gap: clamp(60px, 8vw, 110px);
  align-items: center;
}

.eyebrow,
.section-label,
.map-kicker {
  margin: 0 0 20px;
  color: var(--forest-2);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 800px;
  margin: 0 0 26px;
  font-family: var(--serif);
  font-size: clamp(3.1rem, 6.4vw, 6.3rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 720px;
  color: #394641;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.5;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0; }

.button {
  display: inline-flex;
  min-height: 50px;
  padding: 12px 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--forest);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 750;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.button:hover { transform: translateY(-2px); }
.button.primary { color: white; background: var(--forest); }
.button.secondary { color: var(--forest); background: transparent; }
.button.secondary:hover { color: white; background: var(--forest); }

.identity-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: var(--muted);
  font-size: 0.82rem;
}

.system-map {
  position: relative;
  padding: 28px;
  color: white;
  overflow: hidden;
  background: var(--forest);
  border-radius: 3px 42px 3px 3px;
  box-shadow: 0 28px 70px rgba(20, 53, 47, 0.18);
}

.system-map::after {
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 260px;
  height: 260px;
  content: "";
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 36px rgba(255,255,255,0.035), 0 0 0 72px rgba(255,255,255,0.025);
}

.map-kicker { color: #c4d5c8; }

.map-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}

.map-step > span { color: #93b5a5; font-family: var(--serif); font-style: italic; }
.map-step strong { display: block; font-family: var(--serif); font-size: 1.04rem; line-height: 1.25; }
.map-step small { color: #b9c9c1; font-size: 0.73rem; letter-spacing: 0.08em; text-transform: uppercase; }
.map-step.active strong { color: #f4c797; }

.section-wrap {
  width: min(var(--content), calc(100% - 10vw));
  margin: 0 auto;
  padding: 110px 0;
}

.section-wrap > h2,
.closing-band > h2 {
  max-width: 760px;
  margin: 0 0 44px;
  font-family: var(--serif);
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.featured-project {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  border-top: 2px solid var(--forest);
  border-bottom: 1px solid var(--line);
}

.project-main { padding: 40px 7% 46px 0; }
.project-main h3 { max-width: 780px; margin: 24px 0; font-family: var(--serif); font-size: clamp(1.65rem, 2.6vw, 2.55rem); line-height: 1.2; }
.project-main > p { max-width: 800px; color: #46524e; }

.status-row { display: flex; flex-wrap: wrap; gap: 8px; }
.status {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}
.status.development { color: #713914; background: #f5d9be; }
.status.neutral { color: #40504b; background: #dfe7e0; }
.status.conceptual { color: #43524d; background: #e5e8df; }

.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 34px; }
.metric-grid > div { padding: 18px; background: rgba(255,255,255,0.46); border: 1px solid var(--line); }
.metric-grid span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 0.69rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.metric-grid strong { font-family: var(--serif); font-size: 1rem; }

.project-aside { padding: 38px 0 44px 36px; border-left: 1px solid var(--line); }
.aside-title { margin: 0; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; }
.project-aside ul { padding-left: 1.1rem; color: #46524e; font-size: 0.9rem; }
.project-aside li { margin-bottom: 10px; }
.aside-note { padding-top: 18px; color: var(--forest-2); border-top: 1px solid var(--line); font-size: 0.83rem; font-weight: 650; }

.foundations { padding-top: 60px; }
.paper-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.paper-card { min-height: 450px; padding: 30px; display: flex; flex-direction: column; background: var(--paper-bright); border: 1px solid var(--line); }
.card-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.paper-number { color: var(--forest-2); font-family: var(--serif); font-size: 1.4rem; font-style: italic; }
.paper-card h3 { margin: 54px 0 5px; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.06; letter-spacing: -0.035em; }
.paper-subtitle { min-height: 66px; margin: 0 0 24px; color: var(--muted); font-family: var(--serif); font-style: italic; line-height: 1.35; }
.paper-card > p:not(.paper-subtitle) { color: #46524e; }
.text-link { margin-top: auto; padding-top: 28px; color: var(--forest-2); border-top: 1px solid var(--line); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.text-link span { float: right; font-size: 1.1rem; }

.closing-band { padding: 100px max(5vw, calc((100vw - var(--content)) / 2)); color: white; background: var(--forest); }
.closing-band > p:not(.section-label) { max-width: 780px; color: #c9d6d0; font-family: var(--serif); font-size: 1.2rem; }
.section-label.light { color: #a8c0b5; }
.closing-links { display: flex; gap: 28px; margin-top: 38px; }
.closing-links a { color: white; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.nav-footer { padding: 32px 5vw; color: var(--muted); background: var(--paper); border-top: 0; font-size: 0.75rem; }

.quarto-search-button { color: var(--ink) !important; }

.page-intro {
  width: min(var(--content), calc(100% - 10vw));
  margin: 0 auto;
  padding: 108px 0 92px;
  border-bottom: 1px solid var(--line);
}

.page-intro h1 {
  max-width: 940px;
  margin: 0 0 28px;
  font-family: var(--serif);
  font-size: clamp(3rem, 6.4vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.page-intro > p:not(.eyebrow):not(.about-role) {
  max-width: 830px;
  color: #3f4c47;
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.8vw, 1.45rem);
}

.compact-intro { padding-bottom: 70px; }
.compact-intro h1 { font-size: clamp(3.4rem, 7vw, 6.7rem); }

.page-meta { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 34px; color: var(--muted); font-size: 0.77rem; font-weight: 650; }

.content-section {
  width: min(var(--content), calc(100% - 10vw));
  margin: 0 auto;
  padding: 100px 0;
}

.content-section > h2 {
  max-width: 850px;
  margin: 0 0 32px;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.3vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.content-section > p:not(.section-label):not(.lead-question) { max-width: 850px; color: #46524e; }

.muted-section { position: relative; }
.muted-section::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: calc(50% - 50vw);
  bottom: 0;
  left: calc(50% - 50vw);
  content: "";
  background: rgba(255,255,255,0.35);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.three-function-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 50px; }
.function-card { min-height: 345px; padding: 26px; display: flex; flex-direction: column; background: var(--paper-bright); border: 1px solid var(--line); }
.function-card.accent { color: white; background: var(--forest); border-color: var(--forest); }
.function-index { color: var(--forest-2); font-family: var(--serif); font-size: 1.25rem; font-style: italic; }
.function-card.accent .function-index { color: #a8c0b5; }
.function-card h3 { margin: 50px 0 12px; font-family: var(--serif); font-size: 2rem; }
.function-card > p:not(.function-risk) { color: var(--muted); }
.function-card.accent > p:not(.function-risk) { color: #c9d6d0; }
.function-risk { margin-top: auto; padding-top: 18px; color: var(--forest-2); border-top: 1px solid var(--line); font-size: 0.8rem; font-weight: 650; }
.function-card.accent .function-risk { color: #f3c08b; border-color: rgba(255,255,255,0.15); }

.workstream-list { border-top: 2px solid var(--forest); }
.workstream { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.workstream-number { color: var(--forest-2); font-family: var(--serif); font-size: 2.4rem; font-style: italic; }
.workstream h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 1.6rem; }
.workstream p { max-width: 760px; margin: 0 0 12px; color: #46524e; }
.workstream span { color: var(--forest-2); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

.gate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 42px; }
.gate-grid > div { min-height: 150px; padding: 22px; background: rgba(255,255,255,0.45); border: 1px solid var(--line); }
.gate-grid strong { display: block; margin-bottom: 12px; font-family: var(--serif); font-size: 1.22rem; }
.gate-grid span { color: var(--muted); font-size: 0.84rem; }

.page-cta { padding: 78px max(5vw, calc((100vw - var(--content)) / 2)); display: flex; gap: 60px; align-items: flex-end; justify-content: space-between; color: white; background: var(--forest); }
.page-cta h2 { max-width: 760px; margin: 0; font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.08; }
.button.inverse { flex: 0 0 auto; color: var(--forest); background: var(--paper-bright); border-color: var(--paper-bright); }

.publication-list { padding-bottom: 45px; }
.publication-entry { display: grid; grid-template-columns: 120px 1fr; gap: 40px; padding: 58px 0; border-top: 1px solid var(--line); }
.publication-year { color: var(--forest-2); font-family: var(--serif); font-size: 1.2rem; font-style: italic; }
.publication-body h2 { margin: 24px 0 5px; font-family: var(--serif); font-size: clamp(2.1rem, 4vw, 3.8rem); line-height: 1.03; letter-spacing: -0.04em; }
.publication-subtitle { max-width: 880px; margin: 0 0 25px; color: var(--muted); font-family: var(--serif); font-size: 1.25rem; font-style: italic; }
.publication-body > p:not(.publication-subtitle) { max-width: 850px; color: #46524e; }
.publication-facts { display: flex; flex-wrap: wrap; gap: 20px 48px; margin: 30px 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.publication-facts span { color: var(--muted); font-size: 0.8rem; }
.publication-facts strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 0.67rem; letter-spacing: 0.09em; text-transform: uppercase; }
.publication-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.citation-box { margin-top: 28px; padding: 16px 0; border-top: 1px solid var(--line); }
.citation-box summary { cursor: pointer; color: var(--forest-2); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.citation-box p { max-width: 880px; color: var(--muted); font-size: 0.86rem; }
.integrity-note { width: min(var(--content), calc(100% - 10vw)); margin: 0 auto 100px; padding: 24px; color: #45514d; background: #e6e7dc; border-left: 3px solid var(--forest-2); font-size: 0.86rem; }

.lead-question { max-width: 900px; margin: 22px 0 50px; font-family: var(--serif); font-size: clamp(1.55rem, 2.8vw, 2.5rem); line-height: 1.3; }
.project-design-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 36px 0 70px; }
.design-block { min-height: 165px; padding: 22px; background: var(--paper-bright); border: 1px solid var(--line); }
.design-block span, .future-grid span { display: block; margin-bottom: 24px; color: var(--forest-2); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.design-block p { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.4; }

.timeline { margin: 38px 0 60px; border-top: 2px solid var(--forest); }
.timeline-item { display: grid; grid-template-columns: 100px 1fr; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.timeline-item > span { color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.timeline-item.done > span { color: var(--forest-2); }
.timeline-item.current > span { color: #9a4d1a; }
.timeline-item strong { font-family: var(--serif); font-size: 1.22rem; }
.timeline-item p { max-width: 760px; margin: 5px 0 0; color: var(--muted); }
.collaboration-box { padding: 32px; display: flex; gap: 40px; align-items: center; justify-content: space-between; background: #e5e9e0; }
.collaboration-box h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 1.6rem; }
.collaboration-box p:not(.section-label) { max-width: 760px; margin-bottom: 0; color: var(--muted); }
.future-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.future-grid > div { min-height: 280px; padding: 24px; background: var(--paper-bright); border: 1px solid var(--line); }
.future-grid h3 { margin: 0 0 15px; font-family: var(--serif); font-size: 1.55rem; }
.future-grid p { color: var(--muted); font-size: 0.88rem; }

.about-intro { display: grid; grid-template-columns: 172px minmax(0, 1fr) max-content; gap: 38px; align-items: end; }
.about-photo img {
  display: block;
  width: 172px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px 28px 2px 2px;
  box-shadow: 0 18px 42px rgba(20, 53, 47, 0.12);
}
.about-title h1 { margin-bottom: 12px; }
.about-role { color: var(--muted); font-family: var(--serif); font-size: 1.18rem; }
.about-contact { display: flex; flex-direction: column; gap: 7px; padding-bottom: 12px; text-align: right; font-size: 0.82rem; font-weight: 700; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, 0.5fr); gap: 90px; }
.about-main h2 { margin: 0 0 18px; font-family: var(--serif); font-size: 2.15rem; }
.about-main h2:not(:first-child) { margin-top: 58px; }
.about-main p { color: #46524e; font-family: var(--serif); font-size: 1.08rem; }
.about-aside { align-self: start; padding: 26px; background: var(--paper-bright); border-top: 3px solid var(--forest); }
.about-aside ul { padding-left: 1.1rem; color: var(--muted); font-size: 0.86rem; }
.about-aside li { margin-bottom: 14px; }
.ai-disclosure { padding-top: 60px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .three-function-grid, .gate-grid, .future-grid { grid-template-columns: 1fr; }
  .function-card { min-height: 270px; }
  .page-cta, .collaboration-box { align-items: flex-start; flex-direction: column; }
  .publication-entry { grid-template-columns: 1fr; gap: 10px; }
  .publication-year { padding-bottom: 8px; }
  .about-intro { grid-template-columns: 150px 1fr; align-items: end; }
  .about-photo img { width: 150px; }
  .about-contact { grid-column: 1 / -1; }
  .about-contact { text-align: left; }
  .about-grid { grid-template-columns: 1fr; gap: 50px; }
}

@media (max-width: 900px) {
  .hero { min-height: auto; grid-template-columns: 1fr; padding: 80px 0 60px; }
  .hero h1 { max-width: 720px; }
  .system-map { max-width: 620px; }
  .featured-project { grid-template-columns: 1fr; }
  .project-main { padding-right: 0; }
  .project-aside { padding: 28px 0; border-top: 1px solid var(--line); border-left: 0; }
  .paper-grid { grid-template-columns: 1fr; }
  .paper-card { min-height: 390px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .navbar { min-height: 66px; padding: 0 20px; }
  .hero, .section-wrap { width: calc(100% - 40px); }
  .hero { padding-top: 64px; gap: 38px; }
  .hero h1 { font-size: clamp(2.65rem, 14vw, 4rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .system-map { margin: 0 -4px; padding: 22px; border-radius: 2px 28px 2px 2px; }
  .section-wrap { padding: 78px 0; }
  .metric-grid { grid-template-columns: 1fr; }
  .paper-card { min-height: 0; padding: 24px; }
  .paper-card h3 { margin-top: 38px; }
  .paper-subtitle { min-height: 0; }
  .closing-band { padding: 78px 20px; }
  .closing-links { align-items: flex-start; flex-direction: column; gap: 16px; }
  .page-intro, .content-section, .integrity-note { width: calc(100% - 40px); }
  .page-intro { padding: 70px 0 58px; }
  .content-section { padding: 72px 0; }
  .page-cta { padding: 64px 20px; }
  .workstream { grid-template-columns: 48px 1fr; gap: 14px; }
  .project-design-grid { grid-template-columns: 1fr; }
  .timeline-item { grid-template-columns: 68px 1fr; gap: 14px; }
  .publication-actions { align-items: stretch; flex-direction: column; }
  .publication-actions .button { width: 100%; }
  .about-intro { grid-template-columns: 1fr; gap: 28px; }
  .about-photo img { width: 138px; }
  .about-contact { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}