/* ==== GUIDED TOUR — mid-century annotation overlay (assets/tour.js) ====
   Retro accent set (cream/mustard/tomato/teal) scoped to the tour layer only.
   Two palette variants keyed off the site's data-theme; the site's own elements are never restyled. */
.tour-ui{
  --t-cream:#F3E7CC; --t-ink:#2B2114; --t-mustard:#C99327; --t-tomato:#C24525; --t-teal:#2F7E73;
  --t-frame:#E3AC3C; --t-scrim:rgba(46,34,20,.30);
}
[data-theme="light"] .tour-ui{
  --t-cream:#F9F0DC; --t-ink:#251C0F; --t-mustard:#A2730B; --t-tomato:#B03D1F; --t-teal:#22655C;
  --t-frame:#8F6410; --t-scrim:rgba(84,60,26,.22);
}
#tour-root .t-off{display:none!important}

/* launcher — vertical tab docked mid-right edge, same register as the theme/news controls */
#tour-launch{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:951;margin:0;
  writing-mode:vertical-rl;text-orientation:mixed;
  background:var(--t-cream);color:var(--t-ink);border:2px solid var(--t-ink);border-right:0;border-radius:6px 0 0 6px;
  font:600 13px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;padding:16px 9px 16px 11px;cursor:pointer;
  box-shadow:-3px 3px 0 rgba(20,14,6,.3)}
#tour-launch:hover{background:var(--t-mustard);color:#221A0C}

/* warm graduated scrim; the cutout is painted inline per step from the target rect */
#tour-scrim{position:fixed;inset:0;z-index:900;transition:opacity .25s ease}

/* spotlight frame: dashed outline + corner brackets, like a callout in a period manual */
#tour-frame{position:fixed;z-index:901;pointer-events:none;box-sizing:border-box;
  outline:2px dashed var(--t-frame);outline-offset:5px;transition:opacity .25s ease}
#tour-frame i{position:absolute;width:18px;height:18px;border:0 solid var(--t-frame)}
#tour-frame i:nth-child(1){left:-4px;top:-4px;border-left-width:4px;border-top-width:4px}
#tour-frame i:nth-child(2){right:-4px;top:-4px;border-right-width:4px;border-top-width:4px}
#tour-frame i:nth-child(3){left:-4px;bottom:-4px;border-left-width:4px;border-bottom-width:4px}
#tour-frame i:nth-child(4){right:-4px;bottom:-4px;border-right-width:4px;border-bottom-width:4px}

/* narration card — the cheerful acetate */
#tour-card{position:fixed;z-index:902;width:min(494px,calc(100vw - 24px));box-sizing:border-box;overflow:hidden;
  background:var(--t-cream);color:var(--t-ink);border:2px solid var(--t-ink);border-radius:4px;
  box-shadow:6px 6px 0 rgba(20,14,6,.35);padding:26px 23px 18px;font-family:Archivo,system-ui,sans-serif;text-align:left}
#tour-card.t-mobile{left:12px;right:12px;bottom:12px;top:auto;width:auto}
#tour-card .t-bot{position:absolute;top:12px;right:12px;width:56px;height:auto;pointer-events:none}
#tour-card .t-prog{position:absolute;left:0;top:0;right:0;height:5px;background:rgba(43,33,20,.14)}
#tour-card .t-prog i{display:block;height:100%;width:0;background:var(--t-teal);transition:width .3s ease}
#tour-card .t-badge{display:inline-block;background:var(--t-tomato);color:var(--t-cream);border-radius:999px;
  padding:5px 14px;font:600 14px/1 "IBM Plex Mono",monospace;letter-spacing:.16em}
#tour-card .t-star{color:var(--t-tomato);font-size:21px;margin-left:10px}
#tour-card .t-title{display:inline-block;max-width:calc(100% - 64px);margin:13px 0 10px;padding:0 0 8px;border:0;border-bottom:2px dashed var(--t-mustard);
  background:none;font:700 19.5px/1.25 Archivo,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--t-ink)}
#tour-card .t-text{display:block;margin:0 0 10px;font-size:19px;line-height:1.55;color:var(--t-ink)}
#tour-card .t-link{display:inline-block;margin:0 0 10px;font:600 13px/1.4 "IBM Plex Mono",monospace;letter-spacing:.14em;
  color:var(--t-teal);text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
#tour-card .t-link:hover{color:var(--t-tomato)}
#tour-card .t-hint{margin:0 0 13px;font:600 13.5px/1.4 "IBM Plex Mono",monospace;letter-spacing:.16em;color:var(--t-tomato)}
#tour-card .t-btns{display:flex;flex-wrap:wrap;gap:10px}
#tour-card .t-btn{margin:0;padding:11px 16px;border:2px solid var(--t-ink);border-radius:3px;background:transparent;
  color:var(--t-ink);font:600 14px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
#tour-card .t-btn:hover{background:var(--t-ink);color:var(--t-cream)}
#tour-card .t-next{background:var(--t-mustard);border-color:var(--t-mustard);color:#221A0C}
#tour-card .t-next:hover{background:var(--t-ink);border-color:var(--t-ink);color:var(--t-cream)}
#tour-card .t-btn:focus-visible,#tour-launch:focus-visible,#tour-chip:focus-visible{outline:3px solid var(--t-teal);outline-offset:2px}

/* peek chip — the card collapses to this while the viewer inspects the real page */
#tour-chip{position:fixed;right:14px;bottom:14px;z-index:902;margin:0;padding:13px 18px;
  background:var(--t-cream);color:var(--t-ink);border:2px solid var(--t-ink);border-radius:999px;
  font:600 14px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;cursor:pointer;box-shadow:4px 4px 0 rgba(20,14,6,.3)}
.t-peek #tour-scrim,.t-peek #tour-frame{opacity:0}
.t-peek #tour-card{display:none}

/* motion: one short settle, one pulse on scrim click — nothing loops */
#tour-card.t-in{animation:t-in .35s ease-out}
#tour-card.t-pulse{animation:t-pulse .45s ease}
@keyframes t-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes t-pulse{0%,100%{transform:scale(1)}40%{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){
  #tour-scrim,#tour-frame,#tour-card .t-prog i{transition:none}
  #tour-card.t-in,#tour-card.t-pulse{animation:none}
}
.rm #tour-scrim,.rm #tour-frame,.rm #tour-card .t-prog i{transition:none}
.rm #tour-card.t-in,.rm #tour-card.t-pulse{animation:none}