:root{color-scheme:light;scroll-behavior:smooth;--paper:#f7edde;--ink:#221912;--muted:#675348;--line:#baa498;--red:#a32921;--deep:#8a2019;--cream:#fff4e4;--gutter:clamp(18px,5vw,68px);--mono:ui-monospace,SFMono-Regular,monospace;--serif:Georgia,"Songti SC",serif;font-family:system-ui,-apple-system,"PingFang SC","Microsoft Yahei",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);line-height:1.55}
a{color:inherit;text-decoration:none}
button,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus,var(--red));outline-offset:4px}
.skip{position:fixed;z-index:10;top:12px;left:12px;transform:translateY(-170%);background:var(--paper);padding:.6em 1em}
.skip:focus{transform:none}
.wrap{max-width:calc(1150px + 2 * var(--gutter));padding-inline:var(--gutter);margin-inline:auto}
.top,.header-controls,.top nav{display:flex;align-items:center}
.top{justify-content:space-between;gap:10px 18px;min-height:74px;border-block-end:1px solid var(--line)}
.header-controls{gap:clamp(6px,2.7vw,28px)}
.top nav{gap:clamp(4px,1.8vw,18px)}
.top nav a,.language-switch{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding-inline:8px;font-size:13px;font-weight:750;white-space:nowrap}
.brand{display:inline-flex;align-items:center;gap:.4em;min-height:44px;font-weight:900;letter-spacing:.02em;overflow-wrap:anywhere}
.mark,.eyebrow,h1 span{color:var(--red)}
.mark{font-size:1.2em}
.language-switch{min-width:44px;border:1px solid var(--ink)}
.language-switch:hover{background:var(--ink);color:var(--paper)}
.top nav a:hover,footer a:hover{text-decoration:underline;text-underline-offset:4px}
.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(18px,5vw,68px);padding-block-start:clamp(20px,4vw,50px)}
.eyebrow,.note,figcaption,.work-meta,.step-num,.rates thead,.num{font:700 11px/1.5 var(--mono);letter-spacing:.06em}
.eyebrow{margin:0 0 10px}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1{font:700 clamp(60px,10.5vw,146px)/.78 var(--serif);letter-spacing:-.095em}
.intro{font-size:clamp(22px,3vw,40px);font-weight:800;line-height:1.12;margin:clamp(20px,3vw,30px) 0 10px}
.sub,.work-card p{color:var(--muted);font-size:clamp(15px,1.4vw,17px);max-width:47ch}
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid transparent;background:var(--red);color:var(--cream);font-size:14px;font-weight:750;padding:9px 14px;min-height:46px}
.cta:hover{filter:brightness(.9)}
.hero .cta{margin-top:19px}
.shot{display:block;width:100%;aspect-ratio:1.72;background:#b9634c url("assets/frame.jpg") no-repeat 0 50%/200% auto}
.shot-1{background-position:100% 50%}
.hero-art .shot{aspect-ratio:1.1;background-position:0 48%}
figcaption{display:flex;justify-content:space-between;gap:8px;padding-block:7px;color:var(--muted)}
.reel{padding-top:clamp(28px,5vw,52px)}
.reel-box{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 20px;background:#efe0cf;border-inline-start:4px solid var(--red);padding:clamp(16px,3vw,29px)}
.reel h2{font:700 clamp(25px,3.4vw,43px)/1.1 var(--serif);letter-spacing:-.025em;margin-bottom:6px}
.reel p:not(.eyebrow){color:var(--muted)}
.section{padding-block:clamp(38px,6vw,76px)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:7px 16px;margin-bottom:19px;flex-wrap:wrap}
.section-head h2{font:700 clamp(34px,5vw,69px)/.98 var(--serif);letter-spacing:-.055em}
.work .section-head,.process .section-head{padding-top:14px;border-top:1px solid var(--line)}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,4vw,42px)}
.work-open{background:transparent;width:100%;display:block;padding:0;border:0;text-align:left}
.work-open:hover .shot{filter:brightness(1.07)}
.work-meta{display:flex;justify-content:space-between;padding-block:8px;color:var(--muted);border-bottom:1px solid var(--line)}
.work-card h3{font:700 clamp(24px,3vw,38px)/1.12 var(--serif);margin:10px 0 7px}
.process{padding-bottom:clamp(36px,6vw,70px)}
.process-art{margin-bottom:12px}
.process-art img{display:block;width:100%;height:auto}
.process ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:0;border-block:1px solid var(--line)}
.process li{padding:14px 18px;border-inline-end:1px solid var(--line)}
.process li:first-child{padding-inline-start:0}
.process li:last-child{border-inline-end:0}
.process h3{font-size:clamp(16px,2vw,22px);margin:4px 0 5px}
.process li p{font-size:14px;color:var(--muted)}
.step-num{color:var(--red)}
.commission{background:var(--deep);color:var(--cream);--focus:#fff5df}
.commission .eyebrow{color:inherit}
.rates{border-collapse:collapse;width:100%;text-align:left;table-layout:fixed}
.rates th,.rates td{padding:12px clamp(7px,2vw,18px);border-block-end:1px solid #cc9385;vertical-align:top}
.rates thead th{border-top:1px solid #cc9385;text-align:left}
.rates thead th:first-child{width:29%}
.rates thead th:last-child{width:22%;text-align:right}
.rates tbody th{font-size:clamp(15px,1.8vw,20px);line-height:1.3}
.rates tbody td{font-size:14px}
.num{display:block;margin-bottom:4px;opacity:.85}
.rates .price{font-size:clamp(16px,2.3vw,27px);font-weight:800;text-align:right;line-height:1.3}
.terms{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px 28px;margin-top:19px}
.terms dt{font-weight:800;margin-bottom:4px}
.terms dd{font-size:14px}
.commission-end{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.commission .cta{background:var(--cream);color:var(--deep)}
footer{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;font:12px/1.6 var(--mono);padding-block:24px;color:var(--muted)}
dialog{color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:clamp(14px,4vw,28px);width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
dialog::backdrop{background:#231208b9}
dialog h2{margin:.55em 0 .25em}
dialog p{margin:.4em 0 .8em}
.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font:12px var(--mono);color:var(--red)}
.dialog-head button{border:1px solid var(--line);background:none;font-size:24px;width:44px;height:44px}
textarea{resize:vertical;width:100%;display:block;margin:6px 0 12px;padding:10px;border:1px solid var(--line);background:var(--paper);font-size:16px}
#copy-status{min-height:1.5em;font-size:13px}
@media(max-width:720px){
 .hero,.work-grid,.terms,.process ol{grid-template-columns:minmax(0,1fr)}
 .hero{gap:19px}
 .hero h1{font-size:clamp(62px,15.5vw,104px)}
 .hero-art .shot{aspect-ratio:1.45}
 .process li,.process li:first-child{padding:12px 0;border-inline-end:0;border-block-end:1px solid var(--line)}
 .process li:last-child{border-block-end:0}
 .rates,.rates tbody{display:block}
 .rates thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .rates tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;padding:12px 0;border-block-start:1px solid #cc9385}
 .rates tbody tr:last-child{border-block-end:1px solid #cc9385}
 .rates th,.rates td{padding:0;border:0}
 .rates td:nth-child(2){grid-area:2 / 1 / 3 / -1}
 .rates .price{grid-area:1 / 2;font-size:16px;text-align:right}
 .rates .num{display:none}
}
@media(max-width:390px){
 .top{min-height:62px}
 .top nav a,.language-switch{font-size:12px;padding-inline:5px}
 .top nav{gap:2px}
 .brand{font-size:14px}
 .reel-box .cta,.commission-end .cta{width:100%}
}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}