/* ==========================================================================
   OTN theme: components (DESIGN.md 6.2-6.25), ported from the mockups'
   assets/css/components.css.
   Loads after tokens.css and base.css; blocks.css (how WordPress's own
   blocks take on this look) and pages/*.css load after this file.

   These are the mockups' components with the mockups' class names. OTN's
   plugins print the same markup (the LIVE bar, posters, rows, tiles, staff
   cards, quotes, spotlights, FAQ, job cards, schedule, players, forms,
   cookie notice), and the theme's patterns put the same classes on
   WordPress's blocks, so one set of rules draws both.
   Left out from the mockups: the mockup panel, placeholder chips and
   mockup notes, the breadcrumb (no page uses one), homepage versions B to
   D and version C's featured row (only version A is built), and the
   mockups' own phone menu (the theme uses WordPress's navigation block:
   blocks.css).

   - Phone first: min-width queries at 360 / 480 / 600 / 900 / 1200px.
     The max-width queries are the layouts the design defines for small
     screens only: rows stacking as a compact list at 360px and narrower,
     the Shows grid's and Home's stacked rows below 600px; plus one
     max-height query, the cookie notice going static on very short
     screens (6.3).
   - Hover-only background fills sit in (hover: hover) and (pointer: fine),
     so they don't stick after a tap on touch screens.
   - Role tokens only (--otn-*); no --su-* primitives here. No rule checks
     which mode is on: light mode only gives the tokens other values.
   - Each component ends with its own forced-colours rules.
   ========================================================================== */


/* ==========================================================================
   6.3 Cookie notice (printed by otn-privacy)
   Fixed to the bottom; #203299 with a 4px orange top edge. Not a dialog.
   A dark part (tokens.css): it keeps these colours on light pages too.
   ========================================================================== */

.otn-cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--otn-z-cookie);
  padding: var(--otn-space-4) var(--otn-gutter);
  background-color: var(--otn-raised);
  color: var(--otn-text);
  border-top: 4px solid var(--otn-bar);
}

.otn-cookie__inner {
  display: flex;
  flex-direction: column;
  gap: var(--otn-space-4);
  max-width: var(--otn-w-wide);
  margin-inline: auto;
}

.otn-cookie__text {
  margin: 0;
  max-width: none;
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
}

/* Phone: text above, button full width below */
.otn-cookie .otn-cookie__dismiss {
  width: 100%;
}

@media (min-width: 600px) {
  .otn-cookie__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .otn-cookie .otn-cookie__dismiss {
    flex-shrink: 0;
    width: auto;
  }
}

/* Very short or heavily zoomed screens (400% zoom, phones on their side):
   the notice is first in the page, so static puts it at the top, pushing
   content down instead of covering it (its script then reports
   --otn-cookie-h as 0) */
@media (max-height: 30em) {
  .otn-cookie {
    position: static;
  }
}


/* ==========================================================================
   6.4 LIVE bar (printed by otn-settings' otn/live-bar) and the LIVE badge
   The LIVE bar is a dark part (tokens.css): #203299 with white text on
   light pages too.
   ========================================================================== */

.otn-livebar {
  background-color: var(--otn-raised);
  color: var(--otn-text);
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
}

/* min-height, never a fixed height: it wraps to two lines at 320px */
.otn-livebar__inner {
  display: flex;
  align-items: center;
  gap: var(--otn-space-3);
  min-height: 2.25rem; /* 36 below 600px */
  max-width: var(--otn-w-wide);
  margin-inline: auto;
  padding-inline: var(--otn-gutter);
}

/* The link fills the bar's height and has 4px/8px of padding, so the
   focus ring (offset -3px) stays inside the bar without touching the
   text; the negative start margin keeps the badge on the content edge. */
.otn-livebar__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  gap: var(--otn-space-1) var(--otn-space-3);
  margin-inline-start: calc(-1 * var(--otn-space-2));
  padding: var(--otn-space-1) var(--otn-space-2);
  color: var(--otn-link-on-raised);
  text-decoration: none;
}

.otn-livebar .otn-livebar__link,
.otn-livebar .otn-livebar__link:hover {
  color: var(--otn-link-on-raised);
  text-decoration: none;
}

.otn-livebar__text strong {
  font-weight: var(--otn-fw-bold);
}

.otn-livebar__link:hover .otn-livebar__text {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.otn-livebar__link:focus-visible {
  outline-offset: calc(-1 * var(--otn-focus-offset));
}

.otn-livebar__arrow {
  display: inline-block;
}

/* The arrow nudges right on hover; not at all with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .otn-livebar__arrow {
    transition: transform var(--otn-dur-base) var(--otn-ease);
  }

  .otn-livebar__link:hover .otn-livebar__arrow {
    transform: translateX(4px);
  }
}

/* "All the ways to watch": from 900px only, pushed to the right */
.otn-livebar__more {
  display: none;
}

.otn-livebar__more:focus-visible {
  outline-offset: calc(-1 * var(--otn-focus-offset));
}

/* "On now" (otn-schedule's otn/on-now, in the place the LIVE bar leaves
   after its main link): plain text, never inside the link. Left out below
   900px, so the bar stays one slim line on phones and tablets; from 900px
   it shows on one line only (its script leaves out the episode, then hides
   the line, when it doesn't fit: DESIGN.md 6.4). The shared look of the
   words is .otn-onnow, below. */
.otn-livebar__now {
  display: none;
}

/* The words of an "On now" line (the LIVE bar's and the Watch page's): the
   label in Bold, the show in Bold, the rest as written; the LIVE badge (on
   Watch, for a live programme) keeps its dot still, as in the schedule */
.otn-onnow__label,
.otn-onnow__show {
  font-weight: var(--otn-fw-bold);
}

.otn-onnow .otn-live-badge__dot {
  animation: none;
}

@media (min-width: 600px) {
  .otn-livebar__inner {
    min-height: var(--otn-livebar-h);
  }
}

@media (min-width: 900px) {
  /* Only the "On now" line gives way when the bar is short of room: the
     link and "All the ways to watch" keep their size and never wrap */
  .otn-livebar__link {
    flex-shrink: 0;
  }

  .otn-livebar__now {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .otn-livebar__more {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    align-self: stretch;
    margin-inline-start: auto;
    padding-inline: var(--otn-space-1);
    color: var(--otn-link-on-raised);
    font-size: var(--otn-fs-small);
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
  }

  .otn-livebar .otn-livebar__more:hover {
    color: var(--otn-link-on-raised);
  }
}

/* LIVE badge: reused on players, in the schedule and in the footer's
   "Watch OTN now" (6.6) */
.otn-live-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  min-height: var(--otn-badge-h);
  padding: 0 var(--otn-space-2);
  background-color: var(--otn-live);
  color: var(--otn-text-on-accent);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-label);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  letter-spacing: var(--otn-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: var(--otn-radius-s);
}

/* Pulses 3 times (3.6s), then stays solid; 0 times with reduced motion */
.otn-live-badge__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background-color: var(--otn-text-on-accent);
  border-radius: var(--otn-radius-round);
  animation-name: otn-live-pulse;
  animation-duration: var(--otn-live-pulse-dur);
  animation-timing-function: ease-in-out;
  animation-iteration-count: var(--otn-live-pulse-count);
}

@keyframes otn-live-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@media (forced-colors: active) {
  .otn-live-badge {
    border: 1px solid CanvasText;
  }

  .otn-live-badge__dot {
    background-color: CanvasText;
  }
}


/* ==========================================================================
   6.5 Header (the header template part: otn/header pattern)
   The bar row, the logo and "Pitch a show". The menu itself is WordPress's
   navigation block, drawn in blocks.css (the Menu button below 900px).
   ========================================================================== */

.otn-header {
  background-color: var(--otn-bg);
}

/* Bar row: 64px below 900px, 72px from 900px; 1px #203299 rule under it */
.otn-header__bar {
  position: relative;
  background-color: var(--otn-bg);
  border-bottom: var(--otn-border-hair);
}

.otn-header__inner {
  display: flex;
  align-items: center;
  gap: var(--otn-space-3);
  min-height: var(--otn-header-h-phone);
  max-width: var(--otn-w-wide);
  margin-inline: auto;
  padding-inline: var(--otn-gutter);
}

/* Brand group (otn/brand-logos block; 6.5, 2026-11-02): Newhouse lockup, a
   thin divider, then OTN's mark. On phones it pushes "Pitch a show" and Menu
   to the right. Each logo is two pictures, one per mode; the tokens
   --otn-show-on-dark / --otn-show-on-light (tokens.css, theme-light.css) show
   one and hide the other (display:none, so the hidden one is not read out).
   Under 360px the lockup is hidden so the OTN mark and Menu still fit one row. */
.otn-header__brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--otn-space-3);
  margin-inline-end: auto;
}

.otn-header__logo,
.otn-brand-nh,
.otn-brand-otn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  min-height: var(--otn-tap-min);
}

.otn-brand-divider {
  align-self: center;
  width: 1px;
  height: 1.5rem;
  background-color: var(--otn-brand-divider);
}

.otn-logo--on-dark  { display: var(--otn-show-on-dark); }
.otn-logo--on-light { display: var(--otn-show-on-light); }

.otn-header__logo img,
.otn-brand-nh img {
  width: auto;
}

.otn-header__logo img { height: var(--otn-logo-h-phone); }
.otn-brand-nh img     { height: var(--otn-nh-h-phone); }

@media (max-width: 359px) {
  .otn-header__brand .otn-brand-nh,
  .otn-header__brand .otn-brand-divider {
    display: none;
  }
}

/* Forced colours (both modes): the artwork's own colours would clash with the
   user's palette, so each logo sits on a white plate in its light-mode
   (navy-letter) version; the dark-mode pictures are hidden. */
@media (forced-colors: active) {
  .otn-logo--on-dark  { display: none; }
  .otn-logo--on-light { display: inline-block; forced-color-adjust: none; background: #fff; padding: 2px 4px; }
}

/* "Pitch a show": compact, 15px, padding 0 14px below 900px; hidden at
   479px and narrower (the phone menu has it; 2026-11-02: the two logos need
   the room, at 375px the bar was 55px too wide with it). Printed twice, so the
   keyboard order matches the screen: before the menu below 900px, after
   it from 900px (patterns/header.php) */
.wp-block-buttons.otn-header__pitch {
  display: none;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .wp-block-buttons.otn-header__pitch--phone {
    display: flex;
  }
}

@media (min-width: 900px) {
  .otn-header__inner {
    min-height: var(--otn-header-h);
  }

  .otn-header__brand {
    margin-inline-end: 0;
    gap: var(--otn-space-4);
  }

  .otn-header__logo img { height: var(--otn-logo-h); }
  .otn-brand-nh img     { height: var(--otn-nh-h); }

  .wp-block-buttons.otn-header__pitch--phone {
    display: none;
  }

  .wp-block-buttons.otn-header__pitch--wide {
    display: flex;
    margin-inline-start: auto;
  }
}

/* Sticky from 900px, only when the viewport is at least 500px tall: the
   LIVE bar scrolls away and the 72px bar row stays */
@media (min-width: 900px) and (min-height: 500px) {
  .otn-header {
    position: sticky;
    top: calc(-1 * var(--otn-livebar-h));
    z-index: var(--otn-z-header);
  }

  /* Signed-in visitors: under WordPress's toolbar */
  .admin-bar .otn-header {
    top: calc(32px - var(--otn-livebar-h));
  }

  /* No LIVE bar (switched off in Homepage & live > LIVE bar & outages, or
     otn-settings off: otn/live-bar prints nothing): the bar row is the
     header's top, so it sticks at the top. Browsers without :has() keep
     the rule above. */
  .otn-header:not(:has(.otn-livebar)) {
    top: 0;
  }

  .admin-bar .otn-header:not(:has(.otn-livebar)) {
    top: 32px;
  }
}


/* ==========================================================================
   6.6 Footer (the footer template part: otn/footer pattern)
   ========================================================================== */

.otn-footer {
  padding-block: var(--otn-space-7) var(--otn-space-5);
  background-color: var(--otn-bg);
  border-top: var(--otn-border-hair);
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
}

/* Footer links take the text colour: white on dark pages, navy on light */
.otn-footer a:not(.otn-btn, .wp-element-button),
.otn-footer a:not(.otn-btn, .wp-element-button):hover {
  color: var(--otn-text);
}

/* Ident row: the station sign-off. The logo and "Watch OTN now" are one
   group (.otn-footer__identmain), which wraps as it needs; then the
   light/dark switch, its one fixed place ("top right", the owner,
   2026-10-20). Phones: one column, the switch on a line of its own under
   the group, at the right, 16px below it. From 600px the switch sits at
   the far right of the logo's line (below). Without JavaScript the switch
   is hidden, so the row is the group alone. */
.otn-footer__ident {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--otn-space-4);
  margin-bottom: var(--otn-space-6);
}

.otn-footer__identmain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--otn-space-4) var(--otn-space-5);
}

.otn-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--otn-space-3) var(--otn-space-4);
}

.otn-footer__brand img {
  width: auto;
  height: 3rem;
}

/* "Watch OTN now" (otn-settings' otn/watch-link, ident look): the LIVE
   bar's link pattern (6.4), the LIVE badge, "Watch OTN now" in Bold and an
   arrow, in the footer's own colours (white on navy, navy on white in
   light mode). 44px tall on phones, 32px from 600px, like the other
   footer links. Hover underlines the words and nudges the arrow right (not
   with reduced motion). The badge's dot stays still here: the LIVE bar's
   badge already pulses at the top of the page. */
.otn-footer__watch {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--otn-space-1) var(--otn-space-3);
  min-height: var(--otn-tap-min);
}

.otn-footer a.otn-footer__watch {
  text-decoration: none;
}

.otn-footer__watch:hover .otn-footer__watchtext {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.otn-footer__watch .otn-live-badge__dot {
  animation: none;
}

.otn-footer__watcharrow {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .otn-footer__watcharrow {
    transition: transform var(--otn-dur-base) var(--otn-ease);
  }

  .otn-footer__watch:hover .otn-footer__watcharrow {
    transform: translateX(4px);
  }
}

/* Columns: phone one column; 600px contact | follow with the nav spanning
   both; 900px+ 1.2fr 2fr 1fr */
.otn-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--otn-space-6);
}

.otn-footer__col {
  min-width: 0;
}

/* The site's name: an H2 styled small */
.otn-footer .otn-footer__name {
  margin: 0 0 var(--otn-space-3);
  color: var(--otn-text);
  font-family: var(--otn-font-sans);
  font-size: 1.25rem;
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-h3);
  letter-spacing: 0;
  text-transform: none;
}

.otn-footer .otn-footer__heading {
  margin: 0 0 var(--otn-space-3);
  color: var(--otn-kicker);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-label);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  letter-spacing: var(--otn-ls-label);
  text-transform: uppercase;
}

/* Address links (phone, email: otn-settings' otn/contact-details) sit in
   running text: always underlined. 44px tall on phones (32px from 600px),
   so the two stacked links aren't small targets. */
.otn-footer address,
.otn-footer__address {
  font-style: normal;
}

.otn-footer address a,
.otn-footer__address a {
  display: inline-flex;
  align-items: center;
  min-height: var(--otn-tap-min);
}

/* Nav groups: 2 columns on phones, 3 from 600px */
.otn-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--otn-space-6) var(--otn-space-5);
}

/* Phones: About OTN (6 links) spans two rows, so Get involved moves up
   under Watch in column 1 instead of leaving a gap there */
.otn-footer__nav > .otn-footer__group:nth-child(2) {
  grid-row: span 2;
}

/* Footer list links (the Watch list's first one, "Watch live", is
   otn-settings' otn/watch-link, added by inc/markup.php): underlined only
   on hover (the list context marks them as links); 44px rows on phones */
.otn-footer__group a {
  display: flex;
  align-items: center;
  min-height: var(--otn-tap-min);
}

.otn-footer .otn-footer__group a {
  text-decoration: none;
}

.otn-footer .otn-footer__group a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* Social links (otn-settings' otn/follow-otn): visible labels + 24px icons,
   rows at least 44px */
.otn-social li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--otn-space-1) var(--otn-space-2);
}

.otn-social__item {
  display: inline-flex;
  align-items: center;
  gap: var(--otn-space-3);
  min-height: var(--otn-tap-min);
  color: var(--otn-text);
}

.otn-social__item svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* In the footer they behave like the other footer list links */
.otn-footer a.otn-social__item {
  text-decoration: none;
}

.otn-footer a.otn-social__item:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* Legal bar: rule above; the "Syracuse University" link first, then the
   SU links (Accessibility, Report an accessibility concern, Privacy
   Policy), then the copyright line, wrapping as they need. These links
   sit in a row with plain text, so they stay underlined. */
.otn-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--otn-space-2) var(--otn-space-5);
  margin-top: var(--otn-space-7);
  padding-top: var(--otn-space-5);
  border-top: var(--otn-border-hair);
}

.otn-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--otn-space-2) var(--otn-space-5);
}

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

.otn-footer__copy {
  margin: 0;
}

/* Light/dark switch (the theme's otn/theme-switch: the ident row; theme.js
   shows it and runs it). A compact ghost button whose label names the mode
   it turns on ("Light mode" with a sun, "Dark mode" with a moon), with
   "Use device setting" to its left (first in the source too), a text
   button in the link colour, shown only while a choice is saved (the
   owner, 2026-10-21). The pair sits against the right edge at every width,
   and the link's place is kept while it's hidden (below), so the button
   never moves and the row never grows when it appears. At 320px, where
   the pair doesn't fit on one line, the link takes the line above the
   button (also kept). Hidden without JavaScript. */
.otn-themeswitch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--otn-space-2) var(--otn-space-4);
}

.otn-themeswitch__toggle {
  flex-shrink: 0;
  white-space: nowrap;
}

/* "Use device setting": 44px tall, underlined, Bold 15px */
.otn-themeswitch__device {
  display: inline-flex;
  align-items: center;
  min-height: var(--otn-tap-min);
  margin: 0;
  padding: 0;
  background: none;
  color: var(--otn-link);
  border: 0;
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-small);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  text-align: left;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.otn-themeswitch__device:hover {
  color: var(--otn-link-hover);
}

/* While no choice is saved, theme.js gives the link the hidden attribute.
   Its place is kept (invisible, so it isn't seen, focused or read out),
   so nothing moves when it appears. The one deliberate exception to
   base.css's [hidden] rule: this selector is more specific, so it wins. */
.otn-themeswitch__device[hidden] {
  display: inline-flex !important;
  visibility: hidden;
}

@media (min-width: 600px) {
  .otn-footer {
    padding-top: var(--otn-space-8);
  }

  .otn-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--otn-space-5);
  }

  .otn-footer__nav {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .otn-footer__nav > .otn-footer__group:nth-child(2) {
    grid-row: auto;
  }

  .otn-footer address a,
  .otn-footer__address a,
  .otn-footer__group a,
  .otn-footer__legal a,
  .otn-footer__watch {
    min-height: 2rem;
  }

  /* The ident row becomes two columns: the logo group and, at the far
     right, the switch: "Use device setting" then the button, on one line
     (max-content). The link's place is kept while it's hidden, so the
     switch is always the same width. Top-aligned, with the switch moved
     down to sit centred on the logo's 48px line. The 24px between the two
     columns is the switch's own margin, not a column gap, so without
     JavaScript (no switch) the group keeps the row's full width. */
  .otn-footer__ident {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
  }

  .otn-footer__ident > .otn-themeswitch {
    flex-wrap: nowrap;
    justify-self: end;
    margin-top: calc((3rem - var(--otn-btn-h-compact)) / 2);
    margin-inline-start: var(--otn-space-5);
  }
}

@media (min-width: 900px) {
  .otn-footer__cols {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr);
    column-gap: var(--otn-space-6);
  }

  .otn-footer__nav {
    grid-column: auto;
    grid-row: auto;
  }
}


/* ==========================================================================
   6.8 Buttons and text links
   .otn-btn is the mockups' button (OTN's plugins print it); WordPress's
   button block takes the same look in blocks.css.
   ========================================================================== */

/* 2px transparent border so the shape shows in forced-colours mode */
.otn-btn {
  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);
  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 a.otn-btn {
  text-decoration: none;
}

/* Optional 20px icon before or after the label */
.otn-btn svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Primary: orange fill, navy text; hover Light Orange; pressed Medium Orange */
.otn-btn--primary,
:root a.otn-btn--primary {
  background-color: var(--otn-accent);
  color: var(--otn-text-on-accent);
}

.otn-btn--primary:hover,
:root a.otn-btn--primary:hover {
  background-color: var(--otn-accent-hover);
  color: var(--otn-text-on-accent);
}

.otn-btn--primary:active {
  background-color: var(--otn-accent-active);
  color: var(--otn-text-on-accent);
}

/* Ghost: transparent, 2px border in the text colour (white on dark
   pages, navy on light); hover fill (fine pointers only, so it doesn't
   stick after a tap): #203299 on dark pages, navy on light, white text */
.otn-btn--ghost,
:root a.otn-btn--ghost {
  background-color: transparent;
  color: var(--otn-text);
  border-color: var(--otn-text);
}

@media (hover: hover) and (pointer: fine) {
  .otn-btn--ghost:hover,
  :root a.otn-btn--ghost:hover {
    background-color: var(--otn-fill);
    color: var(--otn-on-fill);
  }

  /* On a #203299 surface the ghost hover fill is navy (light pages: these
     surfaces are white, and the fill is navy too) */
  :is(.otn-on-raised, .otn-section--raised, .otn-card, .otn-callout, .is-style-card, .is-style-callout) .otn-btn--ghost:hover {
    background-color: var(--otn-fill-on-raised);
  }
}

.otn-btn--compact {
  min-height: var(--otn-btn-h-compact);
  padding: 10px 18px;
  font-size: var(--otn-fs-button-compact);
}

.otn-btn--block {
  display: flex;
  width: 100%;
}

/* Text link: Light Orange Bold 16px, underlined, 44px tall hit area. Also
   the links in a paragraph with the class otn-morelink or otn-lt__more
   (the patterns' "See all" links), with the arrow the mockups put after
   them (drawn here, so screen readers don't read it). */
.otn-textlink,
:is(.otn-morelink, .otn-lt__more) a {
  display: inline-block;
  padding-block: var(--otn-space-3);
  color: var(--otn-link);
  font-family: var(--otn-font-sans);
  font-size: 1rem;
  font-weight: var(--otn-fw-bold);
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.otn-textlink:hover,
:is(.otn-morelink, .otn-lt__more) a:hover {
  color: var(--otn-link-hover);
}

:is(.otn-morelink, .otn-lt__more) a::after {
  content: " \2192";
  content: " \2192" / "";
}

:root :where(p.otn-morelink, p.otn-lt__more) {
  max-width: none;
  margin: 0;
}

/* Two "See all" links in one line (Home, OTN Originals): a gap between them. */
.otn-lt__more a + a {
  margin-inline-start: 1.5rem;
}


/* ==========================================================================
   6.9 Lower-third section heading and page head
   ========================================================================== */

/* Grid: row 1 the H2 (and "See all" from 600px), row 2 the 6x64px orange
   bar with the 1px rule continuing to the right edge, row 3 "See all" on
   phones. The bar and rule are decorative pseudo-elements. */
.otn-lt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--otn-space-5);
}

.otn-lt::before,
.otn-lt::after {
  content: "";
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  margin-top: var(--otn-space-3);
}

.otn-lt::before {
  justify-self: start;
  width: var(--otn-bar-lt-w);
  height: var(--otn-bar-lt);
  background-color: var(--otn-bar);
}

.otn-lt::after {
  height: 1px;
  margin-inline-start: var(--otn-bar-lt-w);
  background-color: var(--otn-rule);
}

.otn-lt .otn-lt__title,
.otn-lt__title {
  grid-row: 1;
  grid-column: 1;
  max-width: 20ch;
  margin: 0;
  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;
}

/* Phones: "See all" drops under the bar, left-aligned */
.otn-lt__more {
  grid-row: 3;
  grid-column: 1;
  justify-self: start;
}

/* Fact chip (e.g. "Now hiring"); also used on its own in job cards, and as
   the paragraph style "Fact strap" (is-style-strap) */
.otn-lt__strap,
:root p.is-style-strap {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: var(--otn-space-1) 10px;
  background-color: var(--otn-accent);
  color: var(--otn-text-on-accent);
  border-radius: var(--otn-radius-s);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-label);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  letter-spacing: var(--otn-ls-label);
  text-transform: uppercase;
}

/* Inside a lower third the chip sits on the rule, just after the bar */
.otn-lt > .otn-lt__strap {
  z-index: 1;
  grid-row: 2;
  grid-column: 1;
  align-self: center;
  justify-self: start;
  margin: var(--otn-space-3) 0 0 calc(var(--otn-bar-lt-w) + var(--otn-space-3));
}

/* On a #203299 band the bar stays orange and the rule turns navy (light
   pages: the band is white and the rule Light Gray, as elsewhere) */
:is(.otn-on-raised, .otn-section--raised) .otn-lt::after {
  background-color: var(--otn-rule-on-raised);
}

@media (min-width: 600px) {
  .otn-lt {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--otn-space-5);
  }

  .otn-lt .otn-lt__title {
    align-self: end;
    align-self: last baseline;
  }

  /* At the right, on the H2's (last) baseline */
  .otn-lt__more {
    grid-row: 1;
    grid-column: 2;
    align-self: end;
    align-self: last baseline;
  }
}

@media (min-width: 900px) {
  .otn-lt {
    margin-bottom: var(--otn-space-6);
  }

  /* 20ch on phones, 36ch from 900px: short headings stay on one line,
     long ones balance onto two. Its own 1fr column, so it never runs
     into "See all". */
  .otn-lt .otn-lt__title {
    max-width: 36ch;
  }
}

/* Kicker (reused everywhere; the paragraph style "Kicker"): 8px above the
   heading it introduces */
.otn-kicker,
:root .is-style-kicker {
  max-width: none;
  margin: 0 0 var(--otn-space-2);
  color: var(--otn-kicker);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-label);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  letter-spacing: var(--otn-ls-label);
  text-transform: uppercase;
}

/* Kickers are white on #203299 surfaces */
:is(.otn-on-raised, .otn-section--raised, .otn-card, .otn-callout, .is-style-card, .is-style-callout) :is(.otn-kicker, .is-style-kicker) {
  color: var(--otn-text);
}

/* Page head (every page except Home) */
.otn-pagehead {
  padding-block: var(--otn-space-7) 2.5rem;
}

.otn-pagehead__title,
:root .otn-pagehead .otn-pagehead__title {
  max-width: 16ch;
  margin: 0;
  color: var(--otn-text);
  font-family: var(--otn-font-display);
  font-size: var(--otn-fs-display-l);
  font-weight: var(--otn-fw-display);
  line-height: var(--otn-lh-display);
  letter-spacing: var(--otn-ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}

/* 6x96px orange bar 16px under the H1; grows once on load (instant with
   reduced motion, via the duration token) */
.otn-pagehead__title::after {
  content: "";
  display: block;
  width: var(--otn-bar-pagehead-w);
  height: var(--otn-bar-lt);
  margin-top: var(--otn-space-4);
  background-color: var(--otn-bar);
  transform-origin: left center;
  animation: otn-bar-grow var(--otn-dur-slow) var(--otn-ease) both;
}

@keyframes otn-bar-grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Dek (also the paragraph style "Introduction"): Sherman Serif lead, 24px
   below the bar; 34em (~780px at 23px) */
.otn-pagehead__dek,
:root .otn-pagehead .otn-pagehead__dek,
:root .is-style-dek {
  max-width: 34em;
  margin: var(--otn-space-5) 0 0;
  color: var(--otn-text);
  font-family: var(--otn-font-serif);
  font-size: var(--otn-fs-lead);
  font-weight: var(--otn-fw-book);
  line-height: var(--otn-lh-lead);
}

@media (min-width: 900px) {
  .otn-pagehead {
    padding-block: 5rem 3.5rem;
  }
}

@media (forced-colors: active) {
  .otn-lt::before,
  .otn-lt::after,
  .otn-pagehead__title::after {
    background-color: CanvasText;
  }

  .otn-lt__strap,
  :root p.is-style-strap {
    border: 1px solid CanvasText;
  }
}


/* ==========================================================================
   6.10 Small parts: jump chips, back to top
   (The About sub-menu is WordPress's navigation block: blocks.css.)
   ========================================================================== */

/* Jump chips (otn/on-this-page; Shows, Staff, Join, Alumni): 44px pills on
   #203299; hover orange. Light pages: white pills (--otn-raised) with a 2px
   navy inside edge (an inset shadow, so the size is the same in both modes) */
.otn-chips ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--otn-space-3);
}

.otn-chips a,
:root .otn-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;
  transition:
    background-color var(--otn-dur-fast) var(--otn-ease),
    color var(--otn-dur-fast) var(--otn-ease);
}

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

/* Back to top (otn/back-to-top; the long pages: Staff, Join, Facilities,
   Alumni), the last block of the page's content. Half a section gap above
   and below it (24px on phones, 48px at 1440), the same on every page: the
   block before it drops its own bottom padding, so the gap above starts
   where that block's content ends. A #203299 or black band keeps its
   padding (it is inside the band's fill). Without :has() the block's own
   padding adds to the gap above. */
.otn-totop {
  padding-block: calc(var(--otn-section-y) / 2);
}

:is(main, .wp-block-post-content) > :not(.otn-section--raised, .otn-section--screen):has(+ .otn-totop) {
  padding-bottom: 0;
}

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


/* ==========================================================================
   6.11 Poster card (show tile: otn-shows' otn/show-card; episode cards:
   otn-episodes' rows)
   The card is a one-column grid, so the title strap can stack above the
   frame with z-index as a grid item, without position: relative; that keeps
   the article (not the H3) as the stretched link's containing block.
   ========================================================================== */

.otn-poster {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

/* 16:9 frame on black; the picture fills it (object-fit: cover). The
   pictures are copies of the posters of OTN's streaming site */
.otn-poster__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--otn-screen);
  border-radius: var(--otn-radius-m);
}

/* Hover frame: an overlay, so the inset shadow paints above the image */
.otn-poster__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  transition: box-shadow var(--otn-dur-base) var(--otn-ease);
}

.otn-poster__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--otn-dur-base) var(--otn-ease);
}

/* Title strap: solid navy, 6px orange left border, like a lower third;
   never clipped. It sits just under the frame (8px), not over it: the
   pictures are OTN's own posters, which carry the show's name in the
   artwork, so nothing may cover them. Light pages: a white strap with navy
   text and a 1px Light Gray edge on its other three sides (--otn-edge-w is
   0 in dark mode) */
.otn-poster__title,
:root .otn-poster .otn-poster__title {
  z-index: var(--otn-z-raised);
  margin: var(--otn-space-2) var(--otn-space-5) 0 0;
  padding: var(--otn-space-2) var(--otn-space-3) 6px;
  background-color: var(--otn-bg);
  color: var(--otn-text);
  border: var(--otn-edge-w) solid var(--otn-edge);
  border-left: var(--otn-bar-lt) solid var(--otn-bar);
  border-radius: var(--otn-radius-s);
  font-family: var(--otn-font-display);
  font-size: var(--otn-fs-poster);
  font-weight: var(--otn-fw-display);
  line-height: var(--otn-lh-heading);
  letter-spacing: var(--otn-ls-poster);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* One link per card, stretched over the whole card */
.otn-poster__link,
:root .otn-poster__link,
:root .otn-poster__link:hover {
  color: inherit;
  text-decoration: none;
}

.otn-poster__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* One-liner: 15px, 10px below the strap, never clamped */
.otn-poster__line,
:root .otn-poster .otn-poster__line {
  max-width: none;
  margin: 10px 0 0;
  color: var(--otn-text);
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
}

/* Focus: the ring goes round the frame (offset 4px); in a row from 600px
   it is drawn inside the frame instead (6.12). The link's own ring is
   removed only where :has() works; older browsers keep it on the title. */
.otn-poster:has(.otn-poster__link:focus-visible) .otn-poster__frame {
  outline: var(--otn-focus-width) solid var(--otn-focus);
  outline-offset: var(--otn-focus-offset-media);
}

@supports selector(:has(*)) {
  .otn-poster__link:focus-visible {
    outline: none;
  }
}

/* Hover (fine pointers): 3px inset orange frame + gentle zoom (no zoom
   with reduced motion: --otn-poster-zoom is 1) */
@media (hover: hover) and (pointer: fine) {
  .otn-poster:not(.otn-poster--partner):hover .otn-poster__frame::after {
    box-shadow: var(--otn-shadow-poster-hover);
  }

  .otn-poster:not(.otn-poster--partner):hover .otn-poster__img {
    transform: scale(var(--otn-poster-zoom));
  }
}

/* Episode card (Home's New on OTN and Popular this month rows): the same
   card, the title strap holding the whole title as its one link: the
   show's name as a small kicker on its own line above the episode's part,
   which keeps the poster title's type. The one-liner is the episode's
   length ("12 min"). */
.otn-poster__show {
  display: block;
  margin-bottom: var(--otn-space-1);
  color: var(--otn-kicker);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-label);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  letter-spacing: var(--otn-ls-label);
  text-transform: uppercase;
}

/* Syndication partner: logo contained on black, strap not pulled up, full
   description. A partner with no website has an H3 that isn't a link; a
   show listed among partners (44 Films) has its streaming-site poster
   contained the same way, and its name is the card's one stretched link */
.otn-poster--partner .otn-poster__img {
  object-fit: contain;
  padding: var(--otn-space-4);
}

:root .otn-poster--partner .otn-poster__title {
  margin: 0;
}

/* A partner card that links gets the posters' hover frame (fine pointers),
   so it reads as a link like the posters; no zoom, as its picture is
   contained like a logo */
@media (hover: hover) and (pointer: fine) {
  .otn-poster--partner:has(.otn-poster__link):hover .otn-poster__frame::after {
    box-shadow: var(--otn-shadow-poster-hover);
  }
}

@media (forced-colors: active) {
  .otn-poster__title,
  :root .otn-poster .otn-poster__title {
    border: 1px solid CanvasText;
  }

  .otn-poster:has(.otn-poster__link:focus-visible) .otn-poster__frame {
    outline-color: Highlight;
  }
}


/* ==========================================================================
   6.12 Poster row and poster grid
   A row is a list (.otn-row__list) of cards: the mockups' <ul> (otn-episodes)
   or the Query Loop's post template (otn-shows' rows, patterns/home-*.php),
   whose items are plain <li>s, so the rules key on ".otn-row__list > li".
   ========================================================================== */

/* Row: native horizontal scrolling. 8px top / 20px bottom leave room for
   the focus ring and the scrollbar. At every width a whole number of
   cards plus about 40% of the next one shows: on phones (no visible
   scrollbar) that peek is the only "more to scroll" cue.
   Phones: to the screen edges, with the gutter as padding, so a swipe
   starts at the edge and the first card lines up with the page's content.
   From 600px the scroll box is the content column itself (below). */
.otn-row__list,
:root ul.otn-row__list {
  display: flex;
  align-items: flex-start;
  gap: var(--otn-grid-gap);
  margin: 0;
  padding: var(--otn-space-2) var(--otn-gutter) 20px;
  list-style: none;
  scroll-padding-inline: var(--otn-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--otn-scroll-thumb) var(--otn-scroll-track);
}

/* Safari ignores scrollbar-color; styling these keeps its scrollbar
   visible. Dark pages: orange thumb on a #203299 track; light pages: navy
   thumb on a Light Gray track (8.33:1) */
.otn-row__list::-webkit-scrollbar {
  height: 10px;
}

.otn-row__list::-webkit-scrollbar-track {
  background-color: var(--otn-scroll-track);
}

.otn-row__list::-webkit-scrollbar-thumb {
  background-color: var(--otn-scroll-thumb);
  border-radius: 5px;
}

/* From 600px, where a scrollbar shows, the scroll box is the content
   column itself (the owner, 2026-10-21): as wide as .otn-container's
   content, min(100%, 1280px) less the two gutters, centred, with no side
   padding. So the box, and the scrollbar's track with it, starts and ends
   on the same edges as the section headings' rule at every width, and the
   first card sits on the left one. */
@media (min-width: 600px) {
  .otn-row__list,
  :root ul.otn-row__list {
    width: calc(min(100%, var(--otn-w-wide)) - 2 * var(--otn-gutter));
    margin-inline: auto;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  /* Focus: the scroll box clips everything outside it, and the first and
     last cards touch its edges, so the posters' ring round the frame
     would be cut there. In a row it is drawn inside the frame instead, on
     the frame's overlay: the ring in the focus colour on the frame's edge,
     then a 3px halo in the page colour inside it (17.63:1 both modes).
     Forced colours keep the ring and drop the halo. */
  .otn-row__list .otn-poster:has(.otn-poster__link:focus-visible) .otn-poster__frame {
    outline: none;
  }

  .otn-row__list .otn-poster:has(.otn-poster__link:focus-visible) .otn-poster__frame::after {
    outline: var(--otn-focus-width) solid var(--otn-focus);
    outline-offset: calc(-1 * var(--otn-focus-width));
    box-shadow: inset 0 0 0 calc(2 * var(--otn-focus-width)) var(--otn-bg);
  }

  /* Tab: the browser scrolls the focused link (the title) into view, not
     the card. So the link's box is made as wide as the card: a block, plus
     the strap's bar, padding, edge and margin as scroll margin (18px at
     the start, 36px at the end, 37px in light mode). */
  .otn-row__list .otn-poster__link {
    display: block;
    scroll-margin-inline:
      calc(var(--otn-bar-lt) + var(--otn-space-3))
      calc(var(--otn-space-5) + var(--otn-edge-w) + var(--otn-space-3));
  }
}

/* Phones: 72vw cards, the next one peeks in. From 600px the width is
   (the row's width - gaps) / 2.4, 3.4 or 4.4 cards. Grids ignore
   flex-basis, so the Shows grid is unaffected. */
.otn-row__list > li {
  flex: 0 0 var(--otn-poster-w);
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  scroll-margin-inline: var(--otn-gutter);
}

/* Grid (Shows page; partners): same cards; 2 / 3 / 4 columns; 40px down */
.otn-grid,
:root ul.otn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem var(--otn-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.otn-grid--posters > li,
.otn-grid--partners > li {
  min-width: 0;
  margin: 0;
}

/* 600px: 2.4 cards (~218px at 600, ~283 at 768). No scroll margin on the
   items from here: a snapped card lines up with the content edge. */
@media (min-width: 600px) {
  .otn-row__list > li {
    flex-basis: calc((100% - 2 * var(--otn-grid-gap)) / 2.4);
    scroll-margin-inline: 0;
  }

  .otn-grid--posters,
  .otn-grid--partners,
  :root ul.otn-grid--posters,
  :root ul.otn-grid--partners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 900px: 3.4 cards (~231px at 900) */
@media (min-width: 900px) {
  .otn-row__list > li {
    flex-basis: calc((100% - 3 * var(--otn-grid-gap)) / 3.4);
  }

  .otn-grid--posters,
  .otn-grid--partners,
  :root ul.otn-grid--posters,
  :root ul.otn-grid--partners {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 1200px: 4.4 cards (~237px at 1200; ~251 from 1440 up) */
@media (min-width: 1200px) {
  .otn-row__list > li {
    flex-basis: calc((100% - 4 * var(--otn-grid-gap)) / 4.4);
  }

  .otn-grid--posters,
  :root ul.otn-grid--posters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Home's "Our shows" tiles (DESIGN.md 7.6): three across at 1200px and up,
   so the six types make two even rows. */
@media (min-width: 1200px) {
  .otn-types__grid,
  :root ul.otn-types__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A tile with no picture yet (Short Film Showcase today): a dashed frame
   instead of a black box, so it reads as "picture to come". */
.otn-types__grid .otn-poster__frame--empty {
  background: transparent;
  border: 2px dashed currentColor;
  opacity: 0.55;
}

/* Below 600px the Shows grid becomes a compact list: 128px 16:9 thumbnail
   on the left (spanning both rows), title and one-liner on the right,
   rows 16px apart with a 1px rule between. */
@media (max-width: 599.98px) {
  .otn-grid--posters {
    row-gap: 0;
  }

  .otn-grid--posters > li + li {
    margin-top: var(--otn-space-4);
    padding-top: var(--otn-space-4);
    border-top: var(--otn-border-hair);
  }

  .otn-grid--posters .otn-poster:not(.otn-poster--partner) {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--otn-space-1) var(--otn-space-3);
  }

  .otn-grid--posters .otn-poster:not(.otn-poster--partner) .otn-poster__frame {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: start;
  }

  :root .otn-grid--posters .otn-poster:not(.otn-poster--partner) .otn-poster__title {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    font-size: 1.375rem;
  }

  :root .otn-grid--posters .otn-poster:not(.otn-poster--partner) .otn-poster__line {
    grid-row: 2;
    grid-column: 2;
    margin: 0;
  }
}

/* Rows stack at 360px and narrower (400% zoom of 1280-1440px, and 360px
   Android phones), as a compact list, so nothing scrolls sideways. */
@media (max-width: 360px) {
  .otn-row__list,
  :root ul.otn-row__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .otn-row__list > li {
    flex: none;
    width: 100%;
  }

  .otn-row__list > li + li {
    margin-top: var(--otn-space-4);
    padding-top: var(--otn-space-4);
    border-top: var(--otn-border-hair);
  }

  .otn-row__list .otn-poster:not(.otn-poster--partner) {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--otn-space-1) var(--otn-space-3);
  }

  .otn-row__list .otn-poster:not(.otn-poster--partner) .otn-poster__frame {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: start;
  }

  :root .otn-row__list .otn-poster:not(.otn-poster--partner) .otn-poster__title {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    font-size: 1.375rem;
  }

  :root .otn-row__list .otn-poster:not(.otn-poster--partner) .otn-poster__line {
    grid-row: 2;
    grid-column: 2;
    margin: 0;
  }
}

/* Homepage rows on phones (the owner, 2026-10-20: "on mobile the homepage
   shows need to stack like they do on the shows page"): rows marked with
   the stack-phone row style (is-style-stack-phone on the Query Loop or on
   otn-episodes' row block; .otn-row--stack-phone in the mockups' markup)
   become the same compact list as the Shows page at every phone width.
   From 600px they are sideways rows again. */
@media (max-width: 599.98px) {
  :is(.otn-row--stack-phone, .is-style-stack-phone) .otn-row__list,
  :root :is(.otn-row--stack-phone, .is-style-stack-phone) ul.otn-row__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  :is(.otn-row--stack-phone, .is-style-stack-phone) .otn-row__list > li {
    flex: none;
    width: 100%;
  }

  :is(.otn-row--stack-phone, .is-style-stack-phone) .otn-row__list > li + li {
    margin-top: var(--otn-space-4);
    padding-top: var(--otn-space-4);
    border-top: var(--otn-border-hair);
  }

  :is(.otn-row--stack-phone, .is-style-stack-phone) .otn-row__list .otn-poster:not(.otn-poster--partner) {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--otn-space-1) var(--otn-space-3);
  }

  :is(.otn-row--stack-phone, .is-style-stack-phone) .otn-row__list .otn-poster:not(.otn-poster--partner) .otn-poster__frame {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: start;
  }

  :root :is(.otn-row--stack-phone, .is-style-stack-phone) .otn-row__list .otn-poster:not(.otn-poster--partner) .otn-poster__title {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    font-size: 1.375rem;
  }

  :root :is(.otn-row--stack-phone, .is-style-stack-phone) .otn-row__list .otn-poster:not(.otn-poster--partner) .otn-poster__line {
    grid-row: 2;
    grid-column: 2;
    margin: 0;
  }
}

/* The ring inside a row's poster frame (from 600px, above). The strap has
   a 1px border all round in forced colours (6.11), so the link's scroll
   margin follows it */
@media (forced-colors: active) and (min-width: 600px) {
  .otn-row__list .otn-poster:has(.otn-poster__link:focus-visible) .otn-poster__frame::after {
    outline-color: Highlight;
  }

  .otn-row__list .otn-poster__link {
    scroll-margin-inline:
      calc(1px + var(--otn-space-3))
      calc(var(--otn-space-5) + 1px + var(--otn-space-3));
  }
}


/* ==========================================================================
   6.13 Player ("click to play": otn-video-facade's otn/play-facade, and the
   homepage still that stands in for it)
   Nothing from YouTube or Lightcast loads until the visitor presses play.
   Also the Transcript disclosure (.otn-transcript) under a player.
   ========================================================================== */

/* 16:9 black frame; the play control is centred by the grid. The frame is
   a dark part (tokens.css): its play label, live strap, the play button's
   navy border and the white focus rings inside it are the same on light
   pages */
.otn-player__frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--otn-screen);
  border-radius: var(--otn-radius-m);
}

/* Phones: inside a container the frame runs the full screen width */
.otn-container .otn-player__frame {
  margin-inline: calc(-1 * var(--otn-gutter));
  border-radius: 0;
}

/* The still (the mockups' <img>, or the theme's image block with that class) */
.otn-player__still,
.otn-player__frame > .wp-block-image.otn-player__still,
.otn-player__still img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

/* The iframe the player puts in after the press */
.otn-player__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Focus moves into the player after the press: the frame clips overflow
   (and is full-bleed on phones), so the ring is drawn just inside */
.otn-player__frame iframe:focus-visible {
  outline-offset: calc(-1 * var(--otn-focus-width));
}

/* Live strap (live player only): top-left, 12px in, solid navy */
.otn-player__strap {
  position: absolute;
  top: var(--otn-space-3);
  left: var(--otn-space-3);
  z-index: 1;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--otn-space-2);
  max-width: calc(100% - 2 * var(--otn-space-3));
  margin: 0;
  padding: 6px 10px;
  background-color: var(--otn-bg);
  color: var(--otn-text);
  border-radius: var(--otn-radius-s);
  font-size: var(--otn-fs-small);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
}

/* Channel bug: OTN's white logo, bottom-right 16px in, full white */
.otn-player__bug {
  position: absolute;
  right: var(--otn-space-4);
  bottom: var(--otn-space-4);
  z-index: 1;
  width: 2rem;
  height: auto;
}

/* Play control: a link without JavaScript, a button after (same classes) */
.otn-play,
:root a.otn-play {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--otn-space-3);
  margin: 0;
  padding: 0;
  background: none;
  color: var(--otn-text);
  border: 0;
  border-radius: var(--otn-radius-s);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.otn-play:hover,
:root a.otn-play:hover {
  color: var(--otn-text);
}

/* Ring round the whole control, offset 4px (21:1 on black) */
.otn-play:focus-visible {
  outline-offset: var(--otn-focus-offset-media);
}

/* Orange circle, 4px navy border, 2px white outer ring, navy triangle */
.otn-play__button {
  position: relative;
  display: block;
  width: var(--otn-play-phone);
  height: var(--otn-play-phone);
  background-color: var(--otn-accent);
  border: 4px solid var(--otn-bg);
  border-radius: var(--otn-radius-round);
  box-shadow: var(--otn-shadow-play-ring);
  transition:
    background-color var(--otn-dur-fast) var(--otn-ease),
    transform var(--otn-dur-base) var(--otn-ease);
}

.otn-play__button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 56%; /* centred, nudged 6% right */
  width: 36%;
  height: 36%;
  background-color: var(--otn-text-on-accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(-50%, -50%);
}

/* Visible label = the accessible name */
.otn-play__label {
  display: block;
  max-width: 100%;
  padding: 6px var(--otn-space-3);
  background-color: var(--otn-bg);
  color: var(--otn-text);
  border-radius: var(--otn-radius-s);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-small);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  text-align: center;
}

.otn-play:hover .otn-play__button {
  background-color: var(--otn-accent-hover);
  transform: scale(var(--otn-play-hover-scale));
}

.otn-play:active .otn-play__button {
  background-color: var(--otn-accent-active);
}

/* Note line under every player (captions) */
.otn-player__note {
  max-width: none;
  margin: var(--otn-space-3) 0 0;
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
}

/* Transcript (<details>), Home: summary styled like the job card's "Read
   the full job description": Sherman Sans Bold 17px, at least 44px tall,
   an orange chevron that turns when open, underline on hover. */
.otn-transcript {
  margin-top: var(--otn-space-4);
}

.otn-transcript > summary {
  display: flex;
  align-items: center;
  gap: var(--otn-space-3);
  width: fit-content;
  max-width: 100%;
  min-height: var(--otn-tap-min);
  color: var(--otn-text);
  font-size: 1.0625rem;
  font-weight: var(--otn-fw-bold);
  line-height: 1.3;
  list-style: none;
}

.otn-transcript > summary::-webkit-details-marker {
  display: none;
}

.otn-transcript > summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border-right: 2px solid var(--otn-accent);
  border-bottom: 2px solid var(--otn-accent);
  transform: rotate(45deg);
  transition: transform var(--otn-dur-base) var(--otn-ease);
}

.otn-transcript[open] > summary::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.otn-transcript > summary:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

@media (min-width: 600px) {
  .otn-container .otn-player__frame {
    margin-inline: 0;
    border-radius: var(--otn-radius-m);
  }

  .otn-player__bug {
    width: var(--otn-bug-w);
  }

  .otn-play__button {
    width: var(--otn-play);
    height: var(--otn-play);
  }
}

@media (forced-colors: active) {
  .otn-player__strap,
  .otn-play__label {
    border: 1px solid CanvasText;
  }

  .otn-play__button::before {
    background-color: ButtonText;
  }
}


/* ==========================================================================
   6.14 Billboard (Home, version A: patterns/home-billboard.php)
   Below 900px: panel first, then the media full width, no box.
   From 900px: 12-column grid in the content column (1280px with its
   gutters), the panel (4 columns) beside the media (8 columns), never over
   it (the owner, 2026-10-20).
   ========================================================================== */

.otn-billboard {
  background-color: var(--otn-bg);
}

/* The max width only matters from 900px, where the inner gets the gutter
   padding (phones are narrower than it anyway) */
.otn-billboard__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--otn-w-wide);
  margin-inline: auto;
}

.otn-billboard__panel {
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
  padding: var(--otn-space-6) var(--otn-gutter) var(--otn-space-5);
}

.otn-billboard__media {
  grid-row: 2;
  grid-column: 1;
  min-width: 0;
}

/* Full width below 900px, so square corners */
.otn-billboard__media .otn-player__frame {
  border-radius: 0;
}

/* The H1 (the site's name) is styled as a kicker */
:root .otn-billboard__kicker {
  margin-bottom: var(--otn-space-2);
}

.otn-billboard__headline,
:root p.otn-billboard__headline {
  max-width: 12ch;
  margin: 0;
  color: var(--otn-text);
  font-family: var(--otn-font-display);
  font-size: var(--otn-fs-display-xl);
  font-weight: var(--otn-fw-display);
  line-height: var(--otn-lh-display);
  letter-spacing: var(--otn-ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.otn-billboard__dek,
:root p.otn-billboard__dek {
  max-width: 60ch;
  margin: var(--otn-space-4) 0 0;
  color: var(--otn-text);
  font-family: var(--otn-font-serif);
  font-size: var(--otn-fs-lead);
  font-weight: var(--otn-fw-book);
  line-height: var(--otn-lh-lead);
}

.otn-billboard__panel .otn-actions {
  margin-top: var(--otn-space-5);
}

@media (min-width: 900px) {
  .otn-billboard__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--otn-grid-gap);
    align-items: center;
    padding: 2.5rem var(--otn-gutter);
  }

  .otn-billboard__media {
    grid-row: 1;
    grid-column: 5 / -1;
  }

  /* The panel box: navy with a heavy shadow on dark pages; on light pages
     white with a 1px Light Gray edge on its other three sides and no
     shadow (--otn-shadow-panel is none, --otn-edge-w 1px) */
  .otn-billboard__panel {
    z-index: 1;
    grid-row: 1;
    grid-column: 1 / 5;
    max-width: 36rem;
    padding: var(--otn-space-6);
    background-color: var(--otn-bg);
    border: var(--otn-edge-w) solid var(--otn-edge);
    border-left: var(--otn-bar-panel) solid var(--otn-bar);
    box-shadow: var(--otn-shadow-panel);
  }

  .otn-billboard__media .otn-player__frame {
    border-radius: var(--otn-radius-m);
  }
}

@media (min-width: 1200px) {
  .otn-billboard__panel {
    padding: 2.5rem;
  }
}

/* The panel is only a box from 900px */
@media (forced-colors: active) and (min-width: 900px) {
  .otn-billboard__panel {
    border-top: 1px solid CanvasText;
    border-right: 1px solid CanvasText;
    border-bottom: 1px solid CanvasText;
  }
}


/* ==========================================================================
   6.15 Where-to-watch strip ("Where to watch and listen": the
   otn/where-to-watch-section pattern; tiles from otn-where-to-watch)
   The band is .otn-section--raised .otn-on-raised .otn-wtw. Light pages:
   the band is white (--otn-raised), the tiles white with a 2px Light Gray
   edge (--otn-edge, transparent in dark mode), links Dark Orange.
   ========================================================================== */

/* One column on phones, 3 from 600px, 4 from 1200px; the last tile fills
   what is left of its row (below), so every row ends flush whatever the
   number of tiles OTN adds or hides */
.otn-wtw__list,
:root ul.otn-wtw__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--otn-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Navy tile on the #203299 band.
   Phones: a compact row: the icon (or "24.2") in a 44px column on the
   left, the name over the detail beside it. From 600px: a tile with its
   parts stacked. */
.otn-wtw__tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(2.75rem, max-content) minmax(min-content, 1fr);
  align-items: center;
  gap: var(--otn-space-1) var(--otn-space-3);
  min-width: 0;
  padding: var(--otn-space-3) var(--otn-space-4);
  background-color: var(--otn-bg);
  color: var(--otn-text);
  border: 2px solid var(--otn-edge);
  border-radius: var(--otn-radius-m);
  transition: border-color var(--otn-dur-fast) var(--otn-ease);
}

/* Generic icons only (play, TV, phone, microphone): 28px orange */
.otn-wtw__icon {
  flex-shrink: 0;
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 28px;
  height: 28px;
  color: var(--otn-accent);
  fill: currentColor;
}

/* Spectrum: "24.2" in numeral style instead of an icon */
.otn-wtw__numeral,
:root p.otn-wtw__numeral {
  grid-row: 1 / span 2;
  grid-column: 1;
  max-width: none;
  margin: 0;
  color: var(--otn-numeral);
  font-family: var(--otn-font-display);
  font-size: var(--otn-fs-numeral);
  font-weight: var(--otn-fw-display);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Phones: the name sits on the detail (end / start), so the two stay
   together when the icon beside them is the taller */
.otn-wtw__name,
:root .otn-wtw__tile .otn-wtw__name {
  grid-row: 1;
  grid-column: 2;
  align-self: end;
  margin: 0;
  color: var(--otn-text);
  font-family: var(--otn-font-sans);
  font-size: 1.125rem;
  font-weight: var(--otn-fw-bold);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

.otn-wtw__detail,
:root p.otn-wtw__detail {
  grid-row: 2;
  grid-column: 2;
  align-self: start;
  max-width: none;
  margin: 0;
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
}

/* A tile with one link (Roku, Apple TV, Fire TV, YouTube): the H3's text
   is the link, stretched over the whole tile; the tile gets an orange
   border on hover and the focus ring. The link's colour is the band's
   (white on dark pages, Dark Orange on light), underlined. */
.otn-wtw__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.otn-wtw__tile:has(.otn-wtw__name a:hover) {
  border-color: var(--otn-accent);
}

.otn-wtw__tile:has(.otn-wtw__name a:focus-visible) {
  outline: var(--otn-focus-width) solid var(--otn-focus);
  outline-offset: var(--otn-focus-offset);
}

@supports selector(:has(*)) {
  .otn-wtw__name a:focus-visible {
    outline: none;
  }
}

/* A tile with several links (the phone app's stores; the podcast's apps):
   small text links side by side under the detail (on phones in the text
   column, row 3), 44px tall on phones and 32px from 600px */
.otn-wtw__links,
:root ul.otn-wtw__links {
  grid-row: 3;
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--otn-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.otn-wtw__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--otn-tap-min);
  font-size: var(--otn-fs-small);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
}

/* The podcast tile's small "Podcast feed (RSS)" link: in Book, not Bold,
   so it reads as the lesser link; on phones under the app links (row 4) */
.otn-wtw__feed,
:root p.otn-wtw__feed {
  grid-row: 4;
  grid-column: 2;
  max-width: none;
  margin: 0;
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-label);
}

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

@media (min-width: 600px) {
  .otn-wtw__list,
  :root ul.otn-wtw__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .otn-wtw__feed a {
    min-height: 2rem;
  }

  /* 3 columns (600-1199px): the last tile takes what is left of its row,
     so no row ends with an empty cell (the lead tile is the first child
     and has a row of its own, so the n-th ordinary tile is child n + 1) */
  .otn-wtw__list > .otn-wtw__tile:not(.otn-wtw__tile--lead):last-child:nth-child(3n + 2) {
    grid-column: span 3;
  }

  .otn-wtw__list > .otn-wtw__tile:not(.otn-wtw__tile--lead):last-child:nth-child(3n) {
    grid-column: span 2;
  }

  /* At the foot of the tile */
  .otn-wtw__links {
    margin-top: auto;
  }

  .otn-wtw__links a {
    min-height: 2rem;
  }

  /* The tile: parts stacked, 8px apart, at least 128px tall */
  .otn-wtw__tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--otn-space-2);
    min-height: 8rem;
    padding: var(--otn-space-4) 20px;
  }

  .otn-wtw__name,
  :root .otn-wtw__tile .otn-wtw__name,
  .otn-wtw__detail {
    align-self: auto;
  }

  /* Spectrum shares a row with other tiles: every icon takes the "24.2"
     numeral's height, so the tiles' names line up */
  .otn-wtw__icon {
    margin-bottom: calc(var(--otn-fs-numeral) - 28px);
  }
}

@media (min-width: 900px) {
  .otn-wtw__list,
  :root ul.otn-wtw__list {
    gap: var(--otn-space-4);
  }
}

@media (min-width: 1200px) {
  .otn-wtw__list,
  :root ul.otn-wtw__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 4 columns: the 3-column spans are reset, then the last tile takes
     what is left of its row */
  .otn-wtw__list > .otn-wtw__tile:not(.otn-wtw__tile--lead):last-child:nth-child(3n + 2),
  .otn-wtw__list > .otn-wtw__tile:not(.otn-wtw__tile--lead):last-child:nth-child(3n) {
    grid-column: auto;
  }

  .otn-wtw__list > .otn-wtw__tile:not(.otn-wtw__tile--lead):last-child:nth-child(4n + 2) {
    grid-column: span 4;
  }

  .otn-wtw__list > .otn-wtw__tile:not(.otn-wtw__tile--lead):last-child:nth-child(4n + 3) {
    grid-column: span 3;
  }

  .otn-wtw__list > .otn-wtw__tile:not(.otn-wtw__tile--lead):last-child:nth-child(4n) {
    grid-column: span 2;
  }
}

@media (forced-colors: active) {
  .otn-wtw__tile {
    border: 1px solid CanvasText;
  }

  .otn-wtw__tile:has(.otn-wtw__name a:focus-visible) {
    outline-color: Highlight;
  }
}


/* ==========================================================================
   6.16 Staff card (person: otn-people's Staff teams block)
   ========================================================================== */

/* 2 columns on phones, 3 from 600px, 4 from 900px, 6 from 1200px */
.otn-people,
:root ul.otn-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--otn-space-6) var(--otn-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.otn-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

/* Circle photo: 120 -> 160px, face kept in frame, decorative #203299 ring
   (--otn-rule: Light Gray on light pages) */
.otn-person__photo {
  flex-shrink: 0;
  width: var(--otn-avatar);
  height: var(--otn-avatar);
  object-fit: cover;
  object-position: 50% 25%;
  background-color: var(--otn-screen);
  border-radius: var(--otn-radius-round);
  box-shadow: 0 0 0 4px var(--otn-rule);
}

/* No photo: orange circle with navy Block Condensed initials (aria-hidden),
   the same decorative ring as a photo so both circles match */
.otn-person__initials {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--otn-avatar);
  height: var(--otn-avatar);
  background-color: var(--otn-accent);
  color: var(--otn-text-on-accent);
  border-radius: var(--otn-radius-round);
  box-shadow: 0 0 0 4px var(--otn-rule);
  font-family: var(--otn-font-display);
  font-size: var(--otn-fs-initials);
  font-weight: var(--otn-fw-display);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Name: H3, Sherman Sans Bold 17px (18px from 900px), 12px below */
.otn-person__name,
:root .otn-person .otn-person__name {
  max-width: 100%;
  margin: var(--otn-space-3) 0 0;
  color: var(--otn-text);
  font-family: var(--otn-font-sans);
  font-size: 1.0625rem;
  font-weight: var(--otn-fw-bold);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

.otn-person__role,
.otn-person__show,
:root .otn-person :is(.otn-person__role, .otn-person__show) {
  max-width: 100%;
  margin: var(--otn-space-1) 0 0;
  font-size: var(--otn-fs-small);
  line-height: 1.3;
}

/* Showrunner's show: Bold; plain text, or a link (the link colour,
   underlined) to the show's page on OTN's streaming site */
.otn-person__show {
  font-weight: var(--otn-fw-bold);
}

/* One show link on the line: a 44px-tall hit area from an invisible
   ::after reaching 12px above and below its line, so the card's rows don't
   move and the focus ring still hugs the words */
.otn-person__show a {
  position: relative;
  display: inline-block;
}

.otn-person__show a::after {
  content: "";
  position: absolute;
  inset: calc((1.3em - var(--otn-tap-min)) / 2) 0;
}

/* Two or more show links on one line ("Think Tank & Review Crew"): these
   links are 44px tall themselves and have no ::after, so each wrapped line
   is 44px tall and the hit areas can't overlap. */
.otn-person__show a:not(:only-of-type) {
  display: inline-flex;
  align-items: center;
  min-height: var(--otn-tap-min);
}

.otn-person__show a:not(:only-of-type)::after {
  content: none;
}

@media (min-width: 600px) {
  .otn-people,
  :root ul.otn-people {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .otn-people,
  :root ul.otn-people {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--otn-space-5);
  }

  .otn-person__name,
  :root .otn-person .otn-person__name {
    font-size: 1.125rem;
  }
}

@media (min-width: 1200px) {
  .otn-people,
  :root ul.otn-people {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (forced-colors: active) {
  .otn-person__initials {
    border: 1px solid CanvasText;
  }
}


/* ==========================================================================
   6.17 Name super and testimonial (otn-alumni's quotes; the quote block's
   "Testimonial" style is drawn the same way in blocks.css)
   ========================================================================== */

.otn-quote {
  margin: 0;
}

/* Sherman Serif quote size, roman, 6px orange left border; OTN's own
   quotation marks only (no decorative marks) */
.otn-quote__text {
  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;
  font-weight: var(--otn-fw-book);
  line-height: var(--otn-lh-quote);
}

.otn-quote__text p,
:root .otn-quote__text p {
  max-width: none;
}

/* Name super: two-bar on-screen caption, 20px below the quote. Lines are
   balanced, so a wrapped role never leaves one word alone */
.otn-super {
  display: block;
  margin-top: 20px;
  text-wrap: balance;
}

/* Name bar: its own line, only as wide as the name. #203299 with white
   text on dark pages, navy with white text on light (--otn-fill) */
.otn-super__name {
  display: block;
  width: fit-content;
  max-width: 100%;
  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;
}

/* Role: as written (not uppercase), directly under the name's left edge.
   Inline with cloned padding, so when it wraps the orange hugs each line;
   line-height 1.6 keeps the two lines' fills apart */
.otn-super__role {
  display: inline;
  padding: var(--otn-space-1) var(--otn-space-3);
  background-color: var(--otn-accent);
  color: var(--otn-text-on-accent);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-label);
  font-style: normal;
  font-weight: var(--otn-fw-bold);
  line-height: 1.6;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (forced-colors: active) {
  .otn-super__name,
  .otn-super__role {
    border: 1px solid CanvasText;
  }
}


/* ==========================================================================
   6.18 FAQ accordion (native <details>/<summary>: the mockups' .otn-faq,
   and otn-faq's core/details blocks with the faq style, is-style-faq)
   ========================================================================== */

.otn-faq {
  max-width: 47.5rem;
  border-top: var(--otn-border-hair);
}

.otn-faq__item,
.wp-block-details.is-style-faq {
  max-width: 47.5rem;
  margin: 0;
  border-bottom: var(--otn-border-hair);
}

/* A run of FAQ blocks: the rule above the first one */
:not(.wp-block-details.is-style-faq) + .wp-block-details.is-style-faq,
.wp-block-details.is-style-faq:first-child {
  border-top: var(--otn-border-hair);
}

.otn-faq .wp-block-details.is-style-faq {
  border-top: 0;
}

.otn-faq__q,
.wp-block-details.is-style-faq > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 4rem;
  padding: var(--otn-space-4) 56px var(--otn-space-4) var(--otn-space-3);
  color: var(--otn-text);
  font-family: var(--otn-font-sans);
  font-size: 1.125rem;
  font-weight: var(--otn-fw-bold);
  line-height: 1.3;
  list-style: none;
  transition: background-color var(--otn-dur-fast) var(--otn-ease);
}

.otn-faq__q::-webkit-details-marker,
.wp-block-details.is-style-faq > summary::-webkit-details-marker {
  display: none;
}

/* 24px orange plus at the right, 12px in; the vertical bar turns flat
   (a minus) when open */
.otn-faq__q::before,
.otn-faq__q::after,
.wp-block-details.is-style-faq > summary::before,
.wp-block-details.is-style-faq > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--otn-space-3);
  width: 24px;
  height: 3px;
  margin-top: -1.5px;
  background-color: var(--otn-accent);
}

.otn-faq__q::after,
.wp-block-details.is-style-faq > summary::after {
  transform: rotate(90deg);
  transition: transform var(--otn-dur-base) var(--otn-ease);
}

.otn-faq__item[open] > .otn-faq__q::after,
.wp-block-details.is-style-faq[open] > summary::after {
  transform: rotate(0deg);
}

.otn-faq__q:focus-visible,
.wp-block-details.is-style-faq > summary:focus-visible {
  outline-offset: calc(-1 * var(--otn-focus-offset));
}

/* Hover fill on fine pointers only, so it doesn't stick after a tap:
   #203299 on dark pages, navy on light, white text on both (the orange
   plus stays: 5.86:1 on navy). The focus ring is drawn inside the row,
   so while the row is hovered it takes the fill's text colour (white). */
@media (hover: hover) and (pointer: fine) {
  .otn-faq__q:hover,
  .wp-block-details.is-style-faq > summary:hover {
    background-color: var(--otn-fill);
    color: var(--otn-on-fill);
  }

  .otn-faq__q:hover:focus-visible,
  .wp-block-details.is-style-faq > summary:hover:focus-visible {
    outline-color: var(--otn-on-fill);
  }
}

/* Answer: body text, the reading measure (34em) */
.otn-faq__a,
.wp-block-details.is-style-faq > :not(summary) {
  max-width: var(--otn-measure);
  padding: 0 var(--otn-space-3);
}

.otn-faq__a,
.wp-block-details.is-style-faq > :not(summary):last-child {
  padding-bottom: var(--otn-space-5);
}

@media (min-width: 900px) {
  .otn-faq__q,
  .wp-block-details.is-style-faq > summary {
    font-size: 1.25rem;
  }
}

@media (forced-colors: active) {
  .otn-faq__q::before,
  .otn-faq__q::after,
  .wp-block-details.is-style-faq > summary::before,
  .wp-block-details.is-style-faq > summary::after {
    background-color: CanvasText;
  }

  .otn-faq__q:hover:focus-visible,
  .wp-block-details.is-style-faq > summary:hover:focus-visible {
    outline-color: Highlight;
  }
}


/* ==========================================================================
   6.19 Job card (otn-jobs' otn/open-positions)
   ========================================================================== */

/* 44rem: fits the 34em reading measure plus the card's padding */
.otn-job {
  max-width: 44rem;
  padding: 20px;
  background-color: var(--otn-bg);
  color: var(--otn-text);
  border: var(--otn-border-hair);
  border-top: 6px solid var(--otn-bar);
  border-radius: var(--otn-radius-m);
}

.otn-job + .otn-job {
  margin-top: var(--otn-space-6);
}

/* Strap: the orange fact chip (.otn-lt__strap, 6.9) */
.otn-job__strap,
:root .otn-job .otn-job__strap {
  margin: 0;
}

.otn-job__title,
:root .otn-job .otn-job__title {
  margin: var(--otn-space-3) 0 0;
  color: var(--otn-text);
  font-family: var(--otn-font-display);
  font-size: var(--otn-fs-display-s);
  font-weight: var(--otn-fw-display);
  line-height: var(--otn-lh-heading);
  letter-spacing: var(--otn-ls-heading);
  text-transform: uppercase;
  text-wrap: balance;
}

.otn-job__summary {
  margin-top: var(--otn-space-4);
}

.otn-job__more {
  margin-top: var(--otn-space-4);
}

/* Summary: Bold 17px, 44px tall, orange chevron that turns when open */
.otn-job__more > summary {
  display: flex;
  align-items: center;
  gap: var(--otn-space-3);
  width: fit-content;
  max-width: 100%;
  min-height: var(--otn-tap-min);
  color: var(--otn-text);
  font-size: 1.0625rem;
  font-weight: var(--otn-fw-bold);
  line-height: 1.3;
  list-style: none;
}

.otn-job__more > summary::-webkit-details-marker {
  display: none;
}

.otn-job__more > summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border-right: 2px solid var(--otn-accent);
  border-bottom: 2px solid var(--otn-accent);
  transform: rotate(45deg);
  transition: transform var(--otn-dur-base) var(--otn-ease);
}

.otn-job__more[open] > summary::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.otn-job__more > summary:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* H4s 24px above each list */
.otn-job__more h4,
:root .otn-job__more h4 {
  margin: var(--otn-space-5) 0 0;
  color: var(--otn-text);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-h4);
  font-weight: var(--otn-fw-bold);
  line-height: 1.3;
}

/* Apply button: full width on phones, 24px above */
.otn-job > .otn-btn {
  width: 100%;
  margin-top: var(--otn-space-5);
}

/* Bullets: 8px orange squares, items 8px apart, body size */
.otn-list,
:root ul.otn-list {
  margin: var(--otn-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.otn-list > li {
  position: relative;
  padding-left: 20px;
}

.otn-list > li + li {
  margin-top: var(--otn-space-2);
}

.otn-list > li::before {
  content: "";
  position: absolute;
  top: calc(0.8em - 4px); /* half of the 1.6 line-height */
  top: calc(0.5lh - 4px);
  left: 0;
  width: 8px;
  height: 8px;
  background-color: var(--otn-accent);
}

@media (min-width: 600px) {
  .otn-job {
    padding: var(--otn-space-6);
  }

  .otn-job > .otn-btn {
    width: auto;
  }
}

@media (forced-colors: active) {
  .otn-list > li::before {
    background-color: CanvasText;
  }
}


/* ==========================================================================
   6.20 Photo gallery (the mockups' .otn-gallery; WordPress's gallery block
   with that class is drawn the same way in blocks.css)
   ========================================================================== */

/* 1 column on phones, 2 from 600px, 3 from 900px */
.otn-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--otn-space-2);
}

/* Photos keep their own shape, centred on a black mat */
.otn-gallery__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  background-color: var(--otn-screen);
  border-radius: var(--otn-radius-m);
}

.otn-gallery__item img {
  width: 100%;
  height: auto;
}

/* Photo credit (15px, the <em> keeps today's italics) */
.otn-credit {
  margin: var(--otn-space-3) 0 0;
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
}

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

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


/* ==========================================================================
   6.21 Form fields (otn-contact-form)
   ========================================================================== */

/* Error summary: #203299, white text, white underlined links; takes focus.
   Light pages: white with a 4px Medium Orange border, navy text and Dark
   Orange links (--otn-alert-w is 0 in dark mode) */
.otn-form__summary {
  margin-bottom: var(--otn-space-5);
  padding: var(--otn-space-4) 20px;
  background-color: var(--otn-raised);
  color: var(--otn-text);
  border: var(--otn-alert-w) solid var(--otn-error);
}

.otn-form__summary-title,
:root .otn-form__summary .otn-form__summary-title {
  margin: 0 0 var(--otn-space-2);
  color: var(--otn-text);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-h3);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-h3);
  letter-spacing: 0;
  text-transform: none;
}

.otn-form__summary li + li {
  margin-top: var(--otn-space-1);
}

/* 24px between fields */
.otn-field + .otn-field {
  margin-top: var(--otn-space-5);
}

/* Label above: 16px Bold, "(required)" written out */
.otn-field__label {
  display: block;
  margin-bottom: var(--otn-space-2);
  color: var(--otn-text);
  font-size: 1rem;
  font-weight: var(--otn-fw-bold);
  line-height: 1.3;
}

/* Optional hint (15px) between label and field */
.otn-field__hint,
:root p.otn-field__hint {
  margin: calc(-1 * var(--otn-space-1)) 0 var(--otn-space-2);
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
}

/* Field: navy fill, white 18px text, 2px Light Gray border (light pages:
   white fill, navy text, 2px Medium Gray border, 4.53:1; navy on hover
   and focus) */
.otn-field__input {
  display: block;
  width: 100%;
  max-width: 40rem;
  min-height: var(--otn-btn-h);
  margin: 0;
  padding: var(--otn-space-3) 14px;
  background-color: var(--otn-bg);
  color: var(--otn-text);
  border: var(--otn-border-field);
  border-radius: var(--otn-radius-s);
  font-family: var(--otn-font-sans);
  font-size: 1.125rem;
  font-weight: var(--otn-fw-book);
  line-height: 1.4;
  transition: border-color var(--otn-dur-fast) var(--otn-ease);
}

.otn-field__input--area {
  min-height: 10rem;
  resize: vertical;
}

.otn-field__input:hover,
.otn-field__input:focus {
  border-color: var(--otn-text);
}

.otn-field__input:focus-visible {
  outline-offset: 2px;
}

/* Error: Medium Orange border (kept in every state; the ring shows focus) */
.otn-field__input[aria-invalid="true"],
.otn-field__input[aria-invalid="true"]:hover,
.otn-field__input[aria-invalid="true"]:focus {
  border-color: var(--otn-error);
}

/* Autofill kept in the page colours */
.otn-field__input:-webkit-autofill,
.otn-field__input:-webkit-autofill:hover,
.otn-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--otn-text);
  box-shadow: 0 0 0 100px var(--otn-bg) inset;
  caret-color: var(--otn-text);
}

/* Error message: 8px below, 15px Bold Medium Orange, starts "Error:".
   Light pages: navy text with a 4px Medium Orange bar on its left */
.otn-field__error,
:root p.otn-field__error {
  margin: var(--otn-space-2) 0 0;
  padding-left: calc(2 * var(--otn-alert-w));
  color: var(--otn-error-text);
  border-left: var(--otn-alert-w) solid var(--otn-error);
  font-size: var(--otn-fs-small);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-small);
}

.otn-form > .otn-btn {
  margin-top: var(--otn-space-6);
}

/* Status box: shown only when it has text. Light pages: white with a 1px
   Light Gray edge */
.otn-form__status:not(:empty) {
  margin-top: var(--otn-space-5);
  padding: var(--otn-space-4);
  background-color: var(--otn-raised);
  color: var(--otn-text);
  border: var(--otn-edge-w) solid var(--otn-edge);
}

@media (forced-colors: active) {
  .otn-form__summary,
  .otn-form__status:not(:empty) {
    border: 1px solid CanvasText;
  }
}


/* ==========================================================================
   6.22 Cards, callout and bands (also the group styles Card, Callout and
   Band: is-style-card, is-style-callout, is-style-band)
   ========================================================================== */

/* Card: #203299, 6px orange top border; white text and links. Light
   pages: white with a 1px Light Gray edge on the other three sides, navy
   text, Dark Orange links (--otn-edge-w is 0 in dark mode) */
.otn-card,
:root .is-style-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: var(--otn-space-5);
  background-color: var(--otn-raised);
  color: var(--otn-text);
  border: var(--otn-edge-w) solid var(--otn-edge);
  border-top: 6px solid var(--otn-bar);
  border-radius: var(--otn-radius-m);
}

:is(.otn-card, .is-style-card) > :where(h2, h3),
:root :is(.otn-card, .is-style-card) > :where(h2, h3) {
  margin-bottom: var(--otn-space-3);
  color: var(--otn-text);
}

:is(.otn-card, .is-style-card) > :is(.otn-btn, .otn-actions, .wp-block-buttons) {
  margin-top: var(--otn-space-5);
}

:is(.otn-card, .is-style-card) > :is(.otn-actions, .wp-block-buttons) {
  align-self: stretch;
}

/* Callout (the GM visit note on About): #203299, 6px orange left border,
   Serif quote. Light pages: white with a 1px Light Gray edge */
.otn-callout,
:root .is-style-callout {
  padding: var(--otn-space-5) var(--otn-space-6);
  background-color: var(--otn-raised);
  color: var(--otn-text);
  border: var(--otn-edge-w) solid var(--otn-edge);
  border-left: 6px solid var(--otn-bar);
  font-family: var(--otn-font-serif);
  font-size: var(--otn-fs-quote);
  line-height: var(--otn-lh-quote);
}

:is(.otn-callout, .is-style-callout) > :is(.otn-btn, .otn-actions, .wp-block-buttons) {
  margin-top: var(--otn-space-5);
}

/* Buttons in a callout keep the button type, not the callout's Serif */
:is(.otn-callout, .is-style-callout) :is(.otn-btn, .wp-block-button__link) {
  font-family: var(--otn-font-sans);
}

/* White text and underlined white links on both #203299 surfaces */
:is(.otn-card, .otn-callout, .is-style-card, .is-style-callout) a:not(.otn-btn, .wp-element-button) {
  color: var(--otn-link-on-raised);
}

/* Band: navy section with a 1px #203299 rule above; never orange-filled */
.otn-band,
:root .is-style-band {
  background-color: var(--otn-bg);
  border-top: var(--otn-border-hair);
}

:is(.otn-band, .is-style-band) :is(.otn-actions, .wp-block-buttons) {
  margin-top: var(--otn-space-5);
}

@media (min-width: 600px) {
  .otn-card,
  :root .is-style-card {
    padding: var(--otn-space-6);
  }
}

@media (forced-colors: active) {
  .otn-card,
  .otn-callout,
  :root .is-style-card,
  :root .is-style-callout {
    border-right: 1px solid CanvasText;
    border-bottom: 1px solid CanvasText;
  }

  .otn-card,
  :root .is-style-card {
    border-left: 1px solid CanvasText;
  }

  .otn-callout,
  :root .is-style-callout {
    border-top: 1px solid CanvasText;
  }
}


/* ==========================================================================
   6.23 End credits (Alumni; the list style "End credits": is-style-credits).
   Static: never a rolling animation. The theme splits each "Name | Role"
   line into the two spans below (inc/markup.php).
   ========================================================================== */

/* CSS columns: 1 on phones, 2 from 900px, 3 from 1200px */
.otn-credits,
:root ul.is-style-credits {
  column-count: 1;
  column-gap: var(--otn-space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 14px apart (padding, so the space stays with its entry across columns) */
:is(.otn-credits, .is-style-credits) > li {
  margin: 0;
  padding-bottom: 14px;
  break-inside: avoid;
}

.otn-credits__name {
  display: block;
  color: var(--otn-text);
  font-size: 1rem;
  font-weight: var(--otn-fw-bold);
  line-height: 1.3;
}

.otn-credits__role {
  display: block;
  color: var(--otn-text);
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
}

@media (min-width: 900px) {
  .otn-credits,
  :root ul.is-style-credits {
    column-count: 2;
  }
}

@media (min-width: 1200px) {
  .otn-credits,
  :root ul.is-style-credits {
    column-count: 3;
  }
}


/* ==========================================================================
   6.24 Alumni spotlight (otn-alumni)
   ========================================================================== */

/* Phones: photo first (max 20rem); from 900px a 2-column grid */
.otn-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--otn-space-5);
}

.otn-spotlight + .otn-spotlight {
  margin-top: var(--otn-space-7);
}

/* 4:5, cover, black mat */
.otn-spotlight__photo {
  width: 100%;
  max-width: 20rem;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background-color: var(--otn-screen);
  border-radius: var(--otn-radius-m);
}

.otn-spotlight__body {
  min-width: 0;
}

.otn-spotlight__name,
:root .otn-spotlight .otn-spotlight__name {
  margin: 0 0 var(--otn-space-3);
  color: var(--otn-text);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-h3);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-h3);
}

@media (min-width: 900px) {
  .otn-spotlight {
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
    align-items: start;
    gap: var(--otn-space-6);
  }

  .otn-spotlight__photo {
    max-width: none;
  }
}


/* ==========================================================================
   6.25 Schedule ("Up next on OTN": otn-schedule's otn/schedule) and the
   news row ("From the network": patterns/news-row.php, off at launch)
   ========================================================================== */

/* Schedule: full width of the reading column; two columns, Time and
   Program. The time column is only as wide as its longest line, so the
   program column takes the rest and nothing scrolls sideways at 320px */
.otn-schedule__table {
  width: 100%;
  border-collapse: collapse;
}

/* "All times Eastern": 15px, left, 8px above the table. The table's name
   is the H2 (aria-labelledby), so the caption is its description */
.otn-schedule__caption {
  caption-side: top;
  padding-bottom: var(--otn-space-2);
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
  text-align: left;
}

/* Header row: #203299 with white text on dark pages, navy with white
   text on light (--otn-fill) */
.otn-schedule__table th {
  padding: var(--otn-space-3);
  background-color: var(--otn-fill);
  color: var(--otn-on-fill);
  font-size: var(--otn-fs-small);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  letter-spacing: var(--otn-ls-label);
  text-align: left;
  text-transform: uppercase;
}

/* Body cells: navy, 1px #203299 grid lines; height on a cell acts as a
   minimum, so text is never clipped */
.otn-schedule__table td {
  height: 3.5rem;
  padding: var(--otn-space-3);
  background-color: var(--otn-bg);
  border: var(--otn-border-hair);
  vertical-align: middle;
  overflow-wrap: anywhere;
}

/* Time column: as narrow as "12:00 AM", each line kept whole. The
   full-width rows have colspan and wrap as usual */
.otn-schedule__table :is(th, td):first-child:not([colspan]) {
  width: 1%;
  white-space: nowrap;
}

.otn-schedule__time {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.otn-schedule__table .otn-schedule__time {
  display: block;
  font-weight: var(--otn-fw-bold);
}

/* The length ("17 min") under the time */
.otn-schedule__length {
  display: block;
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
}

/* Program cell: the show in Bold (a LIVE badge before it for live
   programmes), the episode title under it in Book 15px */
.otn-schedule__title,
.otn-schedule__episode {
  display: block;
}

.otn-schedule__show {
  font-weight: var(--otn-fw-bold);
}

.otn-schedule__episode {
  margin-top: 2px;
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
}

/* "On now": words, not colour alone, above the show, in the kicker style,
   with the row's orange frame (tr.is-now, below) */
.otn-schedule__now {
  display: block;
  margin-bottom: var(--otn-space-1);
  color: var(--otn-kicker);
  font-size: var(--otn-fs-label);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-label);
  letter-spacing: var(--otn-ls-label);
  text-transform: uppercase;
}

/* Listings stay calm: the LIVE badge's dot doesn't pulse in the table */
.otn-schedule__table .otn-live-badge__dot {
  animation: none;
}

/* "Full schedule on OTN’s streaming site", under the table */
.otn-schedule__more,
:root p.otn-schedule__more {
  margin: var(--otn-space-2) 0 0;
}

@media (min-width: 600px) {
  .otn-schedule__table :is(th, td) {
    padding-inline: var(--otn-space-4);
  }
}

/* "Now" row: 3px inset orange frame round the whole row */
.otn-schedule__table tr.is-now > td {
  box-shadow:
    inset 0 3px 0 var(--otn-bar),
    inset 0 -3px 0 var(--otn-bar);
}

.otn-schedule__table tr.is-now > td:first-child {
  box-shadow:
    inset 3px 0 0 var(--otn-bar),
    inset 0 3px 0 var(--otn-bar),
    inset 0 -3px 0 var(--otn-bar);
}

.otn-schedule__table tr.is-now > td:last-child {
  box-shadow:
    inset -3px 0 0 var(--otn-bar),
    inset 0 3px 0 var(--otn-bar),
    inset 0 -3px 0 var(--otn-bar);
}

.otn-schedule__table tr.is-now > td:only-child {
  box-shadow: inset 0 0 0 3px var(--otn-bar);
}

/* News ("From the network"): a 3-card grid, 1 column on phones, 3 from
   900px; each card a 16:9 picture on a black mat, the date as a kicker,
   the title (H3) and the summary */
.otn-news__list,
:root ul.otn-news__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--otn-section-y) var(--otn-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.otn-news__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--otn-space-2);
  min-width: 0;
}

.otn-news__card > .wp-block-post-featured-image {
  width: 100%;
  margin: 0 0 var(--otn-space-2);
}

@media (min-width: 900px) {
  .otn-news__list,
  :root ul.otn-news__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (forced-colors: active) {
  .otn-schedule__table th {
    border: 1px solid CanvasText;
  }

  .otn-schedule__table tr.is-now > td {
    border: 3px solid Highlight;
  }
}