/* HAUTE LUMIÈRE — the bar.
 *
 * The house header, on every page, whether the page was built with one or not.
 * bar.js mounts it; this is what it wears. Self-contained on purpose: it needs
 * only --paper, --ink, --gold and --veil, which sky.css guarantees on every
 * surface in the house, and it declares its own fallback for everything else.
 * Nothing here touches the page's own type, rule, radius or plate.
 *
 * Radius zero. Gold is a mark, never a fill. The bar does not breathe.
 */

.hlbar{
  --hlb-h:46px;
  --hlb-sans:var(--sans,'Manrope',system-ui,-apple-system,sans-serif);
  --hlb-ink:var(--ink,#33201A);
  /* THE BAR IS NOT THE PAGE. It sits on rgba(var(--veil),.055) with a 16px
     blur behind it, so its ground is always a little darker than the paper the
     page measured its own muted against. Live on a chapter page that was the
     difference between 5.00 : 1 and 4.48 : 1 in daylight — under AA by two
     hundredths, which is still under. So the bar's muted is the page's muted
     carried 15% toward the ink: enough to pay for the veil, not enough to stop
     the rooms being quiet. */
  --hlb-muted:color-mix(in srgb, var(--text-muted,var(--muted,#7A5B4C)) 85%, var(--ink,#33201A));
  --hlb-gold:var(--gold,#D69A4C);
  --hlb-gold-d:var(--gold-d,var(--gold,#D69A4C));
  --hlb-rule:var(--rule,rgba(var(--veil,51,32,26),.18));
  --hlb-ease:cubic-bezier(.165,.84,.44,1);

  position:fixed;top:0;left:0;right:0;z-index:400;height:var(--hlb-h);
  display:flex;align-items:center;gap:clamp(10px,1.8vw,22px);
  padding:0 clamp(10px,2vw,22px);
  background:rgba(var(--veil,51,32,26),.055);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--hlb-rule);
  border-radius:0;
  box-sizing:border-box;
}
.hlbar *{box-sizing:border-box}
 /* THE ROOMS, MEASURED — 9 September 2026.
    ------------------------------------------------------------------
    This was a fixed 74% share of the ink, chosen because --muted used to sit
    too close to the paper in the dark three. The reasoning was right and the
    instrument was wrong: 74% ALPHA over the bar's near-transparent ground
    measures 3.29 : 1 in aurora, 3.40 in daylight, 3.41 in solstice and 3.29 in
    dusk — under AA, at 10.5px, uppercase and tracked to .2em, which is the
    hardest thing to read on any page in this house.

    --text-muted is the token that exists for exactly this, and it has since
    been measured and lifted in the two registers where it did not clear: it now
    runs 5.00 – 6.15 : 1 across all seven. So the rooms take it, the ink is what
    hovering gives you, and nothing is dimmed with alpha. */
.hlbar a{color:var(--hlb-muted);text-decoration:none;transition:color 400ms var(--hlb-ease)}
.hlbar button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.hlbar .mark{display:flex;align-items:center;gap:9px;flex:none;color:var(--hlb-ink)}
.hlbar .mark svg{width:15px;height:15px;overflow:visible;flex:none}
.hlbar .mark span{font-family:var(--hlb-sans);font-size:7.5px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--hlb-ink);white-space:nowrap}

/* THE ROOMS.
 *
 * The list used to be nine items at 7.5px in a horizontally scrolling strip —
 * which is why it was unreadable on a laptop and invisible on a phone, and why
 * a drop could never have worked here: `overflow-x:auto` clips an absolutely
 * positioned panel, so the menu would have been cut off at the strip's edge.
 *
 * It is five items now, so it fits without scrolling at any width, the type
 * scales with the viewport instead of sitting at one hairline size, and the
 * panels have somewhere to open into. */
.hlbar .site{
  display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);
  flex:1 1 auto;min-width:0;
}
.hlbar .site a,
.hlbar .site .head{
  font-family:var(--hlb-sans);
  font-size:clamp(8.5px,.62vw + 6px,11px);
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.5em;
  height:var(--hlb-h);           /* the whole bar height is the target */
}
.hlbar .site a:hover,
.hlbar .site .head:hover{color:var(--hlb-ink)}
/* THE ROOM YOU ARE STANDING IN. Gold carries display type only — --gold-d
   measures 3.64 – 3.79 : 1 on paper in the light registers, which clears AA for
   a headline and clears nothing at 10.5px. So the current room is marked the
   way this house marks anything: full ink, and a gold hairline under it. Gold
   is a mark, never a fill, and never a letter this small. */
.hlbar .site a[aria-current="page"],
.hlbar .site .head[aria-current="page"]{
  color:var(--hlb-ink);
  box-shadow:inset 0 -1px 0 0 var(--hlb-gold);
}
.hlbar .site a:focus-visible,
.hlbar .site .head:focus-visible{outline:1px solid var(--hlb-gold);outline-offset:-4px}

/* THE DROP. Gold is a mark, never a fill: the open head is marked by a hairline
   under it, not by a block of colour behind it. Radius zero. The panel is a
   sheet lifted off the page, so it casts distance and nothing else. */
.hlbar .drop{position:relative;display:inline-flex;align-items:center}
.hlbar .drop .head{color:var(--hlb-muted);cursor:pointer}
.hlbar .drop .head .chev{
  width:7px;height:5px;flex:none;opacity:.55;
  transition:transform 400ms var(--hlb-ease),opacity 400ms var(--hlb-ease);
}
.hlbar .drop .head[aria-expanded="true"]{color:var(--hlb-ink);
  box-shadow:inset 0 -1px 0 0 var(--hlb-gold)}
.hlbar .drop .head[aria-expanded="true"] .chev{transform:rotate(180deg);opacity:.9}

.hlbar .drop .panel{
  position:absolute;top:calc(var(--hlb-h) - 1px);left:0;z-index:401;
  display:flex;flex-direction:column;
  min-width:15em;max-width:min(30em,88vw);
  padding:.7em 0;
  background:var(--paper,#FBF4EA);
  border:1px solid var(--hlb-rule);border-radius:0;
  /* The panel is a sheet off the desk, so it casts the sheet's shadow and
     nothing else. sky.css defines it on every surface in the house; the
     fallback is the same distance, written out, for a page that loads the bar
     without the sky. */
  box-shadow:var(--shadow-sheet,0 18px 44px -22px rgba(var(--veil,51,32,26),.55));
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity 200ms var(--hlb-ease),transform 200ms var(--hlb-ease),
             visibility 0s linear 200ms;
}
.hlbar .drop .head[aria-expanded="true"] + .panel{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
/* Read aloud, therefore serif. The heads above are furniture; these are titles. */
.hlbar .drop .panel a{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:clamp(15px,.5vw + 13px,17px);
  font-weight:400;letter-spacing:0;text-transform:none;
  line-height:1.35;white-space:normal;
  height:auto;min-height:44px;display:flex;align-items:center;
  padding:.42em 1.5em;color:var(--hlb-muted);
}
.hlbar .drop .panel a:hover{color:var(--hlb-ink)}
.hlbar .drop .panel a[aria-current="page"]{
  color:var(--hlb-ink);
  box-shadow:inset 2px 0 0 0 var(--hlb-gold);
}
/* A hairline between the rooms and the issues under them. */
.hlbar .drop .panel a:nth-child(3){
  padding-bottom:1em;margin-bottom:.5em;border-bottom:1px solid var(--hlb-rule);
}

.hlbar .clock{width:24px;height:24px;flex:none;border-radius:50%;
  transition:transform 400ms var(--hlb-ease)}
.hlbar .clock:hover{transform:scale(1.1)}
.hlbar .clock svg{width:100%;height:100%;display:block;overflow:visible}
.hlbar .clock .ring{fill:none;stroke:var(--hlb-muted);stroke-width:1.6;opacity:.65}
.hlbar .clock .tick{stroke:var(--hlb-muted);stroke-width:1;opacity:.5}
.hlbar .clock .hand{stroke:var(--hlb-gold);stroke-linecap:round}
.hlbar .clock .hr{stroke-width:2.2}
.hlbar .clock .mn{stroke-width:1.4}
.hlbar .clock .pin{fill:var(--hlb-gold)}

.hlbar .switch{display:flex;gap:8px;align-items:center;flex:none}
.hlbar .switch button{width:19px;height:19px;border-radius:50%;
  border:1px solid var(--hlb-rule);font-size:0;
  transition:box-shadow 400ms var(--hlb-ease),transform 400ms var(--hlb-ease)}
.hlbar .switch button:hover{transform:scale(1.16)}
.hlbar .switch button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--hlb-gold);transform:scale(1.2)}

/* The one thing the bar is allowed to do to the page: make room for itself.
   Set by bar.js only when it actually mounted a bar, and only when the page
   was not already offset for one of its own. */
html.hl-has-bar body{padding-top:var(--hl-bar-h,46px)}
/* A page that carried its own register switcher hands the job to the bar.
   Three surfaces spelled that element three different ways before the bar
   existed — `.hl-regsw` on the issues, `#registers` on the Library, `.regsw` on
   the older reading rooms — so all three are named here. Leaving one out is
   visible: the Library showed its own seven swatches in a rounded panel hanging
   directly under the bar's seven swatches, at a size nobody could read, with a
   corner radius this house does not use. */
html.hl-has-bar :is(.hl-regsw, .regsw, #registers){display:none!important}

/* SCALING. The bar keeps every room at every width — nothing is hidden, only
   made to fit. Below 620 the seven register swatches would crowd the rooms out,
   so they go and the clock stays: a reader on a phone can still follow the
   light, and the register they chose on a laptop travels with them anyway. */
/* SIX ROOMS, 28 Aug 2026. The Constellation and Tantra took their own
   hostnames and the bar took two more rooms, which is one more than the width
   this was tuned for: between about 900 and 1300 the last room used to run
   under the clock and the register switch. Nothing is hidden to fix it — the
   furniture is simply made smaller, in the order a reader would miss it least:
   the wordmark beside the monogram first, then the tracking, then the size. */
@media (max-width:1300px){
  .hlbar .mark span{display:none}
  .hlbar .site{gap:clamp(9px,1.2vw,17px)}
  .hlbar .site a,.hlbar .site .head{letter-spacing:.155em;font-size:clamp(8.5px,.5vw + 5px,10.5px)}
  .hlbar .switch{gap:6px}
  .hlbar .switch button{width:17px;height:17px}
}
@media (max-width:900px){ .hlbar .mark span{display:none} }
@media (max-width:700px){
  .hlbar{gap:clamp(8px,2vw,14px);padding:0 clamp(8px,2.4vw,14px)}
  .hlbar .site{gap:clamp(9px,2.6vw,16px)}
}
@media (max-width:620px){ .hlbar .switch{display:none} }
@media (max-width:560px){
  /* The panel stops hanging off its head and becomes a sheet under the bar. */
  .hlbar .drop{position:static}
  .hlbar .drop .panel{
    left:clamp(8px,2.4vw,14px);right:clamp(8px,2.4vw,14px);
    min-width:0;max-width:none;max-height:min(70vh,32em);overflow-y:auto;
  }
}
@media (max-width:400px){
  .hlbar .site a,.hlbar .site .head{letter-spacing:.14em}
}
@media print{ .hlbar{display:none} html.hl-has-bar body{padding-top:0} }

/* A passage the reader kept. Gold is a mark, never a fill — so the mark is a
   rule under the words, not a block of colour over them. */
::highlight(hl-mark){
  text-decoration:underline;
  text-decoration-color:var(--gold,#D69A4C);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  background-color:rgba(217,174,106,.10);
}