/* Chrome — stacking order, scope controls, nav, side rail */

/* =========================================================
   LAYERING
   scope sits at -1, above the html background, below content.
   Flow containers are explicitly lifted; fixed UI keeps its own
   stacking and is never given position:relative.
   ========================================================= */
#scopeLayer{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;
}
#scopeLayer canvas{width:100%;height:100%;display:block;}
/* The graticule is graph paper now rather than a CRT overlay, and the
   scanlines are gone with the phosphor — they were an artefact of a
   screen, and there is no screen here any more. */
#scopeLayer .grat{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,var(--fill-2) 0 1px,transparent 1px 90px),
    repeating-linear-gradient(180deg,var(--fill-2) 0 1px,transparent 1px 90px);
  mask-image:radial-gradient(ellipse at center,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 78%);
}
#scopeLayer .scan{display:none;}
body > nav, .hero, section, footer{position:relative;z-index:1;}

/* ---- scope control pill (bottom-left, clear of the side rail) ---- */
.scope-ctl{
  position:fixed;left:22px;bottom:22px;z-index:70;
  display:flex;align-items:center;gap:10px;
  background:rgba(22,17,15,.9);backdrop-filter:blur(12px);
  border:1px solid rgba(227,211,179,.16);border-radius:12px;
  padding:10px 14px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.85);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),
             padding .3s var(--ease),border-radius .3s var(--ease),
             background .3s var(--ease);
}
.scope-ctl.show{opacity:1;transform:translateY(0);pointer-events:auto;}
/* the controls proper — collapsing hides this, not the whole pill */
.sc-body{display:flex;align-items:center;gap:14px;}
@media(max-width:700px){
  .scope-ctl{left:50%;transform:translate(-50%,12px);bottom:14px;gap:8px;padding:8px 11px;}
  .scope-ctl.show{transform:translate(-50%,0);}
  .sc-body{gap:10px;}
}
.sc-group{display:flex;flex-direction:column;align-items:center;gap:6px;}
.sc-cap{
  font-family:'Courier Prime',monospace;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--manila-dim);line-height:1;white-space:nowrap;
}
.sc-chips{display:flex;gap:5px;}
.sc-chip{
  width:28px;height:24px;display:flex;align-items:center;justify-content:center;
  background:rgba(227,211,179,.05);border:1px solid rgba(227,211,179,.18);border-radius:5px;
  color:var(--manila-dim);font-size:13px;line-height:1;padding:0;
  transition:all .22s var(--ease);
}
.sc-chip:hover{border-color:rgba(227,211,179,.45);color:var(--manila);}
.sc-chip.on{
  background:var(--phosphor);border-color:var(--phosphor);color:#0B1A10;
  box-shadow:0 0 10px rgba(95,227,160,.45);
}
.sc-knob{
  width:30px;height:30px;border-radius:50%;position:relative;touch-action:none;padding:0;
  background:linear-gradient(180deg,#3E362E,#221C18);
  border:1px solid rgba(227,211,179,.22);cursor:grab;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.14);
}
.sc-knob:active{cursor:grabbing;}
.sc-knob .ind{
  position:absolute;top:3px;left:50%;width:2px;height:8px;border-radius:2px;
  background:var(--phosphor);box-shadow:0 0 6px var(--phosphor);
  transform-origin:50% 12px;transform:translateX(-50%) rotate(0deg);
}
.sc-div{width:1px;align-self:stretch;background:rgba(227,211,179,.14);}

/* =========================================================
   NAV
   ========================================================= */
/* Scoped to the page's own header. As a bare `nav` selector this styled
   every <nav> in the document — including small link groups inside
   content, which then rendered as a sticky dark bar. */
body > nav{
  position:sticky;top:0;z-index:60;background:var(--chrome-bg);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);
  padding:14px 0;
}
body > nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;line-height:1;}
/* Name and subtitle sit in one flex item and flow as ordinary inline text,
   so they share a baseline. As two separate items each was centred on its
   own box, and since they're different sizes the baselines landed ~1.6px
   apart — which is exactly what read as "off centre". */
.brand-text{white-space:nowrap;}
.brand .full{color:var(--manila-dim);font-size:12px;}
.brand .disc{
  width:18px;height:18px;border-radius:50%;
  background:repeating-radial-gradient(circle at center,#0b0908 0 2px,#241d19 2px 4px);
  position:relative;flex-shrink:0;will-change:transform;
}
.brand .disc::after{
  content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;
  background:var(--oxblood);transform:translate(-50%,-50%);
}
/* Mono caps in a bordered pill — the same language as the labels
   printed on the gear. Replaces the underline-on-hover, which read as a
   web link rather than as part of the instrument. */
.nav-links{display:flex;gap:7px;font-family:'Courier Prime',monospace;font-size:11px;line-height:1;}
.nav-links a{
  position:relative;padding:7px 13px;border-radius:100px;
  border:1px solid var(--rule);color:var(--manila-dim);
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.nav-links a:hover{
  color:var(--manila);border-color:var(--manila-soft);background:var(--fill-2);
}
/* The pill for the section you are actually in takes that section's
   colour. The nav is fixed and the page underneath it is not, so without
   this the one permanently visible piece of furniture is also the one
   piece that never agrees with anything. */
.nav-links a.is-here{
  color:var(--now-sec);
  border-color:color-mix(in srgb, var(--now-sec) 40%, transparent);
  background:color-mix(in srgb, var(--now-sec) 9%, transparent);
}
/* On a phone the links don't fit next to the name — five of them ran off
   the right edge and Contact was unreachable. Rather than dropping any,
   the row becomes a scrollable strip: it still sits right-aligned when
   there's room, and swipes when there isn't. `safe flex-end` is the part
   that matters — plain flex-end would push the overflow off the start
   where it can't be scrolled back to. */
@media(max-width:900px){
  body > nav .wrap{gap:12px;}
  .brand{flex-shrink:0;}
  .brand span.full{display:none;}
  .nav-links{
    flex:1;min-width:0;
    justify-content:safe flex-end;
    gap:6px;font-size:10px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    /* the left padding matches the fade below, so at rest the first link
       sits clear of it and only overflowing content gets softened */
    padding:2px 0 3px 16px;
    mask-image:linear-gradient(90deg,transparent 0,#000 16px);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px);
  }
  .nav-links::-webkit-scrollbar{display:none;}
  .nav-links a{flex-shrink:0;white-space:nowrap;}
}
@media(max-width:400px){
  .nav-links{gap:5px;font-size:9.5px;}
  .nav-links a{padding:6px 10px;}
}

/* Between the strip breakpoint and full width the pills fit, but
   only just — this keeps them off the right edge. */
@media(min-width:901px) and (max-width:1080px){
  .nav-links{gap:5px;}
  .nav-links a{padding:7px 10px;letter-spacing:.1em;}
}

/* side rail */
.side-rail{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;
}
@media(max-width:1160px){.side-rail{display:none;}}
.side-rail .rail-track{width:2px;height:160px;background:var(--rule);border-radius:2px;position:relative;}
.side-rail .rail-head{
  position:absolute;left:50%;top:0;width:11px;height:11px;border-radius:50%;
  background:var(--now-sec);transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--now-sec) 18%, transparent);
  transition:background .5s var(--ease),box-shadow .5s var(--ease);
}
.side-rail .rail-label{
  font-family:'Courier Prime',monospace;font-size:9.5px;letter-spacing:.18em;
  color:var(--manila-dim);writing-mode:vertical-rl;
}

/* --- oscilloscope controls: wider chip row with icon shapes --- */
.sc-chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:210px;}
.sc-chip{
  width:26px;height:22px;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.sc-chip svg{width:15px;height:11px;display:block;}
.sc-chip svg path,.sc-chip svg polyline{
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.sc-toggle{
  min-width:34px;height:22px;padding:0 7px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(227,211,179,.05);border:1px solid rgba(227,211,179,.18);
  color:var(--manila-dim);font-family:'Courier Prime',monospace;
  font-size:9px;letter-spacing:.08em;line-height:1;
  transition:all .22s var(--ease);
}
.sc-toggle:hover{border-color:rgba(227,211,179,.45);color:var(--manila);}
.sc-toggle.on{
  background:var(--phosphor);border-color:var(--phosphor);color:#0B1A10;
  box-shadow:0 0 10px rgba(95,227,160,.45);
}
@media(max-width:700px){
  .sc-chips{max-width:150px;}
  .scope-ctl{max-width:calc(100vw - 24px);}
  .sc-body{flex-wrap:wrap;justify-content:center;}
}

/* =========================================================
   MINIMIZE HANDLE
   Collapsed, the pill shrinks to a single 30px dot with a
   waveform on it. It keeps the .show class, so it still only
   exists while the hero (and therefore the scope) is on screen.
   ========================================================= */
.sc-min{
  width:26px;height:26px;flex-shrink:0;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;position:relative;
  background:rgba(227,211,179,.05);
  border:1px solid rgba(227,211,179,.18);
  color:var(--manila-dim);
  transition:color .22s var(--ease),border-color .22s var(--ease),
             background .22s var(--ease),transform .22s var(--ease);
}
.sc-min:hover{border-color:rgba(95,227,160,.55);color:var(--phosphor);}
.sc-min:active{transform:scale(.92);}
.sc-min-ico{
  position:absolute;width:15px;height:11px;display:block;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.sc-min-ico path{
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
/* expanded: chevron (click to tuck away) — collapsed: waveform (click to open) */
.sc-ico-wave{opacity:0;transform:scale(.7);}
.sc-ico-chev{opacity:1;transform:scale(1);}
.scope-ctl.is-min .sc-ico-wave{opacity:1;transform:scale(1);}
.scope-ctl.is-min .sc-ico-chev{opacity:0;transform:scale(.7);}

.scope-ctl.is-min{
  gap:0;padding:5px;border-radius:50%;
  background:rgba(22,17,15,.72);
}
.scope-ctl.is-min .sc-body{display:none;}
.scope-ctl.is-min .sc-min{
  width:30px;height:30px;
  border-color:rgba(95,227,160,.30);color:rgba(95,227,160,.75);
  background:rgba(95,227,160,.07);
}
.scope-ctl.is-min .sc-min:hover{
  border-color:rgba(95,227,160,.7);color:var(--phosphor);
  background:rgba(95,227,160,.14);
}
/* a slow phosphor breath so the dot reads as "there's something here" */
.scope-ctl.is-min .sc-min::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(95,227,160,.35);
  animation:scMinPing 3.6s ease-out infinite;
}
@keyframes scMinPing{
  0%{transform:scale(.85);opacity:0;}
  25%{opacity:.5;}
  100%{transform:scale(1.35);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .scope-ctl.is-min .sc-min::after{display:none;}
}

/* Collapsed on a phone, the dot tucks into the bottom-right corner so it
   sits clear of anything in the middle of the hero. */
@media(max-width:700px){
  .scope-ctl.is-min{left:auto;right:14px;transform:translateY(12px);}
  .scope-ctl.is-min.show{transform:translateY(0);}

  /* Expanded on a phone the controls wrap onto several rows, so the handle
     comes out of the flow and clips onto the top-right corner of the pill
     instead of eating a column beside them. */
  .scope-ctl:not(.is-min){padding-top:14px;}
  .scope-ctl:not(.is-min) .sc-min{
    position:absolute;top:-11px;right:-7px;width:24px;height:24px;
    background:rgba(22,17,15,.97);border-color:rgba(227,211,179,.3);
    color:var(--manila);
    box-shadow:0 4px 12px -4px rgba(0,0,0,.8);
  }
  .scope-ctl:not(.is-min) .sc-min-ico{width:13px;height:10px;}
}

/* =========================================================
   THE SCOPE CONTROL — a silver-face panel, not a black box

   It used to be a dark pill with a blur behind it, which on a warm
   paper page reads as a floating browser widget rather than as part of
   the equipment. It is now a small brushed-aluminium control panel with
   engraved labels, in the same material as the receiver faceplate and
   the turntable plinth — so it belongs to the room instead of hovering
   over it.
   ========================================================= */
/* Every colour in this block is a literal on purpose. The panel is
   machined aluminium in both colour modes — it does not flip — so a
   token like --rule-strong (dark ink on paper, light ink in dark mode)
   would turn its edges into 30% white on light silver and the whole
   control would lose every border it has. */
.scope-ctl{
  background:linear-gradient(180deg,#EAEDF0 0%,#D2D6DA 22%,#BCC0C5 62%,#A6AAB0 100%);
  border:1px solid rgba(26,26,23,.26);
  box-shadow:
    0 18px 34px -16px rgba(40,34,24,.55),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(0,0,0,.22);
  color:var(--engrave);
  backdrop-filter:none;
}
.scope-ctl::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--brushed);opacity:.4;
}
.scope-ctl > *{position:relative;z-index:1;}
.sc-cap{color:var(--engrave-dim);}
.sc-chip,.sc-toggle,.sc-min{
  color:var(--engrave-dim);
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(0,0,0,.06));
  border-color:rgba(26,26,23,.30);
}
.sc-chip:hover,.sc-toggle:hover{color:var(--engrave);border-color:rgba(26,26,23,.55);}
.sc-chip.on,.sc-toggle.on{
  background:#1D5560;border-color:#123B44;color:#EAF7F3;
  box-shadow:0 0 10px rgba(29,85,96,.4);
}
.sc-knob{
  background:linear-gradient(180deg,#7C8188,#3C4045);
  border-color:rgba(26,26,23,.4);
}
.sc-knob .ind{background:#FFD9A6;box-shadow:0 0 6px rgba(255,217,166,.9);}
.sc-div{background:rgba(26,26,23,.26);}
.sc-min:hover{border-color:#1D5560;color:#1D5560;}
.scope-ctl.is-min{
  background:linear-gradient(180deg,#EAEDF0,#B7BBC1);
}
.scope-ctl.is-min .sc-min{
  border-color:rgba(29,85,96,.45);color:#1D5560;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(29,85,96,.1));
}
.scope-ctl.is-min .sc-min:hover{border-color:#1D5560;background:rgba(29,85,96,.16);}
.scope-ctl.is-min .sc-min::after{border-color:rgba(29,85,96,.4);}
@media(max-width:700px){
  .scope-ctl:not(.is-min) .sc-min{
    background:linear-gradient(180deg,#EAEDF0,#C2C6CB);
    border-color:rgba(26,26,23,.35);color:var(--engrave);
  }
}

/* The trace is a watermark behind the hero. On a wide screen the text
   column only covers part of it; on a phone every line of body copy sits
   on top of it, so it drops back further. Readability first. */
@media(max-width:700px){
  #scopeLayer{opacity:.55;}
  #scopeLayer .grat{opacity:.5;}
}