/* The menu bar, and only the menu bar.

   One file because there is one bar. It used to live in theme.css, which the
   twenty-two generated pages and the two journeys load and the six section
   studies do not, so the studies carried a parallel bar of their own under
   `.sitebar` and the two drifted: different type, different link colour,
   different nav position. This is the same move foot.css made, for the same
   reason, and the header note there is worth reading before editing this one.

   Every value is LITERAL, and deliberately so, because the studies define
   --ink and --gut too, with their own meanings: on a study `--ink` is #f6eee1,
   a near-white for a dark ground, so a bar written against the site tokens
   came out with white-on-cream nav links. A token that exists but means
   something else never reaches its fallback. The namespace is --irsibar-*, which
   nothing else on the site uses.

   Unlike the footer, the bar is NOT the same on every page. It has two
   grounds: `--paper`, which follows the reader's theme, and `--film`, which
   is the fixed dark chrome of the two scrubbing journeys. The theme flip is
   therefore repeated here rather than inherited, in the same three-part shape
   theme.css uses: a light default, a dark preference guarded so an explicit
   light choice still wins, and an explicit dark choice that wins over both.

   Both class families are styled together, rule for rule:

     .bar            .sitebar
     .bar__mark      .sitebar__mark
     .bar__nav       .sitebar__nav
     .bar__cta       .sitebar__cta
     .bar__theme     .sitebar__theme
     .bar__toggle    .sitebar__toggle
     .bar__burger    .sitebar__burger
     .scrim          .sitebar-scrim
     .drawer         .sitedrawer

   The markup is not touched. Each study measures --bar-h off its own
   `.sitebar` and binds its drawer by [data-sitedrawer-*]; renaming the
   classes would break both, for no gain, since a selector list costs nothing.

   8 September 2026: the studies' inline copies are GONE, all six of them, and
   this file is the only bar stylesheet left. They were dead weight — this file
   loads after them and had already won every geometry and colour rule they
   declared — except where they outranked it on specificity, which is how the
   drawer's gold pill below came to be drawn in a study's own --ink: #f6eee1 on
   gold, 2.2:1, and 1.0:1 on hover where --accent IS the pill. If a study ever
   needs to touch the bar again, change it HERE. A rule in a page beats a rule
   in this file whenever it is even slightly more specific, however late this
   file loads, and the result will not be a bar that looks different — it will
   be a bar that looks different on six pages out of twenty nine.

   The stacks repeat theme.css on purpose: Georgia from the visitor's own
   system for the serif, Public Sans self-hosted for the sans, so the bar
   holds its face even on a page that loads this file alone. Changed
   9 September 2026 from Cormorant Garamond and Source Sans 3. */

:root {
  --irsibar-paper:     #faf6ee;
  --irsibar-ink:       #1b1712;
  --irsibar-ink-soft:  #574f42;
  --irsibar-line:      #ded3c1;
  --irsibar-gold:      #cba64e;
  --irsibar-gold-deep: #7d5f1f;
  --irsibar-gold-ink:  #1a1409;
  --irsibar-film:      #0d0b08;
  --irsibar-bone:      #f6eee1;
  --irsibar-cta-line:  rgba(138,106,36,.55);
  --irsibar-gut:       clamp(1.25rem, 4vw, 3.5rem);
  --irsibar-serif:     Georgia, "Noto Serif", "Droid Serif", "Times New Roman", serif;
  --irsibar-sans:      "Public Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --irsibar-paper:     #0d0b08;
    --irsibar-ink:       #f6eee1;
    --irsibar-ink-soft:  #d6cbb8;
    --irsibar-line:      #3a3226;
    --irsibar-gold-deep: #dcbc71;
    --irsibar-cta-line:  rgba(220,188,113,.5);
  }
}
:root[data-theme="dark"] {
  --irsibar-paper:     #0d0b08;
  --irsibar-ink:       #f6eee1;
  --irsibar-ink-soft:  #d6cbb8;
  --irsibar-line:      #3a3226;
  --irsibar-gold-deep: #dcbc71;
  --irsibar-cta-line:  rgba(220,188,113,.5);
}

/* ------------------------------------------------------------------ bar */

.bar, .sitebar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.05rem var(--irsibar-gut);
  font-family: var(--irsibar-sans);
  isolation: isolate;
}
.bar::before, .sitebar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transition: opacity .3s ease, backdrop-filter .3s ease;
  opacity: 0;
}
.bar--film::before { background: linear-gradient(180deg, rgba(13,11,8,.86), rgba(13,11,8,0)); opacity: 1; }
/* A study has no ground modifier: its bar is the paper one, always.

   The two `:root` selectors are not decoration. irsi-awards states its own bar
   ground as `:root:not([data-theme="dark"]) .sitebar::before`, which outranks a
   plain `.sitebar::before` however late it is loaded, and it was the reason
   that one page kept a hairline nobody else had. Matching the shape of its
   selector is enough, because this file loads afterwards. */
.bar--paper::before, .sitebar::before,
:root:not([data-theme="dark"]) .sitebar::before,
:root[data-theme="light"] .sitebar::before {
  background: var(--irsibar-paper); border-bottom: 1px solid var(--irsibar-line); opacity: 1;
}
.bar--paper[data-scrolled]::before, .sitebar[data-scrolled]::before {
  box-shadow: 0 6px 22px rgba(60,48,30,.07);
}

.bar__mark, .sitebar__mark {
  font-family: var(--irsibar-serif); font-size: 1.5rem; font-weight: 400;
  letter-spacing: .34em; text-decoration: none; padding-right: .2em;
  font-style: normal; color: var(--irsibar-ink);
}
.bar--film .bar__mark { color: var(--irsibar-bone); }

.bar__nav, .sitebar__nav { flex: 1 1 auto; }
.bar__nav ul, .sitebar__nav ul {
  display: flex; gap: clamp(.9rem, 2vw, 2.1rem);
  list-style: none; margin: 0; padding: 0; justify-content: center;
}
.bar__nav a, .sitebar__nav a {
  font-family: var(--irsibar-sans); font-size: .95rem; font-weight: 400;
  font-style: normal; letter-spacing: normal;
  text-decoration: none; padding: .3em 0;
  border-bottom: 1px solid transparent; white-space: nowrap;
  color: var(--irsibar-ink-soft);
}
.bar--film .bar__nav a { color: rgba(246,238,225,.86); }
.bar__nav a:hover, .sitebar__nav a:hover { border-bottom-color: var(--irsibar-gold); }
.bar__nav a[aria-current], .sitebar__nav a[aria-current] { border-bottom-color: var(--irsibar-gold); }
.bar--film .bar__nav a[aria-current] { color: var(--irsibar-bone); }
.bar--paper .bar__nav a[aria-current], .sitebar__nav a[aria-current] { color: var(--irsibar-ink); }

.bar__cta, .sitebar__cta {
  font-family: var(--irsibar-sans); font-size: .9rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  padding: .62em 1.35em; border-radius: 999px;
  border: 1px solid var(--irsibar-cta-line); color: var(--irsibar-gold-deep);
}
.bar--film .bar__cta { border-color: rgba(203,166,78,.7); color: var(--irsibar-gold); }
.bar__cta:hover, .sitebar__cta:hover {
  background: var(--irsibar-gold); color: var(--irsibar-gold-ink); border-color: var(--irsibar-gold);
}

/* The theme switch, in the bar because the bar is the only chrome a document
   keeps for the whole scroll: faint at rest, accent on hover, a ring tight to
   the border, and a word that names the theme it will switch TO. */
.bar__theme, .sitebar__theme {
  display: inline-flex; align-items: center; gap: .42rem;
  font-family: var(--irsibar-sans); font-size: .78rem; font-weight: 600; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--irsibar-ink-soft); background: none; cursor: pointer;
  border: 1px solid var(--irsibar-line); border-radius: 2px; padding: .45rem .7rem;
  transition: color .2s ease, border-color .2s ease;
}
.bar__theme:hover, .sitebar__theme:hover { color: var(--irsibar-gold-deep); border-color: var(--irsibar-gold-deep); }
.bar__theme:focus-visible, .sitebar__theme:focus-visible {
  outline: 2px solid var(--irsibar-gold-deep); outline-offset: 2px;
}
.no-js .bar__theme, .no-js .sitebar__theme { display: none; }

.bar__toggle, .sitebar__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  align-items: center; gap: .55rem; padding: .4rem 0; color: var(--irsibar-ink);
}
.bar--film .bar__toggle { color: var(--irsibar-bone); }
.bar__toggle-label, .sitebar__toggle-label {
  font-family: var(--irsibar-sans); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600;
}
.bar__burger, .sitebar__burger { display: grid; gap: 5px; width: 20px; }
.bar__burger i, .sitebar__burger i { display: block; height: 1px; background: currentColor; }

/* ------------------------------------------------- paper metrics only

   Declared, not inherited. Each study sets its own body line-height and
   tracking, and both reached the bar's children: the same bar came out 75px
   tall on Awards, 76 on Abstracts and 77 on a document page, with five
   different letter-spacings on one pill.

   Scoped to the paper grounds on purpose. The two scrubbing journeys carry
   the film bar and were verified at the metrics they already had; stating
   these on `.bar` moved every one of them by a fraction of a pixel for no
   reason. The studies are joining the document pages, not the journeys. */
.bar--paper, .sitebar { line-height: 1.6; letter-spacing: normal; font-style: normal; }
.bar--paper .bar__mark, .sitebar__mark { line-height: 1.2; }
.bar--paper .bar__nav a, .sitebar__nav a { line-height: 1.6; }
.bar--paper .bar__cta, .sitebar__cta { line-height: 1.6; letter-spacing: normal; }

/* --------------------------------------------------------------- drawer */

/* ABOVE the consent banner, which is fixed to the foot of the window at 90
   with an opaque ground. Under it, the banner painted over the drawer's last
   two rows and took their taps: on a tablet, where the drawer is tall enough
   to reach the banner, a finger aiming at Insights or Contact pressed Accept
   instead, which is a worse fault than a hidden link — it answered a consent
   question the reader had not answered. The banner is not dismissed by this,
   only covered while the menu is open, and it is waiting when the menu
   closes. Found on an iPad Air, 10 September 2026. */
.scrim, .sitebar-scrim { position: fixed; inset: 0; z-index: 92; background: rgba(10,8,5,.55); }

.drawer, .sitedrawer {
  position: fixed; inset: 0 0 0 auto; z-index: 95; width: min(22rem, 86vw);
  /* Paper and ink, not film and bone. The drawer was the one piece of chrome
     that stayed dark on a light page: --irsibar-film and --irsibar-bone are
     fixed by design, for the film journeys that have one grade. The menu is
     not a film, it is the page's own navigation, so it takes the two tokens
     that already flip with the theme. */
  background: var(--irsibar-paper); color: var(--irsibar-ink);
  padding: 5.5rem var(--irsibar-gut) 2rem;
  transform: translateX(100%); transition: transform .34s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column; gap: 1.5rem;
  border-left: 1px solid var(--irsibar-line);
}
.drawer[data-open], .sitedrawer[data-open] { transform: none; }
/* The panel itself takes focus when it opens (see the drawer script), so that
   no link inside it wears the gold focus ring and gets read as the current
   page. A container that has been given focus programmatically shows nothing:
   the drawer arriving IS the cue, and every control inside it still rings
   normally on Tab. */
.drawer:focus, .sitedrawer:focus,
.drawer:focus-visible, .sitedrawer:focus-visible { outline: none; }

/* The six studies each carried this in their own copy of the bar and the
   generated pages never had it, so the panel slid in for a reader who had asked
   for no motion on twenty three routes and stayed still on six. Stated here for
   both families rather than lost with the copy it came from. */
@media (prefers-reduced-motion: reduce) {
  .drawer, .sitedrawer { transition: none; }
}

/* ── the way out ──────────────────────────────────────────────────────────
   The drawer is z-index 70 and the bar is 60, so opening the menu covered the
   burger that opened it. That left two ways out of an open menu on a phone:
   the strip of scrim at the left edge, 52px wide, or the Escape key, which a
   phone does not have. No visible control said "close" anywhere.

   Raising the bar over the drawer instead was the other option and it is
   worse: the bar paints its own ground the full width of the page, paper on a
   light theme, and the drawer is always film, so it would lay a pale band
   across the top of a dark panel.

   So the drawer carries its own. It sits where the burger was, in the 5.5rem
   of padding the drawer already holds clear at the top, and it says the word
   rather than only drawing a glyph. Absolute, so it never enters the flex
   column and cannot push the nav down. */
.drawer__close, .sitedrawer__close {
  /* .75rem of padding around a 20px glyph is a 44px target, and the top offset
     is set from that so the control still centres on the line the burger sat
     on rather than drifting down as the target grew. */
  position: absolute; top: .75rem; right: var(--irsibar-gut);
  display: flex; align-items: center; gap: .55rem;
  background: none; border: 0; padding: .75rem 0; cursor: pointer;
  color: var(--irsibar-ink);
  font-family: var(--irsibar-sans); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600;
}
.drawer__close:hover, .sitedrawer__close:hover { color: var(--irsibar-gold-deep); }
.drawer__close:focus-visible, .sitedrawer__close:focus-visible {
  outline: 2px solid var(--irsibar-gold-deep); outline-offset: 4px; border-radius: 2px;
}
/* Two rules crossed, drawn rather than typed, so the glyph is the same weight
   as the hairlines the rest of this panel is built from. 20px to match the
   burger it replaces, and a 44px hit area around the whole control. */
.drawer__close-x, .sitedrawer__close-x {
  position: relative; display: block; width: 20px; height: 20px;
}
.drawer__close-x::before, .drawer__close-x::after,
.sitedrawer__close-x::before, .sitedrawer__close-x::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px;
  background: currentColor;
}
.drawer__close-x::before, .sitedrawer__close-x::before { transform: rotate(45deg); }
.drawer__close-x::after,  .sitedrawer__close-x::after  { transform: rotate(-45deg); }
.drawer ul, .sitedrawer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
/* `nav a`, not `a`. The drawer holds two kinds of link: the section list
   inside the nav, and the gold CTA that is a sibling of it. Unscoped, this
   rule also won against `.btn` on the CTA and drew it as a nav link that
   happened to have a gold background. */
.drawer nav a, .sitedrawer nav a {
  display: block; padding: .7rem 0; text-decoration: none;
  font-family: var(--irsibar-serif); font-size: 1.5rem; font-weight: 400;
  color: var(--irsibar-ink);
  -webkit-text-fill-color: var(--irsibar-ink);
  border-bottom: 1px solid var(--irsibar-line);
}
.drawer__cta, .sitedrawer__cta { align-self: start; }

/* The drawer's call to action. On a generated page the markup carries
   `btn btn--gold` and theme.css fills it; a study's drawer carries only
   `sitedrawer__cta` and theme.css is not loaded there, so the same control
   was a filled gold pill on twenty-two pages and an outline on six. The fill
   is restated here, in literals, rather than by adding classes to six files
   that a different pair of hands keeps editing. */
.sitedrawer__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--irsibar-sans); font-size: .95rem; font-weight: 600;
  line-height: 1; letter-spacing: normal; text-decoration: none;
  padding: .95em 1.7em; border-radius: 999px; border: 1px solid transparent;
  background: linear-gradient(180deg, #d8ad52, #b7862f);
  color: var(--irsibar-gold-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 6px 18px rgba(80,53,10,.22);
  transition: transform .18s ease, background .18s ease;
}
.sitedrawer__cta:hover { background: linear-gradient(180deg, #e2b95f, #c08f34); transform: translateY(-1px); }

/* Below the collapse the bar is down to three things: the wordmark, the theme
   control and the burger. Which two of them belong together is the whole
   question, and it was answered twice, differently.

   `justify-content: space-between` spread all three evenly, which parked the
   theme control in the middle of the bar attached to nothing. The six pages
   that carry their own copy of this bar instead put `margin-left: auto` on the
   burger, which left the theme sitting against the wordmark. Same viewport,
   two answers, 318px apart, and the reader had to find the control twice.

   Above the collapse both agree already: the theme sits on the right, directly
   left of the call to action. So the auto margin goes on the THEME, and the
   burger follows it. Wordmark left, the two controls together on the right, at
   every width and on every page. No justify-content: an auto margin eats the
   free space before justification is considered, so declaring both only hides
   which one is doing the work. */
@media (max-width: 1080px) {
  .bar__nav, .sitebar__nav, .bar__cta, .sitebar__cta { display: none; }
  .bar__toggle, .sitebar__toggle { display: flex; }
  /* The push comes from the WORDMARK, not from the theme control. Hanging it
     on the theme control worked on the twenty-six pages that have one and
     failed on the two that do not: the film journeys carry no theme button by
     design, because they have one grade, so nothing pushed and the burger sat
     against the wordmark, 766px from the right edge of a 1000px window.

     The wordmark is the one child that is on every bar, in every family, at
     every width. It takes the free space, and everything after it, whether
     that is theme plus burger or burger alone, ends up in the right corner. */
  .bar__mark, .sitebar__mark { margin-right: auto; }
}