/* GENERATED by tools/build_wp_styles.py — do not edit here.
   Sources: home-v2.css (:root), library.html, seminar.html, player.css. */
@import url("fonts/fonts.css");

.scfc-lib {
--navy:      #13135f;
  --navy-700:  #20208a;
  --ink:       #1c2230;
  --text:      #3a4150;
  --muted:     #6b7280;
  --bg:        #ffffff;
  --bg-soft:   #f5f6fa;
  --line:      #e6e8ef;
  --display: "Montserrat", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --body: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --wrap: 1180px;

  /* The theme sets its own family on body and on every heading, and wins on
     specificity. newsite gets these from base_v2's body rule, which is not
     part of any block lifted above — so they are restated here, scoped, or the
     preview renders in Kallyas's Lato and looks like a different product. */
  font-family: var(--body);
  color: var(--ink);
  /* The anchor every em below resolves against. Explicitly px, not rem: the
     point is to be independent of whatever the theme does to the root. */
  font-size: 16px;

  /* Brand navy for this preview, set by the owner on 2026-09-05. newsite's
     own --navy is #13135f; this is deliberately two shades off it, so do not
     "fix" one to match the other without asking which is correct. */
  --navy: #15135F;
}
/* Weight as well as family. The theme sets h1/h2 to 400 and wins, so the card
   titles came out regular where newsite renders them bold — a heading that is
   not heavier than its own byline stops reading as a heading. */
.scfc-lib h1, .scfc-lib h2, .scfc-lib h3,
.scfc-lib .lib__title, .scfc-lib .sem__title {
  font-family: var(--display);
  font-weight: 700;
}
/* Explicitly NOT bold: a byline is a name and a date is data, and inheriting
   the heading weight would make every card look like three headings. */
.scfc-lib .lib__by, .scfc-lib .lib__date,
.scfc-lib .lib__sub, .scfc-lib .sem__meta { font-weight: 400; }

/* The theme puts a width on `button`, so the Search button's auto flex-basis
   became the full row and the input shrank to 178px beside a 954px button.
   newsite needs no such rule — nothing there is fighting it — so this is a
   port-only correction, like the family and weight above. */
.scfc-lib .btn { width: auto; flex: 0 0 auto; }
.scfc-lib .lib__dur, .scfc-lib .sem__meta { font-family: var(--mono); }

/* ---- buttons ---- */
.scfc-lib .btn { display: inline-flex; align-items: center; gap: .5em; font-family: var(--display); font-weight: 600; font-size: .95em; padding: .8em 1.5em; border-radius: 4px; border: 2px solid var(--navy); transition: background .18s, color .18s, transform .18s; cursor: pointer; }
.scfc-lib .btn-primary { background: var(--navy); color: #fff; }
.scfc-lib .btn-primary:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; transform: translateY(-1px); }
.scfc-lib .btn-outline { background: transparent; color: var(--navy); }
.scfc-lib .btn-outline:hover { background: var(--navy); color: #fff; }
.scfc-lib .btn-light { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }
.scfc-lib .btn-light:hover { background: #fff; color: var(--navy); }
.scfc-lib .btnrow { display:flex;flex-wrap:wrap;gap:.7em }
/* ---- library ---- */

.scfc-lib .lib__head { display:flex; flex-wrap:wrap; gap:1.5em; align-items:flex-end;
               justify-content:space-between; margin-bottom:.5em; }
.scfc-lib .lib__head h1 { margin:0; }
.scfc-lib .lib__sub { color:var(--muted); margin:.35em 0 0; font-size:.95em; }
.scfc-lib .lib__search { display:flex; gap:.5em; margin:1.25em 0 1.75em; }
.scfc-lib .lib__search input[type=search] {
      flex:1 1 auto; min-width:0; padding:.6em .85em; border-radius:8px;
      border:1px solid var(--line); background:var(--paper); color:var(--ink);
      font:inherit; }
.scfc-lib .lib__count { color:var(--muted); font-size:.9em; margin:0 0 1em; }

  /* auto-fill, not auto-fit: an empty last track keeps the final row's cards
     the same width as every other row's, instead of stretching one lone result
     across the full grid. */
.scfc-lib .lib__grid { display:grid; gap:1.5em 1.25em; list-style:none; padding:0; margin:0;
               grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.scfc-lib .lib__card { display:flex; flex-direction:column; }
.scfc-lib .lib__card a.lib__link { text-decoration:none; color:inherit; display:block; }
.scfc-lib .lib__frame { position:relative; aspect-ratio:16/9; overflow:hidden;
                border-radius:10px; background:var(--ink); }
.scfc-lib .lib__frame img { width:100%; height:100%; object-fit:cover; display:block; }
.scfc-lib .lib__dur { position:absolute; right:.4em; bottom:.4em; padding:.1em .4em;
              border-radius:4px; background:rgba(0,0,0,.78); color:#fff;
              font-family:var(--mono); font-size:.78em; line-height:1.5; }
.scfc-lib .lib__missing { position:absolute; inset:0; display:grid; place-items:center;
                  color:var(--muted); font-size:.85em; text-align:center;
                  padding:1em; }
.scfc-lib .lib__title { margin:.6em 0 .2em; font-size:1em; line-height:1.35; }
  /* A presenter is a name, so it keeps the body face — and so does the date
     beside it. The mono face is kept for .lib__dur, a runtime, which is a
     machine value read at a glance against the others in its column. A release
     date is prose: "Sep 9, 2026" set in a typewriter face reads as a log line
     under a photograph, which is what it looked like. */
.scfc-lib .lib__by { color:var(--ink); font-size:.85em; line-height:1.3; margin-bottom:.15em; }
.scfc-lib .lib__date { color:var(--muted); font-size:.85em; }

.scfc-lib .lib__pager { display:flex; gap:.5em; align-items:center; justify-content:center;
                flex-wrap:wrap; margin:2.5em 0 1em; }
.scfc-lib .lib__pager .lib__where { color:var(--muted); font-size:.9em; padding:0 .5em; }
.scfc-lib .lib__empty { padding:3em 1em; text-align:center; color:var(--muted); }
.scfc-lib .lib__note { margin-top:2.5em; padding:1em 1.15em; border-radius:10px;
               border:1px solid var(--line); color:var(--muted); font-size:.9em; }
.scfc-lib .lib__note strong { color:var(--ink); }

/* ---- seminar ---- */

.scfc-lib .sem__back { display:inline-block; margin-bottom:1.25em; color:var(--muted);
               font-size:.9em; }
  /* The player's own styles live in player.css. What stays here is only the
     no-media fallback, which is this page's concern rather than the player's. */
.scfc-lib .sem__none { display:grid; place-items:center; aspect-ratio:16/9;
               background:var(--ink); border-radius:12px; color:var(--muted);
               text-align:center; padding:2em; }
.scfc-lib .sem__title { margin:1.5em 0 .35em; }
.scfc-lib .sem__meta { display:flex; flex-wrap:wrap; gap:.4em 1.25em; margin:0 0 1.5em;
               color:var(--muted); font-size:.9em; font-family:var(--mono); }
.scfc-lib .sem__by { margin:.15em 0 .6em; font-size:1em; }
.scfc-lib .sem__by a { color:var(--navy); }
.scfc-lib .sem__desc { max-width:70ch; line-height:1.65; white-space:pre-line; }
.scfc-lib .sem__desc a { word-break:break-word; }

/* ---- player ---- */
/*
  The seminar player.

  Why this exists rather than `<video controls>`: native controls are drawn by
  the browser engine, so the same page is a different product in Chrome, Safari
  and Firefox — different bar height, different scrubber, different icons,
  different menu. More concretely, `controlsList="nodownload"` is Chromium-only:
  Firefox and Safari ignore it and keep offering the download. A control bar we
  draw is the only version of that rule that reads the same everywhere.

  Colors come from the theme variables, never literals, so this follows a
  palette edit like the rest of the site. The two exceptions are the scrim
  gradient and the control-bar ground, which are deliberately black-alpha: they
  sit over a photograph of unknown brightness, and a theme color there would
  stop guaranteeing contrast the first time somebody retunes the palette.

  Sizing is in rem against the page, not vw against the viewport — a control bar
  that grows with the video box ends up with 40px icons on a fullscreen 27"
  display.
*/

.scfc-lib .vp {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  /* Establishes the stacking context the bar and the big play button sit in,
     so neither can be caught behind the sticky site header the way the editor
     toolbar once was. */
  isolation: isolate;
  --vp-accent: var(--cyan, #4CC9F0);
}

.scfc-lib .vp video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

/* ---- the big center play button -------------------------------------- */

.scfc-lib .vp__big {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #fff;
  padding: 0;
}
.scfc-lib .vp__big span {
  display: grid;
  place-items: center;
  width: 4.5em;
  height: 4.5em;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  border: 2px solid rgba(255, 255, 255, .85);
  transition: transform .15s ease, background-color .15s ease;
}
/* The player is handed ONE copy of each glyph, rendered at 22px because that is
   the control-bar size (seminar.html builds __VP_ICONS__ from the shared macro).
   This button is a 4.5em circle, so the same markup has to be sized up HERE.
   Without this the icon rendered at 31% of the circle — a tiny arrow floating in
   a large ring. Sizing by CSS rather than emitting a second, bigger play icon:
   a copy of the glyph would go stale the first time the icon is redrawn, which
   is the same reason the markup is passed to JS instead of the path data. */
.scfc-lib .vp__big span svg { width: 2.5em; height: 2.5em; }
/* No optical nudge here, deliberately. The glyph is ALREADY drawn right of its
   viewBox center (x 8 -> 18.47 of 24), so the `padding-left: .28em` that used
   to sit on this rule was a second correction on top of one baked into the path,
   and it pushed the icon visibly right. Measured in chromium: with no padding
   the triangle's centroid lands 0.65px left of the circle's center, which is
   sub-pixel. Adding anything here double-corrects again. */
.vp__big:hover span,
.scfc-lib .vp__big:focus-visible span { background: rgba(0, 0, 0, .75); transform: scale(1.06); }
.vp.is-playing .vp__big,
.scfc-lib .vp.is-started .vp__big { display: none; }

/* ---- the control bar --------------------------------------------------- */

.scfc-lib .vp__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: .35em;
  padding: 2.5em .7em .55em;
  color: #fff;
  /* Scrim, so white controls stay legible over a bright frame. */
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 100%);
  opacity: 1;
  transition: opacity .2s ease;
}
/* Hidden while playing and idle — but NEVER while a control inside it has
   keyboard focus, or tabbing into the bar would move focus to something the
   viewer cannot see. */
.scfc-lib .vp.is-playing.is-idle .vp__bar:not(:focus-within) { opacity: 0; }
.scfc-lib .vp.is-playing.is-idle:not(:hover) { cursor: none; }

.scfc-lib .vp__btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.scfc-lib .vp__btn:hover { background: rgba(255, 255, 255, .16); }
.vp__btn:focus-visible,
.vp__seek:focus-visible,
.vp__vol:focus-visible,
.scfc-lib .vp__rate:focus-visible {
  outline: 2px solid var(--vp-accent);
  outline-offset: 2px;
}
.scfc-lib .vp__btn[aria-pressed="true"] { background: rgba(255, 255, 255, .22); }

/* ---- scrubber ---------------------------------------------------------- */

.scfc-lib .vp__seekwrap { position: relative; flex: 1 1 auto; display: flex; align-items: center; height: 2.2em; min-width: 0; }

/* Buffered range, painted behind the input. Purely informational — the input
   itself stays the interactive element, so the hit target is unchanged. */
.scfc-lib .vp__buffered {
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .34);
  pointer-events: none;
  width: 0;
}

/* One range input, restyled per engine. `appearance:none` on the input plus
   explicit track and thumb rules, because a range input is the one control
   whose default look no two browsers agree on — which is the whole reason
   this file exists. */
.scfc-lib .vp__seek, .scfc-lib .vp__vol {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.scfc-lib .vp__seek { flex: 1 1 auto; height: 2.2em; min-width: 0; }
.scfc-lib .vp__vol { width: 5.5em; height: 2.2em; flex: 0 0 auto; }

.vp__seek::-webkit-slider-runnable-track,
.scfc-lib .vp__vol::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--vp-accent) var(--pct, 0%), rgba(255,255,255,.22) var(--pct, 0%));
}
.vp__seek::-moz-range-track,
.scfc-lib .vp__vol::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--vp-accent) var(--pct, 0%), rgba(255,255,255,.22) var(--pct, 0%));
}
.vp__seek::-webkit-slider-thumb,
.scfc-lib .vp__vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 0;
  margin-top: -4.5px;                    /* center on a 4px track */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.vp__seek::-moz-range-thumb,
.scfc-lib .vp__vol::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

/* ---- time, rate -------------------------------------------------------- */

.scfc-lib .vp__time {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: .8em;
  letter-spacing: .01em;
  padding: 0 .35em;
  /* Tabular figures: without them the bar twitches sideways every second as
     glyph widths change, which is the sort of thing nobody names but everybody
     notices. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.scfc-lib .vp__rate {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: .78em;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 6px;
  padding: .18em .3em;
  cursor: pointer;
}
.scfc-lib .vp__rate option { color: var(--ink); background: var(--paper); }

/* ---- captions ---------------------------------------------------------- */

/* Lift the native cue box off the bottom edge so it does not sit under the
   control bar. ::cue is the one hook browsers agree on. */
.scfc-lib .vp video::cue { background: rgba(0, 0, 0, .78); font-size: .95em; }
.scfc-lib .vp video::-webkit-media-text-track-container { transform: translateY(-2.6em); }

/* ---- states ------------------------------------------------------------ */

.scfc-lib .vp__spinner {
  position: absolute; inset: 0;
  display: none; place-items: center;
  pointer-events: none;
}
.scfc-lib .vp.is-waiting .vp__spinner { display: grid; }
.scfc-lib .vp__spinner i {
  width: 2.4em; height: 2.4em;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  animation: vp-spin .8s linear infinite;
}
@keyframes vp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
.scfc-lib .vp__spinner i { animation-duration: 2.4s; }
.scfc-lib .vp__big span, .scfc-lib .vp__bar { transition: none; }
}

.scfc-lib .vp__error {
  position: absolute; inset: 0;
  display: none; place-items: center;
  text-align: center; padding: 2em;
  color: #fff; background: rgba(0, 0, 0, .8);
  font-size: .95em;
}
.scfc-lib .vp.is-error .vp__error { display: grid; }
.scfc-lib .vp__noscript { margin:.75em 0 0; padding:.7em .9em; border-radius:8px;
                border:1px solid var(--line); color:var(--muted); font-size:.9em; }

.vp.is-error .vp__bar,
.scfc-lib .vp.is-error .vp__big { display: none; }

/* Narrow screens: volume is the first thing to go — phones have hardware
   buttons for it — then the rate select. Nothing is disabled; it is removed,
   and what remains still works. */
@media (max-width: 34em) {
.scfc-lib .vp__vol { display: none; }
.scfc-lib .vp__bar { gap: .15em; padding-left: .35em; padding-right: .35em; }
.scfc-lib .vp__time { font-size: .72em; padding: 0 .2em; }
}
@media (max-width: 26em) {
.scfc-lib .vp__rate { display: none; }
}


/* ---- Live -----------------------------------------------------------------
   A live stream has no timeline to move through, so the scrubber and the
   duration are removed rather than disabled. A control that is drawn has to
   work; one that would refuse is not drawn.

   The buffer behind the playhead is deliberately NOT trimmed away on the
   server — it is what carries a viewer through a network blip — so this is a
   UI decision, not a delivery one. */
.vp--live .vp__seekwrap,
.vp--live .vp__buffered,
.scfc-lib .vp--live .vp__seek { display: none; }
/* The clock is hidden on a live stream, not restyled. It shows the playhead
   against a rolling window, so it sits a second or two behind by design — and
   a number that is meant to be wrong is worse than no number. The element
   stays because it hosts the LIVE badge below; font-size:0 hides the digits
   without removing the box. */
.scfc-lib .vp--live .vp__time { font-size: 0; }
.scfc-lib .vp--live .vp__time::after {
  content: "LIVE";
  /* Its own font-size, because the parent is 0 to hide the clock. */
  padding: .1em .4em; border-radius: 3px;
  background: #c0392b; color: #fff; font-size: .72em; letter-spacing: .04em;
}

/* The quiet state. Most of the week nothing is on air, and a page that looks
   broken when it is merely quiet teaches people to distrust it. */
.scfc-lib .live__idle {
  padding: 3em 1.5em; text-align: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft);
}
.scfc-lib .live__idle-h { margin: 0 0 .4em; font-family: var(--display); font-weight: 700; }
.scfc-lib .live__idle-p { margin: 0; color: var(--muted); }


/* "Skipped to live", shown for a moment after a rejoin.
   Pointer-events none: it sits over the picture and must never eat a click
   meant for the video or the bar underneath it. */
.scfc-lib .vp__skipped {
  position: absolute; left: 50%; top: 1em; transform: translateX(-50%) translateY(-.4em);
  padding: .35em .75em; border-radius: 999px;
  background: rgba(0,0,0,.78); color: #fff; font-size: .8em; letter-spacing: .01em;
  opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none; z-index: 5;
}
.scfc-lib .vp__skipped.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }