/* The Summit menu: the fast layer.

   One file because there is one menu. It follows the two conventions bar.css
   and foot.css already set for chrome that has to sit on every page of the
   site, generated pages and section studies alike:

     · every value is LITERAL and lives in its own namespace, --irsimenu-*,
       because the studies define --ink, --gold and --line with meanings of
       their own and a shared token never reaches its fallback there;
     · the theme flip is repeated here 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.

   The panel hangs off the primary nav's "The Summit" item, so it is styled
   for both bar families, .bar__nav and .sitebar__nav, rule for rule. Below
   1080px the bar hides its nav and the drawer takes over; the drawer part of
   this file is the accordion that replaces the single "The Summit" link there.

   House rule: no em dashes anywhere, including in these comments. */

:root {
  --irsimenu-paper:     #faf6ee;
  --irsimenu-paper-2:   #f2ebde;
  --irsimenu-ink:       #1b1712;
  --irsimenu-ink-soft:  #574f42;
  --irsimenu-line:      #ded3c1;
  --irsimenu-gold:      #cba64e;
  --irsimenu-gold-deep: #7d5f1f;
  --irsimenu-gold-ink:  #1a1409;
  --irsimenu-field:     #fff;
  --irsimenu-shadow:    0 26px 60px rgba(60,48,30,.16);
  --irsimenu-cta-line:  rgba(138,106,36,.55);
  --irsimenu-gut:       clamp(1.25rem, 4vw, 3.5rem);
  --irsimenu-wrap:      74rem;
  --irsimenu-serif:     Georgia, "Noto Serif", "Droid Serif", "Times New Roman", serif;
  --irsimenu-sans:      "Public Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --irsimenu-paper:     #0d0b08;
    --irsimenu-paper-2:   #17130e;
    --irsimenu-ink:       #f6eee1;
    --irsimenu-ink-soft:  #d6cbb8;
    --irsimenu-line:      #3a3226;
    --irsimenu-gold-deep: #dcbc71;
    --irsimenu-field:     #14110c;
    --irsimenu-shadow:    0 26px 60px rgba(0,0,0,.55);
    --irsimenu-cta-line:  rgba(220,188,113,.5);
  }
}
:root[data-theme="dark"] {
  --irsimenu-paper:     #0d0b08;
  --irsimenu-paper-2:   #17130e;
  --irsimenu-ink:       #f6eee1;
  --irsimenu-ink-soft:  #d6cbb8;
  --irsimenu-line:      #3a3226;
  --irsimenu-gold-deep: #dcbc71;
  --irsimenu-field:     #14110c;
  --irsimenu-shadow:    0 26px 60px rgba(0,0,0,.55);
  --irsimenu-cta-line:  rgba(220,188,113,.5);
}
/* The two film journeys have one grade and no theme control of their own,
   so the panel carries the switch and applies the same saved preference the
   document pages use, irsi.theme: one choice, every page. While the panel is
   open the film bar takes the panel's ground, so bar and panel read as one
   sheet laid over the film, paper or dark. */
.bar--film[data-menu-open]::before { background: var(--irsimenu-paper); border-bottom: 1px solid var(--irsimenu-line); opacity: 1; }
.bar--film[data-menu-open] .bar__mark { color: var(--irsimenu-ink); }
.bar--film[data-menu-open] .bar__nav a { color: var(--irsimenu-ink-soft); }
.bar--film[data-menu-open] .bar__nav a[aria-current] { color: var(--irsimenu-ink); }
.bar--film[data-menu-open] .menu-toggle { color: var(--irsimenu-ink-soft); }
.bar--film[data-menu-open] .bar__cta { color: var(--irsimenu-gold-deep); border-color: var(--irsimenu-cta-line); }
.bar--film[data-menu-open] .bar__cta:hover { background: #cba64e; color: #1a1409; border-color: #cba64e; }
.bar--film .bar__mark, .bar--film .bar__nav a, .bar--film .bar__cta, .bar--film .menu-toggle { transition: color .2s ease, border-color .2s ease; }

/* ------------------------------------------------------------ the item */

.menu-item { position: static; display: inline-flex; align-items: center; gap: .1rem; }
.menu-toggle {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem;
  padding: 0; margin: 0; border: 0; background: none; border-radius: 50%;
  cursor: pointer; color: var(--irsimenu-ink-soft);
}
.bar--film .menu-toggle { color: rgba(246,238,225,.86); }
.menu-toggle svg { width: .8rem; height: .8rem; transition: transform .25s ease; }
.menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-toggle:hover, .menu-toggle:focus-visible { color: var(--irsimenu-gold-deep); }
.bar--film .menu-toggle:hover, .bar--film .menu-toggle:focus-visible { color: #cba64e; }
.menu-toggle:focus-visible { outline: 2px solid var(--irsimenu-gold-deep); outline-offset: 2px; }
.menu-item[data-open] > a { border-bottom-color: #cba64e; }

/* ----------------------------------------------------------- the panel

   Every list rule is prefixed with .menu-panel on purpose. bar.css styles
   `.bar__nav ul` and `.bar__nav a` for the seven primary items, and a study's
   own sheet does the same for `.sitebar__nav ul`; those rules reach every
   list and link inside this panel too, and win against a bare class. The
   prefix is what keeps the panel's lists as grids rather than centred flex
   rows with the primary nav's gap. */

.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  background: var(--irsimenu-paper); color: var(--irsimenu-ink);
  border-bottom: 1px solid var(--irsimenu-line);
  box-shadow: var(--irsimenu-shadow);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) var(--irsimenu-gut) clamp(1rem, 2vw, 1.3rem);
  font-family: var(--irsimenu-sans); font-size: 1rem; line-height: 1.5;
  letter-spacing: normal; text-transform: none; font-style: normal; font-weight: 400;
  opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  max-height: calc(100vh - 5rem); overflow: auto;
}
.menu-panel[data-open] {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) { .menu-panel, .menu-panel[data-open] { transition: none; } .menu-toggle svg { transition: none; } }

.menu-panel__wrap { width: min(100%, var(--irsimenu-wrap)); margin-inline: auto; display: grid; gap: 1rem; }
.menu-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* row one: the find field and the four dates a decided visitor came for */
.menu-panel__top {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: 1rem clamp(1.4rem, 2.5vw, 2.6rem); align-items: start;
}
.menu-panel__find { display: grid; gap: .5rem; }
.menu-find {
  display: flex; align-items: center; gap: .65rem; cursor: text;
  border: 1px solid var(--irsimenu-line); border-radius: 999px;
  background: var(--irsimenu-field); padding: .42rem .9rem .42rem 1rem;
  transition: border-color .18s ease;
}
.menu-find:focus-within { border-color: var(--irsimenu-gold-deep); }
.menu-find svg { width: .95rem; height: .95rem; color: var(--irsimenu-gold-deep); flex: none; }
.menu-find input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: .98rem; color: var(--irsimenu-ink); padding: .12rem 0;
}
.menu-find input::placeholder { color: var(--irsimenu-ink-soft); opacity: .8; }
.menu-find input::-webkit-search-cancel-button { -webkit-appearance: none; }
.menu-find kbd {
  font-family: var(--irsimenu-sans); font-size: .64rem; font-weight: 600; line-height: 1;
  letter-spacing: .08em; color: var(--irsimenu-ink-soft);
  border: 1px solid var(--irsimenu-line); border-radius: .3rem; padding: .26rem .4rem;
}
.menu-panel .menu-results {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; justify-content: stretch;
  background: var(--irsimenu-line); border: 1px solid var(--irsimenu-line);
  border-radius: .55rem; overflow: hidden;
}
.menu-panel .menu-results[hidden] { display: none; }
.menu-panel .menu-results li { display: block; }
.menu-panel .menu-results a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .58rem .9rem; background: var(--irsimenu-paper); color: var(--irsimenu-ink);
  font-family: var(--irsimenu-sans); font-size: .95rem; line-height: 1.35;
  text-decoration: none; border: 0; white-space: normal;
}
.menu-panel .menu-results a:hover, .menu-panel .menu-results a[data-active] {
  background: var(--irsimenu-paper-2); color: var(--irsimenu-gold-deep);
}
.menu-results__sec { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--irsimenu-ink-soft); white-space: nowrap; }
.menu-results__none { margin: 0; padding: .58rem .9rem; background: var(--irsimenu-paper); color: var(--irsimenu-ink-soft); font-size: .9rem; }

.menu-panel .menu-dates {
  /* columns sized to their labels, not four equal shares: "Registration
     opens" ran into the next column's rule (seen 4 September, after the
     labels went a size up for Saranda's point 5) */
  margin: 0; padding: .15rem 0 0; display: grid; grid-template-columns: repeat(4, auto); gap: 0 .7rem;
}
.menu-panel .menu-dates > div { display: grid; gap: .1rem; border-left: 1px solid var(--irsimenu-line); padding-left: .7rem; min-width: 0; }
.menu-panel .menu-dates dt { font-family: var(--irsimenu-sans); font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--irsimenu-ink-soft); line-height: 1.3; white-space: nowrap; }
.menu-panel .menu-dates dd { margin: 0; font-family: var(--irsimenu-serif); font-size: 1.08rem; line-height: 1.2; color: var(--irsimenu-ink); white-space: nowrap; }

/* row two: four even columns */
.menu-panel__cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem clamp(1.4rem, 2.5vw, 2.6rem); align-items: start;
  border-top: 1px solid var(--irsimenu-line); padding-top: 1rem;
}
.menu-col { min-width: 0; }
.menu-col__h {
  margin: 0 0 .45rem; font-family: var(--irsimenu-sans); font-size: .66rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--irsimenu-gold-deep); line-height: 1.3;
}
.menu-panel .menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; justify-content: stretch; }
.menu-panel .menu-list > li { display: block; }
.menu-panel .menu-list > li > a {
  display: flex; align-items: baseline; gap: .6rem; padding: .27rem 0;
  font-family: var(--irsimenu-serif); font-size: 1.15rem; font-weight: 400; line-height: 1.25;
  letter-spacing: normal; color: var(--irsimenu-ink); text-decoration: none; border: 0; white-space: normal;
}
.menu-n {
  font-family: var(--irsimenu-sans); font-size: .62rem; font-weight: 600; letter-spacing: .08em;
  color: var(--irsimenu-gold-deep); min-width: 1.25rem; font-variant-numeric: tabular-nums; opacity: .9;
}
.menu-panel .menu-list > li > a:hover { color: var(--irsimenu-gold-deep); }
.menu-panel .menu-list > li > a[aria-current] {
  color: var(--irsimenu-gold-deep);
  text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px;
  text-decoration-color: #cba64e;
}

/* the fourth column: the three actions the copy document names as primary */
.menu-col--act { display: grid; gap: .55rem; justify-items: start; align-content: start; }
.menu-panel .menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--irsimenu-sans); font-size: .9rem; font-weight: 600; line-height: 1;
  letter-spacing: normal; text-decoration: none; white-space: nowrap;
  padding: .85em 1.5em; border-radius: 999px; border: 1px solid transparent; margin-bottom: .35rem;
  background: linear-gradient(180deg, #d8ad52, #b7862f); color: #1a1409;
  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;
}
.menu-panel .menu-btn:hover { background: linear-gradient(180deg, #e2b95f, #c08f34); transform: translateY(-1px); }
.menu-panel .menu-link {
  display: inline-block; font-family: var(--irsimenu-sans); font-size: .92rem; font-weight: 600; line-height: 1.3;
  letter-spacing: normal; color: var(--irsimenu-gold-deep); text-decoration: none; white-space: nowrap;
  border: 0; border-bottom: 1px solid rgba(138,106,36,.42); padding: 0 0 .1em;
}
.menu-panel .menu-link::after { content: " \2192"; }
.menu-panel .menu-link:hover { border-bottom-color: currentColor; }

.menu-panel__foot {
  margin: 0; padding-top: .8rem; border-top: 1px solid var(--irsimenu-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1.5rem;
  font-family: var(--irsimenu-sans); font-size: .84rem; color: var(--irsimenu-ink-soft);
}
.menu-panel__foot b { font-weight: 400; color: var(--irsimenu-ink); font-variant-numeric: tabular-nums; }
.menu-panel .menu-panel__foot a {
  font-family: var(--irsimenu-sans); font-size: inherit; font-weight: 600; color: var(--irsimenu-gold-deep);
  text-decoration: none; border: 0; border-bottom: 1px solid rgba(138,106,36,.42); white-space: nowrap; padding: 0;
}
.menu-panel .menu-panel__foot a:hover { border-bottom-color: currentColor; }
.menu-panel :focus-visible:not(input) { outline: 2px solid var(--irsimenu-gold-deep); outline-offset: 2px; border-radius: 2px; }
.menu-panel__side { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.2rem; }
.menu-theme {
  display: inline-flex; align-items: center; padding: 2px; border-radius: 999px;
  border: 1px solid var(--irsimenu-line); background: var(--irsimenu-paper-2);
}
.menu-panel .menu-theme button {
  font-family: var(--irsimenu-sans); font-size: .64rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1; color: var(--irsimenu-ink-soft);
  background: none; border: 0; border-radius: 999px; padding: .5em .8em; cursor: pointer;
}
.menu-panel .menu-theme button[aria-pressed="true"] { background: var(--irsimenu-ink); color: var(--irsimenu-paper); }
.menu-panel .menu-theme button:hover:not([aria-pressed="true"]) { color: var(--irsimenu-gold-deep); }
.no-js .menu-theme { display: none; }
.menu-panel .menu-find input:focus, .menu-panel .menu-find input:focus-visible { outline: none; box-shadow: none; }

@media (max-width: 1080px) {
  .menu-toggle, .menu-panel { display: none !important; }
}
@media (min-width: 1081px) and (max-width: 1300px) {
  .menu-panel__top { grid-template-columns: minmax(0, 1fr); }
  .menu-panel .menu-list > li > a { font-size: 1.08rem; }
}

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

   Below 1080px "The Summit" in the drawer becomes an accordion holding the
   same ten sections, the five programmes one level further in, and the key
   dates. Native <details>, so it works with both drawer scripts and with
   neither. The drawer itself learns to scroll, because it is now longer than
   a phone is tall. */

.drawer, .sitedrawer { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.drawer nav ul, .sitedrawer nav ul { gap: 0; }
.drawer-acc { border-bottom: 1px solid var(--irsimenu-line); }
.drawer-acc > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; font-family: var(--irsimenu-serif); font-size: 1.5rem; font-weight: 400; line-height: 1.3;
  color: var(--irsimenu-ink); -webkit-tap-highlight-color: transparent;
}
.drawer-acc > summary::-webkit-details-marker { display: none; }
.drawer-acc > summary::marker { content: ""; }
.drawer-acc__chev {
  flex: none; width: .55rem; height: .55rem; margin-right: .4rem;
  border-right: 1px solid var(--irsimenu-gold-deep); border-bottom: 1px solid var(--irsimenu-gold-deep);
  transform: rotate(45deg) translateY(-.15rem); transition: transform .2s ease;
}
.drawer-acc[open] > summary .drawer-acc__chev { transform: rotate(225deg) translateY(-.1rem); }
.drawer-acc__list, .drawer-acc__sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.drawer-acc__list { margin-bottom: .5rem; }
.drawer nav .drawer-acc__list a, .sitedrawer nav .drawer-acc__list a, .sitedrawer .drawer-acc__list a {
  display: block; padding: .52rem 0 .52rem 1rem; text-decoration: none;
  font-family: var(--irsimenu-serif); font-size: 1.15rem; font-weight: 400; line-height: 1.3;
  color: var(--irsimenu-ink-soft); border-bottom: 1px solid var(--irsimenu-line);
}
/* ── you are here ─────────────────────────────────────────────────────────
   The drawer said which page you were on in colour, and only in colour: gold
   against bone. That fails WCAG 1.4.1 on its own, and it also read backwards,
   because gold sits at 8.5:1 on this ground where bone sits at 17:1. The page
   you were already on was the faintest line in the list.

   So: full-strength text, and a gold mark. The mark is a rule in the MARGIN,
   not under the label, because every row here already carries a hairline
   beneath it as a separator and a second one would just read as another
   separator. It is the mark's presence that carries the meaning, so the
   information survives with colour removed.

   The drawer indents at three depths, 0, 1rem and 2rem, and the rule is
   offset to sit .85rem clear of the text at each of them rather than on a
   letter. `aria-current="page"` in the markup is what a screen reader reads;
   this is the same fact for everyone else. */
.drawer nav a[aria-current], .sitedrawer nav a[aria-current],
.drawer nav .drawer-acc__list a[aria-current],
.sitedrawer nav .drawer-acc__list a[aria-current],
.sitedrawer .drawer-acc__list a[aria-current] {
  position: relative;
  color: var(--irsimenu-ink);
  -webkit-text-fill-color: var(--irsimenu-ink);
}
.drawer nav a[aria-current]::before, .sitedrawer nav a[aria-current]::before {
  content: ""; position: absolute; left: -.85rem; top: .4em; bottom: .4em;
  width: 2px; border-radius: 1px; background: var(--irsimenu-gold-deep);
}
.drawer nav .drawer-acc__list a[aria-current]::before,
.sitedrawer nav .drawer-acc__list a[aria-current]::before,
.sitedrawer .drawer-acc__list a[aria-current]::before { left: .15rem; }
.drawer nav .drawer-acc__sub a[aria-current]::before,
.sitedrawer nav .drawer-acc__sub a[aria-current]::before,
.sitedrawer .drawer-acc__sub a[aria-current]::before { left: 1.15rem; }
.drawer-acc--sub { border-bottom: 1px solid var(--irsimenu-line); }
.drawer-acc--sub > summary { font-size: 1.15rem; padding: .52rem 0 .52rem 1rem; color: var(--irsimenu-ink); }
.drawer nav .drawer-acc__sub a, .sitedrawer nav .drawer-acc__sub a, .sitedrawer .drawer-acc__sub a {
  font-family: var(--irsimenu-sans); font-size: .95rem; padding: .45rem 0 .45rem 2rem;
  color: var(--irsimenu-ink-soft); border-bottom: 1px solid var(--irsimenu-line);
}
.drawer-acc :focus-visible { outline: 2px solid var(--irsimenu-gold-deep); outline-offset: 2px; }

/* -------------------------------------------------------- the homepage

   Two small doors into the fast layer from inside the film: one line under
   the hero, and the five programme pins made into links. Both sit inside a
   copy layer that does not take the pointer, so each declares its own. */

.copy__fast { margin-top: 1rem; font-family: var(--irsimenu-sans); font-size: .92rem; line-height: 1.4; pointer-events: auto; }
.copy__fast a { color: #cba64e; text-decoration: none; border-bottom: 1px solid rgba(203,166,78,.5); padding-bottom: .12em; }
.copy__fast a::after { content: "\00a0\2192"; }
.copy__fast a:hover { color: #dcbc71; border-bottom-color: currentColor; }
.labels--pins .lbl a { color: inherit; text-decoration: none; pointer-events: auto; border-bottom: 1px solid rgba(203,166,78,.55); padding-bottom: .05em; }
.labels--pins .lbl a:hover { color: #dcbc71; border-bottom-color: currentColor; }

/* ---------------------------------------- Saranda's review, 3 September 2026
   Her points on the film, numbered as in her email. */

/* 2. The hero line: the date and the place never break inside themselves
   (an en dash is a break opportunity, so no-break spaces alone did not do it). */
.copy__sub .nobr { white-space: nowrap; }

/* 1. The five programme pins open in a new tab (her ask: open all five side
   by side without losing the film). The hint is read out by a screen reader
   (a .menu-sr span in the link) and shown as a small mark after the name, so
   the new tab surprises nobody. */
.labels--pins .lbl a[target="_blank"]::after { content: "\00a0\2197"; font-size: .78em; opacity: .75; }

/* 5. The return panel's countdown and key dates: the uppercase labels were
   10.2px and 11.5px and the dates 16.8px. A size up each, in the same face,
   and the note under the button with them. */
.panel__meta .count__label, .panel__meta .count__when { font-size: .8rem; }
.panel__meta .count__u { font-size: .72rem; }
.panel__meta .dates__k { font-size: .78rem; }
.panel__meta .dates__v { font-size: 1.2rem; }
.panel__cta .reg__note, .panel__do .reg__note { font-size: .92rem; }

/* 6. "Explore the Institute and the Intelligence": the two words are links,
   set a weight up so they read as the two doors they are. The block is in
   the copy layer, which does not take the pointer, so the links say so. */
.climb__lede a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .16em; text-decoration-color: rgba(98,74,17,.45); pointer-events: auto; }
.climb__lede a:hover { text-decoration-color: currentColor; }