/* 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;
  /* NINE ROOMS DO NOT FIT IN A LAPTOP. Measured 9 Sep 2026 at 962px: the room
     list wanted 934px inside 678px of bar and, with overflow visible, it ran
     straight over the clock and the seven registers — on every host, because
     there is one bar. It scrolls now instead of spilling, with no scrollbar
     drawn and the last room fading at the edge so the reader can see there is
     more. The registers and the clock keep their place at every width. */
  overflow-x:auto; overflow-y:visible;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-behavior:smooth; overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
}
.hlbar .site::-webkit-scrollbar{ display:none }
/* A drop panel must not be clipped by the scroller that holds its head. */
.hlbar .site:has(.drop .head[aria-expanded="true"]){ overflow:visible; -webkit-mask-image:none; mask-image:none }
.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);
}

/* ── THE SEARCH FIELD ─────────────────────────────────────────────────────
 *
 * One field, in the bar, on every page of eleven hostnames — and a result is a
 * PASSAGE. Which is why this is a sheet under the bar rather than a dropdown
 * beside it: a page title fits in a menu, a paragraph of Cormorant does not.
 *
 * Radius zero. Gold is a mark and never a fill — the affordance is marked by a
 * hairline under it when it is open, the matched words are underlined in gold,
 * and there is no gold button, bar or panel anywhere in here. The sheet is the
 * sheet off the desk, so it casts distance and nothing else.
 *
 * Everything a human reads is Cormorant: the field itself, and every passage.
 * Manrope carries only what the reader is meant to skip — the volume line, the
 * status, the word Search.
 */
.hlbar .findgo{
  display:inline-flex;align-items:center;gap:.55em;flex:none;
  height:var(--hlb-h);min-width:44px;padding:0 2px;
  font-family:var(--hlb-sans);
  font-size:clamp(8.5px,.62cqi + 6px,11px);
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:var(--hlb-muted);cursor:pointer;border-radius:0;
  transition:color 400ms var(--hlb-ease);
}
.hlbar .findgo .lens{width:14px;height:14px;flex:none}
.hlbar .findgo:hover{color:var(--hlb-ink)}
.hlbar .findgo:focus-visible{outline:1px solid var(--hlb-gold);outline-offset:-4px}
.hlbar .findgo[aria-expanded="true"]{
  color:var(--hlb-ink);
  box-shadow:inset 0 -1px 0 0 var(--hlb-gold);
}

.hlfind{
  --hlf-sans:var(--sans,'Manrope',system-ui,-apple-system,sans-serif);
  --hlf-serif:var(--serif,'Cormorant Garamond',Georgia,serif);
  --hlf-ink:var(--ink,#33201A);
  --hlf-muted:var(--text-muted,var(--muted,#7A5B4C));
  --hlf-gold:var(--gold,#D69A4C);
  --hlf-gold-d:var(--gold-d,var(--gold,#D69A4C));
  --hlf-rule:var(--rule,rgba(var(--veil,51,32,26),.18));
  --hlf-ease:cubic-bezier(.165,.84,.44,1);
  /* THE MARK, DECLARED ONCE. Gold is a mark and never a fill, so every
     gold thing in this panel is the same hairline under the words — the
     matched term, a seed, the way out to the room. One token, so the
     three of them cannot drift apart. */
  --hlf-mark:inset 0 -1px 0 0 var(--hlf-gold);

  position:fixed;left:0;right:0;top:var(--hl-bar-h,46px);z-index:399;
  background:var(--paper,#FBF4EA);
  border-bottom:1px solid var(--hlf-rule);
  border-radius:0;
  box-shadow:var(--shadow-sheet,0 18px 44px -22px rgba(var(--veil,51,32,26),.55));
  max-height:calc(100dvh - var(--hl-bar-h,46px));
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-6px);
  transition:opacity 200ms var(--hlf-ease),transform 200ms var(--hlf-ease);
}
.hlfind *{box-sizing:border-box}
.hlfind[data-open]{opacity:1;transform:none}

.hlfind .hlf-sheet{
  max-width:62em;margin:0 auto;
  padding:clamp(14px,2.2cqi,26px) clamp(16px,3cqi,34px) clamp(20px,3cqi,34px);
}

/* THE FIELD. One rule under it, in gold, because a search field in this house
   is a line you write on rather than a box you are put in. */
.hlfind .hlf-field{
  display:flex;align-items:center;gap:.7em;
  border-bottom:1px solid var(--hlf-gold);
  padding-bottom:.3em;
}
.hlfind .hlf-field .lens{width:18px;height:18px;flex:none;color:var(--hlf-gold-d)}
.hlfind .hlf-q{
  flex:1 1 auto;min-width:0;
  font-family:var(--hlf-serif);
  font-size:clamp(21px,2.4cqi + 14px,30px);
  font-weight:300;line-height:1.5;color:var(--hlf-ink);
  background:none;border:0;border-radius:0;padding:.1em 0 .2em;outline:none;
  -webkit-appearance:none;appearance:none;
}
.hlfind .hlf-q::placeholder{color:var(--hlf-muted);font-style:italic;opacity:1}
.hlfind .hlf-q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.hlfind .hlf-shut{
  flex:none;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--hlf-sans);font-size:9px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--hlf-muted);
  background:none;border:0;border-radius:0;cursor:pointer;
  transition:color 400ms var(--hlf-ease);
}
.hlfind .hlf-shut:hover{color:var(--hlf-ink)}
.hlfind .hlf-shut:focus-visible{outline:1px solid var(--hlf-gold);outline-offset:-4px}

.hlfind .hlf-line{
  margin:.9em 0 0;min-height:1.1em;
  font-family:var(--hlf-sans);font-size:9px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--hlf-muted);
}

/* THE PASSAGES. One hairline between them and nothing else — no card, no
   plate, no radius. The volume is named above every one, because a passage
   whose book is not named is a lookup the reader still has to do. */
.hlfind .hlf-out{display:block;margin-top:.6em}
.hlfind .hlf-hit{
  display:block;padding:1.05em 0;color:inherit;text-decoration:none;
  border-top:1px solid var(--hlf-rule);border-radius:0;
  transition:opacity 200ms var(--hlf-ease);
}
.hlfind .hlf-hit:first-child{border-top:0}
.hlfind .hlf-vol{
  display:block;font-family:var(--hlf-sans);font-size:8px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--hlf-gold-d);
}
.hlfind .hlf-ttl{
  display:block;margin-top:.3em;
  font-family:var(--hlf-serif);font-size:clamp(17px,1cqi + 14px,21px);
  font-weight:400;line-height:1.24;color:var(--hlf-ink);
}
.hlfind .hlf-say{
  display:block;margin-top:.38em;max-width:74ch;
  font-family:var(--hlf-serif);font-size:clamp(16px,.8cqi + 13px,19px);
  font-weight:300;line-height:1.62;color:var(--hlf-ink);
}
.hlfind .hlf-say mark{
  background:none;color:inherit;font-weight:500;
  box-shadow:var(--hlf-mark);
}
.hlfind .hlf-hit:hover .hlf-ttl,
.hlfind .hlf-hit:focus-visible .hlf-ttl{color:var(--hlf-gold-d)}
.hlfind .hlf-hit:focus-visible{outline:1px solid var(--hlf-gold);outline-offset:2px}

/* THE INVITATION, AND THE TWO HONEST SENTENCES. An empty field is an offer of
   somewhere to go, and a search that found nothing says what to try instead. */
.hlfind .hlf-note{padding:1.1em 0 .2em}
.hlfind .hlf-note p{
  margin:0;max-width:62ch;
  font-family:var(--hlf-serif);font-size:clamp(16px,.8cqi + 13px,19px);
  font-weight:300;line-height:1.62;color:var(--hlf-muted);
}
.hlfind .hlf-seeds{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:1.1em}
.hlfind .hlf-seeds button{
  min-height:44px;padding:0;
  font-family:var(--hlf-serif);font-size:18px;font-weight:400;font-style:italic;
  color:var(--hlf-ink);background:none;border:0;border-radius:0;cursor:pointer;
  box-shadow:var(--hlf-mark);
  transition:color 400ms var(--hlf-ease);
}
.hlfind .hlf-seeds button:hover{color:var(--hlf-gold-d)}
.hlfind .hlf-seeds button:focus-visible{outline:1px solid var(--hlf-gold);outline-offset:3px}

.hlfind .hlf-go,
.hlfind .hlf-more{
  display:inline-flex;align-items:center;min-height:44px;margin-right:1.6em;
  font-family:var(--hlf-sans);font-size:9px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--hlf-ink);
  background:none;border:0;border-radius:0;cursor:pointer;text-decoration:none;
  transition:color 400ms var(--hlf-ease);
}
.hlfind .hlf-more{
  display:flex;margin-right:0;border-top:1px solid var(--hlf-rule);
  color:var(--hlf-muted);
}
.hlfind .hlf-go{box-shadow:var(--hlf-mark)}
.hlfind .hlf-go:hover,
.hlfind .hlf-more:hover{color:var(--hlf-gold-d)}
.hlfind .hlf-go:focus-visible,
.hlfind .hlf-more:focus-visible{outline:1px solid var(--hlf-gold);outline-offset:2px}

@media (max-width:560px){
  .hlbar .findgo span{display:none}
  .hlbar .findgo{min-width:44px;justify-content:center}
  .hlfind .hlf-sheet{padding:14px 16px 22px}
}
@media (prefers-reduced-motion:reduce){
  .hlfind{transition:opacity 200ms linear;transform:none}
  .hlfind[data-open]{transform:none}
}
@media print{ .hlfind{display:none} }

/* WHERE THE READER LANDED. A passage arrived at from a search result or from
   their own kept mark is named by a hairline beside it — gold, one pixel, and
   gone the moment they move. Never a block of colour, never a flash. */
.hl-landed{position:relative}
.hl-landed::before{
  content:"";position:absolute;left:-14px;top:.12em;bottom:.12em;width:1px;
  background:var(--gold,#D69A4C);
  opacity:0;animation:hl-land 700ms cubic-bezier(.165,.84,.44,1) forwards;
}
@keyframes hl-land{ to{opacity:1} }
@media (prefers-reduced-motion:reduce){
  .hl-landed::before{animation:none;opacity:1}
}