/* 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 {
  color-scheme: light;
  --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-gut:       clamp(1.25rem, 4vw, 3.5rem);
  --irsimenu-wrap:      74rem;
  --irsimenu-serif:     Cormorant, "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --irsimenu-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"]) {
    color-scheme: 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);
  }
}
:root[data-theme="dark"] {
  color-scheme: 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);
}
/* ------------------------------------------------------------ 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; }
/* while the panel is open the film bar goes solid, so the panel and the bar
   read as one piece of chrome rather than a card under a gradient */
.bar--film[data-menu-open]::before { background: #0d0b08; }

/* ----------------------------------------------------------- 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;
}
.bar--film .menu-panel { border-top: 1px solid rgba(203,166,78,.28); }
.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, 1.05fr) 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 {
  margin: 0; padding: .15rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .9rem;
}
.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: .62rem; 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 .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 rgba(246,238,225,.1); }
.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: #f6eee1; -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 #cba64e; border-bottom: 1px solid #cba64e;
  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: rgba(246,238,225,.9); border-bottom: 1px solid rgba(246,238,225,.07);
}
.drawer nav .drawer-acc__list a[aria-current], .sitedrawer .drawer-acc__list a[aria-current] { color: #cba64e; }
.drawer-acc--sub { border-bottom: 1px solid rgba(246,238,225,.07); }
.drawer-acc--sub > summary { font-size: 1.15rem; padding: .52rem 0 .52rem 1rem; color: rgba(246,238,225,.9); }
.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: rgba(246,238,225,.78); border-bottom: 1px solid rgba(246,238,225,.05);
}
.drawer-dates {
  margin: .2rem 0 .6rem; padding: .9rem 0 0; border-top: 1px solid rgba(246,238,225,.14);
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem;
}
.drawer-dates div { display: grid; gap: .05rem; }
.drawer-dates dt { font-family: var(--irsimenu-sans); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #d6cbb8; }
.drawer-dates dd { margin: 0; font-family: var(--irsimenu-serif); font-size: 1rem; line-height: 1.2; color: #f6eee1; }
.drawer-acc :focus-visible { outline: 2px solid #cba64e; 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; }