/* Talks page. Everything else on this page is v3's; only these are new. */
.talkshero{padding:76px 0 8px}
.talkshero h1{margin:0 0 10px}
.talkshero p.sub{max-width:58ch}
.talklist{display:grid; gap:56px; padding:44px 0 88px}
.talk{display:grid; gap:14px}
/* The spectrum marks an item here the same way it marks a note in the index:
   a 3px rule, not atmosphere. */
.talk{border-left:3px solid var(--c,#D50C7A); padding-left:22px}
.talkplayer{display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:8px;
  background:var(--surface); margin:0}
.facade{position:relative; cursor:pointer; overflow:hidden}
.facade:focus-visible{outline:3px solid var(--hot); outline-offset:3px}
.talkthumb{width:100%; height:100%; object-fit:cover; display:block; max-width:none; border-radius:0}
.talkplay{position:absolute; inset:0; margin:auto; width:70px; height:50px; border-radius:11px;
  background:rgba(12,12,16,.74); transition:background .15s ease}
.talkplay::after{content:""; position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:19px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent;
  transform:translateX(2px)}
.facade:hover .talkplay,.facade:focus-visible .talkplay{background:var(--hot)}
/* A talk with no recording gets a word in its meta line, not a player-shaped
   hole. The card is the title, the venue and what the talk was about; the video
   is an addition to that, never the thing holding it up. */
.pending{color:var(--meta2); font-style:italic}
.talktitle{margin:4px 0 0; font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--t-lead); font-weight:500; line-height:1.3}
/* px, not rem, site-wide (see the rule at the top of site.css): html sets no
   font-size, so rem here meant "relative to the UA default", not to the
   19px/now-17px body. .93rem was 14.88px; 15px is the same size, stated
   plainly. */
.talkmeta{margin:0; color:var(--meta); font-size:var(--t-small)}
.talksummary{margin:0; max-width:64ch}
.talklinks{margin:0; font-size:var(--t-small)}
.dot{opacity:.5; margin:0 .3em}
/* .navlink--here used to be defined here too, with a comment above the
   site.css copy claiming it had been "moved out to here" -- the copy in this
   file was never actually deleted. site.css's copy is the one now; see it
   for the current-page nav affordance. */
@media (max-width:720px){ .talkshero{padding:52px 0 4px} .talklist{gap:40px} }