/* Curtis's public profile. Paper, deep green ink and a single teal accent. */
:root {
  --paper: #f7f7f2;
  --ink: #133136;
  --muted: #4e6461;
  --teal: #08766c;
  --wash: #e8efE9;
  --line: #d4ded6;
  --white: #fff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
.wrap { width: min(1120px, calc(100% - 80px)); margin-inline: auto; }
a { color: var(--teal); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--teal); outline-offset: 5px; border-radius: 2px; }
p { margin: 0 0 1.2em; }
h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.12; letter-spacing: -.04em; }
h1 { font-size: clamp(40px, 4.8vw, 66px); }
h2 { font-size: clamp(30px, 3.2vw, 42px); }
h3 { font-size: 23px; letter-spacing: -.025em; line-height: 1.25; }
strong { font-weight: 650; }
img { display: block; max-width: 100%; }
.skip-link { position: absolute; left: 20px; top: -80px; z-index: 10; padding: 10px 16px; color: var(--white); background: var(--ink); }
.skip-link:focus { top: 10px; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { display: flex; justify-content: space-between; align-items: center; min-height: 88px; gap: 24px; }
.site-name { font-size: 21px; font-weight: 650; letter-spacing: -.04em; color: var(--ink); text-decoration: none; }
.name-dot { color: var(--teal); }
.site-header nav { display: flex; gap: 32px; align-items: center; }
.site-header nav a { padding: 8px 0; color: var(--muted); font-size: 15px; text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--ink); }
.site-header nav a[aria-current] { box-shadow: 0 2px var(--teal); }
.eyebrow { margin: 0 0 20px; font-size: 12px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; color: var(--teal); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 256px; align-items: center; gap: 80px; padding: 90px 0 84px; }
.hero h1 { max-width: 790px; margin-bottom: 28px; }
.hero .intro { max-width: 660px; font-size: 20px; line-height: 1.6; }
.hero .personal-note { max-width: 640px; color: var(--muted); }
.portrait { margin: 0; align-self: start; padding-top: 22px; }
.portrait img { width: 256px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; object-position: 50% 35%; }
.portrait figcaption { margin-top: 16px; font-size: 13px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.button { display: inline-flex; justify-content: center; gap: 18px; align-items: center; min-height: 48px; padding: 11px 20px; border-radius: 6px; background: var(--ink); color: var(--white); text-decoration: none; font-size: 15px; font-weight: 550; }
.button:hover { background: var(--teal); text-decoration: none; }
.text-link { display: inline-block; font-size: 15px; font-weight: 550; }
.section { border-top: 1px solid var(--line); padding: 64px 0; }
.section-heading { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 32px; margin-bottom: 36px; }
.section-heading .eyebrow { padding-top: 9px; }
.section-heading h2 { max-width: 810px; }
.section-heading p:not(.eyebrow) { margin: 20px 0 0; max-width: 740px; color: var(--muted); }
.system-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; }
.panel { padding: 30px; background: var(--wash); border-radius: 10px; }
.panel h3 { margin-bottom: 22px; }
.stack { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0; }
.stack li { padding: 8px 15px; background: rgba(255,255,255,.6); border-radius: 4px; font-size: 15px; }
.stack li:last-child { background: var(--ink); color: var(--white); }
.stack small { display: block; font-size: 12px; color: #d7e7df; }
.panel .small-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.loop { list-style: none; padding: 0; margin: 26px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; counter-reset: loop; }
.loop li { counter-increment: loop; padding: 15px 14px; border: 1px solid #c7d6cd; border-radius: 5px; background: var(--paper); font-size: 16px; font-weight: 600; }
.loop li::before { content: "0" counter(loop); display: block; color: var(--teal); font-size: 11px; font-weight: 500; letter-spacing: .06em; margin-bottom: 4px; }
.panel p { margin-bottom: 0; font-size: 15px; }
.limit-note { padding-top: 17px; border-top: 1px solid #c7d6cd; color: var(--muted); }
.co-design { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; margin-top: 32px; align-items: start; }
.co-design p { margin-bottom: 0; color: var(--muted); font-size: 15px; }
.co-design p:first-child { color: var(--ink); font-size: 20px; font-weight: 550; line-height: 1.4; }
.research-feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.paper-title { margin-bottom: 16px; font-size: 29px; line-height: 1.3; }
.paper-title a { color: var(--ink); text-decoration: none; }
.paper-title a:hover { text-decoration: underline; }
.publication-meta { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.research-feature p { font-size: 16px; }
.method { background: var(--wash); padding: 28px; border-radius: 10px; }
.method-item + .method-item { border-top: 1px solid #c7d6cd; padding-top: 18px; margin-top: 18px; }
.method-item .eyebrow { margin-bottom: 7px; }
.method-item p:last-child { margin: 0; font-size: 15px; }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.team-card { background: var(--wash); border-radius: 10px; padding: 28px; }
.team-card h3 { font-size: 23px; margin-bottom: 5px; }
.team-role { color: var(--teal); font-size: 13px; font-weight: 600; margin-bottom: 20px; }
.team-card p:not(.team-role) { font-size: 15px; line-height: 1.6; margin-bottom: 16px; }
.team-card p:last-child { margin-bottom: 0; }
.wider-team { margin: 20px 0 0; padding: 18px 24px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 14px; }
.background-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.background-grid p { font-size: 16px; }
.background-grid h3 { margin-bottom: 18px; }
.contact-section { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; border-top: 1px solid var(--line); padding: 52px 0 64px; }
.contact-section h2 { font-size: 34px; margin-bottom: 14px; }
.contact-section p { color: var(--muted); max-width: 720px; margin-bottom: 0; }
.contact-section .button { white-space: nowrap; }
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 26px; color: var(--muted); font-size: 13px; }
.footer-inner p { margin: 0; }
.footer-inner div { display: flex; gap: 24px; }
.footer-inner a { color: var(--muted); }
/* Inner pages share the same reading rhythm and navigation. */
.page-header { padding: 72px 0 52px; max-width: 850px; }
.page-header h1 { margin-bottom: 24px; }
.page-header .lead { font-size: 21px; line-height: 1.6; color: var(--muted); margin: 0; }
.page-header .actions { margin-bottom: 0; }
.research-directions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.research-directions--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.direction-index { color: var(--teal); font-size: 12px; margin-bottom: 16px; letter-spacing: .08em; }
.research-directions h3 { margin-bottom: 16px; }
.research-directions p { font-size: 16px; color: var(--muted); margin-bottom: 0; }
.publication-block { max-width: 820px; }
.publication-block .authors { font-size: 15px; color: var(--muted); }
.publication-block .paper-title { font-size: 32px; }
.research-principle { padding: 32px; background: var(--wash); border-radius: 10px; }
.research-principle h2, .research-principle h3 { margin-bottom: 18px; font-size: 23px; letter-spacing: -.025em; line-height: 1.25; }
.research-principle p { margin: 0; max-width: 850px; }
.cv-identity { color: var(--ink); font-size: 21px; font-weight: 600; margin-bottom: 14px; }
.cv-contact { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.cv-section { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 32px; }
.cv-section h2 { font-size: 26px; padding-top: 2px; }
.cv-entry + .cv-entry { margin-top: 30px; }
.cv-entry h3 { font-size: 21px; letter-spacing: -.02em; }
.cv-entry .entry-meta { color: var(--teal); font-size: 14px; margin: 7px 0 10px; }
.cv-entry p:last-child:not(.entry-meta) { margin: 0; font-size: 15px; color: var(--muted); }
.cv-entry ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 15px; }
.cv-entry li + li { margin-top: 4px; }
.cv-publication h3 { font-size: 23px; line-height: 1.35; margin-bottom: 15px; }
.cv-publication p { font-size: 15px; }
.honors { margin: 0; padding-left: 18px; font-size: 16px; }
.honors li + li { margin-top: 10px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) 200px; gap: 40px; }
  .portrait img { width: 200px; }
  .hero h1 { font-size: 48px; }
  .section-heading, .cv-section { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
  .team-grid { gap: 14px; }
  .team-card { padding: 22px; }
  .research-feature { gap: 28px; }
  .contact-section { grid-template-columns: 1fr; gap: 24px; }
  .contact-section .button { justify-self: start; }
}
@media (max-width: 650px) {
  .wrap { width: calc(100% - 40px); }
  body { font-size: 16px; }
  .header-inner { min-height: 76px; gap: 14px; }
  .site-name { font-size: 19px; padding-block: 7px; min-height: 44px; }
  .site-header nav { gap: 21px; }
  .site-header nav a { font-size: 14px; padding-block: 11px; min-height: 44px; }
  a { min-width: 44px; }
  main a:not(.button), .footer-inner a { display: inline-block; padding-block: 10px; min-height: 44px; }
  .hero { grid-template-columns: 1fr; gap: 30px; padding: 46px 0 48px; }
  .hero h1 { font-size: 43px; margin-bottom: 24px; }
  .hero .intro { font-size: 19px; }
  .hero .personal-note { font-size: 16px; }
  .portrait { padding: 0; display: flex; align-items: center; gap: 18px; }
  .portrait img { width: 86px; aspect-ratio: 1; border-radius: 50%; flex: 0 0 86px; }
  .portrait figcaption { margin: 0; max-width: 210px; font-size: 13px; }
  .eyebrow { margin-bottom: 18px; font-size: 11px; }
  .section { padding: 44px 0; }
  .section-heading, .cv-section { grid-template-columns: 1fr; gap: 18px; }
  .section-heading { margin-bottom: 28px; }
  .section-heading .eyebrow { padding: 0; margin: 0; }
  .section-heading h2 { font-size: 32px; }
  .section-heading p:not(.eyebrow) { margin-top: 18px; }
  .system-grid, .research-feature, .team-grid, .background-grid, .co-design, .research-directions { grid-template-columns: 1fr; }
  .system-grid { gap: 16px; }
  .panel { padding: 24px; }
  .co-design { gap: 18px; margin-top: 26px; }
  .research-feature { gap: 24px; }
  .paper-title { font-size: 26px; }
  .method { padding: 24px; }
  .team-card { padding: 20px; }
  .team-grid { gap: 12px; }
  .team-role { margin-bottom: 12px; }
  .team-card p:not(.team-role):not(:last-child) { margin-bottom: 8px; }
  .wider-team { padding: 16px; }
  .background-grid { gap: 32px; }
  .contact-section { padding: 40px 0 48px; }
  .contact-section h2 { font-size: 31px; }
  .footer-inner { align-items: start; flex-direction: column; gap: 12px; padding-block: 24px; }
  .page-header { padding: 46px 0 40px; }
  .page-header h1 { font-size: 43px; }
  .page-header .lead { font-size: 19px; }
  .research-directions { gap: 30px; }
  .direction-index { margin-bottom: 10px; }
  .publication-block .paper-title { font-size: 27px; }
  .research-principle { padding: 24px; }
  .cv-identity { font-size: 19px; }
  .cv-contact { font-size: 14px; }
  .cv-contact a { overflow-wrap: anywhere; }
  .cv-section h2 { font-size: 28px; margin-bottom: 8px; }
}
@media (max-width: 360px) {
  .header-inner { gap: 8px; }
  .site-name { font-size: 18px; }
  .site-header nav { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .site-header, .site-footer, .skip-link { display: none; }
  .wrap { width: 100%; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .page-header, .section { padding-block: 20px; }
  .panel, .team-card, .cv-entry { break-inside: avoid; }
}
