/* startups.henikoff.com -- stylesheet */

/* The MATH Venture Partners house style -- the palette the content came
   from. Values are their Elementor globals (#072B31 ink, #EAEDF1 ground,
   #A65523 accent) with Avenir, which their stylesheet sets 21 times. */

:root {
  --measure: 68ch;

  --font-display: "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", sans-serif;
  --font-body:    "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", sans-serif;
  --font-ui:      "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --ground:      #EAEDF1;
  --surface:     #FFFFFF;
  --surface-2:   #DCE2E9;
  --ink:         #072B31;
  --ink-2:       #33535C;
  --muted:       #6E828A;
  --rule:        #C9D3DB;
  --rule-2:      #DFE5EB;
  --accent:      #A65523;
  --accent-ink:  #FFFFFF;
  --accent-wash: #F2E3D8;
  --teal:        #43695B;
  --teal-wash:   #DEE8E1;
  --shadow:      0 1px 2px rgba(7,43,49,.05), 0 4px 14px rgba(7,43,49,.05);

  /* Their pages are square-cornered and airy, with light large headings. */
  --radius:      0px;
  --h1-size:     clamp(32px, 5.2vw, 54px);
  --h1-weight:   500;
  --h1-track:    -.012em;
  --h1-lh:       1.12;
  --body-size:   16.5px;
  --label-case:  uppercase;
  --label-track: .1em;
  --hero-pad:    70px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body-size, 16px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; }

/* Controls and metadata stay on the UI face even when the theme's body face
   is a serif or a monospace -- a Palatino form field looks like a mistake. */
input, button, select, textarea, .nav, .tag, .kind, .chip, .badge-v,
.eyebrow, .flabel, .al, .an, .bn-dir, .pn, .crumbs, .verstamp,
.tr-head h2, .module h3, .track-head .count, .pager-pos, .facade-dur {
  font-family: var(--font-ui);
}
.dur, .when, .ndate, .rdate, .lib-date, .res-date, .tstamp, .mono,
.aout, .atable th, kbd { font-family: var(--font-mono); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap        { max-width: 1080px; margin: 0 auto; padding: 0 26px; }
.wrap-narrow { max-width: 760px;  margin: 0 auto; padding: 0 26px; }

/* ---------------------------------------------------------- version stamp */

.verstamp {
  position: fixed; top: 0; left: 0; z-index: 60;
  display: flex; gap: 6px; align-items: baseline;
  padding: 3px 9px;
  background: var(--surface); border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em;
  border-bottom-right-radius: 4px;
}
.vhash { color: var(--accent); font-weight: 600; }
.vwhen { color: var(--muted); }

/* ---------------------------------------------------------------- top bar */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.topbar-in {
  max-width: 1080px; margin: 0 auto; padding: 0 26px;
  height: 62px; display: flex; align-items: center; gap: 20px;
}
.brand { font-size: 14px; letter-spacing: .13em; font-weight: 700; white-space: nowrap; }
.brand-a { color: var(--ink); }
.brand-b { color: var(--accent); margin-left: 5px; }
.brand:hover { text-decoration: none; }

.searchbox { flex: 1; position: relative; max-width: 460px; }
.searchbox input {
  width: 100%; height: 36px; padding: 0 13px;
  font: inherit; font-size: 14px;
  color: var(--ink); background: var(--ground);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.searchbox input::placeholder { color: var(--muted); }

.typeahead {
  position: absolute; top: 42px; left: 0; right: 0; z-index: 70;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.ta-item { display: block; padding: 9px 13px; border-bottom: 1px solid var(--rule-2); }
.ta-item:last-child { border-bottom: none; }
.ta-item:hover, .ta-item.sel { background: var(--surface-2); text-decoration: none; }
.ta-t { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ta-s { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ta-s mark { background: var(--accent-wash); color: var(--accent); padding: 0 2px; }
.ta-time { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }

.nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav a {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-2);
}
.nav a:hover { color: var(--accent); text-decoration: none; }

/* ------------------------------------------------------------------- hero */

.hero { border-bottom: 1px solid var(--rule); background: var(--surface); }
.hero-in { max-width: 1080px; margin: 0 auto;
           padding: var(--hero-pad) 26px calc(var(--hero-pad) * .75); }
.eyebrow {
  margin: 0 0 14px; font-size: 11.5px; font-weight: 600;
  letter-spacing: var(--label-track); text-transform: var(--label-case);
  color: var(--accent);
}
.hero h1 {
  margin: 0 0 18px;
  font-size: var(--h1-size); line-height: var(--h1-lh);
  letter-spacing: var(--h1-track); font-weight: var(--h1-weight);
}
.prompts-label {
  margin: 0 0 9px; font-size: 11.5px; font-weight: 600;
  letter-spacing: var(--label-track); text-transform: var(--label-case);
  color: var(--muted);
}
.lede { margin: 0 0 26px; max-width: var(--measure); font-size: 17.5px; color: var(--ink-2); }

.prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.prompt {
  padding: 7px 14px; font-size: 14px; font-weight: 500;
  font-family: var(--font-ui);
  color: var(--ink); background: var(--ground);
  border: 1px solid var(--rule); border-radius: 999px;
}
.prompt:hover {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); text-decoration: none;
}

.statline { display: flex; flex-wrap: wrap; gap: 0; margin: 0; border-top: 1px solid var(--rule); }
.statline > div {
  padding: 14px 30px 0 0; margin-right: 30px;
  border-right: 1px solid var(--rule-2);
  display: flex; flex-direction: column-reverse; gap: 2px;
}
.statline > div:last-child { border-right: none; }
.statline dt {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
}
.statline dd {
  margin: 0; font-size: 26px; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ curriculum */

.track-sec { padding: 46px 0 8px; }
.track-head {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 12px; margin-bottom: 22px;
  border-bottom: 2px solid var(--ink);
}
.track-head h2 { margin: 0; font-size: 23px; letter-spacing: -.02em; }
.track-head h2 a { color: var(--ink); }
.track-head h2 a:hover { color: var(--accent); text-decoration: none; }
.track-head .count {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-left: auto;
}

.module { margin-bottom: 30px; }
.module h3 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
/* Lesson cards. The old list was 19 identical text rows per module; these
   lead with a frame from the video and Troy's own opening line, so the eye
   has something to land on and the reader knows what they're getting. */
.lessons {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 12px;
}
.lcard > a {
  display: grid; grid-template-columns: 132px 1fr; gap: 13px;
  height: 100%; padding: 10px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.lcard > a:hover { border-color: var(--accent); text-decoration: none;
                   box-shadow: var(--shadow); }

.lthumb { position: relative; display: block; align-self: start;
          aspect-ratio: 16 / 9; overflow: hidden;
          border-radius: calc(var(--radius) * .6); background: var(--surface-2); }
.lthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lthumb-text { display: flex; align-items: center; justify-content: center;
               height: 100%; font-family: var(--font-ui); font-size: 10px;
               letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lplay { position: absolute; top: 50%; left: 50%;
         transform: translate(-50%, -50%); width: 30px; height: 30px;
         border-radius: 50%; background: var(--accent); opacity: .92; }
.lplay::after { content: ""; position: absolute; top: 50%; left: 55%;
                transform: translate(-50%, -50%); border-style: solid;
                border-width: 5px 0 5px 9px;
                border-color: transparent transparent transparent var(--accent-ink); }
.lcard > a:hover .lplay { opacity: 1; }
.ldur { position: absolute; right: 4px; bottom: 4px; padding: 1px 5px;
        border-radius: 2px; background: rgba(0,0,0,.8); color: #fff;
        font-family: var(--font-mono); font-size: 10px;
        font-variant-numeric: tabular-nums; }

.lbody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ltitle { font-size: 15px; font-weight: 650; line-height: 1.26; }
.lhook { font-size: 13px; line-height: 1.45; color: var(--muted); }
.lfoot { display: flex; align-items: baseline; gap: 8px; margin-top: auto;
         padding-top: 4px; }
.lby { font-family: var(--font-ui); font-size: 10px; font-weight: 700;
       letter-spacing: .07em; text-transform: uppercase;
       padding: 1px 5px; border-radius: 2px;
       background: var(--teal-wash); color: var(--teal); }
.lfoot .when { margin-left: auto; }

/* Long modules collapse to two rows; 19 cards unprompted is its own wall. */
.lessons.capped .lcard.over { display: none; }
.lessons.capped.open .lcard.over { display: block; }
.moretoggle { grid-column: 1 / -1; }
.morebtn {
  width: 100%; padding: 9px 0; font: inherit; font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-2); background: var(--surface);
  border: 1px dashed var(--rule); border-radius: var(--radius);
}
.morebtn:hover { border-color: var(--accent); color: var(--accent);
                 border-style: solid; }

/* recent + library thumbnails */
.rthumb, .lib-thumb { position: relative; display: block; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: calc(var(--radius) * .6);
  background: var(--surface-2); margin-bottom: 3px; }
.rthumb img, .lib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.othertracks { display: flex; gap: 22px; padding: 26px 0 60px; font-weight: 600; }

/* ----------------------------------------------------------------- recent */

.recent { padding: 34px 0 70px; }
.recent h2 { font-size: 19px; margin: 0 0 16px; letter-spacing: -.015em; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.rcard {
  display: flex; flex-direction: column; gap: 7px; padding: 16px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); color: var(--ink);
}
.rcard:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }
.rtitle { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.rsum { font-size: 13.5px; color: var(--muted); }
.rdate { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: auto; }

.kind, .tag {
  align-self: flex-start; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: 2px 7px; border-radius: 2px;
  background: var(--surface-2); color: var(--muted);
}
.kind-lesson, .tag-lesson { background: var(--accent-wash); color: var(--accent); }
.kind-interview, .tag-interview { background: var(--teal-wash); color: var(--teal); }
.tag-v { background: var(--teal-wash); color: var(--teal); }

/* ----------------------------------------------------------------- lesson */

.lesson { padding: 34px 0 80px; }
.topnav { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em;
          text-transform: uppercase; color: var(--muted); }
.crumbs .sep { margin: 0 7px; opacity: .5; }

.pager { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pager-pos { font-family: var(--font-mono); font-size: 11px; color: var(--muted);
             font-variant-numeric: tabular-nums; margin-right: 4px; }
.pgbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; font-size: 15px; line-height: 1;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.pgbtn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pgbtn.off { opacity: .3; }

.bignav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
          margin: 44px 0 0; }
.bn { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
      background: var(--surface); border: 1px solid var(--rule);
      border-radius: var(--radius); color: var(--ink); }
.bn:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }
.bn.next { text-align: right; }
.bn.empty { background: none; border: none; }
.bn-dir { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
          text-transform: uppercase; color: var(--muted); }
.bn-title { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.bn-hint { grid-column: 1 / -1; margin: 4px 0 0; text-align: center;
           font-size: 12px; color: var(--muted); }
kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px;
      border: 1px solid var(--rule); border-bottom-width: 2px;
      border-radius: var(--radius); background: var(--surface-2); color: var(--ink-2); }
.lesson h1 { margin: 0 0 12px; font-size: calc(var(--h1-size) * .78);
             line-height: var(--h1-lh); letter-spacing: var(--h1-track);
             font-weight: var(--h1-weight); }
.lmeta-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
             font-size: 13.5px; color: var(--muted); margin-bottom: 26px; }
.lmeta-row .sep { margin: 0 5px; opacity: .5; }
.attrib { font-style: italic; }

.player { margin-bottom: 32px; }
.frame { position: relative; padding-bottom: 56.25%; background: #000;
         border-radius: var(--radius); overflow: hidden; }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Poster facade: a frame cut from our own master. Nothing is requested from
   Vimeo or YouTube until this is clicked. */
.facade { position: absolute; inset: 0; width: 100%; height: 100%;
          padding: 0; border: 0; background: #000; display: block; }
.facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.playbtn { position: absolute; top: 50%; left: 50%;
           transform: translate(-50%, -50%);
           width: 68px; height: 68px; border-radius: 50%;
           background: var(--accent); opacity: .93;
           box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.playbtn::after { content: ""; position: absolute; top: 50%; left: 54%;
                  transform: translate(-50%, -50%);
                  border-style: solid; border-width: 12px 0 12px 20px;
                  border-color: transparent transparent transparent var(--accent-ink); }
.facade:hover .playbtn { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
.facade-dur { position: absolute; right: 10px; bottom: 10px;
              padding: 2px 7px; border-radius: 3px; font-size: 11.5px;
              background: rgba(0,0,0,.78); color: #fff;
              font-variant-numeric: tabular-nums; }

/* transcript */
.tr { margin-top: 16px; border: 1px solid var(--rule); border-radius: var(--radius);
      background: var(--surface); position: relative; }
.tr-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
           padding: 12px 16px; border-bottom: 1px solid var(--rule-2); }
.tr-head h2 { margin: 0; font-size: 12px; letter-spacing: .13em;
              text-transform: uppercase; color: var(--muted); }
.tr-tools { display: flex; gap: 8px; margin-left: auto; }
.tr-find { height: 30px; padding: 0 10px; font: inherit; font-size: 13px;
           color: var(--ink); background: var(--ground);
           border: 1px solid var(--rule); border-radius: var(--radius); width: 180px; }
.tr-toggle, .btn {
  height: 30px; padding: 0 13px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.tr-toggle:hover, .btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .55; }

/* The transcript is its own scroll region, not a clipped block: the playing
   line is kept centred by scrolling THIS box, never the page. Scrolling the
   page would yank the video out of view the moment playback advanced. */
.tr-body {
  padding: 6px 16px 16px;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;        /* don't chain to the page at the ends */
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.tr-body[data-collapsed="0"] { max-height: 68vh; }

.tr-body::-webkit-scrollbar { width: 9px; }
.tr-body::-webkit-scrollbar-thumb {
  background: var(--rule); border-radius: 6px;
  border: 3px solid var(--surface);
}
.tr-body::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* When the reader scrolls away from the playing line, offer a way back
   instead of fighting them for control of the scroll position. */
.tr-resume {
  position: absolute; right: 18px; bottom: 14px; z-index: 2;
  padding: 5px 12px; font-family: var(--font-ui); font-size: 12px;
  font-weight: 600; color: var(--accent-ink); background: var(--accent);
  border: 0; border-radius: 999px; box-shadow: var(--shadow);
}
.tr-resume[hidden] { display: none; }

.seg { display: flex; gap: 12px; margin: 0; padding: 3px 0; scroll-margin-top: 90px; }
.seg.hit .stext { background: var(--accent-wash); }
.seg.playing .stext { color: var(--ink); font-weight: 550; }
.seg.playing .tstamp { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.seg.dim { opacity: .34; }
.tstamp {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 1px 5px; min-width: 48px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.tstamp:hover { color: var(--accent); border-color: var(--rule); }
.stext { font-size: 15px; color: var(--ink-2); }

.prose { font-size: 17px; margin: 30px 0; }
.prose p { margin: 0 0 1.1em; max-width: var(--measure); }
.prose h2, .prose h3 { margin: 1.5em 0 .5em; }
.prose ul, .prose ol { max-width: var(--measure); }
.prose iframe { max-width: 100%; }
.prose .video-wrap { position: relative; padding-bottom: 56.25%; height: 0;
                     margin: 1.6em 0; border-radius: var(--radius); overflow: hidden; }
.prose .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.prose img { max-width: 100%; height: auto; }

.series { margin: 40px 0 0; padding: 22px; background: var(--surface);
          border: 1px solid var(--rule); border-radius: var(--radius); }
.series h2 { margin: 0 0 12px; font-size: 12px; letter-spacing: .13em;
             text-transform: uppercase; color: var(--accent); }
.series ol { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 2px; }
.series li a { display: flex; gap: 12px; padding: 7px 10px; border-radius: var(--radius);
               color: var(--ink-2); font-size: 14.5px; }
.series li a:hover { background: var(--surface-2); text-decoration: none; }
.series li.here a { background: var(--accent-wash); color: var(--accent); font-weight: 600; }
.pn { font-family: var(--font-mono); font-size: 11px; min-width: 54px; opacity: .8; }

.prevnext { display: flex; justify-content: space-between; gap: 16px;
            padding-top: 14px; border-top: 1px solid var(--rule-2); }
.pn-a { display: flex; flex-direction: column; gap: 2px; font-size: 14px; max-width: 46%; }
.pn-a.right { text-align: right; margin-left: auto; }
.pn-a .dir { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
             text-transform: uppercase; color: var(--muted); }

.orig { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--rule);
        font-size: 13.5px; color: var(--muted); }

/* ----------------------------------------------------------------- search */

.searchpage { padding: 40px 0 80px; }
.bigsearch { display: flex; gap: 9px; margin-bottom: 22px; }
.bigsearch input {
  flex: 1; height: 46px; padding: 0 16px; font: inherit; font-size: 16.5px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.bigsearch button {
  height: 46px; padding: 0 22px; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--accent-ink); background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius);
}
.rescount { font-size: 14px; color: var(--muted); margin-bottom: 18px; }

.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* A result is a thumbnail plus text, so the reader can watch the moment that
   matched without opening the lesson first. */
.res {
  display: grid; grid-template-columns: 208px 1fr; gap: 15px;
  padding: 13px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.res:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.res:has(.res-body:only-child) { grid-template-columns: 1fr; }
.res-video { border-left: 3px solid var(--teal); }

/* Preview only -- clicking goes to the lesson, which is where it plays. */
.res-thumb {
  position: relative; display: block; padding: 0; overflow: hidden;
  aspect-ratio: 16 / 9; align-self: start;
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: calc(var(--radius) + 1px);
}
.res-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-thumb:hover .lplay { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }

.res-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.res-top { display: flex; align-items: center; gap: 10px; }
.res-date { font-size: 11px; color: var(--muted); margin-left: auto; }
.res-title { font-size: 16.5px; font-weight: 650; line-height: 1.3; color: var(--ink); }
.res-title:hover { color: var(--accent); }
.res-snip { font-size: 14.5px; color: var(--ink-2); }
.res-snip mark { background: var(--accent-wash); color: var(--accent);
                 padding: 0 2px; border-radius: 2px; font-weight: 600; }

@media (max-width: 620px) {
  .res { grid-template-columns: 1fr; }
}

.empty, .searchhint { padding: 26px 0; color: var(--muted); }
.empty .hint { font-size: 14.5px; }

/* ---------------------------------------------------------------- library */

.librarypage { padding: 40px 0 80px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
           padding: 14px 0 18px; margin-bottom: 20px;
           border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fgroup { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
          text-transform: uppercase; color: var(--muted); margin-right: 3px; }
.chip {
  padding: 4px 11px; font: inherit; font-size: 12.5px; font-weight: 550;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 999px;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.fcount { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

.libgrid { list-style: none; margin: 0; padding: 0;
           display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 13px; }
.lib > a { display: flex; flex-direction: column; gap: 7px; height: 100%;
           padding: 16px; background: var(--surface);
           border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); }
.lib > a:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }
.lib-top { display: flex; align-items: center; gap: 9px; }
.lib-top .dur { margin-left: auto; }
.lib-title { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.lib-sum { font-size: 13.5px; color: var(--muted); }
.lib-date { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: auto; }
.noresults { padding: 40px 0; text-align: center; color: var(--muted); }

/* ------------------------------------------------------------------- news */

.newspage, .aboutpage, .adminpage, .errpage, .trackpage { padding: 40px 0 80px; }
.newslist { list-style: none; margin: 22px 0 0; padding: 0;
            display: grid; gap: 1px; background: var(--rule);
            border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.newslist li { background: var(--surface); }
.newslist a { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
              padding: 12px 16px; color: var(--ink); }
.newslist a:hover { background: var(--surface-2); text-decoration: none; }
.ndate { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
         min-width: 70px; }
.ntitle { flex: 1 1 320px; font-size: 15px; }
.nsrc { font-size: 12px; color: var(--muted); font-style: italic; }

/* ------------------------------------------------------------------ about */

.aboutpost { margin: 30px 0; padding: 24px; background: var(--surface);
             border: 1px solid var(--rule); border-radius: var(--radius); }
.aboutpost h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.02em; }
.colophon { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule); }
.colophon h2 { font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
               color: var(--muted); margin: 0 0 10px; }

/* ------------------------------------------------------------------ admin */

.acards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
          gap: 1px; background: var(--rule); border: 1px solid var(--rule);
          border-radius: var(--radius); overflow: hidden; margin: 22px 0 28px; }
.acard { background: var(--surface); padding: 14px 16px;
         display: flex; flex-direction: column; gap: 2px; }
.an { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
      letter-spacing: -.02em; }
.al { font-family: var(--font-mono); font-size: 10px; letter-spacing: .11em;
      text-transform: uppercase; color: var(--muted); }

.apanel { margin-bottom: 26px; padding: 20px; background: var(--surface);
          border: 1px solid var(--rule); border-radius: var(--radius); }
.apanel h2 { margin: 0 0 8px; font-size: 16px; letter-spacing: -.01em; }
.apanel p { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-2); max-width: var(--measure); }
.badge-n { font-family: var(--font-mono); font-size: 11px; padding: 2px 7px;
           border-radius: 2px; background: var(--accent-wash); color: var(--accent); }
.aout { margin: 14px 0 0; padding: 13px; background: var(--ground);
        border: 1px solid var(--rule); border-radius: var(--radius);
        font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap;
        max-height: 300px; overflow: auto; }
.atable { width: 100%; border-collapse: collapse; font-size: 14px; }
.atable th { text-align: left; font-family: var(--font-mono); font-size: 10px;
             letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
             padding: 7px 10px; border-bottom: 1px solid var(--rule); }
.atable td { padding: 7px 10px; border-bottom: 1px solid var(--rule-2); }
.atable tr:last-child td { border-bottom: none; }
.atable .num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.small { font-size: 13px; color: var(--muted); }

/* ----------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--rule); background: var(--surface);
        padding: 26px 0; margin-top: 40px; }
.foot-in { max-width: 1080px; margin: 0 auto; padding: 0 26px;
           display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline;
           font-size: 13.5px; color: var(--muted); }
.foot-links { display: flex; gap: 16px; margin-left: auto; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 820px) {
  .topbar-in { height: auto; flex-wrap: wrap; padding: 10px 20px; gap: 12px; }
  .searchbox { order: 3; flex: 1 1 100%; max-width: none; }
  .nav { margin-left: auto; }
  .verstamp { display: none; }
  .statline > div { padding-right: 20px; margin-right: 20px; }
  .prevnext { flex-direction: column; }
  .pn-a, .pn-a.right { max-width: none; text-align: left; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .tr-body { scroll-behavior: auto !important; }
}

/* ------------------------------------------------- admin contact sheet */

.sheet-bar { display: flex; align-items: center; gap: 14px;
             padding: 14px 0 18px; margin-bottom: 18px;
             border-top: 1px solid var(--rule);
             border-bottom: 1px solid var(--rule); }
.sheet-bar .fcount { margin-left: 0; margin-right: auto; }

.sheet { list-style: none; margin: 0; padding: 0;
         display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         gap: 14px; }
.shot { background: var(--surface); border: 1px solid var(--rule);
        border-radius: var(--radius); overflow: hidden;
        display: flex; flex-direction: column; }

.shot-img { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); }
.shot-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-spin { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.shot-spin::after { content: ""; position: absolute; top: 50%; left: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: shotspin .7s linear infinite; }
@keyframes shotspin { to { transform: rotate(360deg); } }

.shot-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 8px; }
.shot-title { font-size: 14px; font-weight: 650; line-height: 1.3; }
.shot-title a { color: var(--ink); }

.shot-row { display: flex; align-items: center; gap: 9px; }
.shot-lbl { font-family: var(--font-ui); font-size: 10px; letter-spacing: .11em;
            text-transform: uppercase; color: var(--muted);
            min-width: 66px; flex: 0 0 auto; }
.scrub { flex: 1; min-width: 0; accent-color: var(--accent); }
.scrub-t { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
           min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.byline { flex: 1; min-width: 0; height: 28px; padding: 0 7px;
          font: inherit; font-family: var(--font-ui); font-size: 12.5px;
          color: var(--ink); background: var(--ground);
          border: 1px solid var(--rule); border-radius: var(--radius); }
.shot-state { font-size: 11px; color: var(--muted); min-width: 54px; }

.shot-supp { gap: 7px; padding-top: 2px; border-top: 1px solid var(--rule-2);
             margin-top: 2px; }
.shot-supp input { accent-color: var(--accent); width: 15px; height: 15px;
                   flex: 0 0 auto; margin: 0; }
.supp-lbl { font-size: 12px; color: var(--muted); }

/* A suppressed card stays legible but visibly out of play. */
.shot.is-supp { opacity: .58; }
.shot.is-supp .shot-img::after {
  content: "SUPPRESSED"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; color: #fff; background: rgba(0,0,0,.55);
}
.shot.is-supp .supp-lbl { color: var(--accent); font-weight: 600; }

/* ============================================================== mobile ===
   Keyed off (pointer: coarse) rather than width wherever the issue is touch
   rather than screen size -- a narrow desktop window has a mouse and a
   keyboard, and shouldn't lose hover targets or the keyboard hint. */

@media (pointer: coarse) {
  /* iOS force-zooms any focused input under 16px and leaves the page
     scrolled sideways. Applies to every field on the site. */
  input, select, textarea { font-size: 16px !important; }

  /* 44px is the iOS minimum for a comfortable tap. Transcript timestamps
     were ~20px, which made seeking a game of chance. */
  .tstamp { min-height: 34px; min-width: 56px; padding: 6px 8px; }
  .seg { padding: 5px 0; }
  .pgbtn { width: 40px; height: 40px; font-size: 17px; }
  .chip { padding: 7px 14px; }
  .prompt { padding: 9px 15px; }

  /* No arrow keys on a phone, so don't advertise them. */
  .bn-hint { display: none; }
}

@media (max-width: 640px) {
  /* Breadcrumb and pager collided: the trail wrapped to three lines and the
     position counter sat on top of the arrows. Stack them instead. */
  .topnav { flex-direction: column; align-items: stretch; gap: 10px; }
  .pager { margin-left: 0; justify-content: flex-end; }
  .crumbs { line-height: 1.5; }

  /* The transcript and the video have to be readable together. A 340px box
     pushed the player off-screen the moment you scrolled, so on a phone the
     box is short enough that both fit above the fold. */
  .tr-body { max-height: 190px; }
  .tr-body[data-collapsed="0"] { max-height: 60vh; }

  .tr-head { padding: 10px 12px; gap: 8px; }
  .tr-tools { width: 100%; margin-left: 0; }
  .tr-find { flex: 1; width: auto; }
  .tr-body { padding: 6px 12px 12px; }
  .stext { font-size: 14.5px; }

  /* Reclaim header height: two rows of chrome on an 844px screen is a lot. */
  .topbar-in { padding: 8px 16px; gap: 8px; }
  .brand { font-size: 13px; }
  .nav { gap: 14px; }
  .nav a { font-size: 11px; }

  .wrap, .wrap-narrow, .hero-in, .topbar-in, .foot-in { padding-left: 16px; padding-right: 16px; }

  /* 4 stats wrapped 3-then-1, orphaning the last one beside an empty cell. */
  .statline { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .statline > div { padding: 12px 12px 12px 0; margin-right: 0;
                    border-right: none; border-top: 1px solid var(--rule-2); }
  .statline dd { font-size: 22px; }

  /* Track title and its lesson count were fighting for the same line. */
  .track-head { flex-wrap: wrap; gap: 4px; }
  .track-head h2 { font-size: 20px; flex: 1 1 100%; }
  .track-head .count { margin-left: 0; }

  /* Give the card text room; 132px of thumbnail left it very narrow. */
  .lcard > a { grid-template-columns: 104px 1fr; gap: 11px; }
  .ltitle { font-size: 14.5px; }
  .lhook { font-size: 12.5px; }

  .lesson { padding: 20px 0 60px; }
  .bignav { grid-template-columns: 1fr; }
  .bn.next { text-align: left; }
  .bn.empty { display: none; }
}

/* ---------------------------------------------- sticky player on mobile */
/* On a phone the player and the transcript can't both stay in view while
   you read, so the player pins to the top and the page scrolls under it.
   Two consequences, both deliberate:
     - the top bar stops being sticky here, so there is only one pinned
       element competing for the top of the screen (and the header's two
       rows were eating ~90px of an 844px screen anyway);
     - the transcript stops being its own scroll region. With the video
       pinned there is no reason to trap the swipe in a 190px box, and a
       nested scroller is the fiddliest thing to operate by thumb. */

@media (max-width: 640px) {
  .topbar { position: static; }

  .player .frame {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #000;
    /* Bleed to the screen edges: a pinned 16:9 frame reads as a player,
       not as a card that got stuck. */
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    border-radius: 0;
    box-shadow: 0 6px 14px rgba(7, 43, 49, .18);
  }

  .tr {
    /* `overflow: hidden` anywhere in the ancestor chain silently kills
       position:sticky on the player, so the transcript card must not clip. */
    overflow: visible;
  }
  .tr-body,
  .tr-body[data-collapsed="1"],
  .tr-body[data-collapsed="0"] {
    max-height: none;
    overflow: visible;
  }
  /* Nothing left to expand once the box is full height. */
  .tr-toggle { display: none; }
  .tr-resume { position: fixed; right: 14px; bottom: 18px; }
}

/* Byline: who is actually on camera. Shown only when it is not Troy -- his
   name on every card of his own archive is noise, but a talk by Mark Achler
   or Elisa Sepulveda reading as his is a misattribution. */
.byline-tag {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 2px;
  background: var(--teal-wash); color: var(--teal);
}
.lib-date .lby { margin-right: 7px; }