/* The Sorting Stethoscope — quiz + result. Tokens and shell come from /css/site.css. */

.sh-hero{padding:10px 0 4px}
.sh-hero h1{font-size:clamp(2.5rem,7.5vw,4rem);font-weight:900;margin:6px 0 0}
.sh-hero p{font-size:1.12rem;color:var(--ink-soft);max-width:50ch;margin:16px 0 0}
.sh-start{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--cream);
  font-family:inherit;font-weight:700;font-size:1.06rem;border:0;border-radius:40px;padding:15px 30px;
  margin-top:24px;cursor:pointer;transition:transform .15s,background .15s}
.sh-start:hover{background:var(--teal-deep);transform:translateY(-1px)}
.sh-meta{margin-top:14px;font-size:.92rem;color:var(--ink-soft)}

/* ---- quiz ---- */
.sh-quiz{display:none;padding:6px 0 10px}
.sh-quiz.on{display:block}
.sh-hero.off{display:none}
.sh-prog{height:7px;background:var(--cream-2);border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:6px 0 6px}
.sh-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--honey));
  border-radius:999px;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.sh-count{font-size:.86rem;color:var(--ink-soft);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:12px 0 18px;display:block}
.sh-q{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,4.2vw,2.15rem);line-height:1.18;margin:0 0 22px;text-wrap:balance}
.sh-as{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.sh-a{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;background:var(--paper);
  border:1.5px solid var(--line);border-radius:16px;padding:16px 18px;font-family:inherit;font-size:1.04rem;
  line-height:1.45;color:var(--ink);cursor:pointer;transition:border-color .13s,transform .13s,background .13s}
.sh-a:hover{border-color:var(--teal);transform:translateY(-1px)}
.sh-a.pick{border-color:var(--teal-deep);background:#e9f4f2}
.sh-a b{flex:0 0 26px;height:26px;border-radius:8px;background:var(--cream-2);color:var(--honey-ink);
  font-size:.82rem;font-weight:700;display:grid;place-items:center;margin-top:1px}
.sh-a:hover b,.sh-a.pick b{background:var(--honey);color:#3a2606}
.sh-back{margin-top:20px;background:none;border:0;font-family:inherit;font-weight:600;font-size:.94rem;
  color:var(--ink-soft);cursor:pointer;padding:6px 0}
.sh-back:hover{color:var(--ink)}
.sh-fade{animation:shIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes shIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- result ---- */
.sh-badge{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:clamp(26px,4.5vw,40px);
  box-shadow:var(--shadow);text-align:center;position:relative;overflow:hidden}
.sh-badge:before{content:"";position:absolute;inset:0 0 auto;height:6px;
  background:linear-gradient(90deg,var(--teal),var(--honey),var(--peach))}
.sh-kicker{font-family:'Caveat',cursive;font-weight:700;font-size:1.45rem;color:var(--honey-deep)}
.sh-name{font-size:clamp(2.1rem,6.5vw,3.3rem);font-weight:900;margin:4px 0 0;line-height:1.05}
.sh-tag{font-size:1.14rem;color:var(--ink-soft);max-width:38ch;margin:14px auto 0;font-style:italic}
.sh-chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.sh-rar{display:inline-block;background:var(--cream-2);border:1px solid var(--line);
  border-radius:999px;padding:7px 16px;font-size:.9rem;font-weight:700;color:var(--honey-ink)}
.sh-rar.rare{background:#f3e3ff;border-color:#dcc0f0;color:#6b2fa0}

.sh-sec{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px 26px;margin-top:18px;box-shadow:var(--shadow-soft)}
.sh-sec h2{font-size:1.24rem;margin:0 0 12px}
.sh-sec p{color:#473f38;font-size:1.03rem}
.sh-tells{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:7px}
.sh-tells li{background:var(--cream-2);border-left:3px solid var(--honey);border-radius:0 10px 10px 0;
  padding:9px 14px;font-size:1.01rem;font-weight:500}

.sh-bars{display:grid;gap:13px;margin-top:4px}
.sh-bar b{display:flex;justify-content:space-between;font-size:.82rem;font-weight:600;color:var(--ink-soft);
  letter-spacing:.02em;margin-bottom:5px}
.sh-bar b span:first-child{color:var(--ink)}
.sh-track{height:9px;background:var(--cream-2);border:1px solid var(--line);border-radius:999px;position:relative}
.sh-track i{position:absolute;top:50%;width:17px;height:17px;border-radius:50%;background:var(--teal-deep);
  border:3px solid var(--paper);box-shadow:0 2px 6px rgba(74,56,33,.22);transform:translate(-50%,-50%)}

.sh-two{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.sh-two{grid-template-columns:1fr}}
.sh-mini{background:var(--cream-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.sh-mini span{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.sh-mini strong{display:block;font-family:var(--display);font-size:1.12rem;font-weight:600;margin-top:3px}
.sh-shaun{background:var(--teal-deep);color:#eaf5f3;border-radius:20px;padding:20px 24px;margin-top:18px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.sh-shaun p{margin:0;font-size:1rem;color:#dfeeeb}
.sh-shaun b{color:#fff}

.sh-share{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.sh-share button,.sh-share a{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--cream);
  border:0;border-radius:30px;padding:13px 22px;font-family:inherit;font-weight:700;font-size:.98rem;
  cursor:pointer;text-decoration:none;transition:background .15s,transform .15s}
.sh-share button:hover,.sh-share a:hover{background:var(--teal-deep);transform:translateY(-1px)}
.sh-share .ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--line)}
.sh-share .ghost:hover{background:var(--paper);border-color:var(--teal)}
.sh-again{display:inline-block;margin-top:20px;font-weight:600;color:var(--teal-deep);text-decoration:none}
.sh-again:hover{text-decoration:underline}
.sh-fine{margin-top:18px;font-size:.88rem;color:var(--ink-soft);line-height:1.6}

/* ============ doodles ============ */
.dood{width:100%;height:100%;display:block;overflow:visible}
.sh-mark{width:86px;height:86px;color:var(--teal);margin:0 auto 2px}
.sh-mark .dood path,.sh-mark .dood circle,.sh-mark .dood rect,.sh-mark .dood ellipse{
  stroke-dasharray:220;stroke-dashoffset:220;animation:shDraw 1.1s cubic-bezier(.3,.9,.3,1) forwards}
.sh-mark .dood *:nth-child(2){animation-delay:.1s}
.sh-mark .dood *:nth-child(3){animation-delay:.2s}
.sh-mark .dood *:nth-child(4){animation-delay:.3s}
.sh-mark .dood *:nth-child(5){animation-delay:.4s}
.sh-mark .dood *:nth-child(n+6){animation-delay:.5s}
@keyframes shDraw{to{stroke-dashoffset:0}}
.sh-hero-mark{width:96px;height:96px;margin:0 0 6px}
.sh-hero-mark img{width:100%;height:100%;display:block}
.sh-mini-mark{width:34px;height:34px;color:#a8574f;float:right;margin:-4px 0 0 10px}

/* ============ EKG progress ============ */
.sh-ekg{width:100%;height:34px;display:block;margin:2px 0 -4px;overflow:visible}
.sh-ekg .base{fill:none;stroke:var(--line);stroke-width:2}
.sh-ekg .live{fill:none;stroke:var(--teal-deep);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke-dashoffset .55s cubic-bezier(.2,.8,.2,1)}
.sh-ekg .blip{fill:var(--honey);transition:transform .55s cubic-bezier(.2,.8,.2,1)}

/* ============ the hat deliberating ============ */
.sh-think{display:none;padding:40px 0 60px;text-align:center;min-height:52vh}
.sh-think.on{display:block}
.sh-think .sh-mark{width:112px;height:112px;color:var(--honey-deep);animation:shWobble 1.5s ease-in-out infinite}
.sh-think .sh-mark .dood path,.sh-think .sh-mark .dood circle{animation:none;stroke-dashoffset:0;stroke-dasharray:none}
@keyframes shWobble{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-7px)}}
.sh-mutter{font-family:var(--display);font-size:clamp(1.3rem,3.6vw,1.8rem);font-weight:600;
  margin:26px auto 0;max-width:22ch;min-height:2.4em;color:var(--ink)}
.sh-mutter span{display:inline-block;animation:shIn .4s cubic-bezier(.2,.8,.2,1)}
.sh-dots{margin-top:14px;font-size:.9rem;color:var(--ink-soft)}
.sh-skip{margin-top:22px;background:none;border:0;font-family:inherit;font-weight:600;
  font-size:.92rem;color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sh-skip:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.sh-think .sh-mark{animation:none}
  .sh-mark .dood path,.sh-mark .dood circle,.sh-mark .dood rect,.sh-mark .dood ellipse{animation:none;stroke-dashoffset:0}}

/* ============ reveal ============ */
.sh-badge{animation:shStamp .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes shStamp{0%{transform:scale(.88) rotate(-1.5deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.sh-spark{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--honey);opacity:0;
  animation:shSpark .9s ease-out forwards}
@keyframes shSpark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
@media(prefers-reduced-motion:reduce){.sh-badge{animation:none}.sh-spark{display:none}}

/* ============ Dr. Match ============ */
.sh-doc{display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1.5px solid var(--line);
  border-radius:20px;padding:18px 20px;margin-top:22px;box-shadow:var(--shadow-soft);position:relative}
.sh-doc:before{content:"";position:absolute;left:34px;top:-9px;width:16px;height:16px;background:var(--paper);
  border-left:1.5px solid var(--line);border-top:1.5px solid var(--line);transform:rotate(45deg)}
.sh-doc .sh-face{flex:0 0 64px;width:64px;height:64px}
.sh-face img{width:100%;height:auto;display:block}
.sh-doc p{margin:0;font-size:1.02rem;line-height:1.55;color:#473f38}
.sh-doc b{font-family:var(--display);font-weight:600;color:var(--ink)}
.sh-doc .sig{display:block;margin-top:8px;font-family:'Caveat',cursive;font-weight:700;font-size:1.3rem;color:var(--honey-deep)}
@media(max-width:520px){.sh-doc{gap:12px;padding:16px}.sh-doc .sh-face{flex-basis:50px;width:50px;height:50px}}

.sh-hero-mark{color:var(--honey-deep)}
.sh-think .sh-face{width:136px;height:136px;margin:0 auto;
  animation:shLean 1.8s ease-in-out infinite}
@keyframes shLean{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.sh-think .sh-scope img{width:100%;height:100%;display:block}
.sh-think .sh-scope{width:86px;height:86px;margin:12px auto 0;
  animation:shPulse 1.1s ease-in-out infinite}
@keyframes shPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}
.sh-verdict{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:2px}
.sh-verdict .sh-face{width:46px;height:46px;flex:0 0 46px}
@media(prefers-reduced-motion:reduce){.sh-think .sh-face,.sh-think .sh-scope img{width:100%;height:100%;display:block}
.sh-think .sh-scope{animation:none}}

/* ================================================================
   THE ENCHANTED THEME
   The quiz is its own world: deep night blue, gold, glowing. The rest of
   shaunandersen.com keeps the cream palette; only /sort looks like this.
   Everything below overrides site.css for these pages only.
   ================================================================ */
:root{
  --night:#0b1533; --night-2:#132250; --night-3:#1b2f66;
  --gold:#e8b84b; --gold-deep:#c8912b; --gold-soft:#f2d68a;
  --glow:#6fd0ff; --glow-deep:#2f9fd6;
  --sky:#eaf0ff; --sky-soft:#a3b3dd;
  --panel:rgba(255,255,255,.055); --panel-line:rgba(232,184,75,.28);
}
body{
  background:var(--night);
  color:var(--sky);
  background-image:
    radial-gradient(52% 40% at 84% -6%,rgba(111,208,255,.20),transparent 62%),
    radial-gradient(46% 36% at -4% 16%,rgba(232,184,75,.14),transparent 58%),
    radial-gradient(60% 44% at 50% 104%,rgba(47,159,214,.16),transparent 62%);
}
/* starfield */
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,rgba(255,255,255,.85),transparent),
    radial-gradient(1.4px 1.4px at 78% 12%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.8px 1.8px at 34% 62%,rgba(242,214,138,.8),transparent),
    radial-gradient(1.2px 1.2px at 63% 44%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.5px 1.5px at 88% 71%,rgba(111,208,255,.7),transparent),
    radial-gradient(1.3px 1.3px at 22% 86%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.7px 1.7px at 52% 26%,rgba(242,214,138,.55),transparent),
    radial-gradient(1.2px 1.2px at 6% 48%,rgba(255,255,255,.5),transparent);
}
.wrap{position:relative;z-index:1}
h1,h2,h3{color:var(--sky)}
.brandmark{color:var(--sky)}.brandmark b{color:var(--gold)}
.topnav a{color:var(--sky-soft)}.topnav a:hover{color:var(--sky)}
.topnav .tn-cta{background:var(--gold);color:#2a1c00}
.topnav .tn-cta:hover{background:var(--gold-soft)}
.eyebrow{color:var(--gold)}
footer{border-top:1px solid rgba(232,184,75,.2)}
footer .links a,.foot-legal,.foot-legal a{color:var(--sky-soft)}
footer .links a:hover,.foot-legal a:hover{color:var(--gold)}
::selection{background:rgba(232,184,75,.35);color:#fff}

/* panels */
.sh-doc,.sh-sec,.sh-badge,.sh-a{
  background:var(--panel);border-color:var(--panel-line);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 18px 44px rgba(0,0,0,.34)}
.sh-doc:before{background:var(--night-2);border-color:var(--panel-line)}
.sh-doc p,.sh-sec p{color:var(--sky)}
.sh-doc b{color:var(--gold-soft)}
.sh-doc .sig{color:var(--gold)}
.sh-badge:before{background:linear-gradient(90deg,var(--glow),var(--gold),var(--gold-soft))}
.sh-kicker{color:var(--gold)}
.sh-tag{color:var(--sky-soft)}
.sh-meta,.sh-count,.sh-dots,.sh-fine{color:var(--sky-soft)}
.sh-tells li{background:rgba(111,208,255,.09);border-left-color:var(--gold);color:var(--sky)}
.sh-mini{background:rgba(255,255,255,.05);border-color:var(--panel-line)}
.sh-mini span{color:var(--sky-soft)}.sh-mini strong{color:var(--sky)}
.sh-rar{background:rgba(232,184,75,.14);border-color:rgba(232,184,75,.4);color:var(--gold-soft)}
.sh-rar.rare{background:rgba(155,109,255,.2);border-color:rgba(183,148,255,.5);color:#d9c6ff}

/* answers */
.sh-a{color:var(--sky)}
.sh-a b{background:rgba(232,184,75,.16);color:var(--gold-soft)}
.sh-a:hover{border-color:var(--gold);transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(232,184,75,.28),0 18px 44px rgba(0,0,0,.4)}
.sh-a:hover b,.sh-a.pick b{background:var(--gold);color:#2a1c00}
.sh-a.pick{border-color:var(--gold);background:rgba(232,184,75,.12)}
.sh-back,.sh-skip{color:var(--sky-soft)}.sh-back:hover,.sh-skip:hover{color:var(--gold)}

/* buttons */
.sh-start,.sh-share button,.sh-share a{
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#2a1c00;
  box-shadow:0 8px 26px rgba(232,184,75,.28)}
.sh-start:hover,.sh-share button:hover,.sh-share a:hover{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#2a1c00}
.sh-share .ghost{background:rgba(255,255,255,.07);color:var(--sky);
  border:1.5px solid var(--panel-line);box-shadow:none}
.sh-share .ghost:hover{background:rgba(255,255,255,.12);border-color:var(--gold);color:var(--sky)}
.sh-again{color:var(--gold)}

/* trait bars */
.sh-bar b span:first-child{color:var(--sky)}
.sh-bar b{color:var(--sky-soft)}
.sh-track{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14)}
.sh-track i{background:var(--gold);border-color:var(--night-2);
  box-shadow:0 0 12px rgba(232,184,75,.7)}

/* EKG */
.sh-ekg .base{stroke:rgba(255,255,255,.16)}
.sh-ekg .live{stroke:var(--glow);filter:drop-shadow(0 0 6px rgba(111,208,255,.75))}
.sh-ekg .blip{fill:var(--gold);filter:drop-shadow(0 0 7px rgba(232,184,75,.9))}

/* the 49 specialty marks: gold, and they glow */
.sh-mark{color:var(--gold-soft);filter:drop-shadow(0 0 10px rgba(232,184,75,.45))}
.sh-mini-mark{color:#ff9d9d;filter:none}

/* Shaun's aside + the newsletter block */
.sh-shaun{background:linear-gradient(180deg,var(--night-3),var(--night-2));
  border:1px solid var(--panel-line);color:var(--sky)}
.sh-shaun p{color:var(--sky-soft)}.sh-shaun b{color:var(--gold-soft)}
.cta{background:linear-gradient(180deg,var(--night-3),#0e1a42);border:1px solid var(--panel-line)}
.cta h2{color:var(--sky)}.cta p{color:var(--sky-soft)}.cta .eyebrow{color:var(--gold)}
.cta .btn{background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#2a1c00}

/* the art */
/* The mist was stripped by saturation, so it floats free now instead of being framed. */
.sh-medallion{overflow:visible;position:relative;flex:none;
  filter:drop-shadow(0 0 26px rgba(111,208,255,.5)) drop-shadow(0 8px 20px rgba(0,0,0,.45))}
.sh-medallion img{width:100%;height:auto;display:block}
.sh-hero-mark{width:158px;height:auto}
.sh-think .sh-scope{width:150px;height:auto;margin:16px auto 0}
.sh-doc .sh-face img,.sh-verdict .sh-face img{border-radius:50%;
  box-shadow:0 0 0 2px rgba(232,184,75,.45),0 6px 18px rgba(0,0,0,.5)}
.sh-think .sh-face{width:230px;height:auto}
.sh-think .sh-face img{border-radius:0;box-shadow:none;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))}

/* Dr. Match stands next to what he says, so the bubble belongs to somebody */
.sh-meet{display:flex;gap:22px;align-items:center;margin-top:26px}
.sh-standing{flex:0 0 210px;width:210px}
.sh-standing img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.6));
  animation:shBreathe 5.5s ease-in-out infinite}
@keyframes shBreathe{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-8px) rotate(.6deg)}}
.sh-doc-side{margin-top:0;flex:1 1 auto;min-width:0}
.sh-doc-side:before{left:-9px;top:50%;margin-top:-8px;
  border-left:1.5px solid var(--panel-line);border-top:none;
  border-bottom:1.5px solid var(--panel-line)}
@media(max-width:720px){
  .sh-meet{flex-direction:column;gap:2px}
  .sh-standing{flex:none;width:190px;margin:0 auto}
  .sh-doc-side{width:100%}
  .sh-doc-side:before{left:50%;top:-9px;margin:0 0 0 -8px;
    border-left:1.5px solid var(--panel-line);border-top:1.5px solid var(--panel-line);border-bottom:none}
}
@media(prefers-reduced-motion:reduce){.sh-standing img{animation:none}}

/* Dr. Match stays in the room while you answer, and says something when an
   answer deserves it. Silence between quips is deliberate. */
.sh-watch{display:flex;align-items:center;gap:14px;min-height:62px;margin:6px 0 2px}
.sh-watch-face{flex:0 0 54px;width:54px;height:54px}
.sh-watch-face img{width:100%;height:100%;display:block;border-radius:50%;
  box-shadow:0 0 0 2px rgba(232,184,75,.45),0 4px 14px rgba(0,0,0,.5)}
.sh-quip{margin:0;font-family:'Caveat',cursive;font-weight:700;
  font-size:clamp(1.25rem,3.4vw,1.55rem);color:var(--gold-soft);opacity:0;line-height:1.25}
.sh-quip.on{animation:shQuip .45s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes shQuip{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@media(max-width:520px){.sh-watch{gap:11px;min-height:54px}.sh-watch-face{flex-basis:44px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.sh-quip.on{animation:none;opacity:1}}

/* the collection: a reason to come back */
.sh-collect[hidden]{display:none}
.sh-collect{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(111,208,255,.08);border:1px solid var(--panel-line);
  border-radius:16px;padding:14px 18px;margin-top:16px}
.sh-collect b{color:var(--gold-soft);font-family:var(--display);font-size:1.12rem;font-weight:600}
.sh-collect span{color:var(--sky-soft);font-size:.95rem}
.sh-collect .bar{flex:1 1 140px;height:8px;min-width:120px;border-radius:999px;
  background:rgba(255,255,255,.1);overflow:hidden}
.sh-collect .bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--glow),var(--gold));transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* Share belongs in the first viewport: that is the moment people actually share. */
.sh-share-top{justify-content:center;margin-top:20px}
.sh-share-top button,.sh-share-top a{padding:11px 20px;font-size:.93rem}

/* Answer icons. People process a picture faster than a sentence, and picking
   between images is more fun than picking between lines of text. */
.sh-a b{flex:0 0 46px;width:46px;height:46px;border-radius:13px;position:relative;
  background:rgba(232,184,75,.10);border:1px solid rgba(232,184,75,.22);
  display:grid;place-items:center;margin-top:0;transition:background .15s,border-color .15s}
.sh-a b .ai{width:26px;height:26px;color:var(--gold-soft);display:block;transition:color .15s}
.sh-a b i{position:absolute;right:-5px;bottom:-5px;width:17px;height:17px;border-radius:6px;
  background:var(--night-3);border:1px solid var(--panel-line);color:var(--sky-soft);
  font-style:normal;font-size:.63rem;font-weight:700;display:grid;place-items:center}
.sh-a:hover b,.sh-a.pick b{background:rgba(232,184,75,.9);border-color:var(--gold)}
.sh-a:hover b .ai,.sh-a.pick b .ai{color:#2a1c00}
.sh-a{align-items:center;gap:16px;padding:14px 18px}
@media(max-width:520px){
  .sh-a b{flex-basis:40px;width:40px;height:40px;border-radius:11px}
  .sh-a b .ai{width:23px;height:23px}
  .sh-a b i{width:15px;height:15px;font-size:.58rem}
  .sh-a{gap:13px;padding:13px 15px}
}

/* the stethoscope's lore */
.sh-lore{display:flex;gap:26px;align-items:center;margin:34px 0 10px;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:22px;
  padding:26px 30px;box-shadow:0 18px 44px rgba(0,0,0,.34)}
.sh-lore-art{flex:0 0 150px;width:150px;filter:drop-shadow(0 0 26px rgba(111,208,255,.5))}
.sh-lore-art img{width:100%;height:auto;display:block}
.sh-lore-txt p{color:var(--sky-soft);font-size:1rem;line-height:1.6;margin:0 0 10px}
.sh-lore-txt p:last-child{margin-bottom:0}
.sh-lore-txt .eyebrow{margin-bottom:8px}
.sh-lore-txt .sig{display:block;margin-top:8px;font-family:'Caveat',cursive;font-weight:700;
  font-size:1.3rem;color:var(--gold)}
@media(max-width:700px){.sh-lore{flex-direction:column;gap:14px;text-align:left;padding:22px}
  .sh-lore-art{flex:none;width:120px;align-self:center}}

/* The hero paragraph and meta line were still inheriting the cream theme's brown
   from site.css: .sh-hero p outranks .sh-meta on specificity, so they sat at 3.08:1
   on the dark background. Both now read properly. */
.sh-hero p,.sh-hero .sh-meta{color:var(--sky-soft)}
.sh-hero p b{color:var(--sky)}

/* tighter vertical rhythm up top: it was drifting apart on desktop */
.sh-hero{padding:24px 0 6px}
.sh-hero-mark{width:118px;margin:0 0 12px}
.sh-hero h1{margin:2px 0 0;line-height:1.02}
.sh-hero p{font-size:1.08rem;line-height:1.55;max-width:44ch;margin:16px 0 0}
.sh-meet{margin-top:24px}
.sh-start{margin-top:22px}
.sh-hero .sh-meta{margin-top:12px;font-size:.9rem}
.sh-hero .pulse{margin-top:18px!important}
@media(max-width:720px){
  .sh-hero{padding:14px 0 4px}
  .sh-hero-mark{width:96px;margin-bottom:8px}
  .sh-hero p{max-width:none}
}

/* returning players */
.sh-returning{margin:14px 0 0;color:var(--sky-soft);font-size:.96rem}
.sh-returning b{color:var(--gold-soft)}

/* the handoff: Dr. Match is done, here is the part that is actually useful */
.sh-next-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:16px}
.sh-next-card{display:block;background:rgba(111,208,255,.08);border:1px solid var(--panel-line);
  border-radius:14px;padding:15px 17px;text-decoration:none;transition:border-color .15s,transform .15s,background .15s}
.sh-next-card:hover{border-color:var(--gold);transform:translateY(-2px);background:rgba(232,184,75,.10)}
.sh-next-card b{display:block;font-family:var(--display);font-weight:600;font-size:1.04rem;color:var(--sky)}
.sh-next-card span{display:block;margin-top:5px;font-size:.9rem;line-height:1.45;color:var(--sky-soft)}