/* One navigation rule, with a clear and readable type hierarchy. */
.collection,.philosophy-stage{border-top:0}
.visit::before{display:none}
.header nav a,.header-contact{font-size:15px}
.brand-en{font-size:10px}
.collection-heading .eyebrow,.gallery-count{font-size:13px}
.filter,.tea-tabs button{font-size:15px}
.product-name{font-size:24px;line-height:1.5}
.product-subtitle{font-size:14px;line-height:1.8}
.tea-detail-heading{font-size:12px}
.tea-detail-hint,.tea-detail figcaption{font-size:11px}
.tea-description{font-size:15px;line-height:1.85}
.tea-caption .line-link{font-size:15px}
.menu-button span{transform-origin:center;transition:transform .3s var(--ease)}
.menu-button[aria-expanded='true'] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-button[aria-expanded='true'] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* Readable catalogue controls, with a deliberate return action. */
#product-dialog .dialog-mode-button{font-size:14px;border-radius:2px;padding-inline:6px;transition:color .25s,background .25s}
#product-dialog .dialog-mode-button::after{transform:scaleX(.45);transform-origin:center;transition:opacity .3s,transform .4s var(--ease)}
#product-dialog .dialog-mode-button[aria-pressed='true']::after{transform:scaleX(1)}
#product-dialog .dialog-close{min-width:110px;justify-content:center;min-height:44px;gap:10px;padding:7px 10px;margin-right:-10px;border:1px solid #b7c3b426;border-radius:2px;font-size:13px;color:var(--folio-text);transition:border-color .3s,background .3s,color .3s}
#product-dialog .dialog-close svg{width:21px;height:21px;stroke-width:1.1;transition:transform .4s var(--ease)}
#product-dialog .dialog-copy>.eyebrow,#product-dialog .dialog-facts dt{font-size:12px;color:#a4aca3}
#product-dialog #dialog-title{font-size:clamp(36px,3vw,44px)}
#product-dialog #dialog-subtitle{font-size:14px}
#product-dialog .dialog-facts dd{font-size:16px;line-height:1.85}
#product-dialog .dialog-process summary{font-size:13px}
#product-dialog #dialog-album-link{font-size:16px}
#product-dialog .dialog-note{font-size:12px}
#product-dialog .dialog-image-caption{font-size:12px}
#product-dialog #dialog-view-hint{font-size:11px}
#product-dialog .dialog-prev,#product-dialog .dialog-next{font-size:12px}
#product-dialog .dialog-prev small,#product-dialog .dialog-next small{font-size:13px}
#product-dialog .dialog-prev svg,#product-dialog .dialog-next svg,#product-dialog #dialog-album-link svg{transition:transform .35s var(--ease)}

@media(hover:hover) and (pointer:fine){
 #product-dialog .dialog-mode-button:hover{color:#f1eee5;background:#c8cebd0a}
 #product-dialog .dialog-close:hover{border-color:#b7c3b45c;background:#c8cebd0b}
 #product-dialog .dialog-close:hover svg{transform:rotate(90deg)}
 #product-dialog .dialog-prev:hover svg{transform:translateX(-3px)}
 #product-dialog .dialog-next:hover svg{transform:translateX(3px)}
 #product-dialog #dialog-album-link:hover svg{transform:translate(2px,-2px)}
}
@media(min-width:761px) and (max-width:1100px){
 #product-dialog #dialog-title{font-size:34px}
 #product-dialog .dialog-facts dd{font-size:15px}
}
@media(min-width:761px) and (max-height:680px){
 #product-dialog #dialog-title{font-size:34px}
 #product-dialog .dialog-facts dd{font-size:15px;line-height:1.8}
 #product-dialog .dialog-process summary{font-size:12px}
 #product-dialog .dialog-note{font-size:11px}
}
@media(max-width:760px){
 .header nav a{font-size:17px}
 .header-contact{font-size:14px}
 .filter,.tea-tabs button{font-size:13px}
 .product-name{font-size:18px;line-height:1.5}
 .product-subtitle{font-size:13px;line-height:1.65}
 .tea-description,.tea-caption .line-link{font-size:14px}
 .tea-detail-heading{font-size:11px}
 #product-dialog #dialog-title{font-size:32px;line-height:1.4}
 #product-dialog #dialog-subtitle{font-size:13px}
 #product-dialog .dialog-copy>.eyebrow,#product-dialog .dialog-facts dt{font-size:11px}
 #product-dialog .dialog-facts dd{font-size:15px}
 #product-dialog .dialog-mode-button{font-size:14px}
 #product-dialog .dialog-category{display:none}
 #product-dialog .dialog-topbar{grid-template-columns:minmax(0,1fr) auto;column-gap:16px}
 #product-dialog .dialog-close{grid-column:2;min-width:104px;font-size:12px}
 #product-dialog .dialog-image-caption,#product-dialog .dialog-note{font-size:11px}
 #product-dialog .dialog-prev small,#product-dialog .dialog-next small{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .menu-button span,#product-dialog .dialog-mode-button,#product-dialog .dialog-mode-button::after,#product-dialog .dialog-close,#product-dialog .dialog-close svg,#product-dialog .dialog-prev svg,#product-dialog .dialog-next svg,#product-dialog #dialog-album-link svg{transition:none}
 #product-dialog .dialog-close:hover svg,#product-dialog .dialog-prev:hover svg,#product-dialog .dialog-next:hover svg,#product-dialog #dialog-album-link:hover svg{transform:none}
}