/* Preserve page width when biography dialogs lock background scrolling. */
html { scrollbar-gutter: stable; }
.speaker-card, .home-speaker-card { display: flex; flex-direction: column; }
.speaker-card-body, .home-speaker-card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.speaker-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 24px; }
.speaker-bio-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 16px; border: 1px solid #b96839; border-radius: 999px; background: transparent; color: #864019; font: 700 12px/1.3 Inter, Arial, sans-serif; cursor: pointer; transition: background .18s, color .18s; }
.speaker-bio-button:hover { background: #a64e23; color: #fffaf0; }
.speaker-bio-button svg, .speaker-bio-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.speaker-bio-button:focus-visible, .speaker-bio-close:focus-visible { outline: 3px solid #c58c27; outline-offset: 4px; }
.speaker-bio-dialog { position: fixed; inset: 0 0 0 auto; box-sizing: border-box; width: min(620px, 92vw); height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-left: 1px solid #dbcbb1; background: #fffaf0; color: #282721; box-shadow: -16px 0 70px #0e234040; overflow: hidden; }
.speaker-bio-dialog[open] { display: flex; flex-direction: column; animation: bio-slide-in .24s ease-out; }
.speaker-bio-dialog::backdrop { background: rgb(10 27 47 / 52%); }
.speaker-bio-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex: 0 0 auto; padding: 16px 28px; border-bottom: 1px solid #e5d8c2; background: #102744; color: #fffaf0; }
.speaker-bio-toolbar > span { font: 600 12px/1.5 Inter, Arial, sans-serif; letter-spacing: .5px; }
.speaker-bio-close { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid #fffaf066; border-radius: 50%; background: transparent; color: #fffaf0; cursor: pointer; }
.speaker-bio-close:hover { background: #fffaf020; }
.speaker-bio-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 34px 36px max(36px, env(safe-area-inset-bottom)); }
.speaker-bio-header { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid #e5d8c2; }
.speaker-bio-portrait { display: block; width: 112px; height: 140px; object-fit: cover; object-position: center top; border-radius: 4px; }
.speaker-bio-kicker { margin: 0 0 10px; color: #9b4b26; font: 700 10px/1.4 Inter, Arial, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
.speaker-bio-header h2 { margin: 0 0 12px; color: #102744; font: 700 clamp(25px, 2.5vw, 34px)/1.15 Inter, Arial, sans-serif; letter-spacing: -.8px; overflow-wrap: anywhere; }
.speaker-bio-role { margin: 0; color: #655444; font: 500 13px/1.6 Inter, Arial, sans-serif; }
.speaker-bio-text { padding: 12px 0 18px; font: 400 18px/1.8 Georgia, serif; }
.speaker-bio-text p { margin: 20px 0 0; }
.speaker-bio-session { padding-top: 24px; border-top: 1px solid #e5d8c2; }
.speaker-bio-session > p:last-child { margin: 0; color: #102744; font: 400 17px/1.65 Georgia, serif; }
@keyframes bio-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (max-width: 620px) {
  .speaker-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .speaker-bio-dialog { width: 100%; border-left: 0; }
  .speaker-bio-toolbar { padding: 12px 20px; }
  .speaker-bio-scroll { padding: 24px 22px max(28px, env(safe-area-inset-bottom)); }
  .speaker-bio-header { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
  .speaker-bio-portrait { width: 80px; height: 104px; }
  .speaker-bio-text { font-size: 17px; }
}
@media (max-width: 560px) { .home-speaker-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .speaker-bio-dialog[open] { animation: none; } .speaker-bio-button { transition: none; } }
