/* kayatea.id v10 (Nov 2026): language tab, season line, tea finder, steep timer. Loaded after site.css. */

/* ---------- season line ---------- */
.season{display:block;text-align:center;padding:17px var(--gut);background:var(--paper-2);border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);line-height:2}
.season[hidden]{display:none}
.season b{font-family:var(--serif);font-weight:400;font-style:italic;font-size:18px;letter-spacing:.02em;text-transform:none;color:var(--gold-2);margin:0 12px;white-space:nowrap}
.season a{color:var(--ink);border-bottom:1px solid var(--gold-2);padding-bottom:2px;margin-left:16px;white-space:nowrap;transition:color .3s}
.season a:hover{color:var(--gold-2)}
@media (max-width:700px){.season span{display:block}.season b{display:block;margin:2px 0}.season a{display:inline-block;margin:8px 0 0}}

/* ---------- tea finder ---------- */
.findcta{margin:26px 0 0}
.findcta button{font:inherit;color:inherit;background-color:transparent;cursor:pointer}
dialog.finder{width:min(900px,94vw);max-height:92vh;max-height:92svh;padding:clamp(40px,5vw,68px) clamp(22px,5vw,64px);border:0;background:var(--paper);color:var(--ink);text-align:center;overflow:auto}
dialog.finder::backdrop{background:rgba(34,33,31,.62)}
dialog.finder[open]{animation:sheetIn .5s var(--ease)}
.finder__step{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)}
.finder__q{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.4vw,42px);line-height:1.15;margin:14px 0 36px}
.finder__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.finder__opt,.finder__tea{font:inherit;color:inherit;background:transparent;cursor:pointer;border:1px solid var(--line);transition:border-color .35s,background-color .35s,transform .5s var(--ease)}
.finder__opt{padding:28px 16px}
.finder__opt:hover,.finder__opt:focus-visible,.finder__tea:hover,.finder__tea:focus-visible{border-color:var(--gold-2);background-color:rgba(210,172,103,.07);outline:0}
.finder__opt b{display:block;font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.2}
.finder__opt span{display:block;margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.finder__res{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.finder__tea{display:block;padding:20px 14px 24px;text-align:center}
.finder__tea i{display:block;width:100%;max-width:168px;aspect-ratio:1/1;margin:0 auto 10px;border-radius:50%;overflow:hidden}
.finder__tea img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.finder__tea i.is-dark img{mix-blend-mode:normal}
.finder__tea b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2}
.finder__tea small{display:block;margin-top:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.finder__foot{margin-top:36px;display:flex;gap:16px 30px;justify-content:center;flex-wrap:wrap;align-items:center}
.finder__body{animation:finderIn .6s var(--ease)}
@keyframes finderIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .finder__res{grid-template-columns:1fr;gap:10px}
  .finder__tea{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:4px 16px;text-align:left;padding:12px 14px}
  .finder__tea i{grid-row:1 / span 2;margin:0}
  .finder__tea b{align-self:end}.finder__tea small{align-self:start;margin-top:0}
  .finder__opt{padding:18px 14px}
}
@media (prefers-reduced-motion:reduce){.finder__body{animation:none}}

/* ---------- steep timer (tea sheet) ---------- */
.steep{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:0;font:inherit;color:var(--ink-2);background:transparent;cursor:pointer;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:color .3s;align-self:flex-start}
.steep:hover,.steep.is-on{color:var(--ink)}
.steep svg{width:30px;height:30px;transform:rotate(-90deg);flex:none}
.steep circle{fill:none;stroke-width:1.5}
.steep .steep__bg{stroke:var(--line)}
.steep .steep__fg{stroke:var(--gold-2);stroke-linecap:round;stroke-dasharray:81.7;stroke-dashoffset:81.7;transition:stroke-dashoffset 1s linear}
.steep.is-done{color:var(--gold-2)}
.steep.is-done .steep__fg{stroke-dashoffset:0}

/* ===================== v11: header language switch ===================== */
@media print{.season,.findcta,.steep,.nav-lang,.hdr-end .lang-sm,.kt-pre{display:none!important}}
.nav-lang{display:inline-flex;align-items:center;gap:10px;margin-left:clamp(4px,.6vw,10px);padding-left:clamp(14px,1.6vw,22px);border-left:1px solid currentColor;border-left-color:color-mix(in srgb,currentColor 28%,transparent);line-height:1}
.nav .nav-lang a{padding:6px 0;opacity:.5;transition:opacity .35s var(--ease)}
.nav .nav-lang a[aria-current]{opacity:1;cursor:default}
.nav .nav-lang a[aria-current]::after{transform:scaleX(1);background:var(--gold-2)}
.nav .nav-lang a:not([aria-current]):hover{opacity:1}
.hdr-end{display:none}
@media (max-width:960px){
  .hdr-end{display:flex;justify-self:end;align-items:center;gap:18px}
  .hdr-end .enquire-sm{display:block}
  .lang-sm{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;padding:6px 0;opacity:.7;transition:opacity .3s}
  .lang-sm:hover,.lang-sm:focus-visible{opacity:1}
}
.drawer__lang{margin:0 0 10px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
.drawer__lang a[aria-current]{color:var(--gold-2)}
.drawer__lang span{color:var(--ink-3)}

/* ===================== v11: home sections ===================== */
.clients--top{padding:clamp(40px,5vw,64px) 0 clamp(36px,4.5vw,56px);border-bottom:1px solid var(--line)}
.clients--top .clients__head{margin-bottom:28px}
.clients--top .clients__head .h3{font-size:12px;letter-spacing:.26em;font-family:var(--sans);font-weight:400;color:var(--ink-2)}
.clients--top .clients__head .lede{display:none}
.statement{padding:clamp(96px,13vw,200px) 0;text-align:center}
.statement .wrap{max-width:calc(980px + 2 * var(--gut))}
.statement__text{margin:26px auto 0;font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.9vw,54px);line-height:1.22;letter-spacing:-.005em;text-wrap:balance;color:var(--ink)}
.statement__text.is-split span{color:var(--ink);opacity:.16;transition:opacity .5s cubic-bezier(.25,.1,.25,1)}
.statement__text.is-split span.on{opacity:1}
.statement__actions{margin-top:44px;display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
.corp-band{background:var(--paper-2)}
.corp-band .actions{margin-top:30px;display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.season--band{margin-top:26px;padding:16px 0 0;background:none;border:0;border-top:1px solid var(--line);text-align:left;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.season--band b{margin:0;font-size:22px}
.season--band a{display:none}
@media (max-width:700px){.season--band span{display:inline}.season--band b{display:inline}}

/* ===================== v11: motion ===================== */
:root{--apple:cubic-bezier(.28,.11,.32,1)}
@view-transition{navigation:auto}
::view-transition-old(root){animation:ktVtOut .38s var(--apple) both}
::view-transition-new(root){animation:ktVtIn .55s var(--apple) both}
@keyframes ktVtOut{to{opacity:0}}
@keyframes ktVtIn{from{opacity:0}}
html.js-rv .rv-up{opacity:0;transform:translate3d(0,34px,0);transition:opacity 1.1s var(--apple),transform 1.3s var(--apple)}
html.js-rv .rv-frame{clip-path:inset(9% 7% 9% 7%);transition:clip-path 1.6s var(--apple)}
html.js-rv .rv-frame img{transform:scale(1.1);transition:transform 2s var(--apple),translate .1s linear}
html.js-rv .rv.in{opacity:1;transform:none}
html.js-rv .rv-frame.in{clip-path:inset(0 0 0 0)}
html.js-rv .rv.rv-done{clip-path:none;transition:none} /* no clip once revealed: clip-path isolates the element and breaks mix-blend-mode (tea photos showed white boxes) */
html.js-rv .rv-frame.in img{transform:none}
.split .split__media .frame.rv-frame img{scale:1!important}
.hero__title,.hero__sub,.hero__links{opacity:calc(1 - var(--hx,0) * 1.35);transform:translate3d(0,calc(var(--hx,0) * -46px),0)}

.btn{transition:background .3s,color .3s,border-color .3s,transform .25s var(--apple)}
.btn:active{transform:scale(.975)}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .hero__title,.hero__sub,.hero__links{opacity:1;transform:none}
}

/* v11.1: client logos at one optical size (heights from tools/logos.py) */
.marquee img{height:calc(var(--lh,40px) * var(--lk,1));max-width:none;width:auto;filter:none;opacity:.5;mix-blend-mode:normal}
@media (max-width:1100px){.marquee img{--lk:.85}}
@media (max-width:700px){.marquee img{--lk:.68}}

/* v11.1: header always centred (logo column fixed, sides share the rest) */
.site-header__inner{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
@media (max-width:1240px) and (min-width:961px){.nav{gap:clamp(14px,1.6vw,22px);letter-spacing:.14em}.nav-lang{padding-left:14px;gap:8px}}
/* v11.1: hero actions: one primary, two quiet links */
.hero__links{flex-direction:column;align-items:flex-end;gap:20px}
.hero__cta{display:inline-flex;align-items:center;justify-content:center;padding:17px 32px;font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--paper);
  background:rgba(245,241,234,.12);border:1px solid rgba(245,241,234,.5);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  transition:background .45s var(--apple),color .45s var(--apple),border-color .45s var(--apple),transform .25s var(--apple)}
.hero__cta:hover,.hero__cta:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hero__cta:active{transform:scale(.975)}
.hero__more{display:flex;gap:26px;flex-wrap:wrap;justify-content:flex-end}
.hero__more .link{font-size:10.5px;letter-spacing:.2em;opacity:.82}
.hero__more .link:hover{opacity:1}
@media (max-width:900px){
  .hero__links{align-items:flex-start;gap:16px}
  .hero__more{justify-content:flex-start;gap:12px 22px}
  .hero__cta{padding:15px 26px}
}

/* v11.1: the full header needs about 1080px; below that use the compact header */
@media (min-width:961px) and (max-width:1080px){
  .nav{display:none}.menu-btn{display:block}.brand{width:112px}
  .hdr-end{display:flex;justify-self:end;align-items:center;gap:18px}.hdr-end .enquire-sm{display:block}
  .lang-sm{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;padding:6px 0;opacity:.7}
}

/* ===================== v11.1: one vertical rhythm (see spacing.py) ===================== */
:root{--S:clamp(72px,9.5vw,136px)}
.section,.statement,.chapter,.clients,.tearows{padding-block:var(--S)}
.section--tight{padding-block:calc(var(--S) * .7)}
.section:has(+ .clients){padding-bottom:var(--S)}
.section + .clients{padding-top:var(--S)}
.page-head{padding-top:calc(var(--header) + var(--S) * .8);padding-bottom:calc(var(--S) * .55)}
.clients--top{padding-block:calc(var(--S) * .5)}
.site-footer{padding-top:calc(var(--S) * .8)}
[data-flush]{padding-top:0!important}
.tearows__head{margin-bottom:calc(var(--S) * .6)}
.chapter__intro{margin-bottom:calc(var(--S) * .6)}
.formats-cta{margin-top:calc(var(--S) * .5)}
.clients__head{margin-bottom:calc(var(--S) * .38)}

/* v11.2 fixes */
.checkout__back:not([hidden]){display:block}
.has-modal dialog .link--shine{animation-play-state:running}
.hero__cta{position:relative;overflow:hidden;isolation:isolate}
.hero__cta::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-40%;width:26%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0,rgba(246,227,176,0) 10%,rgba(246,227,176,.5) 46%,rgba(255,246,220,.9) 50%,rgba(246,227,176,.5) 54%,rgba(246,227,176,0) 90%,transparent 100%);
  transform:skewX(-18deg);opacity:0;animation:ktShineBtn 4.6s var(--ease) 2.4s infinite}
.hero__cta:hover::after{animation-play-state:paused;opacity:0}
html.kt-loading .hero__cta::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hero__cta::after{animation:none;opacity:0}}

/* v11.3 seamless marquee: spacing lives inside each item (not flex gap) so -50% is exactly one set; own GPU layer */
.marquee__track{gap:0;will-change:transform;backface-visibility:hidden;animation-name:ktMarq}
.marquee img{margin-right:clamp(48px,6vw,96px);flex:none}
@keyframes ktMarq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ===== v11.3 polish ===== */
/* split layouts: give the words five columns so headings stop breaking into three short lines */
.split__media{grid-column:1 / span 6}
.split__text{grid-column:8 / span 5}
.split--flip .split__media{grid-column:7 / span 6}
.split--flip .split__text{grid-column:1 / span 5}
.split__text .h2{font-size:clamp(28px,2.9vw,42px);letter-spacing:.14em}
.h2,.h3,.room__name{text-wrap:balance}
.prose p,.lede,.tea__desc{text-wrap:pretty}
/* facts and lead times: captions in two calm lines, not three cramped ones */
.fact span{max-width:21ch;line-height:1.55}
.facts{gap:clamp(28px,4vw,64px)}
/* five chapters: names on one line so every tile lines up */
.room__name{font-size:clamp(15px,1.3vw,20px);letter-spacing:.14em;white-space:nowrap}
@media (max-width:1100px){.room__name{white-space:normal}}
/* the reserve trio: "White Silver Needle" in two lines */
.reserve-trio span{font-size:13px;letter-spacing:.12em}
/* hospitality team photo sits on the content grid, slightly warmed */
.hosp-hero{max-width:var(--wrap);padding:0 var(--gut)}
.hosp-hero img{aspect-ratio:2.4/1;filter:saturate(.92) sepia(.06)}
/* tea cards: a readable full sentence */
.tea__desc{font-size:14px;max-width:32ch}
/* collection chapter intro: body copy a touch larger */
.chapter__intro p.small{font-size:15px;line-height:1.75;max-width:46ch}
/* gifting: breathing room between the opening and the Tin Tall */
#tin-tall[data-flush]{padding-top:calc(var(--S) * .7)!important}
/* home contact: two clear actions */
.contact-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.contact-cta__note{margin:22px 0 0;font-size:13.5px;line-height:1.9;color:var(--ink-2)}
.nobr{white-space:nowrap}
/* footer on phones: contact column full width */
@media (max-width:900px){.footer-grid > :last-child{grid-column:1/-1}}
/* forms: a quiet custom chevron instead of the browser default */
.form select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A88A4F' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--gold-2)}
/* footer office lines: a little more contrast */
.footer-grid .footer-office{color:var(--ink-2);opacity:.85}
.contact-cta .btn{min-width:210px}

/* v11.3b buttons: filled buttons stay filled on hover, warm a touch, and the gold light sweeps through (same feel as the outline buttons) */
/* the arch label: one even paper ring around plate and dome alike */
.band{isolation:isolate}
.arch::before{box-shadow:none}
.arch__halo{position:absolute;z-index:-1;left:50%;bottom:calc(100% - 1px);transform:translateX(-50%);width:52%;height:58px;border-radius:999px 999px 0 0;background:var(--paper);box-shadow:0 0 0 6px var(--paper);pointer-events:none}

/* v11.8 one hover for every button (Eric): the angled gold shine sweeps across, same speed and angle everywhere.
   Filled buttons stay filled; outline buttons fill with ink as the shine passes. The idle shine on .btn--shine is kept. */
html .btn{position:relative;overflow:hidden;isolation:isolate;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .25s var(--apple)}
html .btn:not(.btn--shine)::after{display:none}
html .btn::before,html .hero__cta::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:30%;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 0,rgba(246,227,176,0) 10%,rgba(246,227,176,.55) 48%,rgba(255,246,220,.85) 50%,rgba(246,227,176,.55) 52%,rgba(246,227,176,0) 90%,transparent 100%);transform:skewX(-18deg);transition:left 0s}
html .dark .btn::before,html .hero__cta::before{background:linear-gradient(105deg,transparent 0,rgba(168,138,79,0) 10%,rgba(168,138,79,.45) 48%,rgba(201,163,94,.7) 50%,rgba(168,138,79,.45) 52%,rgba(168,138,79,0) 90%,transparent 100%)}
html .btn--line:not(.dark *)::before{background:linear-gradient(105deg,transparent 0,rgba(246,227,176,0) 10%,rgba(246,227,176,.55) 48%,rgba(255,246,220,.85) 50%,rgba(246,227,176,.55) 52%,rgba(246,227,176,0) 90%,transparent 100%)}
@media (hover:hover){
  html .btn:hover::before,html .btn:focus-visible::before,html .hero__cta:hover::before,html .hero__cta:focus-visible::before{left:130%;transition:left .95s var(--ease)}
  html .btn:not(.btn--line):not(.btn--gold):hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  html .btn--line:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  html .dark .btn:not(.btn--line):not(.btn--gold):hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
  html .dark .btn--line:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
  html .btn--gold:hover{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
}
@media (prefers-reduced-motion:reduce){html .btn::before,html .hero__cta::before{display:none}}

/* v11.7 tea library drop-downs (only when v10.js has set them up; without JS every chapter stays open) */
.tr-acc .tearows__chhead{cursor:pointer;user-select:none;position:relative}
.tr-acc .tearows__chhead:focus-visible{outline:1px solid var(--gold);outline-offset:-6px}
.tearows__chev{width:11px;height:11px;flex:none;align-self:center;margin-left:14px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.55;transition:transform .7s var(--ease),opacity .3s}
.tr-acc .is-open .tearows__chev{transform:translateY(2px) rotate(-135deg)}
.tr-acc .tearows__chhead:hover .tearows__chev{opacity:1}
.tr-acc .tearows__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 1.15s cubic-bezier(.65,0,.25,1)}
.tr-acc .is-open > .tearows__body{grid-template-rows:1fr}
.tr-acc .tearows__inner{min-height:0;overflow:hidden}
.tr-acc .tearows__inner .tearow{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .8s var(--ease);transition-delay:0s}
.tr-acc .is-open .tearows__inner .tearow{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 70ms + 120ms)}
.tr-acc--still .tearows__body,.tr-acc--still .tearows__inner .tearow,.tr-acc--still .tearows__chev{transition:none!important}
@media (prefers-reduced-motion:reduce){.tr-acc .tearows__body,.tr-acc .tearows__inner .tearow{transition:none!important}}
/* hero CTA: cream fill on hover with the same angled shine (rules above) */
.hero__cta{position:relative;overflow:hidden;isolation:isolate}
.hero__cta:hover,.hero__cta:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* v11.8 client strip, one vertical rhythm (Eric): equal space above the label, below the logos and after the line;
   equal gaps between the label and the two rows */
.clients--top{--cs:calc(var(--S) * .6);padding-block:var(--cs)}
.clients--top .clients__head{margin-bottom:calc(var(--cs) * .4)}
.clients--top .marquee + .marquee{margin-top:calc(var(--cs) * .4)}
.clients--top + .statement{padding-top:calc(var(--S) * .6)}
/* logos sit in equal slots, centred, so the strip has a steady beat whatever each logo's shape */
.marquee img{width:calc(236px * var(--lk,1));margin-right:0;object-fit:contain;object-position:center}

/* v11.10 tea cards (Eric): the white photo background showed during the fade-in, because the fading card is drawn on its own.
   Each photo now sits on its chapter's own colour and blends there, so it looks the same during and after the animation. */
.chapter{--chbg:var(--paper)}
.chapter--classics{--chbg:var(--classics)}.chapter--blends{--chbg:var(--blends)}.chapter--blossom{--chbg:var(--blossom)}
.chapter--reserve{--chbg:var(--reserve)}.chapter--matcha{--chbg:var(--matcha)}
.tea__img{mix-blend-mode:normal;background:var(--chbg);isolation:isolate}
.tea__img img{mix-blend-mode:multiply}
.chapter--reserve .tea__img img{mix-blend-mode:normal}

/* v11.11 button groups: button first, its text links in one row underneath, same spacing on every page */
main :has(> .actions__links){display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:26px!important}
.actions__links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px}
.center :has(> .actions__links),.page-head--center :has(> .actions__links){align-items:center!important}
/* v11.12: tea photos are transparent cut-outs now (like the Reserve), so no blending or background box is needed */
.tea__img{background:none;isolation:auto;mix-blend-mode:normal}
.tea__img img{mix-blend-mode:normal}

/* v11.13 iPhone: the five-chapter swipe row moves sideways only */
@media (max-width:900px){
  .rooms{overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
  .rooms .room.rv,.rooms .room.rv-up{transform:none!important}
  html.js-rv .rooms .room.rv-up{opacity:0;transition:opacity 1.1s var(--apple)}
  html.js-rv .rooms .room.rv-up.in{opacity:1}
  .rooms .room__img img{translate:none!important;scale:none!important}
}