/* mutinoise — THE FURNITURE.
   ONE file for the objects that appear on every page, so a page can never invent its own version
   of something that already exists. theme.css holds the colours and the two ladders (type and
   space); this holds the things you can point at.

   It exists because the syndrome page grew its own vocabulary — a "spine" where there was already
   a gauge, the word "scroll" where there was already an arrow — purely because the language lived
   inside home.html instead of in a file both pages could link. Anything shared belongs here. A
   page supplies content; it does not re-describe the room.

   THE OBJECTS
     .mark      the signet, top-left. The way home, on every page — the machine keeps its
                hidden note behind the colophon on the last floor instead.
     .lamp      the ground toggle, top-right. Lives in theme.css — it is a colour control.
     .gauge     ticks down the left edge: where you are, and how much is left.
     .hall      the floor number and the section name, bottom-left.
     .hdown     the arrowhead that breathes, saying the movement is vertical.
     .rule      a hairline across the top that fills as you read.
     .back      the way out, set on the text column rather than the window.

   Every distance below is a rung of the space ladder. None of them is a number chosen by eye. */

/* ── THE SIGNET ───────────────────────────────────────────────────────────────────────────────
   Sized per context, because the crest is cut OUT of a disc and needs real pixels before its three
   petals separate: 20px on a phone is 40–60 device pixels and clean, while 20px on a 1× desktop is
   20 device pixels and a smudge. It grows where it starves. */
.mark{
  position:fixed; left:max(18px,env(safe-area-inset-left)); top:max(18px,env(safe-area-inset-top));
  z-index:30; appearance:none; -webkit-appearance:none; background:none; border:0; padding:10px;
  margin:0; cursor:pointer; line-height:0; opacity:.86; transition:opacity .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.mark:hover,.mark:focus-visible{ opacity:1 }
.mark:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:999px }
.mark svg{ width:20px; height:auto; display:block }
@media(min-width:760px){ .mark svg{ width:26px } }

/* ── THE DUST ON THE MARK ─────────────────────────────────────────────────────────────────────
   The signet is no longer a flat disc of ink: it is filled with the DUST — the one place colour
   is allowed in this whole product — and the colour drifts across it over sixteen seconds. The
   crest stays a true cut, because the shape is applied as a MASK: the painted disc is opaque and
   the crest is transparent, so the ground shows through it in either room, exactly as before.

   THE STACK IS COPIED VERBATIM AND MUST STAY THAT WAY. Its own comment records why: rose against
   blue in this order transited LILAC (CIELAB hue 285–335°), which is the one band this brand never
   uses, and every pairwise and stacked mix was audited clear of it. Re-ordering the stops, or
   adding one, re-opens an audit that has already been passed. Night is a deep sea here, never a
   blue. */
.mark .disc,.disc{
  display:block; width:20px; aspect-ratio:1;
  background:
    radial-gradient(50% 55% at 32% 30%,#dba0a4 0%,rgba(219,160,164,0) 60%),
    radial-gradient(52% 56% at 44% 46%,#d3969e 0%,rgba(211,150,158,0) 62%),
    radial-gradient(56% 52% at 72% 30%,#cda06f 0%,rgba(205,160,111,0) 60%),
    radial-gradient(54% 58% at 30% 74%,#6fa39a 0%,rgba(111,163,154,0) 60%),
    radial-gradient(58% 58% at 78% 74%,#5c938b 0%,rgba(92,147,139,0) 60%),
    #6b6258;
  background-size:180% 180%;
  animation:dust 16s ease-in-out infinite alternate;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%20role%3D%22img%22%20aria-label%3D%22mutinoise%22%3E%20%3Cdefs%3E%20%3Cmask%20id%3D%22k%22%20maskContentUnits%3D%22userSpaceOnUse%22%3E%20%3Ccircle%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%2264%22%20fill%3D%22%23fff%22%2F%3E%20%3Cg%20fill%3D%22%23000%22%20transform%3D%22translate%2864%2C64%29%20scale%280.111156%29%20translate%28-511.6%2C-511.6%29%22%3E%3Cg%20transform%3D%22translate%28161%2084%29%20scale%280.85%29%22%3E%20%3Cpath%20d%3D%22M412.5%2056%20C425%2073%20449%20122%20464%20182%20C474%20222%20483%20272%20485.5%20335%20C485.5%20375%20481%20430%20473%20460%20C464%20500%20447%20528%20412.5%20541%20C378%20528%20361%20500%20352%20460%20C344%20430%20339.5%20375%20339.5%20335%20C342%20272%20351%20222%20361%20182%20C376%20122%20400%2073%20412.5%2056%20Z%22%2F%3E%20%3Cg%20transform%3D%22rotate%28-49.5%20412.5%20541%29%20translate%28412.5%20541%29%20scale%280.946%29%20translate%28-412.5%20-541%29%22%3E%3Cpath%20d%3D%22M412.5%2056%20C425%2073%20449%20122%20464%20182%20C474%20222%20483%20272%20485.5%20335%20C485.5%20375%20481%20430%20473%20460%20C464%20500%20447%20528%20412.5%20541%20C378%20528%20361%20500%20352%20460%20C344%20430%20339.5%20375%20339.5%20335%20C342%20272%20351%20222%20361%20182%20C376%20122%20400%2073%20412.5%2056%20Z%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate%2849.5%20412.5%20541%29%20translate%28412.5%20541%29%20scale%280.946%29%20translate%28-412.5%20-541%29%22%3E%3Cpath%20d%3D%22M412.5%2056%20C425%2073%20449%20122%20464%20182%20C474%20222%20483%20272%20485.5%20335%20C485.5%20375%20481%20430%20473%20460%20C464%20500%20447%20528%20412.5%20541%20C378%20528%20361%20500%20352%20460%20C344%20430%20339.5%20375%20339.5%20335%20C342%20272%20351%20222%20361%20182%20C376%20122%20400%2073%20412.5%2056%20Z%22%2F%3E%3C%2Fg%3E%20%3Crect%20x%3D%22242%22%20y%3D%22520%22%20width%3D%22340%22%20height%3D%2276%22%20rx%3D%2238%22%2F%3E%20%3Crect%20x%3D%22220%22%20y%3D%22588%22%20width%3D%22385%22%20height%3D%22189%22%20rx%3D%2242%22%2F%3E%20%3Ccircle%20cx%3D%22412.5%22%20cy%3D%22860%22%20r%3D%2290%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%20%3C%2Fmask%3E%20%3C%2Fdefs%3E%20%3Ccircle%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%2264%22%20fill%3D%22%23000%22%20mask%3D%22url%28%23k%29%22%2F%3E%20%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%20role%3D%22img%22%20aria-label%3D%22mutinoise%22%3E%20%3Cdefs%3E%20%3Cmask%20id%3D%22k%22%20maskContentUnits%3D%22userSpaceOnUse%22%3E%20%3Ccircle%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%2264%22%20fill%3D%22%23fff%22%2F%3E%20%3Cg%20fill%3D%22%23000%22%20transform%3D%22translate%2864%2C64%29%20scale%280.111156%29%20translate%28-511.6%2C-511.6%29%22%3E%3Cg%20transform%3D%22translate%28161%2084%29%20scale%280.85%29%22%3E%20%3Cpath%20d%3D%22M412.5%2056%20C425%2073%20449%20122%20464%20182%20C474%20222%20483%20272%20485.5%20335%20C485.5%20375%20481%20430%20473%20460%20C464%20500%20447%20528%20412.5%20541%20C378%20528%20361%20500%20352%20460%20C344%20430%20339.5%20375%20339.5%20335%20C342%20272%20351%20222%20361%20182%20C376%20122%20400%2073%20412.5%2056%20Z%22%2F%3E%20%3Cg%20transform%3D%22rotate%28-49.5%20412.5%20541%29%20translate%28412.5%20541%29%20scale%280.946%29%20translate%28-412.5%20-541%29%22%3E%3Cpath%20d%3D%22M412.5%2056%20C425%2073%20449%20122%20464%20182%20C474%20222%20483%20272%20485.5%20335%20C485.5%20375%20481%20430%20473%20460%20C464%20500%20447%20528%20412.5%20541%20C378%20528%20361%20500%20352%20460%20C344%20430%20339.5%20375%20339.5%20335%20C342%20272%20351%20222%20361%20182%20C376%20122%20400%2073%20412.5%2056%20Z%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate%2849.5%20412.5%20541%29%20translate%28412.5%20541%29%20scale%280.946%29%20translate%28-412.5%20-541%29%22%3E%3Cpath%20d%3D%22M412.5%2056%20C425%2073%20449%20122%20464%20182%20C474%20222%20483%20272%20485.5%20335%20C485.5%20375%20481%20430%20473%20460%20C464%20500%20447%20528%20412.5%20541%20C378%20528%20361%20500%20352%20460%20C344%20430%20339.5%20375%20339.5%20335%20C342%20272%20351%20222%20361%20182%20C376%20122%20400%2073%20412.5%2056%20Z%22%2F%3E%3C%2Fg%3E%20%3Crect%20x%3D%22242%22%20y%3D%22520%22%20width%3D%22340%22%20height%3D%2276%22%20rx%3D%2238%22%2F%3E%20%3Crect%20x%3D%22220%22%20y%3D%22588%22%20width%3D%22385%22%20height%3D%22189%22%20rx%3D%2242%22%2F%3E%20%3Ccircle%20cx%3D%22412.5%22%20cy%3D%22860%22%20r%3D%2290%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%20%3C%2Fmask%3E%20%3C%2Fdefs%3E%20%3Ccircle%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%2264%22%20fill%3D%22%23000%22%20mask%3D%22url%28%23k%29%22%2F%3E%20%3C%2Fsvg%3E");
  -webkit-mask-size:contain;         mask-size:contain;
  -webkit-mask-repeat:no-repeat;     mask-repeat:no-repeat;
  -webkit-mask-position:center;      mask-position:center;
}
@media(min-width:760px){ .mark .disc{ width:26px } }
@keyframes dust{ to{ background-position:100% 100% } }
@media(prefers-reduced-motion:reduce){ .mark .disc{ animation:none } }

/* ── THE HOUSE BAR ────────────────────────────────────────────────────────────────────────────
   One bar, every inside page, mounted by theme.js from a single copy. Liquid glass at the thin
   blur (it sits over moving content), hairline on the bottom edge only. Anatomy, left to right:
   the signet (the way to the studio), the app's word (the way to the gate), the lamp, and the
   flight chip. The doors of the house carry no bar — they ARE the house. */
.housebar{
  position:fixed; inset:0 0 auto 0; z-index:45;
  height:calc(52px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 12px 0 8px;
  display:flex; align-items:center; gap:2px;
  background:color-mix(in srgb, var(--paper) 55%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--hair);
}
@supports not (backdrop-filter: blur(1px)){ .housebar{ background:var(--paper) } }
.housebar .bmark{display:block;padding:9px;line-height:0;opacity:.86;border-bottom:0;
  transition:opacity .3s ease;-webkit-tap-highlight-color:transparent}
@media(hover:hover){ .housebar .bmark:hover{opacity:1} }
.housebar .bmark:focus-visible{opacity:1;outline:2px solid var(--focus);outline-offset:2px;border-radius:999px}
.housebar .bword{
  font-family:"EBG",Georgia,serif;font-weight:600;font-size:var(--t-m);
  color:var(--ink);text-decoration:none;border-bottom:0;padding:6px 4px;letter-spacing:.01em;
}
@media(hover:hover){ .housebar .bword:hover{border-bottom:0;color:var(--ink)} }
.housebar .spacer{flex:1}
.housebar .lamp{position:static;top:auto;right:auto;padding:9px;margin-left:4px}
.housebar .schip{
  font-family:"EBG",Georgia,serif;font-weight:600;font-size:var(--t-xs);
  background:var(--ink);color:var(--paper);
  padding:8px 15px;border-radius:999px;text-decoration:none;border-bottom:0;
  box-shadow:0 1.5px 2px var(--cast);
  transition:transform .15s ease, box-shadow .2s ease;
  margin-left:6px;
}
@media(hover:hover){ .housebar .schip:hover{transform:translateY(-1px);box-shadow:0 4px 5px var(--lift);border-bottom:0;color:var(--paper)} }
.housebar .schip:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.housebar .schip:active{transform:translateY(1px);box-shadow:0 0.5px 1px var(--cast)}
@media(prefers-reduced-motion:reduce){ .housebar .schip,.housebar .bmark{transition:none} }
@media print{ .housebar{display:none !important} }

/* ── THE GAUGE ────────────────────────────────────────────────────────────────────────────────
   A column, never a row. A row of dots along the bottom is the universal "swipe sideways" signal,
   and everything here moves down — the machine through its floors, the document through its
   screens. The ticks are the count, so no page has to claim a number in words. */
.gauge{
  position:fixed; left:max(14px,env(safe-area-inset-left)); top:50%; transform:translateY(-50%);
  z-index:20; display:flex; flex-direction:column; gap:6px; pointer-events:none;
}
.gauge i{ width:5px; height:5px; border-radius:999px; background:var(--hair); display:block;
  transition:background .35s ease }
.gauge i.seen{ background:var(--faint) }
.gauge i.on{ background:var(--dim) }

/* ── WHERE AM I ───────────────────────────────────────────────────────────────────────────────
   Bottom-left, on the same side as the gauge, so position and progress read as one instrument. */
.hall{ position:fixed; inset:0; pointer-events:none; z-index:20 }
.hall .floorno{
  position:absolute; left:max(14px,env(safe-area-inset-left));
  bottom:calc(max(16px,env(safe-area-inset-bottom)) + 2px);
  font-family:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:var(--t-2xs);
  letter-spacing:.16em; color:var(--dim); margin:0;
}
.hall .floorno b{
  display:block; color:var(--ink); font-weight:400; font-size:var(--t-l); letter-spacing:-.02em;
  font-family:"EBG",Georgia,serif; line-height:1; margin-bottom:var(--s-1);
}

/* ── THE ARROW ────────────────────────────────────────────────────────────────────────────────
   Only the head — a bare angle, symmetrical about its own centre line. It breathes rather than
   points: 4.2s, sinking five pixels while the opacity eases, so it moves like the thing it belongs
   to instead of nudging you.

   IT SITS IN THE FLOW. Its distance from the text is one rung of the space ladder, which means the
   composition is arithmetic and identical on every screen. It used to be pinned to the viewport at
   top:calc(50% + 21.5vh) — a number tuned until it looked right, which is the painter's method and
   not the mathematician's. */
.hdown{
  display:block; width:26px; height:14px; margin:var(--s-9) auto 0; overflow:visible;
  animation:sink 4.2s cubic-bezier(.45,0,.55,1) infinite;
}
.hdown path{
  fill:none; stroke:var(--faint); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
@keyframes sink{
  0%,100%{ transform:translateY(-2px); opacity:.45 }
  50%    { transform:translateY(3px);  opacity:1 }
}

/* ── THE READING RULE ─────────────────────────────────────────────────────────────────────────
   The document's version of the gauge, making the same promise: this has a bottom. */
.rule{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--dim); z-index:80 }

/* ── THE WAY OUT ──────────────────────────────────────────────────────────────────────────────
   Centred on the text column, not on the window, so it lines up with what it follows. */
.back{
  display:block; text-align:center; max-width:44rem; margin:var(--s-11) auto var(--s-11);
  font-size:var(--t-m); color:var(--muted);
}

/* ── THE SHEET ────────────────────────────────────────────────────────────────────────────────
   A document can be pushed aside with a rightward drag, and it tracks the finger the whole way
   rather than firing once at the end — the difference between a gesture and a shortcut. */
.sheet{ will-change:transform }
.sheet.settling{ transition:transform .34s cubic-bezier(.22,.68,.24,1) }
.sheet.leaving{ transition:transform .26s cubic-bezier(.4,0,1,1), opacity .26s ease }

@media(prefers-reduced-motion:reduce){
  .hdown{ animation:none }
  .gauge i,.sheet,.sheet.settling,.sheet.leaving{ transition:none }
}