/* Credo Studio · v2 design system — paper, ink, one oxide mark */
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-wght-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
:root{--paper:#F3EFE6;--paper2:#E9E4D8;--ink:#1A1814;--ink2:#5F5952;--hair:#D3CBBC;--ox:#A63D24;--ox2:#EAD6CC;
--serif:"Newsreader",Georgia,"Times New Roman",serif;--sans:"Instrument Sans",Inter,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
--gutter:clamp(20px,4vw,56px);--max:1360px;--ease:cubic-bezier(.2,.7,.1,1);
--ease-entrance:cubic-bezier(.12,.336,.12,1);--ease-exit:cubic-bezier(.7,0,.85,.61);--ease-swap:cubic-bezier(.78,0,.22,1);--ease-pop:linear(0,.17494,.36232,.53402,.68084,.80079,.89465,.9641,1.01107,1.03744,1.045,1.04292,1.03389,1.01559,1.00502,1.00099,1);--ease-settle:linear(0,.21039,.41778,.60413,.7642,.89456,.99212,1.05355,1.075,1.06218,1.02157,.98905,.98203,.98519,.99495,.99913,1)}
*{box-sizing:border-box}html.lenis,html.lenis body{height:auto}html.lenis{scroll-behavior:auto!important}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--ox2)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.serif{font-family:var(--serif)}
.lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);font-weight:500}
.num{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ox);font-variant-numeric:tabular-nums}
.hr{height:1px;background:var(--hair)}
/* nav */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--ink)}
.nav .wrap{display:flex;align-items:center;height:72px;gap:28px}
.wm{font-family:var(--serif);font-style:italic;font-weight:400;font-size:27px;letter-spacing:-.01em;line-height:1}
.nav ul{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:26px;align-items:center;font-size:14px}
.nav ul a{position:relative;padding:4px 0}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav ul a:hover::after,.nav ul a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav ul a.cta{font-weight:500}
.nav ul a.cta::after{transform:scaleX(1);background:var(--ox)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.burger i{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0}
@media(max-width:820px){.nav ul{display:none;position:absolute;left:0;right:0;top:72px;background:var(--paper);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gutter) 22px;border-bottom:1px solid var(--hair)}.nav ul.open{display:flex}.nav ul li{width:100%;border-top:1px solid var(--hair)}.nav ul a{display:block;padding:14px 0;font-size:18px;font-family:var(--serif);font-weight:400}.nav ul a::after{display:none}.burger{display:block}}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;padding:14px 22px;border:1px solid var(--ink);border-radius:999px;transition:background .3s,color .3s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--ink);color:var(--paper)}.btn.solid:hover{background:#000;border-color:#000}
.lnk{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:2px}
.lnk i{font-style:normal;transition:transform .3s var(--ease)}.lnk:hover i{transform:translateX(5px)}
/* hero */
.hero{padding:clamp(64px,10vh,130px) 0 clamp(48px,7vw,90px)}
.hero .lbl{margin-bottom:26px;display:flex;gap:12px;align-items:flex-start}
.hero .lbl b{width:6px;height:6px;border-radius:50%;background:var(--ox);display:inline-block;flex:none;margin-top:calc(.8em - 3px)}
.h1{font-family:var(--serif);font-weight:300;font-size:clamp(46px,7.6vw,118px);line-height:.98;letter-spacing:-.022em;margin:0;max-width:12.5ch}
.h1 em{font-style:italic;font-weight:300}
.hero .sub{max-width:52ch;color:var(--ink2);font-size:clamp(16px,1.3vw,19px);margin:30px 0 34px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* doors */
.doors{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);display:grid;grid-template-columns:repeat(3,1fr)}
.door{display:flex;flex-direction:column;gap:16px;padding:34px 30px 30px;min-height:262px;position:relative;border-left:1px solid var(--hair);transition:background .4s var(--ease)}
.door:nth-child(3n+1){border-left:0}
.door:nth-child(n+4){border-top:1px solid var(--hair)}
.door:hover{background:var(--paper2)}
.door svg{width:30px;height:30px;stroke:var(--ink);fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.door .t{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.05;letter-spacing:-.01em;margin-top:auto}
.door .d{color:var(--ink2);font-size:14px;line-height:1.5;max-width:30ch}
.door .n{position:absolute;right:26px;top:32px;font-size:14px}
.door .ar{position:absolute;right:26px;bottom:28px;font-size:18px;transition:transform .35s var(--ease)}
.door:hover .ar{transform:translateX(6px)}
@media(max-width:900px){.doors{grid-template-columns:1fr 1fr}.door{border-left:0;min-height:220px}.door:nth-child(2n){border-left:1px solid var(--hair)}.door:nth-child(n+3){border-top:1px solid var(--hair)}}
@media(max-width:560px){.doors{grid-template-columns:1fr}.door{min-height:0;padding:26px 0 24px;border-left:0!important}.door:nth-child(n+2){border-top:1px solid var(--hair)}.door .n,.door .ar{right:0}}
/* sections */
.sec{padding:clamp(56px,8vw,110px) 0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:34px}
.sec-h h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.015em;line-height:1.05;margin:0}
/* work strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.case{display:block}
.case .im{aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:var(--paper2)}
.case img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.case:hover img{transform:scale(1.03)}
.case .cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px}
.case .cap b{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.2;max-width:26ch}
.case .cap span{font-size:12px;color:var(--ink2)}
@media(max-width:760px){.strip{grid-template-columns:1fr;gap:30px}}
/* flow */
.flow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);border-top:1px solid var(--hair);padding-top:40px}
.step{position:relative;padding-top:8px}
.step .big{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(64px,8vw,120px);line-height:.9;color:var(--ox);letter-spacing:-.03em}
.step h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,32px);margin:18px 0 10px;letter-spacing:-.01em}
.step p{color:var(--ink2);margin:0 0 18px;max-width:42ch}
@media(max-width:760px){.flow{grid-template-columns:1fr}}
/* footer */
.foot{background:var(--ink);color:var(--paper);padding:clamp(56px,8vw,110px) 0 30px}
.foot .lbl{color:#9C948A}
.foot .mail{font-family:var(--serif);font-weight:300;font-size:clamp(28px,4.6vw,64px);letter-spacing:-.02em;line-height:1.05;display:inline-block;margin:14px 0 40px;border-bottom:1px solid #4A443D;padding-bottom:6px;transition:border-color .3s}
.foot .mail:hover{border-color:var(--paper)}
.intents{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 44px}
.intents a{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid #33302B;border-radius:2px;transition:border-color .3s}
.intents a:hover{border-color:var(--paper)}
.intents .lbl{color:#9C948A}
.intents b{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.01em;word-break:break-all}
.intents span:last-child{color:#9C948A;font-size:13px}
@media(max-width:760px){.intents{grid-template-columns:1fr}}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;padding-top:34px;border-top:1px solid #33302B;font-size:14px}
.foot .cols p{color:#9C948A;margin:0;max-width:34ch}
.foot .cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot .cols a:hover{text-decoration:underline;text-underline-offset:3px}
.foot .bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:50px;color:#9C948A;font-size:12.5px}
@media(max-width:760px){.foot .cols{grid-template-columns:1fr 1fr}}
/* inner pages */
.page-h{padding:clamp(48px,7vw,96px) 0 clamp(28px,4vw,56px);border-bottom:1px solid var(--hair)}
.page-h h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6.2vw,92px);line-height:.98;letter-spacing:-.02em;margin:18px 0 0;max-width:14ch}
.page-h p{color:var(--ink2);max-width:56ch;font-size:clamp(16px,1.2vw,18px);margin:22px 0 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:start}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.prose p{color:var(--ink2);margin:0 0 16px;max-width:58ch}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,40px);letter-spacing:-.015em;margin:0 0 18px;line-height:1.1}
.list{list-style:none;margin:0;padding:0}
.list li{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:26px 0;border-top:1px solid var(--hair);align-items:baseline}
.list li:last-child{border-bottom:1px solid var(--hair)}
.list h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.15;margin:0 0 8px;letter-spacing:-.01em;text-wrap:balance}
@media(max-width:560px){.list li{grid-template-columns:40px 1fr;gap:10px}}
.list p{margin:0;color:var(--ink2);max-width:60ch}
.list p a,.prose p a,.page-h p a{border-bottom:1px solid currentColor;padding-bottom:1px}.list p a:hover,.prose p a:hover{color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:1px solid var(--hair);padding-top:22px}
.stats b{font-family:var(--serif);font-weight:300;font-size:clamp(36px,4vw,56px);display:block;letter-spacing:-.02em;line-height:1}
.stats span{color:var(--ink2);font-size:13px}
.portrait{aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--paper2)}
.portrait img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.faq details{border-top:1px solid var(--hair)}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-family:var(--serif);font-size:clamp(19px,1.8vw,24px);font-weight:400}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font-style:normal;color:var(--ink2);transition:transform .3s var(--ease)}.faq details[open] summary i{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--ink2);max-width:60ch}
.cases{display:flex;flex-direction:column;gap:clamp(40px,6vw,80px)}
.cases .case .im{aspect-ratio:16/10}
.cases .case .cap b{font-size:clamp(24px,2.6vw,36px)}
.cta-band{border-top:1px solid var(--hair);padding:clamp(40px,6vw,80px) 0;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-band h2{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.6vw,52px);letter-spacing:-.02em;margin:0;max-width:16ch;line-height:1.05;text-wrap:balance}
/* reveal */
[data-r]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-r].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-r]{opacity:1;transform:none;transition:none}}

/* running heads */
.rh{display:flex;align-items:baseline;gap:14px;margin-bottom:34px;border-top:1px solid var(--hair);padding-top:18px;flex-wrap:wrap}
.rh .eye{flex-basis:100%;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ox);font-weight:500;margin-bottom:-6px}
.rh .num{font-size:14px}
.rh h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.015em;line-height:1.05;margin:0}
.rh .r{margin-left:auto}
@media(max-width:560px){.rh{display:grid;grid-template-columns:minmax(0,1fr);row-gap:10px}.rh .eye{margin-bottom:0}.rh .r{grid-column:1/-1;justify-self:start;margin-left:0}}
/* templates strip */
.tpl{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tpl a{display:block}
.tpl .im{aspect-ratio:8/5;overflow:hidden;border-radius:2px;background:var(--paper2)}
.tpl img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tpl a:hover img{transform:scale(1.03)}
.tpl .cap{display:flex;justify-content:space-between;margin-top:10px;font-size:13px}
.tpl .cap b{font-family:var(--serif);font-weight:400;font-size:18px}
.tpl .cap span{color:var(--ink2);font-size:12px}
@media(max-width:760px){.tpl{grid-template-columns:1fr 1fr;gap:14px}}
/* live picks in flow */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.chip{border:1px solid var(--hair);border-radius:999px;padding:6px 12px;font-size:13px;background:transparent;cursor:pointer;font-family:var(--sans);color:var(--ink);display:inline-flex;gap:8px;align-items:center;transition:border-color .25s,background .25s}
.chip b{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ox)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed=true]{background:var(--paper2);border-color:var(--ink)}
.chip[aria-pressed=true]::after{content:"✓";color:var(--ox);font-weight:500}
.picks{border-top:1px solid var(--hair);padding-top:14px;margin:0 0 18px;font-size:14px;color:var(--ink2);max-width:42ch}
.picks b{color:var(--ink);font-weight:500}
.picks .num{font-size:14px;margin-right:4px}

/* journey steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.steps .door{min-height:250px}
.steps .door:nth-child(n+2){border-left:1px solid var(--hair)}
.steps .door:nth-child(n+4){border-top:0}
.steps .door::before{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);width:18px;height:18px;line-height:18px;text-align:center;font-size:12px;color:var(--ox);background:var(--paper);z-index:2}
.steps .door:last-child::before{display:none}
.steps .door .ar{display:none}
@media(min-width:561px){.steps .door .d{min-height:calc(3 * 1.5em)}}
.door .st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ox);font-weight:500;letter-spacing:.02em}
.door .st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ox)}
.about{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--hair)}
.about .door{min-height:0;flex-direction:row;align-items:center;gap:18px;padding:22px 30px;border-top:0}
.about .door:nth-child(2){border-left:1px solid var(--hair)}
.about .door svg{flex:none;width:26px;height:26px}
.about .door .t{font-size:22px;margin:0}.about .door .d{margin-left:auto;text-align:right;max-width:34ch}
.about .door .ar{position:static;margin-left:18px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps .door:nth-child(n+2){border-left:0}.steps .door:nth-child(2n){border-left:1px solid var(--hair)}.steps .door:nth-child(n+3){border-top:1px solid var(--hair)}.steps .door::before{display:none}.about{grid-template-columns:1fr}.about .door:nth-child(2){border-left:0;border-top:1px solid var(--hair)}.about .door .d{text-align:left;margin-left:0}}
@media(max-width:560px){.steps{grid-template-columns:1fr}.steps .door{border-left:0!important;min-height:0;padding:24px 0}.steps .door:nth-child(n+2){border-top:1px solid var(--hair)}.about .door{padding:20px 0;flex-wrap:wrap}.about .door .d{flex-basis:100%;margin-left:44px;order:2}.about .door .ar{order:1;margin-left:auto}}
/* journey bar */
.jbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--paper);border-top:1px solid var(--ink);transform:translateY(100%);transition:transform .42s var(--ease-exit)}.jbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;background:var(--paper);pointer-events:none}
.jbar.on{transform:none;transition:transform .62s var(--ease-settle)}
.jbar .wrap{display:flex;align-items:center;gap:18px;height:54px;font-size:13.5px}
.jbar .lbl{margin-right:4px}
.jbar .it{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.jbar .it b{font-family:var(--serif);font-weight:400;font-size:16px}
.jbar .it .num{font-size:13px}
.jbar .go{margin-left:auto;white-space:nowrap}
.jbar .x{background:none;border:0;color:var(--ink2);cursor:pointer;font-size:12px;padding:6px}
body.has-jbar{padding-bottom:54px}
@media(max-width:700px){.jbar .it.tpl span,.jbar .lbl{display:none}.jbar .wrap{gap:10px;font-size:12.5px}}
/* templates page */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 26px}
.filters button{border:1px solid var(--hair);background:transparent;border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.filters.intent{margin-bottom:12px}.filters.intent button{border-style:dashed}.filters.intent button[aria-pressed=true]{border-style:solid}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
@media(max-width:1000px){.tgrid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.tgrid{grid-template-columns:1fr}}
.tcard{display:flex;flex-direction:column;gap:10px;position:relative}
.tcard.hide{display:none}
.tcard .im{aspect-ratio:8/5;overflow:hidden;border-radius:2px;background:var(--paper2);position:relative}
.tcard .im img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tcard:hover .im img{transform:scale(1.03)}
.tcard .im .badge{position:absolute;left:10px;top:10px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:rgba(243,239,230,.92);padding:3px 8px;border-radius:3px;color:var(--ink2)}
.tcard .hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tcard .hd b{font-family:var(--serif);font-weight:400;font-size:24px}
.tcard .hd span{font-size:12px;color:var(--ink2);text-align:right}
.tcard p{margin:0;color:var(--ink2);font-size:14px;line-height:1.5}
.tcard .row{display:flex;gap:10px;align-items:center;margin-top:4px}
.tcard .use{border:1px solid var(--ink);background:transparent;border-radius:999px;padding:9px 16px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;color:var(--ink);transition:background .3s,color .3s}
.tcard .use:hover{background:var(--ink);color:var(--paper)}
.tcard.picked .use{background:var(--ink);color:var(--paper)}
.tcard.picked .im{outline:2px solid var(--ink);outline-offset:3px}
.tcard .lnk{font-size:13px}
.next{display:grid;grid-template-columns:1fr 1fr;gap:22px;border-top:1px solid var(--hair);padding-top:34px;margin-top:clamp(40px,6vw,80px)}
.next a{display:flex;flex-direction:column;gap:8px;padding:22px 24px;border:1px solid var(--hair);border-radius:2px;transition:border-color .3s}
.next a:hover{border-color:var(--ink)}
.next .t{font-family:var(--serif);font-weight:400;font-size:24px}.next .d{color:var(--ink2);font-size:14px}
@media(max-width:700px){.next{grid-template-columns:1fr}}

/* home motion (felt, not seen) */
.h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.h1 .w>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.h1.go .w>span{transform:none}
.magnet{will-change:transform;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.case .im{clip-path:inset(0 0 0 0)}
[data-r].case .im img{transform:scale(1.12);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
[data-r].case.in .im img{transform:scale(1)}
[data-r].case .im{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
[data-r].case.in .im{clip-path:inset(0 0 0 0)}
.case:hover img{transform:scale(1.03)!important}
@media(prefers-reduced-motion:reduce){.h1 .w>span{transform:none;transition:none}[data-r].case .im,[data-r].case .im img{clip-path:none;transform:none;transition:none}}

/* Chinese pages */
:root:lang(zh-CN){--serif:"Newsreader","Songti SC","Noto Serif CJK SC","Source Han Serif SC","SimSun",serif;--sans:"Instrument Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
:lang(zh-CN) .h1,:lang(zh-CN) .rh h2,:lang(zh-CN) .page-h h1,:lang(zh-CN) .door .t,:lang(zh-CN) .sec-h h2,:lang(zh-CN) .cta-band h2,:lang(zh-CN) .prose h2,:lang(zh-CN) .list h3,:lang(zh-CN) .foot .mail{letter-spacing:0}
:lang(zh-CN) .h1{font-size:clamp(40px,5.8vw,84px);font-weight:400;line-height:1.12;max-width:11em}@media(max-width:1024px){:lang(zh-CN) .h1{font-size:clamp(40px,5.4vw,84px)}}
@media(min-width:901px){:lang(zh-CN) .more a{grid-template-columns:64px 280px 1fr auto}}
:lang(zh-CN) .h1 em{font-style:normal;color:var(--ox)}
:lang(zh-CN) .page-h h1{font-weight:400;line-height:1.15;font-size:clamp(34px,5vw,72px);max-width:17em}
:lang(zh-CN) .cta-band h2{max-width:22em;line-height:1.2}
:lang(zh-CN) .live .meta h3,:lang(zh-CN) .tcard .hd b,:lang(zh-CN) .case .cap b{letter-spacing:0}
:lang(zh-CN) .lbl{letter-spacing:.08em}
:lang(zh-CN) body{line-height:1.75}
.nav ul a.lang{font-size:12.5px;color:var(--ink2);padding:3px 9px;border:1px solid var(--hair);border-radius:999px}
.nav ul a.lang::after{display:none}.nav ul a.lang:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:820px){.nav ul a.lang{display:inline-block;font-family:var(--sans);font-size:14px;margin-top:6px}}

/* live case blocks */
.live{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,3vw,40px);align-items:start;padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--hair)}
.live:first-child{border-top:0;padding-top:0}
.live .im{aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:var(--paper2)}
.live .im img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1s var(--ease)}
.live a.im:hover img{transform:scale(1.02)}
.live .meta .tag{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ox);font-weight:500;margin-bottom:10px}
.live .meta h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,40px);margin:0 0 8px;letter-spacing:-.01em;line-height:1.05}
.live .meta .k{font-size:12.5px;color:var(--ink2);margin:0 0 16px}
.live .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 18px;padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.live .facts b{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.6vw,36px);display:block;line-height:1;letter-spacing:-.02em}
.live .facts span{font-size:12px;color:var(--ink2)}
.live .meta p{color:var(--ink2);margin:0 0 12px;max-width:48ch}
.live .meta .lnk{margin-top:6px}
@media(max-width:820px){.live{grid-template-columns:1fr}}

/* featured work (home) */
.feat{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,3vw,44px);align-items:end}
.feat-im{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:var(--paper2)}
.feat-im img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1s var(--ease)}
.feat-im:hover img{transform:scale(1.02)}
.feat-meta .tag{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ox);font-weight:500;margin-bottom:10px}
.feat-meta h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,36px);line-height:1.08;letter-spacing:-.01em;margin:0 0 12px}
.feat-meta p{color:var(--ink2);margin:0 0 16px;max-width:40ch}
.more{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--hair)}
.more a{display:grid;grid-template-columns:64px 200px 1fr auto;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hair);transition:padding-left .3s var(--ease)}
.more a:hover{padding-left:8px}
.more .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ox);font-weight:500}
.more b{font-family:var(--serif);font-weight:400;font-size:20px}
.more span:not(.k){color:var(--ink2);font-size:14px}
.more i{font-style:normal;transition:transform .3s var(--ease)}.more a:hover i{transform:translateX(5px)}
@media(max-width:900px){.feat{grid-template-columns:1fr}.more a{grid-template-columns:56px 1fr auto}.more span:not(.k){grid-column:2;font-size:13px}}

/* one small delight: strike & swap */
.swap{white-space:nowrap}
.swap s{text-decoration:none;position:relative;color:var(--ink2)}
.swap s::after{content:"";position:absolute;left:0;right:0;top:55%;height:1.5px;background:var(--ox);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) 1.1s}
.swap em{font-style:normal;color:var(--ink);border-bottom:1px solid var(--ox);opacity:0;transition:opacity .5s var(--ease) 1.5s}
.h1.go ~ .sub .swap s::after,.sub.in .swap s::after{transform:scaleX(1)}
.h1.go ~ .sub .swap em,.sub.in .swap em{opacity:1}
@media(prefers-reduced-motion:reduce){.swap s::after{transform:scaleX(1);transition:none}.swap em{opacity:1;transition:none}}

/* case skeleton */
.cs{margin:0 0 16px;display:grid;grid-template-columns:88px 1fr;gap:10px 16px}
.cs dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ox);font-weight:500;padding-top:4px}
.cs dd{margin:0;color:var(--ink2);max-width:50ch}
.cs dd em{font-style:italic;color:var(--ink)}
.cs-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
@media(max-width:560px){.cs{grid-template-columns:1fr;gap:4px}.cs dd{margin-bottom:8px}}

/* notes */
.post h2{font-size:clamp(20px,1.9vw,26px);margin:26px 0 10px;line-height:1.2}.post h2:first-child{margin-top:0}.post p{color:var(--ink2);max-width:60ch;margin:0 0 14px}.post p a{border-bottom:1px solid currentColor}

/* ===== Red Edge: hero stage ===== */
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:start}
.hero .copy{min-width:0}
.stage-rl{position:relative;aspect-ratio:4/5;max-height:62vh;width:100%;justify-self:end;overflow:hidden;background:#17150F;isolation:isolate;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.stage-rl[data-r].in{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.stage-rl .sheet{position:absolute;inset:0;transform:translateY(var(--lift,0));transition:none;will-change:transform}
.stage-rl img,.stage-rl canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stage-rl img{filter:brightness(.35);transition:filter 1.2s cubic-bezier(.33,1,.68,1)}
.stage-rl.lights-on img{filter:brightness(1)}
.stage-rl:not(.lights-on) img{animation:stage-failsafe 1.2s cubic-bezier(.33,1,.68,1) 3s forwards}@keyframes stage-failsafe{to{filter:brightness(1)}}
.stage-rl canvas{opacity:0;transition:opacity .3s}
.stage-rl.gl-ready canvas{opacity:1}
.stage-rl .plate{position:absolute;left:14px;bottom:12px;z-index:2;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,239,230,.55);text-decoration:none;opacity:0;transition:opacity .6s 1.6s,color .3s}
.stage-rl.lights-on .plate{opacity:1}.stage-rl .plate:hover{color:var(--paper)}
.h1 .dot{transition:color .5s .9s}.h1.go .dot{color:var(--ox)}@media(prefers-reduced-motion:reduce){.h1 .dot{color:var(--ox);transition:none}}
@media(max-width:1024px){.hero .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}.stage-rl{aspect-ratio:4/5;max-height:none;justify-self:stretch;margin-top:8px;transform:none!important}}
@media(prefers-reduced-motion:reduce){.stage-rl img{filter:none;transition:none;animation:none}.stage-rl{transform:none!important}}
/* ===== Red Edge: doors get objects + edge paint ===== */
.door{position:relative}
.door::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ox);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.door:hover::after{transform:scaleX(1)}
.steps .door:hover{background:#F8F5EE}
.door .obj{position:absolute;right:18px;top:14px;width:132px;height:132px;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.steps .door:hover .obj{transform:translateY(-4px) scale(1.02)}
.steps .door svg{display:none}
.steps .door{min-height:322px;background:var(--paper)}.steps .door .st{margin-top:120px}
@media(max-width:900px){.door .obj{width:104px;height:104px;right:10px;top:10px}.steps .door{min-height:280px}.steps .door .st{margin-top:96px}}
@media(max-width:560px){.door .obj{width:84px;height:84px;right:0;top:18px}.steps .door{padding-right:96px;min-height:0}.steps .door .st{margin-top:0}}
/* step slider on the top hairline */
.steps{position:relative}
.steps .slider{position:absolute;top:-1px;left:0;z-index:1;height:2px;width:25%;background:var(--ox);transform:translateX(var(--sx,0%));transition:transform .5s cubic-bezier(.16,1,.3,1),width .3s;pointer-events:none}
@media(max-width:900px){.steps .slider{display:none}.steps .door.cur{box-shadow:inset 0 2px 0 var(--ox)}}
/* featured as proof print + edge paint on templates */
.feat-im{padding:10px;background:#FBF9F4;border:1px solid var(--hair);aspect-ratio:auto;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .8s}
.feat-im:hover{box-shadow:0 18px 40px -24px rgba(26,24,20,.35)}
.feat-im picture{display:block;aspect-ratio:16/10;overflow:hidden}
.feat-im img{object-position:top;transition:object-position 6s linear,transform 1s var(--ease)}
.feat-im:hover img{object-position:bottom;transform:none}
.tpl a{position:relative}.tpl a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--ox);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.tpl a:hover::after{transform:scaleX(1)}.tpl a:hover img{transform:none}