/* ---------- A11Y CONTRAST — small meta text must clear WCAG AA ---------- */
:root{--smoke2:#727F90}
/* ============================================================
   CANDLEWORK — shared world layer (cw.css)
   One stylesheet for the systems every room shares.
   ============================================================ */

/* ---------- control dock (top right) ---------- */
/* The Map and Sound controls used to stack vertically BELOW the header bar and
   21px from the right edge, while the header's own nav sits 53px in. Two menus,
   neither aligned to the other nor reading as one thing. Now a horizontal row
   on the header's line, sharing the nav's right inset. */
.cw-dock{position:fixed;top:3.4rem;right:3.3rem;z-index:60;display:flex;flex-direction:row;gap:.5rem;align-items:center}
.cw-btn{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:.5em .95em;border:1px solid rgba(255,255,255,.12);border-radius:20px;
  background:rgba(9,11,15,.78);color:var(--smoke,#8B97A3);cursor:pointer;transition:.25s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;line-height:1}
.cw-btn:hover{color:var(--white,#F2F6F4);border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.cw-btn.on{color:var(--accent,#17C687);border-color:rgba(var(--accent-rgb,23,198,135),.5)}
@media(max-width:820px){.cw-dock{top:auto;bottom:118px;right:.7rem}}

/* ---------- guided path (bottom right) ---------- */
.cw-path{position:fixed;right:1.3rem;bottom:44px;z-index:47;display:flex;align-items:center;gap:.85rem;
  padding:.7rem .9rem .7rem 1rem;border:1px solid rgba(255,255,255,.1);border-radius:14px;
  background:rgba(9,11,15,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.9);text-decoration:none;
  transform:translateY(14px);opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),border-color .3s}
.cw-path.in{opacity:1;transform:none}
.cw-path:hover{border-color:rgba(var(--accent-rgb,23,198,135),.45)}
.cw-path .cw-meta{display:flex;flex-direction:column;gap:.25rem}
.cw-path .cw-step{font-family:var(--mono,monospace);font-size:8.5px;letter-spacing:.2em;
  color:var(--smoke2,#586472);text-transform:uppercase}
.cw-path .cw-next{font-family:var(--disp,sans-serif);font-weight:700;font-size:.92rem;color:var(--white,#F2F6F4);letter-spacing:-.01em}
.cw-path .cw-arm{font-family:var(--mono,monospace);font-size:14px;color:var(--accent,#17C687);transition:transform .35s}
.cw-path:hover .cw-arm{transform:translateX(3px)}
.cw-path .cw-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.06);border-radius:0 0 14px 14px;overflow:hidden}
.cw-path .cw-bar i{display:block;height:100%;background:var(--accent,#17C687);opacity:.75;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.cw-path .cw-x{font-family:var(--mono,monospace);font-size:13px;color:var(--smoke2,#586472);padding:0 .1rem;cursor:pointer;background:none;border:none;transition:.2s}
.cw-path .cw-x:hover{color:var(--white,#F2F6F4)}
@media(max-width:820px){.cw-path{right:.7rem;bottom:38px;padding:.55rem .7rem}.cw-path .cw-next{font-size:.82rem;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* ---------- fullscreen 4D sitemap ---------- */
.cw-map{position:fixed;inset:0;z-index:9990;background:radial-gradient(130% 100% at 50% 40%,#0a0e14,#030405 70%);
  opacity:0;visibility:hidden;transition:opacity .75s ease,visibility .75s}
.cw-map.open{opacity:1;visibility:visible}
.cw-map canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:default}
.cw-map .cw-mtop{position:absolute;top:0;left:0;right:0;padding:1.6rem clamp(1.1rem,5vw,3rem);
  display:flex;align-items:baseline;gap:1rem;pointer-events:none}
.cw-map .cw-mtitle{font-family:var(--disp,sans-serif);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.5rem);
  letter-spacing:-.02em;color:var(--white,#F2F6F4)}
.cw-map .cw-msub{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.24em;
  color:var(--smoke2,#586472);text-transform:uppercase}
.cw-map .cw-mclose{position:absolute;top:1.3rem;right:clamp(1.1rem,5vw,3rem);z-index:2}
.cw-map .cw-mfoot{position:absolute;left:0;right:0;bottom:0;padding:1.4rem clamp(1.1rem,5vw,3rem);
  font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.14em;color:var(--smoke2,#586472);
  text-transform:uppercase;pointer-events:none;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.cw-map .cw-mfoot b{color:var(--accent,#17C687);font-weight:400}

/* ---------- shared mood FX layers (created if absent) ---------- */
.cw-fx-tint{position:fixed;inset:0;z-index:9;pointer-events:none;transition:backdrop-filter 1.4s ease,background 1.4s ease}
[data-mood="bull"] .cw-fx-tint{backdrop-filter:brightness(1.04) saturate(1.12);background:radial-gradient(60% 55% at 50% 32%,rgba(23,198,135,.05),transparent 72%)}
[data-mood="bear"] .cw-fx-tint{backdrop-filter:saturate(.87) brightness(.96);background:radial-gradient(85% 75% at 50% 14%,rgba(60,0,12,.1),transparent 70%)}
.cw-fx-dip{position:fixed;inset:0;z-index:9996;pointer-events:none;opacity:0}
.cw-fx-dip.bear{animation:cwdip 2.1s ease-out}
.cw-fx-dip.bull{animation:cwbloom 1.7s ease-out}
@keyframes cwdip{0%{opacity:0;background:radial-gradient(circle at 50% 25%,rgba(26,0,6,.95),rgba(0,0,0,.97))}9%{opacity:.92}55%{opacity:.38}100%{opacity:0}}
@keyframes cwbloom{0%{opacity:0;background:radial-gradient(circle at 50% 55%,rgba(23,198,135,.5),rgba(255,255,255,.18),transparent 75%)}14%{opacity:.55}100%{opacity:0}}
.cw-fx-particles{position:fixed;inset:0;z-index:9997;pointer-events:none}
.cw-fx-flash{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0}
.cw-fx-flash.bull{animation:cwfb 1.1s ease-out}
.cw-fx-flash.bear{animation:cwfr 1.3s ease-out}
@keyframes cwfb{0%{opacity:.5;background:radial-gradient(circle at 50% 60%,rgba(23,198,135,.6),transparent 70%)}100%{opacity:0}}
@keyframes cwfr{0%{opacity:.7;background:radial-gradient(circle at 50% 30%,rgba(240,68,62,.7),rgba(26,0,6,.55))}25%{opacity:.5}100%{opacity:0}}
.cw-fx-stamp{position:fixed;top:33%;left:0;right:0;text-align:center;z-index:9999;pointer-events:none;
  font-family:var(--disp,sans-serif);font-weight:700;font-size:clamp(2.6rem,13vw,10rem);letter-spacing:-.03em;opacity:0;line-height:1}
.cw-fx-stamp.bull{color:#17C687;text-shadow:0 0 60px rgba(23,198,135,.6);animation:cwsb 1.5s cubic-bezier(.2,.9,.2,1)}
.cw-fx-stamp.bear{color:#F0443E;text-shadow:0 0 60px rgba(240,68,62,.6);animation:cwsr 1.5s ease-out}
@keyframes cwsb{0%{opacity:0;transform:scale(.5) translateY(30px)}18%{opacity:.92;transform:scale(1.05) translateY(0)}42%{transform:scale(1)}100%{opacity:0;transform:scale(1.13) translateY(-24px)}}
@keyframes cwsr{0%{opacity:0;transform:scale(1.38)}10%{opacity:.92;transform:scale(1) translateX(-6px)}14%{transform:translateX(7px)}18%{transform:translateX(-5px)}22%{transform:translateX(3px)}100%{opacity:0;transform:scale(.9) translateY(26px)}}
main.cw-shake{animation:cwshake .62s cubic-bezier(.36,.07,.19,.97)}
@keyframes cwshake{10%{transform:translate(-7px,4px)}20%{transform:translate(8px,-5px)}30%{transform:translate(-9px,3px)}40%{transform:translate(7px,-4px)}50%{transform:translate(-6px,5px)}60%{transform:translate(6px,-3px)}70%{transform:translate(-4px,2px)}80%{transform:translate(3px,-2px)}100%{transform:none}}
main.cw-pump{animation:cwpump .85s cubic-bezier(.2,.9,.2,1)}
@keyframes cwpump{0%{transform:scale(1)}28%{transform:scale(1.012)}100%{transform:scale(1)}}

/* ---------- micro-life ---------- */
.cw-magnetic{transition:transform .3s cubic-bezier(.2,.8,.2,1)}

/* ---------- mobile / motion guards ---------- */
@media(max-width:760px){
  #bgfeed{display:none!important}
  .cw-fx-stamp{font-size:clamp(2rem,15vw,4rem)}
}
@media(prefers-reduced-motion:reduce){
  .cw-fx-dip,.cw-fx-stamp,.cw-fx-flash,main.cw-shake,main.cw-pump{animation:none!important;opacity:0!important}
  .cw-path{transition:none}
  .cw-magnetic{transition:none}
}

/* ---------- cookie consent ---------- */
.cw-consent{position:fixed;left:1.2rem;right:1.2rem;bottom:44px;z-index:9995;max-width:640px;margin:0 auto;
  padding:1.3rem 1.5rem;border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:rgba(9,11,15,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.95);
  transform:translateY(16px);opacity:0;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.cw-consent.in{opacity:1;transform:none}
.cw-consent p{font-family:var(--body,sans-serif);font-size:.9rem;color:var(--smoke,#8B97A3);line-height:1.6;margin:0 0 1rem}
.cw-consent p b{color:var(--white,#F2F6F4);font-weight:500}
.cw-consent a{color:var(--accent,#17C687)}
.cw-consent .cw-cbtns{display:flex;gap:.6rem;flex-wrap:wrap}
.cw-consent button{font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:.65em 1.2em;border-radius:20px;cursor:pointer;transition:.25s;border:1px solid rgba(255,255,255,.16);
  background:transparent;color:var(--smoke,#8B97A3)}
.cw-consent button:hover{color:var(--white,#F2F6F4);border-color:rgba(255,255,255,.32)}
.cw-consent button.yes{background:var(--accent,#17C687);border-color:var(--accent,#17C687);color:#04120C;font-weight:700}
@media(max-width:760px){.cw-consent{left:.6rem;right:.6rem;bottom:38px;padding:1.1rem}}

/* ---------- dock, when it lives inside the page header ---------- */
/* Fixed positioning put the dock on the header's line at a fixed right inset,
   so on any page whose nav reached that far the two overlapped — the Markets
   Room lost "Contested" and "Signal Room" behind the Map and Sound buttons.
   Inside the header it is a flex item like the nav, and they cannot collide. */
.cw-dock.cw-dock-inline{position:static;margin-left:auto;flex:none}
@media(max-width:820px){.cw-dock.cw-dock-inline{position:fixed;top:auto;bottom:118px;right:.7rem;margin-left:0}}

/* ---------- the rooms panel ---------- */
.cw-rooms{position:fixed;z-index:120;width:min(23rem,calc(100vw - 1.6rem));max-height:min(70vh,32rem);overflow:auto;
  padding:.85rem;border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:rgba(9,11,15,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.95)}
.cw-rooms-h{margin:.1rem .2rem .6rem;font-family:var(--mono,monospace);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--smoke2,#727F90)}
.cw-rooms a{display:block;padding:.6rem .65rem;border-radius:10px;text-decoration:none;transition:background .18s,color .18s}
.cw-rooms a b{display:block;font-family:var(--mono,monospace);font-size:12px;letter-spacing:.06em;
  color:var(--white,#F2F6F4);font-weight:500}
.cw-rooms a span{display:block;margin-top:.15rem;font-size:12px;line-height:1.45;color:var(--smoke2,#727F90)}
.cw-rooms a:hover,.cw-rooms a:focus-visible{background:rgba(255,255,255,.06)}
.cw-rooms a:hover b,.cw-rooms a:focus-visible b{color:var(--accent,#17C687)}
.cw-rooms a[aria-current="page"] b{color:var(--accent,#17C687)}
.cw-rooms a[aria-current="page"]{background:rgba(23,198,135,.07)}
.cw-rooms-home{margin-top:.4rem;border-top:1px solid rgba(255,255,255,.08);padding-top:.7rem!important;
  font-family:var(--mono,monospace);font-size:11px;letter-spacing:.08em;color:var(--smoke2,#727F90)!important}

/* ---------- the tape, now carrying terms ---------- */
.tapetrack-terms .tapeterm{background:none;border:0;padding:0 1.15rem;margin:0;cursor:pointer;
  font-family:inherit;font-size:inherit;letter-spacing:.05em;color:var(--smoke,#8B97A3);
  transition:color .18s;line-height:1}
.tapetrack-terms .tapeterm:hover,.tapetrack-terms .tapeterm:focus-visible{color:var(--accent,#17C687)}
.tapetrack-terms .tapeterm:focus-visible{outline:1px solid var(--accent,#17C687);outline-offset:3px;border-radius:3px}

/* ---------- the definition dialog ---------- */
.cw-termmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:1.2rem;background:rgba(3,4,6,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;transition:opacity .24s ease}
.cw-termmodal.in{opacity:1}
.cw-tm-card{position:relative;width:min(30rem,100%);padding:1.7rem 1.6rem 1.5rem;
  border:1px solid rgba(255,255,255,.14);border-radius:18px;
  background:linear-gradient(165deg,rgba(16,19,25,.99),rgba(9,11,15,.99));
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95);
  transform:translateY(10px) scale(.985);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.cw-termmodal.in .cw-tm-card{transform:none}
.cw-tm-x{position:absolute;top:.75rem;right:.85rem;background:none;border:0;cursor:pointer;
  font-size:14px;line-height:1;color:var(--smoke2,#727F90);padding:.35rem;border-radius:6px}
.cw-tm-x:hover,.cw-tm-x:focus-visible{color:var(--white,#F2F6F4)}
.cw-tm-k{margin:0;font-family:var(--mono,monospace);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent,#17C687)}
.cw-tm-card h3{margin:.45rem 0 .7rem;font-size:1.5rem;line-height:1.15;color:var(--white,#F2F6F4)}
.cw-tm-d{margin:0;font-size:15px;line-height:1.65;color:var(--smoke,#8B97A3)}
.cw-tm-more{display:inline-block;margin-top:1.15rem;font-family:var(--mono,monospace);font-size:11px;
  letter-spacing:.1em;color:var(--accent,#17C687);text-decoration:none}
.cw-tm-more:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .cw-termmodal,.cw-tm-card{transition:none}
  .tapetrack-terms{animation:none}
}

/* ---------- the header has to out-rank the page ----------
   The front door sets `header, main, footer { position: relative; z-index: 5 }`.
   That gives <header> its own stacking context, which caps the fixed .masthead
   inside it at 5 no matter that the masthead asks for 50 — and <main> is also 5
   and comes later in the DOM, so it wins the tie. The hero canvas inside <main>
   was therefore painted over the entire top bar, and nothing in it could be
   clicked: not the nav, not Map, not Sound, not Rooms. They were all visible and
   all inert.

   This stylesheet is linked after that rule, so an equal-specificity selector
   here wins on document order. 60 clears <main> and stays well under the shared
   404 strip at 99999. On the room pages the bar IS the <header> and sits in the
   root stacking context already, where this changes nothing. */
header { z-index: 60; }

/* ---------- the rooms, as a row under the header ----------
   The rooms used to be reachable two ways and both asked you to go looking:
   the guided-path card in the corner names ONE next room, and the Rooms button
   tells you nothing until it is pressed. Neither shows that there are twelve
   rooms or what they are. This row is always on screen, names every one, and
   marks the one you are in. */
.cw-roomsbar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 59;                       /* under the header, over the page */
  display: flex;
  gap: .15rem;
  align-items: center;
  padding: .38rem clamp(.6rem, 3vw, 3rem);
  background: linear-gradient(180deg, rgba(6, 7, 9, .93), rgba(6, 7, 9, .74));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;             /* the row is short; a bar would dominate */
}
.cw-roomsbar::-webkit-scrollbar { display: none; }
.cw-roomsbar a {
  flex: 0 0 auto;
  padding: .32rem .6rem;
  border-radius: 6px;
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--smoke2, #727F90);
  text-decoration: none;
  transition: color .18s, background-color .18s;
}
.cw-roomsbar a:hover,
.cw-roomsbar a:focus-visible { color: var(--white, #F2F6F4); background: rgba(255, 255, 255, .06); }
.cw-roomsbar a.on {
  color: var(--accent, #17C687);
  background: rgba(var(--accent-rgb, 23, 198, 135), .1);
}
/* A dot on the room you are in, so it reads at a glance and not only by hue. */
.cw-roomsbar a.on::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin-right: .45rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

/* No body padding is added for this row, for two reasons. strip.css is linked
   AFTER this sheet, so its `body { padding-top: ... !important }` wins anyway —
   the rule I first wrote here computed to 34px and did nothing. And it is not
   needed: every hero in this world already starts well below the header, so the
   row overlays background rather than content. Measured on the front door, the
   glossary and the markets room — the first heading sits 70 to 160px below the
   row's lower edge on each. --cw-bar is still published on <html> for anything
   that needs to know the row's height. */

@media (max-width: 760px) {
  .cw-roomsbar { padding-block: .3rem; }
  .cw-roomsbar a { font-size: 10px; padding: .28rem .5rem; }
}
@media print { .cw-roomsbar { display: none; } }