/* Find your formula: the dosha screen as a game. Twelve cards fill a glass bottle; its layers are the reading.
   Every rule is scoped to .mix so it can sit inside index.html next to its own styles. Used by index.html (as .mix.is-home) and dosha-mix.html. */
.mix{
  --vata:#B9CBD4; --pitta:#E2A93B; --kapha:#7FB08D;
  --fg:#2B2520; --ink-1:#3A332C; --ink-2:#5A534B; --ink-3:#6F665C;
  --rule:rgba(43,37,32,.12); --rule-2:rgba(43,37,32,.22);
  --acc:#895F2E; --acc-2:#9D6D35;
  --ease:cubic-bezier(.2,.7,.2,1);
}
.mix .eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--acc)}
.mix .eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.mix .eyebrow .dev{font-size:16px;letter-spacing:0}
.mix .link{appearance:none;background:none;border:0;padding:6px 0;font:inherit;font-size:14px;font-weight:500;color:var(--ink-1);text-decoration:none;display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid var(--rule-2);transition:color .2s,border-color .2s;cursor:pointer}
.mix .link:hover{color:var(--acc);border-color:var(--acc)}
.mix .link[disabled]{opacity:.35;cursor:default;pointer-events:none}
.mix .link svg{flex:none}
/* ---------- stage ---------- */
.mix{position:relative;overflow:hidden;color:var(--fg);min-height:calc(100vh - var(--hh,92px));min-height:calc(100svh - var(--hh,92px));display:flex;align-items:center;padding:32px 0 48px;background:radial-gradient(1100px 800px at 28% 60%,#F4F3E8 0%,#E7E8D5 55%,#DADDC4 100%)}
.mix .wrap{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,104px);align-items:center}
.mix .mx-stage{position:relative;display:flex;justify-content:center}
.mix .mx-stage::before{content:"";position:absolute;left:50%;top:56%;width:min(560px,110%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--glow,rgba(244,169,82,.12)) 0%,transparent 62%);transition:background 1.2s;pointer-events:none}
.mix .flask{position:relative;width:min(100%,340px,calc((100svh - var(--hh,92px) - 72px) * .616));transition:width .6s var(--ease),transform .6s var(--ease)}
.mix .flask svg{display:block;width:100%;height:auto;overflow:visible}
.mix .stopper{transform:translateY(-320px);opacity:0;transition:transform .75s cubic-bezier(.3,1.35,.5,1),opacity .25s}
.mix .label-g{transform-box:view-box;transform-origin:610px 1010px;transform:scale(.6);opacity:0;transition:transform .7s cubic-bezier(.3,1.4,.5,1) .55s,opacity .3s .55s}
.mix .bottle{transform-box:view-box;transform-origin:610px 1700px}
.mix .sealed .stopper{transform:none;opacity:1}
.mix .sealed .label-g{transform:none;opacity:1}
.mix .sealed .bottle{animation:settle 1s ease-in-out .2s}
@keyframes settle{20%{transform:rotate(-2.4deg)}50%{transform:rotate(1.8deg)}80%{transform:rotate(-.8deg)}}
.mix .anno{position:absolute;inset:0;pointer-events:none}
.mix .an{position:absolute;left:100%;display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:10px;white-space:nowrap;transform:translate(14px,-50%);opacity:0;transition:opacity .5s,transform .5s var(--ease)}
.mix .an.on{opacity:1;transform:translate(22px,-50%)}
.mix .an .lead{position:absolute;right:100%;top:50%;height:1px;margin-right:10px;background:var(--rule-2)}
.mix .an .lead::before{content:"";position:absolute;left:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--c)}
.mix .an .dev{font-size:20px;line-height:1;color:var(--fg)}
.mix .an b{font-family:'Newsreader',serif;font-weight:400;font-size:20px;color:var(--fg);font-variant-numeric:tabular-nums}
.mix .an small{grid-column:1/-1;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
/* ---------- panel ---------- */
.mix .panel{width:100%;max-width:520px;min-height:520px;display:flex;flex-direction:column;justify-content:center}
.mix .view{animation:enter .5s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(12px)}}
.mix .panel h1{font-size:clamp(44px,4.6vw,68px);line-height:1;margin:18px 0 0;letter-spacing:-.02em}
.mix .panel h1 em{font-style:italic;color:var(--acc-2)}
.mix .lede{margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:440px}
.mix .steps{list-style:none;margin:32px 0 36px;padding:0;counter-reset:s}
.mix .steps li{display:grid;grid-template-columns:44px 1fr;align-items:baseline;padding:14px 0;border-top:1px solid var(--rule);font-size:15px;line-height:1.5;color:var(--ink-2)}
.mix .steps li:last-child{border-bottom:1px solid var(--rule)}
.mix .steps li::before{counter-increment:s;content:"0" counter(s);font-family:'Newsreader',serif;font-size:18px;color:var(--acc-2);font-variant-numeric:tabular-nums}
.mix .steps b{font-weight:500;color:var(--fg)}
.mix .go-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px}
.mix .go-row .note{font-size:13px;line-height:1.45;color:var(--ink-3)}
.mix .btn svg{transition:transform .25s}
.mix .btn:hover svg{transform:translateX(4px)}
.mix .btn:focus-visible{outline:2px solid var(--acc-2);outline-offset:3px}
/* deck */
.mix .deck-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.mix .deck-head h2{font-size:clamp(26px,2.3vw,32px);line-height:1.1}
.mix .counter{font-family:'Newsreader',serif;font-size:22px;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.mix .counter span{color:var(--ink-3)}
.mix .track{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:16px 0 0}
.mix .track i{height:2px;background:var(--rule);transition:background .4s}
.mix .track i.on{background:var(--c,var(--turmeric))}
.mix .track i.some{background:color-mix(in srgb,var(--c) 55%,transparent)}
.mix .track i.no{background:var(--rule-2)}
.mix .deck{position:relative;height:280px;margin-top:28px}
.mix .card{position:absolute;inset:0;border-radius:16px;padding:22px 26px 24px;display:flex;flex-direction:column;overflow:hidden;color:var(--ink);touch-action:none;user-select:none;-webkit-user-select:none;
  background:#FFFCF6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:0 0 0 1px rgba(43,37,32,.07),0 26px 44px -26px rgba(43,37,32,.38),0 2px 5px rgba(43,37,32,.08);transition:transform .45s var(--ease),opacity .45s}
.mix .card::after{content:"";position:absolute;inset:9px;border:1px solid rgba(137,95,46,.22);border-radius:10px;pointer-events:none}
.mix .card>*{transition:opacity .3s}
.mix .card[data-pos="0"]{z-index:3;cursor:grab}
.mix .card[data-pos="0"].drag{cursor:grabbing;transition:none}
.mix .card[data-pos="1"]{z-index:2;transform:translateY(12px) scale(.96);background-color:#F3EDE2}
.mix .card[data-pos="2"]{z-index:1;transform:translateY(24px) scale(.92);background-color:#EAE2D3}
.mix .card[data-pos="h"]{transform:translateY(24px) scale(.92);opacity:0}
.mix .card[data-pos="1"]>*,.mix .card[data-pos="2"]>*,.mix .card[data-pos="h"]>*{opacity:0}
.mix .card[data-pos="x"]{transform:translate(130%,-4%) rotate(14deg);opacity:0}
.mix .card.gone{pointer-events:none}
.mix .card-top{position:relative;display:flex;justify-content:space-between;align-items:baseline}
.mix .card .cat{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--copper-text)}
.mix .card .no{font-family:'Newsreader',serif;font-style:italic;font-size:15px;color:var(--muted-2)}
.mix .card .wm{position:absolute;right:-6px;bottom:-34px;font-size:140px;line-height:1;color:rgba(57,67,39,.065);pointer-events:none}
.mix .card p{position:relative;margin:auto 0;padding-bottom:10px;font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:clamp(25px,2.2vw,31px);line-height:1.18;letter-spacing:-.012em;max-width:16em}
.mix .stamp{position:absolute;top:56px;padding:4px 10px;border:1.5px solid currentColor;outline:1px solid currentColor;outline-offset:2px;border-radius:3px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:0;pointer-events:none;background:rgba(246,241,231,.6)}
.mix .stamp.yes{left:26px;color:var(--oil);transform:rotate(-7deg)}
.mix .stamp.no-s{right:26px;color:var(--muted);transform:rotate(7deg)}
.mix .stamp.some{left:50%;color:var(--copper-text);transform:translateX(-50%)}
.mix .answer{display:grid;grid-template-columns:1fr 1fr 1.2fr;margin-top:40px;border:1px solid var(--rule-2);border-radius:12px;overflow:hidden}
.mix .answer button{appearance:none;border:0;background:transparent;color:var(--fg);font:inherit;font-size:15px;font-weight:500;min-height:58px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:background .2s}
.mix .answer button+button{border-left:1px solid var(--rule-2)}
@media (hover:hover){
  .mix .answer button:hover{background:rgba(43,37,32,.05)}
  .mix .answer .yes:hover{background:var(--turmeric-light)}
}
.mix .answer button:active{background:rgba(43,37,32,.09)}
.mix .answer button:focus-visible{outline:2px solid var(--acc-2);outline-offset:-4px}
.mix .answer .yes{background:var(--turmeric);color:var(--ink)}
.mix .answer kbd{font:inherit;font-size:13px;opacity:.6}
.mix .deck-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.mix .deck-foot .hint{font-size:12.5px;color:var(--ink-3)}
.mix .teaser{min-height:26px;margin:22px 0 0;font-family:'Newsreader',serif;font-style:italic;font-size:18px;line-height:1.4;color:var(--acc-2)}
.mix .teaser:empty{visibility:hidden}
/* full */
.mix .full h2{font-size:clamp(36px,3.6vw,52px);line-height:1.04;margin-top:16px}
.mix .full p{margin:16px 0 30px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:420px}
/* result */
.mix .res>*{animation:enter .6s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
.mix .res h2{font-size:clamp(32px,3vw,42px);line-height:1.06;margin-top:14px;letter-spacing:-.015em}
.mix .res .adds{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.mix .cols{display:grid;grid-template-columns:auto auto;justify-content:start;gap:0 28px;margin-top:28px}
.mix .cols h3{font-family:'Jost',sans-serif;font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.mix .cols ul{list-style:none;margin:0;padding:0;font-size:14.5px;line-height:1.65;color:var(--ink-1)}
.mix .cols li{padding-left:16px;position:relative}
.mix .cols li::before{content:"";position:absolute;left:0;top:.78em;width:7px;height:1px;background:var(--turmeric)}
.mix .cols em{font-style:normal;color:var(--ink-3)}
.mix .book{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:32px}
.mix .book .btn{min-height:52px;padding:0 26px}
.mix .book p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-3)}
.mix .book p b{font-weight:500;color:var(--acc)}
.mix .after{display:flex;align-items:center;flex-wrap:wrap;gap:4px 20px;margin-top:20px}
.mix .after .link{border-bottom:0;padding:4px 0;font-size:13px;font-weight:400;color:var(--ink-2)}
.mix .after .link:hover{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.mix .after .disc{flex:1 1 100%;margin:2px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3)}
@media (min-width:981px) and (max-height:840px){
  .mix{padding-top:20px;padding-bottom:28px}
  .mix .panel{min-height:0}
  .mix .panel h1{font-size:clamp(40px,3.8vw,54px);margin-top:14px}
  .mix .lede{margin-top:14px;font-size:16px}
  .mix .steps{margin:20px 0 24px}
  .mix .steps li{padding:10px 0;font-size:14.5px}
  .mix .deck{height:250px;margin-top:22px}
  .mix .answer{margin-top:34px}
  .mix .answer button{min-height:52px}
  .mix .res h2{font-size:clamp(28px,2.6vw,36px)}
  .mix .cols{margin-top:20px}
  .mix .book{margin-top:24px}
  .mix .after{margin-top:14px}
}
@media (max-width:980px){
  .mix{min-height:0;align-items:flex-start;padding:16px 0 64px}
  .mix .wrap{grid-template-columns:1fr;row-gap:28px}
  .mix .mx-stage::before{top:50%}
  .mix .panel{min-height:0;margin:0 auto}
  .mix .flask{width:min(64vw,280px)}
  .mix[data-phase="deck"] .flask,.mix[data-phase="full"] .flask{width:150px}
  .mix[data-phase="sealed"] .mx-stage{justify-content:flex-start;padding-left:4%}
  .mix[data-phase="sealed"] .flask{width:min(46vw,220px)}
}
@media (max-width:560px){
  .mix .deck{height:250px}
  .mix .card{padding:20px 22px}
  .mix .answer{grid-template-columns:1fr 1fr}
  .mix .answer .yes{grid-column:1/-1;grid-row:1;border-bottom:1px solid var(--rule-2)}
  .mix .answer button+button{border-left:0}
  .mix .answer .some{border-left:1px solid var(--rule-2)!important}
  .mix .answer kbd,.mix .deck-foot .hint{display:none}
  .mix .cols{grid-template-columns:1fr}
  .mix .cols ul+h3,.mix .cols div+div{margin-top:16px}
  .mix .an .dev,.mix .an b{font-size:17px}
  .mix .deck-head h2{font-size:24px}
  .mix .counter{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .mix .view,.mix .res>*{animation:none}
  .mix .sealed .bottle{animation:none}
  .mix .stopper,.mix .label-g,.mix .flask,.mix .an{transition:none}
}
/* on the homepage the sticky header overlays the section, so the section carries the header's height itself */
.mix.is-home{min-height:100vh;min-height:100svh;padding-top:calc(var(--hh,92px) + 32px);scroll-margin-top:0}
@media (min-width:981px) and (max-height:840px){
  .mix.is-home{padding-top:calc(var(--hh,92px) + 20px)}
}
@media (max-width:980px){
  .mix.is-home{min-height:0;padding-top:calc(var(--hh,92px) + 16px)}
}