/* One viewport-centered, opacity-only dialog for every Japanese tea menu. */
.tea-recipe-dialog {
  position:fixed;inset:0;margin:auto;padding:0;border:0;
  width:calc(100% - 40px);max-width:1800px;max-height:calc(100svh - 40px);
  border-radius:32px;background:#fff8ee;color:#29180f;
  overflow:auto;scrollbar-width:none;overscroll-behavior:contain;
  font-family:'Noto Sans Thai',sans-serif;
}
.tea-recipe-dialog::-webkit-scrollbar{display:none}
.tea-recipe-dialog[open]{animation:tea-recipe-fade-in .32s ease both}
.tea-recipe-dialog::backdrop{background:rgba(21,12,7,.75);backdrop-filter:blur(6px);animation:tea-recipe-fade-in .32s ease both}
.tea-recipe-dialog[open].is-closing,.tea-recipe-dialog.is-closing::backdrop{animation:tea-recipe-fade-out .22s ease both;pointer-events:none}
.tea-recipe-close{position:sticky;top:18px;float:right;margin:18px 20px -74px 0;z-index:2;display:grid;place-items:center;width:52px;height:52px;border:1px solid #29180f26;border-radius:50%;background:#fff8ee;color:#1d100a;font:36px/1 Arial;cursor:pointer}
.tea-recipe-close:hover{background:#f8ebd9}
.tea-recipe-close:focus-visible{outline:3px solid #d87719;outline-offset:3px}
.tea-recipe-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(560px,1.28fr);align-items:center;min-height:min(800px,calc(100svh - 40px));gap:clamp(24px,3vw,56px);padding:72px clamp(28px,3.8vw,68px) 48px}
.tea-recipe-media{display:grid;place-items:center;min-width:0}
.tea-recipe-media img{width:100%;height:65svh;max-height:65svh;object-fit:contain;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
.tea-recipe-content{min-width:0}
.tea-recipe-content h2{font-size:clamp(28px,3vw,52px);font-weight:500;line-height:1.35;margin:0 0 28px;overflow-wrap:anywhere}
.tea-recipe-content h2:has(.tea-recipe-title-line){container-type:inline-size}
.tea-recipe-title-line{display:block;white-space:nowrap;overflow-wrap:normal;word-break:normal;font-size:min(1em,8cqi)}
.tea-recipe-table{width:100%;border-collapse:collapse;font-size:clamp(14px,1.3vw,21px);line-height:1.6;text-align:left}
.tea-recipe-table thead{border-top:1px solid #29180f26;border-bottom:1px solid #29180f26;color:#856a50;font-size:.8em}
.tea-recipe-table th,.tea-recipe-table td{padding:7px 0;font-weight:400;vertical-align:top}
.tea-recipe-table th:first-child{padding-right:18px;overflow-wrap:anywhere}
.tea-recipe-table td,.tea-recipe-table thead th:not(:first-child){width:auto;white-space:normal;overflow-wrap:anywhere;padding-left:20px}
.tea-recipe-group th{padding-top:14px;color:#a45e24;font-size:.8em;font-weight:600}
.tea-recipe-method{margin:26px 0 0;padding:0 0 20px;border-bottom:1px solid #29180f26;font-size:clamp(14px,1.3vw,21px);line-height:1.75}
.tea-recipe-method[hidden]{display:none}
.tea-recipe-long .tea-recipe-table{font-size:clamp(14px,1.15vw,18px)}
.tea-recipe-long .tea-recipe-table th,.tea-recipe-long .tea-recipe-table td{padding-top:4px;padding-bottom:4px}
@keyframes tea-recipe-fade-in{from{opacity:0}to{opacity:1}}
@keyframes tea-recipe-fade-out{from{opacity:1}to{opacity:0}}
@media(max-width:760px),(min-width:761px) and (max-width:1180px) and (orientation:portrait){
  .tea-recipe-dialog{width:calc(100% - 20px);max-height:calc(100svh - 20px);border-radius:24px}
  .tea-recipe-layout{grid-template-columns:1fr;min-height:0;gap:20px;padding:66px 24px 30px}
  .tea-recipe-media img{height:32svh;max-height:340px}
  .tea-recipe-content h2{font-size:27px;margin-bottom:22px}
  .tea-recipe-table{font-size:14px}
  .tea-recipe-table td,.tea-recipe-table thead th:not(:first-child){padding-left:12px}
}
@media(prefers-reduced-motion:reduce){.tea-recipe-dialog[open],.tea-recipe-dialog::backdrop{animation:none!important}}