/* ============================================================================
   FOW TRAVEL — INTEGRATED 3D DISCOVERY · STYLES                (TEST SURFACE)
   Loads after disc_core.css (entry, dialog ground, LIST, radios) and reads the
   accepted tokens (--x-*, --fow-*). Two materials: the WORLD (dark table) and
   PAPER (the plaques, the compare plane, the page ghost).
   ============================================================================ */
.d3 {
  display: grid; overflow: hidden;
  grid-template-columns: minmax(0, 1fr) clamp(15.5rem, 18vw, 21rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head index" "stage index" "rail index";
  --d3-rail-h: 11.5rem;
  --d3-glass: rgba(20, 17, 13, .72);
  --d3-glass-2: rgba(20, 17, 13, .86);
  --d3-paper: #F5EFDF;
  --d3-paper-ink: #1E1A16;
  --d3-paper-ink-2: rgba(40, 32, 22, .72);
  --d3-paper-ink-3: rgba(60, 48, 30, .55);
}
.d3[hidden] { display: none; }
.d3.is-instant, .d3.is-instant * { transition-duration: 0s !important; animation-duration: 0s !important; }

/* ---------------------------------------------------------------- stage */
.d3-stage { grid-area: 1 / 1 / 4 / 2; position: relative; min-height: 0; background: #14110d; }
.d3-gl { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; touch-action: none; }
.d3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.d3-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.d3-nl, .d3-bl, .d3-al {
  position: absolute; left: 0; top: 0; transform: translate(-999px, -999px); will-change: transform;
  pointer-events: auto; cursor: pointer; white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, opacity 200ms ease;
}
/* the chapter tab's word, printed on the tab that sticks out of the fore-edge */
.d3-nl {
  display: inline-flex; align-items: baseline; gap: .45em; margin: -.7em 0 0 .2em;
  padding: .22em .55em .26em; border: 0; background: rgba(233, 223, 198, .92);
  color: rgba(58, 44, 26, .9); font: 600 var(--fow-type-micro) / 1.2 var(--fow-pub-meta-family); letter-spacing: var(--fow-track-instrument); text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.d3-nl span { color: rgba(140, 104, 50, .95); font-weight: 600; }
.d3-nl:hover { background: #F3ECD9; }
.d3-nl.is-on { background: var(--x-world-brass); color: var(--x-world); }
.d3-nl.is-on span { color: rgba(20, 17, 13, .75); }
.d3-nl.is-empty { opacity: .55; }
.d3-nl.is-off, .d3-bl.is-off, .d3-al.is-off { opacity: 0; pointer-events: none; }
/* the bundle's count: the sheets a stack holds, reachable in the rule and the index */
.d3-bl {
  display: inline-flex; align-items: baseline; gap: .5em; margin: .1em 0 0 -1.6em;
  padding: .2em .55em .24em; border: 1px solid rgba(197, 163, 95, .35); background: rgba(20, 17, 13, .66);
  color: var(--x-world-ink-2); font: 500 var(--fow-type-micro) / 1.2 var(--fow-pub-meta-family); letter-spacing: var(--fow-track-instrument); text-transform: uppercase;
}
.d3-bl b { color: var(--x-world-brass); font-weight: 600; font-size: var(--fow-type-small); }
.d3-bl:hover { color: var(--x-world-ink); border-color: var(--x-world-brass-2); }
/* the other books: the way into the Atlas */
.d3-al {
  display: inline-block; margin: -.8em 0 0 -.5em; padding: .22em .6em .26em; border: 1px solid rgba(197, 163, 95, .3); background: rgba(20, 17, 13, .6);
  color: var(--x-world-ink-2); font: 500 var(--fow-type-micro) / 1.2 var(--fow-pub-meta-family); letter-spacing: var(--fow-track-instrument); text-transform: uppercase; text-decoration: none;
}
.d3-al:hover { color: var(--x-world-ink); border-color: var(--x-world-brass); }

/* ---------------------------------------------------------------- head */
.d3-head {
  grid-area: head; position: relative; z-index: 2; align-self: start;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem 2rem; align-items: start;
  padding: .7rem 1.4rem .6rem 1.6rem; background: linear-gradient(to bottom, rgba(18, 15, 11, .78), rgba(18, 15, 11, .42));
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid rgba(255, 246, 226, .06);
}
.d3-head .disc-role { grid-column: 1; }
.d3-head .disc-back { grid-column: 1; padding: 0 0 .1rem; }
.d3-head .disc-back b { font-size: var(--fow-type-body-lg); }
.d3-controls { grid-column: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .9rem; align-items: baseline; max-width: 70rem; }
.d3-controls .disc-k { padding-top: .35em; }
.d3-controls__more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .1rem .9rem; align-items: baseline; opacity: .82; }
.d3-scopehost { display: inline-flex; align-items: baseline; gap: .6rem; margin-left: auto; }
.d3-scopehost .disc-k { font-size: var(--fow-type-micro); }
.d3-scopehost .disc-radio { font-size: var(--fow-type-micro); padding: .2em .5em; }
@media (min-width: 901px) {
  .d3 .d3-needs .disc-radio { font-size: var(--fow-type-small); padding: .3em .58em .32em; }
  .d3 .d3-topics .disc-radio { font-size: var(--fow-type-small); padding: .24em .5em .26em; }
  .d3 .d3-ol .disc-item__t { font-size: var(--fow-type-body-sm); }
}
.d3-controls__more .disc-radios { display: inline-flex; flex-wrap: wrap; }
.d3-controls__more .disc-radio { font-size: var(--fow-type-small); padding: .22em .55em .26em; }
.disc-radios.d3-needs, .disc-radios.d3-topics, .disc-radios.d3-scopes { display: flex; flex-wrap: wrap; gap: .25rem .2rem; }
.d3 .disc-radio, .d3 .disc-radios--row .disc-radio {
  display: inline-flex; width: auto; align-items: baseline; gap: .45em; padding: .34em .7em .36em; border: 1px solid transparent; background: none;
  color: var(--x-world-ink-2); font: 400 var(--fow-type-body-sm) / 1.2 var(--fow-pub-body-family); cursor: pointer; text-align: left;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 160ms var(--disc-out);
}
.d3 .disc-radio b { font-weight: 400; }
.d3 .disc-radio .disc-radio__n { font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-micro); color: var(--x-world-brass-2); letter-spacing: var(--fow-track-instrument); }
.d3 .disc-radio:hover { color: var(--x-world-ink); border-color: var(--x-world-rule); }
.d3 .disc-radio:active { transform: scale(.97); }
.d3 .disc-radio[aria-checked="true"], .d3 .disc-radios--row .disc-radio[aria-checked="true"] { color: var(--x-world); background: var(--x-world-brass); border-color: var(--x-world-brass); padding-left: .7em; }
.d3 .disc-radio[aria-checked="true"]::before { display: none; }
.d3 .disc-radios > .disc-radio:last-child { border-bottom-color: transparent; }
.d3 .disc-radio:disabled { opacity: .5; }
.d3 .disc-radio[aria-checked="true"] .disc-radio__n { color: rgba(20, 17, 13, .7); }
.d3 .disc-radio.is-empty { color: var(--x-world-ink-3); }
.d3 .disc-radio:disabled { cursor: default; }
.d3 .disc-radio:focus-visible { outline: 2px solid var(--x-world-brass); outline-offset: 2px; }
.d3-scopes .disc-radio { font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-small); letter-spacing: var(--fow-track-instrument); text-transform: uppercase; }

/* ---------------------------------------------------------------- index */
.d3-index {
  grid-area: index; position: relative; z-index: 2; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 1rem 1.2rem 1.4rem 1.2rem; border-left: 1px solid var(--x-world-rule); background: rgba(18, 15, 11, .8);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  display: grid; align-content: start; gap: .8rem;
}
.d3-state { font-size: var(--fow-type-small); }
.d3 .d3-ol .disc-item__go { padding: .55rem 0; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .1rem .6rem; }
.d3 .d3-ol .disc-item__g { width: 1.6rem; height: 1.6rem; margin-top: .05rem; }
.d3 .d3-ol .disc-item__t { font-size: var(--fow-type-body); }
.d3 .d3-ol .disc-item__meta { margin-top: .15rem; }
.d3 .d3-ol .disc-item.is-on .disc-item__go { background: rgba(197, 163, 95, .12); }
.d3 .d3-ol--rest .disc-item__go { opacity: .62; }
.d3 .d3-ol--rest .disc-item__go:hover, .d3 .d3-ol--rest .disc-item__go:focus-visible { opacity: 1; }
.d3-others summary { cursor: pointer; font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-small); letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; color: var(--x-world-ink-3); padding: .4rem 0; }
.d3-others summary:hover { color: var(--x-world-ink); }
.d3-others summary:focus-visible { outline: 2px solid var(--x-world-brass); outline-offset: 2px; }

/* ---------------------------------------------------------------- the rule */
.d3-rail {
  grid-area: rail; position: relative; z-index: 3; align-self: end;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem 0; align-items: stretch;
  padding: .5rem 1.2rem .55rem 1.6rem; background: linear-gradient(to top, rgba(18, 15, 11, .82), rgba(18, 15, 11, .56));
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-top: 1px solid rgba(255, 246, 226, .10);
  box-shadow: 0 -1px 0 rgba(255, 246, 226, .06) inset;
}
.d3-rail__h { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; }
.d3-rail__n { margin: 0; font-family: var(--fow-pub-title-family); font-weight: 400; color: var(--x-world-ink); line-height: 1; }
.d3-rail__n b { font-weight: 400; font-size: var(--fow-type-h2); letter-spacing: -.02em; }
.d3-rail__n span { font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-small); letter-spacing: var(--fow-track-instrument); text-transform: uppercase; color: var(--x-world-ink-3); }
.d3-rail__s { margin: 0; color: var(--x-world-brass); font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-small); letter-spacing: var(--fow-track-instrument); text-transform: uppercase; line-height: 1.35; }
.d3-strip { display: flex; gap: .5rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-snap-type: x proximity; padding: .1rem .2rem .4rem 0; }
.d3-strip__none { align-self: center; color: var(--x-world-ink-2); display: flex; gap: .6rem; align-items: baseline; }
.d3-group { display: flex; gap: .5rem; align-items: stretch; padding-left: .6rem; border-left: 1px solid var(--x-world-rule); }
.d3-group__h {
  writing-mode: vertical-rl; transform: rotate(180deg); border: 0; background: none; padding: .2rem 0; cursor: pointer;
  color: var(--x-world-ink-3); font: 600 var(--fow-type-micro) / 1 var(--fow-pub-meta-family); letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; white-space: nowrap;
  transition: color 150ms ease;
}
.d3-group__h:hover { color: var(--x-world-brass); }
.d3-group__h:focus-visible { outline: 2px solid var(--x-world-brass); outline-offset: 2px; }
.d3-tabw { position: relative; flex: 0 0 auto; width: 9.6rem; scroll-snap-align: center; display: grid; }
.d3-tab {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .05rem .55rem; align-content: start; height: 100%;
  padding: .55rem .7rem .6rem .6rem; border: 1px solid var(--x-world-rule); background: rgba(255, 246, 226, .03);
  color: var(--x-world-ink); text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, transform 160ms var(--disc-out);
}
.d3-tab:hover, .d3-tab.is-hover { background: rgba(255, 246, 226, .07); border-color: rgba(197, 163, 95, .45); }
.d3-tab:active { transform: scale(.985); }
.d3-tab:focus-visible { outline: 2px solid var(--x-world-brass); outline-offset: 2px; }
.d3-tabw.is-on .d3-tab { background: rgba(197, 163, 95, .16); border-color: var(--x-world-brass); }
.d3-tabw.is-cmp .d3-tab { box-shadow: 0 0 0 1px rgba(197, 163, 95, .5) inset; }
.d3-tab__g { grid-row: 1 / span 3; width: 1.5rem; height: 1.5rem; margin-top: .1rem; }
.d3-tab__g path { fill: none; stroke: var(--x-world-brass); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.d3-tab.is-test .d3-tab__g path { stroke-dasharray: 3 3; }
.d3-tab__k { grid-column: 2; font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-micro); letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; color: var(--x-world-ink-3); display: block; line-height: 1.35; }
.d3-tab__k i { font-style: normal; display: inline; } .d3-tab__k i::before { content: " · "; white-space: pre; }
.d3-tab__t { grid-column: 2; font-family: var(--fow-pub-body-family); font-weight: 400; font-size: var(--fow-type-body); line-height: 1.2; }
.d3-tab__pv { grid-column: 2; font-size: var(--fow-type-small); line-height: 1.35; color: var(--x-world-ink-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: .1rem; }
.d3-tab__m { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: baseline; margin-top: .3rem; padding-right: 4.6rem; font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-micro); letter-spacing: var(--fow-track-instrument); text-transform: uppercase; color: var(--x-world-ink-3); }
.d3-tab__m i { font-style: normal; }
.d3-tab__now { color: var(--x-world-ink); }
.d3-stamp { font-style: normal; color: var(--dw-hot, #f09678); border: 1px dashed currentColor; padding: .1em .4em; white-space: nowrap; }
.d3-stamp--ok { color: var(--x-world-ink-3); border-style: solid; border-color: var(--x-world-rule); }
.d3-tab__cmp {
  position: absolute; right: .5rem; bottom: .55rem; padding: .18em .5em; border: 1px solid var(--x-world-rule); background: rgba(20, 17, 13, .6);
  color: var(--x-world-ink-3); font: 600 var(--fow-type-micro) / 1 var(--fow-pub-meta-family); letter-spacing: var(--fow-track-instrument); text-transform: uppercase; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 140ms var(--disc-out);
}
.d3-tab__cmp:hover { color: var(--x-world-ink); border-color: var(--x-world-brass-2); }
.d3-tab__cmp:active { transform: scale(.95); }
.d3-tab__cmp[aria-pressed="true"] { background: var(--x-world-brass); border-color: var(--x-world-brass); color: var(--x-world); }
.d3-tab__cmp:focus-visible { outline: 2px solid var(--x-world-brass); outline-offset: 2px; }

/* ---------------------------------------------------------------- compare plane
   paper, rising over the rule from where the pinned sheets stand */
.d3-plane {
  grid-area: stage; position: relative; z-index: 3; align-self: end; justify-self: start;
  margin: 0 1.6rem 1rem 1.8rem; max-width: min(56rem, 100% - 3.4rem); max-height: 62%; overflow: auto;
  background: var(--d3-paper); color: var(--d3-paper-ink);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 2px 0 rgba(255, 253, 246, .5) inset;
  transform-origin: 50% 100%;
  transition: transform 240ms var(--disc-out), opacity 240ms var(--disc-out);
  @starting-style { opacity: 0; transform: translateY(12px) scale(.985); }
}
.d3-plane[hidden] { display: none; }
.d3-plane__h { display: flex; gap: 1.2rem; align-items: baseline; padding: .9rem 1.2rem .6rem; border-bottom: 1px solid rgba(60, 48, 30, .16); }
.d3-plane__h .disc-k { color: var(--d3-paper-ink-3); }
.d3-plane__hint { margin: 0; flex: 1; color: var(--d3-paper-ink-3); font-size: var(--fow-type-small); }
.d3-plane__clear, .d3-col__x { border: 0; background: none; padding: 0; font: inherit; color: var(--d3-paper-ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: .18em; font-size: var(--fow-type-small); }
.d3-plane__clear:hover, .d3-col__x:hover { color: var(--d3-paper-ink); }
.d3-plane__clear:focus-visible, .d3-col__x:focus-visible, .d3-col__t:focus-visible { outline: 2px solid var(--x-brass); outline-offset: 2px; }
.d3-plane__g { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(13rem, 1fr)); }
.d3-col { padding: .9rem 1.2rem 1.1rem; border-right: 1px solid rgba(60, 48, 30, .14); display: grid; align-content: start; gap: .35rem; }
.d3-col:last-child { border-right: 0; }
.d3-col.is-here { background: rgba(197, 163, 95, .10); }
.d3-col__h { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .6rem; align-items: start; padding-bottom: .5rem; border-bottom: 1px solid rgba(60, 48, 30, .16); margin-bottom: .3rem; }
.d3-col__g { width: 1.6rem; height: 1.6rem; } .d3-col__g path { fill: none; stroke: var(--x-brass); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.d3-col__t { color: inherit; text-decoration: none; font-family: var(--fow-pub-title-family); font-size: var(--fow-type-body-lg); line-height: 1.2; }
.d3-col__t:hover { text-decoration: underline; text-decoration-color: var(--x-brass); text-underline-offset: .18em; }
.d3-col__x { font-size: 1.1rem; line-height: 1; text-decoration: none; }
.d3-cell { display: grid; gap: .02rem; padding: .16rem 0; border-top: 1px solid rgba(60, 48, 30, .08); }
.d3-cell i { font-style: normal; font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-micro); letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; color: var(--d3-paper-ink-3); }
.d3-cell span { font-size: var(--fow-type-body-sm); line-height: 1.45; color: var(--d3-paper-ink-2); }
.d3-cell--lead span { font-size: var(--fow-type-body); color: var(--d3-paper-ink); }
.d3-cell--hot span { color: #b24e34; }
.d3-col.is-held .d3-cell--lead span { color: var(--d3-paper-ink-2); }

/* ---------------------------------------------------------------- the object */
.d3-object {
  grid-area: stage; position: absolute; z-index: 3; left: 0; top: 0; will-change: transform;
  width: 17.5rem; padding: .85rem 1rem .9rem 1.1rem;
  background: rgba(14, 12, 9, .8); border-left: 2px solid var(--x-world-brass);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  color: var(--x-world-ink); display: grid; gap: .3rem; align-content: start;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
  transition: opacity 200ms var(--disc-out);
  opacity: 0;
}
.d3-object.is-placed { opacity: 1; }
.d3-object::before { content: ""; position: absolute; left: -2px; top: 12px; width: 26px; height: 2px; background: var(--x-world-brass); transform: translateX(-26px); }
.d3-object.is-flip { border-left: 0; border-right: 2px solid var(--x-world-brass); }
.d3-object.is-flip::before { left: auto; right: -2px; transform: translateX(26px); }
.d3-object[hidden] { display: none; }
.d3-object__k { color: var(--x-world-brass); }
.d3-object__kind { margin: 0; font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-small); letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; color: var(--x-world-ink-3); display: flex; flex-wrap: wrap; gap: .5em; }
.d3-object__kind i, .d3-object__kind em { font-style: normal; } .d3-object__kind i::before, .d3-object__kind em::before { content: "·"; margin-right: .5em; } .d3-object__kind em { color: var(--x-world-brass); }
.d3-object__t { margin: 0; font-family: var(--fow-pub-title-family); font-weight: 400; font-size: var(--fow-type-h3); line-height: 1.16; letter-spacing: -.01em; }
.d3-object__line { margin: 0; color: var(--x-world-ink-2); }
.d3-object__pv { margin: .1rem 0 0; color: var(--x-world-ink-2); font-size: var(--fow-type-body-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.d3-object__pv i { display: block; font-style: normal; font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-micro); letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; color: var(--x-world-ink-3); margin-bottom: .2em; }
.d3-object__m { margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-micro); letter-spacing: var(--fow-track-instrument); text-transform: uppercase; color: var(--x-world-ink-3); }
.d3-object__m i { font-style: normal; }
.d3-object__why { color: var(--x-world-brass); }
.d3-object__acts { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .45rem; }
.d3-object__open {
  display: inline-flex; align-items: baseline; gap: .6em; padding: .45em .8em; background: var(--x-world-brass); color: var(--x-world); text-decoration: none;
  font-family: var(--fow-pub-body-family); font-size: var(--fow-type-body-sm); transition: transform 160ms var(--disc-out), background-color 150ms ease;
}
.d3-object__open b { font-weight: 500; } .d3-object__open i { font-style: normal; }
.d3-object__open:hover { background: #d4b46f; }
.d3-object__open:active { transform: scale(.97); }
.d3-object__open:focus-visible { outline: 2px solid var(--x-world-ink); outline-offset: 2px; }
.d3-object__cmp, .d3-object__down {
  border: 1px solid var(--x-world-rule); background: none; padding: .4em .65em; color: var(--x-world-ink-2); font: inherit; font-size: var(--fow-type-small); cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, transform 160ms var(--disc-out);
}
.d3-object__cmp:hover, .d3-object__down:hover { color: var(--x-world-ink); border-color: var(--x-world-brass-2); }
.d3-object__cmp:active, .d3-object__down:active { transform: scale(.97); }
.d3-object__cmp[aria-pressed="true"] { border-color: var(--x-world-brass); color: var(--x-world-brass); }
.d3-object__cmp:focus-visible, .d3-object__down:focus-visible { outline: 2px solid var(--x-world-brass); outline-offset: 2px; }
.d3-object__hint { margin: .6rem 0 0; font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-micro); letter-spacing: var(--fow-track-instrument); text-transform: uppercase; color: var(--x-world-ink-3); line-height: 1.5; }

/* ---------------------------------------------------------------- the ghost (handoff) */
.d3-ghost { position: absolute; inset: 0; z-index: 9; background: var(--fow-paper-cloud, #F7F3E7); color: var(--fow-paper-ink, #191818); opacity: 0; pointer-events: none; }
.d3-ghost[hidden] { display: none; }
.d3-ghost__bar { height: 88px; display: flex; align-items: center; gap: 2rem; padding: 0 var(--pub-pad, 3rem); background: var(--x-world); color: var(--x-world-ink-2); font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-label); letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; }
.d3-ghost__body { padding: 0 var(--pub-pad, 4.5rem); }
.d3-ghost__k { margin: 3.2rem 0 1.4rem; font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-label); letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; color: var(--fow-paper-ink-faint, #6b6459); }
.d3 .d3-ghost .d3-ghost__t { margin: 0; font-family: var(--fow-pub-title-family, var(--fow-font-editorial)); font-weight: 400; font-size: var(--fow-type-display); line-height: .98; letter-spacing: var(--fow-track-editorial-display); max-width: 14em; }
.d3 .d3-ghost .d3-ghost__l { margin: 1rem 0 0; font-family: var(--fow-pub-body-family, var(--fow-font-editorial)); font-size: var(--fow-type-h3); color: var(--fow-paper-ink-soft, #4b463f); }
.d3-ghost__s { margin: 2rem 0 0; font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-micro); letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; color: var(--fow-paper-brass-semantic, #8a6d2a); }

/* ---------------------------------------------------------------- no WebGL */
.d3.no-world .d3-stage::before { content: attr(data-nogl); position: absolute; inset: auto 1.8rem 1.2rem; color: var(--x-world-ink-3); font-size: var(--fow-type-small); }
.d3.no-world .d3-labels { display: none; }

/* ---------------------------------------------------------------- 3440 */
@media (min-width: 2200px) {
  .d3 { grid-template-columns: minmax(0, 1fr) clamp(24rem, 18vw, 32rem); --d3-rail-h: 13rem; font-size: 1.18rem; }
  .d3-head { padding: 1.6rem 2.4rem 0 2.6rem; }
  .d3-controls { max-width: 90rem; }
  .d3-tabw { width: 15rem; }
  .d3-rail { padding: 1rem 2rem 1.2rem 2.6rem; }
  .d3-object { width: 22rem; }
  .d3-plane { margin: 0 2.4rem 1.4rem 2.6rem; max-width: min(84rem, 100% - 5rem); }
  .d3-plane__g { grid-template-columns: repeat(var(--n, 1), minmax(20rem, 1fr)); }
}

/* ---------------------------------------------------------------- 390: still spatial
   the plate stays the first thing seen; the rule becomes a swipe deck under it;
   needs are a 2 × 3 block, not a strip; the index folds under the deck */
@media (max-width: 900px) {
  .d3 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 58vh auto auto; grid-template-areas: "head" "stage" "rail" "index"; overflow: auto; overscroll-behavior: contain; }
  .d3-stage { grid-area: stage; height: 58vh; min-height: 0; }
  .d3-controls__more { display: none; }
  .d3-head { grid-template-columns: auto minmax(0, 1fr); gap: .25rem .8rem; padding: .6rem .9rem .6rem; background: var(--x-world); border-bottom: 1px solid var(--x-world-rule); }
  .d3-head .disc-role { display: none; }
  .d3-head .disc-back { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: baseline; padding: 0; }
  .d3-head .disc-back b { font-size: var(--fow-type-body); }
  .d3-head .disc-role, .d3-head .disc-back, .d3-controls { grid-column: 1; }
  .d3-head .disc-back { padding: .1rem 0 .3rem; }
  .d3-head .disc-back b { font-size: var(--fow-type-body-lg); }
  .d3-controls { grid-template-columns: minmax(0, 1fr); gap: .3rem; max-width: none; }
  .d3-more { display: grid; gap: .3rem; }
  .d3-more summary { cursor: pointer; padding: .3rem 0; font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-small); letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; color: var(--x-world-brass); }
  .d3-more summary:focus-visible { outline: 2px solid var(--x-world-brass); outline-offset: 2px; }
  .d3-controls .disc-k { padding-top: .5em; }
  .d3 .disc-radios.d3-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; }
  .d3 .disc-radios.d3-needs > .disc-radio:first-child { grid-column: 1 / -1; padding: .28em .5em; }
  .d3 .disc-radios.d3-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
  .d3 .disc-radios.d3-scopes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
  .d3 .disc-radio, .d3 .disc-radios--row .disc-radio { width: 100%; padding: .34em .5em; border-color: var(--x-world-rule); justify-content: space-between; font-size: var(--fow-type-small); }
  .d3-scopes .disc-radio { font-size: var(--fow-type-micro); }
  .d3-index { border-left: 0; border-top: 1px solid var(--x-world-rule); overflow: visible; }
  .d3-rail { gap: .3rem; padding: .7rem 0 .8rem; }
  .d3-rail__h { gap: .2rem .8rem; padding: 0 1rem; }
  .d3-rail__h .disc-k { width: 100%; }
  .d3-strip { scroll-snap-type: x mandatory; padding: .2rem 1rem .5rem; gap: .6rem; }
  .d3-tabw { width: 78vw; scroll-snap-align: center; }
  .d3-group { padding-left: 0; border-left: 0; }
  .d3-group__h { writing-mode: horizontal-tb; transform: none; align-self: start; padding-top: .6rem; }
  .d3-object { position: absolute; left: .6rem; right: .6rem; top: auto; bottom: .6rem; transform: none !important; opacity: 1; width: auto; padding: .75rem .9rem .8rem; gap: .25rem; border-left: 0; border-top: 2px solid var(--x-world-brass); }
  .d3-object::before { display: none; }
  .d3-nl { font-size: .58rem; padding: .18em .4em; }
  .d3-object__t { font-size: var(--fow-type-h3); }
  .d3-object__pv, .d3-object__line { display: none; }
  .d3-object__hint { display: none; }
  .d3-plane { margin: 0 .5rem .5rem; max-width: none; max-height: 78%; }
  .d3-plane__g { grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .d3-col { border-right: 0; border-bottom: 1px solid rgba(60, 48, 30, .16); }
  .d3-col:last-child { border-bottom: 0; }
  .d3-plane__h { flex-wrap: wrap; gap: .3rem .8rem; padding: .7rem .9rem .5rem; }
  /* one instrument at a time on the phone: the compare plane takes the stage from the companion */
  .d3-plane:not([hidden]) ~ .d3-object { display: none; }
  .d3-nl { font-size: var(--fow-type-micro); padding: .2em .45em; }
  .d3-ghost__bar { height: 64px; }
  .d3-ghost__t { font-size: var(--fow-type-h1); }
}

/* ---------------------------------------------------------------- reduced motion
   travel is cut in the world itself (springs snap); here the DOM keeps only
   opacity / colour so state still reads */
@media (prefers-reduced-motion: reduce) {
  .d3-plane, .d3-object { transition: opacity 150ms ease; @starting-style { transform: none; } }
  .d3 .disc-radio, .d3-tab, .d3-tab__cmp, .d3-object__open, .d3-object__cmp, .d3-object__down { transition-property: color, border-color, background-color; }
  .d3-strip { scroll-behavior: auto; }
}