/* Afternoon-tea homepage scene (only loaded on the home page). Everything is sized in --u, one
   "scene unit": the landscape scene is ~176u wide x 100u tall, the portrait one ~100u x 176u. */
.tea{position:relative;height:calc(100svh - 76px);min-height:540px;max-height:1000px;overflow:hidden;background:#fdf0f3;container:tea/size;--u:min(1vh,.568vw)}
.tea-wait .tea .anim,.tea-wait .tea .art,.tea-wait .tea .tea-tag,.tea-wait .tea .plate-in > *{visibility:hidden}
.tea .cloth{position:absolute;left:-3%;top:-3%;width:106%;height:106%;display:block}
.tea-stage,.tea-layer{position:absolute;inset:0}
@supports (width:1cqmin){.tea{--u:min(1cqh,.568cqw)}}
.tea-layer > *{position:absolute;left:calc(50% + var(--x,0) * var(--u) + var(--side,0) * max(0px, (50% - 88 * var(--u)) * .45));
  top:calc(50% + var(--y,0) * var(--u));width:calc(var(--s) * var(--u));transform:translate(-50%,-50%)}

/* center plate */
.tea-plate{--s:74;--y:0}
.tea-plate .doily{position:absolute;left:-11.1%;top:-11.1%;width:122.2%;height:122.2%;filter:drop-shadow(0 calc(.5 * var(--u)) calc(.8 * var(--u)) rgba(91,67,72,.18))}
.plate-wrap{position:relative;aspect-ratio:1;filter:drop-shadow(0 calc(1 * var(--u)) calc(1.4 * var(--u)) rgba(91,67,72,.28))}
.tea .dish{position:absolute;inset:0;width:100%;height:100%;display:block}
.plate-in{position:absolute;inset:19% 17%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(1.6 * var(--u))}
.plate-in img{width:82%;height:auto}
.plate-in h1{font-size:calc(4.1 * var(--u));line-height:1.12;color:var(--ink);letter-spacing:-.01em}
.plate-in h1 em{font-style:normal;color:#d4687d}
html[lang=zh] .plate-in h1{font-size:calc(3.9 * var(--u))}

/* fork + spoon */
.tea .cutlery{--s:8.6;filter:drop-shadow(0 calc(.6 * var(--u)) calc(.8 * var(--u)) rgba(91,67,72,.25))}
.tea .cutlery svg{display:block;width:100%;height:auto}
.c-fork{--x:-45;--y:3}
.c-spoon{--x:45;--y:3}
.c-berries{--s:12;--x:-36;--y:42}

/* the six things on the table: each one opens a page */
.tea-item{display:block;text-decoration:none;color:var(--ink);-webkit-tap-highlight-color:transparent;border-radius:24px}
.tea-item .lift,.tea-item .art{display:block}
.tea-item .art{filter:drop-shadow(0 calc(.8 * var(--u)) calc(1 * var(--u)) rgba(91,67,72,.28))}
.tea-item svg{display:block;width:100%;height:auto;overflow:visible}
.tag-pin{position:absolute;left:-30%;right:-30%;top:calc(100% - 2.2 * var(--u) + var(--ty,0) * var(--u));display:flex;justify-content:center;pointer-events:none;
  filter:drop-shadow(0 2px 0 rgba(91,67,72,.14)) drop-shadow(0 calc(.6 * var(--u)) calc(.8 * var(--u)) rgba(91,67,72,.22))}
.tea-tag{position:relative;display:inline-block;white-space:nowrap;background:#fffdf8;color:var(--ink);font-family:var(--display);font-weight:600;
  font-size:clamp(12.5px,calc(2.25 * var(--u)),18px);line-height:1.2;padding:.45em 1em .45em 1.55em;border-radius:.45em;
  transform:rotate(var(--r,-3deg));clip-path:polygon(.75em 0,100% 0,100% 100%,.75em 100%,0 50%)}
.tea-tag::before{content:"";position:absolute;left:.62em;top:50%;width:.38em;height:.38em;margin-top:-.19em;border-radius:50%;background:#e8879b}
.tea-tag.go{background:#e8879b;color:#fff}.tea-tag.go::before{background:#fffdf8}
.i-teacup{--s:24;--x:-66;--y:-30;--side:-1;--r:-4deg}
.i-cake{--s:27;--x:-72;--y:3;--side:-1;--r:3deg}
.i-cookies{--s:22;--x:-64;--y:34;--side:-1;--r:-2deg}
.i-teapot{--s:26;--x:66;--y:-31;--side:1;--r:3deg}
.i-notebook{--s:20;--x:71;--y:-2;--side:1;--r:2deg}
.i-cupcake{--s:15.5;--x:64;--y:24;--side:1;--r:-3deg}

.tea-down{position:absolute;left:50%;bottom:calc(1.2 * var(--u) + 8px);transform:translateX(-50%);width:44px;height:44px;border-radius:50%;background:#fffdf8;color:var(--ink);
  display:grid;place-items:center;text-decoration:none;font-size:20px;font-weight:700;box-shadow:0 6px 16px -6px rgba(91,67,72,.45);z-index:2}

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .tea-item .lift{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
  .tea-item:hover .lift{transform:translateY(calc(-1.4 * var(--u))) scale(1.06) rotate(-2deg)}
}
.tea-item:focus-visible{outline:3px solid var(--mist-deep);outline-offset:4px}
@media (prefers-reduced-motion:no-preference){
  .tea-down{animation:tea-bob 2.2s ease-in-out infinite}
  @keyframes tea-bob{50%{transform:translate(-50%,6px)}}
}

/* phones and tall windows: plate in the middle, two rows of treats below, cup + teapot above */
@media (max-aspect-ratio:1/1){
  /* the scene is 190u tall (teapot steam at the top, bottom tags at the bottom) and centered */
  .tea{height:max(calc(100svh - 76px),min(186vw,900px));max-height:none;min-height:0}
  .tea{--u:min(1vw,calc((100svh - 76px) / 190))}
  @supports (width:1cqmin){.tea{--u:min(1cqw,calc(1cqh * 100 / 190))}}
  .tea-layer > *{left:calc(50% + var(--x,0) * var(--u))}
  .tea-plate{--s:68;--y:-16}
  .c-fork{--x:-43;--y:-14;--s:7}
  .c-spoon{--x:43;--y:-14;--s:7}
  .c-berries{display:none}
  .i-notebook{--s:25;--x:-24;--y:-71}
  .i-teapot{--s:31;--x:25;--y:-72}
  .i-cake{--s:34;--x:-23;--y:37}
  .i-cupcake{--s:21;--x:25;--y:35}
  .i-cookies{--s:28;--x:-24;--y:70}
  .i-teacup{--s:27;--x:25;--y:70}
  .plate-in h1{font-size:calc(4.4 * var(--u))}
  html[lang=zh] .plate-in h1{font-size:calc(4.2 * var(--u))}
  .tea-down{display:none}
}

/* text that used to sit in the old hero, right under the scene */
.tea-intro{text-align:center;padding-block:46px 10px}
.tea-intro .lede{font-size:18px;max-width:58ch;margin:12px auto 0}
.tea-intro .facts{justify-content:center}
.tea-intro .fact{background:var(--blush)}
.tea-intro .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}

/* ---------- class menu: "pick a cup" ---------- */
html:has(.tea.cups){scroll-padding-top:76px}
@media (prefers-reduced-motion:no-preference){html:has(.tea.cups){scroll-behavior:smooth}}
.tea.cups{background:repeating-linear-gradient(90deg,#f6c9d3 0 58px,#fdeef2 58px 116px)}
.tea.cups::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,transparent 55%,rgba(91,67,72,.15))}
.tea-wait .tea .deco svg{visibility:hidden}
.tea .deco{filter:drop-shadow(0 calc(.8 * var(--u)) calc(1 * var(--u)) rgba(91,67,72,.28))}
.tea .deco svg{display:block;width:100%;height:auto;overflow:visible}
.cups .tea-plate{--s:80;--y:0}
.cups .plate-in{gap:calc(.8 * var(--u))}
.cups .plate-in h1{font-size:calc(5.4 * var(--u))}
html[lang=zh] .cups .plate-in h1{font-size:calc(5.6 * var(--u))}
.cups-sub{font-family:var(--display);font-weight:500;color:var(--ink-soft);font-size:calc(2.5 * var(--u))}
.cup-3{--s:20;--x:-23;--y:-17;--r:-3deg}
.cup-2{--s:20;--x:23;--y:-17;--r:3deg}
.cup-1{--s:20;--x:0;--y:25;--r:-2deg}
.c-teapot{--s:24;--x:63;--y:-22;--side:1}
.i-creamer{--s:12;--x:66;--y:18;--side:1;--r:3deg}
.cups .c-berries{--s:14;--x:-64;--y:14;--side:-1}
.tag-up .tag-pin{top:auto;bottom:calc(100% - .4 * var(--u))}
.cups .tea-tag{white-space:normal;max-width:calc(30 * var(--u));text-align:center;padding:.4em .9em .4em 1.5em}
.cups .tea-tag small{display:block;font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.cups-back{position:absolute;left:18px;top:16px;z-index:2;background:#fffdf8;color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;
  padding:8px 14px;border-radius:99px;box-shadow:0 6px 16px -8px rgba(91,67,72,.45)}
@media (max-aspect-ratio:1/1){
  .tea.cups{height:max(calc(100svh - 76px),min(165vw,900px))}
  .tea.cups{--u:min(1vw,calc((100svh - 76px) / 165))}
  @supports (width:1cqmin){.tea.cups{--u:min(1cqw,calc(1cqh * 100 / 165))}}
  .cups .tea-plate{--s:94;--y:2}
  .cup-3{--s:26;--x:-21;--y:-14}
  .cup-2{--s:26;--x:21;--y:-14}
  .cup-1{--s:26;--x:0;--y:29}
  .cups .plate-in h1{font-size:calc(6.6 * var(--u))}
  html[lang=zh] .cups .plate-in h1{font-size:calc(6.8 * var(--u))}
  .cups-sub{font-size:calc(3.4 * var(--u))}
  .c-teapot{--s:26;--x:27;--y:-63}
  .i-creamer{--s:16;--x:-15;--y:65}
  .cups .c-berries{display:block;--s:15;--x:25;--y:68}
  .cups .tea-tag{max-width:calc(38 * var(--u))}
}

/* each level: text card on the left, the dishes on a silver tray on the right */
.cup-detail{padding-block:64px}
.cup-detail.l3{background:#fde6cf repeating-linear-gradient(135deg,rgba(249,207,166,.6) 0 14px,transparent 14px 28px)}
.cup-detail.l2{background-color:#f2f9fc;background-image:linear-gradient(90deg,rgba(169,216,236,.45) 50%,transparent 50%),linear-gradient(rgba(169,216,236,.45) 50%,transparent 50%);background-size:28px 28px}
.cup-detail.l1{background-color:#fbe3e8;background-image:radial-gradient(#fffaf2 22%,transparent 24%),radial-gradient(#fffaf2 22%,transparent 24%);background-size:32px 32px;background-position:0 0,16px 16px}
.cup-detail.extras{background:#fffaf2 repeating-linear-gradient(90deg,rgba(211,230,198,.5) 0 12px,transparent 12px 24px)}
.cd-grid{display:grid;grid-template-columns:minmax(260px,.75fr) 1.7fr;gap:40px;align-items:start}
.cd-text{background:#fffdf8;border-radius:22px;padding:24px 24px 26px;box-shadow:0 18px 40px -26px rgba(91,67,72,.5);position:sticky;top:96px}
.cd-back{display:inline-block;font-weight:700;text-decoration:none;color:var(--ink-soft);font-size:14px;margin-bottom:16px}
.cd-back:hover{color:var(--rose-deep)}
.cd-text h2{font-size:clamp(24px,2.6vw,32px)}
.cd-time{margin:14px 0 16px;font-weight:700;color:var(--ink-soft)}
.cd-text .price-box{margin-bottom:18px}
.cd-text .btn{width:100%;justify-content:center}
.cup-detail .badge{width:60px;height:60px}
.cup-detail.l3 .badge{background:var(--peach)}.cup-detail.l3 .badge b{color:var(--peach-deep)}
.cup-detail.l2 .badge{background:var(--mist)}.cup-detail.l2 .badge b{color:var(--mist-deep)}
.cup-detail.l1 .badge{background:var(--rose)}.cup-detail.l1 .badge b{color:var(--rose-deep)}
.cd-tray{position:relative;padding:20px;border-radius:30px;background:linear-gradient(145deg,#fbfaf9,#dcd7d3 40%,#f6f4f2 58%,#cdc7c2);
  box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 5px rgba(91,67,72,.10),0 24px 44px -26px rgba(91,67,72,.6)}
.cd-tray::before,.cd-tray::after{content:"";position:absolute;top:50%;width:24px;height:84px;margin-top:-42px;border:7px solid #d3cdc8;border-radius:18px}
.cd-tray::before{left:-24px;border-right:0}.cd-tray::after{right:-24px;border-left:0}
.cd-tray .dishes{background:#fffdf8;border-radius:20px;padding:14px}
@media (max-width:900px){
  .cd-grid{grid-template-columns:1fr;gap:22px}
  .cd-text{position:static}
  .cup-detail{padding-block:40px}
  .cd-tray{padding:10px;border-radius:22px}
  .cd-tray::before,.cd-tray::after{display:none}
  .cd-tray .dishes{padding:8px;border-radius:16px}
}
/* the storybook title font is wider: keep long level names inside the card */
.cd-text h2{font-size:clamp(22px,2.2vw,28px);overflow-wrap:anywhere}
.cd-text .lv-top{align-items:flex-start}