/* One masthead treatment for every PL and EN route, including the directory. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  min-height: 72px;
  padding: 0 clamp(16px, 4vw, 56px);
  background: var(--masthead-bg);
  border-bottom: 2px solid var(--masthead-border);
  box-shadow: 0 2px 10px rgba(11, 58, 52, .18);
}
.site-header .brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.site-header .brand .masthead-mark { height: 88px; width: auto; align-self: flex-start; margin: 8px 0 -24px; }
.site-header .brand .wordmark { margin: 0; font: 700 17px/1.2 var(--font-display); color: var(--masthead-text); }
.site-header .wordmark a { color: inherit; text-decoration: none; }
.site-header .site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0;
  border: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 2px;
  white-space: normal;
}
.site-header .site-nav > a,
.site-header .nav-contact > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
  font-size: 15px;
  color: var(--masthead-nav);
  text-decoration: none;
}
.site-header .site-nav > a:hover,
.site-header .site-nav > a:focus-visible,
.site-header .nav-contact[open] > summary { color: var(--masthead-hover); }
.site-header .site-nav > a:hover,
.site-header .site-nav > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.site-header .site-nav > a[aria-current="page"] { color: var(--masthead-text); }
.site-header .lang-switch { flex: 0 0 auto; margin: 0; font: 500 14px/1.6 var(--font-sans); letter-spacing: .04em; }
.site-header .lang-switch .lang-current { color: var(--masthead-hover); font-weight: 700; }
.site-header .lang-switch .lang-sep { color: var(--masthead-dim); }
.site-header .lang-switch a { color: var(--masthead-nav); }
.site-header a:focus-visible,
.site-header .nav-contact > summary:focus-visible { outline: 2px solid var(--masthead-text); outline-offset: 4px; }
@media (max-width: 1050px) {
  .site-header { flex-wrap: wrap; row-gap: 0; padding-block: 8px; }
  .site-header .brand { order: 1; }
  .site-header .lang-switch { order: 2; margin-left: auto; }
  .site-header .site-nav {
    order: 3;
    flex-basis: 100%;
    padding-left: 0;
    justify-content: flex-start;
    gap: 0 20px;
  }
}
@media (max-width: 759px) {
  .site-header .site-nav > a,
  .site-header .nav-contact > summary { font-size: 13px; letter-spacing: 0; }
}
@media (max-width: 480px) {
  .site-header { column-gap: 8px; }
  .site-header .brand .wordmark { font-size: 14px; }
  .site-header .brand .masthead-mark { height: 68px; margin-bottom: 0; }
  .site-header .site-nav { column-gap: 14px; }
  .site-header .site-nav a,
  .site-header .nav-contact summary { font-size: 13px; }
}

/* Native details: right when closed, down when open, with a rule below only. */
#program-dd > .program-bar {
  border-top: 0;
  border-left: 0;
  border-bottom: 1px solid var(--rule);
  padding-left: 0;
}
#program-dd > .program-bar::before { content: none; }
#program-dd > .program-bar::after { content: "▸"; }
#program-dd[open] > .program-bar::after { content: "▾"; }
#program-dd > .program-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.opportunity { scroll-margin-top: 100px; }
@media (max-width: 1050px) { .opportunity { scroll-margin-top: 210px; } }
@media print { .site-header { display: none; } }
#program-dd .intro-commitment { font-weight: 600; }
#program-dd .quiet-row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
#program-dd .intro-topics-title { font-size: 1.1rem; margin-block: 1.25rem .5rem; }
#program-dd .session-topics { padding-left: 1.4rem; }
#program-dd .session-topics li { margin-block: .35rem; }