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

   The font stack names the self-hosted family (Source, Cormorant) AND the
   Google Fonts family (Source Sans 3, Cormorant Garamond), because the
   generated pages register the first pair and the studies register the
   second. Naming both means each page resolves whichever it actually has,
   and neither falls through to a system face. */

: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:     Cormorant, "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --irsibar-sans:      Source, "Source Sans 3", 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 */

.scrim, .sitebar-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(10,8,5,.55); }

.drawer, .sitedrawer {
  position: fixed; inset: 0 0 0 auto; z-index: 70; width: min(22rem, 86vw);
  background: var(--irsibar-film); color: var(--irsibar-bone);
  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 rgba(203,166,78,.28);
}
.drawer[data-open], .sitedrawer[data-open] { transform: none; }
.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-bone);
  -webkit-text-fill-color: var(--irsibar-bone);
  border-bottom: 1px solid rgba(246,238,225,.1);
}
.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); }

@media (max-width: 1080px) {
  .bar__nav, .sitebar__nav, .bar__cta, .sitebar__cta { display: none; }
  .bar__toggle, .sitebar__toggle { display: flex; }
  .bar, .sitebar { justify-content: space-between; }
}