/* 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}
.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}

.hlbar .site{display:flex;align-items:center;gap:clamp(9px,1.5vw,18px);
  flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.hlbar .site::-webkit-scrollbar{height:0;display:none}
.hlbar .site a{font-family:var(--hlb-sans);font-size:7.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.hlbar .site a:hover{color:var(--hlb-ink)}
.hlbar .site a[aria-current="page"]{color:var(--hlb-gold-d)}

.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}

@media (max-width:900px){ .hlbar .mark span{display:none} }
@media (max-width:620px){ .hlbar .switch{display:none} }
@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);
}