:root{
  --bg:#fff;
  --text:#111;
  --muted:#666;
  --line:#d8d8d8;
  --line-soft:#ececec;
  --line-strong:#a9a9a9;
  --max:1240px;
  --serif:"Songti SC","STSong","SimSun","Times New Roman",serif;
  --sans:"Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
button,a{font:inherit} a{color:inherit;text-decoration:none} button{color:inherit} img{display:block;width:100%}
.page-shell{width:min(calc(100% - 56px),var(--max));margin:0 auto}
.site-header{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}
.wordmark{font:600 22px/1 var(--serif);letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:36px;font-size:14px}
.nav a{position:relative;padding:5px 0}.nav a:not(.nav-github)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:#111;transition:right .25s ease}.nav a:hover::after{right:0}
.nav-github{border:1px solid #111;padding:8px 13px!important;transition:.2s ease}.nav-github:hover{background:#111;color:#fff}
.menu-btn{display:none;background:none;border:0;padding:8px}.editorial-section{border-bottom:1px solid var(--line)}

/* Hero — editorial cover */
.hero{min-height:620px;display:grid;grid-template-columns:34px minmax(330px,.82fr) minmax(520px,1.38fr);gap:42px;align-items:center;padding:42px 0 56px}
.hero-index{height:405px;display:flex;flex-direction:column;align-items:center;position:relative;font-size:11px;color:#777;opacity:.72}
.hero-index-line{width:1px;background:#c9c9c9;height:245px;margin-bottom:10px}.hero-scroll-label{writing-mode:vertical-rl;letter-spacing:.11em;margin-top:28px;font-size:8px}.hero-dot{width:4px;height:4px;border-radius:50%;background:#111;margin-top:20px}
.hero-copy h1{font:500 clamp(66px,6.2vw,98px)/.92 var(--serif);margin:0 0 28px;letter-spacing:-.04em}.hero-role{font:500 25px/1.35 var(--serif);margin:0 0 26px}.hero-intro{max-width:445px;font:400 17px/1.9 var(--serif);margin:0 0 34px;color:#222}
.hero-actions--editorial{display:flex;align-items:center;gap:30px}.hero-primary-link,.hero-secondary-link{font-size:14px;padding:5px 0;border-bottom:1px solid transparent;transition:.2s ease}.hero-primary-link{font-weight:600}.hero-primary-link:hover,.hero-secondary-link:hover{border-bottom-color:#111;transform:translateY(-1px)}
.hero-media{height:492px;margin:0;overflow:hidden;background:#eee}.hero-media img{height:100%;object-fit:cover;filter:grayscale(100%);transform:scale(1.025);transition:transform .7s cubic-bezier(.2,.7,.2,1)}.hero-media:hover img{transform:scale(1.05)}

/* Featured work — deliberately irregular editorial rhythm */
.projects-section{padding:92px 0 88px;border-bottom:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:54px}.section-head h2{font:500 33px/1.1 var(--serif);margin:0}.section-head a{font-size:13px;padding-bottom:5px;border-bottom:1px solid transparent}.section-head a:hover{border-bottom-color:#111}
.project-timeline{position:relative;padding:12px 0 8px}.timeline-track{position:absolute;left:44%;top:0;bottom:0;width:1px;background:#e4e4e4;transform:translateX(-.5px);overflow:hidden}.timeline-progress{width:100%;height:0;background:#111;transition:height .08s linear}
.project-row{display:grid;grid-template-columns:minmax(0,.82fr) 54px minmax(0,1.35fr);align-items:center;min-height:315px;margin:0 0 88px;position:relative}.project-row--even{grid-template-columns:minmax(0,1.35fr) 54px minmax(0,.82fr)}
.project-card{width:min(100%,355px);padding:22px 0 18px;border:0;border-top:1px solid #bdbdbd;background:transparent;position:relative;transition:transform .25s ease,opacity .25s ease}.project-row--odd .project-card{justify-self:end}.project-row--even .project-card{justify-self:start}.project-card::after{content:"";position:absolute;top:-1px;width:54px;height:1px;background:#bdbdbd;transition:background .25s ease}.project-row--odd .project-card::after{right:-55px}.project-row--even .project-card::after{left:-55px}
.project-card h3{font:500 25px/1.4 var(--serif);margin:12px 0 5px}.project-card p{margin:0 0 11px;font-family:var(--serif);color:#2a2a2a}.project-number{font:500 21px/1 var(--serif);margin-bottom:10px}.project-meta{font:500 12px/1.4 var(--sans)!important;color:#777!important;letter-spacing:.02em}.case-link{display:inline-block;border:0;background:none;padding:0;margin-top:14px;cursor:pointer;font-size:13px;border-bottom:1px solid transparent}.case-link:hover{border-bottom-color:#111}
.timeline-node{width:11px;height:11px;border-radius:50%;background:#111;border:1px solid #111;justify-self:center;z-index:2;box-shadow:0 0 0 7px #fff;transition:transform .25s ease,background .25s ease}.timeline-node--hollow{background:#fff;border-color:#aaa}
.project-visual{border:0;background:#f7f7f7;padding:0;overflow:hidden;cursor:pointer;position:relative;justify-self:start;transition:transform .35s ease;box-shadow:none}.project-row--even .project-visual{justify-self:end}.project-visual img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:filter .45s ease,transform .65s cubic-bezier(.2,.7,.2,1)}.visual-hover{position:absolute;right:16px;bottom:14px;background:#fff;padding:5px 8px;font-size:11px;opacity:0;transform:translateY(6px);transition:.25s ease}
.project-row--01 .project-visual{width:min(100%,610px);height:340px}.project-row--01 .project-card{width:min(100%,335px)}
.project-row--02{margin-bottom:106px}.project-row--02 .project-visual{width:min(100%,650px);height:275px}.project-row--02 .project-card{width:min(100%,315px)}
.project-row--03{min-height:260px;margin-bottom:22px}.project-row--03 .project-visual{width:min(100%,470px);height:245px}.project-row--03 .project-card{width:min(100%,300px);opacity:.94}
.project-row:hover .project-card,.project-card:focus-within{transform:translateY(-2px)}.project-row:hover .timeline-node{transform:scale(1.2)}.project-row:hover .project-card::after{background:#111}.project-row:hover .project-visual{transform:translateY(-3px)}.project-row:hover .project-visual img,.project-visual:hover img{filter:grayscale(10%);transform:scale(1.018)}.project-visual:hover .visual-hover{opacity:1;transform:translateY(0)}

/* Community + Writing — asymmetric editorial band */
.lower-editorial{display:grid;grid-template-columns:.78fr 1.22fr;min-height:330px}
.community-panel,.writing-panel{padding:42px 0 38px}.community-panel{padding-right:56px;border-right:1px solid var(--line)}.writing-panel{padding-left:56px;display:grid;grid-template-columns:.72fr 1.28fr;gap:46px}.eyebrow{font:500 10px/1.2 var(--sans);letter-spacing:.11em;margin:0 0 11px;color:#555}.community-panel h2,.writing-panel h2,.contact-strip h2{font:500 28px/1.2 var(--serif);margin:0 0 12px}.community-panel>p:not(.eyebrow),.writing-intro>p:not(.eyebrow){font-family:var(--serif);color:#333;margin:0 0 20px}.metrics{display:flex;gap:44px;margin:30px 0 22px}.metrics div{display:flex;flex-direction:column}.metrics strong{font:500 38px/1 var(--serif)}.metrics span{font-size:11px;color:#666;margin-top:6px}.community-panel>a,.writing-more{font-size:13px;border-bottom:1px solid transparent}.community-panel>a:hover,.writing-more:hover{border-bottom-color:#111}.writing-list{list-style:none;padding:0;margin:0 0 19px;border-top:1px solid var(--line)}.writing-list li{display:grid;grid-template-columns:1fr auto;gap:18px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.writing-list time{color:#888;font-size:12px}

/* Contact — thin closing strip, not a third card */
.contact-strip{min-height:150px;display:grid;grid-template-columns:.58fr 1fr 1.3fr;gap:38px;align-items:center;border-bottom:1px solid var(--line);padding:28px 0}.contact-strip h2{margin-bottom:0}.contact-strip>p{font-family:var(--serif);color:#444;margin:0}.contact-links{display:flex;justify-content:flex-end;gap:24px;font-size:12px;color:#555;flex-wrap:wrap}.contact-links a{color:#111;border-bottom:1px solid transparent}.contact-links a:hover{border-bottom-color:#111}
.footer{height:68px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#777}.back-top{border:0;background:none;cursor:pointer;color:#333}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.is-visible{opacity:1;transform:none}.project-row .project-card{transition-delay:40ms}.project-row .project-visual{transition-delay:120ms}
.case-dialog{width:min(640px,calc(100vw - 40px));border:1px solid #111;padding:0;background:#fff;color:#111}.case-dialog::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(3px)}.case-dialog-inner{padding:36px 38px 34px;position:relative}.case-dialog-inner h2{font:500 36px/1.18 var(--serif);margin:8px 0 16px}.case-dialog-inner>p:not(.eyebrow){font-family:var(--serif);font-size:17px;color:#333;line-height:1.8}.dialog-close{position:absolute;right:16px;top:12px;border:0;background:none;font:300 29px/1 var(--sans);cursor:pointer}.dialog-actions{display:flex;gap:12px;margin-top:26px}.btn{display:inline-flex;align-items:center;justify-content:center;min-width:142px;height:44px;padding:0 20px;border:1px solid #1b1b1b;transition:.22s ease;cursor:pointer}.btn-dark{background:#111;color:#fff}.btn-dark:hover{background:#292929;transform:translateY(-2px)}.btn-light{background:#fff}.btn-light:hover{background:#f5f5f5;transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media (max-width:900px){
  .page-shell{width:min(calc(100% - 30px),var(--max))}.site-header{height:62px}.nav{display:none}.menu-btn{display:block}.nav.is-open{display:flex;position:absolute;top:61px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:18px 0 22px;gap:16px}.nav.is-open .nav-github{border:0;padding:5px 0!important}
  .hero{grid-template-columns:20px 1fr;padding-top:28px;gap:18px}.hero-index{grid-row:1/3;height:300px}.hero-index-line{height:190px}.hero-copy h1{font-size:64px}.hero-role{font-size:21px}.hero-intro{font-size:16px}.hero-media{grid-column:2;height:58vw;min-height:320px}
  .projects-section{padding:68px 0 62px}.timeline-track{left:12px;transform:none}.project-row,.project-row--even{grid-template-columns:24px 1fr;min-height:0;margin:18px 0 54px;gap:16px}.timeline-node{grid-column:1;grid-row:1;align-self:start;margin-top:30px;width:10px;height:10px;box-shadow:0 0 0 5px #fff}.project-card,.project-row--odd .project-card,.project-row--even .project-card{grid-column:2;justify-self:stretch;width:100%;margin-bottom:12px;padding:18px 0;border-top:1px solid var(--line)}.project-card::after{display:none}.project-visual,.project-row--even .project-visual,.project-row--01 .project-visual,.project-row--02 .project-visual,.project-row--03 .project-visual{grid-column:2;justify-self:stretch;width:100%;height:auto;aspect-ratio:16/9}.project-row--odd .project-info{grid-row:1}.project-row--odd .project-visual{grid-row:2}.project-row--even .project-visual{grid-row:2}.project-row--even .project-info{grid-row:1}
  .lower-editorial{grid-template-columns:1fr}.community-panel{padding:34px 0;border-right:0;border-bottom:1px solid var(--line)}.writing-panel{padding:34px 0;grid-template-columns:1fr;gap:8px}.contact-strip{grid-template-columns:1fr;gap:8px;padding:28px 0}.contact-links{justify-content:flex-start}
}
@media (max-width:560px){
  .page-shell{width:calc(100% - 24px)}.wordmark{font-size:20px}.hero{grid-template-columns:1fr;padding:28px 0 38px}.hero-index{display:none}.hero-copy h1{font-size:58px}.hero-role{font-size:20px}.hero-media{grid-column:1;height:84vw;min-height:0}.hero-actions--editorial{gap:22px}.section-head h2{font-size:29px}.section-head a{font-size:12px}.projects-section{padding-top:56px}.project-card h3{font-size:22px}.project-row,.project-row--even{grid-template-columns:18px 1fr;gap:10px}.timeline-track{left:9px}.timeline-node{width:9px;height:9px;margin-top:27px}.writing-list li{grid-template-columns:1fr}.writing-list time{display:none}.footer{height:62px}
}


/* V5 — real-business workflow project + Lab */
.workflow-project-visual{background:#f8f8f6;color:#111;display:block;padding:0;overflow:hidden}
.workflow-preview{height:100%;padding:24px 26px 20px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,#fbfbfa 0%,#f3f3f0 100%)}
.workflow-preview__header,.workflow-preview__footer{display:flex;justify-content:space-between;gap:18px;font:500 10px/1.2 var(--sans);letter-spacing:.08em;color:#777}
.workflow-preview__grid{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr 26px 1fr;align-items:stretch;gap:0;margin:20px 0}
.workflow-preview__role{border:1px solid #cfcfcb;background:#fff;padding:18px 14px;min-height:122px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .28s ease,background .28s ease,color .28s ease}
.workflow-preview__role small{font-size:9px;letter-spacing:.1em;color:#888;margin-bottom:auto}.workflow-preview__role strong{font:500 17px/1.25 var(--serif);margin:20px 0 5px}.workflow-preview__role span{font:400 11px/1.45 var(--serif);color:#666}.workflow-preview__role--dark{background:#151515;color:#fff;border-color:#151515}.workflow-preview__role--dark small,.workflow-preview__role--dark span{color:#bbb}.workflow-preview__arrow{display:flex;align-items:center;justify-content:center;color:#aaa;font-size:18px}
.project-row:hover .workflow-preview__role:nth-of-type(1){transform:translateY(-3px)}.project-row:hover .workflow-preview__role:nth-of-type(3){transform:translateY(-5px)}.project-row:hover .workflow-preview__role:nth-of-type(5){transform:translateY(-7px)}
.project-row--03 .project-visual{width:min(100%,560px);height:305px}.project-row--03 .project-card{width:min(100%,320px);opacity:1}
.lab-section{min-height:330px;display:grid;grid-template-columns:90px minmax(310px,.8fr) minmax(440px,1.25fr);gap:42px;align-items:center;padding:58px 0}.lab-index{font:500 46px/1 var(--serif);align-self:start;padding-top:4px}.lab-copy h2{font:500 34px/1.2 var(--serif);margin:0 0 14px}.lab-copy>p:not(.eyebrow){font:400 15px/1.8 var(--serif);color:#444;max-width:520px;margin:0 0 25px}.lab-copy>a{font-size:13px;border-bottom:1px solid transparent}.lab-copy>a:hover{border-bottom-color:#111}.lab-stats{display:flex;gap:24px;flex-wrap:wrap;padding:18px 0 22px;border-top:1px solid var(--line);font:400 12px var(--serif);color:#555}.lab-stats strong{font:500 22px/1 var(--serif);color:#111;margin-right:5px}.lab-media{height:235px;margin:0;overflow:hidden;border:1px solid var(--line)}.lab-media img{height:100%;object-fit:cover;filter:grayscale(100%);transition:filter .35s ease,transform .5s ease}.lab-section:hover .lab-media img{filter:grayscale(20%);transform:scale(1.014)}
@media(max-width:900px){.workflow-preview{padding:18px}.workflow-preview__grid{grid-template-columns:1fr;gap:8px}.workflow-preview__arrow{transform:rotate(90deg);height:18px}.workflow-preview__role{min-height:92px}.lab-section{grid-template-columns:34px 1fr;gap:22px}.lab-index{font-size:30px}.lab-copy{grid-column:2}.lab-media{grid-column:2;height:auto;aspect-ratio:16/9}}
@media(max-width:560px){.lab-section{grid-template-columns:1fr;padding:42px 0}.lab-index{display:none}.lab-copy,.lab-media{grid-column:1}.workflow-preview__header{font-size:8px}.workflow-preview__footer{font-size:9px}.project-row--03 .project-visual{height:auto}}

/* V7 — truthful About + calibrated community language */
.about-section{display:grid;grid-template-columns:150px minmax(0,1.35fr) minmax(280px,.72fr);gap:54px;padding:76px 0 72px;align-items:start}
.about-label{padding-top:5px}.about-label>span{font:500 23px/1.25 var(--serif)}
.about-story{max-width:720px}.about-story h2{font:500 clamp(34px,3.4vw,52px)/1.18 var(--serif);letter-spacing:-.025em;margin:0 0 28px;max-width:680px}.about-story>p{font:400 16px/1.9 var(--serif);color:#303030;margin:0 0 16px;max-width:670px}.about-story blockquote{margin:34px 0 0;padding:20px 0 0;border-top:1px solid var(--line);font:500 22px/1.55 var(--serif);max-width:610px}
.about-facts{margin:0;border-top:1px solid var(--line-strong)}.about-facts>div{padding:14px 0 15px;border-bottom:1px solid var(--line-soft)}.about-facts dt{font:500 9px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#777;margin-bottom:5px}.about-facts dd{margin:0;font:400 13px/1.55 var(--serif);color:#222}
.community-note{font:400 12px/1.75 var(--serif)!important;color:#777!important;margin-top:-8px!important;max-width:430px}
@media(max-width:900px){.about-section{grid-template-columns:120px 1fr;gap:34px}.about-facts{grid-column:2;display:grid;grid-template-columns:1fr 1fr}.about-facts>div{padding-right:18px}.about-story h2{font-size:38px}}
@media(max-width:560px){.about-section{grid-template-columns:1fr;padding:54px 0 50px;gap:24px}.about-label,.about-story,.about-facts{grid-column:1}.about-label{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px}.about-story h2{font-size:34px;margin-bottom:22px}.about-story>p{font-size:15px;line-height:1.85}.about-story blockquote{font-size:20px;margin-top:28px}.about-facts{display:block}.about-facts>div{padding-right:0}}
.project-row--01 .project-visual::before{content:'REAL V1 PROTOTYPE';position:absolute;left:14px;top:14px;z-index:2;background:rgba(255,255,255,.92);padding:5px 7px;font:600 9px/1 var(--sans);letter-spacing:.1em;color:#333}
.project-link-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px}.project-link-row .case-link{margin-top:0}.case-link--prototype{font-weight:600}
.project-row--02 .project-visual::before{content:'REAL WORKFLOW PROTOTYPE';position:absolute;left:14px;top:14px;z-index:2;background:rgba(255,255,255,.92);padding:5px 7px;font:600 9px/1 var(--sans);letter-spacing:.08em;color:#333}

/* V11 — Lab preview strip */
.lab-preview-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);text-decoration:none}
.lab-preview-strip span{min-width:0;overflow:hidden;background:#f5f5f5}
.lab-preview-strip img{width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(100%);transition:filter .35s ease,transform .5s ease}
.lab-preview-strip:hover img{filter:grayscale(15%);transform:scale(1.02)}
@media(max-width:900px){.lab-preview-strip{aspect-ratio:16/9}}
@media(max-width:560px){.lab-preview-strip{grid-template-columns:repeat(2,1fr);aspect-ratio:1.3/1;max-height:420px}}

/* V13 mobile usability only — desktop/editorial composition unchanged. */
@media(max-width:560px){
  .lab-preview-strip{display:flex;overflow-x:auto;aspect-ratio:auto;max-height:none;gap:1px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .lab-preview-strip::-webkit-scrollbar{display:none}
  .lab-preview-strip span{flex:0 0 72%;aspect-ratio:945/1500;scroll-snap-align:start}
  .lab-preview-strip img{height:100%;object-fit:cover;object-position:top}
  .contact-links{gap:0 18px}
  .contact-links a{min-height:44px;display:inline-flex;align-items:center}
}