/*
  justincook.dev · the shared navigation (one include, three variants)
  Adopt:  <link rel="stylesheet" href="nav/nav.css">
          <nav data-jc-nav="a|b|c" data-jc-current="02" data-jc-ground="light|dark"></nav>
          <script src="nav/nav.js" defer></script>
  A · the house         top strip, paper, name at left, the five sections in mono caps, current in red pen, the map at right
  B · the title screen  bottom bar, cream, the figure's head as the map, three zone words in print tones, walked counter
  C · the shelf         top strip, near-white, three tiny objects (current one lifted), five sections, the name at right
  Rules kept by every variant: no pills, chips, gradients, glow, emoji or icon fonts; every colour is a custom property
  with a fallback; focus is a 2 px ink outline offset 2 px; nothing moves unless the reader hovers, focuses or clicks.
  Hosts may override any --jc-* token on [data-jc-nav]; --jc-host-dark (set on :root) is the dark ground a bar sits on.
*/
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&family=Newsreader:ital,opsz,wght@1,6..72,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------- tokens ---------- */
.jc-nav{
  --jc-disp:'Bricolage Grotesque',system-ui,sans-serif;
  --jc-serif:'Newsreader',Georgia,serif;
  --jc-mono:'IBM Plex Mono',ui-monospace,monospace;
  --jc-h:56px; --jc-gutter:36px;
}
/* A · the house */
.jc-a{--jc-ground:#F3EEE4;--jc-ink:#17181A;--jc-ink2:#5E5A52;--jc-rule:#C9C3B6;--jc-pen:#D9482B;--jc-pen-text:#B8381D;--jc-panel:#FBF8F1}
.jc-a.jc-dark{--jc-ground:var(--jc-host-dark,#0B0B0C);--jc-ink:#F3EEE4;--jc-ink2:#A9A49B;--jc-rule:#3A3B3F;--jc-pen:#D9482B;--jc-pen-text:#F07A5E;--jc-panel:#141416}
/* B · the title screen */
.jc-b{--jc-h:56px;--jc-ground:#EFE7D3;--jc-ink:#14161C;--jc-ink2:#575140;--jc-rule:#14161C;--jc-hair:#CDBF9F;--jc-panel:#FBF6EA;
  --jc-zone-build:#B23A1C;--jc-zone-how:#136F55;--jc-zone-who:#835A00;
  --jc-fig-line:#14161C;--jc-fig-hair:#4A3326;--jc-fig-skin:#E6B089}
.jc-b.jc-dark{--jc-ground:var(--jc-host-dark,#0E1220);--jc-ink:#EFE7D3;--jc-ink2:#A3A9BD;--jc-rule:#EFE7D3;--jc-hair:#39405A;--jc-panel:#1A2033;
  --jc-zone-build:#FF6B4A;--jc-zone-how:#4CC9A6;--jc-zone-who:#F2B544;
  --jc-fig-line:#EFE7D3;--jc-fig-hair:#4A3326;--jc-fig-skin:#E6B089}
/* C · the shelf */
.jc-c{--jc-h:64px;--jc-ground:#F7F5F0;--jc-ink:#1B1B1D;--jc-ink2:#5A5650;--jc-rule:#DCD5C9;--jc-panel:#FFFFFF;
  --jc-walnut:#6B4A2B;--jc-edge:#1B1B1D;--jc-box:#D6C5A6;--jc-card:#FFFFFF;--jc-slate:#2B3138;--jc-slate-edge:#15191D;--jc-metal:#CFC8BB;
  --jc-sleeve:#ECE4D6;--jc-vinyl:#1B1B1D;--jc-label:#E8622A;--jc-lift:#1B1B1D}
.jc-c.jc-dark{--jc-ground:var(--jc-host-dark,#0B0B0C);--jc-ink:#F2EEE6;--jc-ink2:#A9A49B;--jc-rule:#2C2D30;--jc-panel:#141416;
  --jc-walnut:#9A7048;--jc-edge:#0B0B0C;--jc-slate:#3A424B;--jc-slate-edge:#8A939C;--jc-vinyl:#050506;--jc-lift:#F2EEE6}

/* ---------- the bar ---------- */
.jc-nav{position:fixed;left:0;right:0;top:0;z-index:1000;display:block;margin:0;padding:0;
  background:var(--jc-ground,#F3EEE4);color:var(--jc-ink,#17181A);
  font:400 11px/1 var(--jc-mono);-webkit-font-smoothing:antialiased;text-align:left;box-sizing:border-box}
.jc-nav *,.jc-nav *::before,.jc-nav *::after{box-sizing:border-box;margin:0;padding:0}
.jc-nav[data-jc-place="inline"]{position:relative;z-index:5}
.jc-nav[data-jc-place="inline"]:hover,.jc-nav[data-jc-place="inline"]:focus-within,.jc-nav.jc-has-panel{z-index:1001}
.jc-b{top:auto;bottom:0}
.jc-nav a{color:inherit;text-decoration:none;cursor:pointer}
.jc-nav button{all:unset;cursor:pointer;box-sizing:border-box}
.jc-nav ul{list-style:none}
.jc-nav a:focus-visible,.jc-nav button:focus-visible{outline:2px solid var(--jc-ink,#17181A);outline-offset:2px}
.jc-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.jc-in{position:relative;display:flex;align-items:center;height:var(--jc-h,56px);padding:0 var(--jc-gutter,36px);gap:0}
.jc-a{border-bottom:1px solid var(--jc-rule,#C9C3B6)}
.jc-c{border-bottom:1px solid var(--jc-rule,#DCD5C9)}
.jc-b{border-top:2px solid var(--jc-rule,#14161C)}

/* the section row (A and C): five names, mono caps, one moving underline */
.jc-secs{position:relative;display:flex;align-items:stretch;height:100%;gap:18px;flex:none}
.jc-sec{position:relative;display:flex;align-items:center;height:100%}
.jc-link{display:inline-flex;align-items:center;font:500 11px/1 var(--jc-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--jc-ink2,#5E5A52);white-space:nowrap}
.jc-link .jc-t{display:inline-block;padding:4px 0}
.jc-link:hover,.jc-sec.is-point>.jc-link{color:var(--jc-ink,#17181A)}
.jc-sec.is-current>.jc-link{color:var(--jc-ink,#17181A)}
.jc-a .jc-sec.is-current>.jc-link{color:var(--jc-pen-text,#B8381D)}
.jc-ul{position:absolute;left:0;top:0;width:0;height:1.5px;background:var(--jc-ink,#17181A);pointer-events:none;
  transition:transform .42s cubic-bezier(.2,.75,.25,1),width .42s cubic-bezier(.2,.75,.25,1);will-change:transform}
.jc-a .jc-ul{background:var(--jc-pen,#D9482B)}
.jc-b .jc-ul{height:3px;background:var(--jc-rule,#14161C)}
.jc-nav.jc-noanim .jc-ul,.jc-nav.jc-gsap .jc-ul{transition:none}

/* the sub-room dropdown (04 and 05 in A and C; every zone in B, opening upward) */
.jc-dd{position:absolute;left:-14px;top:100%;min-width:176px;padding:8px 6px;background:var(--jc-panel,#FBF8F1);
  border:1px solid var(--jc-ink,#17181A);display:none;z-index:3}
.jc-a .jc-dd,.jc-c .jc-dd{margin-top:1px}
.jc-sec.has-dd:hover>.jc-dd,.jc-sec.has-dd:focus-within>.jc-dd,.jc-sec.is-open>.jc-dd{display:block}
.jc-sec.is-shut>.jc-dd{display:none!important}
.jc-dd a{display:flex;align-items:baseline;gap:10px;padding:8px 8px;font:500 11px/1.2 var(--jc-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--jc-ink2,#5E5A52);white-space:nowrap}
.jc-dd a .jc-ix{color:var(--jc-ink2,#5E5A52);letter-spacing:0}
.jc-dd a:hover,.jc-dd a[aria-current]{color:var(--jc-ink,#17181A)}
.jc-dd a[aria-current] .jc-nm,.jc-dd a:hover .jc-nm{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.jc-a .jc-dd a[aria-current]{color:var(--jc-pen-text,#B8381D)}

/* the right-hand cluster */
.jc-r{display:flex;align-items:center;gap:16px;margin-left:auto;padding-left:24px;white-space:nowrap;flex:none}
.jc-cnt{font:400 11px/1 var(--jc-mono);color:var(--jc-ink2,#5E5A52);font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline}
.jc-roll{display:inline-block;position:relative;overflow:hidden;height:1.25em;line-height:1.25em;vertical-align:bottom;margin:0 .45em 0 0;color:var(--jc-ink,#17181A);font-weight:500}
.jc-roll>span{display:block;line-height:1.25em;text-align:center}
.jc-roll .jc-reel{display:block;will-change:transform}
.jc-roll .jc-reel.jc-rolling{transition:transform .5s cubic-bezier(.2,.75,.25,1)}
.jc-cnt .jc-cw{line-height:1.25em}
.jc-motion{font:400 11px/1 var(--jc-mono);color:var(--jc-ink2,#5E5A52);padding:4px 0}
.jc-motion .jc-opt{padding-bottom:2px;border-bottom:1px solid transparent}
.jc-motion .jc-opt.is-on{color:var(--jc-ink,#17181A);border-bottom-color:var(--jc-ink,#17181A)}
.jc-motion:hover{color:var(--jc-ink,#17181A)}

/* the "just the list" panel */
.jc-panel{position:absolute;right:var(--jc-gutter,36px);top:100%;margin-top:1px;width:320px;padding:18px 20px 16px;background:var(--jc-panel,#FBF8F1);
  border:1px solid var(--jc-ink,#17181A);color:var(--jc-ink,#17181A);z-index:4;white-space:normal}
.jc-panel[hidden]{display:none}
.jc-panel ol{list-style:none}
.jc-panel .jc-pw{font:400 11px/1 var(--jc-mono);color:var(--jc-ink2,#5E5A52);padding-bottom:10px;margin-bottom:2px;border-bottom:1px solid var(--jc-ink,#17181A)}
.jc-panel li{display:grid;grid-template-columns:30px 1fr;align-items:baseline;padding:7px 0;border-top:1px solid var(--jc-rule,#C9C3B6)}
.jc-panel li:first-child{border-top:0}
.jc-panel .jc-ix{font:500 11px/1 var(--jc-mono);color:var(--jc-ink2,#5E5A52)}
.jc-panel .jc-rooms{display:flex;flex-wrap:wrap;gap:4px 16px}
.jc-panel .jc-rooms a{font:800 15px/1.25 var(--jc-disp);letter-spacing:-.02em}
.jc-panel .jc-rooms a:hover,.jc-panel .jc-rooms a[aria-current]{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.jc-panel .jc-sn{display:block;width:100%;font:500 10.5px/1.3 var(--jc-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--jc-ink2,#5E5A52)}
.jc-panel .jc-rooms small{font:400 10.5px/1 var(--jc-mono);color:var(--jc-ink2,#5E5A52);margin-left:6px;letter-spacing:0}
.jc-panel .jc-home{display:inline-block;margin-top:12px;font:400 11px/1 var(--jc-mono);color:var(--jc-ink2,#5E5A52);border-bottom:1px solid var(--jc-rule,#C9C3B6);padding-bottom:2px}
.jc-panel .jc-home:hover{color:var(--jc-ink,#17181A);border-color:var(--jc-ink,#17181A)}
.jc-b .jc-panel{top:auto;bottom:100%;margin:0 0 2px}

/* ---------- A · the house ---------- */
.jc-a .jc-name{display:inline-flex;align-items:baseline;margin-right:30px;flex:none;font:800 20px/1 var(--jc-disp);letter-spacing:-.03em;color:var(--jc-ink,#17181A);white-space:nowrap}
.jc-a .jc-name i{font:italic 400 15px/1 var(--jc-serif);letter-spacing:0;color:var(--jc-ink2,#5E5A52);margin-left:8px}
.jc-a .jc-list{font:italic 400 15px/1 var(--jc-serif);color:var(--jc-ink,#17181A);border-bottom:1px solid var(--jc-rule,#C9C3B6);padding-bottom:1px}
.jc-a .jc-list:hover,.jc-a .jc-list[aria-expanded="true"]{border-bottom-color:var(--jc-ink,#17181A)}
.jc-a .jc-map{display:inline-flex;align-items:center;gap:8px;font:400 11px/1 var(--jc-mono);color:var(--jc-ink,#17181A)}
.jc-a .jc-map svg{width:18px;height:14px;stroke:var(--jc-ink,#17181A);fill:none;stroke-width:1.2;flex:none}
.jc-a .jc-map span{border-bottom:1px solid var(--jc-rule,#C9C3B6);padding-bottom:2px}
.jc-a .jc-map:hover span{border-bottom-color:var(--jc-ink,#17181A)}

/* ---------- B · the title screen ---------- */
.jc-b .jc-home{display:inline-flex;align-items:center;gap:10px;margin-right:40px;font:400 11px/1 var(--jc-mono);color:var(--jc-ink2,#575140);white-space:nowrap}
.jc-b .jc-home:hover{color:var(--jc-ink,#14161C)}
.jc-head{position:relative;display:inline-block;width:24px;height:18px;font-size:2px;flex:none}
.jc-head .jc-px{position:absolute;left:-1em;top:-1em;width:1em;height:1em;box-shadow:
  4em 1em 0 0 var(--jc-fig-line,#14161C),
  5em 1em 0 0 var(--jc-fig-line,#14161C),
  6em 1em 0 0 var(--jc-fig-line,#14161C),
  7em 1em 0 0 var(--jc-fig-line,#14161C),
  8em 1em 0 0 var(--jc-fig-line,#14161C),
  9em 1em 0 0 var(--jc-fig-line,#14161C),
  3em 2em 0 0 var(--jc-fig-line,#14161C),
  4em 2em 0 0 var(--jc-fig-hair,#4A3326),
  5em 2em 0 0 var(--jc-fig-hair,#4A3326),
  6em 2em 0 0 var(--jc-fig-hair,#4A3326),
  7em 2em 0 0 var(--jc-fig-hair,#4A3326),
  8em 2em 0 0 var(--jc-fig-hair,#4A3326),
  9em 2em 0 0 var(--jc-fig-hair,#4A3326),
  10em 2em 0 0 var(--jc-fig-line,#14161C),
  2em 3em 0 0 var(--jc-fig-line,#14161C),
  3em 3em 0 0 var(--jc-fig-hair,#4A3326),
  4em 3em 0 0 var(--jc-fig-hair,#4A3326),
  5em 3em 0 0 var(--jc-fig-hair,#4A3326),
  6em 3em 0 0 var(--jc-fig-hair,#4A3326),
  7em 3em 0 0 var(--jc-fig-hair,#4A3326),
  8em 3em 0 0 var(--jc-fig-hair,#4A3326),
  9em 3em 0 0 var(--jc-fig-hair,#4A3326),
  10em 3em 0 0 var(--jc-fig-hair,#4A3326),
  11em 3em 0 0 var(--jc-fig-line,#14161C),
  2em 4em 0 0 var(--jc-fig-line,#14161C),
  3em 4em 0 0 var(--jc-fig-hair,#4A3326),
  4em 4em 0 0 var(--jc-fig-hair,#4A3326),
  5em 4em 0 0 var(--jc-fig-hair,#4A3326),
  6em 4em 0 0 var(--jc-fig-hair,#4A3326),
  7em 4em 0 0 var(--jc-fig-hair,#4A3326),
  8em 4em 0 0 var(--jc-fig-hair,#4A3326),
  9em 4em 0 0 var(--jc-fig-hair,#4A3326),
  10em 4em 0 0 var(--jc-fig-hair,#4A3326),
  11em 4em 0 0 var(--jc-fig-line,#14161C),
  2em 5em 0 0 var(--jc-fig-line,#14161C),
  3em 5em 0 0 var(--jc-fig-hair,#4A3326),
  4em 5em 0 0 var(--jc-fig-skin,#E6B089),
  5em 5em 0 0 var(--jc-fig-skin,#E6B089),
  6em 5em 0 0 var(--jc-fig-skin,#E6B089),
  7em 5em 0 0 var(--jc-fig-skin,#E6B089),
  8em 5em 0 0 var(--jc-fig-skin,#E6B089),
  9em 5em 0 0 var(--jc-fig-skin,#E6B089),
  10em 5em 0 0 var(--jc-fig-hair,#4A3326),
  11em 5em 0 0 var(--jc-fig-line,#14161C),
  2em 6em 0 0 var(--jc-fig-line,#14161C),
  3em 6em 0 0 var(--jc-fig-skin,#E6B089),
  4em 6em 0 0 var(--jc-fig-skin,#E6B089),
  5em 6em 0 0 var(--jc-fig-line,#14161C),
  6em 6em 0 0 var(--jc-fig-skin,#E6B089),
  7em 6em 0 0 var(--jc-fig-skin,#E6B089),
  8em 6em 0 0 var(--jc-fig-line,#14161C),
  9em 6em 0 0 var(--jc-fig-skin,#E6B089),
  10em 6em 0 0 var(--jc-fig-skin,#E6B089),
  11em 6em 0 0 var(--jc-fig-line,#14161C),
  2em 7em 0 0 var(--jc-fig-line,#14161C),
  3em 7em 0 0 var(--jc-fig-skin,#E6B089),
  4em 7em 0 0 var(--jc-fig-skin,#E6B089),
  5em 7em 0 0 var(--jc-fig-skin,#E6B089),
  6em 7em 0 0 var(--jc-fig-skin,#E6B089),
  7em 7em 0 0 var(--jc-fig-skin,#E6B089),
  8em 7em 0 0 var(--jc-fig-skin,#E6B089),
  9em 7em 0 0 var(--jc-fig-skin,#E6B089),
  10em 7em 0 0 var(--jc-fig-skin,#E6B089),
  11em 7em 0 0 var(--jc-fig-line,#14161C),
  3em 8em 0 0 var(--jc-fig-line,#14161C),
  4em 8em 0 0 var(--jc-fig-skin,#E6B089),
  5em 8em 0 0 var(--jc-fig-skin,#E6B089),
  6em 8em 0 0 var(--jc-fig-skin,#E6B089),
  7em 8em 0 0 var(--jc-fig-skin,#E6B089),
  8em 8em 0 0 var(--jc-fig-skin,#E6B089),
  9em 8em 0 0 var(--jc-fig-skin,#E6B089),
  10em 8em 0 0 var(--jc-fig-line,#14161C),
  1em 9em 0 0 var(--jc-fig-line,#14161C),
  2em 9em 0 0 var(--jc-fig-line,#14161C),
  3em 9em 0 0 var(--jc-fig-line,#14161C),
  4em 9em 0 0 var(--jc-fig-line,#14161C),
  5em 9em 0 0 var(--jc-fig-skin,#E6B089),
  6em 9em 0 0 var(--jc-fig-skin,#E6B089),
  7em 9em 0 0 var(--jc-fig-skin,#E6B089),
  8em 9em 0 0 var(--jc-fig-skin,#E6B089),
  9em 9em 0 0 var(--jc-fig-line,#14161C),
  10em 9em 0 0 var(--jc-fig-line,#14161C),
  11em 9em 0 0 var(--jc-fig-line,#14161C),
  12em 9em 0 0 var(--jc-fig-line,#14161C)}
.jc-b .jc-secs{gap:30px}
.jc-zone{font:800 18px/1 var(--jc-disp);letter-spacing:-.025em;text-transform:none}
.jc-zone .jc-t{padding:6px 0}
.jc-b .jc-sec[data-zone="build"]>.jc-link{color:var(--jc-zone-build,#B23A1C)}
.jc-b .jc-sec[data-zone="how"]>.jc-link{color:var(--jc-zone-how,#136F55)}
.jc-b .jc-sec[data-zone="who"]>.jc-link{color:var(--jc-zone-who,#835A00)}
.jc-b .jc-dd{top:auto;bottom:100%;margin-bottom:2px}
.jc-b:not(.jc-fit-2) .jc-sec.is-current>.jc-dd{display:none!important}
.jc-subs{display:flex;align-items:center;gap:18px;margin-left:28px;padding-left:26px;border-left:1px solid var(--jc-hair,#CDBF9F);height:22px}
.jc-subs a{font:500 11px/1 var(--jc-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--jc-ink2,#575140);white-space:nowrap;padding:3px 0;border-bottom:1px solid transparent}
.jc-subs a:hover{color:var(--jc-ink,#14161C)}
.jc-subs a[aria-current]{color:var(--jc-ink,#14161C);border-bottom-color:var(--jc-ink,#14161C)}
.jc-b .jc-cnt{font-size:12px}

/* ---------- C · the shelf ---------- */
.jc-shelf{position:relative;display:flex;align-items:flex-end;gap:10px;height:40px;padding:0 6px;margin-right:34px;border-bottom:2px solid var(--jc-walnut,#6B4A2B);flex:none;align-self:center;margin-top:2px}
.jc-o{position:relative;display:block;height:28px;flex:none;transition:transform .18s ease-out,filter .18s ease-out}
.jc-o.is-lift{transform:translateY(-4px);filter:drop-shadow(1px 1px 0 var(--jc-lift,#1B1B1D))}
.jc-o:focus-visible{outline-offset:3px}
/* the card box: two index cards standing in a box */
.jc-o-box{width:32px}
.jc-o-box i{position:absolute;width:20px;height:13px;background:var(--jc-card,#FFFFFF);border:1px solid var(--jc-edge,#1B1B1D)}
.jc-o-box i:nth-child(1){left:4px;top:1px}
.jc-o-box i:nth-child(2){left:9px;top:5px}
.jc-o-box b{position:absolute;left:0;bottom:0;width:32px;height:15px;background:var(--jc-box,#D6C5A6);border:1px solid var(--jc-edge,#1B1B1D)}
/* the instrument case: a handle and a slate body with one latch */
.jc-o-case{width:40px}
.jc-o-case i{position:absolute;left:13px;top:0;width:14px;height:8px;border:2px solid var(--jc-slate,#2B3138);border-bottom:0;border-radius:3px 3px 0 0}
.jc-o-case b{position:absolute;left:0;bottom:0;width:40px;height:21px;background:var(--jc-slate,#2B3138);border:1px solid var(--jc-slate-edge,#15191D);border-radius:4px}
.jc-o-case b::after{content:"";position:absolute;left:17px;top:4px;width:6px;height:3px;background:var(--jc-metal,#CFC8BB)}
/* the record sleeve: a square sleeve with the record half out */
.jc-o-slv{width:42px}
.jc-o-slv i{position:absolute;left:15px;top:1px;width:26px;height:26px;border-radius:50%;background:var(--jc-vinyl,#1B1B1D)}
.jc-o-slv i::after{content:"";position:absolute;left:9px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--jc-label,#E8622A)}
.jc-o-slv b{position:absolute;left:0;top:0;width:28px;height:28px;background:var(--jc-sleeve,#ECE4D6);border:1px solid var(--jc-edge,#1B1B1D)}
.jc-c.jc-dark .jc-o-box b,.jc-c.jc-dark .jc-o-box i,.jc-c.jc-dark .jc-o-slv b{border-color:var(--jc-edge-dark,#6E6A62)}
.jc-c.jc-dark .jc-o-slv i{border:1px solid var(--jc-edge-dark,#6E6A62)}
.jc-c.jc-dark .jc-o-slv i::after{left:8px;top:8px}
.jc-c .jc-r{gap:26px}
.jc-c .jc-name{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.jc-c .jc-name a{font:800 20px/1 var(--jc-disp);letter-spacing:-.03em;color:var(--jc-ink,#1B1B1D)}
.jc-c .jc-list{font:400 11px/1 var(--jc-mono);color:var(--jc-ink2,#5A5650);border-bottom:1px solid var(--jc-rule,#DCD5C9);padding-bottom:2px}
.jc-c .jc-list:hover,.jc-c .jc-list[aria-expanded="true"]{color:var(--jc-ink,#1B1B1D);border-bottom-color:var(--jc-ink,#1B1B1D)}
.jc-c .jc-panel{top:100%}

/* ---------- embedded (inside home-b's television, ?tv=1 or any frame): no bar, and the room's own scrollbar stays
   hidden so the room fills the glass at its designed 1280 px; the room still scrolls by wheel and keys ---------- */
html.jc-embedded [data-jc-nav]{display:none!important}
html.jc-embedded{scrollbar-width:none}
html.jc-embedded::-webkit-scrollbar,html.jc-embedded body::-webkit-scrollbar{display:none}

/* ---------- motion: still ---------- */
html[data-motion="still"] .jc-nav *,html[data-motion="still"] .jc-nav *::before,html[data-motion="still"] .jc-nav *::after{transition:none!important}

/* ---------- narrower screens: the bar never scrolls sideways ----------
   nav.js measures the bar and steps it through these levels (cumulative) until everything fits:
   fit-1 tighter spacing, A drops "the house" · fit-2 A and C drop the counter (it stays in the list), B drops the room links
   fit-3 A and C drop the five names (the list carries them), B drops "the map" label (the head stays)
   fit-4 the bar wraps onto two rows */
.jc-fit-1 .jc-secs{gap:16px}
.jc-fit-1 .jc-r{gap:14px;padding-left:20px}
.jc-a.jc-fit-1 .jc-name i{display:none}
.jc-a.jc-fit-1 .jc-name{margin-right:26px}
.jc-b.jc-fit-1 .jc-home{margin-right:28px}
.jc-c.jc-fit-1 .jc-shelf{margin-right:24px}
.jc-a.jc-fit-2 .jc-cnt,.jc-c.jc-fit-2 .jc-cnt,.jc-b.jc-fit-2 .jc-subs{display:none!important}
.jc-a.jc-fit-3 .jc-secs,.jc-c.jc-fit-3 .jc-secs,.jc-b.jc-fit-3 .jc-home .jc-lb{display:none}
.jc-fit-4 .jc-in{flex-wrap:wrap;height:auto;min-height:var(--jc-h,56px);padding-top:12px;padding-bottom:12px;row-gap:12px}
.jc-fit-4 .jc-r{flex-wrap:wrap;gap:12px 16px;padding-left:0}
.jc-a.jc-fit-4 .jc-name{margin-right:16px;font-size:18px}
.jc-a.jc-fit-4 .jc-r,.jc-b.jc-fit-4 .jc-r{margin-left:0;width:100%;justify-content:space-between}
.jc-b.jc-fit-4 .jc-home{margin-right:18px}
.jc-b.jc-fit-4 .jc-secs{gap:14px}
.jc-b.jc-fit-4 .jc-zone{font-size:15px}
.jc-b.jc-fit-4 .jc-cnt{display:inline-flex!important}
.jc-c.jc-fit-4 .jc-shelf{margin-right:12px}
.jc-c.jc-fit-4 .jc-r{flex:1 1 0;min-width:0;margin-left:auto;justify-content:flex-end}
.jc-fit-4 .jc-panel{left:var(--jc-gutter,16px);right:var(--jc-gutter,16px);width:auto}
@media (max-width:640px){.jc-nav{--jc-gutter:16px}}