*,*::before,*::after{box-sizing:border-box}
body{margin:0}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
img{max-width:100%;display:block}

:root{
  --bg:#ffffff; --panel:#faf9f6; --ink:#101010; --soft:#6b6b66; --line:#e5e3dc; --accent:#a8431c;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f0f0e; --panel:#171615; --ink:#f1efe9; --soft:#a3a099; --line:#2a2926; --accent:#d9713f; }
}
:root[data-theme="dark"]{ --bg:#0f0f0e; --panel:#171615; --ink:#f1efe9; --soft:#a3a099; --line:#2a2926; --accent:#d9713f; }
:root[data-theme="light"]{ --bg:#ffffff; --panel:#faf9f6; --ink:#101010; --soft:#6b6b66; --line:#e5e3dc; --accent:#a8431c; }

body{ background:var(--bg); color:var(--ink); font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.mono{ font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; }
.wrap{ max-width:800px; margin:0 auto; padding:0 1.6rem; }

nav.sitenav{ position:sticky; top:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--line); }
nav.sitenav .wrap{ display:flex; align-items:center; gap:1.6rem; padding:1rem 1.6rem; flex-wrap:wrap; }
nav.sitenav .wm{ font-family:Georgia,serif; font-weight:700; font-style:italic; font-size:1.05rem; margin-right:auto; text-decoration:none; }
nav.sitenav .pages{ display:flex; gap:1.4rem; }
nav.sitenav .pages a{ font-size:12.5px; color:var(--soft); text-decoration:none; }
nav.sitenav .pages a:hover{ color:var(--accent); }
nav.sitenav .langtoggle{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-family:ui-monospace,Consolas,monospace; font-size:11px; }
nav.sitenav .langtoggle button{ appearance:none; background:none; border:none; padding:.3rem .65rem; color:var(--soft); cursor:pointer; }
nav.sitenav .langtoggle button[aria-pressed="true"]{ background:var(--accent); color:#fff; font-weight:700; }

.eyebrow{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600; }
h1{ font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.5rem,6.5vw,4rem); font-weight:700; letter-spacing:-.01em; line-height:1.02; text-wrap:balance; }
h2.pt{ font-family:Georgia,serif; font-size:1.7rem; font-weight:700; letter-spacing:-.005em; text-wrap:balance; }
.hero{ padding:3.2rem 0 2rem; }
.tag{ margin-top:1.2rem; font-size:1.15rem; color:var(--soft); max-width:52ch; line-height:1.55; }

.skills{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.55rem; }
.skills span{ font-family:ui-monospace,Consolas,monospace; font-size:.8rem; color:var(--soft); border:1px solid var(--line); border-radius:999px; padding:.35rem .85rem; }

section{ padding:2.4rem 0; border-top:1px solid var(--line); }
.section-head{ margin-bottom:.4rem; }

.now-log{ margin-top:1.4rem; display:flex; flex-direction:column; }
.now-log .entry{ display:grid; grid-template-columns:110px 1fr; gap:1rem; padding:.85rem 0; border-top:1px dotted var(--line); }
.now-log .entry:first-child{ border-top:none; }
.now-log .when{ font-family:ui-monospace,Consolas,monospace; font-size:12px; color:var(--soft); padding-top:.15rem; }
.now-log .what{ font-size:.96rem; line-height:1.55; }

.project{ margin-top:1.4rem; border:1px solid var(--line); background:var(--panel); }
.project .shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.project .shots figure{ margin:0; background:var(--panel); overflow:hidden; }
.project .shots img{ width:100%; height:auto; display:block; }
.project .shots figcaption{ padding:.5rem .6rem .7rem; font-family:ui-monospace,Consolas,monospace; font-size:10px; color:var(--soft); text-align:center; }
@media (max-width:560px){ .project .shots{ grid-template-columns:repeat(3,1fr); } }
.project .body{ padding:1.2rem 1.3rem 1.4rem; }
.project .row1{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.project h3.name{ font-family:Georgia,serif; font-size:1.3rem; font-weight:700; }
.chip{ font-family:ui-monospace,Consolas,monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; padding:.22rem .55rem; border-radius:999px; border:1px solid var(--accent); color:var(--accent); }
.project .lede{ margin-top:.7rem; font-size:1.02rem; line-height:1.65; max-width:58ch; }
.taglist{ margin-top:.9rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.taglist span{ font-family:ui-monospace,Consolas,monospace; font-size:10.5px; color:var(--soft); border:1px solid var(--line); border-radius:4px; padding:.2rem .5rem; }
.linkout{ margin-top:1rem; display:inline-block; font-family:ui-monospace,Consolas,monospace; font-size:12.5px; text-decoration:underline; text-underline-offset:3px; color:var(--accent); }
.more-note{ margin-top:1.2rem; font-size:.9rem; color:var(--soft); }

.contact-line{ margin-top:1rem; font-size:1.15rem; }
.contact-line a{ text-decoration:underline; text-underline-offset:3px; color:var(--accent); font-weight:700; }

[data-lang="zh"] .en-only{ display:none; }
[data-lang="en"] .zh-only{ display:none; }

.site-footer{ border-top:1px solid var(--line); padding:1.4rem 0; text-align:center; font-family:ui-monospace,Consolas,monospace; font-size:11px; color:var(--soft); }