/* Shared brand theme: makes every static page (both languages) match the React homepage.
   Same ink-brown ground, damask wallpaper, Cinzel display type, gold accents and buttons. */
:root{--ink:#181008;--rice:#f4eedd;--rice-dark:#e0d5ba;--gold:#d4af37;--gold-light:#f5d47a;--gold-line:rgba(212,175,55,.22)}
body{background-color:var(--ink);background-image:linear-gradient(rgba(30,20,5,.78),rgba(15,8,2,.95)),url('/bg-damask.png');background-size:auto,500px;background-repeat:no-repeat,repeat;background-attachment:fixed;color:var(--rice);font-family:'Outfit','Noto Serif SC',system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}
p,.intro p,.lead,td{color:var(--rice-dark)}
h1,h2,h3{font-family:'Cinzel','Noto Serif SC',Georgia,serif;font-weight:400;letter-spacing:.01em;line-height:1.18}
h1{font-size:clamp(34px,4.2vw,62px)}
h2{font-size:clamp(28px,3.2vw,46px)}
html[lang^="zh"] h1{font-size:clamp(40px,5vw,76px)}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3{font-family:'Noto Serif SC','Cinzel',serif;letter-spacing:.04em}
a:hover{color:var(--gold)}
.eyebrow{color:var(--gold);letter-spacing:.22em}
::selection{background:var(--gold);color:var(--ink)}

/* Header: wordmark with the gold dot, uppercase gold-underlined links, translucent bar. */
.site-header{position:sticky;top:0;z-index:50;background:rgba(12,8,4,.78);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--gold-line)}
.wordmark{font-family:'Cinzel',serif;letter-spacing:.22em;font-weight:600}
.wordmark-dot{display:inline-block;width:6px;height:6px;margin-left:5px;border-radius:50%;background:var(--gold);vertical-align:.1em}
.wordmark span{color:var(--gold);opacity:.8}
nav a{letter-spacing:.14em;text-transform:uppercase;font-size:13px;position:relative}
html[lang^="zh"] nav a{letter-spacing:.08em;font-size:14px}
nav a::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--gold);transition:width .4s cubic-bezier(.16,1,.3,1)}
nav a:hover::after{width:100%}

/* Buttons: the homepage's gold outline button. */
.button{border:1px solid var(--gold);color:var(--gold);background:rgba(15,8,2,.4);font-family:'Cinzel','Noto Serif SC',serif;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:14px 30px;transition:background .4s,color .4s,box-shadow .4s}
.button:hover{background:var(--gold);color:var(--ink);box-shadow:0 0 24px rgba(212,175,55,.3)}
.button.primary{background:var(--gold);color:var(--ink)}
.button.primary:hover{background:var(--gold-light)}

/* Sections, cards and frames take the gold hairline. */
.section{border-top-color:var(--gold-line)}
.section>h2::after,.intro>h2::after{content:'';display:block;width:60px;height:2px;margin-top:18px;background:var(--gold)}
.style-grid>a,.faq details,.idea-proof,.idea-disclose,.fav-bar{border-color:var(--gold-line)}
.style-grid>a{background:rgba(15,8,2,.35);transition:border-color .4s,background .4s}
.style-grid>a:hover{border-color:var(--gold);background:rgba(40,26,16,.5)}
.work-image,figure,.idea-photo{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.work-card .eyebrow{color:var(--gold)}
input,select,textarea{background:rgba(24,16,8,.7);border-color:rgba(212,175,55,.3);color:var(--rice);font-family:'Outfit','Noto Serif SC',sans-serif}
footer{border-top-color:var(--gold-line);background:rgba(10,6,2,.6)}
footer .wordmark{font-size:26px}

/* Cat banner on the English homepage: the same film as the Chinese homepage. */
.cat-banner{position:relative;aspect-ratio:16/9;max-height:82vh;width:100%;overflow:hidden;background:#0d0b08}
.cat-banner video,.cat-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.cat-banner img{opacity:0;transition:opacity 1.8s cubic-bezier(.45,.05,.55,.95)}
.cat-banner.is-done img{opacity:1}
.cat-banner::after{content:'';position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(transparent,var(--ink))}
@media (max-width:760px) and (orientation:portrait){.cat-banner{aspect-ratio:1/1.18}.cat-banner video,.cat-banner img{object-position:56% top}}
@media (prefers-reduced-motion:reduce){.cat-banner img{transition:none}}

/* Cinzel is wide: keep English headlines to two or three lines on phones. */
.hero h1{font-size:clamp(30px,7.6vw,62px)}
html[lang^="zh"] .hero h1{font-size:clamp(38px,9.5vw,76px)}
@media (max-width:540px){nav a{letter-spacing:.06em}}

/* "About Zencat" on the English homepage: same layout as the Chinese homepage's 关于禅猫. */
.about-zencat{max-width:1400px}
.about-title{text-align:center;font-size:clamp(34px,4vw,48px);margin:0}
.section>h2.about-title::after{margin:16px auto 0}
.about-subtitle{text-align:center;letter-spacing:.32em;font:400 15px/1 'Cinzel',serif;color:var(--rice-dark);margin:22px 0 0}
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:60px}
.about-text{padding-right:40px}
.about-text p{font-size:17px;line-height:1.8;letter-spacing:.02em}
.about-text strong{color:var(--rice);font-weight:600}
.about-lead{font:300 24px/1.7 'Cinzel','Noto Serif SC',serif!important;color:var(--gold)!important;margin-bottom:30px}
.about-signature{margin-top:40px;text-align:right;letter-spacing:.3em;color:var(--rice)!important;font-family:'Cinzel',serif}
.about-image{display:flex;justify-content:center}
.image-frame{position:relative;width:80%;aspect-ratio:3/4}
.image-frame img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;filter:grayscale(20%) contrast(110%);transition:filter .4s,transform .4s}
.image-frame:hover img{filter:none}
.frame-border{position:absolute;top:20px;left:-20px;width:100%;height:100%;border:1px solid var(--gold);z-index:1}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:90px}
.stat-card{text-align:center;padding:36px 20px;border:1px solid rgba(212,175,55,.18);background:linear-gradient(180deg,rgba(244,238,221,.03),transparent);transition:border-color .4s,transform .4s}
.stat-card:hover{border-color:rgba(212,175,55,.5);transform:translateY(-6px)}
.stat-value{display:block;font:400 44px/1.1 'Cinzel',serif;background:linear-gradient(135deg,#f5d47a 0%,#d4af37 50%,#aa8c2c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-bottom:8px}
.stat-label{display:block;font-size:17px;letter-spacing:.12em;color:var(--rice);margin-bottom:6px}
.stat-sub{display:block;font:400 11px/1.6 'Cinzel',serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,238,221,.5)}
.about-booking{max-width:760px;margin:50px auto 0;text-align:center;font-size:15px}
.about-booking a{text-decoration:underline;text-underline-offset:5px}
@media(max-width:968px){.about-content{grid-template-columns:1fr}.about-text{padding-right:0}.image-frame{width:60%;margin-top:40px}.about-stats{grid-template-columns:1fr;gap:18px;margin-top:60px}}