/* ─── FLOATING GLASS CHROME ──────────────────────────────────────────
   The site's navigation is the floorplan, so there is no nav bar. What
   floats on the page instead is ONE glass container in the top-right
   corner holding the controls: a back chip on case studies, the
   wordmark, quick contact, and the plan.

   One container, not four. Each control used to carry its own .glass,
   which stacked four backdrop-filters side by side — and blur beside
   blur beside blur reads as four separate widgets that happen to be
   adjacent, rather than as one piece of chrome. The shell is the glass
   now; the controls are shapes inside it.

   The treatment is expressed as tokens rather than literal values, so
   the light exhibition room is a token swap rather than a rewrite of
   every surface.
   ──────────────────────────────────────────────────────────────────── */

:root {
  --glass-bg: rgba(237, 233, 225, 0.055);
  --glass-edge: rgba(237, 233, 225, 0.13);
  --glass-edge-lit: rgba(237, 233, 225, 0.22); /* top highlight */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --glass-blur: blur(20px) saturate(140%);
  /* Used where blur is unavailable — see @supports below. */
  --glass-solid: rgba(14, 14, 14, 0.93);
  /* The rail carries a heavier scrim than the panel. The panel can afford
     a thin tint because the dialog dims the whole page behind it first;
     the rail floats over whatever the page happens to put there — a dark
     hero on one page, a pale clay photograph on the next — and light text
     on 5% tint disappears over the pale one. */
  --glass-bg-rail: rgba(14, 14, 14, 0.55);
}

/* ── THE CHROME IS NOT IN THE ROOM ──────────────────────────
   The rail and the floorplan are the same dark object on every page,
   including the light exhibition one. They are how you move between
   rooms, so belonging to one of them was the mistake: a visitor learns
   the nav once, and it should not change identity underneath them.

   This block used to invert the glass for the exhibition room, which
   gave that page a pale nav on a pale ground — the "too light" it was
   reported as. Rather than tuning that inversion, the chrome now resets
   the neutral tokens for its own subtree, so every rule inside it reads
   dark-room values wherever the page happens to be standing.

   --accent is the exception: it comes from --accent-chrome, because the
   exhibition room's own accent is a deep green tuned for a cream wall
   and would nearly vanish on near-black. There it hands over the bright
   mint instead, at 8.42:1. */
.rail,
.plan {
  --fg: #ede9e1;
  --fg-mid: rgba(237, 233, 225, 0.62);
  --fg-dim: rgba(237, 233, 225, 0.42);
  --line: rgba(237, 233, 225, 0.1);
  --line-2: rgba(237, 233, 225, 0.18);
  --surface: #141414;
  --surface-2: #101010;
  --accent: var(--accent-chrome);
  --glass-bg: rgba(237, 233, 225, 0.055);
  --glass-edge: rgba(237, 233, 225, 0.13);
  --glass-edge-lit: rgba(237, 233, 225, 0.22);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --glass-solid: rgba(14, 14, 14, 0.93);
  /* 0.92, not the 0.55 the dark rooms used. A translucent veil takes its
     colour from whatever is behind it, so the same 55% black that reads
     near-black over a dark page composited to mid-grey over the
     exhibition room's cream — the nav looked like a different component
     on that one page. At 0.92 the ground barely shows through, so the
     rail is the same dark object everywhere; measured, it lands at rgb
     32 over cream against rgb 13 over the dark rooms, where 0.55 gave
     116 against 12. The blur survives, which is the part worth keeping. */
  --glass-bg-rail: rgba(14, 14, 14, 0.92);
  color-scheme: dark;
}

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-lit);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Without blur the panel is a barely-tinted transparent box over live
   content — unreadable. Fall back to a near-solid ground. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass-solid);
  }
}

/* ── THE RAIL: ONE GLASS CONTAINER ──────────────────────────
   Top-right on every page. The left corner is where a logo lives and
   reads as "home"; the right is where controls live and reads as "things
   I can do" — which is what this row is.

   The rail carries .glass itself, so the whole row is a single pane with
   the controls sitting on it. It is a pill, because everything in it is
   a pill. */
.rail {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 999px;
  /* Heavier than the dialog panel's tint. The panel can afford a thin one
     because the dialog dims the page behind it first; the rail floats
     over whatever the page happens to put there — a dark hero on one
     page, a pale clay photograph on the next. */
  background: var(--glass-bg-rail);
}
/* After .rail, so the no-blur fallback still wins over the tint above. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rail {
    background: var(--glass-solid);
  }
}

/* ── THE CONTROLS ───────────────────────────────────────────
   Wordmark, contact, plan — in that order, left to right, with the plan
   in the corner. They share a height AND a radius so the row reads as one
   object: set once here rather than four times, because four paddings
   that happen to agree today will not agree after the next change.

   Everything is a pill. The wordmark used to be a 2px rectangle beside a
   999px contact pill, which made the row look assembled from parts. */
:root {
  --rail-h: 2.15rem;
}

.mark,
.hail,
.plan-btn,
.back-chip {
  height: var(--rail-h);
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 999px;
}

/* The three that are not the contact button read as inset shapes on the
   pane rather than as objects floating over it: a tint and a hairline,
   no blur or shadow of their own — the shell already carries both. */
.mark,
.plan-btn,
.back-chip {
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
}

/* ── WORDMARK ───────────────────────────────────────────────
   The name, and a way home. It used to be the plan trigger as well,
   which asked one control to be both identity and navigation; the plan
   glyph does the navigating now and says so by being a drawing of the
   building. */
.mark {
  gap: 0.6rem;
  padding: 0 0.9rem;
  font-family: var(--serif);
  font-size: var(--text-7);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--ls-body);
  color: var(--fg);
  text-decoration: none;
  transition:
    border-color var(--fast),
    color var(--fast);
}
.mark em {
  font-style: italic;
  color: var(--accent);
}
.mark:hover,
.mark:focus-visible {
  border-color: var(--accent);
}

/* ── QUICK CONTACT ──────────────────────────────────────────
   A green pill rather than more glass: this is the one thing on the page
   asking to be pressed, and glass on glass on glass gives a visitor no
   reason to press any of it. Mint is the site's existing green — the
   Industrial accent — so it is a colour the palette already owns rather
   than a new one introduced for a button.

   It keeps its green in every room, including the light exhibition one,
   because a call to action that changes colour room to room stops being
   recognisable as the same control. */
.hail {
  gap: 0.45rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: var(--mint);
  border: 1px solid var(--mint);
  font-family: var(--sans);
  font-size: var(--text-2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-track);
  text-transform: uppercase;
  /* Measured: near-black on mint is 8.83:1, and 10.62:1 on the hover
     shade. The site's own --fg on mint is 1.81:1 — nowhere near legible,
     which is why this one control does not use it. */
  color: #0a0f0d;
  text-decoration: none;
  transition:
    background var(--fast),
    border-color var(--fast),
    transform var(--fast);
}
.hail__glyph {
  width: 13px;
  height: 11px;
  flex-shrink: 0;
}
.hail:hover,
.hail:focus-visible {
  background: #7fd0af;
  border-color: #7fd0af;
}

/* ── THE PLAN ───────────────────────────────────────────────
   The building in miniature, in the corner where the controls end. Round
   like everything else in the row — the drawing inside it is what says
   "plan", and it says it better than a square border did. */
.plan-btn {
  justify-content: center;
  width: var(--rail-h);
  padding: 0;
  color: var(--fg);
  cursor: pointer;
  transition: border-color var(--fast);
}
.plan-btn:hover,
.plan-btn:focus-visible {
  border-color: var(--accent);
}
.plan-btn__glyph {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  overflow: visible;
  transition:
    width var(--slow),
    height var(--slow);
}
.plan-btn__glyph rect {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: 0.55;
  transition:
    fill var(--fast),
    opacity var(--fast);
}
.plan-btn:hover .plan-btn__glyph rect,
.plan-btn:focus-visible .plan-btn__glyph rect {
  opacity: 0.9;
}

/* Each cell lights in the colour of the room it stands for, from the same
   tokens the rooms use — so a room that is recoloured is recoloured here
   too. Only meaningful once the glyph is large enough to aim at. */
.plan-btn__glyph rect[data-plan-room="physical"]:hover   { fill: var(--mint);  opacity: 1; }
.plan-btn__glyph rect[data-plan-room="digital"]:hover    { fill: var(--pink);  opacity: 1; }
.plan-btn__glyph rect[data-plan-room="exhibition"]:hover { fill: var(--cream); opacity: 1; }
.plan-btn__glyph rect[data-plan-room="play"]:hover       { fill: var(--gold);  opacity: 1; }
.plan-btn__glyph rect[data-plan-room="office"]:hover     { fill: var(--rose);  opacity: 1; }

/* ── BACK CHIP ──────────────────────────────────────────────
   Case studies only. Carries its room's accent so the way back is
   colour-coded to where it goes. */
.back-chip {
  gap: 0.4rem;
  padding: 0 0.75rem;
  font-family: var(--sans);
  font-size: var(--text-2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-track);
  text-transform: uppercase;
  color: var(--fg-dim);
  text-decoration: none;
  transition:
    color var(--fast),
    border-color var(--fast);
}
/* The arrow is an SVG, not a "←" in ::before content. The display faces
   do not all carry U+2190, and the fallback rendered as a low dash. */
.back-chip__arrow {
  width: 12px;
  height: 9px;
  flex-shrink: 0;
}
.back-chip:hover,
.back-chip:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── NARROW SCREENS ─────────────────────────────────────────
   The words go, the glyphs stay: four controls at full width would push
   a phone sideways. */
@media (max-width: 620px) {
  .rail {
    top: var(--space-2);
    right: var(--space-2);
    max-width: calc(100vw - var(--space-4));
  }
  .mark {
    font-size: var(--text-6);
    padding: 0 0.7rem;
  }
  .back-chip,
  .hail {
    padding: 0 0.6rem;
  }
  /* The envelope and the arrow carry the meaning on their own here; both
     controls keep an aria-label, so nothing is lost to a screen reader. */
  .hail span,
  .back-chip span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark,
  .hail,
  .plan-btn,
  .back-chip,
  .plan-btn__glyph {
    transition: none;
  }
}

/* ── THE ENTRANCE BEACON ────────────────────────────────────
   index.html only. The hero already says the name in full, so the rail
   does not repeat it: there the plan stands alone in the corner, larger,
   and the container and its other controls arrive once the hero has
   scrolled past.

   The wordmark and contact are display:none rather than opacity:0 here.
   With the glass on the row itself, two invisible-but-present controls
   would hold open an empty pill the width of the name — the old
   opacity-only hide was invisible only because there was no container
   behind it to leave empty. */
.rail--beacon {
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    padding var(--slow),
    background var(--slow),
    border-color var(--slow),
    box-shadow var(--slow);
}
.rail--beacon.is-stuck {
  padding: 0.3rem;
  background: var(--glass-bg-rail);
  border-color: var(--glass-edge);
  border-top-color: var(--glass-edge-lit);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.rail--beacon .mark,
.rail--beacon .hail {
  display: none;
}
.rail--beacon.is-stuck .mark,
.rail--beacon.is-stuck .hail {
  display: inline-flex;
  /* An animation rather than a transition, because there is no "before"
     state to transition from once the element goes from display:none. */
  animation: railArrive var(--slow) var(--ease) both;
}
@keyframes railArrive {
  from { opacity: 0; transform: translateX(0.5rem); }
  to   { opacity: 1; transform: none; }
}

.rail--beacon .plan-btn {
  height: 56px;
  width: 56px;
  background: transparent;
  border-color: transparent;
  transition:
    height var(--slow),
    width var(--slow),
    background var(--slow),
    border-color var(--slow);
}
.rail--beacon .plan-btn__glyph {
  width: 40px;
  height: 40px;
}
.rail--beacon.is-stuck .plan-btn {
  height: var(--rail-h);
  width: var(--rail-h);
  background: var(--glass-bg);
  border-color: var(--glass-edge);
}
.rail--beacon.is-stuck .plan-btn__glyph {
  width: 15px;
  height: 15px;
}

/* Hover: the plan pans out, big enough that a single room is a target you
   can actually aim at — which is what makes the per-room colours worth
   having. */
.rail--beacon.is-stuck .plan-btn:hover,
.rail--beacon.is-stuck .plan-btn:focus-visible {
  height: 88px;
  width: 88px;
  border-radius: 14px;
}
.rail--beacon.is-stuck .plan-btn:hover .plan-btn__glyph,
.rail--beacon.is-stuck .plan-btn:focus-visible .plan-btn__glyph {
  width: 68px;
  height: 68px;
}

@media (max-width: 620px) {
  .rail--beacon .plan-btn {
    height: 38px;
    width: 38px;
  }
  .rail--beacon .plan-btn__glyph {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail--beacon,
  .rail--beacon .plan-btn,
  .rail--beacon .plan-btn__glyph {
    transition: none;
  }
  .rail--beacon.is-stuck .mark,
  .rail--beacon.is-stuck .hail {
    animation: none;
  }
}