/* Being & Tea 存在與茶 — site styles */
:root{
  --wine:#8C734B; --wine-2:#75603E; --red:#6F5A3A; --gold:#8C734B; --gold-l:#B8A27A;
  --paper:#FBF9F5; --paper-2:#F4EFE6; --paper-3:#ECE5DA; --line:#E3DACB;
  --ink:#2B1A18; --mute:#6B5A58; --faint:#A39590;
  --serif:"Noto Serif TC","Noto Serif CJK TC","Songti TC",serif;
  --sans:"Noto Sans TC","Noto Sans CJK TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --en:"Libre Bodoni","Bodoni Moda",Georgia,serif;

  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.4rem,1rem + 4vw,4.75rem);

  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;--s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;--s24:6rem;--s32:8rem;
  --wrap:1200px; --narrow:720px;
  --ease:cubic-bezier(.16,1,.3,1);
  --sec:clamp(var(--s16),9vw,var(--s32));
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;color-scheme:light only;background:var(--paper)}
body{font-family:var(--sans);font-size:var(--text-base);line-height:1.75;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--wine);color:#fff;padding:var(--s2) var(--s4);z-index:100}
.skip:focus{left:var(--s4)}

.wrap{width:min(100% - 2*clamp(var(--s5),5vw,var(--s16)),var(--wrap));margin-inline:auto}
.narrow{max-width:var(--narrow)}
.sec{padding-block:var(--sec)}
.sec + .sec.tight{padding-top:0}
.en{font-family:var(--en);font-weight:400;letter-spacing:.04em}
.kick{font-family:var(--en);font-size:var(--text-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);display:flex;gap:var(--s3);align-items:center}
.kick::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.kick.c{justify-content:center}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.3;letter-spacing:.06em;color:var(--wine)}
.h-hero{font-size:var(--text-3xl);font-weight:600;letter-spacing:.08em;line-height:1.2}
.h-page{font-size:var(--text-2xl);letter-spacing:.08em}
.h-sec{font-size:var(--text-xl)}
.h-sub{font-size:var(--text-lg)}
.lead{font-size:var(--text-lg);font-family:var(--serif);color:var(--ink);line-height:1.8;letter-spacing:.04em}
.muted{color:var(--mute)}
.small{font-size:var(--text-sm)}
.xs{font-size:var(--text-xs)}
p + p{margin-top:var(--s4)}
.stack > * + *{margin-top:var(--s5)}
.stack-lg > * + *{margin-top:var(--s8)}
.rule{height:1px;background:var(--line);border:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:var(--s3) var(--s6);border-radius:999px;font-size:var(--text-sm);letter-spacing:.12em;font-weight:500;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);white-space:nowrap;cursor:pointer;border:1px solid transparent}
.btn:active{transform:translateY(1px)}
.btn-wine{background:var(--wine);color:#fff}
.btn-wine:hover{background:var(--wine-2)}
.btn-line{border-color:var(--wine);color:var(--wine)}
.btn-line:hover{background:var(--wine);color:#fff}
.btn-light{background:#fff;color:var(--wine)}
.btn-light:hover{background:var(--paper-2)}
.btn-ghost-l{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost-l:hover{background:rgba(255,255,255,.12)}
.btn svg{width:18px;height:18px;flex:none}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3)}
.link{color:var(--wine);border-bottom:1px solid currentColor;padding-bottom:1px;transition:color .2s}
.link:hover{color:var(--red)}
.arrow{display:inline-flex;align-items:center;gap:var(--s2);color:var(--wine);font-size:var(--text-sm);letter-spacing:.14em;font-weight:500}
.arrow::after{content:"→";font-family:var(--en);transition:transform .25s var(--ease)}
a:hover .arrow::after,.arrow:hover::after{transform:translateX(4px)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(251,249,245,.94);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.hdr.scrolled{border-color:var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);height:76px}
.brand img{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(var(--s4),1.6vw,var(--s8))}
.nav a{font-size:var(--text-sm);letter-spacing:.14em;color:var(--ink);position:relative;padding-block:var(--s2);white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--wine);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--wine)}
.nav a.btn[aria-current="page"]{color:#FFFFFF}.nav a.btn[aria-current="page"]::after{display:none}
.nav .btn{min-height:40px;padding:var(--s2) var(--s5);color:#fff}
.nav .btn::after{display:none}
.menu-btn{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;align-items:center;justify-content:center}
.menu-btn span{display:block;width:22px;height:1.5px;background:var(--wine);position:relative;transition:background .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--wine);transition:transform .3s var(--ease)}
.menu-btn span::before{top:-7px}.menu-btn span::after{top:7px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(7px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1080px){
  .menu-btn{display:inline-flex}
  .hdr-in{height:64px}
  .brand img{height:36px}
  .nav{position:fixed;inset:64px 0 auto 0;height:calc(100dvh - 64px);background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:var(--s4) clamp(var(--s5),5vw,var(--s16)) var(--s10);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s var(--ease),visibility 0s .3s;overflow-y:auto}
  .menu-open .nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s var(--ease)}
  .nav a{font-family:var(--serif);font-size:var(--text-lg);padding-block:var(--s4);border-bottom:1px solid var(--line);letter-spacing:.16em}
  .nav a::after{display:none}
  .nav .btn{margin-top:var(--s6);min-height:52px;font-family:var(--sans);font-size:var(--text-base);border-bottom:0}
}

/* hero */
.hero{padding-block:clamp(var(--s10),6vw,var(--s20)) clamp(var(--s16),8vw,var(--s24))}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(var(--s8),6vw,var(--s20));align-items:center}
.hero-copy .h-hero{margin-top:var(--s6)}
.hero-copy .lead{margin-top:var(--s6);max-width:30em}
.hero-copy .btns{margin-top:var(--s10)}
.hero-media{position:relative}
.hero-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.hero-media .emb{position:absolute;width:42%;left:-16%;bottom:-10%;opacity:.9;pointer-events:none}
.hero-note{margin-top:var(--s8);display:flex;gap:var(--s6);flex-wrap:wrap;font-size:var(--text-xs);color:var(--mute);letter-spacing:.12em}
.hero-note span{display:flex;align-items:center;gap:var(--s2)}
.hero-note span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media{order:-1;margin-inline:calc(-1*clamp(var(--s5),5vw,var(--s16)))}
  .hero{padding-top:0}
  .hero-media img,.hero-media img.hero-img{aspect-ratio:1335/1083;height:auto;object-position:50% 50%;border-radius:0}
  .hero-media .emb{display:none}
}
@media (min-width:861px){.hero-media img.hero-img{object-position:50% 100%}}
.soc-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s3)}
.soc-card{display:flex;flex-direction:column;gap:var(--s1);border:1px solid var(--line);background:#fff;padding:var(--s6);color:var(--ink);text-decoration:none;transition:border-color .2s}
.soc-card:hover{border-color:var(--wine)}
.soc-card .ic{width:28px;height:28px;color:var(--wine);margin-bottom:var(--s3)}
.soc-card .ic svg{width:100%;height:100%;fill:currentColor}
.soc-card b{font-family:var(--serif);color:var(--wine);font-size:var(--text-lg);letter-spacing:.06em}
.soc-card span{font-size:var(--text-xs);color:var(--mute)}
.soc-card.main{background:var(--wine);border-color:var(--wine)}
.soc-card.main .ic,.soc-card.main b,.soc-card.main span{color:#fbf9f5}
.soc-card .arrow{margin-top:var(--s4)}
@media (max-width:860px){.soc-grid{grid-template-columns:1fr}.soc-card:not(.main){flex-direction:row;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5)}.soc-card:not(.main) .ic{margin:0;width:22px;height:22px}.soc-card:not(.main) b{font-size:var(--text-base)}.soc-card:not(.main) span.en{margin-left:auto}}

/* page head */
.phead{padding-block:clamp(var(--s12),7vw,var(--s24)) clamp(var(--s10),5vw,var(--s16));border-bottom:1px solid var(--line)}
.phead .h-page{margin-top:var(--s5)}
.phead .lead{margin-top:var(--s6);max-width:34em}
.phead .btns{margin-top:var(--s8)}
.phead-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--s8),6vw,var(--s20));align-items:end}
.phead-split img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (max-width:860px){.phead-split{grid-template-columns:1fr;gap:var(--s8)}.phead:has(.phead-split){padding-top:0}.phead-split>div:last-child{order:-1;margin-inline:calc(-1*clamp(var(--s5),5vw,var(--s16)))}.phead-split img{aspect-ratio:3/2}}

/* entry cards */
.entries{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--s4),2vw,var(--s8))}
.entry{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:border-color .3s,transform .4s var(--ease),box-shadow .4s var(--ease)}
.entry:hover{border-color:var(--gold-l);transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(140,115,75,.35)}
.entry .im{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.entry .im img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.entry:hover .im img{transform:scale(1.04)}
.entry .bd{padding:var(--s6) var(--s6) var(--s8);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.entry .no{font-family:var(--en);color:var(--gold);font-size:var(--text-sm);letter-spacing:.2em}
.entry h3{font-size:var(--text-lg)}
.entry h3 .en{display:block;font-size:var(--text-xs);color:var(--gold);letter-spacing:.24em;text-transform:uppercase;margin-top:var(--s1);font-weight:400}
.entry p{color:var(--mute);font-size:var(--text-sm);flex:1}
.entry .arrow{margin-top:var(--s3)}
@media (max-width:860px){.entries{grid-template-columns:1fr}.entry{flex-direction:row}.entry .im{width:38%;aspect-ratio:auto;flex:none}.entry .bd{padding:var(--s5)}}
@media (max-width:480px){.entry{flex-direction:column}.entry .im{width:100%;aspect-ratio:16/9}}

/* section head */
.shead{display:flex;justify-content:space-between;align-items:end;gap:var(--s8);margin-bottom:clamp(var(--s8),4vw,var(--s16));flex-wrap:wrap}
.shead > div{max-width:40em}
.shead .h-sec{margin-top:var(--s4)}
.shead p{margin-top:var(--s4);color:var(--mute)}

/* manifesto */
.mani{background:var(--wine);color:#FFFFFF;position:relative;overflow:hidden}
.mani .emb{position:absolute;right:-12%;top:50%;transform:translateY(-50%);width:min(70vw,720px);opacity:.14;pointer-events:none}
.mani-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(var(--s8),6vw,var(--s20));position:relative}
.mani .kick{color:#FFFFFF}
.mani h2{color:#fff;font-size:var(--text-2xl);margin-top:var(--s5)}
.verse{font-family:var(--serif);font-size:clamp(1.05rem,.95rem + .45vw,1.35rem);line-height:2.15;letter-spacing:.1em;color:#FFFFFF}
.verse p + p{margin-top:var(--s6)}
.verse strong{color:#fff;font-weight:600}
@media (max-width:860px){.mani-grid{grid-template-columns:1fr}}

/* verse on paper */
.verse-paper{font-family:var(--serif);font-size:clamp(1.05rem,.95rem + .45vw,1.35rem);line-height:2.15;letter-spacing:.1em}
.verse-paper p + p{margin-top:var(--s6)}
.verse-paper strong{color:var(--wine);font-weight:600}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.pillar{padding:var(--s8) var(--s8) var(--s8) 0;border-right:1px solid var(--line)}
.pillar + .pillar{padding-left:var(--s8)}
.pillar:last-child{border-right:0}
.pillar .no{font-family:var(--en);font-size:var(--text-2xl);color:var(--gold);line-height:1}
.pillar h3{font-size:var(--text-lg);margin-top:var(--s5)}
.pillar p{margin-top:var(--s3);color:var(--mute);font-size:var(--text-sm)}
@media (max-width:860px){.pillars{grid-template-columns:1fr}.pillar,.pillar + .pillar{padding:var(--s6) 0;border-right:0;border-bottom:1px solid var(--line)}}

/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--s8),6vw,var(--s20));align-items:center}
.split.rev .split-media{order:2}
.split-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split-media.wide img{aspect-ratio:3/2}
.split-copy .h-sec{margin-top:var(--s4)}
.split-copy > p,.split-copy .stack{margin-top:var(--s5)}
.split-copy .btns{margin-top:var(--s8)}
@media (max-width:860px){.split{grid-template-columns:1fr}.split.rev .split-media{order:0}.split-media img{aspect-ratio:4/3}}

/* list with ticks */
.dl{border-top:1px solid var(--line)}
.dl > div{display:grid;grid-template-columns:9em 1fr;gap:var(--s4);padding-block:var(--s4);border-bottom:1px solid var(--line)}
.dl dt{font-family:var(--serif);color:var(--wine);font-weight:600;letter-spacing:.08em}
.dl dd{color:var(--ink)}
@media (max-width:520px){.dl > div{grid-template-columns:1fr;gap:var(--s1)}}

/* tea cards (index) */
.teas{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(var(--s4),1.6vw,var(--s6))}
.teac{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.teac:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(140,115,75,.4)}
.teac .band{background:var(--c);color:var(--bt);padding:var(--s3) var(--s5);display:flex;justify-content:space-between;align-items:center;font-size:var(--text-xs);letter-spacing:.16em}
.teac .band .en{font-size:var(--text-xs);letter-spacing:.14em}
.teac .bd{padding:var(--s5) var(--s5) var(--s6);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.teac h3{font-size:var(--text-lg);letter-spacing:.1em}
.teac .nm{font-family:var(--en);color:var(--mute);font-size:var(--text-sm)}
.teac .meta{font-size:var(--text-xs);color:var(--mute);letter-spacing:.08em;margin-top:auto;padding-top:var(--s4);display:flex;justify-content:space-between;gap:var(--s2)}
.teac .meta b{color:var(--wine);font-weight:500}
.teac .notes{font-family:var(--serif);font-size:var(--text-sm);color:var(--ink);letter-spacing:.06em;line-height:1.8}
@media (max-width:1000px){.teas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.teas{grid-template-columns:1fr}}

.rib{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;height:8px}
.rib i{border-radius:1px;background:var(--paper-3)}
.rib.lg{height:12px;gap:4px}

/* logos */
.clients{background:#fff;border-block:1px solid var(--line)}
.clients img{width:min(100%,980px);margin-inline:auto;mix-blend-mode:multiply}
.case-list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s6);margin-top:var(--s8);font-family:var(--en);color:var(--mute);font-size:var(--text-sm);letter-spacing:.12em}

/* Glassbelly band */
.gb{background:var(--paper-2);border-top:1px solid var(--line)}
.gb-in{display:grid;grid-template-columns:1fr auto;gap:var(--s8);align-items:center}
.gb h2{font-size:var(--text-xl)}
.gb p{margin-top:var(--s3);color:var(--mute);max-width:40em}
@media (max-width:720px){.gb-in{grid-template-columns:1fr}}

/* cases */
.cases{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(var(--s4),2vw,var(--s8))}
.case{grid-column:span 6}
.case.w{grid-column:span 12}
.case.t{grid-column:span 4}
.case figure{overflow:hidden;background:var(--paper-3)}
.case img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.2s var(--ease)}
.case.t img{aspect-ratio:4/5}
.case.w img{aspect-ratio:21/9}
.case.w.r32 img{aspect-ratio:3/2}
.case:hover img{transform:scale(1.03)}
.case .cap{display:flex;justify-content:space-between;gap:var(--s4);padding-top:var(--s4);align-items:baseline;flex-wrap:wrap}
.case .cap h3{font-size:var(--text-base);letter-spacing:.1em}
.case .cap span{font-family:var(--en);color:var(--gold);font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase}
@media (max-width:860px){.case,.case.t,.case.w{grid-column:span 12}.case.w img{aspect-ratio:3/2}.case.t img{aspect-ratio:3/2}}

/* formats */
.formats{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.fmt{padding:var(--s8) var(--s8) var(--s8) 0;border-bottom:1px solid var(--line)}
.fmt:nth-child(even){padding-left:var(--s8);padding-right:0;border-left:1px solid var(--line)}
.fmt .no{font-family:var(--en);color:var(--gold);letter-spacing:.2em;font-size:var(--text-xs)}
.fmt h3{font-size:var(--text-lg);margin-top:var(--s3)}
.fmt p{margin-top:var(--s3);color:var(--mute);font-size:var(--text-sm)}
.fmt .tag{display:inline-block;margin-top:var(--s4);font-size:var(--text-xs);letter-spacing:.1em;color:var(--wine);background:var(--paper-2);padding:var(--s1) var(--s3);border-radius:2px}
@media (max-width:760px){.formats{grid-template-columns:1fr}.fmt,.fmt:nth-child(even){padding:var(--s6) 0;border-left:0}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--s4),2vw,var(--s8));counter-reset:st}
.step{border-top:2px solid var(--wine);padding-top:var(--s5)}
.step .no{font-family:var(--en);font-size:var(--text-xl);color:var(--wine);line-height:1}
.step h3{font-size:var(--text-base);margin-top:var(--s3);letter-spacing:.12em}
.step p{margin-top:var(--s2);color:var(--mute);font-size:var(--text-sm)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* enquiry */
.enq{background:var(--wine);color:#FFFFFF}
.enq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(var(--s8),6vw,var(--s20))}
.enq h2{color:#fff;font-size:var(--text-xl);margin-top:var(--s4)}
.enq .kick{color:#FFFFFF}
.enq p{color:#FFFFFF}
.enq .alt{margin-top:var(--s8);font-size:var(--text-sm);color:#FFFFFF;line-height:2}
.enq .alt a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s5)}
.form .f{display:flex;flex-direction:column;gap:var(--s2)}
.form .f.full{grid-column:1/-1}
.form label{font-size:var(--text-xs);letter-spacing:.16em;color:#FFFFFF}
.form input,.form select,.form textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);border-radius:2px;padding:var(--s3) var(--s4);min-height:48px;color:#fff;font-size:var(--text-base);transition:border-color .2s,background .2s}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#FFFFFF 50%),linear-gradient(135deg,#FFFFFF 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:var(--s10)}
.form select option{color:var(--ink)}
.form textarea{min-height:110px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.45)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold-l);background:rgba(255,255,255,.1)}
.form .act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;margin-top:var(--s2)}
.form .hint{font-size:var(--text-xs);color:#D9CDBB}
@media (max-width:860px){.enq-grid{grid-template-columns:1fr}}
@media (max-width:520px){.form{grid-template-columns:1fr}}

/* aroma grid (method) */
.aromas{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s2)}
.aroma{background:#fff;border:1px solid var(--line);padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.aroma i{width:100%;height:6px;background:var(--d);border-radius:1px}
.aroma b{font-family:var(--serif);font-weight:600;color:var(--ink);letter-spacing:.1em;font-size:var(--text-base)}
.aroma span{font-family:var(--en);font-size:var(--text-xs);color:var(--mute);letter-spacing:.12em}
.aroma.neg{background:transparent;border-style:dashed}
.aroma.neg b{color:var(--mute)}
@media (max-width:900px){.aromas{grid-template-columns:repeat(4,1fr)}}
@media (max-width:480px){.aromas{grid-template-columns:repeat(2,1fr)}}

.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
.lvl{border:1px solid #D9CDBB;padding:var(--s5) var(--s3);text-align:center;background:#fff}
.lvl .n{font-family:var(--en);color:var(--gold);font-size:var(--text-sm)}
.lvl .m{font-family:var(--serif);font-weight:600;font-size:var(--text-lg);color:var(--wine);letter-spacing:.12em;margin-top:var(--s1);white-space:nowrap}
.lvl .r{font-size:var(--text-xs);color:var(--mute);margin-top:var(--s1)}
.lvl:nth-child(5){background:var(--wine);border-color:var(--wine)}
.lvl:nth-child(5) .m{color:#fff}.lvl:nth-child(5) .n,.lvl:nth-child(5) .r{color:#E3CFC3}
@media (max-width:640px){.levels{grid-template-columns:1fr}.lvl{display:grid;grid-template-columns:3em 1fr auto;align-items:center;text-align:left;padding:var(--s3) var(--s4)}.lvl .m,.lvl .r{margin:0}}

/* brew */
.brews{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--s4),2vw,var(--s8))}
.brew{border:1px solid var(--gold);padding:var(--s8) var(--s6) var(--s6);position:relative;background:#fff}
.brew h3{font-size:var(--text-lg)}
.brew h3 .en{display:block;font-size:var(--text-xs);color:var(--gold);letter-spacing:.22em;text-transform:uppercase;font-weight:400;margin-top:var(--s1)}
.prm{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s6);border-block:1px solid var(--line)}
.prm div{padding:var(--s4) var(--s2);text-align:center;border-left:1px solid var(--line)}
.prm div:first-child{border-left:0}
.prm b{display:block;font-family:var(--en);font-weight:400;font-size:var(--text-xl);color:var(--wine);line-height:1.1;white-space:nowrap}
.prm b small{font-family:var(--sans);font-size:.55em;margin-left:2px}
.prm span{display:block;font-size:var(--text-xs);color:var(--mute);margin-top:var(--s1);letter-spacing:.08em}
.brew ol{margin-top:var(--s5);counter-reset:b}
.brew ol li{counter-increment:b;display:grid;grid-template-columns:1.8em 1fr;padding-block:var(--s2);font-size:var(--text-sm)}
.brew ol li::before{content:counter(b);font-family:var(--en);color:var(--gold)}
.brew .ps{margin-top:var(--s4);font-size:var(--text-xs);color:var(--mute)}
@media (max-width:760px){.brews{grid-template-columns:1fr}.prm{grid-template-columns:repeat(2,1fr)}.prm div:nth-child(3){border-left:0}.prm div:nth-child(n+3){border-top:1px solid var(--line)}}

/* people */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--s4),2vw,var(--s8))}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.15)}
.person h3{font-size:var(--text-lg);margin-top:var(--s5)}
.person .role{font-size:var(--text-xs);color:var(--gold);letter-spacing:.12em;margin-top:var(--s1)}
.person p{margin-top:var(--s3);color:var(--mute);font-size:var(--text-sm)}
@media (max-width:860px){.people{grid-template-columns:1fr}.person{display:grid;grid-template-columns:120px 1fr;gap:var(--s5)}.person img{aspect-ratio:1}.person h3{margin-top:0}}

/* timeline */
.tl{border-left:1px solid var(--line);margin-left:var(--s2)}
.tl li{position:relative;padding:0 0 var(--s10) var(--s8)}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-5px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--paper);border:1px solid var(--wine)}
.tl li.on::before{background:var(--wine)}
.tl .yr{font-family:var(--en);color:var(--gold);letter-spacing:.2em;font-size:var(--text-xs);text-transform:uppercase}
.tl h3{font-size:var(--text-lg);margin-top:var(--s1)}
.tl p{margin-top:var(--s2);color:var(--mute);font-size:var(--text-sm)}

/* notice */
.note-box{background:var(--paper-2);border-left:2px solid var(--gold);padding:var(--s5) var(--s6);font-size:var(--text-sm);color:var(--mute)}

/* faq */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s5) var(--s8) var(--s5) 0;font-family:var(--serif);font-weight:600;color:var(--wine);letter-spacing:.06em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--en);font-size:1.4em;color:var(--gold);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details > div{padding-bottom:var(--s5);color:var(--mute);font-size:var(--text-sm)}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--s4),2vw,var(--s8))}
.cbox{border-top:2px solid var(--wine);padding-top:var(--s5)}
.cbox h3{font-size:var(--text-lg)}
.cbox p{margin-top:var(--s3);color:var(--mute);font-size:var(--text-sm)}
.cbox .big{font-family:var(--en);font-size:var(--text-xl);color:var(--wine);margin-top:var(--s3);display:block}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* footer */
.ftr{background:#2B2116;color:#D9CDBB;padding-block:var(--s16) var(--s8);font-size:var(--text-sm)}
.ftr-top{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:var(--s8)}
.ftr .brand img{height:52px}
.ftr .tag{font-family:var(--serif);color:#FFFFFF;letter-spacing:.16em;margin-top:var(--s5)}
.ftr h4{font-family:var(--en);font-weight:400;color:var(--gold-l);font-size:var(--text-xs);letter-spacing:.24em;text-transform:uppercase;margin-bottom:var(--s4)}
.ftr li + li{margin-top:var(--s2)}
.ftr a:hover{color:#fff}
.ftr-bot{margin-top:var(--s12);padding-top:var(--s6);border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:var(--text-xs);color:#A8987F}
.soc{display:flex;gap:var(--s3);margin-top:var(--s5)}
.soc a{width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.soc a:hover{border-color:var(--gold-l);background:rgba(255,255,255,.05)}
.soc svg{width:17px;height:17px;fill:currentColor}
@media (max-width:860px){.ftr-top{grid-template-columns:1fr 1fr}.ftr-top > div:first-child{grid-column:1/-1}}

/* floating WA */
.fab{position:fixed;right:clamp(var(--s4),2vw,var(--s8));bottom:calc(clamp(var(--s4),2vw,var(--s8)) + env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;gap:var(--s2);background:var(--wine);color:#fff;border-radius:999px;padding:var(--s3) var(--s5) var(--s3) var(--s4);min-height:52px;font-size:var(--text-sm);letter-spacing:.1em;box-shadow:0 12px 30px -10px rgba(42,10,16,.55);transition:transform .35s var(--ease),opacity .35s;transform:translateY(0)}
.fab svg{width:22px;height:22px}
.fab.hide{transform:translateY(140%);opacity:0;pointer-events:none}

/* reveal */
.rv{opacity:1}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- tea record pages ---------- */
.tp{max-width:560px;margin-inline:auto;background:var(--paper)}
.tband{background:var(--c);color:var(--bt);display:flex;justify-content:space-between;align-items:center;padding:var(--s5) var(--s6)}
.tband img{height:42px;width:auto}
.tband .ty{text-align:center;line-height:1.25}
.tband .ty span{display:block;font-family:var(--en);font-size:var(--text-sm);letter-spacing:.08em}
.tband .ty b{display:block;font-family:var(--serif);font-weight:600;letter-spacing:.4em;margin-right:-.4em;font-size:var(--text-base)}
.thero{padding:var(--s8) var(--s6) var(--s6)}
.thero h1{font-size:clamp(2.1rem,1.6rem + 2vw,2.75rem);letter-spacing:.08em;line-height:1.2;margin-top:var(--s3)}
.thero .ename{font-family:var(--en);color:var(--mute);font-size:var(--text-base);margin-top:var(--s2)}
.tmeta{display:grid;grid-template-columns:1.3fr 1fr 1.1fr;gap:var(--s3);margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line)}
.tmeta dt{font-size:var(--text-xs);color:var(--gold);letter-spacing:.1em;font-weight:500}
.tmeta dt span{display:block;font-family:var(--en);font-weight:400;letter-spacing:.14em;font-size:.68rem;text-transform:uppercase}
.tmeta dd{font-family:var(--serif);margin-top:var(--s1);line-height:1.4}
.tmeta dd small{display:block;font-family:var(--en);font-size:var(--text-xs);color:var(--mute)}
.tsec{padding:var(--s8) var(--s6);border-top:1px solid var(--line)}
.tsh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4)}
.tsh h2{font-size:var(--text-lg);letter-spacing:.2em}
.tsh h2 span{font-family:var(--en);font-weight:400;font-size:var(--text-xs);color:var(--gold);letter-spacing:.2em;margin-left:var(--s2);text-transform:uppercase}
.tsh .cnt{font-size:var(--text-xs);color:var(--mute);white-space:nowrap}
.tsh .cnt b{font-family:var(--en);font-weight:400;color:var(--wine);font-size:var(--text-lg)}
.intro-l{font-family:var(--serif);font-size:var(--text-base);color:var(--ink);letter-spacing:.04em}
.intro-l .en{display:block;font-size:var(--text-sm);color:var(--mute)}
.fl{margin-top:var(--s5)}
.fl li{padding-block:var(--s5);border-bottom:1px solid var(--line)}
.fl li:first-child{padding-top:var(--s2)}
.fl li:last-child{border-bottom:0}
.fc{display:flex;align-items:center;gap:var(--s2);font-size:var(--text-sm);font-weight:500;letter-spacing:.12em}
.fc i{width:11px;height:11px;border-radius:50%;background:var(--d);flex:none}
.fc span{font-family:var(--en);font-weight:400;font-size:var(--text-xs);color:var(--gold);letter-spacing:.2em}
.fc em{margin-left:auto;font-style:normal;font-family:var(--en);color:var(--mute);font-size:var(--text-sm)}
.fw{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);margin-top:var(--s3);font-family:var(--serif);font-size:clamp(1.3rem,1.15rem + .6vw,1.5rem);font-weight:600;line-height:1.4;letter-spacing:.06em}
.fe{font-family:var(--en);color:var(--mute);font-size:var(--text-sm);margin-top:var(--s1)}
.fam-box{margin-top:var(--s6);background:var(--paper-2);padding:var(--s5)}
.fam-box .top{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--mute);margin-bottom:var(--s3);letter-spacing:.08em}
.fam-box p{font-size:var(--text-xs);color:var(--mute);margin-top:var(--s3);line-height:1.7}
.fam-key{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s1) var(--s4);margin-top:var(--s4)}
.fam-key li{display:flex;align-items:center;gap:var(--s2);font-size:var(--text-xs);color:var(--faint);white-space:nowrap}
.fam-key li i{width:8px;height:8px;border-radius:50%;background:var(--paper-3);flex:none}
.fam-key li.on{color:var(--ink)}
.fam-key li.on i{background:var(--d)}
.fam-key li span{font-family:var(--en);letter-spacing:.06em}
.tlv{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s1)}
.tlv li{border:1px solid #D9CDBB;border-radius:3px;padding:var(--s2) 2px;text-align:center;color:var(--mute);display:flex;flex-direction:column;gap:2px}
.tlv .n{font-family:var(--en);font-size:var(--text-xs)}
.tlv .m{font-family:var(--serif);font-size:var(--text-sm);color:var(--ink);white-space:nowrap}
.tlv li.on{background:var(--wine);border-color:var(--wine);color:#FFFFFF}
.tlv li.on .m{color:#fff;font-weight:600}
.tnote{font-size:var(--text-xs);color:var(--mute);margin-top:var(--s3);line-height:1.7}
.tp .brew{padding:var(--s8) var(--s5) var(--s5);margin-top:var(--s2)}
.tp .brew + .brew{margin-top:var(--s5)}
.tp .prm{grid-template-columns:repeat(2,1fr)}
.tp .prm div:nth-child(3){border-left:0}
.tp .prm div:nth-child(n+3){border-top:1px solid var(--line)}
.wsc{background:var(--wine);color:#FFFFFF;padding:var(--s10) var(--s6)}
.wsc h2{color:#fff;font-size:var(--text-xl);letter-spacing:.14em}
.wsc p{margin-top:var(--s3);color:#FFFFFF;font-size:var(--text-sm)}
.wsc ul{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s5)}
.wsc li{border:1px solid rgba(255,255,255,.25);padding:var(--s3) var(--s2);text-align:center;font-family:var(--serif);font-size:var(--text-sm);letter-spacing:.08em;color:#fff}
.wsc .btn{width:100%;margin-top:var(--s6);min-height:54px}
.wsc .wa-ic{color:#25D366}
.more{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.more a{display:flex;flex-direction:column;gap:var(--s1);border:1px solid var(--line);background:#fff;padding:var(--s4)}
.more a b{font-family:var(--serif);color:var(--wine);letter-spacing:.06em}
.more a span{font-size:var(--text-xs);color:var(--mute)}
.more a .arrow{margin-top:var(--s2)}
.others li a{display:flex;align-items:center;gap:var(--s3);padding-block:var(--s4);border-bottom:1px solid var(--line)}
.others li:last-child a{border-bottom:0}
.others .sw{width:10px;height:36px;background:var(--c);flex:none}
.others b{font-family:var(--serif);font-weight:600;color:var(--ink);letter-spacing:.08em;display:block}
.others small{font-family:var(--en);color:var(--mute)}
.others .arrow{margin-left:auto}
.tfoot{padding:var(--s10) var(--s6) var(--s16);text-align:center;border-top:1px solid var(--line)}
.tfoot img{height:46px;margin-inline:auto}
.tfoot p{font-size:var(--text-xs);color:var(--mute);margin-top:var(--s4);line-height:1.8}
.tfoot .home{margin-top:var(--s5);display:inline-flex}
.tea-shell{background:var(--paper-2)}
@media (min-width:600px){.tea-shell{padding-block:var(--s10)}.tp{box-shadow:0 0 0 1px var(--line)}}
.addr-en{display:block;margin-top:.35rem;font-size:var(--text-xs);color:var(--mute);letter-spacing:.02em;line-height:1.5}
.dl dd .link{display:inline-block;margin-top:.5rem}
.open-note{margin-top:var(--s3);color:var(--gold);font-size:var(--text-sm);letter-spacing:.08em}
.case-list{list-style:none;padding:0;margin:var(--s6) 0 var(--s8)}
.press{list-style:none;padding:0;margin:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s8)}
.press li{border-bottom:1px solid var(--line)}
.press a,.press div{display:grid;grid-template-columns:11rem 1fr auto 1.25rem;gap:var(--s4);align-items:baseline;padding:var(--s4) 0;color:var(--ink)}
.press a:hover .pt{color:var(--wine)}
.press .po{font-family:var(--serif);font-weight:600;color:var(--wine)}
.press .pt{color:var(--mute);font-size:var(--text-sm)}
.press .pd{color:var(--gold);font-size:var(--text-xs);letter-spacing:.08em}
.press .pa{color:var(--gold)}
@media (max-width:860px){.press{grid-template-columns:1fr}.press a,.press div{grid-template-columns:1fr auto 1.25rem;row-gap:.25rem}.press .po{grid-column:1/2}.press .pt{grid-column:1/-1;grid-row:2}}
.press-strip{text-align:center;margin:var(--s6) auto 0;max-width:52rem}
.press-strip .kick{justify-content:center;margin-bottom:var(--s3)}
.press-strip a{font-family:var(--en);color:var(--ink);letter-spacing:.06em;line-height:1.9}
.press-strip a:hover{color:var(--wine)}
.nw{white-space:nowrap}
.quote-origin{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--mute)}
.quote-origin blockquote{margin:.75rem 0;font-size:1.15rem;color:var(--wine);line-height:1.7}
.quote-origin p{margin:0}
.pest{list-style:none;margin:1rem 0 .5rem;padding:0;display:grid;gap:.5rem}
.pest li{display:grid;grid-template-columns:7.5rem 1fr 3rem;align-items:center;gap:.75rem;font-size:.9rem;color:var(--mute)}
.pest i{display:block;height:.5rem;width:var(--w);background:var(--faint)}
.pest b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.pest li.me{color:var(--wine);font-weight:600}
.pest li.me i{background:var(--wine)}
.phead-split img.op-low{object-position:50% 80%}
.case img.op-wing{object-position:80% 50%}

.split-media img.contain,.split-media.sq img{aspect-ratio:1/1;object-fit:contain}
.clients picture img{width:100%;height:auto}

/* event galleries */
.gcover{display:block;position:relative;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gcover img{display:block}
.gcount{position:absolute;right:var(--s3);bottom:var(--s3);background:rgba(43,33,22,.82);color:#FFFFFF;font-size:var(--text-xs);letter-spacing:.1em;padding:.35em .8em;border-radius:999px}
.gthumbs{display:flex;gap:var(--s2);margin-top:var(--s2);overflow-x:auto}
.gthumb{flex:0 0 auto;width:72px;padding:0;border:1px solid var(--line);background:none;cursor:pointer}
.gthumb img{display:block;width:72px;height:48px;object-fit:cover;aspect-ratio:auto}
.case .gthumb img{aspect-ratio:auto}
.case:hover .gthumb img{transform:none}
.lb{border:0;padding:0;background:rgba(20,15,10,.96);max-width:100vw;max-height:100vh;width:100vw;height:100vh}
.lb::backdrop{background:rgba(20,15,10,.92)}
.lb-in{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s12) var(--s4) var(--s6)}
.lb-in img{max-width:min(1200px,100%);max-height:calc(100vh - 140px);object-fit:contain}
.lb-cap{color:#FFFFFF;font-size:var(--text-sm);letter-spacing:.08em;margin-top:var(--s4);text-align:center}
.lb button{position:absolute;background:rgba(255,255,255,.12);color:#FFFFFF;border:0;width:48px;height:48px;border-radius:50%;font-size:28px;line-height:1;cursor:pointer}
.lb-x{top:var(--s4);right:var(--s4)}
.lb-p{left:var(--s3);top:50%;transform:translateY(-50%)}
.lb-n{right:var(--s3);top:50%;transform:translateY(-50%)}

.ask{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5);list-style:none;padding:0}
.ask li{border:1px solid currentColor;border-radius:999px;padding:.3em .9em;font-size:var(--text-sm);letter-spacing:.08em}
.samename p{margin-top:var(--s5);max-width:34em}.samename .btns{margin-top:var(--s8)}
.teac .notes{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.teac .meta .arrow{font-size:var(--text-sm)}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--s4),1.6vw,var(--s6))}
.typec{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.typec:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(140,115,75,.4)}
.typec .band{background:var(--c);color:var(--bt);padding:var(--s3) var(--s5);display:flex;justify-content:space-between;align-items:center;font-size:var(--text-xs);letter-spacing:.16em}
.typec .bd{padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.typec h3{font-size:var(--text-xl);letter-spacing:.12em;display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.typec h3 .en{font-family:var(--en);font-size:var(--text-sm);color:var(--mute);letter-spacing:.08em}
.typec p{font-size:var(--text-sm);color:var(--ink);line-height:1.8}
.typec .names{color:var(--mute);font-size:var(--text-xs);letter-spacing:.06em}
.typec .arrow{margin-top:auto;padding-top:var(--s3)}
@media (max-width:1000px){.types{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.types{grid-template-columns:1fr}}
.tcount{margin-top:var(--s5);color:var(--gold);font-size:var(--text-sm);letter-spacing:.14em}
.phead .kick a{color:inherit;border-bottom:1px solid currentColor}
.typenav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s10);padding-top:var(--s6);border-top:1px solid var(--line);font-size:var(--text-sm)}
.typenav span{color:var(--mute);letter-spacing:.12em}
.typenav a{display:inline-flex;align-items:center;gap:var(--s2);color:var(--ink);letter-spacing:.1em}
.typenav a i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.typenav a:hover{color:var(--wine)}
.tmeta dd a{color:var(--wine);border-bottom:1px solid currentColor}

/* 茶卡 B 版（與 A5 茶卡同一排法） */
.bt-card{--c:#8E5631;container-type:inline-size;background:#FFFFFF;color:var(--ink);font-family:var(--serif)}
.bt-card .band{background:var(--c);height:clamp(84px,22cqi,120px);display:flex;align-items:center;justify-content:center}
.bt-card .band img{height:62%;width:auto}
.bt-card .in{padding:0 clamp(18px,6cqi,36px) 28px}
.bt-card .l{display:block;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--gold);margin-bottom:6px}
.bt-card .l i{font-style:normal;margin-left:5px;letter-spacing:.14em}
.bt-card .nm{text-align:center;padding-top:28px}
.bt-card .t{font-size:clamp(24px,7cqi,32px);font-weight:600;letter-spacing:.2em;margin-right:-.2em;color:#580212;line-height:1.2}
.bt-card .e{font-family:var(--en);font-size:15px;letter-spacing:.06em;margin-top:6px;color:var(--ink)}
.bt-card .sp{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border-top:1px solid #D8CBB6;border-bottom:2px solid #580212}
.bt-card .sp > div{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 4px 16px}
.bt-card .sp b{font-size:16px;font-weight:600;letter-spacing:.1em;color:var(--ink)}
.bt-card .sp a{text-decoration:underline;text-decoration-color:#D8CBB6;text-underline-offset:4px}
.bt-card .sp em{font-style:normal;font-family:var(--en);font-size:12px;color:#5F514E;margin-top:3px}
.bt-card .yv{font-family:var(--en);font-size:26px;line-height:1;color:#580212}
.bt-card .sh{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:24px;padding-bottom:12px;border-bottom:1px solid #E6DDD2}
.bt-card .sh span{font-size:16px;font-weight:600}
.bt-card .sh em{display:block;font-style:normal;font-family:var(--en);font-size:13px;color:#5F514E;margin-top:3px}
.bt-card .cnt{font-family:var(--sans);font-size:12px;font-weight:500;color:#580212;white-space:nowrap}
.bt-card .cnt b{font-family:var(--en);font-size:24px;margin-right:3px}
.bt-card .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;margin-top:20px}
@container (min-width:480px){.bt-card .grid{grid-template-columns:repeat(4,1fr)}.bt-card .grid.many{grid-template-columns:repeat(5,1fr)}}
.bt-card .w{display:flex;flex-direction:column;align-items:center;text-align:center}
.bt-card .w img{width:min(100%,120px);height:auto;aspect-ratio:1;object-fit:contain}
.bt-card .grid.many .w img{width:min(100%,96px)}
.bt-card .tx{width:86%;margin-top:6px;padding-top:6px;border-top:1px solid #E6DDD2;display:flex;flex-direction:column;align-items:center}
.bt-card .wc{font-size:16px;font-weight:600;letter-spacing:.06em;white-space:nowrap}
.bt-card .we{font-family:var(--en);font-size:12px;color:#5F514E;margin-top:2px;line-height:1.2;hyphens:auto}
.bt-card .fnote{margin-top:24px;font-family:var(--sans);font-size:12px;color:var(--mute);text-align:center}
.bt-card .dl{display:flex;justify-content:center;align-items:center;min-height:44px;margin-top:16px;font-family:var(--sans);font-size:14px;color:#580212;border:1px solid #580212;padding:8px 16px;letter-spacing:.1em}
.bt-card .dl:hover{background:#580212;color:#FFFFFF}
.bt-card .ft{display:flex;justify-content:space-between;align-items:baseline;margin-top:24px;padding-top:12px;border-top:2px solid #580212;font-family:var(--en);font-size:12px;letter-spacing:.2em;color:#580212}
.bt-card .ft .kc{font-family:var(--serif);font-weight:600;letter-spacing:.3em}
.bt-card .ft .kc i{font-style:normal;font-family:var(--en);font-weight:400;color:var(--gold);margin-left:8px}

/* 防止長按儲存／拖曳相片 */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* tea finder */
.finder{display:flex;flex-direction:column;gap:var(--s3)}
.f-lab{font-family:var(--serif);color:var(--wine);font-size:var(--text-lg);letter-spacing:.08em;font-weight:600}
.f-box{position:relative}
.f-box input{width:100%;min-height:52px;padding:0 52px 0 var(--s5);font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;-webkit-appearance:none;appearance:none}
.f-box input:focus{outline:none;border-color:var(--gold)}
.f-box input::-webkit-search-cancel-button{display:none}
.f-clr{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:none;color:var(--gold);font-size:22px;line-height:1;cursor:pointer}
.f-n{font-size:var(--text-sm);color:var(--gold);letter-spacing:.08em;margin:0}
.f-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.f-list li[hidden]{display:none}
.f-list a{display:grid;grid-template-columns:10px 1fr auto;grid-template-areas:"d n t" "d e t";column-gap:var(--s4);align-items:center;padding:var(--s4) var(--s2);border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;min-height:56px}
.f-list a:hover{background:#fff}
.f-list i{grid-area:d;width:10px;height:100%;min-height:36px;background:var(--c)}
.f-list .fn{grid-area:n;font-family:var(--serif)}
.f-list .fn b{color:var(--wine);font-weight:600;letter-spacing:.06em}
.f-list .fy{font-family:var(--en);color:var(--gold);font-size:var(--text-sm);letter-spacing:.1em}
.f-list .fe{grid-area:e;font-family:var(--en);font-size:var(--text-xs);color:var(--gold);letter-spacing:.08em}
.f-list .ft{grid-area:t;font-size:var(--text-sm);color:var(--ink);opacity:.75}
.f-list .ft::after{content:" →";font-family:var(--en)}
.f-none{margin:0}
.f-none a{color:var(--wine);text-decoration:underline}
.bt-card .w .noimg{display:block;width:min(100%,120px);aspect-ratio:1;position:relative}
.bt-card .w .noimg::after{content:"";position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid var(--c);border-radius:50%;opacity:.55}