@font-face{font-family:Fraunces;src:url(fonts/fraunces-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin.woff2) format("woff2");font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#FAEBCB;color:#5A1E08;font-family:Archivo,system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid #0A4A48;outline-offset:2px}
/* TOPBAR MARQUEE — Jing announcement 15s (the gold loop strip was removed in v5) */
.topbar{background:#0A4A48;color:#FAEBCB;overflow:hidden;padding:10px 0;font-size:14px;letter-spacing:.12em}
.bridge{background:#E8A33D;color:#5A1E08;padding:20px 6vw;text-align:center}
.bridge a{display:block;text-decoration:none;font-family:Fraunces,serif;font-weight:900;font-size:clamp(20px,3vw,30px);line-height:1.2;letter-spacing:.02em;color:#5A1E08}
.bridge a span{display:block;font-family:Archivo,sans-serif;font-weight:400;font-size:14px;letter-spacing:.08em;margin-top:6px;opacity:.85}
.marquee{display:flex;width:max-content}
.mq15{animation:mq 15s linear infinite}

.marquee span{white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee{animation:none}}
/* HEADER — Jing + Partake sticky, Jing side padding 2.5rem desktop / 1.25rem mobile */
.site-head{position:sticky;top:0;z-index:45;background:#FAEBCB;border-bottom:1px solid #E5D3A8;display:flex;align-items:center;gap:24px;padding:14px 2.5rem;transition:box-shadow .3s ease}
.site-head.scrolled{box-shadow:0 6px 24px rgba(90,30,8,.16)}
.wordmark-logo{display:inline-flex;align-items:center}
.wordmark-logo img{display:block;height:96px;width:auto;animation:logo-in .8s ease-out both}
@keyframes logo-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.mainnav{display:flex;gap:22px;margin-left:8px}
.mainnav a{text-decoration:none;font-size:15px;padding:10px 2px;white-space:nowrap;position:relative;transition:color .25s ease}
.mainnav a::after{content:"";position:absolute;left:2px;right:2px;bottom:4px;height:2px;background:#0A4A48;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.mainnav a:hover::after{transform:scaleX(1)}
.tools{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:14px}
.tool-btn{background:none;border:0;padding:10px 0;font-size:14px;color:inherit;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.menu-tool{display:none}
.nav-toggle{display:none;background:none;border:1.5px solid #5A1E08;border-radius:10px;width:48px;height:48px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:20px;height:2px;background:#5A1E08;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .25s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
main section{padding:4rem 2.5rem}
main section[id]{scroll-margin-top:140px}
h2{font-family:Fraunces,serif;font-weight:900;font-size:clamp(38px,5vw,60px);margin:0 0 28px}
.pill{display:inline-block;text-decoration:none;border-radius:9999px;padding:.75rem 1rem;font-size:16px;min-height:48px;line-height:20px;border:1.5px solid #5A1E08}
.pill-solid{background:#0A4A48;color:#FAEBCB;border-color:#0A4A48}
.pill-outline{background:transparent}
.pill:disabled{opacity:.5;cursor:default}
/* SERRATED DIVIDERS — Jing mechanism, SKC colors (height by proportion, flagged) */
.zigzag{line-height:0;background:#FAEBCB}
.zigzag svg{width:100%;height:12px;display:block}
.zigzag.flip{background:#0A4A48}
/* HERO — Jing beside-language; Partake 4px offset shadow; MS 3s rotation + 10px dots */
.hero{display:flex;gap:40px;align-items:flex-start;position:relative;perspective:1200px;padding-top:196px}
.hero-text{flex:1 1 55%}
.hero-text h1{font-family:Fraunces,serif;font-weight:900;font-size:clamp(64px,9vw,144px);line-height:.95;margin:0;text-shadow:4px 4px #E8A33D}
.hero-text h1 span{display:inline-block;animation:hero-word .8s cubic-bezier(.22,1,.36,1) both}
.hero-text h1 span:nth-of-type(2){animation-delay:.12s}
.hero-text h1 span:nth-of-type(3){animation-delay:.24s}
@keyframes hero-word{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.hero-sub{font-size:20px;margin:24px 0;max-width:520px;line-height:1.5}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}

.hero-collage{flex:0 0 38%;max-width:520px;position:relative;margin-bottom:28px}
.hero-collage .col-main{width:100%;border-radius:2rem;animation:rise .6s ease both}
.hero-collage .col-small{position:absolute;bottom:-22px;width:34%;border-radius:1rem;border:3px solid #FAEBCB;box-shadow:8px 8px 0 rgba(90,30,8,.9);animation:rise .6s ease both}
.hero-collage .col-left{left:2%;--r:-4deg;transform:rotate(-4deg);animation-delay:.12s}
.hero-collage .col-right{right:2%;--r:3deg;transform:rotate(3deg);animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(18px) rotate(var(--r,0deg))}to{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}}
/* SLIDERS — Partake values: items 385px desktop / 55% mobile, 50px circle arrows */
.slider-wrap{position:relative}
.slider{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 20px 12px;scroll-behavior:smooth}
.card,.rev{flex:0 0 385px;scroll-snap-align:start;border:1px solid #E5D3A8;border-radius:20px;padding:16px}
.card img,.rev img{width:100%;aspect-ratio:1;border-radius:10px;object-fit:cover}
.tint-cream{background:#FDF6E3}
.tint-purple{background:#EFE8F0}
.tint-green{background:#E4F0E8}
.tint-marigold{background:#FBEED3}
.card .price,.gift .price{font-size:20px;margin:14px 0 6px}
.card .price s,.gift .price s{color:#6B3A1F;font-size:14px}
.card h3,.rev h3,.gift h3{font-size:17px;margin:0 0 6px;letter-spacing:.02em}
.card .stars,.rev .stars,.gift .stars{font-size:15px;margin:0 0 14px;color:#0A4A48}
.slide-btn{position:absolute;top:38%;z-index:2;width:50px;height:50px;border-radius:50%;border:1px solid #E5D3A8;background:#FAEBCB;font-size:24px;line-height:1}
.slide-btn.prev{left:-8px}
.slide-btn.next{right:-8px}
.note{font-size:14px;opacity:.7;margin-top:16px}
/* CATEGORY TILES — Jing 4-across, 2rem radius */
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cat{text-decoration:none}
.cat img{width:100%;aspect-ratio:1;border-radius:2rem;object-fit:cover}
.cat span{display:block;font-family:Fraunces,serif;font-weight:900;font-size:20px;margin-top:12px;letter-spacing:.04em}
/* PROOF — Partake panel rhythm */
.proof{background:#0A4A48;color:#FAEBCB;text-align:center}
.proof p{font-size:22px;margin:0;line-height:1.55}
.proof b{font-family:Fraunces,serif}
/* STORY — Jing founder rhythm */
.stories{display:flex;gap:32px;align-items:flex-start}
.stories img{width:42%;border-radius:2rem}
.stories p{font-size:17px;line-height:1.6;max-width:560px}
/* BUILDER — directive function, MS form, Partake 40px variant pills */
.builder{background:#F3E3B8}
.builder-sub{font-size:17px;margin:-12px 0 24px;max-width:640px}
.sec-sub{font-size:17px;margin:-12px 0 24px;max-width:640px;opacity:.85}
.tiers{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.tier{border:1.5px solid #5A1E08;background:transparent;border-radius:40px;padding:14px 22px;font-size:16px;min-height:48px}
.tier.on{background:#0A4A48;color:#FAEBCB;border-color:#0A4A48}
.tier em{display:block;font-size:12px;opacity:.7;font-style:normal}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pick-grid button{border:1px solid #D9C48F;background:#fff;border-radius:14px;padding:8px;font-size:14px;min-height:76px;text-align:left;display:flex;align-items:center;gap:8px;transition:border-color .25s ease,background .25s ease,transform .15s ease}
.pick-grid button:active{transform:scale(.97)}
.pick-grid button img{width:44px;height:44px;object-fit:cover;border-radius:8px;flex-shrink:0}
.pick-grid button span{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:normal}
.pick-grid button .tick{margin-left:auto;font-style:normal;font-size:20px;color:#E8A33D;opacity:0;transition:opacity .25s ease}
.pick-grid button.picked{background:#0A4A48;color:#FAEBCB;border-color:#0A4A48}
.pick-grid button.picked .tick{opacity:1}
.box-slots{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;min-height:64px}
.box-slot{width:60px;height:60px;border-radius:12px;border:1.5px dashed #B89B5E;display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(255,255,255,.35)}
.box-slot img{width:100%;height:100%;object-fit:cover;animation:pop .3s ease}
.box-slot.filled{cursor:pointer;border-style:solid;border-color:#B89B5E}
.box-slot span{font-size:20px;color:#B89B5E}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.box-progress{height:8px;background:rgba(90,30,8,.15);border-radius:999px;margin-bottom:24px;overflow:hidden}
.box-progress-fill{height:100%;width:0;background:#E8A33D;border-radius:999px;transition:width .4s ease}
.box-state{font-size:17px;margin-top:24px}
.reset{margin-left:12px;border:1.5px solid #5A1E08;background:transparent;border-radius:999px;padding:10px 18px;font-size:14px;min-height:44px}
/* GIFTING */
.gift-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gift{border:1px solid #E5D3A8;border-radius:20px;padding:16px;background:#fff}
.gift img{width:100%;aspect-ratio:4/3;border-radius:10px;object-fit:cover}
.gift .meta{font-size:14px;opacity:.7;margin:0 0 8px}
/* USAGE — Jing recipe 4-across */
.pairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pair{background:#fff;border:1px solid #E5D3A8;border-radius:20px;padding:14px}
.pair img{width:100%;aspect-ratio:1;border-radius:10px;object-fit:cover}
.pair b{display:block;font-size:16px;margin:12px 0 4px}
.pair span{font-size:14px;opacity:.75}
/* SPOTLIGHT */
.spot{display:flex;gap:48px;align-items:center}
.spot img{width:480px;max-width:100%;border-radius:2rem}
.spot h3{font-family:Fraunces,serif;font-size:26px;margin:0 0 10px}
.spot p{font-size:16px;line-height:1.55;margin:0 0 10px}
/* FOOTER — Jing + Partake dark footer */
.foot{background:#5A1E08;color:#FAEBCB;padding:56px 2.5rem 40px}
.foot-word{font-family:Fraunces,serif;font-weight:900;font-size:clamp(30px,5vw,54px)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0}
.foot-cols h4{font-size:14px;letter-spacing:.14em;margin:0 0 8px;opacity:.7}
.foot-cols p{font-size:15px;margin:0}
.demo-note{font-size:14px;opacity:.7;max-width:720px;line-height:1.5}
.credit{font-size:15px;line-height:2;letter-spacing:.12em;margin-top:16px}
.credit a{color:#FAEBCB;display:inline-block;padding:6px 0}
@media(max-width:1100px){
  .wordmark-logo img{height:85px}
  .site-head{gap:16px}
  .mainnav{gap:16px}
  .tools{gap:12px}
}
@media(max-width:900px){
  .site-head{flex-wrap:nowrap;gap:10px;padding:12px 1.25rem}
  .mainnav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin-left:0;background:#FAEBCB;border-bottom:1px solid #E5D3A8;box-shadow:0 16px 32px rgba(90,30,8,.18);padding:0 1.25rem;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .5s cubic-bezier(.22,1,.36,1),padding .5s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility 0s linear .5s}
  .mainnav.open{max-height:340px;padding:8px 1.25rem 16px;opacity:1;visibility:visible;transition:max-height .5s cubic-bezier(.22,1,.36,1),padding .5s cubic-bezier(.22,1,.36,1),opacity .3s ease}
  .mainnav a,.mainnav .menu-tool{padding:12px 0;font-size:17px;opacity:0;transform:translateY(10px);transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1);text-align:left;border-bottom:1px solid #EFE0B8}
  .mainnav .menu-tool{display:block}
  .mainnav.open a,.mainnav.open .menu-tool{opacity:1;transform:translateY(0)}
  .mainnav.open > *:nth-child(1){transition-delay:.05s}
  .mainnav.open > *:nth-child(2){transition-delay:.12s}
  .mainnav.open > *:nth-child(3){transition-delay:.19s}
  .mainnav.open > *:nth-child(4){transition-delay:.26s}
  .mainnav.open > *:nth-child(5){transition-delay:.33s}
  .mainnav.open > *:nth-child(6){transition-delay:.40s}
  .mainnav a::after{display:none}
  .nav-toggle{display:flex}
  .site-head{padding:9px 1rem}
  .wordmark-logo img{height:40px}
  .nav-toggle{width:44px;height:44px}
  .slider-wrap{margin-bottom:66px}
  .slide-btn{top:auto;bottom:-58px}
  .tools{font-size:14px;gap:8px}
  .tools #searchBtn,.tools #accountBtn,.tools #searchLink,.tools #accountLink{display:none}
  .tools{font-size:14px;gap:12px}
  main section{padding:2.5rem 1.25rem}
  .bridge{padding:16px 6vw}
  .hero{flex-direction:column}
  .hero-collage{width:100%;max-width:none}
  .hero-sub{font-size:18px}
  .card,.rev{flex-basis:55%}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .box-slots{justify-content:center}
  .box-slot{width:50px;height:50px}
  .pick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pick-grid button{padding:6px;gap:6px;font-size:14px;position:relative}
  .pick-grid button img{width:40px;height:40px}
  .pick-grid button .tick{position:absolute;right:6px;bottom:6px;margin-left:0;font-size:16px}
  .gift-grid,.pairs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stories{flex-direction:column}
  .stories img{width:100%}
  .spot{flex-direction:column}
  .spot img{width:100%}
  .foot{padding:48px 1.25rem 32px}
  .foot-cols{grid-template-columns:1fr}
}

/* Hover feedback (jury fix: primary targets reacted none) */
.pill-solid:hover{background:#0E5E5A}
.pill-outline:hover{background:rgba(10,74,72,.08)}
.slide-btn:hover{background:#E8A33D}
.tier:hover{border-color:#0A4A48}
.tier.on:hover{background:#0E5E5A}
.pick-grid button:hover{border-color:#0A4A48}
.pick-grid button.picked:hover{background:#0E5E5A}
.mainnav a:hover{text-decoration:underline}
.tool-btn:hover{text-decoration:underline}

/* Panels (v3): search takeover, cart drawer, account note, backdrop */
.backdrop{position:fixed;inset:0;background:rgba(90,30,8,.35);z-index:40;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.backdrop.open{opacity:1;visibility:visible;transition:opacity .3s ease}
.search-panel{position:fixed;left:0;right:0;top:0;z-index:50;background:#FAEBCB;border-bottom:1px solid #E5D3A8;padding:20px 1.25rem 24px;transform:translateY(-100%);transition:transform .4s ease;visibility:hidden}
.search-panel.open{transform:translateY(0);visibility:visible}
.search-bar{display:flex;gap:12px;max-width:720px;margin:0 auto}
.search-bar input{flex:1;font-size:18px;padding:14px 16px;border:1.5px solid #5A1E08;border-radius:999px;background:#fff;color:#5A1E08}
.search-bar button{border:0;background:none;font-size:32px;line-height:1;padding:0 8px}
.search-scope{text-align:center;font-size:14px;opacity:.7;margin:12px 0 0}
.search-results{max-width:720px;margin:16px auto 0;display:grid;gap:8px}
.search-hit{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #E5D3A8;border-radius:12px;padding:10px 14px;text-align:left;font-size:16px}
.search-hit img{width:44px;height:44px;object-fit:cover;border-radius:8px}
.search-hit b{margin-left:auto;white-space:nowrap}
.search-none{text-align:center;opacity:.7;font-size:15px}
.cart-panel{position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);z-index:50;background:#FAEBCB;border-left:1px solid #E5D3A8;padding:20px;transform:translateX(105%);transition:transform .4s ease,visibility 0s linear .4s;visibility:hidden;overflow-y:auto}
.cart-panel.open{transform:translateX(0);visibility:visible;transition:transform .4s ease}
.cart-head{display:flex;justify-content:space-between;align-items:center;font-size:18px;margin-bottom:16px}
.cart-head button,.cart-panel .cart-close{border:0;background:none;font-size:28px;line-height:1}
.cart-item{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #E5D3A8;font-size:15px}
.cart-empty{opacity:.7;font-size:15px}
.cart-total{font-size:18px;margin-top:16px}
.cart-note{font-size:14px;opacity:.7}
.account-note{position:absolute;right:1.25rem;top:calc(100% + 8px);background:#fff;border:1px solid #E5D3A8;border-radius:12px;padding:12px 16px;font-size:14px;max-width:280px;box-shadow:8px 8px 0 rgba(90,30,8,.25);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.account-note.open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .25s ease,transform .25s ease}
.card.flash{outline:3px solid #E8A33D;outline-offset:2px}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.bump{animation:bump .35s ease}
@media(prefers-reduced-motion:reduce){.hero-collage img{animation:none}.mainnav,.mainnav a,.mainnav a::after,.mainnav .menu-tool,.nav-toggle span,.search-panel,.cart-panel,.box-progress-fill,.box-slot img{transition:none}.bump{animation:none}.wordmark-logo img{animation:none}.hero-text h1 span{animation:none}.reveal{opacity:1}.reveal.in{animation:none}.boxbar{transition:none}.box-slot img{animation:none}}

/* V8 — staggered card entrance (Bucks Sauce) */
.reveal{opacity:0}
.reveal.in{animation:card-in .6s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0s)}
@keyframes card-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* V8 — statement (Lajoya typographic moment) */
.statement{padding:72px 24px;text-align:center}
.statement p{font-family:Fraunces,serif;font-weight:900;font-size:clamp(34px,7vw,96px);line-height:1.05;margin:0}
.statement p span span{color:#0A4A48}
.statement p.statement-note{font-family:Archivo,system-ui,sans-serif;font-size:15px;font-weight:400;opacity:.75;margin-top:16px}
/* V8 — quiz */
.quiz-card{background:#fff;border:1px solid #D9C48F;border-radius:20px;padding:24px;max-width:760px;margin:0 auto}
.quiz-step{font-size:14px;opacity:.7;margin:0 0 8px}
.quiz-card h3{font-family:Fraunces,serif;font-size:26px;margin:0 0 16px}
.quiz-opts{display:flex;flex-wrap:wrap;gap:10px}
.quiz-opts .on{background:#0A4A48;color:#FAEBCB;border-color:#0A4A48}
.quiz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.quiz-back{background:none;border:none;text-decoration:underline;cursor:pointer;font-size:15px}
.quiz-result{max-width:760px;margin:0 auto}
.quiz-result p{font-size:17px;margin:0 0 16px}
.quiz-result .pill{margin-right:10px}
/* V8 — sticky box bar (bottom, thumb-first) */
.boxbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:10px;background:#FAEBCB;border-top:1px solid #E5D3A8;padding:12px 16px;box-shadow:0 -6px 24px rgba(90,30,8,.14);transform:translateY(100%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.boxbar.show{transform:none}
.boxbar span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.boxbar .pill{padding:10px 16px}
.boxbar-view{background:none;border:none;text-decoration:underline;cursor:pointer;font-size:15px;white-space:nowrap}
.boxbar .bar-short{display:none}
@media(max-width:560px){.boxbar #boxBarText{display:none}.boxbar .bar-short{display:inline}}

/* V9 — audit fixes */
body.has-boxbar{padding-bottom:76px}
.wordmark-logo{min-height:44px;display:flex;align-items:center}
.quiz-foot a{min-height:44px;display:inline-flex;align-items:center}
.credit a{min-height:44px;display:inline-flex;align-items:center}
.boxbar-view{min-height:44px;display:inline-flex;align-items:center}
/* V10 — kill the default tap flash (menu button showed it as a blue fill) */
a,button{-webkit-tap-highlight-color:transparent}

/* V11 — logo loading scene: paper veil, lockup rise, marigold line, fade out.
   Invisible unless html.loading (head script adds it); pointer-events none
   so it never blocks shopping or clicks; reduced-motion hides it outright. */
.loader{position:fixed;inset:0;z-index:200;background:#FAEBCB;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;opacity:0;visibility:hidden;transition:opacity .5s cubic-bezier(.22,1,.36,1),visibility 0s linear .5s;pointer-events:none}
html.loading .loader{opacity:1;visibility:visible;transition:opacity .5s cubic-bezier(.22,1,.36,1)}
.loader img{height:clamp(88px,22vw,120px);width:auto}
.loader-line{width:120px;height:2px;background:rgba(90,30,8,.15);overflow:hidden}
.loader-line span{display:block;height:100%;background:#E8A33D;transform-origin:left}
html.loading .loader-line span{animation:loader-line .8s .35s cubic-bezier(.22,1,.36,1) both}
@keyframes loader-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.loader{display:none}}
/* V13 fix: underline draws AFTER the wipe (1.5s), not at .35s — must stay last to win specificity tie */
html.loading .loader-line span{animation:loader-line .5s 1.5s cubic-bezier(.22,1,.36,1) both}
/* V14 — redrawn wordmark loader: svg scales, underline draws after the wordmark (2.4s) */
.wordmark-svg{width:min(280px,78vw);height:auto;display:block}
html.loading .loader-line span{animation:loader-line .5s 2.4s cubic-bezier(.22,1,.36,1) both}
/* V15 — full lockup loader */
.lockup-svg{width:min(600px,94vw);height:auto;display:block}

/* V16 — empty-space fixes + loader settle */
.paati-color{transform-box:fill-box;transform-origin:center}
@media(min-width:901px){
  .quiz{padding-bottom:3rem}
  .builder{padding-top:3rem}
}

/* V17 — jury-8 round */
.pick-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.pick-filter{border:1.5px solid #5A1E08;background:transparent;border-radius:999px;padding:10px 18px;font-size:14px;min-height:44px}
.pick-filter.on{background:#0A4A48;color:#FAEBCB;border-color:#0A4A48}
.pick-grid button.pick-hidden{display:none}
html.js .statement .sline{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
html.js .statement.in .sline{opacity:1;transform:none}
.statement.in .sline:nth-of-type(1){transition-delay:.05s}
.statement.in .sline:nth-of-type(2){transition-delay:.2s}
.statement.in .sline:nth-of-type(3){transition-delay:.35s}
.foot-cols a{color:inherit}
.good-to-know h3{font-family:Fraunces,serif;font-size:22px;margin:0 0 8px}
.good-to-know p{font-size:16px;line-height:1.6;opacity:.85}
.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gift a.pill{display:inline-flex;text-decoration:none}
@media(max-width:900px){.info-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html.js .statement .sline{opacity:1;transform:none;transition:none}}
/* V17 fix: gift/collection cards — buttons align to the bottom of the row */
.gift{display:flex;flex-direction:column}
.gift .pill{margin-top:auto;align-self:flex-start}

/* V18 — skip link in the build (was deploy-only) */
.skip-link{position:absolute;left:-9999px;top:0;background:#0A4A48;color:#FAEBCB;padding:10px 16px;z-index:100}
.skip-link:focus{left:0}
a.tool-btn{text-decoration:none;color:inherit}
/* V18 — collection story band */
.coll-band{margin-top:36px;border-top:1px solid #E5D3A8;padding-top:28px}
.coll-band .coll-claim{font-family:Fraunces,serif;font-size:26px;line-height:1.3;margin:0 0 10px}
.coll-band p{margin:0 0 12px}

/* V19 — collection gift buttons: narrow cards, one line at 390px (measured).
   Scoped to .gift only; index pills + story-band pill stay 16px. */
.gift .pill{font-size:14px}
/* V19 — Diwali countdown band. Mechanism (hanging tags + diyas) after the
   Dribbble reference's pattern; all art/CSS/copy here is original SKC work.
   Ground is logo green (NOT the reference's purple); tags use SKC palette only. */
.diwali-band{position:relative;overflow:hidden;background:#0A4A48;color:#FAEBCB;text-align:center;padding:56px 24px 64px}
.diwali-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-radial-gradient(circle at 50% 118%,transparent 0 38px,rgba(232,163,61,.10) 38px 39px,transparent 39px 58px,rgba(232,163,61,.07) 58px 59px,transparent 59px)}
.diwali-band>*{position:relative;z-index:1}
.diwali-string{border-top:2px dashed rgba(250,235,203,.45);margin:8px 4% 0;position:relative;height:34px}
/* V43 — hanging diyas: vertical string + ring + triangle harness + detailed bowl + flame
   (inline SVG in index.html; design after Vam's 09:15 reference, code original). Box centered
   on the rope end: string at local x=20 meets the rope end (y=8). */
.diya{position:absolute;top:0;width:40px;height:66px;z-index:2}
.diya:first-child{left:0}.diya:last-child{right:0}
.diya .dflame{transform-box:fill-box;transform-origin:50% 100%;animation:flick 1.7s ease-in-out infinite}
@keyframes flick{0%,100%{transform:rotate(-4deg) scaleY(1)}50%{transform:rotate(3deg) scaleY(1.14)}}
.diwali-eyebrow{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,235,203,.85);margin:18px 0 0}
.diwali-head{font-family:Fraunces,serif;font-weight:900;font-size:clamp(40px,6vw,64px);margin:12px 0 30px}
.diwali-tags{display:flex;gap:12px;justify-content:center;max-width:760px;margin:0 auto}
.dtag{flex:1;position:relative;padding:20px 6px 28px;clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%)}
.dtag::before{content:"";position:absolute;top:6px;left:50%;margin-left:-4px;width:8px;height:8px;border-radius:50%;background:rgba(250,235,203,.9)}
.dtag:nth-child(2){margin-top:16px}.dtag:nth-child(3){margin-top:28px}.dtag:nth-child(4){margin-top:10px}
.dtag b{display:block;font-family:Fraunces,serif;font-weight:900;font-size:clamp(30px,7vw,64px);line-height:1.05}
.dtag span{display:block;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-top:6px}
.d1{background:#E8A33D;color:#5A1E08}.d2{background:#4A2E4E;color:#FAEBCB}.d3{background:#146636;color:#FAEBCB}.d4{background:#FAEBCB;color:#5A1E08}
.diwali-note{font-size:18px;margin:30px 0 20px;opacity:.92}
.diwali-band .pill{background:#E8A33D;color:#5A1E08;border-color:#E8A33D}
.diwali-band .pill:hover{background:#D9932F}
@media(max-width:560px){.diwali-tags{gap:8px}.dtag{padding:16px 4px 22px}.dtag b{font-size:30px}.diwali-band{padding:44px 16px 52px}}
@media(prefers-reduced-motion:reduce){.diya .dflame{animation:none}}
/* v22 — fly-to-cart ghosts (grid animation, behavior after Animmaster grid-6) */
.fly-ghost{position:fixed;z-index:9999;pointer-events:none;object-fit:cover;border-radius:12px;box-shadow:0 10px 30px rgba(90,30,8,.35);margin:0}
.fly-trail{position:fixed;z-index:9998;pointer-events:none;object-fit:cover;border-radius:12px;opacity:.85;margin:0}
#cartBtn.fly-land{animation:flyland .45s ease}
@keyframes flyland{30%{transform:scale(1.18)}100%{transform:scale(1)}}
/* v22 — pack cycle (scroll animation, behavior after Animmaster scroll-71) */
.pack-cycle{background:#FAEBCB}
.pack-stage{display:flex;gap:32px;align-items:center;max-width:1100px;margin:0 auto;padding:40px 20px}
.pack-text{flex:1 1 45%}
.pack-eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#0A4A48;margin:0 0 8px}
.pack-head{font-family:Fraunces,serif;font-size:clamp(32px,5vw,56px);line-height:1.05;color:#5A1E08;margin:0 0 12px}
.pack-label{font-size:17px;color:#5A1E08;margin:0 0 8px}
.pack-claim{font-size:14px;color:#5A1E08;opacity:.75;margin:0 0 16px}
.pack-stack{flex:1 1 45%;position:relative;aspect-ratio:1/1;max-width:460px;margin:0 auto;width:100%}
.pack-figure{margin:0}
.pack-figure img{width:100%;height:100%;object-fit:cover;display:block;border-radius:16px}
.pack-figure figcaption{text-align:center;font-size:14px;color:#5A1E08;padding-top:8px}
/* JS cycle states: only active when JS arms the section (no-JS = plain list) */
.pack-cycle.js-cycle{height:420vh;position:relative}
.pack-cycle.js-cycle .pack-stage{position:sticky;top:0;height:100svh;overflow:hidden;padding:96px 20px 40px}
.pack-cycle.js-cycle .pack-figure{position:absolute;inset:0;opacity:0;transform:translateY(48px) rotate(6deg);transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s ease;pointer-events:none}
.pack-cycle.js-cycle .pack-figure img{height:100%}
.pack-cycle.js-cycle .pack-figure figcaption{display:none}
.pack-cycle.js-cycle[data-stage="0"] .pack-figure[data-pack="0"],
.pack-cycle.js-cycle[data-stage="1"] .pack-figure[data-pack="1"],
.pack-cycle.js-cycle[data-stage="2"] .pack-figure[data-pack="2"],
.pack-cycle.js-cycle[data-stage="3"] .pack-figure[data-pack="3"],
.pack-cycle.js-cycle[data-stage="4"] .pack-figure[data-pack="3"]{opacity:1;transform:translateY(0) rotate(0deg)}
.pack-cycle.js-cycle[data-stage="4"] .pack-figure[data-pack="3"]{transform:translateY(0) rotate(0deg) scale(.96)}
.pack-cycle.js-cycle[data-stage="1"] .pack-figure[data-pack="0"],
.pack-cycle.js-cycle[data-stage="2"] .pack-figure[data-pack="0"],
.pack-cycle.js-cycle[data-stage="2"] .pack-figure[data-pack="1"],
.pack-cycle.js-cycle[data-stage="3"] .pack-figure[data-pack="0"],
.pack-cycle.js-cycle[data-stage="3"] .pack-figure[data-pack="1"],
.pack-cycle.js-cycle[data-stage="3"] .pack-figure[data-pack="2"],
.pack-cycle.js-cycle[data-stage="4"] .pack-figure[data-pack="0"],
.pack-cycle.js-cycle[data-stage="4"] .pack-figure[data-pack="1"],
.pack-cycle.js-cycle[data-stage="4"] .pack-figure[data-pack="2"]{opacity:.45;transform:scale(.94) rotate(-3deg)}
@media (max-width:700px){.pack-stage{flex-direction:column}.pack-stack{max-width:340px}}
@media (prefers-reduced-motion: reduce){.pack-cycle.js-cycle{height:auto}.pack-cycle.js-cycle .pack-stage{position:static;height:auto}.pack-cycle.js-cycle .pack-figure{position:static;opacity:1;transform:none;transition:none}}

/* V23 — Diwali rope overlay in the hero (index band removed; collection keeps its band) */
.diwali-rope{position:absolute;top:0;left:2.5rem;right:2.5rem;z-index:2;pointer-events:none}
.rope-eyebrow{text-align:center;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#0A4A48;margin:0 0 2px}
.rope-wrap{position:relative}
.rope-svg{display:block;width:100%;height:44px}
.rtags{display:flex;gap:12px;justify-content:center;max-width:640px;margin:0 auto;position:relative;z-index:1;align-items:flex-start}
.rtag{flex:1;max-width:150px;position:relative;padding:18px 6px 26px;text-align:center;pointer-events:auto;clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);transform-origin:50% 0;will-change:transform;filter:drop-shadow(0 12px 14px rgba(90,30,8,.35));animation:sway 5.2s ease-in-out infinite}
.rtag:nth-child(1){margin-top:-20px;animation-duration:6.5s}
.rtag:nth-child(2){margin-top:-16px;animation-duration:7.8s;animation-delay:-2s}
.rtag:nth-child(3){margin-top:-16px;animation-duration:7.2s;animation-delay:-4s}
.rtag:nth-child(4){margin-top:-20px;animation-duration:8.4s;animation-delay:-1s}
.rtag::after{content:"";position:absolute;top:-0.5px;left:50%;margin-left:-7px;width:14px;height:14px;border-radius:50%;border:2px solid #5A1E08;background:transparent}
.d5{background:#025144;color:#FAEBCB}
.rtag b{display:block;font-family:Fraunces,serif;font-weight:900;font-size:clamp(28px,5vw,44px);line-height:1.05}
.rtag span{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-top:4px}
@keyframes sway{0%,100%{transform:translateZ(16px) rotateZ(-5deg) scale(1.004)}50%{transform:translateZ(16px) rotateZ(5deg) scale(1.004)}}
@keyframes sway-flick{0%{transform:translateZ(16px) rotateZ(0deg)}25%{transform:translateZ(16px) rotateZ(9deg) scale(1.008)}55%{transform:translateZ(16px) rotateZ(-6deg) scale(1.005)}100%{transform:translateZ(16px) rotateZ(0deg)}}
.rtag:active{animation:sway-flick .9s ease}
@media(max-width:700px){.hero{padding-top:176px}.rtags{gap:8px}.rtag{padding:14px 4px 22px}.rtag b{font-size:28px}.rope-eyebrow{font-size:11px}}
@media(prefers-reduced-motion:reduce){.rtag{animation:none}}
@media(max-width:900px){.diwali-rope{left:1.25rem;right:1.25rem}}

/* V25 — smaller phone flags + longer, looser rope */
@media(max-width:700px){.hero{padding-top:152px}.rtags{gap:6px}.rtag{max-width:74px;padding:10px 2px 16px}.rtag b{font-size:22px}.rtag span{font-size:10px;margin-top:3px}.rtag:nth-child(1),.rtag:nth-child(4){margin-top:-29px}.rtag:nth-child(2),.rtag:nth-child(3){margin-top:-18px}}

/* V26 — phone flags smaller again, room to breathe and sway */
@media(max-width:700px){.hero{padding-top:140px}.rtags{gap:10px;max-width:280px}.rtag{max-width:60px;padding:8px 2px 12px}.rtag b{font-size:18px}.rtag span{font-size:9px;margin-top:3px}.rtag:nth-child(1),.rtag:nth-child(4){margin-top:-25px}.rtag:nth-child(2),.rtag:nth-child(3){margin-top:-18px}}

/* V27 — true transparent hole in each flag */
.rtag{-webkit-mask-image:radial-gradient(circle at 50% 6.5px,transparent 4px,black 5px);mask-image:radial-gradient(circle at 50% 6.5px,transparent 4px,black 5px);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* V28 — holes exactly on the rope + clearance above phone numerals */
.rtag:nth-child(1),.rtag:nth-child(4){margin-top:-24px}
.rtag:nth-child(2),.rtag:nth-child(3){margin-top:-21px}
@media(max-width:700px){.rtag{padding-top:14px}.rtag:nth-child(1),.rtag:nth-child(4){margin-top:-28px}.rtag:nth-child(2),.rtag:nth-child(3){margin-top:-21px}}
/* V29 — phone padding for the bolder ring */
@media(max-width:700px){.rtag{padding-top:16px}}
/* V31 detailing — hole+ring center 7px (ring fully inside, no clip), margins re-seated on the rope */
.rtag{-webkit-mask-image:radial-gradient(circle at 50% 7px,transparent 4px,black 5px);mask-image:radial-gradient(circle at 50% 7px,transparent 4px,black 5px)}
.rtag::after{top:0px}
.rtag:nth-child(1),.rtag:nth-child(4){margin-top:-24.5px}
.rtag:nth-child(2),.rtag:nth-child(3){margin-top:-21.5px}
@media(max-width:700px){.rtag:nth-child(1),.rtag:nth-child(4){margin-top:-29px}.rtag:nth-child(2),.rtag:nth-child(3){margin-top:-22px}}
/* V32 — small border hugging the hole: 12px box, 1px rim, inner edge exactly on the hole */
.rtag::after{top:1px;margin-left:-6px;width:12px;height:12px;border:1px solid #5A1E08}
/* V33 — bigger hole 16px, 1px rim: mask center 9px, ring 18px box, margins re-seated */
.rtag{-webkit-mask-image:radial-gradient(circle at 50% 9px,transparent 7px,black 8px);mask-image:radial-gradient(circle at 50% 9px,transparent 7px,black 8px)}
.rtag::after{top:0px;margin-left:-9px;width:18px;height:18px;border:1px solid #5A1E08}
.rtag:nth-child(1),.rtag:nth-child(4){margin-top:-26.5px}
.rtag:nth-child(2),.rtag:nth-child(3){margin-top:-23.5px}
@media(max-width:700px){.rtag{padding-top:20px}.rtag:nth-child(1),.rtag:nth-child(4){margin-top:-31px}.rtag:nth-child(2),.rtag:nth-child(3){margin-top:-24px}}
/* V34 — hole 24px decisive, 1px rim: mask center 13px, ring 26px box, margins re-seated */
.rtag{-webkit-mask-image:radial-gradient(circle at 50% 13px,transparent 11px,black 12px);mask-image:radial-gradient(circle at 50% 13px,transparent 11px,black 12px)}
.rtag::after{top:0px;margin-left:-13px;width:26px;height:26px;border:1px solid #5A1E08}
.rtag:nth-child(1),.rtag:nth-child(4){margin-top:-30.5px}
.rtag:nth-child(2),.rtag:nth-child(3){margin-top:-27.5px}
@media(min-width:701px){.rtag{padding-top:24px}}
@media(max-width:700px){.rtag{padding-top:28px}.rtag:nth-child(1),.rtag:nth-child(4){margin-top:-35px}.rtag:nth-child(2),.rtag:nth-child(3){margin-top:-28px}}
/* V35 — border removed, hole untouched: ring off */
.rtag::after{display:none}
/* V36 — hole 30% smaller: 24px -> 16.8px, center stays 13px on rope, border stays off */
.rtag{-webkit-mask-image:radial-gradient(circle at 50% 13px,transparent 7.4px,black 8.4px);mask-image:radial-gradient(circle at 50% 13px,transparent 7.4px,black 8.4px)}
/* V37 — precise border for the 16.8px circle: 1px rim, inner edge exactly on hole edge */
.rtag::after{display:block;top:3.6px;margin-left:-9.4px;width:18.8px;height:18.8px;border:1px solid #5A1E08}
/* V37-revised — integer 19px box after forensic finding (18.8px fractional box painted as 20.0px at +1,+1): 0.1px gap, essentially exact */
.rtag::after{display:block;top:3.5px;margin-left:-9.5px;width:19px;height:19px;border:1px solid #5A1E08}
/* V37-final — ROOT CAUSE FIX: *{box-sizing:border-box} does NOT match pseudo-elements, so every ::after ring since v27 was content-box (specified size + 2px, center +1px down-right). Explicit border-box makes the 19px box a true 19px outer, centered on the hole. */
.rtag::after{box-sizing:border-box}
/* V38 — circle + border 20% smaller: hole 16.8 -> 13.44px, border 1 -> 0.8px, center stays 13px on rope */
.rtag{-webkit-mask-image:radial-gradient(circle at 50% 13px,transparent 5.72px,black 6.72px);mask-image:radial-gradient(circle at 50% 13px,transparent 5.72px,black 6.72px)}
.rtag::after{display:block;box-sizing:border-box;top:5.48px;margin-left:-7.52px;width:15.04px;height:15.04px;border:0.8px solid #5A1E08}
/* V39 — circle + border a further 20% smaller: hole 13.44 -> 10.752px, border 0.8 -> 0.64px, center stays 13px on rope */
.rtag{-webkit-mask-image:radial-gradient(circle at 50% 13px,transparent 4.376px,black 5.376px);mask-image:radial-gradient(circle at 50% 13px,transparent 4.376px,black 5.376px)}
.rtag::after{display:block;box-sizing:border-box;top:6.984px;margin-left:-6.016px;width:12.032px;height:12.032px;border:0.64px solid #5A1E08}
/* V40 — labels in Fraunces 600 (distinct serif caps, already self-hosted) + true ink centering (tracking compensation in em) */
.rtag span{font-family:Fraunces,serif;font-weight:600;letter-spacing:.16em;margin-right:-.16em;line-height:14px}
@media(max-width:700px){.rtag span{line-height:10px}}
/* V41 — softened flag edges (rounded ribbon clip path, like the reference tag) + number/label up 3px, flag heights preserved */
.rtag{clip-path:url(#rtagClip);padding:21px 6px 29px}
@media(max-width:700px){.rtag{padding:25px 2px 15px}}
/* V42 — rope weave overlay: dashed segment ON the flag face, from ring edge to flag edge.
   Tags 1-2 (Days, Hours): FRONT on LEFT, behind on right. Tags 3-4 (Minutes, Seconds): FRONT on RIGHT, behind on left.
   Geometry: band 12-14px, centerline 13 = hole center; width to ring outer edge (6.016); same colour/thickness/opacity as the rope SVG (#5A1E08, 2px, .55).
   Rotations = atan of the rope's displayed slope at each flag, measured live (phone rope 350 wide / desktop rope 1200 wide). */
.rtag::before{content:"";position:absolute;top:12px;height:0;width:calc(50% - 6px);border-top:2px dashed #5A1E08;opacity:.55;pointer-events:none}
.rtag:nth-child(1)::before{left:0;transform-origin:100% 50%;transform:rotate(1.70deg)}
.rtag:nth-child(2)::before{left:0;transform-origin:100% 50%;transform:rotate(0.57deg)}
.rtag:nth-child(3)::before{right:0;transform-origin:0 50%;transform:rotate(-0.57deg)}
.rtag:nth-child(4)::before{right:0;transform-origin:0 50%;transform:rotate(-1.70deg)}
@media(max-width:700px){
.rtag:nth-child(1)::before{transform:rotate(8.58deg)}
.rtag:nth-child(2)::before{transform:rotate(2.88deg)}
.rtag:nth-child(3)::before{transform:rotate(-2.88deg)}
.rtag:nth-child(4)::before{transform:rotate(-8.58deg)}
}

/* V44 — finalized v8 diya on SKC: rope full-width to screen ends, large
   hanging diya centred between the countdown rope and the hero headline,
   so the diya is actually visible (rope-end 40px icons would hide its
   lace/rings). Local preview only, not deployed. */
.diwali-rope{left:0;right:0}
@media(max-width:900px){.diwali-rope{left:0;right:0}}
.v8-diya-hero{display:flex;justify-content:center;width:100%;margin:8px 0 4px}
.v8-diya-hero svg{width:170px;height:auto;display:block}
@media(min-width:701px){.v8-diya-hero svg{width:220px}}

/* V44 fix: with full-width rope, end diyas must sit inside the screen, not -20px outside it. */
.diya:first-child{left:0}.diya:last-child{right:0}

/* V44 side diyas (28-Oct, per Vam): finalized v8 diya hangs on the sides,
   replacing the small side ones, straight from above. Larger than the old
   40px icons so the design is visible, hero padding raised on phone to
   fit them without overlapping the headline. */
.diya{width:60px;height:auto}
.diya:first-child{left:0}.diya:last-child{right:0}
@media(max-width:700px){.hero{padding-top:180px}}

/* V44 rope fix (28-Oct, per Vam): side diya strings must start AT the rope,
   not above it. Rope y at the sides is ~14px, string top is ~2px into the
   SVG, so top:12px puts the string on the rope line on both sides. */
.diya{top:12px}

/* V44 diya rope above flag rope (28-Oct, per Vam): "Don't hide the flag
   rope" + "diya rope, make it reach above". Side diya strings now start
   at top:-20px, above the flag rope, and run down behind it: flag rope
   and flags are z-index 3, diyas are z-index 0, so the flag rope stays
   fully visible and is not covered by the diyas. */
.diya{top:-20px;z-index:0}
.rope-svg{position:relative;z-index:3}
.rtags{z-index:3}

/* V44 rope attachment (28-Oct, per Vam "why different ropes"): diya string
   attaches AT the flag rope, it does not cross above it. Top 12px puts the
   string top on the flag rope line at the sides; flag rope/flags stay
   z-index 3, diyas z-index 0, so the flag rope stays continuous and
   visible, and there is one attachment point, not two crossing ropes. */
.diya{top:12px;z-index:0}

/* Revert to side4 (28-Oct, per Vam "Revert to this first"): diya ropes
   reach above the flag rope again, flag rope/flags stay z-index 3,
   diyas z-index 0. This overrides the side5 top:12px attachment rule. */
.diya{top:-20px;z-index:0}

/* V45 — animated v8 diya flame (28-Oct, per Vam "make diya's fire animated").
   v43 small diyas had .dflame flick; v8 diyas have Flame-outer/middle/
   inner groups with no class, so the flame was static. This wires a
   flicker to those groups only — no diya shape, colour, layout or
   flag-rope change. Layers run at different rates/phases so the flame
   flickers like a real flame, anchored at the wick (bottom centre).
   Glow pulses with the flame. Reduced-motion: off. */
.diya svg [id="Flame-outer"]{transform-box:fill-box;transform-origin:50% 100%;animation:flick-v8 1.6s ease-in-out infinite}
.diya svg [id="Flame-middle"]{transform-box:fill-box;transform-origin:50% 100%;animation:flick-v8 1.2s ease-in-out .12s infinite}
.diya svg [id="Flame-inner"]{transform-box:fill-box;transform-origin:50% 100%;animation:flick-v8 .7s ease-in-out .25s infinite}
.diya svg [id="Glow"]{transform-box:fill-box;transform-origin:50% 50%;animation:glow-v8 1.6s ease-in-out infinite}
@keyframes flick-v8{0%,100%{transform:rotate(-4deg) scaleY(1) scaleX(1)}25%{transform:rotate(3deg) scaleY(1.10) scaleX(.96)}50%{transform:rotate(-2deg) scaleY(.94) scaleX(1.04)}75%{transform:rotate(4deg) scaleY(1.18) scaleX(.95)}}
@keyframes glow-v8{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.diya svg [id="Flame-outer"],.diya svg [id="Flame-middle"],.diya svg [id="Flame-inner"],.diya svg [id="Glow"]{animation:none}}

/* V46 — stronger flame (28-Oct, per Vam circled flame on live v45):
   v45 flicker was ~2px at the tip on a phone, almost invisible.
   Amplitude up: rotate +-4deg, scaleY 0.94-1.18, inner layer faster
   (0.7s) so the flicker reads at normal phone size. Same layers,
   same wick anchor, same reduced-motion off. No other change. */

/* V47 — diya drop-in on load (28-Oct, per Vam "diyas from above when
   page is finished loading and then hang where it is").
   Drop only, no sway after: from off-screen above to the current
   hanging position, then stop (forwards). Triggered by
   html:not(.loading) so it starts after the 6s loader is removed,
   with a 0.5s delay for the loader fade to finish. On repeat visits
   the loader is skipped, so the drop runs on load. Flame animation
   is on inner <g> elements and is untouched, so it continues after
   the drop. Reduced motion: no drop, diyas visible immediately. */
html:not(.loading) .diya{animation:diya-drop 2.2s cubic-bezier(.65,0,.35,1) .5s both}
@keyframes diya-drop{from{transform:translateY(-140px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){html:not(.loading) .diya{animation:none}}

/* V49 — rope eyebrow fix (28-Oct, per Vam circled eyebrow on v48):
   font, colour and positioning only, words unchanged.
   Was: Archivo, uppercase, .2em tracking, 11px phone, teal #0A4A48,
   margin 0 0 2px, wrapping to an orphan "2026".
   Now: Fraunces (headline family), sentence case, weight 600,
   tracking .01em, ink #5A1E08, 18px desktop / 16px phone,
   line-height 1.3, text-wrap: balance, margin 0 0 10px.
   Hero padding raised to keep the diya-to-headline gap after the
   taller eyebrow (mobile 180px -> 200px, desktop 196px -> 210px). */
.rope-eyebrow{text-align:center;font-family:Fraunces,serif;font-size:18px;font-weight:600;letter-spacing:.01em;text-transform:none;color:#5A1E08;margin:0 0 10px;line-height:1.3;text-wrap:balance;padding:0 32px}
@media(max-width:700px){.rope-eyebrow{font-size:16px}.hero{padding-top:200px}}
@media(min-width:701px){.hero{padding-top:210px}}

/* V50 — diya rope extends to hero top (28-Oct, per Vam red marker):
   string top was 31.6px below hero top after the v49 taller eyebrow.
   ViewBox/string lengthened at the top (see brief), diya top
   -20px -> -52px, bowl hangs within 0.4px of where it was. */
.diya{top:-52px}