/* 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);
  --hlb-muted:var(--muted,rgba(from var(--ink,#33201A) r g b / .62));
  --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}
 /* Mixed from the ink rather than taken from --muted: every register defines
    its own muted, and in the dark three (vespers, midnight, nocturne) it sat
    close enough to the paper that the rooms were hard to read. A fixed share of
    the ink holds the same relationship in all seven. */
.hlbar a{color:color-mix(in srgb, var(--hlb-ink) 74%, transparent);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)}
.hlbar .site a[aria-current="page"],
.hlbar .site .head[aria-current="page"]{color:var(--hlb-gold-d)}
.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:color-mix(in srgb, var(--hlb-ink) 74%, transparent);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-ink);opacity:.78;
}
.hlbar .drop .panel a:hover{opacity:1;color:var(--hlb-gold-d)}
.hlbar .drop .panel a[aria-current="page"]{
  opacity:1;color:var(--hlb-gold-d);
  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. */
html.hl-has-bar .hl-regsw{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);
}