@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');

:root { --paper:#f5f3ee; --ink:#343530; --muted:#7d7c73; --line:#d9d6cd; --sage:#acb3a6; --clay:#bbaca2; --sand:#e9e4da; --card:#eeece6; --serif:'Noto Serif SC','Songti SC',serif; --display:'Playfair Display',serif; --sans:Inter,'Microsoft YaHei',sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.65; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.16; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E"); }
body::after { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.65; background-image:linear-gradient(90deg,rgba(245,243,238,.9),rgba(245,243,238,.67)),url('assets/images/earth-editorial-background.png'); background-size:cover; background-position:center; background-blend-mode:screen; filter:saturate(.72) contrast(.94); }
a,main,.site-header,.footer { position:relative; z-index:1; }
a { color:inherit; text-decoration:none; } .site-header { height:78px; padding:0 4vw; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; } .brand { font:500 14px var(--mono); } .brand span { color:var(--muted); } nav { display:flex; gap:21px; font:11px var(--mono); } nav a { padding:6px 0; color:var(--muted); border-bottom:1px solid transparent; } nav a:hover,nav a.active { color:var(--ink); border-color:var(--ink); }
.page { max-width:1440px; padding:6vw 4vw; margin:auto; } .eyebrow { font:11px var(--mono); letter-spacing:.07em; color:var(--muted); text-transform:uppercase; } .zh { font-family:var(--serif); } .en { font:400 13px var(--display); color:var(--muted); } .page-title { margin:28px 0 12px; font:400 clamp(42px,6vw,82px)/1.04 var(--display); letter-spacing:-.045em; } .section-title { margin:15px 0; font:400 clamp(29px,4vw,52px)/1.1 var(--display); letter-spacing:-.035em; } .section-title .zh { display:block; margin-top:12px; font-size:.45em; letter-spacing:0; } .button { display:inline-flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--ink); font:11px var(--mono); letter-spacing:.04em; } .button:hover { color:var(--muted); border-color:var(--muted); } .footer { display:flex; justify-content:space-between; padding:28px 4vw; border-top:1px solid var(--line); font:10px var(--mono); color:var(--muted); }

/* Home */
.hero { min-height:calc(100vh - 78px); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:6vw; } .hero-copy { max-width:615px; } .hero-title { margin:26px 0; font:400 clamp(47px,5.35vw,82px)/1.06 var(--display); letter-spacing:-.055em; } .hero-copy .lead { max-width:410px; margin:22px 0 7px; } .hero-copy .en { max-width:490px; margin:0 0 27px; } .hero-image { height:min(71vh,760px); overflow:hidden; position:relative; background:var(--sand); } .hero-image img { width:100%; height:100%; object-fit:cover; object-position:center 35%; filter:saturate(.68) contrast(.93); } .image-note { position:absolute; left:17px; bottom:14px; color:#f8f6f0; font:10px var(--mono); letter-spacing:.08em; }
.intro-band { display:grid; grid-template-columns:.75fr 1.25fr; gap:5vw; padding:34px 0 48px; border-top:1px solid var(--line); } .intro-band p { margin:0; font:400 clamp(23px,2.65vw,35px)/1.3 var(--serif); } .intro-band .en { margin-top:10px; } .compare-head { display:flex; align-items:end; justify-content:space-between; padding-top:22px; margin-bottom:34px; border-top:1px solid var(--line); } .comparison-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; } .compare { position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--sand); cursor:crosshair; } .compare img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .6s ease,transform .7s ease; } .compare .original { opacity:0; } .compare:hover .original { opacity:1; } .compare:hover .generated { opacity:0; } .compare:hover img { transform:scale(1.03); } .compare b { position:absolute; z-index:1; left:12px; bottom:10px; color:white; font:10px var(--mono); text-shadow:0 1px 5px #333; } .compare em { position:absolute; z-index:1; top:10px; right:10px; padding:3px 6px; opacity:0; background:#f4f2ece0; font:9px var(--mono); font-style:normal; transition:opacity .3s; } .compare:hover em { opacity:1; }

/* About */
.about-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:8vw; align-items:start; } .portrait { height:76vh; min-height:590px; position:sticky; top:28px; overflow:hidden; background:var(--sand); } .portrait img { width:100%; height:100%; object-fit:cover; filter:saturate(.67) contrast(.92); } .about-copy { padding-top:6vw; } .about-copy p { max-width:650px; margin:0 0 9px; } .about-copy .en { margin-bottom:28px; } .facts { margin-top:48px; border-top:1px solid var(--line); } .fact { display:grid; grid-template-columns:130px 1fr; padding:17px 0; border-bottom:1px solid var(--line); } .fact label { font:11px var(--mono); color:var(--muted); }

/* Project */
.project-intro { max-width:720px; margin:32px 0 65px; } .metric-rail { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-bottom:84px; background:var(--line); border:1px solid var(--line); } .metric { padding:26px 21px; background:var(--paper); } .metric strong { display:block; font:400 41px/1 var(--display); letter-spacing:-.05em; } .metric span { font:10px var(--mono); color:var(--muted); } .work-group { margin-top:72px; } .work-group header { display:flex; align-items:end; justify-content:space-between; padding-top:18px; margin-bottom:24px; border-top:1px solid var(--line); } .work-group h2 { margin:0; font:400 34px var(--display); } .work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .work-card { padding:12px; background:var(--card); cursor:pointer; } .video-wrap { position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#d7d5cd,#c7c7bf); } .video-wrap video { width:100%; height:100%; object-fit:cover; display:block; } .play-badge { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:11px 15px; border:1px solid #f7f5ef; background:#f4f2ece3; font:10px var(--mono); letter-spacing:.07em; } .work-card:hover .play-badge { color:var(--paper); background:var(--ink); } .work-meta { display:flex; align-items:center; justify-content:space-between; padding:14px 4px 5px; } .work-meta h3 { margin:0; font:500 14px var(--sans); } .work-meta span { font:10px var(--mono); color:var(--muted); }
.data-section { margin-top:96px; } .data-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:5vw; align-items:start; } .bar-list { margin-top:34px; } .bar { margin-bottom:24px; } .bar-top { display:flex; justify-content:space-between; margin-bottom:8px; font-size:12px; } .bar-line { height:5px; background:#dedbd3; } .bar-line i { display:block; height:100%; background:var(--sage); } .evidence-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; } .evidence { aspect-ratio:1; overflow:hidden; cursor:zoom-in; background:var(--sand); } .evidence img { width:100%; height:100%; object-fit:cover; filter:saturate(.68); transition:transform .4s; } .evidence:hover img { transform:scale(1.04); }
.full-count-trigger { cursor:help; transition:color .2s ease; } .full-count-trigger:hover { color:#6f806d; }
.modal { position:fixed; inset:0; z-index:50; display:none; place-items:center; padding:4vw; background:#252622e9; } .modal.open { display:grid; } .modal img,.modal video { display:block; max-width:90vw; max-height:86vh; } .modal button { position:absolute; top:18px; right:24px; border:0; background:none; color:#fff; font:27px var(--sans); cursor:pointer; }

/* Philosophy / contact */
.philosophy-grid { display:grid; grid-template-columns:1fr 1fr; gap:7vw 4.5vw; margin-top:56px; } .principle { display:flex; min-height:310px; padding:30px; flex-direction:column; justify-content:space-between; background:var(--sand); } .principle.sage { background:var(--sage); } .principle.clay { background:var(--clay); } .principle h2 { margin:32px 0; font:400 clamp(30px,3.3vw,47px)/1.15 var(--serif); } .principle p { max-width:390px; margin:0; } .contact-layout { min-height:calc(100vh - 170px); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8vw; } .contact-title { margin:20px 0; font:400 clamp(50px,6vw,89px)/1 var(--display); letter-spacing:-.06em; } .contact-info { border-top:1px solid var(--line); } .contact-row { display:grid; grid-template-columns:120px 1fr; padding:19px 0; border-bottom:1px solid var(--line); } .contact-row label { font:10px var(--mono); color:var(--muted); }
@media (max-width:760px) { .site-header { height:auto; min-height:68px; padding:16px 5vw; align-items:flex-start; gap:14px; } .brand { max-width:105px; line-height:1.35; } nav { flex-wrap:wrap; justify-content:flex-end; gap:10px; font-size:9px; } .page { padding:12vw 5vw; } .hero,.about-layout,.contact-layout,.data-layout { grid-template-columns:1fr; } .hero { padding-top:10vw; } .hero-image { grid-row:1; height:65vh; } .intro-band { grid-template-columns:1fr; } .comparison-grid { grid-template-columns:repeat(2,1fr); } .comparison-grid .compare:last-child { display:none; } .portrait { position:static; min-height:0; height:62vh; } .about-copy { padding-top:0; } .metric-rail { grid-template-columns:1fr 1fr; margin-bottom:56px; } .metric strong { font-size:32px; } .work-grid,.philosophy-grid { grid-template-columns:1fr; } .philosophy-grid { gap:15px; margin-top:35px; } .principle { min-height:275px; } .evidence-grid { grid-template-columns:1fr 1fr; } .footer { font-size:8px; } .footer span:last-child { display:none; } }
/* Make the philosophy transition compact and guide visitors to the comparisons */
.intro-band{position:relative!important;padding:18px 0 44px!important}.intro-band p{font-size:clamp(20px,2.15vw,29px)!important}.intro-band::after{content:'SCROLL TO REVEAL  ↓  AI BEFORE & AFTER';position:absolute;left:0;bottom:10px;font:10px var(--mono);letter-spacing:.08em;color:var(--muted);animation:scroll-cue 1.8s ease-in-out infinite}@keyframes scroll-cue{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(5px);opacity:1}}@media(max-width:760px){.intro-band::after{font-size:8px}.intro-band{padding-bottom:38px!important}}