:root{color-scheme:light;--paper:#fff;--forest:#111;--ink:#111;--muted:#333;--line:#ddd}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,"PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.65}
a{color:inherit;text-underline-offset:.24em}
a:focus-visible{outline:2px solid #646464;outline-offset:5px}
.hero{display:grid;grid-template-columns:1fr 48%;position:relative;min-height:clamp(40rem,86vh,55rem)}
.intro{padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.languages{background:var(--paper);color:var(--forest);display:flex;align-items:center;padding:0 .45rem;font-size:.78rem;gap:.15rem}
.languages a{min-width:36px;min-height:44px;display:grid;place-items:center;text-decoration:none}
.languages [aria-current]{text-decoration:underline;font-weight:750}
h1,h2{font-family:Georgia,"Songti TC","Noto Serif CJK TC","PMingLiU",serif;font-weight:400;line-height:1.06;margin:0;color:var(--forest)}
h1{font-size:clamp(2.55rem,5.45vw,6rem);max-width:12ch}
:lang(zh-TW) h1{line-height:1.18}
p{max-width:43ch;color:var(--muted);margin:1.6rem 0 2rem}
.button{display:inline-flex;align-items:center;gap:1.15rem;min-height:48px;padding:.65rem 1.2rem;background:var(--forest);color:var(--paper);text-decoration:none;font-weight:650;font-size:.9rem}
.button:hover{background:#333}
.photo{position:relative;min-height:100%;background:#161616}
.photo img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.contact{border-top:1px solid var(--line);padding:clamp(3.5rem,8vw,8rem) clamp(2rem,8vw,8rem);background:#111;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
h2{font-size:clamp(2.4rem,4.7vw,4.8rem)}
.contact p{margin:0 0 .7rem}
.email{display:block;width:fit-content;margin-bottom:1.2rem;overflow-wrap:anywhere}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1.6rem clamp(2rem,5vw,5rem);border-top:1px solid var(--line);font-size:.9rem}
.products{padding:4rem clamp(2rem,5vw,5rem)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:2rem;margin-top:2rem}
.cards img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:700px){
.hero{display:flex;flex-direction:column;min-height:0}
.intro{padding:2.35rem 1.4rem}
h1{font-size:clamp(2.45rem,8.5vw,4rem)}
.photo{min-height:clamp(15rem,65vw,24rem)}
.contact{grid-template-columns:1fr;padding-inline:1.4rem}
footer{padding-inline:1.4rem}
}
.gallery h2{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery figure{position:relative;margin:0;min-height:clamp(12rem,27vw,32rem);background:var(--forest)}
.gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(min-width:950px){.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:520px){.gallery figure{min-height:45vw}}

.contact,.contact h2,.contact p{color:#fff}
.contact .button{background:#fff;color:#111}
.contact .button:hover{background:#ddd}
.contact a:focus-visible{outline-color:#fff}
.contact .button:focus-visible{outline-color:#fff}


.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:6rem;padding:.3rem clamp(1rem,8vw,9rem);background:#fff}
.site-logo{display:block;width:clamp(6.1rem,9.75vw,9.15rem);height:auto}
.shipping-banner{position:relative;display:flex;align-items:flex-end;min-height:clamp(19rem,35vw,34rem);padding:clamp(1.5rem,3vw,3rem) clamp(1.25rem,8vw,9rem);isolation:isolate;background:#111}
.shipping-photo,.shipping-banner::after{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.shipping-photo{object-fit:cover;object-position:39% center}
.shipping-banner::after{content:"";background:linear-gradient(0deg,rgba(0,0,0,.83),rgba(0,0,0,.27) 43%,transparent 74%)}
.shipping-banner h1{font-family:inherit;font-weight:750;max-width:23ch;color:#fff;font-size:clamp(2.25rem,5vw,5.7rem);letter-spacing:-.035em;text-wrap:balance}
.hero{min-height:clamp(24rem,44vw,36rem)}
.intro p{font-size:clamp(1.05rem,1.6vw,1.4rem);margin-top:0}
@media(max-width:700px){
.site-header{min-height:5rem}
.shipping-banner{min-height:clamp(16rem,55vw,23rem)}
.shipping-photo{object-position:44% center}
}

.site-identity{display:flex;align-items:flex-end;gap:clamp(.25rem,1vw,1rem);min-width:0}
.site-logo{flex:none;filter:brightness(1.055)}
.site-slogan{font-size:clamp(.9rem,1.75vw,1.45rem);margin-bottom:clamp(1.45rem,2.3vw,2.15rem);font-weight:650;line-height:1.25}
.site-header .languages{flex:none}
@media(max-width:420px){
.site-header{gap:.25rem;padding-inline:.5rem}
.site-header .languages{padding-inline:0}
.site-header .languages a{min-width:32px}
}

.site-header .languages{gap:2px;padding:3px;border:1px solid #111;border-radius:6px;font-size:clamp(.825rem,1.15vw,.975rem)}
.site-header .languages a{min-width:42px;min-height:42px;padding-inline:.45rem;border-radius:3px;font-weight:650;white-space:nowrap}
.site-header .languages a:hover{background:#eee}
.site-header .languages [aria-current="page"]{background:#111;color:#fff;text-decoration:none}
@media(max-width:420px){
.site-header{flex-wrap:wrap}
.site-header .languages{margin-left:auto}
.site-header .languages a{padding-inline:.25rem}
}

.banner-contact{margin-top:1rem;background:#fff;color:#111}
.banner-contact:hover{background:#eee}
.banner-contact:focus-visible{outline-color:#fff}
.intro h2+p{margin-top:1rem;margin-bottom:0}