/* Taste tests (js/taste.js): "Find your color" and "Find your palette". Museum editorial: the color is the interface,
   chrome stays neutral, hairlines instead of boxes, serif names, mono small-caps labels. */

/* ---------- intro ---------- */
.tz-intro .tz-prev{flex:1;min-height:230px;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:1fr;gap:2px;margin-top:16px}
.tz-intro .tz-prev>i{background:var(--c);animation:plate .8s var(--ease) both;animation-delay:calc(var(--k) * 40ms)}
.tz-intro .tz-prev.tz-pals{grid-template-columns:1fr 1fr;gap:3px}
.tz-intro .tz-pals .tz-strip{height:100%}
.tz-kick{margin-top:26px}
.tz-intro .btn[data-go]{margin-top:22px}
.tz-intro .btn.ghost{margin-top:4px}

/* ---------- the duel ---------- */
.tz-q{padding:10px 0 0}
.tz-q h2{font:400 32px/1.02 var(--serif);letter-spacing:-.02em;margin-top:8px;text-wrap:balance}
.tz-duel{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:16px 0 4px}
.tz-opt{position:relative;flex:1;min-height:0;display:flex;border-radius:var(--r-1);overflow:hidden;transition:flex .42s var(--ease),opacity .32s,transform .2s;animation:tz-in .38s var(--ease) both}
.tz-opt+.tz-opt{animation-delay:50ms}
.tz-opt:active{transform:scale(.985)}
.tz-opt.win{flex:2.2}
.tz-opt.lose{flex:.35;opacity:.28}
.tz-opt.both{opacity:1;transform:scale(.97)}
.tz-opt.none{opacity:.2;transform:scale(.97)}
.tz-opt.real{flex:1.6;box-shadow:0 0 0 2px var(--ground),0 0 0 3px var(--ink)}
@keyframes tz-in{from{opacity:0;transform:translateY(8px)}}
.tz-plate{flex:1;background:var(--c)}
.tz-strip{flex:1;display:flex;gap:2px;min-width:0}
.tz-strip i{background:var(--c);min-width:3px}
.tz-alt{display:flex;justify-content:center;align-items:center;gap:6px;padding:4px 0 2px}
.tz-alt button{min-height:44px;padding:0 16px;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);transition:color .2s}
.tz-alt button:active{color:var(--ink)}
.tz-alt i{width:3px;height:3px;border-radius:50%;background:var(--faint)}
.tz-reveal{min-height:150px}
.tz-reveal p{font-size:15px;line-height:1.45;color:#DAD5C9;margin:12px 0 6px;text-wrap:pretty}
.tz-reveal p b{font-weight:500;color:var(--ink)}

/* ---------- color results ---------- */
.tz-reading{font:400 clamp(34px,9.6vw,42px)/1.02 var(--serif);letter-spacing:-.025em;margin-top:12px;text-wrap:balance}
.tz-map{display:flex;justify-content:center;margin-top:18px}
.tz-rose{display:block}
.tz-cap{text-align:center;margin:6px auto 0;max-width:34ch}
.tz-picks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.tz-pick{display:flex;flex-direction:column;min-width:0}
.tz-pick-c{aspect-ratio:4/5;background:var(--c);border-radius:var(--r-1);padding:12px;display:flex;align-items:flex-end}
.tz-pick-c[data-ink="dark"] .eyebrow{color:rgba(20,19,17,.7)}
.tz-pick-c[data-ink="light"] .eyebrow{color:rgba(255,255,255,.78)}
.tz-pick.low .tz-pick-c{aspect-ratio:4/5}
.tz-pick b{font:400 26px/1 var(--serif);letter-spacing:-.015em;margin-top:12px;text-wrap:balance}
.tz-pick small{font:italic 400 17px/1.4 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint);margin-top:7px}
.tz-pick .mono{font-size:13px;color:var(--soft);margin-top:4px;letter-spacing:.06em}
.tz-word{align-self:flex-start;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);text-decoration:underline;text-underline-offset:4px;padding:12px 0 4px}
.tz-lc{display:grid;grid-template-columns:18px 1fr;grid-template-rows:auto auto;gap:6px 8px;margin-top:16px}
.tz-ax-y{writing-mode:vertical-rl;transform:rotate(180deg);font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint);text-align:right}
.tz-ax-y::after{content:" →"}
.tz-ax-x{grid-column:2;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint);text-align:right}
.tz-lc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.tz-lc-grid i{aspect-ratio:1.6;display:grid;place-items:center;position:relative}
.tz-lc-grid i::before{content:"";width:100%;height:100%;background:var(--c);transform:scale(var(--s));border-radius:var(--r-1);transition:transform .6s var(--ease)}
.tz-lc-grid i.me::after{content:"";position:absolute;inset:-2px;border:1px solid var(--ink);border-radius:var(--r-1)}
.tz-why{padding:16px 0;border-bottom:1px solid var(--rule)}
.tz-why p{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--soft)}
.tz-why p i{flex:none;width:22px;height:22px;border-radius:var(--r-1);background:var(--c)}
.tz-why p b{color:var(--ink);font-weight:500}
.tz-opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tz-opts button{min-height:34px;padding:0 10px;border:1px solid var(--rule);border-radius:var(--r-1);font-size:13px;color:#DAD5C9;transition:background .2s,color .2s,border-color .2s}
.tz-opts button.on{background:var(--paper);color:var(--paper-ink);border-color:var(--paper)}
.tz-whyout{padding-top:6px}
.tz-whyout p{font-size:16px;line-height:1.55;color:#DAD5C9;margin-top:14px;text-wrap:pretty}
.tz-whyout .tz-verdict{font:400 22px/1.2 var(--serif);color:var(--ink)}
.tz-vs{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule)}
.tz-vs i{width:44px;height:56px;border-radius:var(--r-1);background:var(--c)}
.tz-vs p{font-size:15px;line-height:1.5;color:#DAD5C9;text-wrap:pretty}
.tz-vs b{font-weight:500;color:var(--ink)}
.tz-moved{display:flex;align-items:center;gap:12px;margin-top:16px}
.tz-moved i{flex:1;height:64px;border-radius:var(--r-1);background:var(--c)}
.tz-moved span{color:var(--soft)}

/* ---------- palette results ---------- */
.tz-ptitle{font-size:clamp(46px,13vw,60px);margin-top:10px}
.tz-hero{display:flex;gap:2px;height:38dvh;min-height:220px;margin-top:20px}
.tz-hero i{background:var(--c);min-width:4px;border-radius:var(--r-1);animation:plate .7s var(--ease) both}
.tz-names{margin-top:6px}
.tz-name{display:grid;grid-template-columns:20px 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;width:100%;padding:11px 0;border-bottom:1px solid var(--rule);text-align:left}
.tz-name i{grid-row:span 2;width:20px;height:32px;border-radius:var(--r-1);background:var(--c)}
.tz-name b{font:400 21px/1.05 var(--serif);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tz-name small{grid-column:2;font:italic 400 17px/1.4 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint);margin-top:3px}
.tz-name em{grid-row:1 / span 2;grid-column:3;font-style:normal;font-size:13px;color:var(--soft)}
.tz-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.tz-dials{display:flex;flex-direction:column;gap:20px;padding-top:18px}
.tz-dial-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tz-dial-top b{font:400 22px/1 var(--serif)}
.tz-dial-top em{font:italic 400 17px/1.2 var(--serif);font-style:normal;letter-spacing:0;text-transform:none;color:var(--ink);text-align:right}
.tz-track{position:relative;height:1px;background:var(--rule-2);margin:14px 6px 0}
.tz-track i,.tz-track s{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px;border-radius:50%}
.tz-track i{background:var(--ink)}
.tz-track s{box-shadow:inset 0 0 0 1px var(--soft)}
.tz-dial.weak .tz-track i{background:var(--ground);box-shadow:inset 0 0 0 1px var(--soft)}
.tz-dial.weak .tz-dial-top em{color:var(--faint)}
.tz-ends{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font:italic 400 17px/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint)}
.tz-ends span:last-child{text-align:right}
.tz-ptg{display:grid;grid-template-columns:96px 1fr 18px;gap:14px;align-items:center;width:100%;padding:12px 0;border-bottom:1px solid var(--rule);text-align:left;color:var(--soft)}
.tz-ptg .tz-strip{height:52px;gap:1px}
.tz-ptg b{display:block;font:400 21px/1.05 var(--serif);color:var(--ink);text-wrap:balance}
.tz-ptg small{display:block;font-size:13px;color:var(--soft);margin-top:4px}
.tz-ptg svg{width:16px;height:16px}
.tz-sub{margin-top:26px;padding-bottom:4px}

/* ---------- Studio's door row (js/studio.js) ---------- */
.ldr-row span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ldr-row b{font:400 22px/1.05 var(--serif);font-weight:400}
.ldr-row small{font:400 13px/1.3 var(--sans);color:var(--soft)}

/* ---------- "Teach it your eye" ladder (js/tasteladder.js) -- the equal-swatch comparison rule applies throughout ---------- */
.ldr-intro .ldr-steps{display:flex;flex-direction:column;gap:2px;margin-top:22px}
.ldr-step{display:flex;align-items:baseline;gap:14px;padding:13px 2px;border-bottom:1px solid var(--rule)}
.ldr-step em{font:500 13px/1 'Geist Mono',monospace;color:var(--faint);letter-spacing:.04em;width:16px;flex:none}
.ldr-step b{font:400 20px/1.15 var(--serif);letter-spacing:-.01em;flex:1;min-width:0}
.ldr-chips{display:flex;gap:4px;flex:none;align-self:center}
.ldr-chips i{width:22px;height:22px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ldr-intro .btn[data-go]{margin-top:26px}

/* equal-size, equal-shape swatches: never weighted by share (David's rule). .tz-opt-col lets a duel option carry
   a caption (a painting title, a colour count) below its strip without the caption stealing flex width, since
   .tz-opt itself lays its children out as a row. */
.tz-strip.tz-eq i{flex:1}
.tz-opt-col{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;width:100%}
.tz-opt-col .tz-strip{flex:1}
.tz-opt-col small{font:italic 400 14px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint);text-align:center;padding:6px 4px 2px}
.ldr-cap{display:flex;justify-content:space-between;gap:10px;font:italic 400 14px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint);margin-top:4px}

/* the best-of-four screen (steps 2 and 3) */
.ldr-run .ldr-base{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0 4px}
.ldr-anchor-c{width:84px;height:84px;border-radius:50%;background:var(--c)}
.ldr-pair{display:flex;gap:3px;width:160px;height:84px;border-radius:var(--r-1);overflow:hidden}
.ldr-pair i{flex:1;background:var(--c)}
.ldr-pair.ldr-pair-win{width:220px}
.ldr-pair .ldr-win-c{flex:1}
.ldr-base small{font:italic 400 15px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint)}
.ldr-four{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:10px;flex:1;min-height:120px;padding:10px 0}
.ldr-combo{display:flex;gap:0;overflow:hidden;padding:0;background:none}
.ldr-combo i{flex:1;background:var(--c)}
.ldr-cand{background:var(--c);border-radius:var(--r-1);min-height:0;transition:transform .2s var(--ease),box-shadow .2s;animation:tz-in .34s var(--ease) both}
.ldr-cand:active{transform:scale(.96)}
.ldr-cand.win{box-shadow:0 0 0 2px var(--ground),0 0 0 3px var(--ink);transform:scale(1.02)}
.ldr-feedback{min-height:28px;display:flex;align-items:center;justify-content:center}
.ldr-feedback p{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft)}
.ldr-skip{margin-top:4px}
.ldr-skip[hidden]{display:none}

/* the end screen */
.ldr-end-h{font:400 clamp(30px,8.4vw,38px)/1.12 var(--serif);letter-spacing:-.02em;margin-top:12px;text-wrap:balance}
.ldr-findings{display:flex;flex-direction:column;gap:18px;margin-top:4px}
.ldr-finding{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center}
.ldr-ex{display:flex;gap:2px;height:60px;border-radius:var(--r-1);overflow:hidden}
.ldr-ex i{flex:1;background:var(--c)}
.ldr-finding p{font-size:16px;line-height:1.4;color:#DAD5C9;text-wrap:pretty}
.ldr-finding small{display:block;font-size:13px;color:var(--soft);margin-top:4px}
.ldr-notsure{padding:18px 0}
.ldr-notsure .eyebrow{color:var(--faint)}

.ldr-four.ldr-grid{grid-template-columns:1fr 1fr;gap:8px}
.ldr-combo{position:relative}
.ldr-rank{position:absolute;top:8px;left:8px;min-width:28px;height:28px;border-radius:14px;display:grid;place-items:center;font:600 16px/1 'Geist',sans-serif;background:var(--ink);color:var(--ground);opacity:0;transform:scale(.6);transition:opacity .15s,transform .2s var(--ease)}
.ldr-cand.win .ldr-rank{opacity:1;transform:none}
.ldr-base .ldr-hint{font:400 15px/1.3 'Geist',sans-serif;font-style:normal;color:var(--muted, var(--faint))}