:root {
  --paper: #e9eef0; --paper-deep: #dce4e7; --ink: #15191d; --muted: #69757c;
  --line: #aebbc1; --blue: #1646d8; --red: #ec3f2f; --white: #f8fbfc;
  --display: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --body: "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", "Roboto Mono", monospace;
}
[data-theme="dark"] { --paper:#161b20; --paper-deep:#20272d; --ink:#e8edef; --muted:#9caab1; --line:#435058; --blue:#6388ff; --white:#101419; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.6; transition:background .25s,color .25s; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { color:inherit; }
.skip-link { position:fixed; top:-4rem; left:1rem; z-index:99; padding:.7rem 1rem; background:var(--ink); color:var(--paper); }
.skip-link:focus { top:1rem; }
:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
.site-header { height:72px; padding:0 clamp(20px,4vw,64px); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(10px); }
.wordmark,.site-nav,.hero-index,.kicker,.section-label,.object-caption,.ticker,.note-meta,.site-footer,.filters,.filter-bar label { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.wordmark { display:flex; gap:10px; align-items:center; font-weight:700; }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 15%,transparent); }
.site-nav { display:flex; align-items:center; gap:30px; }
.site-nav a { padding:25px 0 22px; border-bottom:3px solid transparent; }
.site-nav a:hover,.site-nav a.active { color:var(--blue); border-color:var(--blue); }
.theme-button,.menu-button { border:0; background:transparent; cursor:pointer; }
.theme-button { font-size:18px; }
.menu-button { display:none; font-family:var(--mono); font-size:12px; }
.page-grid { display:grid; grid-template-columns:minmax(110px,1fr) minmax(0,6fr); }
.hero { min-height:calc(100vh - 72px); border-bottom:1px solid var(--line); grid-template-columns:minmax(110px,1fr) minmax(340px,3.2fr) minmax(300px,2.8fr); }
.hero-index { padding:36px clamp(20px,2.5vw,40px); border-right:1px solid var(--line); color:var(--muted); line-height:1.7; }
.hero-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(56px,7vw,110px) clamp(28px,5vw,80px); }
.eyebrow { display:flex; justify-content:space-between; max-width:590px; color:var(--blue); font-family:var(--mono); font-size:11px; text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:12px; }
h1,h2,h3,p { margin-top:0; }
.hero h1,.archive-hero h1,.profile h1 { font-family:var(--display); font-size:clamp(52px,6.4vw,104px); line-height:1.08; font-weight:600; letter-spacing:-.055em; margin:36px 0; }
.hero h1 em,.archive-hero h1 em { color:var(--blue); font-style:normal; }
.hero-intro { max-width:540px; font-size:18px; color:var(--muted); }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:28px; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:space-between; gap:42px; padding:0 18px; font-family:var(--mono); font-size:12px; text-transform:uppercase; border:1px solid var(--ink); }
.button.primary { background:var(--ink); color:var(--paper); }
.button:hover { transform:translateY(-2px); transition:transform .2s; }
.text-button { border-width:0 0 1px; padding:0; }
.hero-object { background:var(--blue); min-height:520px; display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,4vw,64px); color:white; }
.focus-frame { aspect-ratio:1/1.15; position:relative; display:grid; place-items:center; background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 55%),repeating-linear-gradient(90deg,transparent 0 20%,rgba(255,255,255,.08) 20% calc(20% + 1px)); }
.focus-frame p { font-family:var(--mono); font-size:clamp(20px,2.5vw,42px); line-height:1.1; letter-spacing:-.06em; }
.focus-corner { width:44px; height:44px; position:absolute; border-color:white; }
.top-left { top:0;left:0;border-top:2px solid;border-left:2px solid}.top-right{top:0;right:0;border-top:2px solid;border-right:2px solid}.bottom-left{bottom:0;left:0;border-bottom:2px solid;border-left:2px solid}.bottom-right{bottom:0;right:0;border-bottom:2px solid;border-right:2px solid}
.focus-dot { width:10px;height:10px;border:2px solid white;border-radius:50%;position:absolute;top:50%;left:50%; }
.object-caption { display:flex; justify-content:space-between; padding-top:12px; }
.ticker { padding:12px clamp(20px,4vw,64px); background:var(--ink); color:var(--paper); display:flex; gap:8vw; overflow:hidden; white-space:nowrap; }
.ticker span { color:#8aa6ff; }
.section { border-bottom:1px solid var(--line); }
.section-label { padding:76px clamp(20px,2.5vw,40px); border-right:1px solid var(--line); }
.section-label span { color:var(--blue); }
.section-label p { margin-top:8px; color:var(--muted); }
.section-content { padding:76px clamp(24px,5vw,80px) 90px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:54px; }
.kicker { color:var(--blue); margin-bottom:15px; }
.section-heading h2 { font-family:var(--display); font-weight:500; font-size:clamp(30px,3.5vw,54px); line-height:1.25; letter-spacing:-.035em; }
.arrow-link { font-family:var(--mono); font-size:12px; white-space:nowrap; padding-bottom:8px; border-bottom:1px solid; }
.arrow-link span { color:var(--blue); margin-left:18px; }
.note-row { display:grid; grid-template-columns:150px minmax(0,1fr) 30px; align-items:center; gap:24px; padding:28px 0; border-top:1px solid var(--line); }
.note-row:last-child { border-bottom:1px solid var(--line); }
.note-meta { color:var(--muted); display:flex; gap:12px; align-items:center; }
.plant { filter:grayscale(1); }
.note-row h3 { font-size:19px; margin-bottom:5px; }
.note-row a p { color:var(--muted); font-size:13px; margin:0; }
.row-arrow { color:var(--blue); transition:transform .2s; }
.note-row:hover .row-arrow { transform:translate(4px,-4px); }
.contact-sheet { display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:12px; align-items:end; }
.contact-frame { height:390px; padding:14px; display:flex; flex-direction:column; justify-content:space-between; color:white; position:relative; overflow:hidden; background:var(--paper-deep); }
.contact-frame:before,.gallery-card:before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,transparent 35%,rgba(255,255,255,.22)),repeating-linear-gradient(115deg,transparent 0 32px,rgba(255,255,255,.08) 33px); }
.frame-a { background:#45606c; }.frame-b { height:320px;background:#6b5248; }.frame-c { height:360px;background:#384756; }
.contact-frame span,.contact-frame p { position:relative; z-index:1; font-family:var(--mono); font-size:11px; }
.contact-frame:hover:before { transform:scale(1.06); transition:transform .5s; }
.replace-note { color:var(--muted); font-size:12px; margin-top:16px; }
code { font-family:var(--mono); color:var(--blue); }
.about-strip { background:var(--blue); color:white; }
.about-strip .section-label { border-color:rgba(255,255,255,.35); }
.about-strip .section-label span,.about-strip .section-label p { color:white; }
.about-copy { padding:85px clamp(24px,7vw,110px); }
.about-copy > p { font-family:var(--mono); font-size:12px; }
.about-copy h2 { font-family:var(--display); font-size:clamp(32px,4vw,60px); line-height:1.3; font-weight:500; max-width:1050px; margin:36px 0 50px; }
.button.inverse { background:white;color:#1646d8;border-color:white; }
.site-footer { min-height:110px; padding:28px clamp(20px,4vw,64px); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; color:var(--muted); }
.site-footer p { margin:0; }.site-footer a { text-align:right;color:var(--ink); }
/* Archive pages */
.archive-hero { min-height:520px; border-bottom:1px solid var(--line); }
.archive-hero > div:last-child { padding:75px clamp(28px,7vw,110px); }
.archive-hero h1 { font-size:clamp(52px,7vw,98px); margin:18px 0 30px; }
.archive-hero > div:last-child > p:last-child { color:var(--muted); max-width:600px; }
.filter-bar { padding:22px clamp(20px,4vw,64px); border-bottom:1px solid var(--line); display:grid; grid-template-columns:120px minmax(180px,1fr) auto; align-items:center; gap:24px; }
.filter-bar input { border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); padding:10px 0; outline:0; }
.filter-bar input:focus { border-color:var(--blue); }
.filters { display:flex; gap:6px; }
.filter { border:1px solid var(--line); background:transparent; padding:7px 13px; cursor:pointer; font-size:11px; }
.filter.active,.filter:hover { background:var(--blue); color:white; border-color:var(--blue); }
.archive-list .section-label { padding-top:54px; }
.archive-list .note-list { padding:30px clamp(24px,7vw,110px) 100px; }
.note-list.large .note-row { grid-template-columns:150px minmax(0,1fr) 30px; padding:38px 0; scroll-margin-top:30px; }
.note-list.large h2 { font-family:var(--display); font-size:clamp(23px,3vw,38px); line-height:1.3; margin-bottom:12px; }
.summary { color:var(--muted); max-width:700px; }
.empty-state { padding:40px 0; color:var(--muted); }
/* Photography */
.gallery .section-label { padding-top:45px; }
.gallery-grid { padding:45px clamp(24px,5vw,80px) 90px; display:grid; grid-template-columns:repeat(12,1fr); gap:16px; align-items:end; }
.gallery-card { border:0; text-align:left; min-height:360px; padding:16px; color:white; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.gallery-card > * { z-index:1; position:relative; }.gallery-card span,.gallery-card small { font-family:var(--mono); font-size:10px;letter-spacing:.08em; }.gallery-card p { margin:0;font-size:16px; }
.gallery-card.portrait { grid-column:span 5; min-height:650px; }.gallery-card.landscape { grid-column:span 7; min-height:400px; }.gallery-card.square { grid-column:span 5; min-height:490px; }
.tone-1{background:#3c5661}.tone-2{background:#806b55}.tone-3{background:#5b6571}.tone-4{background:#2e3848}
.placeholder-cross { width:46px;height:46px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.7); }
.placeholder-cross:before,.placeholder-cross:after { content:"";position:absolute;background:rgba(255,255,255,.7);left:50%;top:50%;transform:translate(-50%,-50%); }.placeholder-cross:before{width:70px;height:1px}.placeholder-cross:after{height:70px;width:1px}
.photo-instruction { margin:0 clamp(20px,4vw,64px) 90px; padding:60px; border:1px solid var(--line); max-width:800px; }
.photo-instruction > p:first-child { color:var(--red);font-family:var(--mono);font-size:11px; }.photo-instruction h2 { font-family:var(--display);font-size:36px; }
.lightbox { width:min(740px,90vw); border:1px solid var(--line); background:var(--paper);color:var(--ink);padding:16px; }.lightbox::backdrop{background:rgba(0,0,0,.75)}.lightbox button{float:right;border:0;background:transparent;font-size:28px;cursor:pointer}.lightbox-image{clear:both;min-height:55vh;background:var(--paper-deep);display:grid;place-items:center;font-family:var(--mono);color:var(--muted)}.lightbox>p{font-family:var(--mono);font-size:11px;margin:12px 0 0}
/* About */
.profile { grid-template-columns:minmax(110px,1fr) minmax(330px,3fr) minmax(280px,2fr); border-bottom:1px solid var(--line); }
.profile-main { padding:72px clamp(24px,5vw,75px); }.profile h1{font-size:clamp(45px,5vw,76px);}.portrait-placeholder{min-height:370px;background:var(--blue);color:white;padding:18px;display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:11px}.portrait-placeholder span{align-self:flex-start}.portrait-placeholder p{margin:0;text-align:right}
.profile-copy { padding:190px clamp(24px,5vw,70px) 70px;border-left:1px solid var(--line);}.profile-copy .lead{font-family:var(--display);font-size:26px;line-height:1.55}.profile-copy>p:not(.lead){color:var(--muted)}dl{margin-top:50px}dl div{border-top:1px solid var(--line);padding:16px 0}dt{font-family:var(--mono);font-size:10px;color:var(--blue);text-transform:uppercase}dd{margin:5px 0 0}.manifesto{border-bottom:1px solid var(--line)}blockquote{margin:0;padding:90px clamp(24px,7vw,110px);font-family:var(--display);font-size:clamp(30px,4vw,55px);line-height:1.5}.contact>div:last-child{padding:90px clamp(24px,7vw,110px)}.contact h2{font-family:var(--display);font-size:clamp(35px,4vw,58px);line-height:1.3}.contact>div:last-child>p{color:var(--muted)}.big-mail{display:inline-block;margin-top:30px;color:var(--blue);font-family:var(--mono);font-size:clamp(16px,2.5vw,30px);border-bottom:2px solid}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media (max-width:860px){
  .menu-button{display:block}.site-nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:20px;flex-direction:column;align-items:stretch;gap:0}.site-nav.open{display:flex}.site-nav a{padding:14px 0}.theme-button{text-align:left;padding:14px 0}
  .page-grid,.hero,.profile{grid-template-columns:1fr}.hero-index,.section-label{border-right:0;border-bottom:1px solid var(--line);padding:20px}.hero{min-height:auto}.hero-copy{padding:60px 24px}.hero h1{font-size:clamp(47px,13vw,70px)}.hero-object{min-height:auto;padding:30px}.focus-frame{aspect-ratio:1.3}.ticker{gap:30px}.section-content{padding:55px 24px}.section-heading{align-items:flex-start;flex-direction:column}.contact-sheet{grid-template-columns:1fr}.contact-frame,.frame-b,.frame-c{height:300px}.about-copy{padding:60px 24px}.site-footer{grid-template-columns:1fr;gap:10px}.site-footer a{text-align:left}.archive-hero>div:last-child{padding:55px 24px}.filter-bar{grid-template-columns:1fr}.filters{overflow-x:auto}.archive-list .note-list{padding:20px 24px 70px}.note-row,.note-list.large .note-row{grid-template-columns:1fr 25px;gap:10px}.note-meta{grid-column:1/-1}.gallery-grid{padding:25px 20px 60px}.gallery-card.portrait,.gallery-card.landscape,.gallery-card.square{grid-column:1/-1;min-height:420px}.photo-instruction{padding:30px;margin:0 20px 60px}.profile-copy{border-left:0;border-top:1px solid var(--line);padding:55px 24px}.profile-main{padding:55px 24px}blockquote,.contact>div:last-child{padding:60px 24px}
}