/* S-4: the private gear page. Loaded after compact.css, so the site's header,
   star chart, fonts, paper cards, label tapes and the AISLE 51 sign all come
   from the real stylesheet. This file only adds the mountain and its bays.

   After Bob Lazar's account: hangar doors set flush into the base of a ridge
   at Papoose Lake, sloped to match the mountainside and coated in sand-coloured
   texture so they disappear into the rock. */

:root {
  --rock-1: #7d5e41; --rock-2: #634631; --rock-3: #463122; --rock-4: #2a1d14;
  --blotch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .014' numOctaves='5' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .08 0 0 0 0 .05 0 0 1.4 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --sand: #c9a679; --sand-2: #b08c60; --lake: #d9c7a3; --lamp: #fff1c4;
  /* fractal noise, tinted to sandstone: the mountain's surface and the doors' coating */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 .16 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --strata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .06' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .14 0 0 0 0 .09 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}

.s4-head { text-align: center; }
.s4-head .scrawl { max-width: 760px; margin: 10px auto 0; }
.s4-sign { margin-bottom: 40px; }
.s4-sign .as-num { letter-spacing: .14em; }

/* ------------------------------------------------------------ the range */
.range { position: relative; margin: 30px 0 0;
  /* the site's main column clips overflow, so the range fades into the night at both ends */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.peaks { display: block; width: 100%; height: clamp(150px, 20vw, 290px); }
.peaks .far  { fill: #4a2f5e; }
.peaks .mid  { fill: #6b4a43; }
.peaks .near { fill: var(--rock-1); }
.peaks .mid  { fill: #5c3f3e; }

/* the mountain face the hangars are cut into */
.slope {
  position: relative; margin-top: -2px; padding: 34px clamp(14px, 3vw, 40px) 60px;
  background:
    var(--grain),
    repeating-linear-gradient(112deg, transparent 0 140px, rgba(30, 20, 12, .16) 140px 142px, transparent 142px 230px),
    repeating-linear-gradient(68deg, transparent 0 190px, rgba(30, 20, 12, .12) 190px 192px, transparent 192px 310px),
    radial-gradient(60% 40% at 20% 30%, rgba(255, 210, 160, .10), transparent 70%),
    radial-gradient(50% 40% at 80% 60%, rgba(0, 0, 0, .18), transparent 70%),
    var(--strata),
    var(--blotch),
    linear-gradient(180deg, var(--rock-1) 0%, var(--rock-2) 40%, var(--rock-3) 85%, var(--rock-4) 100%);
  background-size: 220px 220px, auto, auto, auto, auto, 600px 300px, 900px 600px, auto;
  box-shadow: inset 0 18px 30px -18px rgba(0,0,0,.45);
}

.bays {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 46px 30px;
}

/* ------------------------------------------------------------ one bay */
.bay { display: flex; flex-direction: column; align-items: center; min-width: 0;
  animation: bay-in .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 80ms); }
.bay:nth-child(3n+2) { margin-top: 26px; }
.bay:nth-child(4n+3) { margin-top: -10px; }
.bay:nth-child(5n)   { margin-top: 38px; }
@keyframes bay-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* the cut: a sloped trapezoid opening in the rock, thick sand-coated frame */
.cut { position: relative; width: 100%; aspect-ratio: .62; }
.cut::before {               /* the frame, the same stone as the mountain so it nearly vanishes */
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(17% 0, 83% 0, 100% 100%, 0 100%);
  background: var(--grain), var(--strata), linear-gradient(180deg, #8a6a4a, var(--rock-2) 60%, var(--rock-3));
  background-size: 220px 220px, 600px 300px, auto;
  filter: drop-shadow(0 -1px 0 rgba(201, 166, 121, .35));
}
.hangar {                    /* the open interior, lit from inside */
  position: absolute; inset: 7% 8% 4%;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(70% 55% at 50% 70%, rgba(255, 241, 196, .55), transparent 70%),
    linear-gradient(180deg, #120d1c 0%, #2a2033 55%, #3d3138 100%);
  overflow: hidden;
}
.glow { position: absolute; left: 10%; right: 10%; top: 0; height: 10px;
  background: repeating-linear-gradient(90deg, var(--lamp) 0 14px, transparent 14px 34px);
  filter: blur(2px) brightness(1.4); opacity: .9; }
/* the guitar stands ON the deck (bottom = deck height) and is painted over it,
   so the deck never hides the bottom of the body */
.hangar img { position: absolute; z-index: 1; left: 50%; bottom: 9%; transform: translateX(-50%) translateY(var(--lift, 0px)) rotateY(var(--ry, 0deg));
  height: 84%; width: auto; max-width: 92%; object-fit: contain;
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .65)) drop-shadow(0 0 22px rgba(255, 241, 196, .18));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.bay:hover .hangar img { --lift: -8px; }
/* a click turns the guitar around to show its back */
.can-flip .cut { cursor: pointer; }
.can-flip .hangar { perspective: 1100px; }
.can-flip .hangar img { backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .9s cubic-bezier(.35, .1, .2, 1); }
.hangar img.back { --ry: -180deg; }
.bay.flipped .hangar img.face:not(.back) { --ry: 180deg; }
.bay.flipped .hangar img.back { --ry: 0deg; }
.can-flip .cut:focus-visible { outline: 3px dashed var(--mustard); outline-offset: 4px; }
.deck { position: absolute; left: 0; right: 0; bottom: 0; height: 9%;
  background: linear-gradient(180deg, #5a4a40, #2a211c);
  box-shadow: 0 -2px 0 rgba(255, 241, 196, .35); }
.deck::after { content: ""; position: absolute; left: 20%; right: 20%; top: 35%; height: 3px;
  background: repeating-linear-gradient(90deg, var(--mustard) 0 10px, var(--ink) 10px 20px); opacity: .8; }

/* the door: slid up into the rock, sand-coated, ribbed edge showing */
.door { position: absolute; left: 14%; right: 14%; top: -2%; height: 13%;
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(0, 0, 0, .18) 7px 9px),
              var(--grain), linear-gradient(180deg, #9a7b56, #7a5c40);
  background-size: auto, 220px 220px, auto;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.bay:hover .door { transform: translateY(-6px); }
.bay-no { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%) rotate(-2deg);
  font: 800 18px/1 var(--f-stencil); letter-spacing: .18em; color: var(--ink);
  background: var(--mustard); padding: 5px 10px 4px; box-shadow: var(--shadow-sm); }

/* name card, the site's paper, pinned under the bay */
.bay-tag { position: relative; width: 100%; margin-top: 28px; padding: 22px 18px 16px; --tilt: -1deg; }
.bay:nth-child(even) .bay-tag { --tilt: 1.2deg; }
.bay-tag .marker { color: var(--purple); font-size: clamp(28px, 3vw, 36px); margin: 0 0 6px; }
.bay-tag .rp-kind { margin: 0; line-height: 1.25; }
.bay-tag .scrawl { color: #a34a1f; font-size: 22px; margin: 6px 0 10px; }
.woods { margin: 0; padding-top: 10px; border-top: 2px dashed rgba(27, 21, 48, .3); display: grid; gap: 4px; }
.woods div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 15px; line-height: 1.3; }
.woods dt { font: 19px/1 var(--f-crt); color: #5a4d80; text-transform: lowercase; }
.woods dt::after { content: ":"; }
.woods dd { margin: 0; font-weight: 700; }

/* the dry lake in front of the range */
.lakebed { position: relative; height: 70px; display: grid; place-items: center;
  background: var(--grain), linear-gradient(180deg, #b8a27c, var(--lake) 40%, #cdb98f);
  background-size: 220px 220px, auto;
  box-shadow: inset 0 10px 18px -10px rgba(0, 0, 0, .5); }
.lakebed span { font: 18px/1 var(--f-crt); letter-spacing: .14em; color: #6a5638; text-align: center; padding: 0 12px; }

/* ------------------------------------------------------------ the bunker */
.bunker { max-width: 1100px; margin: 70px auto 0; }
.signal-room { margin-top: 26px; display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; align-items: center; }
.rack { display: grid; gap: 14px; padding: 22px 20px; border-radius: 12px;
  background: var(--grain), linear-gradient(180deg, #2b2330, #15101c);
  background-size: 220px 220px, auto;
  border: 4px solid var(--ink); box-shadow: inset 0 0 0 6px #3a2f45, var(--shadow); }
.rack-unit { background: #0b0812; border-radius: 4px; padding: 6px; box-shadow: inset 0 0 0 2px #3c3150; }
.rack-unit img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.rack-note { margin: 4px 0 0; font-size: 15px; }

.s4-foot { text-align: center; margin: 80px auto 40px; }
.s4-foot form { margin-top: 14px; }

/* ------------------------------------------------------------ the door page */
.s4-door { display: flex; flex-direction: column; align-items: center; padding-bottom: 60px; }
.s4-door .mountain { width: 100%; height: 90px; margin-top: -10px;
  background: linear-gradient(180deg, transparent, transparent);
  clip-path: polygon(0 100%, 12% 40%, 24% 70%, 38% 20%, 52% 60%, 66% 10%, 80% 55%, 92% 30%, 100% 60%, 100% 100%);
  background: var(--grain), linear-gradient(180deg, var(--rock-1), var(--rock-3)); background-size: 220px 220px, auto; }
.hatch { width: min(440px, 92vw); text-align: center; margin-top: -4px; }
.hatch .stencil { font: 800 22px/1 var(--f-stencil); letter-spacing: .22em; color: var(--tomato); margin: 6px 0 0; }
.hatch .scrawl { color: var(--purple); margin: 8px 0 16px; }
.hatch input, .reentry-form input { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 14px; font: 22px var(--f-crt); letter-spacing: .14em;
  border: 3px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); }
.hatch-err { font: 20px var(--f-crt); color: var(--tomato); margin: 0 0 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 760px) {
  .signal-room { grid-template-columns: 1fr; }
  .bays { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 40px 18px; }
}
@media (prefers-reduced-motion: reduce) { .bay { animation: none; } }

/* ------------------------------------------------------------ no saving */
.range img, .bunker img, .badge img {
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; pointer-events: none; }
.range, .bunker { -webkit-user-select: none; user-select: none; }

/* ------------------------------------------------------------ clearance */
.clearance { width: 100%; display: flex; flex-direction: column; align-items: center; }
.clearance .step { display: none; }
.clearance[data-state="new"] .step-new,
.clearance[data-state="pending"] .step-pending,
.clearance[data-state="approved"] .step-pending,
.clearance[data-state="denied"] .step-denied,
.clearance[data-state="wrong-ip"] .step-wrong-ip,
.clearance[data-state="expired"] .step-expired { display: flex; }
.clearance .step-new, .clearance .step-denied, .clearance .step-wrong-ip, .clearance .step-expired { flex-direction: column; }
.clearance .step-pending { flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center; }
.field { display: block; text-align: left; font: 19px/1.2 var(--f-crt); color: #4a3f6b; text-transform: lowercase; margin-top: 6px; }
.field input { margin-top: 6px; }

.cam { position: relative; width: 100%; aspect-ratio: 1; margin: 6px 0 10px; border: 4px solid var(--ink); border-radius: 10px;
  background: #0b0819; overflow: hidden; box-shadow: var(--shadow-sm); }
.cam video, .cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam video { transform: scaleX(-1); }
.cam-frame i { position: absolute; width: 22%; height: 22%; border: 3px solid var(--mint); }
.cam-frame i:nth-child(1) { left: 8%; top: 8%; border-right: 0; border-bottom: 0; }
.cam-frame i:nth-child(2) { right: 8%; top: 8%; border-left: 0; border-bottom: 0; }
.cam-frame i:nth-child(3) { left: 8%; bottom: 8%; border-right: 0; border-top: 0; }
.cam-frame i:nth-child(4) { right: 8%; bottom: 8%; border-left: 0; border-top: 0; }
.cam-hint { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; padding: 0 16px; text-align: center;
  font: 18px/1.2 var(--f-crt); color: var(--mint); text-shadow: 0 0 6px #000; }
.cam-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.terms { text-align: left; margin: 4px 0 16px; padding-left: 20px; font-size: 14px; line-height: 1.45; }
.terms li { margin: 0 0 7px; }
.terms em { font-style: normal; background: rgba(255, 79, 154, .18); }
/* .btn sets display, which beats the hidden attribute: the camera buttons
   all showed at once, and "take my badge photo" before the camera was open
   took a blank frame */
.clearance [hidden] { display: none !important; }
/* keep my file: opt-in, unticked by default */
.keep { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 0 0 14px; padding: 10px 12px; font-size: 14px; line-height: 1.45;
  border: 2px dashed #4a3f6b; border-radius: 10px; background: rgba(255, 200, 61, .14); cursor: pointer; }
.keep input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
.keep a { color: inherit; }
/* re-entry by email */
.reentry { text-align: left; margin-top: 14px; font-size: 14px; }
.reentry summary { cursor: pointer; font: 18px/1.2 var(--f-crt); color: #4a3f6b; text-transform: lowercase; }
.reentry-form { display: grid; gap: 8px; margin-top: 8px; }
.reentry-form .btn { justify-self: center; }
.reentry-form input { margin-bottom: 6px; }
.reentry-form .btn-mailed, .reentry-form .btn-mailed:disabled { background: #e53935; color: #fff6ea; opacity: 1; cursor: default; }
.reentry-msg { margin: 0; font-size: 18px; }
.clearance .reentry-wrap { margin-top: 18px; padding: 14px 20px; background: #f4f1e6; border: 3px solid var(--ink); border-radius: 12px; }
.dead-link { margin: 14px 0 0; padding: 14px 18px; text-align: left; }
.dead-link .stencil { display: block; margin-bottom: 4px; }

/* the badge: a laminated facility ID, in the spirit of the one Lazar showed */
.badge { position: relative; width: 300px; background: #f4f1e6; color: var(--ink); border-radius: 14px; overflow: hidden;
  border: 3px solid var(--ink); box-shadow: 8px 10px 0 rgba(0,0,0,.45), inset 0 0 0 6px #fff;
  transform: rotate(-3deg); font-family: var(--f-body); }
.badge::before { content: ""; position: absolute; top: 10px; left: 50%; width: 46px; height: 9px; margin-left: -23px;
  border-radius: 6px; background: #1b1530; box-shadow: inset 0 2px 3px rgba(255,255,255,.2); }
.badge::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%); }
.badge-top { background: #1d3f8f; color: #fff; padding: 28px 14px 10px; text-align: center; }
.badge-top span { display: block; font: 400 46px/1 var(--f-deco); letter-spacing: .12em; color: var(--mustard); text-shadow: 2px 2px 0 var(--pink); }
.badge-top small { font: 15px/1 var(--f-crt); letter-spacing: .2em; }
.badge-body { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px; align-items: center; }
.badge-body img { width: 110px; height: 130px; object-fit: cover; border: 2px solid var(--ink); background: #ccc; }
.badge-dept { font: 700 10px/1.2 var(--f-body); letter-spacing: .08em; margin: 0 0 6px; color: #1d3f8f; }
.badge-name { font: 400 24px/1.05 var(--f-marker); margin: 0 0 6px; word-break: break-word; }
.badge-no { font: 20px/1 var(--f-crt); margin: 0 0 6px; overflow-wrap: anywhere; }
.badge-clr { font: 700 11px/1 var(--f-body); margin: 0; letter-spacing: .1em; }
.badge-clr b { color: var(--tomato); }
.badge-bars { height: 34px; margin: 0 14px; background: repeating-linear-gradient(90deg, #1b1530 0 2px, transparent 2px 4px, #1b1530 4px 7px, transparent 7px 9px, #1b1530 9px 10px, transparent 10px 13px); }
.badge-fine { font: 9px/1.3 var(--f-body); letter-spacing: .06em; text-align: center; margin: 8px 12px 12px; color: #6a6280; }

.waiting { width: min(380px, 92vw); text-align: center; }
/* The site's background radar never showed on the gear pages: the old .radar
   rule here (now .scope) shrank it to 120px. Keep it off rather than let the
   rings appear over everything now. */
.cosmos .radar { display: none; }
.scope { position: relative; width: 120px; height: 120px; margin: 10px auto 4px; border-radius: 50%;
  border: 3px solid var(--ink); background: radial-gradient(circle, #0f3b2f 0 60%, #0b2a22 61%);
  box-shadow: inset 0 0 0 18px rgba(141,255,191,.08), inset 0 0 0 36px rgba(141,255,191,.06); overflow: hidden; }
.scope i { position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(141,255,191,.65), transparent 25%);
  animation: sweep 2.4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }


/* ------------------------------------------------------------ the players */
.uap-player { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 2px dashed rgba(27,21,48,.3); }
.uap-btn { position: relative; flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 60%, #2a1f4d, #120d26); box-shadow: 3px 4px 0 var(--ink); }
.uap-btn > svg:first-child { position: absolute; left: 7px; top: 15px; width: 50px; height: 30px; transition: transform .3s; }
.uap-ring { position: absolute; inset: 0; width: 64px; height: 64px; transform: rotate(-90deg); }
.uap-ring circle { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 3; }
.uap-ring .uap-prog { stroke: var(--mint); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset .25s linear; }
.uap-player.on .uap-btn > svg:first-child { animation: hover 1.6s ease-in-out infinite; }
.uap-player.on .uap-btn::after { content: ""; position: absolute; left: 50%; top: 40px; width: 40px; height: 34px; margin-left: -20px;
  background: linear-gradient(180deg, rgba(141,255,191,.55), transparent); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.uap-player.rx .uap-ring .uap-prog { stroke: var(--tomato); }
@keyframes hover { 50% { transform: translateY(-3px) rotate(-4deg); } }
.uap-readout { display: flex; flex-direction: column; min-width: 0; }
.uap-state { font: 19px/1.1 var(--f-crt); color: #4a3f6b; text-transform: lowercase; }
.uap-player.rx .uap-state { color: var(--tomato); }
.uap-player.tx .uap-state { color: #127a6f; }
.uap-time { font: 17px/1 var(--f-crt); color: #6a6280; }
.uap-player.pending { opacity: .55; }
.uap-player.pending .uap-btn { cursor: not-allowed; filter: grayscale(.7); }

/* ------------------------------------------------------------ review */
.review { max-width: 760px; margin: 40px auto; padding: 30px 26px 24px; }
.review .stencil { font: 800 22px/1 var(--f-stencil); letter-spacing: .2em; color: var(--tomato); }
.review-grid { display: grid; grid-template-columns: 260px 1fr; gap: 22px; margin: 16px 0; align-items: start; }
.review-grid img { width: 260px; border: 3px solid var(--ink); border-radius: 6px; }
.review-grid dl { margin: 0; display: grid; gap: 6px; }
.review-grid dl div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.review-grid dt { font: 19px/1.1 var(--f-crt); color: #4a3f6b; }
.review-grid dd { margin: 0; font-weight: 700; word-break: break-word; }
.review-actions { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: flex-start; }
.review-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.review-note { font-size: 14px; margin: 14px 0 0; }
.review-resend { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: -2px 0 6px; }
.review-resend small { font: 13px var(--f-body); color: #6a6280; }
.review-resend label { font: 14px/1.3 var(--f-body); }
.review-resend input { display: block; margin-top: 6px; width: 260px; max-width: 100%; padding: 8px 10px; font: 15px var(--f-body); border: 2px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); }
.review-bad { font: 14px var(--f-body); color: var(--tomato); }
.review-link { background: none; border: 0; padding: 0; font: 15px/1.3 var(--f-body); color: #5b35c4; text-decoration: underline; cursor: pointer; }
.review-sent { font: 15px var(--f-body); color: #19b3a6; margin-left: 8px; }
@media (max-width: 640px) { .review-grid { grid-template-columns: 1fr; } }

/* facility colours on the badge: rust S-4, grey Roswell, red Synths */
.badge-top { background: var(--lvl, #b5532a); }
.badge-levels { display: flex; height: 8px; }
.badge-levels i { flex: 1; }
.levels { border: 2px dashed rgba(27,21,48,.35); border-radius: 10px; padding: 10px 14px 6px; margin: 0 0 14px; }
.levels legend { font: 19px var(--f-crt); padding: 0 6px; }
.lvl { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding-left: 10px; border-left: 8px solid var(--c); }
.lvl small { color: #6a6280; }

/* ------------------------------------------------------------ rooms nav */
.rooms { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 6px 0 0; }
.rooms a { font: 400 16px var(--f-marker); text-decoration: none; color: var(--paper); padding: 6px 14px 5px; border-radius: 999px;
  border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 35%, transparent); }
.rooms a[aria-current="page"] { background: var(--c); }

/* ------------------------------------------------------------ the gate (basses) */
body.gate-page main { --wine: #6e1a36; --wine-2: #4a0f24; --chev: #ffb347; }
.gate-head .deco-title { text-shadow: 3px 3px 0 #6e1a36; }
.gate-wrap { position: relative; display: flex; flex-direction: column; align-items: center; margin: 20px auto 0; max-width: 680px; }
.gate { width: min(620px, 94vw); height: auto; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.ring-outer { fill: #3a0d1e; stroke: #8e2a4c; stroke-width: 6; }
.ring-inner-edge { fill: none; stroke: #1f0610; stroke-width: 10; }
.glyphs path { fill: none; stroke: #e9b7c8; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.gate.dialled .glyphs { animation: spin 2.8s cubic-bezier(.4,0,.2,1) 1; transform-origin: 0 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.chev { cursor: pointer; outline: none; }
.chev-body { fill: #5a1430; stroke: #1f0610; stroke-width: 4; }
.chev-lamp { fill: #2b0714; transition: fill .35s, filter .35s; }
.chev text { font: 400 26px var(--f-stencil); fill: #e9b7c8; text-anchor: middle; pointer-events: none; }
.chev:hover .chev-lamp, .chev:focus .chev-lamp { fill: #7a2a44; }
.chev.lit .chev-lamp { fill: var(--chev); filter: drop-shadow(0 0 10px var(--chev)); }
.chev.lit text { fill: #2b0714; }
.horizon .eh { opacity: .2; transition: opacity .6s; }
.gate.dialled .horizon .eh { opacity: .55; }
.gate.open .horizon .eh { opacity: 1; }
.eh-rip { animation: rip 6s linear infinite; }
@keyframes rip { 50% { transform: scale(1.015); } }
.mark { cursor: pointer; outline: none; transition: opacity .3s; }
.mark-mtd, .mark-clef { display: none; }
.gate.is-mtd .mark-mtd, .gate.is-clef .mark-clef { display: inline; }
.mtd-word { font: 400 118px/1 var(--f-deco); fill: #fff3f6; letter-spacing: .06em; paint-order: stroke; stroke: #4a0f24; stroke-width: 6; }
.mtd-rule { stroke: #fff3f6; stroke-width: 5; stroke-linecap: round; }
.mark-clef path { fill: none; stroke: #fff3f6; stroke-width: 16; stroke-linecap: round; }
.mark-clef circle { fill: #fff3f6; }
.gate:not(.is-mtd):not(.is-clef) .mark { pointer-events: none; }

/* the bass comes through inside the event horizon only: the overlay is the
   horizon's circle (radius 232 of the 600-unit gate), clipped round */
.arrival { position: absolute; left: 50%; top: 0; width: min(620px, 94vw); aspect-ratio: 1; transform: translateX(-50%); pointer-events: none; }
.arrival::before { content: ""; position: absolute; inset: calc(50% - 38.67%); border-radius: 50%; }
.arrival-img { position: absolute; left: 50%; top: 50%; height: 70%; width: auto; max-width: 70%; object-fit: contain;
  opacity: 0; transform: translate(-50%, -50%) scale(.2);
  clip-path: circle(calc(min(620px, 94vw) * .3867) at 50% 50%);
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.55));
  transition: transform 1.1s cubic-bezier(.2,.9,.2,1), opacity .5s; }
.arrival.through .arrival-img { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.gate-hint { text-align: center; margin: 10px 0 0; }
.addresses { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.addr { font: 18px var(--f-crt); color: #ffe3ec; background: #4a0f24; border: 2px solid #8e2a4c; border-radius: 8px; padding: 4px 12px; cursor: pointer; }
.addr.on { background: var(--chev, #ffb347); color: #2b0714; border-color: #2b0714; }
.gate-card-wrap { max-width: 460px; margin: 30px auto 60px; }
.gate-card .marker { color: #6e1a36; }
@media (prefers-reduced-motion: reduce) { .eh-rip, .gate.dialled .glyphs { animation: none; } .arrival-img { transition: none; } }

/* ------------------------------------------------------------ the patrol */
/* guards walk the ridge with guitars, firing notes into the sky; each note
   bursts into a star and falls as dust (gear-room.js spawns those) */
.patrol { position: relative; height: 0; z-index: 3; }
.guard { position: absolute; top: -104px; width: 56px; height: 88px; animation: patrol 26s linear infinite; }
.guard svg { width: 100%; height: 100%; overflow: visible; animation: face 26s steps(1) infinite; }
.guard .g-body { fill: #1a1210; }
.guard .g-helmet { fill: #2e2a1c; }
.guard .g-gbody { fill: #c9772f; stroke: #1a1210; stroke-width: 1.5; }
.guard .g-neck { fill: #5a3418; }
.guard .g-head { fill: #1a1210; }
.guard .g-hole { fill: #1a1210; }
.guard .g-guitar { transform-box: view-box; animation: strum .45s ease-in-out infinite; transform-origin: 30px 52px; }
.guard .g-leg { transform-box: fill-box; transform-origin: 50% 0; animation: stride .9s ease-in-out infinite; }
.guard .g-leg-b { animation-delay: -.45s; }
.g2 { animation-duration: 34s; animation-delay: -12s; }
.g2 svg { animation-duration: 34s; animation-delay: -12s; }
.g3 { animation-duration: 30s; animation-delay: -21s; }
.g3 svg { animation-duration: 30s; animation-delay: -21s; }
@keyframes patrol { 0% { left: 4%; } 50% { left: 90%; } 100% { left: 4%; } }
@keyframes face { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes stride { 50% { transform: rotate(12deg); } 0%, 100% { transform: rotate(-12deg); } }
@keyframes strum { 50% { transform: rotate(-34deg); } 0%, 100% { transform: rotate(-38deg); } }

/* what they fire */
.sky-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: visible; }
.note { position: absolute; font: 400 26px/1 serif; color: #ffe9a8; text-shadow: 0 0 8px rgba(255, 200, 61, .9); will-change: transform, opacity; }
.burst { position: absolute; width: 0; height: 0; }
.burst::before { content: "✦"; position: absolute; left: -14px; top: -16px; font: 28px/1 serif; color: #fff6d0;
  text-shadow: 0 0 14px #ffc83d, 0 0 30px #ff4f9a; }
.dust { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 4px #ffc83d; }
@media (prefers-reduced-motion: reduce) { .guard, .guard svg, .guard .g-leg, .guard .g-guitar { animation: none; } .sky-fx { display: none; } }


/* ------------------------------------------------------------ Cheyenne Mountain (the gate page) */
body.gate-page .page-head { position: relative; z-index: 2; }
.cmc { position: relative; height: 340px; margin: 10px 0 0; border-radius: 18px 18px 0 0; overflow: hidden;
  background: linear-gradient(180deg, #123a8c 0%, #1d5bc4 38%, #2c6fd6 60%); }
.cmc-rock { position: absolute; inset: 0;
  clip-path: polygon(0 34%, 9% 22%, 18% 26%, 27% 8%, 36% 4%, 44% 18%, 50% 30%, 57% 26%, 63% 34%, 72% 20%, 82% 24%, 92% 12%, 100% 18%, 100% 100%, 0 100%);
  background: var(--grain), var(--strata),
    radial-gradient(40% 50% at 30% 40%, rgba(255,226,196,.35), transparent 70%),
    radial-gradient(30% 40% at 75% 55%, rgba(60,40,30,.35), transparent 70%),
    linear-gradient(180deg, #c9a184 0%, #a8795d 45%, #7c5442 100%);
  background-size: 220px 220px, 600px 300px, auto, auto, auto; }
.cmc-rock::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(6px 10px at 12% 40%, #3f5b2c 60%, transparent 62%) 0 0 / 90px 70px,
              radial-gradient(5px 8px at 60% 70%, #355126 60%, transparent 62%) 0 0 / 120px 90px; opacity: .55; }
.cmc-portal { position: absolute; left: 50%; bottom: 0; width: min(440px, 80%); transform: translateX(-50%); }
.cmc-arch { display: block; width: 100%; height: auto; }
.arch-band { fill: #6b3f22; stroke: #3a2112; stroke-width: 3; }
.arch-words { font: 800 19px var(--f-stencil); letter-spacing: .18em; fill: #f4ead8; }
.arch-mouth { fill: #0c0d10; }
.cmc-road { height: 22px; margin: 0 -40%; background: linear-gradient(180deg, #3b3c3f, #2a2b2e);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.06); }
.cmc-road::after { content: ""; display: block; width: 6px; height: 22px; margin: 0 auto; background: #e8c23a; box-shadow: 9px 0 0 #e8c23a; }

/* the gate room */
.gate-room { position: relative; max-width: none !important; margin: 0 !important; padding: 34px 0 30px;
  border-radius: 0 0 18px 18px; overflow: hidden;
  background: var(--grain),
    linear-gradient(90deg, rgba(0,0,0,.55) 0 4%, transparent 18% 82%, rgba(0,0,0,.55) 96%),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(0,0,0,.35) 118px 124px),
    linear-gradient(180deg, #2f3135 0%, #3d3f43 45%, #26282b 100%);
  background-size: 220px 220px, auto, auto, auto; }
.gr-wall { position: absolute; top: 0; bottom: 0; width: 14%; background: linear-gradient(90deg, #1b1c1f, #2c2e32); }
.gr-left { left: 0; } .gr-right { right: 0; transform: scaleX(-1); }
.lamp { position: absolute; top: 22%; right: 18%; width: 18px; height: 12px; border-radius: 2px; background: #ffb066;
  box-shadow: 0 0 14px 4px rgba(255,150,70,.6), 0 0 60px 18px rgba(255,140,60,.18); }
.lamp.l2 { top: 56%; }
.conduit { position: absolute; top: 0; bottom: 0; left: 24%; width: 7px; background: linear-gradient(90deg, #4a4d52, #23252a);
  box-shadow: 14px 0 0 -1px #34373c, 26px 0 0 -2px #3c3f44; }
.gr-stencil { position: relative; z-index: 2; text-align: center; margin: 0 0 6px; font: 800 18px var(--f-stencil);
  letter-spacing: .3em; color: #c9ccd1; opacity: .7; }
.gate-room .gate { position: relative; z-index: 2; display: block; margin: 0 auto; }
.gate-room .gate-hint, .gate-room .addresses { position: relative; z-index: 3; }
.gr-ramp { position: relative; z-index: 1; width: min(520px, 80%); height: 120px; margin: -46px auto 0;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(160,170,180,.35) 22px 24px),
              repeating-linear-gradient(180deg, transparent 0 14px, rgba(160,170,180,.35) 14px 16px),
              linear-gradient(180deg, #2a2d31, #3b3f44); }
.rail { position: absolute; bottom: 0; width: 6px; height: 140%; background: linear-gradient(90deg, #8d9197, #4b4e54); }
.rl { left: 12%; transform: rotate(32deg); transform-origin: bottom; } .rr { right: 12%; transform: rotate(-32deg); transform-origin: bottom; }

/* the gate itself: grey metal, red-orange chevrons */
.gate-room .ring-outer { fill: url(#metal); stroke: #2b2d31; stroke-width: 4; }
.gate-room .ring-track { fill: #45484e; stroke: #24262a; stroke-width: 3; }
.gate-room .ring-inner-edge { fill: none; stroke: #2a2c30; stroke-width: 8; }
.ring-ribs line { stroke: #2c2e33; stroke-width: 2; }
.gate-room .glyphs path { stroke: #c4c8ce; opacity: .7; }
.gate-room .chev-body { fill: #6d7178; stroke: #2b2d31; stroke-width: 3; }
.gate-room .chev-lamp { fill: #5a2016; }
.gate-room .chev text { fill: #e9edf2; font-size: 22px; }
.gate-room .chev:hover .chev-lamp, .gate-room .chev:focus .chev-lamp { fill: #8a3020; }
.gate-room .chev.lit .chev-lamp, .gate-room .gate.open .chev-lamp { fill: #ff5a1f; filter: drop-shadow(0 0 8px #ff6a2a); }
.gate-room .chev.lit text { fill: #2b0a04; }
.gate-room .horizon .eh { opacity: 0; }
.gate-room .gate.open .horizon .eh { opacity: 1; }
.gate-room .gate.dialled .eh-closed { opacity: .85; }
.gate-room .gate:not(.open) .horizon .eh { opacity: 0; }
.gate-room .arrival { z-index: 4; }

/* ------------------------------------------------------------ the whole page is the mountain */
body.gate-page .cosmos, body.gate-page .stars { display: none; }
body.gate-page { position: relative; background: linear-gradient(180deg, #0f347f 0, #1d5bc4 220px, #3c80dd 380px, #6aa3e6 470px); background-attachment: scroll; }
body.gate-page > * { position: relative; z-index: 1; }
body.gate-page::before, body.gate-page::after { content: ""; position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  background: var(--grain), var(--strata),
    radial-gradient(40% 30% at 22% 18%, rgba(255,226,196,.30), transparent 70%),
    radial-gradient(35% 25% at 80% 40%, rgba(60,40,30,.30), transparent 70%),
    linear-gradient(180deg, #c9a184 0, #a8795d 420px, #8a5f48 1200px, #6a4535 100%);
  background-size: 220px 220px, 600px 300px, auto, auto, auto; }
/* the ridge line */
body.gate-page::before { top: 300px; height: 260px;
  clip-path: polygon(0 55%, 6% 38%, 13% 46%, 21% 18%, 29% 10%, 36% 30%, 42% 40%, 50% 6%, 57% 22%, 64% 36%, 71% 20%, 79% 28%, 86% 8%, 93% 24%, 100% 30%, 100% 100%, 0 100%); }
/* and the rock below it, all the way down */
body.gate-page::after { top: 559px; bottom: 0; background-position: 0 -259px, 0 -259px, 0 0, 0 0, 0 -259px; }
body.gate-page .page-head .deco-title { text-shadow: 3px 3px 0 #0b2a66; }

/* the portal and the room are carved into it, not panels on the page */
.cmc { height: 230px; margin-top: 70px; background: none; border-radius: 0; overflow: visible; }
.cmc-rock { display: none; }
.cmc-portal { width: min(420px, 82%); }
.gate-room { margin: 40px auto 60px !important; max-width: 1100px !important; border-radius: 26px;
  box-shadow: 0 0 0 10px rgba(58,38,28,.85), 0 0 0 22px rgba(90,60,44,.55), inset 0 30px 60px rgba(0,0,0,.6), inset 0 -20px 40px rgba(0,0,0,.4); }
.gate-card-wrap .gate-card { box-shadow: 0 0 0 6px rgba(58,38,28,.6), 6px 8px 0 rgba(0,0,0,.4); }
body.gate-page .gate-hint { color: #ffe3a3; }

/* granite: seamless (stitched) noise at two scales, fractures, shade and scrub */
body.gate-page {
  --granite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .011' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .11 0 0 0 0 .07 0 0 1.6 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --crag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='.035' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 -2.2 0 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  --scrub: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='460'%3E%3Cg fill='%23324a26'%3E%3Cellipse cx='40' cy='60' rx='16' ry='9'/%3E%3Cellipse cx='52' cy='54' rx='10' ry='7'/%3E%3Cellipse cx='300' cy='140' rx='20' ry='11'/%3E%3Cellipse cx='318' cy='132' rx='12' ry='8'/%3E%3Cellipse cx='160' cy='300' rx='14' ry='8'/%3E%3Cellipse cx='450' cy='380' rx='18' ry='10'/%3E%3Cellipse cx='466' cy='372' rx='10' ry='7'/%3E%3C/g%3E%3Cg fill='%23233a1c'%3E%3Cpath d='M230 40 l8 -26 l8 26z'/%3E%3Cpath d='M420 220 l9 -30 l9 30z'/%3E%3Cpath d='M90 410 l7 -22 l7 22z'/%3E%3C/g%3E%3C/svg%3E");
}
body.gate-page::before, body.gate-page::after {
  background:
    var(--scrub),
    var(--crag),
    repeating-linear-gradient(104deg, transparent 0 170px, rgba(40,24,16,.22) 170px 172px, transparent 172px 260px),
    repeating-linear-gradient(71deg, transparent 0 230px, rgba(40,24,16,.16) 230px 232px, transparent 232px 340px),
    var(--granite),
    var(--grain),
    radial-gradient(60% 18% at 25% 6%, rgba(255,228,200,.35), transparent 70%),
    linear-gradient(180deg, #c49a7c 0, #a7785b 420px, #8a5e46 1200px, #5e3d2f 100%);
  background-size: 520px 460px, 400px 400px, auto, auto, 900px 900px, 220px 220px, auto, auto; }
body.gate-page::after { background-position: 0 -259px, 0 -259px, 0 0, 0 0, 0 -259px, 0 -259px, 0 -259px, 0 -259px; }
body.gate-page {
  --crag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='.03' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .12 0 0 0 0 .08 0 0 -3 0 .42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  --fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .15 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
body.gate-page::before, body.gate-page::after {
  background:
    var(--scrub),
    var(--crag),
    repeating-linear-gradient(104deg, transparent 0 170px, rgba(40,24,16,.22) 170px 172px, transparent 172px 260px),
    repeating-linear-gradient(71deg, transparent 0 230px, rgba(40,24,16,.16) 230px 232px, transparent 232px 340px),
    var(--granite),
    var(--fine),
    radial-gradient(60% 18% at 25% 6%, rgba(255,228,200,.35), transparent 70%),
    linear-gradient(180deg, #c49a7c 0, #a7785b 420px, #8a5e46 1200px, #5e3d2f 100%);
  background-size: 520px 460px, 400px 400px, auto, auto, 900px 900px, 256px 256px, auto, auto; }
body.gate-page::after { background-position: 0 -259px; }

/* one rock layer, ridge cut by a mask: two stacked layers can't share angled patterns */
body.gate-page::after { display: none; }
body.gate-page::before { top: 300px; bottom: 0; height: auto; clip-path: none;
  background-position: 0 0;
  --ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,55 6,38 13,46 21,18 29,10 36,30 42,40 50,6 57,22 64,36 71,20 79,28 86,8 93,24 100,30 100,100 0,100'/%3E%3C/svg%3E");
  -webkit-mask: var(--ridge) 0 0 / 100% 260px no-repeat, linear-gradient(#000, #000) 0 259px / 100% calc(100% - 259px) no-repeat;
          mask: var(--ridge) 0 0 / 100% 260px no-repeat, linear-gradient(#000, #000) 0 259px / 100% calc(100% - 259px) no-repeat; }

/* ------------------------------------------------------------ accountability badge */
.idcard { --lvl: #b5532a; width: var(--bw, 168px); background: #f4f1e6; color: var(--ink); border-radius: 10px; overflow: hidden;
  border: 2px solid var(--ink); box-shadow: inset 0 0 0 4px #fff; font-family: var(--f-body); user-select: none; -webkit-user-select: none; }
.idcard-top { background: var(--lvl); color: #fff; text-align: center; padding: calc(var(--bw, 168px) * .1) 6px 4px; }
.idcard-top b { display: block; font: 400 calc(var(--bw, 168px) * .2)/1 var(--f-deco); color: var(--mustard); letter-spacing: .1em; text-shadow: 1px 1px 0 var(--pink); }
.idcard-top small { font: calc(var(--bw, 168px) * .065)/1 var(--f-crt); letter-spacing: .16em; }
.idcard-stripes { display: flex; height: 5px; } .idcard-stripes i { flex: 1; }
.idcard-body { display: grid; grid-template-columns: 40% 1fr; gap: 6px; padding: 7px; align-items: center; }
.idcard-photo { aspect-ratio: .85; border: 1.5px solid var(--ink); background: #c9c4b4; overflow: hidden; display: grid; place-items: center;
  font-size: calc(var(--bw, 168px) * .18); color: var(--lvl); }
.idcard-photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.idcard-name { font: 400 calc(var(--bw, 168px) * .1)/1.05 var(--f-marker); margin: 0 0 3px; word-break: break-word; }
.idcard-no { font: calc(var(--bw, 168px) * .075)/1 var(--f-crt); margin: 0 0 3px; overflow-wrap: anywhere; }
.idcard-lv { font: 700 calc(var(--bw, 168px) * .05)/1.2 var(--f-body); margin: 0; letter-spacing: .06em; text-transform: uppercase; }
.idcard-bars { height: calc(var(--bw, 168px) * .1); margin: 0 7px 7px;
  background: repeating-linear-gradient(90deg, #1b1530 0 2px, transparent 2px 4px, #1b1530 4px 6px, transparent 6px 8px, #1b1530 8px 9px, transparent 9px 12px); }
.idcard-time { font: calc(var(--bw, 168px) * .065)/1 var(--f-crt); margin: 3px 0 0; letter-spacing: .08em; color: var(--tomato); }
.idcard-time:empty { display: none; }

.lanyard { --bw: clamp(108px, 26vw, 168px); position: fixed; top: 0; right: clamp(8px, 3vw, 40px); z-index: 60;
  display: flex; flex-direction: column; align-items: center; cursor: grab; touch-action: none;
  transform-origin: 50% 0; animation: dangle 5s ease-in-out infinite; filter: drop-shadow(4px 8px 10px rgba(0,0,0,.45)); }
.lanyard.held { cursor: grabbing; animation: none; transform: rotate(0); }
/* the rope: braided silver, a herringbone of strands with a round sheen over it */
/* it hangs from above the header: the rope runs behind the nav and the cart,
   and the scissors and the card start below them */
.lanyard { --r1: clamp(104px, 15vh, 140px); --sw: calc(var(--bw) * .56); }
@media (min-width: 701px) { header.top { position: relative; z-index: 61; } }
.lanyard.faded { opacity: .14; }
.lanyard { transition: opacity .35s ease; }
/* phones: a smaller badge on a shorter rope, over the header (it scrolls away) */
@media (max-width: 700px) {
  .lanyard { --bw: 92px; --r1: clamp(56px, 9vh, 84px); right: 6px; }
}
.strap { width: clamp(9px, 2vw, 12px); height: var(--r1); border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(20,22,28,.55), rgba(255,255,255,0) 28%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 64%, rgba(20,22,28,.6)),
    repeating-linear-gradient(-58deg, #f4f6f9 0 1.5px, #b9bec6 1.5px 3.5px, #6f757e 3.5px 5px) right / 50% 100% no-repeat,
    repeating-linear-gradient(58deg, #e9ecf0 0 1.5px, #a7adb6 1.5px 3.5px, #5f656e 3.5px 5px) left / 50% 100% no-repeat; }
.strap-low { height: clamp(10px, 2.2vh, 18px); border-radius: 0 0 2px 2px; }
.lanyard-drop { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }

/* the gold scissors: slightly open across the rope; a click cuts the badge and signs out */
.snip { position: absolute; z-index: 2; top: calc(var(--r1) - var(--sw) * .25); left: calc(50% - var(--sw) * .2);
  width: var(--sw); aspect-ratio: 2; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 0 4px rgba(255, 214, 90, .55)) drop-shadow(1px 2px 2px rgba(0,0,0,.4)); }
.snip svg { display: block; width: 100%; height: 100%; overflow: visible; }
.snip .blade-a, .snip .blade-b { transform-origin: 54px 30px; transition: transform .25s ease; }
.snip .blade-a { transform: rotate(9deg); }
.snip .blade-b { transform: rotate(-9deg); }
.snip:hover .blade-a, .snip:focus-visible .blade-a { transform: rotate(14deg); }
.snip:hover .blade-b, .snip:focus-visible .blade-b { transform: rotate(-14deg); }
.snip.snipped .blade-a, .snip.snipped .blade-b { transform: rotate(0); transition-duration: .1s; }
.snip:focus-visible { outline: 2px dashed var(--mustard); outline-offset: 3px; }
.snip .spark { transform-box: fill-box; transform-origin: center; opacity: 0; animation: snip-twinkle 2.4s ease-in-out infinite; }
@keyframes snip-twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 35% { opacity: 1; transform: scale(1) rotate(45deg); } }
.lanyard.severed .snip { pointer-events: none; }
.lanyard.severed .snip svg { transition: opacity .6s ease .5s, transform .6s ease .5s; opacity: 0; transform: translateY(-10px) scale(.9); }
.lanyard.severed .snip .spark { animation-duration: .5s; }
.snip-dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 61; pointer-events: none; }
.clip { width: 22px; height: 16px; margin-top: -2px; border-radius: 4px; background: linear-gradient(180deg, #d9dde3, #8d929a); border: 2px solid #3a3d42; }
.lanyard-card { margin-top: -3px; }
@keyframes dangle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

.badge-ghost { --bw: clamp(140px, 40vw, 240px); position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; opacity: 0;
  mix-blend-mode: normal; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
@media (prefers-reduced-motion: reduce) { .lanyard, .snip .spark { animation: none; } .snip .spark { opacity: .8; } }
.rack-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rack-unit.half { display: grid; place-items: center; }
.rack-tags { display: grid; gap: 22px; }

/* ------------------------------------------------------------ Studio: the control room */
body.control-page .cosmos, body.control-page .stars { display: none; }
body.control-page { background: linear-gradient(180deg, #15181c 0, #1d2126 40%, #121417 100%); }
.ctrl-head .deco-title { text-shadow: 3px 3px 0 #2b4a70; }
.ctrl { max-width: 1180px; margin: 20px auto 60px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #1a1d21 0, #23272c 30%, #1b1e22 100%); box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.ctrl-ceiling { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; padding: 0 4% 18px;
  background: linear-gradient(180deg, #0e1013, #1a1d21); }
.ovh { background: #0b0c0e; padding: 10px 10px 16px; border-radius: 0 0 6px 6px; box-shadow: 0 6px 14px rgba(0,0,0,.6); }
.scr { position: relative; aspect-ratio: 16 / 10; background: #04121c; border: 1px solid #0e3a4f; overflow: hidden; }
.scr::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); }
.scr b { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(80,220,255,.12), transparent); animation: scan 4s linear infinite; }
@keyframes scan { from { top: -30%; } to { top: 100%; } }
.scr-a i { position: absolute; left: 8%; right: 8%; height: 1px; background: #2ad0ff; box-shadow: 0 0 4px #2ad0ff; }
.scr-a i:nth-child(1) { top: 18%; } .scr-a i:nth-child(2) { top: 50%; } .scr-a i:nth-child(3) { top: 82%; }
.scr-a { background-image: linear-gradient(90deg, transparent 49.6%, rgba(42,208,255,.6) 50%, transparent 50.4%); }
.scr-b { background-image: linear-gradient(rgba(42,208,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(42,208,255,.35) 1px, transparent 1px);
  background-size: 22px 22px; }
.scr-b i { position: absolute; left: 12%; right: 12%; bottom: 10%; height: 14%; background: #20d0ff; opacity: .7; }
.scr-c { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6%; padding: 10%; }
.scr-c i { border: 1px solid #2ad0ff; border-radius: 50%; opacity: .7; }
.scr-c i:nth-child(5n) { background: #33ff99; border-color: #33ff99; border-radius: 2px; }
.scr-c i:nth-child(7n) { background: #ff3b30; border-color: #ff3b30; border-radius: 2px; }

.ctrl-view { position: relative; height: clamp(220px, 34vw, 380px); overflow: hidden;
  background: linear-gradient(90deg, #1d2024 0, #2b2f34 30%, #2b2f34 70%, #1d2024 100%); }
.pillar { position: absolute; top: 0; bottom: 0; width: 5%; background: linear-gradient(90deg, #3a5577, #5476a0 50%, #2e4664); }
.pl { left: 14%; } .pr { right: 14%; }
.wl { position: absolute; width: 3.2%; height: 5%; background: #f3f0e2; border-radius: 2px; box-shadow: 0 0 18px 4px rgba(255,250,220,.4); }
.wl1 { left: 7%; top: 30%; } .wl2 { right: 7%; top: 26%; } .wl3 { right: 24%; top: 40%; }
.view-gate { position: absolute; left: 50%; top: 6%; height: 80%; transform: translateX(-50%); filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.vg-1 { font: 400 36px var(--f-deco); fill: #e8b84a; letter-spacing: .06em; }
.vg-2 { font: 800 30px var(--f-stencil); fill: #3f86d8; letter-spacing: .3em; }
.view-ramp { position: absolute; left: 50%; bottom: 0; width: 16%; height: 26%; transform: translateX(-50%);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(180deg, #8d949c 0 2px, #3a3f45 2px 9px); box-shadow: inset 0 0 0 3px #c9ced4; }
.hazard { position: absolute; left: 34%; right: 34%; bottom: 0; height: 4%;
  background: repeating-linear-gradient(45deg, #f2c200 0 12px, #1b1b1b 12px 24px); opacity: .8; }

.console { position: relative; display: grid; grid-template-columns: 1fr 2.2fr 1fr; gap: 3%; align-items: end;
  padding: 26px 3% 0; background: linear-gradient(180deg, #3f5a7a 0, #33495f 30%, #273746 100%); border-top: 6px solid #5b7799; }
.crt { background: linear-gradient(180deg, #ddd8c8, #b9b3a2); border-radius: 10px 10px 4px 4px; padding: 9% 8% 14%; box-shadow: 0 8px 14px rgba(0,0,0,.45); }
.crt-scr { position: relative; aspect-ratio: 4 / 3; background: #031823; border-radius: 6px; border: 3px solid #2c2c2c;
  display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 26px rgba(42,208,255,.25); }
.dial { width: 56%; aspect-ratio: 1; border-radius: 50%; border: 3px solid #9fe8ff; box-shadow: 0 0 0 6px rgba(42,208,255,.18), 0 0 14px #2ad0ff;
  background: radial-gradient(circle, transparent 54%, rgba(42,208,255,.35) 55% 60%, transparent 61%); animation: spinslow 18s linear infinite; }
@keyframes spinslow { to { transform: rotate(360deg); } }
.crt-scr small { position: absolute; bottom: 6%; font: clamp(10px, 1.2vw, 15px) var(--f-crt); color: #7fe8ff; letter-spacing: .12em; }
.console-rack { display: grid; gap: 8px; padding: 14px; background: #0b0c0e; border-radius: 8px 8px 0 0;
  box-shadow: inset 0 0 0 4px #2f3237, inset 0 0 0 7px #16181b; }
.console-rack .rack-unit { background: #050607; border-radius: 3px; padding: 4px;
  box-shadow: inset 0 0 0 2px #2b2e33; position: relative; }
.console-rack .rack-unit img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.desk { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; padding: 18px 4% 12px; margin: 0 -3.4%;
  background: linear-gradient(180deg, #4d6a8c, #344b63); border-top: 4px solid #6b88aa; }
.kb { height: clamp(24px, 4vw, 44px); border-radius: 4px; background: #d9d6cc;
  background-image: repeating-linear-gradient(90deg, transparent 0 9px, #b9b5a8 9px 10px), repeating-linear-gradient(180deg, transparent 0 9px, #b9b5a8 9px 10px);
  box-shadow: 0 3px 0 #9d998d; }
.leds { grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px; padding-top: 12px; }
.leds i { width: 12px; height: 6px; border-radius: 2px; background: #ff3b30; box-shadow: 0 0 6px #ff3b30; animation: led 2.4s steps(2) infinite; }
.leds i:nth-child(3n) { animation-delay: -.8s; } .leds i:nth-child(4n) { animation-delay: -1.6s; background: #ffb020; box-shadow: 0 0 6px #ffb020; }
@keyframes led { 50% { opacity: .35; } }

.manifest { margin: 0; padding: 22px 4% 26px; background: #061017; border-top: 3px solid #0e3a4f; font-family: var(--f-crt); color: #7fe8ff; }
.mf-head { margin: 0 0 12px; font-size: 20px; letter-spacing: .14em; color: #33ff99; }
.mf-row { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr; gap: 2px 18px; padding: 10px 0; border-top: 1px dashed rgba(127,232,255,.25); }
.mf-row b { font: 400 22px var(--f-crt); color: #e8b84a; }
.mf-row span { font-size: 20px; }
.mf-row em { grid-column: 2; font-style: normal; color: #a9c7d6; font-size: 18px; }
.mf-row small { grid-column: 2; color: #6fa3b8; font-size: 17px; line-height: 1.3; }
@media (max-width: 760px) {
  .ctrl-ceiling { grid-template-columns: repeat(3, 1fr); gap: 3%; padding: 0 3% 12px; }
  .console { grid-template-columns: 1fr; }
  .crt { display: none; }
  .mf-row { grid-template-columns: 1fr; } .mf-row em, .mf-row small { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .scr b, .dial, .leds i { animation: none; } }
/* right monitor: VU meters; the Flex-10 sits on the desk beneath it */
.crt-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.crt-stack .crt { width: 100%; }
.vu-scr { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; padding: 10% 7% 18%; place-items: center; background: #0a0d0f; }
.vu { width: 100%; background: linear-gradient(180deg, #f6e7b8, #e9d394); border-radius: 4px; padding: 6% 6% 2%; text-align: center;
  box-shadow: inset 0 0 10px rgba(180,110,0,.45), 0 0 14px rgba(255,190,80,.25); }
.vu svg { display: block; width: 100%; }
.vu-arc { fill: none; stroke: #2a2117; stroke-width: 2; }
.vu-red { fill: none; stroke: #c4241c; stroke-width: 3.5; }
.vu text { font: 700 11px var(--f-body); fill: #2a2117; text-anchor: middle; }
.vu-needle { stroke: #1b1308; stroke-width: 1.6; transform-origin: 50px 56px; animation: needle 1.7s ease-in-out infinite alternate; }
.vu-needle.r { animation-duration: 1.3s; animation-delay: -.4s; }
@keyframes needle { 0% { transform: rotate(-38deg); } 30% { transform: rotate(-6deg); } 55% { transform: rotate(-22deg); } 80% { transform: rotate(14deg); } 100% { transform: rotate(-12deg); } }
.vu small { font: 11px var(--f-crt); color: #2a2117; }
.vu-cap { position: absolute; bottom: 5%; left: 0; right: 0; text-align: center; font: clamp(10px, 1.2vw, 15px) var(--f-crt); color: #ffcf6e; letter-spacing: .12em; }
.desk-unit { width: 92%; height: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); pointer-events: none; -webkit-user-drag: none; user-select: none; }
@media (max-width: 760px) { .crt-stack .crt { display: none; } .desk-unit { width: 70%; } }
@media (prefers-reduced-motion: reduce) { .vu-needle { animation: none; } }
.di-box { width: 62%; height: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
@media (max-width: 760px) { .crt-stack .di-box { width: 40%; } }
.desk { position: relative; }
.di-box.on-desk { position: absolute; right: 1.5%; top: -46%; width: clamp(70px, 9vw, 120px); transform: rotate(-6deg); }

/* ------------------------------------------------------------ Guitar Amps: studio A, the pit */
body.amps-page .cosmos, body.amps-page .stars { display: none; }
body.amps-page { background: linear-gradient(180deg, #2a1d14 0, #3a291c 50%, #1e150e 100%); }
.pit-head .deco-title { text-shadow: 3px 3px 0 #7a4a1c; }
.pit { max-width: 1180px; margin: 20px auto 60px; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.6); }
.pit-ceiling { height: 34px; display: flex; justify-content: space-around; align-items: center; background: #d8cdb4; border-bottom: 4px solid #a8987a; }
.pit-ceiling i { width: 22%; height: 9px; border-radius: 3px; background: #fffbe8; box-shadow: 0 0 18px 6px rgba(255,248,220,.55); }
.pit-wall { position: relative; height: clamp(230px, 28vw, 330px);
  background: var(--fine, none),
    radial-gradient(60% 80% at 50% 30%, rgba(255,240,200,.35), transparent 70%),
    linear-gradient(180deg, #e9dcbc 0, #dccba2 60%, #c9b388 100%); }
.pit-window { position: absolute; left: 50%; top: 12%; width: 42%; height: 46%; transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  padding: 8px; background: #6b4a2a; border-radius: 4px; box-shadow: inset 0 0 0 3px #3e2a16, 0 6px 14px rgba(0,0,0,.3); }
.pit-window span { position: relative; background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06));
  box-shadow: 0 0 0 3px #6b4a2a, inset 0 0 0 1px rgba(0,0,0,.35), inset 0 -16px 22px rgba(255,190,90,.12); }
/* the view: one panorama behind all three panes (tools/gear/overlook_svg.py) */
.pit-window .overlook { position: absolute; left: 8px; top: 8px; width: calc(100% - 16px); height: calc(100% - 16px); display: block; margin: 0; }
.overlook .ov-flakes { animation: ov-snow 9s linear infinite; }
.overlook .ov-smoke { animation: ov-smoke 6s ease-in-out infinite alternate; transform-origin: 600px 64px; }
@keyframes ov-snow { from { transform: translateY(-300px); } to { transform: translateY(0); } }
@keyframes ov-smoke { from { transform: skewX(-6deg); opacity: .25; } to { transform: skewX(8deg); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .overlook .ov-flakes, .overlook .ov-smoke { animation: none; } }
.slats { position: absolute; top: 0; bottom: 0; width: 22%;
  background: repeating-linear-gradient(90deg, #8a5a30 0 14px, #6e4522 14px 16px, #9a6a3a 16px 30px, #5a381a 30px 32px); box-shadow: inset 0 0 20px rgba(0,0,0,.35); }
.sl { left: 0; } .sr { right: 0; }
.baffle { position: absolute; top: 0; width: 7%; height: 70%; background: linear-gradient(180deg, #3a3f4a, #262a31); border-radius: 0 0 6px 6px; box-shadow: 0 8px 14px rgba(0,0,0,.35); }
.b1 { left: 26%; } .b2 { right: 26%; }
.pit-floor { padding: 36px 3% 40px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 120px),
    repeating-linear-gradient(180deg, #8a5a32 0 26px, #7a4d28 26px 28px, #95633a 28px 54px, #6f4422 54px 56px);
  box-shadow: inset 0 26px 30px -14px rgba(0,0,0,.6); }
.amp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px 30px; align-items: end; }
.amp { display: flex; flex-direction: column; align-items: center; animation: bay-in .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 90ms); }
.amp-stand { width: 100%; display: flex; justify-content: center; align-items: flex-end; min-height: 280px;
  background: radial-gradient(50% 12% at 50% 98%, rgba(0,0,0,.45), transparent 70%); }
.amp-stand img, .amp-drawn { max-width: 100%; max-height: 300px; height: auto; filter: drop-shadow(0 14px 16px rgba(0,0,0,.5)); pointer-events: none; user-select: none; -webkit-user-drag: none; }
.amp-drawn { width: 78%; }
.amp-tag { margin-top: 20px; }

/* ------------------------------------------------------------ Synths: the landing site at Devils Tower */
body.tower-page .cosmos { display: none; }
body.tower-page { background: linear-gradient(180deg, #05060f 0, #0d1024 45%, #1a1426 80%, #0b0910 100%); }
.dt-head .deco-title { text-shadow: 3px 3px 0 #d7263d; }
.dt { position: relative; max-width: 1240px; margin: 20px auto 60px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(70% 40% at 50% 18%, rgba(255,214,150,.18), transparent 70%), linear-gradient(180deg, #070918 0, #121530 50%, #1c1628 100%);
  box-shadow: 0 24px 50px rgba(0,0,0,.6); }
.dt-sky { display: flex; justify-content: center; padding-top: 18px; }
.mothership { width: min(900px, 96%); height: auto; overflow: visible; animation: hover-ufo 9s ease-in-out infinite; }
@keyframes hover-ufo { 50% { transform: translateY(-8px); } }
.ms-ring circle { animation: ms-chase 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.15s + var(--d)); }
@keyframes ms-chase { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.ms-port { animation: ms-port 4s ease-in-out infinite; }
@keyframes ms-port { 50% { opacity: .55; } }
.ms-beam { animation: ms-port 6s ease-in-out infinite; }
.tower { display: block; width: 100%; height: clamp(130px, 20vw, 260px); margin-top: -90px; position: relative; z-index: 1; }
.tower .flood { animation: ms-port 5s ease-in-out infinite; }
.five { position: relative; z-index: 2; display: flex; justify-content: center; gap: 10px; padding: 14px 0 4px; background: #0b0910; }
.five i { width: clamp(34px, 6vw, 64px); height: 22px; border-radius: 3px; background: var(--c); opacity: .2;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08); animation: five 5s steps(1) infinite; animation-delay: calc(var(--i) * .6s); }
@keyframes five { 0% { opacity: 1; box-shadow: 0 0 22px 4px var(--c); } 12%, 100% { opacity: .2; box-shadow: 0 0 0 2px rgba(255,255,255,.08); } }
.dt-pad { position: relative; z-index: 3; padding: 20px 3% 44px; background: linear-gradient(180deg, #0b0910 0, #17141d 30%, #121017 100%); }
.dt-sign { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 34px 0 22px; }
.dt-sign span { font: 800 clamp(18px, 2.4vw, 26px) var(--f-stencil); letter-spacing: .22em; text-transform: uppercase; color: #ffe9a8;
  padding: 6px 16px; border: 2px solid #ffb02e; border-radius: 4px; background: #1a1206; box-shadow: 0 0 18px rgba(255,176,46,.35); }
.dt-sign small { font: 18px var(--f-crt); color: #9aa3c8; letter-spacing: .08em; }
.synth-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px 26px; align-items: end; }
.synth { display: flex; flex-direction: column; align-items: center; animation: bay-in .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms); }
.synth-stand { width: 100%; min-height: 200px; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(55% 14% at 50% 98%, rgba(255,226,170,.32), transparent 70%); }
.synth-stand img { max-width: 100%; max-height: 220px; filter: drop-shadow(0 12px 14px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,220,150,.16));
  pointer-events: none; user-select: none; -webkit-user-drag: none; }
.synth-crate { width: 80%; aspect-ratio: 2; display: grid; place-items: center; text-align: center; font: 700 14px var(--f-stencil); letter-spacing: .12em;
  text-transform: uppercase; color: #3a2a12; background: repeating-linear-gradient(90deg, #c49a5a 0 30px, #b38a4c 30px 32px); border: 3px solid #6e4c22; }
.dt-tag { margin-top: 18px; }
.dt-tag .marker { color: #b3122e; }
@media (prefers-reduced-motion: reduce) { .mothership, .ms-ring circle, .ms-port, .ms-beam, .five i, .tower .flood { animation: none; } .five i { opacity: .8; } }
/* console gear row */
.console-gear { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 22px; padding: 18px 2% 6px; }
.console-gear figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.console-gear img { max-height: 150px; max-width: 220px; width: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); pointer-events: none; user-select: none; }
.console-gear figcaption { font: 15px var(--f-crt); color: #cfe2f5; letter-spacing: .1em; }

/* the engineer's spec sheet on a clipboard */
.specsheet { position: relative; max-width: 760px; margin: 30px auto 34px; padding: 26px 22px 22px; border-radius: 14px;
  background: linear-gradient(180deg, #8a5a32, #6e4626); box-shadow: 0 16px 30px rgba(0,0,0,.5), inset 0 0 0 3px #4a2e16; }
.clip-top { position: absolute; left: 50%; top: -14px; width: 140px; height: 34px; margin-left: -70px; border-radius: 8px;
  background: linear-gradient(180deg, #dfe3e8, #8e959d); box-shadow: inset 0 -4px 0 #6a7078, 0 4px 8px rgba(0,0,0,.4); }
.sheet { background: #fbf8ef; color: var(--ink); border-radius: 4px; padding: 22px 22px 16px;
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(59,91,219,.18) 27px 28px); }
.sheet-title { margin: 0; font: 800 26px var(--f-stencil); letter-spacing: .2em; color: #1d3f8f; }
.sheet-sub { margin: 2px 0 12px; font: 600 19px var(--f-hand); color: #a34a1f; }
.sheet h4 { margin: 16px 0 4px; font: 400 20px var(--f-marker); color: #6b3fd6; border-bottom: 2px solid #1b1530; }
.sheet h4 small { font: 16px var(--f-crt); color: #6a6280; margin-left: 6px; }
.sheet ul { list-style: none; margin: 0; padding: 0; }
.sheet li label { display: grid; grid-template-columns: 22px 150px 1fr; gap: 8px; align-items: center; padding: 3px 0; cursor: pointer; font-size: 14.5px; }
.sheet input { width: 18px; height: 18px; accent-color: #1d3f8f; }
.sheet li b { font: 400 18px var(--f-marker); }
.sheet li input:checked ~ b, .sheet li input:checked ~ span { text-decoration: line-through; text-decoration-color: #c4241c; opacity: .65; }
.sheet-foot { margin: 14px 0 0; font: 18px var(--f-crt); color: #4a3f6b; }
.sheet-reset { background: none; border: 0; padding: 0; font: inherit; color: #c4241c; text-decoration: underline; cursor: pointer; }
@media (max-width: 560px) { .sheet li label { grid-template-columns: 22px 1fr; } .sheet li label span { grid-column: 2; } }
.sheet input[type=checkbox] { -webkit-appearance: none; appearance: none; margin: 0; width: 18px; height: 18px; border: 2px solid #1b1530; border-radius: 3px; background: #fff; display: grid; place-items: center; cursor: pointer; }
.sheet input[type=checkbox]:checked { background: #1d3f8f; border-color: #1d3f8f; }
.sheet input[type=checkbox]:checked::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* ------------------------------------------------------------ Eurorack: the hotel */
body.overlook-page .cosmos, body.overlook-page .stars { display: none; }
body.overlook-page { background: #1a0d08; }
.ov-head .deco-title { text-shadow: 3px 3px 0 #8a1f12; }
.overlook { --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='146'%3E%3Crect width='84' height='146' fill='%23c84a1a'/%3E%3Cg fill='none' stroke-width='9'%3E%3Cpath d='M42 9 L74 27 L74 64 L42 82 L10 64 L10 27 Z' stroke='%23e8a33a'/%3E%3Cpath d='M42 30 L56 38 L56 55 L42 63 L28 55 L28 38 Z' fill='%23471b10' stroke='%23e8a33a'/%3E%3Cpath d='M0 82 L0 119 M84 82 L84 119 M42 82 L42 146' stroke='%23e8a33a'/%3E%3Cpath d='M-32 101 L0 82 L32 101 M52 101 L84 82 L116 101' stroke='%23e8a33a'/%3E%3C/g%3E%3Cpath d='M0 100 L10 106 L10 136 L0 142 Z M84 100 L74 106 L74 136 L84 142 Z' fill='%23471b10'/%3E%3C/svg%3E");
  max-width: 1240px; margin: 20px auto 60px; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.65); }
.ov-wall { position: relative; height: clamp(150px, 16vw, 210px);
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(120,60,30,.12) 38px 40px),
    radial-gradient(circle at 20px 20px, rgba(150,70,40,.25) 3px, transparent 4px) 0 0 / 40px 40px,
    linear-gradient(180deg, #e9dcc0 0, #e1cfac 80%, transparent 80%),
    linear-gradient(180deg, transparent 80%, #5a2f19 80%, #3e2010 100%); }
.sconce { position: absolute; top: 30%; width: 22px; height: 30px; border-radius: 4px 4px 10px 10px;
  background: linear-gradient(180deg, #fff5d6, #f1c56a); box-shadow: 0 0 22px 10px rgba(255,210,120,.45), 0 0 70px 26px rgba(255,190,90,.18); }
.sconce::after { content: ""; position: absolute; left: 7px; top: 100%; width: 8px; height: 12px; background: #8a6a2a; border-radius: 0 0 3px 3px; }
.s1 { left: 8%; } .s2 { left: 34%; } .s3 { right: 34%; } .s4 { right: 8%; }
.ov-door { position: absolute; left: 50%; bottom: 20%; width: 9%; min-width: 64px; height: 64%; transform: translateX(-50%);
  background: linear-gradient(90deg, #6e3a1c, #8a4b26 50%, #5e3018); border: 4px solid #3e1f0e; border-bottom: 0; border-radius: 3px 3px 0 0; }
.ov-door span { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); font: 800 clamp(11px, 1.3vw, 16px) var(--f-stencil); color: #f1d38a;
  letter-spacing: .1em; padding: 2px 6px; border: 1px solid #b08a3a; background: #3a1f0e; }
.ov-door::after { content: ""; position: absolute; right: 12%; top: 52%; width: 7px; height: 7px; border-radius: 50%; background: #e8c45a; }

.megacase { position: relative; display: grid; grid-template-columns: 26px 1fr 26px; margin: 0 2.5%; padding: 0;
  background: var(--hex); background-size: 84px 146px; }
.mc-cheek { background: linear-gradient(90deg, #4a2612, #8a5228 45%, #5a2f17); box-shadow: inset 0 0 0 2px #2a1408; border-radius: 6px 6px 0 0; }
.mc-body { position: relative; background: #0b0b0d; padding: 10px 6px; box-shadow: inset 0 0 0 3px #222; }
.mc-row { position: relative; display: flex; aspect-ratio: 126 / 25.3; margin-bottom: 8px; }
.mc-row::before, .mc-row::after { content: ""; position: absolute; left: 0; right: 0; height: 3.5%; background: linear-gradient(180deg, #d9dde3, #8d929a); z-index: 2; }
.mc-row::before { top: 0; } .mc-row::after { bottom: 0; }
.mod { position: relative; width: calc(var(--hp) / 126 * 100%); height: 100%; background: var(--panel); border-right: 1px solid rgba(0,0,0,.6);
  display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 6% 2px 5%;
  color: color-mix(in srgb, var(--panel) 20%, #fff); box-shadow: inset 1px 0 0 rgba(255,255,255,.08); }
.mod.blank { background: repeating-linear-gradient(180deg, #2a2a2e 0 2px, #222226 2px 6px); }
.mod-brand { font: 700 clamp(4px, .55vw, 8px)/1.1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; opacity: .7; text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.mod-name { font: 400 clamp(5px, .8vw, 11px)/1.05 var(--f-marker); text-align: center; color: var(--acc); max-width: 100%; margin-top: 2px; word-break: break-word; }
.knobs { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6% 10%; width: 86%; margin-top: 8%; flex: 1; align-content: start; }
.knobs i { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9a9ea6, #34363b 60%, #1a1b1e); box-shadow: 0 1px 0 rgba(0,0,0,.6); max-width: 22px; justify-self: center; width: 100%; }
.knobs i.big { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--acc) 70%, #fff), var(--acc) 55%, #2a1a10); }
.screen { width: 70%; aspect-ratio: 2.2; margin: 4% 0; background: #071a12; border: 1px solid #000; box-shadow: inset 0 0 6px var(--acc); }
.jacks { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8% 10%; width: 86%; margin-bottom: 4%; }
.jacks b { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #050505 32%, #c9ced4 34%, #8d929a 62%, #3a3c40 66%); max-width: 14px; width: 100%; justify-self: center; }
.cables { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }

.ov-carpet { padding: 40px 4% 50px; background: var(--hex); background-size: 84px 146px; box-shadow: inset 0 26px 30px -14px rgba(0,0,0,.6); }
.register { max-width: 760px; margin: 0 auto; background: #f4ecd8; color: #2a1408; border-radius: 4px; padding: 24px 26px 18px;
  box-shadow: 0 16px 28px rgba(0,0,0,.55), inset 0 0 0 8px #e7dcbf, inset 0 0 0 9px #b8a272; }
.reg-title { margin: 0; text-align: center; font: 400 28px var(--f-deco); letter-spacing: .14em; color: #8a1f12; }
.reg-sub { margin: 0 0 14px; text-align: center; font: 600 19px var(--f-hand); color: #6b4a2a; }
.register ol { margin: 0; padding-left: 28px; columns: 2 300px; column-gap: 32px; font-size: 14px; }
.register li { break-inside: avoid; padding: 3px 0; border-bottom: 1px dotted rgba(42,20,8,.3); }
.register li span { display: block; font: 15px var(--f-crt); color: #7a5a3a; text-transform: uppercase; }
.register li b { font: 400 16px var(--f-marker); }
.register li em { float: right; font-style: normal; font: 16px var(--f-crt); color: #8a1f12; }
@media (max-width: 760px) { .megacase { grid-template-columns: 12px 1fr 12px; margin: 0; } .mod-brand { display: none; } }
.mod.photo { padding: 0; background: #111; }
.mod.photo img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mc-row.u1 { aspect-ratio: 126 / 7.8; }
.mc-row.u1::before, .mc-row.u1::after { height: 9%; }
.amp-noimg { width: 70%; height: 220px; display: grid; place-items: center; border: 2px dashed rgba(255,240,210,.5); border-radius: 8px;
  font: 22px var(--f-hand); color: #f3e2bd; }
/* click a module: its room card */
.mod.photo { cursor: pointer; transition: filter .15s, transform .15s; }
.mod.photo:hover, .mod.photo:focus-visible { filter: brightness(1.15); outline: 2px solid #f1d38a; outline-offset: -2px; z-index: 4; }
.cables { z-index: 3; }
.keycard-veil { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(20,8,4,.72); }
.keycard-veil[hidden] { display: none; }
.keycard { position: relative; width: min(460px, 100%); max-height: 88vh; overflow: auto; background: #f4ecd8; color: #2a1408; border-radius: 10px;
  padding: 26px 24px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 0 0 8px #e7dcbf, inset 0 0 0 9px #b8a272; }
.kc-close { position: absolute; right: 10px; top: 6px; background: none; border: 0; font: 34px/1 var(--f-body); color: #8a1f12; cursor: pointer; }
.kc-tag { position: absolute; left: -10px; top: 18px; display: flex; flex-direction: column; align-items: center; padding: 6px 12px 8px;
  background: #8a1f12; color: #f1d38a; border-radius: 0 6px 6px 0; box-shadow: 3px 4px 0 rgba(0,0,0,.3); }
.kc-tag span { font: 11px var(--f-crt); letter-spacing: .2em; } .kc-tag b { font: 400 22px var(--f-deco); }
.kc-brand { margin: 0 0 0 64px; font: 17px var(--f-crt); letter-spacing: .12em; text-transform: uppercase; color: #7a5a3a; }
.kc-name { margin: 2px 0 4px 64px; font: 400 32px/1.05 var(--f-marker); color: #8a1f12; }
.kc-tagline { margin: 10px 0 8px; font: 600 21px/1.2 var(--f-hand); color: #6b3fd6; }
.kc-fn { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.kc-fn span { font: 15px var(--f-crt); padding: 1px 8px; border: 1px solid #b8a272; border-radius: 999px; background: #fff8e8; }
.kc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.kc-stats div { background: #fff8e8; border: 1px solid #e0d2b0; border-radius: 6px; padding: 6px 8px; }
.kc-stats dt { font: 14px var(--f-crt); color: #7a5a3a; } .kc-stats dd { margin: 0; font-weight: 700; font-size: 15px; }
.kc-desc { font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.kc-link { font: 600 18px var(--f-hand); color: #8a1f12; }
@media (max-width: 480px) { .kc-stats { grid-template-columns: repeat(2, 1fr); } }

/* room 237: a doorway with a room behind a door that swings */
.ov-doorway { position: absolute; left: 50%; bottom: 20%; width: 9%; min-width: 64px; height: 64%; transform: translateX(-50%);
  perspective: 600px; cursor: pointer; border: 5px solid #e3cfa5; border-bottom: 0; box-shadow: 0 0 0 2px #b89a64; }
.ov-doorway .ov-door { left: 0; right: 0; bottom: 0; width: auto; min-width: 0; height: 100%; transform: none; transform-origin: 0 50%;
  transition: transform 1.6s cubic-bezier(.4,.1,.2,1); backface-visibility: hidden; }
.ov-doorway.open .ov-door { transform: rotateY(-78deg); }
.ov-room { position: absolute; inset: 0; overflow: hidden;
  background: repeating-linear-gradient(90deg, #8ea3b8 0 9px, #9fb3c6 9px 18px); }
.rm-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: repeating-linear-gradient(45deg, #6b5a4a 0 3px, #5c4c3e 3px 6px); }
.rm-dresser { position: absolute; left: 12%; bottom: 24%; width: 52%; height: 20%; background: linear-gradient(180deg, #8a5a32, #5e3a1e);
  box-shadow: inset 0 -2px 0 #3e240f; }
.rm-dresser::before, .rm-dresser::after { content: ""; position: absolute; left: 10%; right: 10%; height: 1px; background: #3e240f; }
.rm-dresser::before { top: 40%; } .rm-dresser::after { top: 72%; }
.rm-lamp { position: absolute; left: 24%; bottom: 44%; width: 18%; height: 16%; }
.rm-lamp b { position: absolute; left: 0; right: 0; top: 0; height: 62%; background: #f6e2a6; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  box-shadow: 0 0 22px 10px rgba(255,214,140,.55); }
.rm-lamp::after { content: ""; position: absolute; left: 44%; width: 12%; top: 60%; bottom: 0; background: #6a4a22; }
.rm-picture { position: absolute; right: 12%; top: 24%; width: 26%; height: 18%; background: linear-gradient(160deg, #8a6a4a, #4a3a2a); border: 2px solid #c9a96a; }
.rm-guests { position: absolute; left: 4%; right: 4%; bottom: 6%; height: 78%; width: 92%; }
.rm-guests .bear-head { transform-box: fill-box; transform-origin: 50% 90%; transition: transform 2.4s ease-in-out 1.4s; }
.ov-doorway.open .rm-guests .bear-head { transform: rotate(-14deg); }
.rm-guests .tux { filter: drop-shadow(0 0 3px rgba(255,220,160,.25)); }
.ov-doorway:focus-visible { outline: 3px dashed #f1d38a; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .ov-doorway .ov-door, .rm-guests .bear-head { transition: none; } }
/* Danny on his Big Wheel, down the corridor and past 237 */
.danny { position: absolute; bottom: 2%; left: -14%; height: 50%; aspect-ratio: 130 / 100; z-index: 3; pointer-events: none;
  animation: danny-ride 17s linear 1.5s infinite; }
.danny svg { display: block; width: 100%; height: 100%; animation: danny-bump .32s ease-in-out infinite alternate; }
@keyframes danny-ride { 0% { left: -14%; } 72% { left: 106%; } 100% { left: 106%; } }
@keyframes danny-bump { from { transform: translateY(0); } to { transform: translateY(-1.5%); } }
@media (prefers-reduced-motion: reduce) { .danny, .danny svg, .danny * { animation: none !important; } .danny { left: 22%; } }


/* a link in running text: the marquee's "Act" pink, no underline */
.pink-link { color: var(--pink); text-decoration: none; }
.pink-link:hover, .pink-link:focus-visible { text-shadow: 0 0 10px rgba(255, 79, 154, .7); }

/* ------------------------------------------------ the desk at the door
   A 1950s office desk seen from above: walnut, a chrome front edge, a green
   leather blotter the forms lie on, and the appointments around it (generated
   into _desk.html by tools/gear/desk_svg.py). The tape now sticks to the desk. */
.s4-door {
  --wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .16' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .08 0 0 0 0 .03 1.8 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.desk { position: relative; width: min(1180px, 100%); margin-top: -4px; padding: 58px 16px 70px; display: flex; justify-content: center; overflow: hidden;
  background: var(--wood), var(--grain), linear-gradient(180deg, #6e4529 0%, #5a3820 55%, #4b2e1a 100%);
  background-size: 600px 300px, 220px 220px, auto;
  border-radius: 12px 12px 4px 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -12px 0 #2c1b10, inset 0 -16px 0 #d9dde3, inset 0 -18px 0 #7d828a, 0 24px 40px rgba(0,0,0,.55); }
.desk .clearance { position: relative; z-index: 2; width: fit-content; max-width: 100%; padding: 46px 52px 44px; border-radius: 4px;
  background: var(--grain), radial-gradient(ellipse at 40% 30%, #3a6d55, #24493a 70%, #1c3b2e);
  background-size: 220px 220px, auto; box-shadow: 0 8px 16px rgba(0,0,0,.5); }
.desk .clearance::before, .desk .clearance::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30px;
  background: var(--grain), linear-gradient(90deg, #4a1c16, #6e2a20 50%, #4a1c16); background-size: 220px 220px, auto;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25); outline: 1.5px dashed rgba(240,200,170,.45); outline-offset: -7px; }
.desk .clearance::before { left: 0; border-radius: 4px 0 0 4px; }
.desk .clearance::after { right: 0; border-radius: 0 4px 4px 0; }
.desk .clearance > .step { position: relative; z-index: 1; }

.desk-kit .kit { position: absolute; z-index: 1; filter: drop-shadow(6px 10px 7px rgba(0,0,0,.5)); pointer-events: none; }
.kit-phone { width: clamp(150px, 17vw, 215px); left: 2.5%; top: 34px; transform: rotate(-12deg); }
.kit-rule { width: clamp(300px, 34vw, 440px); left: -6%; top: 560px; transform: rotate(-66deg); }
.kit-pencil { width: clamp(150px, 16vw, 210px); left: 9%; top: 1010px; transform: rotate(28deg); }
.kit-plate { width: clamp(170px, 19vw, 240px); right: 3%; top: 60px; transform: rotate(3deg); }
.kit-ink { width: clamp(140px, 15vw, 190px); right: 5%; top: 280px; transform: rotate(9deg); }
.kit-cup { width: clamp(110px, 12vw, 150px); right: 7.5%; top: 600px; }
.desk-kit .ring { position: absolute; right: 10%; top: 830px; width: 108px; height: 108px; border-radius: 50%;
  border: 5px solid rgba(60, 30, 10, .28); border-left-color: rgba(60, 30, 10, .12); filter: blur(.7px); }
@media (max-width: 1000px) { .desk-kit { display: none; } }
@media (max-width: 560px) {
  .desk { padding: 40px 0 50px; border-radius: 8px; }
  .desk .clearance { padding: 34px 20px 30px; }
  .desk .clearance::before, .desk .clearance::after { width: 12px; outline: 0; }
}

/* the forms: real paper, aged at the edges, folded in three, fibres in it */
.clearance .paper, .clearance .badge + .memo {
  background: radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(140, 100, 40, .16) 100%),
    linear-gradient(180deg, transparent 33.1%, rgba(0,0,0,.05) 33.3%, rgba(255,255,255,.55) 33.6%, transparent 34%,
                    transparent 66.4%, rgba(0,0,0,.05) 66.6%, rgba(255,255,255,.55) 66.9%, transparent 67.3%),
    var(--fibre), #f3ecd8;
  background-size: auto, auto, 300px 300px, auto;
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 4px 8px 14px rgba(0,0,0,.45); }

/* the letterhead on APPLICATION RECEIVED */
.memo { width: min(400px, 92vw); text-align: left; padding: 26px 26px 30px; }
.memo-head { display: flex; gap: 12px; align-items: center; color: #1d3f8f; border-bottom: 3px double #1d3f8f; padding: 4px 0 10px; margin-bottom: 10px; }
.memo-seal { width: 66px; height: 66px; flex: none; opacity: .92; }
.memo-dept { font: 700 13.5px/1.15 var(--f-body); letter-spacing: .1em; margin: 0; }
.memo-office { font: italic 13px/1.3 Georgia, "Times New Roman", serif; margin: 3px 0 0; }
.memo-addr { font: 10px/1.3 var(--f-body); letter-spacing: .08em; margin: 2px 0 0; color: #4a3f6b; }
.memo-ref { font: 11px/1.45 var(--f-body); text-align: right; margin: 0 0 14px; color: #2a2340; }
.memo-ref b { overflow-wrap: anywhere; }
.memo .stencil { text-align: center; }
.memo-body { font: 14.5px/1.55 var(--f-body); color: #241d38; margin: 12px 0 6px; text-shadow: 0 0 .5px rgba(20,15,40,.55); }
.memo-body b { overflow-wrap: anywhere; }
.memo-sig { font: 12px/1.2 var(--f-body); text-align: right; margin: 10px 0 0; color: #2a2340; }
.memo-sig span { display: block; font: 30px/1 var(--f-hand); color: #1d3f8f; transform: rotate(-5deg); margin-top: 2px; }
.memo-stamp { position: absolute; left: 22px; bottom: 30px; transform: rotate(-13deg); padding: 5px 9px 4px; text-align: center;
  border: 3px solid #b23a2a; border-radius: 6px; color: #b23a2a; font: 700 11px/1.15 var(--f-body); letter-spacing: .16em; opacity: .78;
  -webkit-mask-image: var(--fibre), linear-gradient(#000, #000); mask-image: var(--fibre), linear-gradient(#000, #000);
  -webkit-mask-composite: source-over; mix-blend-mode: multiply; }
.memo-stamp b { display: block; font-size: 18px; letter-spacing: .08em; margin: 2px 0; }

/* the desk phone's number: red, glowing, and it flickers like an old sign */
.kit-phone .phone-num { animation: phone-flicker 4.2s steps(1) infinite; }
@keyframes phone-flicker {
  0%, 18%, 22%, 54%, 58%, 61%, 100% { opacity: 1; }
  19%, 21%, 55%, 57%, 60% { opacity: .12; }
  20%, 56% { opacity: .55; }
  80% { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) { .kit-phone .phone-num { animation: none; } }