@font-face{font-family:'Figtree';font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/figtree-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/figtree-italic.woff2) format('woff2')}
/* light, warm paper; one sans family throughout */
:root{--bg:#F4EEE3;--surface:rgb(250 246 238/.94);--line:#E0D3BC;--hair:#E8DDCB;--ink:#2B2620;--body:#5E5548;--muted:#8A8174;--accent:#C9791A;--accent-ink:#8F5410;--sage:#4F7A52;
  --sans:'Figtree',system-ui,sans-serif;
  --soft:0 1px 0 rgb(255 255 255/.7) inset,0 24px 48px -24px rgb(110 80 40/.28),0 2px 8px rgb(110 80 40/.08);
  --soft-lift:0 1px 0 rgb(255 255 255/.7) inset,0 30px 56px -24px rgb(110 80 40/.34),0 4px 12px rgb(110 80 40/.1);}
body{margin:0;overflow-x:clip;-webkit-font-smoothing:antialiased;color:var(--ink);font-family:var(--sans);line-height:1.6;
  background:url(images/paper.webp),radial-gradient(1500px 780px at 88% -160px,rgba(240,231,215,1) 0%,rgba(240,231,215,.72) 38%,rgba(240,231,215,0) 72%),radial-gradient(1100px 520px at 20% -220px,rgba(240,231,215,.55) 0%,rgba(240,231,215,0) 70%),var(--bg);background-repeat:repeat,no-repeat,no-repeat}
*,*::before,*::after{box-sizing:border-box}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
a:focus-visible,input:focus-visible+.nav-toggle{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.eyebrow{font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.h1{margin:16px 0 0;font-weight:700;font-size:clamp(2.6rem,5.4vw,4.1rem);line-height:1.02;letter-spacing:-.03em}
.h1 em{display:block;font-style:normal;font-weight:500;color:#A26214;text-wrap:balance}
.h2{margin:10px 0 0;font-weight:700;font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.12;letter-spacing:-.025em}
.h3{margin:0;font-weight:700;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
.lead{margin-top:20px;max-width:40ch;font-size:1.12rem;line-height:1.65;color:var(--body)}
.soft{color:var(--body)}
.btn{display:inline-flex;align-items:center;gap:.55em;min-height:48px;padding:.8em 1.35em;border-radius:12px;border:1px solid transparent;font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap;transition:background-color .25s,border-color .25s,color .25s}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn-primary{background:#E49332;color:#221A10}
.btn-primary:hover{background:var(--accent);color:#221A10}
.btn-outline{background:rgba(255,255,255,.45);border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-ink)}
/* header: same paper as the page, a hairline underneath */
.site-header{position:sticky;top:0;z-index:20;background:rgba(244,238,227,.82);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);border-bottom:1px solid var(--hair)}
.brand{display:flex;flex-direction:column;line-height:1.05;text-decoration:none}
.brand b{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink)}
.brand span{margin-top:3px;font-weight:700;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 clamp(14px,2vw,26px);list-style:none;margin:0;padding:0}
.nav a{display:inline-block;padding:12px 0 10px;border-bottom:2px solid transparent;font-size:.9rem;font-weight:600;color:var(--body);text-decoration:none}
.nav a:hover{color:var(--ink)}
.hero{position:relative;z-index:1;padding:clamp(40px,6vw,72px) 0 clamp(24px,4vw,48px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:920px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero-art{max-width:640px;width:100%;margin:0 auto}}
/* the painting sits right; the handwritten notes live in the gutter on its left */
.hero-art{position:relative;width:100%;aspect-ratio:1200/1000}
.painting{position:absolute;top:0;right:0;display:block;width:83.333%;aspect-ratio:1/1}
.notes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
@media (max-width:560px){.hero-art{aspect-ratio:1/1}.painting{width:100%}.notes{display:none}}
.layer{position:absolute;inset:0;display:block;width:100%;height:100%}
/* cards: cream slip, a soft coloured edge, a warm shadow — like a wash settling on the paper */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--soft)}
.t-sage{border-color:#C7D2B6}.t-clay{border-color:#E5C6B1}.t-ochre{border-color:#E8D2A6}.t-sky{border-color:#C6D5DA}
.trust{display:flex;flex-wrap:wrap}
.trust-item{flex:1 1 220px;padding:22px 18px;text-align:center;border-left:1px solid var(--hair)}
.trust-item:first-child{border-left:none}
.trust-item strong{display:block;margin-bottom:2px;font-weight:700;font-size:1.08rem;letter-spacing:-.01em}
.trust-item span{font-size:.86rem;color:var(--muted)}
.section{position:relative;z-index:1;padding:clamp(64px,8vw,104px) 0}
.head{display:flex;flex-direction:column;gap:4px;max-width:58ch;margin-bottom:clamp(28px,4vw,44px)}
.intro-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;margin:-8px 0 clamp(28px,4vw,40px)}
@media (max-width:700px){.intro-duo{grid-template-columns:minmax(0,1fr)}}
.intro-duo div{display:flex;gap:14px;align-items:flex-start}
.ic{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(79,122,82,.12);color:var(--sage)}
.ic svg{width:22px;height:22px}
/* a wrapping row: four cards a row, two below 1000px, one below 520px; a short last row stays left-aligned */
.cat-grid{display:flex;flex-wrap:wrap;gap:22px}
.cat-grid>.cat-card{flex:0 0 calc((100% - 3 * 22px) / 4);min-width:0}
@media (max-width:1000px){.cat-grid>.cat-card{flex-basis:calc((100% - 22px) / 2)}}
@media (max-width:520px){.cat-grid>.cat-card{flex-basis:100%}}
.cat-card{display:flex;flex-direction:column;padding:12px 12px 20px;color:var(--ink);text-decoration:none;transition:transform .35s ease,box-shadow .35s ease}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--soft-lift)}
.cat-art{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden}
.cat-art img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cat-card:hover .cat-art img{transform:scale(1.04)}
.cat-body{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;padding:14px 8px 0}
.cat-body .tag{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.cat-body .t{font-weight:700;font-size:1.35rem;letter-spacing:-.015em}
/* every card keeps two lines for its description, so cards in a short last row match the full rows above;
   a card whose title carries a second, Chinese line gives one of them up */
.cat-body .d{min-height:3em;font-size:.9rem;line-height:1.5;color:var(--body)}
.cat-body:has(.t-zh) .d{min-height:1.5em}
.cat-body .go{margin-top:auto;padding-top:8px;font-size:.86rem;font-weight:700;color:var(--accent-ink)}
.cat-body .t-zh{display:block;font-size:.9rem;line-height:1.5;font-weight:600;letter-spacing:0;white-space:nowrap}
.t-rose{border-color:#E8C2B8}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.cards{grid-template-columns:minmax(0,1fr)}}
.cards .card{display:flex;flex-direction:column;gap:12px;padding:30px}
.cards .card p{font-size:.98rem;line-height:1.65;color:var(--body)}
.phases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,80px)}
@media (max-width:860px){.phases{grid-template-columns:minmax(0,1fr)}}
.phase-title{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.phase-title::after{content:"";flex:1;height:1px;background:var(--line)}
.tl{position:relative;margin:0;padding:0;list-style:none}
.tl li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;padding-bottom:28px}
.tl li:last-child{padding-bottom:0}
.tl li:not(:last-child)::before{content:"";position:absolute;left:23px;top:50px;bottom:2px;width:2px;border-radius:2px;background:linear-gradient(rgba(201,121,26,.5),rgba(201,121,26,.16))}
.dot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 14px -8px rgb(110 80 40/.3);font-weight:700;font-size:1.05rem;color:var(--ink)}
.dot.maybe{border-style:dashed;border-color:#B8A889}
.dot.key{background:var(--accent);border-color:var(--accent);color:#221A10}
.step-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 4px;font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.step-p{font-size:.96rem;line-height:1.6;color:var(--body)}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;border:1px dashed #B8A889;font-weight:600;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--body)}
.key-box{margin-top:6px;padding:14px 16px;border-radius:12px;background:rgba(201,121,26,.1);border:1px solid rgba(201,121,26,.3)}
/* visit us: the map on one side, how to reach us on the other */
.visit{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,4vw,48px);align-items:center}
@media (max-width:900px){.visit{grid-template-columns:minmax(0,1fr)}}
.map-card{padding:10px;overflow:hidden}
.map-scroll{overflow-x:auto;border-radius:10px}
.map{display:block;width:100%;height:auto}
@media (max-width:600px){.map{min-width:560px}}
.contact-list{display:grid;gap:16px;margin:24px 0 0;padding:0;list-style:none}
.contact-list li{display:flex;gap:14px;align-items:flex-start;line-height:1.55;color:var(--body)}
.contact-list .ci{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(201,121,26,.13);color:#A26214}
.contact-list .ci svg{width:17px;height:17px}
.contact-list strong{color:var(--ink);font-weight:600}
.contact-list a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.contact-list .nw{white-space:nowrap}
.contact-list .where{font-size:.96rem}
.contact-list a:hover{color:var(--accent-ink);text-decoration-color:var(--accent)}
.phone-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.45);color:var(--body);text-decoration:none}
.icon-btn:hover{color:var(--accent-ink);border-color:var(--accent)}
.icon-btn svg{width:17px;height:17px}
/* footer: a slightly deeper paper, no dark band */
.site-footer{position:relative;z-index:1;padding:48px 0 32px;background:rgba(232,221,203,.45);border-top:1px solid var(--hair);color:var(--body);font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
@media (max-width:760px){.footer-grid{grid-template-columns:minmax(0,1fr)}}
.footer-grid h4{margin:0 0 14px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.footer-grid ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.footer-grid a{text-decoration:none}
.footer-grid a:hover{color:var(--ink)}
.footer-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--hair);font-size:.8rem;color:var(--muted)}

/* watercolour hero: the painting spreads across the paper like a wet wash; the category pages' art does the same */
@keyframes spread{0%{-webkit-mask-size:6% 6%;mask-size:6% 6%;opacity:.4}100%{-webkit-mask-size:440% 440%;mask-size:440% 440%;opacity:1}}
.room,.cat-hero .art{-webkit-mask-image:url(images/hero-wash.webp);mask-image:url(images/hero-wash.webp);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:46% 50%;mask-position:46% 50%;-webkit-mask-size:440% 440%;mask-size:440% 440%;animation:spread 3s cubic-bezier(.22,.6,.3,1) .1s both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rs{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.r1{animation-delay:.1s}.r2{animation-delay:.25s}.r3{animation-delay:.45s}.r4{animation-delay:.65s}
/* falling leaves: the first prototype's drift and flutter, starting in the fig */
.leaf{position:absolute;width:22px;height:22px;pointer-events:none}
.leaf img{display:block;width:100%;height:100%;animation:flutter 1.9s ease-in-out infinite alternate}
@keyframes fall{0%{transform:translate(0,0) rotate(0deg);opacity:0}8%{opacity:1}85%{opacity:1}100%{transform:translate(-680px,240px) rotate(-280deg);opacity:0}}
@keyframes flutter{from{transform:rotate(-28deg) translateX(-23%)}to{transform:rotate(28deg) translateX(23%)}}
.lf1{top:34%;left:73%;animation:fall 12s linear 2.8s infinite both}
.lf2{top:50%;left:80%;width:16px;height:16px;animation:fall 15s linear 6s infinite both}
.lf3{top:31%;left:86%;width:19px;height:19px;animation:fall 18s linear 10s infinite both}
/* The painting shrinks with the screen (433px wide on desktop, about 340px on a phone), so the leaves are sized
   and travel in units of its width (cqw): each is as long as the fig's own leaves, about 23-33 of the
   painting's 1120px, and the fall is the desktop one scaled to match. Without container units, the sizes above. */
@supports (width:1cqw){
  .painting{container-type:inline-size}
  @keyframes fall-cq{0%{transform:translate(0,0) rotate(0deg);opacity:0}8%{opacity:1}85%{opacity:1}100%{transform:translate(-157cqw,55.4cqw) rotate(-280deg);opacity:0}}
  .leaf{animation-name:fall-cq}
  .lf1{width:2.7cqw;height:2.7cqw}
  .lf2{width:2cqw;height:2cqw}
  .lf3{width:2.3cqw;height:2.3cqw}
}
/* notes: written in once the wash has spread, then the arrows draw themselves */
@keyframes fade{from{opacity:0}to{opacity:1}}
.note{font-family:var(--sans);font-style:italic;font-weight:500;font-size:34px;fill:#5E5548;animation:fade .9s ease-out both}
.note-dr{fill:none;stroke:#A4532F;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.1;animation:draw .9s ease-out both}
.n1{animation-delay:2.4s}.n1d{animation-delay:2.9s}.n1h{animation-delay:3.5s}
.n2{animation-delay:3.1s}.n2d{animation-delay:3.6s}.n2h{animation-delay:4.2s}

/* scroll: washes and lines settle in as they come into view, where the browser supports it */
@keyframes blot{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes draw{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.sdr{stroke-dasharray:1 1.1}
@supports (animation-timeline: view()){
  .blot{animation:blot 1s linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .reveal{view-timeline-name:--rv}
  .reveal .sdr{animation:draw 1s linear both;animation-timeline:--rv;animation-range:entry 20% cover 45%}
  .up{animation:rise 1s linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  /* how to order: each line grows while it scrolls past a mark 60% of the way down the screen (its view timeline,
     inset 40% at the bottom, across exactly its own height). So the tip rides the mark, and the lines run
     1 → 4 and 5 → 7 in turn instead of all at once */
  .tl li:not(:last-child)::before{transform-origin:top;animation:grow 1s linear both;animation-timeline:view(block 0% 40%);animation-range:entry-crossing 0% entry-crossing 100%}
}
/* map: our pin bobs over the spot with a ripple on the ground; it drops in as the map scrolls into view */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ripple{0%{transform:scale(.4);opacity:.75}100%{transform:scale(2);opacity:0}}
@keyframes pindrop{0%{transform:translateY(-70px);opacity:0}55%{transform:translateY(4px);opacity:1}75%{transform:translateY(-3px)}100%{transform:none;opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:none}}
.here-bob{animation:bob 2s ease-in-out infinite}
.here-ring{transform-box:fill-box;transform-origin:center;animation:ripple 2s ease-out infinite}
.here-pop{transform-box:fill-box;transform-origin:80% 100%}
@supports (animation-timeline: view()){
  .reveal .here-drop{animation:pindrop linear both;animation-timeline:--rv;animation-range:entry 35% cover 50%}
  .reveal .here-pop{animation:pop linear both;animation-timeline:--rv;animation-range:cover 46% cover 56%}
}
/* how to order and visit us are long, and finished only once they were nearly scrolled past: here every
   offset is the general one × 0.8, so each animation completes after 20% less scrolling. Both entry and
   cover count from the moment the element starts entering, so scaling them scales the scroll distance.
   The map's roads and pin then start a tenth of the screen later (+10vh), once more of the map is in view,
   and also finish a tenth of the screen later, so they play out over the same distance as before. The
   "We are here" bubble appears with the pin rather than after it, so the map is done once the pin lands. */
@supports (animation-timeline: view()){
  :is(#order,#visit) .up{animation-range:entry 0% entry 56%}
  #order .blot{animation-range:entry 0% cover 36%}
  #visit .reveal .sdr{animation-range:entry calc(16% + 10vh) cover calc(36% + 10vh)}
  #visit .reveal .here-drop{animation-range:entry calc(28% + 10vh) cover calc(40% + 10vh)}
  #visit .reveal .here-pop{animation-range:entry calc(28% + 10vh) cover calc(40% + 10vh)}
}
/* why we can guarantee it: each icon draws itself stroke by stroke, on a timer, once most of its card is on screen.
   The script marks the icons .draw-ready (strokes hidden) and then .drawn as each card comes into view; without it
   they just show */
@media (prefers-reduced-motion:no-preference){
  .draw-ready .sdr{stroke-dashoffset:1.05}
  .draw-ready.drawn .sdr{animation:draw .7s cubic-bezier(.45,.05,.35,1) both;animation-delay:var(--d,0s)}
  .draw-ready.drawn .sdr:nth-child(2){animation-delay:calc(var(--d,0s) + .55s)}
  .draw-ready.drawn .sdr:nth-child(3){animation-delay:calc(var(--d,0s) + 1.1s)}
}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}.leaf{display:none}html{scroll-behavior:auto}}

/* ---- site extras: skip link, mobile menu, hash routing, category pages ---- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
::selection{background:rgba(201,121,26,.2)}
.skip-link{position:absolute;left:-999px;top:0;z-index:100;padding:.6em 1em;border-radius:0 0 10px 0;background:var(--surface);color:var(--ink);font-weight:700}
.skip-link:focus{left:0}
main[data-page],[id]{scroll-margin-top:84px}
/* mobile menu: a checkbox, no script */
.nav-toggle-wrap{position:relative;display:none}
.nav-toggle-checkbox{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.nav-toggle{pointer-events:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.45);color:var(--ink)}
.nav-toggle svg{width:22px;height:22px}
@media (max-width:960px){
  .site-header .wrap{position:relative}
  .nav-toggle-wrap{display:inline-flex}
  .site-header nav{position:absolute;left:0;right:0;top:100%}
  .nav{flex-direction:column;align-items:stretch;max-height:0;overflow:hidden;padding:0 clamp(16px,4vw,48px);background:var(--bg);border-bottom:1px solid transparent;transition:max-height .25s ease}
  .site-header:has(.nav-toggle-checkbox:checked) .nav{max-height:32rem;padding-bottom:12px;border-bottom-color:var(--hair);box-shadow:0 18px 30px -24px rgb(110 80 40/.35)}
  .nav a{display:block;padding:14px 0;border-bottom:1px solid var(--hair)}
  .nav li:last-child a{border-bottom:none}
}
/* routing: each category is its own <main>, shown when the URL hash names it */
main[data-page]:not([data-page="home"]){display:none}
#curtains:target,#blinds:target,#carpets:target,#wallpaper:target,#angchai:target{display:block}
body:has(#curtains:target) #home,body:has(#blinds:target) #home,body:has(#carpets:target) #home,body:has(#wallpaper:target) #home,body:has(#angchai:target) #home{display:none}
.nav a[href="#home"]{color:var(--ink);border-bottom-color:var(--accent)}
body:has(main[data-page]:not(#home):target) .nav a[href="#home"]{color:var(--body);border-bottom-color:transparent}
body:has(#curtains:target) .nav a[href="#curtains"],body:has(#blinds:target) .nav a[href="#blinds"],
body:has(#carpets:target) .nav a[href="#carpets"],body:has(#wallpaper:target) .nav a[href="#wallpaper"],
body:has(#angchai:target) .nav a[href="#angchai"]{color:var(--ink);border-bottom-color:var(--accent)}
/* category pages */
.cat-hero{position:relative;z-index:1;padding:clamp(36px,6vw,64px) 0 clamp(8px,2vw,16px)}
.cat-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:820px){.cat-hero .wrap{grid-template-columns:minmax(0,1fr)}}
.cat-hero .h1{font-size:clamp(2.4rem,5vw,3.6rem)}
.cat-hero .h1 em{margin-top:.18em;font-size:.6em;letter-spacing:0}
.cat-hero .art{max-width:560px;width:100%;justify-self:center;aspect-ratio:4/3;object-fit:cover}
.back-link{display:inline-flex;align-items:center;gap:.4em;margin-bottom:18px;font-size:.9rem;font-weight:600;text-decoration:none;color:var(--body)}
.back-link:hover{color:var(--accent-ink)}
.type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:28px}
.type-card{padding:26px}
.type-card .tag{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.type-card .h3{margin-top:8px}
.type-card p{margin-top:8px;font-size:.96rem;line-height:1.6;color:var(--body)}
.swatch-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.swatch{width:96px;height:96px;border-radius:12px;border:1px solid var(--line);box-shadow:var(--soft)}
.small-note{margin-top:16px;font-size:.9rem;color:var(--muted)}
.cross{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:36px;padding-top:28px;border-top:1px dashed var(--line)}
.cross .lbl{margin-right:6px;font-size:.9rem;color:var(--muted)}
.cross a{padding:.45em .95em;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.45);font-size:.88rem;font-weight:700;text-decoration:none;color:var(--body)}
.cross a:hover{border-color:var(--accent);color:var(--accent-ink)}
.cta-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:clamp(24px,4vw,36px)}
.cta-card .h2{margin:0;font-size:clamp(1.4rem,2.6vw,1.9rem);max-width:26ch}
.cta-card .actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.cta-card .quick{font-size:.92rem;font-weight:600;color:var(--body);text-decoration:none}
.cta-card .quick:hover{color:var(--accent-ink)}
/* language switch: two links, the current one raised like a pressed tab */
.site-header nav{margin-left:auto}
.header-tools{display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.45)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:36px;padding:0 11px;border-radius:999px;font-family:var(--sans);font-size:.84rem;font-weight:700;line-height:1;color:var(--muted);text-decoration:none;transition:color .2s,background-color .2s}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 rgb(255 255 255/.7) inset,0 2px 6px rgb(110 80 40/.16)}

/* ---- Chinese ---- */
/* Figtree has no CJK glyphs: Latin and numerals stay in Figtree, Chinese falls to each platform's own sans */
[lang^="zh"]{font-family:var(--sans)}
:lang(zh){--sans:'Figtree','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Noto Sans CJK SC',system-ui,sans-serif}
/* CJK glyphs fill the em box: no negative tracking, and more room between lines */
:lang(zh) :is(.h1,.h2,.h3,.cat-body .t,.step-t,.trust-item strong){letter-spacing:0}
:lang(zh) .h1{line-height:1.16}
:lang(zh) .h2{line-height:1.3}
:lang(zh) :is(.eyebrow,.phase-title){letter-spacing:.08em}
/* Chinese at 11px is hard to read; the small caps-style labels get a size up */
:lang(zh) :is(.eyebrow,.phase-title,.cat-body .tag,.pill,.footer-grid h4){font-size:.8rem}
/* short lines break at punctuation, never mid-word (a lone 队。 on its own line) */
:lang(zh) :is(.h1,.h2,.h3,.cat-body .t,.cat-body .d,.step-t){word-break:keep-all;overflow-wrap:anywhere}
/* and paragraphs avoid ending on one or two characters */
:lang(zh) :is(p,.lead){text-wrap:pretty}
:lang(zh) .lead{max-width:24em}
/* no true Chinese italic exists; a slanted Hanzi just looks broken */
:lang(zh) .note{font-style:normal;letter-spacing:.06em}