:root{
  --paper:#F3F1EA;
  --surface:#E9E6D9;
  --surface-2:#DEDACB;
  --ink:#1B1A16;
  --ink-soft:#655F51;
  --ink-faint:#8B8574;
  --line:#CFC9B7;
  --accent:#2E6B4E;
  --accent-ink:#F3F1EA;
  --accent-soft:#DCE6DA;
  --shadow: 0 1px 0 rgba(27,26,22,0.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#131310;
    --surface:#1C1B16;
    --surface-2:#25231C;
    --ink:#F1EEE2;
    --ink-soft:#A79F8B;
    --ink-faint:#726B5B;
    --line:#332F25;
    --accent:#74C79A;
    --accent-ink:#0F1A14;
    --accent-soft:#20301F;
    --shadow: 0 1px 0 rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"]{
  --paper:#131310;
  --surface:#1C1B16;
  --surface-2:#25231C;
  --ink:#F1EEE2;
  --ink-soft:#A79F8B;
  --ink-faint:#726B5B;
  --line:#332F25;
  --accent:#74C79A;
  --accent-ink:#0F1A14;
  --accent-soft:#20301F;
  --shadow: 0 1px 0 rgba(0,0,0,0.4);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans SC","IBM Plex Mono",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent); color:var(--accent-ink); }

.mono{ font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

a{ color:inherit; }
h1,h2,h3{ font-family:"Noto Serif SC",serif; font-weight:700; margin:0; text-wrap:balance; }

.wrap{
  max-width:920px;
  margin:0 auto;
  padding-left:28px;
  padding-right:28px;
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.logo{
  font-family:"Noto Serif SC",serif;
  font-weight:900;
  font-size:1.15rem;
  letter-spacing:.01em;
}
.nav-right{ display:flex; align-items:center; gap:18px; }
.status-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:100px;
  padding:5px 12px 5px 10px;
}
.status-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.lang-btn{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; letter-spacing:.06em;
  background:none; border:1px solid var(--line); border-radius:100px;
  color:var(--ink); padding:5px 12px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.lang-btn:hover{ border-color:var(--ink-faint); }
.lang-btn:focus-visible, a:focus-visible, .status-pill:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- section scaffolding ---------- */
section{ padding:76px 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:40px;
}
.section-num{ font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--ink-faint); }

/* ---------- hero ---------- */
.hero{ padding-top:64px; padding-bottom:64px; }
.hero-eyebrow{ margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.hero-eyebrow::before{
  content:""; width:26px; height:1px; background:var(--ink-faint);
}
.hero h1{
  font-size:clamp(2.3rem, 4.6vw + .9rem, 3.9rem);
  line-height:1.22;
  letter-spacing:-.01em;
}
.cursor{
  display:inline-block; width:.5em; margin-left:.06em;
  background:var(--accent); color:transparent;
  animation:blink 1.1s steps(1) infinite;
}
@media (prefers-reduced-motion:reduce){ .cursor{ animation:none; opacity:.7; } }
@keyframes blink{ 0%,45%{opacity:1;} 46%,100%{opacity:0;} }

.hero-body{
  display:grid; grid-template-columns:1fr auto; gap:40px;
  margin-top:34px; align-items:end;
}
.hero-bio{
  max-width:52ch; color:var(--ink-soft); font-size:1.05rem;
}
.hero-bio strong{ color:var(--ink); font-weight:500; }
.hero-meta{
  font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--ink-faint);
  text-align:right; white-space:nowrap; line-height:1.9;
}

/* ---------- work list ---------- */
.work-item{
  display:grid; grid-template-columns:64px 1fr auto;
  gap:28px; padding:30px 0; border-top:1px solid var(--line);
  text-decoration:none; color:inherit;
}
.work-item:first-of-type{ border-top:1px solid var(--line); }
.work-index{ font-family:"IBM Plex Mono",monospace; color:var(--ink-faint); font-size:.85rem; padding-top:4px; }
.work-main h3{ font-size:1.5rem; margin-bottom:8px; }
.work-desc{ color:var(--ink-soft); max-width:56ch; margin-bottom:14px; }
.work-tags{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.08em; color:var(--accent); text-transform:uppercase; }
.work-arrow{
  align-self:start; padding-top:4px;
  font-family:"IBM Plex Mono",monospace; font-size:1.1rem; color:var(--ink-faint);
  transition:transform .18s ease, color .18s ease;
}
.work-item:hover .work-arrow{ transform:translate(3px,-3px); color:var(--accent); }
.work-item:hover .work-main h3{ color:var(--accent); }
.work-list{ border-bottom:1px solid var(--line); }

/* ---------- methodology ---------- */
.method-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.method-item{ background:var(--paper); padding:30px 26px; }
.method-num{ font-family:"IBM Plex Mono",monospace; color:var(--accent); font-size:.82rem; margin-bottom:16px; display:block; }
.method-item h3{ font-family:"Noto Sans SC",sans-serif; font-weight:500; font-size:1.05rem; margin-bottom:10px; }
.method-item p{ color:var(--ink-soft); font-size:.92rem; margin:0; }

/* ---------- contact ---------- */
.contact-inner{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:24px;
}
.contact h2{ font-size:clamp(1.8rem,3vw+1rem,2.6rem); }
.contact-link{
  font-family:"IBM Plex Mono",monospace; font-size:1rem;
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:2px;
}
.contact-link:hover{ color:var(--accent); }

/* ---------- footer ---------- */
footer{ padding:36px 0 48px; }
.foot-inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
  font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--ink-faint);
}
.foot-links{ display:flex; gap:20px; flex-wrap:wrap; }
.foot-links a{ text-decoration:none; color:var(--ink-soft); }
.foot-links a:hover{ color:var(--accent); }

@media (max-width:720px){
  .wrap{ padding-left:20px; padding-right:20px; }
  section{ padding:52px 0; }
  .hero-body{ grid-template-columns:1fr; align-items:start; }
  .hero-meta{ text-align:left; }
  .work-item{ grid-template-columns:40px 1fr; }
  .work-arrow{ display:none; }
  .method-grid{ grid-template-columns:1fr; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:6px; }
  .contact-inner{ flex-direction:column; align-items:flex-start; }
}