:root { --paper:#f5f3e9; --ink:#293c35; --muted:#7b8371; --line:#d8dccb; --copper:#a76b47; --sage:#e7eadc; --ease:cubic-bezier(.2,.75,.2,1); color-scheme:light; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; font-size:14px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; }
a { color:inherit; text-decoration:none; }
button,textarea { font:inherit; color:inherit; }
button,a,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,textarea:focus-visible { outline:2px solid var(--copper); outline-offset:5px; }
[hidden] { display:none!important; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-family:"Songti SC","Noto Serif CJK SC","STSong",Georgia,serif; font-weight:500; }
.section-width { width:min(1240px,calc(100% - 112px)); margin-inline:auto; }
.skip-link { position:fixed; top:-60px; left:20px; z-index:100; padding:12px; background:var(--ink); color:var(--paper); }
.skip-link:focus { top:8px; }
.site-header { height:88px; padding-inline:clamp(24px,4.1vw,64px); display:flex; align-items:center; gap:30px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand > span:first-of-type { font-family:Georgia,"Times New Roman",serif; font-size:29px; letter-spacing:-1.4px; }
.brand-caption { font-size:10px; color:#8b917f; letter-spacing:2px; padding-left:14px; border-left:1px solid #c9cebb; margin-left:5px; }
.main-nav { display:flex; align-items:center; gap:30px; margin-left:auto; font-size:12px; color:#75806d; }
.main-nav a { position:relative; padding:12px 0; }
.main-nav a::after { content:""; position:absolute; left:0; right:0; bottom:5px; height:1px; background:var(--copper); transform:scaleX(0); transform-origin:left; transition:transform 220ms var(--ease); }
.main-nav a:hover { color:var(--copper); }
.main-nav a:hover::after { transform:scaleX(1); }
.header-cta { font-size:12px; border:1px solid #b7c0a7; padding:10px 16px; border-radius:4px; margin-left:12px; transition:background 180ms; }
.header-cta:hover { background:#e7eadb; }
.header-cta span { margin-left:20px; color:#8f9c80; }
.hero { display:grid; grid-template-columns:.95fr 1.05fr; min-height:620px; align-items:center; gap:10px; padding-block:58px 54px; }
.eyebrow { font:9px/1.7 ui-monospace,"SFMono-Regular",Consolas,monospace; letter-spacing:1.7px; color:var(--muted); }
.hero .eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:25px; }
.tiny-cross { font-size:20px; color:#a47551; }
.hero h1 { font-size:clamp(46px,5.25vw,76px); line-height:1.29; letter-spacing:-1.7px; }
.hero h1 em { font-style:normal; color:var(--copper); }
.hero-description { font-size:13px; line-height:2; color:#7c8472; margin-top:26px; }
.hero-actions { display:flex; align-items:center; gap:30px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:32px; border:1px solid transparent; border-radius:4px; padding:14px 20px; font-size:12px; transition:transform 220ms var(--ease),background 180ms,box-shadow 220ms; }
.button:hover { transform:translateY(-2px); box-shadow:0 5px 12px #2e3a2420; }
.button:active { transform:translateY(0); }
.button.solid { background:var(--ink); color:#f5f4e9; }
.button.solid:hover { background:#3f5345; }
.button span { font-size:16px; transition:transform 220ms var(--ease); }
.button:hover span { transform:translate(2px,-2px); }
.text-link { display:inline-flex; align-items:center; gap:18px; font-size:11px; color:#79836f; padding:9px 0; }
.text-link:hover { color:var(--copper); }
.hero-footnote { display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:1px; color:#969c8a; margin-top:40px; }
.fine-rule { display:block; width:30px; height:1px; background:#aab39b; }
.hero-figure { position:relative; min-width:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.figure-top { display:flex; align-items:center; justify-content:space-between; padding:0 15px 0 32px; font:8px/1.8 ui-monospace,Consolas,monospace; letter-spacing:1.1px; color:#9ca38f; }
.figure-top b { font-weight:400; color:#a5734b; margin-left:7px; }
.study-tag { font-family:inherit; font-size:10px; letter-spacing:1px; }
.study-stage { position:relative; aspect-ratio:660/470; width:calc(100% + 48px); margin-left:-24px; }
.study-image { display:block; width:100%; height:100%; object-fit:contain; animation:study-in 650ms var(--ease) both; }
.hero-figure figcaption { margin-top:-4px; padding:0 15px 0 32px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.hero-figure figcaption > span { font-size:8px; color:#a0a692; letter-spacing:.5px; }
.study-switch { display:flex; gap:15px; }
.study-switch button { background:none; border:0; border-bottom:1px solid transparent; padding:8px 0; font-size:10px; color:#9ca38e; transition:color 180ms,border-color 180ms; }
.study-switch button[aria-pressed="true"] { color:#8f623f; border-color:#af8158; }
.conventions { display:flex; gap:32px; align-items:center; justify-content:space-between; padding:21px 0; border-block:1px solid var(--line); color:#7a8470; font-size:10px; }
.conventions i { font:9px ui-monospace,Consolas,monospace; color:#b1b59f; font-style:normal; margin-right:12px; }
.convention-end { margin-left:auto; font:8px ui-monospace,Consolas,monospace; letter-spacing:2px; color:#a5ad96; }
.drawing-section { padding-top:85px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:33px; }
.section-heading h2 { font-size:34px; margin-top:13px; letter-spacing:-.7px; }
.section-aside { font-size:11px; line-height:1.9; color:#929a84; }
.drawing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.drawing-entry { display:block; padding:0 25px 0 0; }
.drawing-entry + .drawing-entry { padding-left:25px; border-left:1px solid var(--line); }
.drawing-entry:last-child { padding-right:0; }
.drawing-visual { position:relative; height:225px; display:flex; align-items:center; overflow:hidden; background:#ebeddf; border-radius:2px; transition:background 300ms; }
.drawing-visual > img,.drawing-visual > svg { display:block; width:100%; height:100%; object-fit:contain; transition:transform 450ms var(--ease); }
.drawing-visual > img { transform:scale(1.12); }
.drawing-entry:hover .drawing-visual { background:#e3e7d6; }
.drawing-entry:hover .drawing-visual > img { transform:scale(1.18) translateY(-3px); }
.drawing-entry:hover .drawing-visual > svg { transform:scale(1.04); }
.entry-index { position:absolute; top:15px; left:16px; font:7px ui-monospace,Consolas,monospace; letter-spacing:1px; color:#939d83; }
.entry-heading { display:flex; align-items:center; justify-content:space-between; margin-top:22px; }
.entry-heading h3 { font-size:23px; }
.entry-heading > span { color:#9aab8b; font-size:19px; transition:transform 200ms; }
.drawing-entry:hover .entry-heading > span { transform:translate(2px,-2px); color:var(--copper); }
.drawing-entry > p { margin-top:12px; font-size:11px; line-height:1.9; color:#87917b; }
.entry-meta { display:block; margin-top:19px; padding-top:12px; border-top:1px solid #dfe2d3; font-size:9px; color:#9aa38d; }
.workflow-section { margin-top:95px; padding-block:68px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1.25fr; gap:70px; }
.workflow-intro h2 { font-size:39px; line-height:1.5; margin-top:13px; letter-spacing:-.5px; }
.workflow-intro > p:not(.eyebrow) { margin-top:17px; font-size:11px; line-height:2; color:#8c967e; }
.workflow-intro .text-link { margin-top:20px; }
.workflow-list { list-style:none; padding:0; margin:0; }
.workflow-list li { display:flex; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); }
.workflow-list li:first-child { padding-top:0; }
.workflow-list li:last-child { border-bottom:0; padding-bottom:0; }
.workflow-number { padding-top:5px; font:10px ui-monospace,Consolas,monospace; color:#aa875c; }
.workflow-list h3 { font-size:21px; margin-bottom:10px; }
.workflow-list p { color:#8a947c; line-height:1.9; font-size:11px; max-width:345px; }
.workflow-symbol { margin-left:auto; font-size:24px; line-height:1; color:#aeb69b; font-weight:300; }
.start-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; background:#2d4438; color:#f1f0e4; padding:55px; border-radius:3px; position:relative; overflow:hidden; }
.start-section::before { content:""; position:absolute; width:290px; height:290px; border:1px solid #637a5c30; transform:rotate(30deg); left:-110px; bottom:-220px; }
.start-section .eyebrow { color:#9aa88b; }
.start-copy h2 { font-size:39px; line-height:1.5; margin-top:13px; }
.start-copy > p:last-child { font-size:11px; line-height:1.9; color:#a2ae92; margin-top:18px; }
.brief-composer { align-self:center; padding:21px; background:#f5f4e9; border-radius:4px; color:var(--ink); position:relative; }
.brief-composer > label { font-size:10px; color:#829074; }
.brief-composer textarea { resize:vertical; display:block; width:100%; background:transparent; border:0; padding:13px 0; font-size:12px; line-height:1.9; min-height:110px; outline-offset:0; }
.brief-composer textarea::placeholder { color:#a0aa90; }
.brief-composer textarea:focus { outline:0; }
.brief-composer:focus-within { box-shadow:0 0 0 3px #94a88250; }
.brief-suggestions { display:flex; gap:5px; flex-wrap:wrap; }
.brief-suggestions button { border:1px solid #d4dac6; padding:5px 9px; background:none; border-radius:3px; color:#8a967b; font-size:9px; transition:background 180ms; }
.brief-suggestions button:hover { background:#e4e9d7; }
.brief-bottom { display:flex; gap:14px; justify-content:space-between; align-items:center; border-top:1px solid #dce1d0; margin-top:15px; padding-top:15px; }
.brief-bottom > span { font-size:9px; color:#a0a98f; }
.button.light { background:#dce4cb; color:#526247; padding:10px 12px; gap:18px; font-size:10px; white-space:nowrap; }
#brief-status { font-size:11px; color:#975a36; line-height:1.8; margin-top:10px; }
.practical-section { display:grid; grid-template-columns:1fr 1.15fr; gap:80px; padding-block:75px; border-bottom:1px solid var(--line); }
.practical-section h2 { font-size:27px; margin-top:13px; }
.practical-notes { display:grid; gap:20px; }
.practical-notes p { font-size:11px; line-height:2; color:#8a947c; }
.practical-notes strong { font-weight:500; color:#596b4e; }
.site-footer { display:flex; align-items:center; flex-wrap:wrap; gap:26px; padding-block:33px; }
.site-footer .brand > span { font-size:25px; }
.site-footer > p { font-size:10px; color:#99a18a; }
.site-footer > div { margin-left:auto; display:flex; gap:25px; font-size:9px; color:#89957b; }
.site-footer a:hover { color:var(--copper); }
.footer-note { width:100%; text-align:right; font:8px ui-monospace,Consolas,monospace; letter-spacing:2px; color:#abb19c; padding-top:8px; }
.js-reveal .reveal { opacity:0; transform:translateY(22px); transition:opacity 600ms var(--ease),transform 600ms var(--ease); }
.js-reveal .reveal.is-visible { opacity:1; transform:none; }
@keyframes study-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1600px) { .hero { min-height:710px; } }
@media(max-width:1100px) { .section-width { width:calc(100% - 64px); } .site-header { gap:20px; } .main-nav { gap:20px; } .brand-caption { display:none; } .hero { min-height:560px; } .hero h1 { font-size:56px; } .figure-top,.hero-figure figcaption { padding-inline:12px; } .study-tag { display:none; } .conventions { gap:12px; } .convention-end { display:none; } .drawing-visual { height:190px; } .start-section { gap:35px; padding:40px; } .workflow-section { gap:45px; } }
@media(max-width:760px) { .section-width { width:calc(100% - 40px); } .site-header { height:72px; padding-inline:20px; gap:12px; } .brand { gap:7px; } .brand img { width:31px; height:31px; } .brand > span:first-of-type { font-size:25px; } .main-nav { display:none; } .header-cta { margin-left:auto; padding:9px 11px; font-size:10px; } .header-cta span { margin-left:9px; } .hero { grid-template-columns:1fr; gap:30px; padding:44px 0 28px; } .hero h1 { font-size:57px; } .hero .eyebrow { margin-bottom:18px; font-size:8px; } .hero-description { font-size:12px; line-height:2; margin-top:22px; } .hero-actions { margin-top:25px; } .hero-footnote { margin-top:25px; } .hero-figure { margin-top:6px; } .figure-top { font-size:7px; } .study-tag { display:block; font-size:8px; } .study-stage { width:100%; margin-left:0; } .hero-figure figcaption { margin-top:-16px; } .conventions { gap:9px; padding-block:17px; font-size:8px; } .conventions i { display:none; } .drawing-section { padding-top:54px; } .section-heading h2 { font-size:29px; } .section-heading .eyebrow { font-size:7px; letter-spacing:1.3px; } .section-aside { display:none; } .drawing-grid { grid-template-columns:1fr; gap:30px; } .drawing-entry,.drawing-entry + .drawing-entry,.drawing-entry:last-child { padding:0; border:0; } .drawing-visual { height:auto; aspect-ratio:1.65; } .drawing-visual > img,.drawing-visual > svg { height:100%; position:absolute; inset:0; } .entry-heading { margin-top:16px; } .drawing-entry > p br { display:none; } .drawing-entry > p { margin-top:9px; } .entry-meta { margin-top:11px; } .workflow-section { margin-top:55px; padding-block:44px; grid-template-columns:1fr; gap:32px; } .workflow-intro h2 { font-size:34px; } .workflow-intro h2 br { display:none; } .workflow-intro .text-link { margin-top:10px; } .workflow-list li { gap:18px; padding-block:22px; } .workflow-list h3 { font-size:20px; } .start-section { grid-template-columns:1fr; gap:27px; padding:29px 23px; } .start-copy h2 { font-size:32px; } .start-copy h2 br { display:none; } .start-copy > p:last-child { margin-top:11px; } .brief-composer { padding:17px; } .brief-bottom { gap:8px; } .brief-bottom > span { max-width:105px; line-height:1.7; font-size:8px; } .practical-section { grid-template-columns:1fr; gap:22px; padding-block:45px; } .practical-section h2 { font-size:26px; } .practical-notes { gap:13px; } .site-footer { padding-block:27px; gap:17px; } .site-footer > p { margin-left:auto; font-size:9px; } .site-footer > div { width:100%; margin:0; gap:22px; } .footer-note { text-align:left; font-size:7px; letter-spacing:1.5px; padding-top:4px; } }
@media(max-width:370px) { .hero h1 { font-size:49px; } .study-tag { display:none; } .brief-bottom { flex-wrap:wrap; } .brief-bottom > span { max-width:none; } .hero-figure figcaption > span { font-size:7px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .js-reveal .reveal { opacity:1; transform:none; } }

/* Keep supporting copy comfortable at normal browser zoom. */
.hero-description { font-size:14px; }
.main-nav,.header-cta,.button { font-size:13px; }
.section-aside { font-size:12px; }
.drawing-entry > p,.workflow-intro > p:not(.eyebrow),.workflow-list p,.start-copy > p:last-child,.practical-notes p { font-size:13px; }
.entry-meta { font-size:10px; }
.brief-composer textarea { font-size:13px; }
@media(max-width:760px) { .hero-description { font-size:13px; } .header-cta { font-size:11px; } .drawing-entry > p,.workflow-intro > p:not(.eyebrow),.workflow-list p,.start-copy > p:last-child,.practical-notes p { font-size:12px; } }