/* ==========================================================================
   OTN theme: WordPress's own blocks in the design's look.
   Loads after components.css. The patterns and template parts put the
   mockups' classes on WordPress's blocks (components.css draws those);
   this file covers what a block's own markup changes: buttons, the menus
   (core/navigation), images, galleries, the block styles that have no
   mockup class of their own, and the wrappers WordPress adds.

   Many selectors start with ":root": WordPress's own block styles load
   first and some are quite specific (the outline button, the navigation
   overlay, the gallery); the extra weight keeps the design's look without
   !important. Role tokens only, so light and dark mode both work.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Page structure: template parts and the page's content
   -------------------------------------------------------------------------- */

.wp-site-blocks > * {
  margin-block: 0;
}

.otn-main,
.otn-main > .wp-block-post-content {
  margin: 0;
}

/* The About sub-menu (template part about-nav) sits where the page head's
   top padding was, 24px above the page's heading (DESIGN.md 6.9, 6.10) */
.otn-aboutnav {
  padding-top: var(--otn-space-7);
}

.otn-aboutnav + .wp-block-post-content > .otn-pagehead:first-child {
  padding-top: 0;
}

@media (min-width: 900px) {
  .otn-aboutnav {
    padding-top: 5rem;
  }
}

/* Parts that print nothing (a plugin switched off, no outage, no chips)
   leave no empty band or gap */
.otn-theatre:empty,
.otn-watch__notice:empty,
.otn-chips-row:empty {
  display: none;
}

/* A row of shows, or Syndication Partners, with no show in it: the whole
   section goes, heading included. The server already leaves these out
   (inc/markup.php); this is the fallback. Only the theme's own sections
   (a Query Loop inside), never a plugin's own rows. */
.otn-row:has(> .wp-block-query):not(:has(.otn-row__list > li)),
#partners:has(.wp-block-query):not(:has(.otn-grid > li)) {
  display: none;
}

/* Staff and Join: the chips in their own container after the page head,
   half a section's gap below them (DESIGN.md 6.10) */
.otn-chips-row {
  margin-bottom: calc(var(--otn-section-y) / 2);
}

/* Inside the page head (Shows, Alumni): 32px below what precedes them */
.otn-pagehead .otn-chips {
  margin-top: var(--otn-space-6);
}

.wp-block-query,
.wp-block-post-template {
  margin: 0;
}


/* --------------------------------------------------------------------------
   Buttons (core/button: DESIGN.md 6.8). Default = primary; the "Outline"
   style = ghost; "Compact" = compact (or the class otn-btn--compact with
   another style). The class otn-btn--play puts the play icon before the
   words ("Watch OTN live", "Watch on OTN’s streaming site").
   -------------------------------------------------------------------------- */

:root .wp-block-button > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--otn-space-2);
  max-width: 100%;
  min-height: var(--otn-btn-h);
  padding: var(--otn-space-3) var(--otn-space-5);
  background-color: var(--otn-accent);
  color: var(--otn-text-on-accent);
  border: 2px solid transparent;
  border-radius: var(--otn-radius-s);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-button);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition:
    background-color var(--otn-dur-fast) var(--otn-ease),
    border-color var(--otn-dur-fast) var(--otn-ease),
    color var(--otn-dur-fast) var(--otn-ease);
}

:root .wp-block-button > .wp-block-button__link:hover {
  background-color: var(--otn-accent-hover);
  color: var(--otn-text-on-accent);
}

:root .wp-block-button > .wp-block-button__link:active {
  background-color: var(--otn-accent-active);
  color: var(--otn-text-on-accent);
}

/* Ghost (Outline): transparent, 2px border in the text colour; hover fill
   on fine pointers only: #203299 on dark pages, navy on light */
:root .wp-block-button.is-style-outline > .wp-block-button__link,
:root .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):not(.has-text-color) {
  padding: var(--otn-space-3) var(--otn-space-5);
  background-color: transparent;
  background-image: none;
  color: var(--otn-text);
  border: 2px solid var(--otn-text);
}

:root .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--otn-text);
}

@media (hover: hover) and (pointer: fine) {
  :root .wp-block-button.is-style-outline > .wp-block-button__link:hover {
    background-color: var(--otn-fill);
    color: var(--otn-on-fill);
  }

  :root :is(.otn-on-raised, .otn-section--raised, .is-style-card, .is-style-callout) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
    background-color: var(--otn-fill-on-raised);
  }
}

/* Compact */
:root .wp-block-button:is(.is-style-compact, .otn-btn--compact) > .wp-block-button__link {
  min-height: var(--otn-btn-h-compact);
  padding: 10px 18px;
  font-size: var(--otn-fs-button-compact);
}

/* The play icon (decorative; drawn, so the button's words stay editable) */
:root .wp-block-button.otn-btn--play > .wp-block-button__link::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  clip-path: polygon(29.17% 16.67%, 29.17% 83.33%, 83.33% 50%);
}

/* In a button group: full width below 480px, side by side from 480px */
:root .otn-actions > .wp-block-button > .wp-block-button__link {
  width: 100%;
}

@media (min-width: 480px) {
  :root .otn-actions > .wp-block-button > .wp-block-button__link {
    width: auto;
  }
}

/* The header's "Pitch a show" is never full width */
:root .otn-header__pitch .wp-block-button > .wp-block-button__link {
  width: auto;
  padding-inline: 14px;
}

@media (min-width: 900px) {
  :root .otn-header__pitch .wp-block-button > .wp-block-button__link {
    padding: 10px 18px;
  }
}

@media (forced-colors: active) {
  :root .wp-block-button > .wp-block-button__link {
    border-color: ButtonText;
  }

  :root .wp-block-button.otn-btn--play > .wp-block-button__link::before {
    forced-color-adjust: none;
    background-color: ButtonText;
  }
}


/* --------------------------------------------------------------------------
   The header's menu (core/navigation with the class otn-nav: DESIGN.md 6.5)
   From 900px: the full menu, links the bar's full 72px height, the
   current page marked with a 4px orange bar along the bottom.
   Below 900px: the Menu button (WordPress's own switch is at 600px; the
   theme moves it to the design's 900px). Its menu is WordPress's overlay
   (a dialog rather than the mockups' disclosure: DESIGN.md 11.2), drawn as
   the mockups' phone menu: navy (white on light pages), an orange top
   edge, 56px rows, then FAQ, Facilities, Alumni and Contact, then
   "Pitch a show" as a full-width button.
   -------------------------------------------------------------------------- */

/* nav. because core repeats the block's classes (wp-block-navigation and
   otn-nav or otn-subnav) on the list inside it: without it the list would
   get the menu's margins a second time */
:root nav.wp-block-navigation.otn-nav {
  flex: 0 0 auto;
  gap: 0;
  font-family: var(--otn-font-sans);
}

/* The Menu button: at least 44x44, 2px border in the text colour, a
   three-line icon and the visible word "Menu" */
:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--otn-space-2);
  min-width: var(--otn-tap-min);
  min-height: var(--otn-tap-min);
  padding: 0 var(--otn-space-3);
  background-color: transparent;
  color: var(--otn-text);
  border: 2px solid var(--otn-text);
  border-radius: var(--otn-radius-s);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-button-compact);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  text-transform: none;
  transition: background-color var(--otn-dur-fast) var(--otn-ease);
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container-open::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 2px;
  margin-block: 6px;
  background-color: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

@media (hover: hover) and (pointer: fine) {
  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container-open:hover {
    background-color: var(--otn-fill);
    color: var(--otn-on-fill);
  }
}

/* 600-899px: keep the Menu button, and keep the menu closed until it is
   pressed (WordPress shows the full menu from 600px) */
@media (min-width: 600px) and (max-width: 899.98px) {
  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* The open menu */
:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--otn-space-2) var(--otn-gutter) var(--otn-space-5);
  background-color: var(--otn-bg);
  color: var(--otn-text);
  border-top: 4px solid var(--otn-bar);
  box-shadow: var(--otn-shadow-menu);
  font-family: var(--otn-font-sans);
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: stretch;
  padding-top: calc(var(--otn-tap-min) + var(--otn-space-4));
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/* Main links: 56px rows, 20px Bold, rule under each */
:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.5rem;
  padding: 0 var(--otn-space-4);
  color: var(--otn-text);
  border-bottom: var(--otn-border-hair);
  font-size: var(--otn-fs-menu);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  text-decoration: none;
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
  outline-offset: calc(-1 * var(--otn-focus-offset));
}

/* Current page or its section: a 6px orange bar on the left edge */
:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current] {
  text-decoration: none;
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--otn-bar-lt);
  background-color: var(--otn-bar);
}

/* FAQ, Facilities, Alumni, Contact: 16px above the first, 44px rows, 17px,
   underlined, no rule */
:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.otn-nav__more):not(.otn-nav__pitch) + .otn-nav__more {
  margin-top: var(--otn-space-4);
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .otn-nav__more .wp-block-navigation-item__content {
  min-height: var(--otn-tap-min);
  border-bottom: 0;
  font-size: 1.0625rem;
  font-weight: var(--otn-fw-book);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .otn-nav__more .wp-block-navigation-item__content[aria-current] {
  text-decoration: none;
}

/* "Pitch a show": a full-width primary button, 24px above */
:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .otn-nav__pitch {
  margin-top: var(--otn-space-5);
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .otn-nav__pitch .wp-block-navigation-item__content {
  justify-content: center;
  min-height: var(--otn-btn-h);
  padding: var(--otn-space-3) var(--otn-space-5);
  background-color: var(--otn-accent);
  color: var(--otn-text-on-accent);
  border: 2px solid transparent;
  border-radius: var(--otn-radius-s);
  font-size: var(--otn-fs-button);
  text-decoration: none;
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .otn-nav__pitch .wp-block-navigation-item__content:hover {
  background-color: var(--otn-accent-hover);
}

/* The menu's Close button: like the Menu button, with a cross */
:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: var(--otn-space-2);
  right: 0;
  display: inline-flex;
  align-items: center;
  min-width: var(--otn-tap-min);
  min-height: var(--otn-tap-min);
  padding: 0 var(--otn-space-3) 0 calc(var(--otn-space-3) + 20px + var(--otn-space-2));
  background-color: transparent;
  color: var(--otn-text);
  border: 2px solid var(--otn-text);
  border-radius: var(--otn-radius-s);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-button-compact);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  opacity: 1;
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container-close::before,
:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--otn-space-3);
  width: 20px;
  height: 2px;
  margin-top: -1px;
  background-color: currentColor;
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container-close::before {
  transform: rotate(45deg);
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container-close::after {
  transform: rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container-close:hover {
    background-color: var(--otn-fill);
    color: var(--otn-on-fill);
  }
}

/* The full menu from 900px */
@media (min-width: 900px) {
  :root nav.wp-block-navigation.otn-nav {
    align-self: stretch;
    margin-inline-start: 2.5rem;
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container-open {
    display: none;
  }

  /* The Close button's own display (above) would otherwise beat core's
     rule that hides it while the menu is shown in the bar */
  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
    display: none;
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item {
    align-items: stretch;
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--otn-header-h);
    padding: 0 var(--otn-space-3);
    color: var(--otn-text);
    font-size: var(--otn-fs-nav);
    font-weight: var(--otn-fw-bold);
    line-height: var(--otn-lh-label);
    letter-spacing: 0.01em;
    text-decoration: none;
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:focus-visible {
    outline-offset: calc(-1 * var(--otn-focus-offset));
  }

  /* Current page ("page") or its section ("true", e.g. About on FAQ): a
     4px orange bar along the bottom edge, no underline */
  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[aria-current] {
    text-decoration: none;
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[aria-current]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--otn-bar-current);
    background-color: var(--otn-bar);
  }

  /* The phone menu's extra links aren't in the full menu */
  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) :is(.otn-nav__more, .otn-nav__pitch) {
    display: none;
  }
}

@media (forced-colors: active) {
  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container-open::before {
    forced-color-adjust: none;
    background-color: ButtonText;
    box-shadow: 0 -6px 0 ButtonText, 0 6px 0 ButtonText;
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container-close::before,
  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container-close::after {
    forced-color-adjust: none;
    background-color: ButtonText;
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation-item__content[aria-current]::before,
  :root .wp-block-navigation.otn-nav .wp-block-navigation-item__content[aria-current]::after {
    background-color: CanvasText;
  }
}


/* --------------------------------------------------------------------------
   The About dropdown (DESIGN.md 6.5): About stays a link to /about/; a small
   arrow button beside it (core's submenu toggle) opens FAQ, Facilities,
   Alumni and Contact. WordPress's navigation block does the opening: a mouse
   pointing at About opens it, the arrow works for keyboard and touch, Esc
   closes. The panel has no orange top edge (it would double the
   current-page bar under About). In the phone menu the four links are a flat
   list under About, with no arrow.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .otn-nav__about.wp-block-navigation-item {
    position: relative;
    flex-direction: row;
  }

  /* The word and the arrow sit together: no padding between them */
  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .otn-nav__about > .wp-block-navigation-item__content {
    padding-right: 0;
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .otn-nav__about > .wp-block-navigation__submenu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    min-height: var(--otn-header-h);
    margin: 0;
    padding: 0 0 0 2px;
    background: transparent;
    color: var(--otn-text);
    border: 0;
    border-radius: 0;
    cursor: pointer;
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .otn-nav__about > .wp-block-navigation__submenu-icon:focus-visible {
    outline-offset: calc(-1 * var(--otn-focus-offset));
  }

  :root .wp-block-navigation.otn-nav .otn-nav__about > .wp-block-navigation__submenu-icon svg {
    stroke: currentColor;
    fill: none;
    transition: transform var(--otn-dur-fast) var(--otn-ease);
  }

  :root .wp-block-navigation.otn-nav .otn-nav__about > .wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* About on its own page or on one of its section's pages: the orange bar
     runs under the word and the arrow together (drawn on the item) */
  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .otn-nav__about > .wp-block-navigation-item__content[aria-current]::after {
    content: none;
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .otn-nav__about.wp-block-navigation-item:has(> .wp-block-navigation-item__content[aria-current])::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--otn-bar-current);
    background-color: var(--otn-bar);
  }

  /* The panel */
  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .otn-nav__about > .wp-block-navigation__submenu-container {
    top: 100%;
    left: 0;
    width: auto;
    min-width: 13rem;
    padding: 0;
    background-color: var(--otn-bg);
    color: var(--otn-text);
    border: 0;
    border-radius: 0;
    box-shadow: var(--otn-shadow-menu);
    z-index: var(--otn-z-menu);
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .otn-nav__about > .wp-block-navigation__submenu-container .wp-block-navigation-item {
    display: block;
    width: 100%;
  }

  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .otn-nav__about > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    min-height: var(--otn-tap-min);
    padding: 0 var(--otn-space-4);
    background-color: transparent;
    color: var(--otn-text);
    white-space: nowrap;
  }

  /* The page you are on, inside the panel: a 6px orange bar on the left */
  :root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .otn-nav__about > .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current]::after {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: var(--otn-bar-lt);
    height: auto;
  }
}

/* Phone menu: no arrow, the four links listed flat under About */
:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .otn-nav__about > .wp-block-navigation__submenu-icon {
  display: none;
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .otn-nav__about > .wp-block-navigation__submenu-container {
  position: static;
  visibility: visible;
  opacity: 1;
  width: 100%;
  height: auto;
  min-width: 0;
  margin: var(--otn-space-2) 0 var(--otn-space-4);
  padding: 0;
  background: transparent;
  color: inherit;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .otn-nav__about > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  min-height: var(--otn-tap-min);
  border-bottom: 0;
  font-size: 1.0625rem;
  font-weight: var(--otn-fw-book);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

:root .wp-block-navigation.otn-nav .wp-block-navigation__responsive-container.is-menu-open .otn-nav__about > .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current] {
  text-decoration: none;
}

@media (forced-colors: active) {
  :root .wp-block-navigation.otn-nav .otn-nav__about:has(> .wp-block-navigation-item__content[aria-current])::after {
    background-color: CanvasText;
  }
}


/* --------------------------------------------------------------------------
   The About sub-menu (core/navigation with the class otn-subnav: DESIGN.md
   6.10): About · FAQ · Facilities · Alumni · Contact; wraps on phones
   (nothing hidden or scrolled); 24px above the page's heading. 16px apart
   on phones, 24px from 600px. The current page: a 4px orange underline bar.
   -------------------------------------------------------------------------- */

/* nav.: see the header's menu above */
:root nav.wp-block-navigation.otn-subnav {
  margin-bottom: var(--otn-space-5);
  font-family: var(--otn-font-sans);
}

:root .wp-block-navigation.otn-subnav .wp-block-navigation__container {
  flex-wrap: wrap;
  gap: 0 var(--otn-space-4);
}

:root .wp-block-navigation.otn-subnav .wp-block-navigation-item__content {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--otn-tap-min);
  padding: 0;
  color: var(--otn-text);
  font-size: 1rem;
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  text-decoration: none;
}

:root .wp-block-navigation.otn-subnav .wp-block-navigation-item__content:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

:root .wp-block-navigation.otn-subnav .wp-block-navigation-item__content[aria-current="page"] {
  text-decoration: none;
}

:root .wp-block-navigation.otn-subnav .wp-block-navigation-item__content[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: var(--otn-space-1);
  left: 0;
  height: var(--otn-bar-current);
  background-color: var(--otn-bar);
}

@media (min-width: 600px) {
  :root .wp-block-navigation.otn-subnav .wp-block-navigation__container {
    column-gap: var(--otn-space-5);
  }
}

@media (forced-colors: active) {
  :root .wp-block-navigation.otn-subnav .wp-block-navigation-item__content[aria-current="page"]::after {
    background-color: CanvasText;
  }
}


/* --------------------------------------------------------------------------
   Headings and paragraphs
   -------------------------------------------------------------------------- */

/* "Lower third" heading style, for a heading on its own (the patterns put
   their section headings in an .otn-lt group, components.css 6.9): the
   6x64px orange bar under it and the 1px rule continuing to the right */
:root .wp-block-heading.is-style-lower-third {
  position: relative;
  margin: 0 0 var(--otn-space-5);
  padding-bottom: calc(var(--otn-space-3) + var(--otn-bar-lt));
  color: var(--otn-text);
  font-family: var(--otn-font-display);
  font-size: var(--otn-fs-display-m);
  font-weight: var(--otn-fw-display);
  line-height: var(--otn-lh-heading);
  letter-spacing: var(--otn-ls-heading);
  text-transform: uppercase;
  text-wrap: balance;
}

:root .wp-block-heading.is-style-lower-third::before,
:root .wp-block-heading.is-style-lower-third::after {
  content: "";
  position: absolute;
  left: 0;
}

:root .wp-block-heading.is-style-lower-third::before {
  bottom: 0;
  width: var(--otn-bar-lt-w);
  height: var(--otn-bar-lt);
  background-color: var(--otn-bar);
}

:root .wp-block-heading.is-style-lower-third::after {
  right: 0;
  bottom: calc(var(--otn-bar-lt) / 2);
  left: var(--otn-bar-lt-w);
  height: 1px;
  background-color: var(--otn-rule);
}

:root :is(.otn-on-raised, .otn-section--raised) .wp-block-heading.is-style-lower-third::after {
  background-color: var(--otn-rule-on-raised);
}

@media (min-width: 900px) {
  :root .wp-block-heading.is-style-lower-third {
    margin-bottom: var(--otn-space-6);
  }
}

@media (forced-colors: active) {
  :root .wp-block-heading.is-style-lower-third::before,
  :root .wp-block-heading.is-style-lower-third::after {
    background-color: CanvasText;
  }
}

/* The site's name as the homepage's H1, styled as the kicker */
:root .wp-block-site-title.otn-kicker {
  text-wrap: balance;
}

/* Home "About Us": the third paragraph in Sherman Serif lead */
:root p.otn-homeabout__lead {
  margin-bottom: var(--otn-space-5);
  font-family: var(--otn-font-serif);
  font-size: var(--otn-fs-lead);
  font-weight: var(--otn-fw-book);
  line-height: var(--otn-lh-lead);
}


/* --------------------------------------------------------------------------
   Lists: "Chips" (a list of links drawn as the jump chips, 6.10)
   -------------------------------------------------------------------------- */

:root ul.is-style-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--otn-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

:root ul.is-style-chips a {
  display: inline-flex;
  align-items: center;
  min-height: var(--otn-tap-min);
  padding: 0 var(--otn-space-4);
  background-color: var(--otn-raised);
  color: var(--otn-text);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--otn-chip-edge);
  font-size: var(--otn-fs-small);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  :root ul.is-style-chips a:hover {
    background-color: var(--otn-accent);
    color: var(--otn-text-on-accent);
    box-shadow: none;
  }
}

@media (forced-colors: active) {
  :root ul.is-style-chips a {
    border: 1px solid CanvasText;
  }
}

/* The 404 page's list of pages */
:root ul.otn-notfound__links {
  margin: var(--otn-space-3) 0 0;
  padding-left: 1.25em;
}

:root ul.otn-notfound__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--otn-tap-min);
}

.otn-notfound {
  padding-bottom: var(--otn-section-y);
}


/* --------------------------------------------------------------------------
   Quote: "Testimonial" style, drawn like the alumni quotes (6.17): the
   words in Sherman Serif with the orange bar, the citation as the name bar
   -------------------------------------------------------------------------- */

:root .wp-block-quote.is-style-testimonial {
  margin: 0;
  padding: 0;
  border: 0;
}

:root .wp-block-quote.is-style-testimonial > p {
  max-width: 60ch;
  margin: 0;
  padding-left: var(--otn-space-5);
  color: var(--otn-text);
  border-left: var(--otn-bar-lt) solid var(--otn-bar);
  font-family: var(--otn-font-serif);
  font-size: var(--otn-fs-quote);
  font-style: normal;
  line-height: var(--otn-lh-quote);
}

:root .wp-block-quote.is-style-testimonial > p + p {
  padding-top: 1em;
}

:root .wp-block-quote.is-style-testimonial cite {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 20px;
  padding: var(--otn-space-2) var(--otn-space-3);
  background-color: var(--otn-fill);
  color: var(--otn-on-fill);
  font-family: var(--otn-font-sans);
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: var(--otn-fw-bold);
  line-height: 1.3;
}

@media (forced-colors: active) {
  :root .wp-block-quote.is-style-testimonial cite {
    border: 1px solid CanvasText;
  }
}


/* --------------------------------------------------------------------------
   Images (core/image, core/post-featured-image)
   .otn-mat: the photo at its own shape on a black mat, 4px corners
   -------------------------------------------------------------------------- */

:root figure.wp-block-image {
  margin: 0;
}

:root :is(.wp-block-image, .wp-block-post-featured-image).otn-mat {
  overflow: hidden;
  background-color: var(--otn-screen);
  border-radius: var(--otn-radius-m);
}

:root :is(.wp-block-image, .wp-block-post-featured-image).otn-mat img {
  width: 100%;
  height: auto;
}

:root .wp-block-post-featured-image.otn-mat img {
  height: 100%;
  object-fit: cover;
}

/* An image's caption sits under the picture on the page colour (no text
   of ours on a photo or on black) */
:root .wp-block-image figcaption,
:root .wp-element-caption {
  margin: var(--otn-space-3) 0 0;
  color: var(--otn-text);
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
  text-align: left;
}

/* "Enlarge" (WordPress's lightbox button over a photo): the design's
   focus ring, drawn inside the photo so it is never cut off */
:root .wp-lightbox-container button:focus-visible {
  outline: var(--otn-focus-width) solid var(--otn-focus);
  outline-offset: calc(-1 * var(--otn-focus-width));
}

/* The lightbox's own buttons and frame follow the page's colours */
:root .wp-lightbox-overlay .close-button {
  color: var(--otn-text);
}


/* --------------------------------------------------------------------------
   Gallery (core/gallery with the class otn-gallery: DESIGN.md 6.20)
   1 column on phones, 2 from 600px, 3 from 900px; photos keep their own
   shape on a black mat, never cropped (the patterns switch the gallery's
   cropping off); the caption is the photo credit, under the photos.
   Facilities and Join size their galleries in pages/*.css.
   -------------------------------------------------------------------------- */

:root .wp-block-gallery.has-nested-images.otn-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--otn-space-2);
  margin: 0;
}

/* (Two :not(#…) so this outweighs WordPress's own column widths for
   galleries, which use one, plus :first-child and :nth-last-child; here the
   grid sizes the photos) */
:root .wp-block-gallery.has-nested-images.otn-gallery figure.wp-block-image:not(#individual-image):not(#otn-gallery-image) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background-color: var(--otn-screen);
  border-radius: var(--otn-radius-m);
}

:root .wp-block-gallery.has-nested-images.otn-gallery figure.wp-block-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* A photo's own caption: under it, on the page colour */
:root .wp-block-gallery.has-nested-images.otn-gallery figure.wp-block-image figcaption {
  position: static;
  max-height: none;
  margin: 0;
  padding: var(--otn-space-2) 0 0;
  background: var(--otn-bg);
  color: var(--otn-text);
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
  text-align: left;
  text-shadow: none;
}

/* The gallery's caption: the photo credit, 12px under the photos */
:root .wp-block-gallery.has-nested-images.otn-gallery > figcaption.blocks-gallery-caption {
  grid-column: 1 / -1;
  margin: calc(var(--otn-space-3) - var(--otn-space-2)) 0 0;
  padding: 0;
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
  text-align: left;
}

@media (min-width: 600px) {
  :root .wp-block-gallery.has-nested-images.otn-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  :root .wp-block-gallery.has-nested-images.otn-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--otn-space-3);
  }

  :root .wp-block-gallery.has-nested-images.otn-gallery > figcaption.blocks-gallery-caption {
    margin-top: 0;
  }
}

/* A gallery with no photos yet (a new Facilities section) takes no room */
:root .wp-block-gallery.otn-gallery:empty {
  display: none;
}


/* --------------------------------------------------------------------------
   Lists of posts (the news row and index.html: 6.25)
   -------------------------------------------------------------------------- */

:root .otn-news__card .wp-block-post-title {
  margin: 0;
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-h3);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-h3);
  text-transform: none;
}

:root .otn-news__card .wp-block-post-date {
  margin: 0;
}

:root .otn-news__card .wp-block-post-excerpt__excerpt {
  margin: 0;
}

.otn-posts {
  padding-bottom: var(--otn-section-y);
}

:root .otn-pagination {
  gap: var(--otn-space-4);
  margin-top: var(--otn-space-7);
  font-weight: var(--otn-fw-bold);
}

:root .otn-pagination a,
:root .otn-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  min-width: var(--otn-tap-min);
  min-height: var(--otn-tap-min);
}