/* speakers.css — the faces (milestone 2r, the finish round), scoped to the speakers sheet. Three panels of 560 units side by side (the
   core sizes the sheet from data-panels and frames whole panels); in each, three faces of 152 units across with 24-unit gutters inside
   28-unit margins (3 × 152 + 2 × 24 = 504 = 560 − 2 × 28), so nothing is clipped. 1 unit = 1 CSS px inside the poster; a phone shows a
   panel at about 0.66, so the 21-unit names, organisations and roles read at about 13.9 px there (review-2r 2: they were 10.6 px and faint).
   The faces are the owner's pick (BRIEF 12: the solid-masses marker portraits in ../_avatars/), turned into ink on the paper with the tooth;
   the photograph is a print laid on the face on hover or tap (speakers.js, print.js); a speaker without a drawing keeps a typed name card.
   The details are a card on its own paper plane, fixed to the screen outside the poster, so opening it never moves a face (review-2r 5). */
#place-speakers { padding: 44px 0 72px; }
#place-speakers .panel { width: 560px; padding: 0 28px; box-sizing: border-box; }
#place-speakers .sheet-head { margin: 0 0 26px; }
#place-speakers .sheet-head .kicker { font-size: 19px; line-height: 1.38; opacity: 0.78; margin: 0 0 8px; }
#place-speakers .sheet-head .how { font-size: 19px; line-height: 1.4; margin: 0; opacity: 0.85; }
#place-speakers .panel-kicker { font-size: 19px; line-height: 1.38; opacity: 0.78; margin: 6px 0 24px; }
#place-speakers .faces { display: grid; grid-template-columns: repeat(3, 152px); column-gap: 24px; row-gap: 20px; margin: 0; padding: 0; }
#place-speakers figure.face { margin: 0; width: 152px; min-width: 0; position: relative; }
/* the face: the drawing, or the typed card; the photograph's print over it when revealed */
#place-speakers .art { position: relative; display: block; width: 152px; height: 152px; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; outline: none; }
#place-speakers .art[role="button"] { cursor: pointer; }
#place-speakers .art img { -webkit-user-drag: none; user-select: none; }
/* the drawing arrives as an image on its own paper; speakers.js turns it into ink (alpha from darkness, the ink's colour) on a canvas so it lies in
   our paper with the tooth (the poster is its own stacking context, so a multiply blend could never reach the paper underneath) */
#place-speakers .art img.avatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; pointer-events: none; }
#place-speakers .art.inkfailed img.avatar { opacity: 1; }
#place-speakers .art canvas.avatar-ink { position: absolute; left: 0; top: 0; width: 152px; height: 152px; display: block; pointer-events: none; transition: opacity 0.28s; }
#place-speakers .art canvas.avatar-ink.fresh { animation: spk-ink-in 0.4s ease-out both; }
@keyframes spk-ink-in { from { opacity: 0; } to { opacity: 1; } }
#place-speakers .art .name-card { display: none; }
#place-speakers .art.carded .name-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px 12px 24px; box-sizing: border-box; font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; color: var(--ink); }
#place-speakers .art.carded .name-card.long { font-size: 19px; overflow-wrap: normal; }
#place-speakers .art .card-frame { position: absolute; left: 0; top: 0; width: 152px; height: 152px; pointer-events: none; mix-blend-mode: multiply; }
#place-speakers .art .no-photo-label { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 19px; opacity: 0.75; pointer-events: none; }
#place-speakers .art.drawn .no-photo-label { bottom: -2px; background: none; }
/* the raw photograph is only the print's source with JavaScript on (and the face itself with it off) */
#place-speakers .art img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; opacity: 0; pointer-events: none; }
#place-speakers .art .print { position: absolute; left: 0; top: 0; width: 152px; height: 152px; opacity: 0; transition: opacity 0.28s; pointer-events: none; }
#place-speakers .art .print canvas { position: absolute; display: block; }
#place-speakers .art .print canvas:not(.shadow) { left: 0; top: 0; }
#place-speakers .face.revealed .art .print { opacity: 1; }
#place-speakers .face.revealed .art.plainprint img.photo { opacity: 1; transform: rotate(-0.8deg); box-shadow: 0 1px 1px rgba(38, 26, 14, 0.4), 0 3px 6px rgba(38, 26, 14, 0.22); }   /* the print could not be rendered: the plain photograph, turned */
#place-speakers .face.revealed .art .avatar-ink, #place-speakers .face.revealed .art.inkfailed img.avatar, #place-speakers .face.revealed .art .name-card, #place-speakers .face.revealed .art .card-frame { opacity: 0.22; }
#place-speakers .art:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 4px; }
#place-speakers figure.face.lifted { z-index: 6; }
/* a followed speaker: a small check written by the face (the ring that followed them is the visitor's own ink) */
#place-speakers .face .follow-check { position: absolute; right: -10px; top: -12px; width: 34px; height: 30px; pointer-events: none; }
#place-speakers .face:not(.followed) .follow-check { display: none; }
/* the caption: the name (the link to the details), the organisation, the title; full in the card */
#place-speakers figcaption { position: relative; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
#place-speakers figcaption .name-line { font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
#place-speakers figcaption .name { display: inline; font-size: 21px; line-height: 1.2; padding-bottom: 1px; }   /* inline, so a wrapped name is underlined line by line */
#place-speakers figcaption .org { font-size: 21px; line-height: 1.22; opacity: 0.82; overflow-wrap: break-word; }   /* whole: the organisation is the line people scan for */
#place-speakers figcaption .role { font-size: 19px; line-height: 1.24; opacity: 0.78; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }   /* two lines here; the whole title is in the card */
/* the name's target is the caption's width and at least 67 units tall (44 CSS px on the phone proxy at 0.661): an ::after hit area that
   grows the link without moving a line, so the sheet lays out the same in units on every device; the link sits above the organisation
   and the title (their ink is masked, so each is its own layer) so the area takes the tap. A stroke that starts on it still draws. */
#place-speakers figcaption .name { position: relative; z-index: 2; -webkit-tap-highlight-color: transparent; }
#place-speakers figcaption .name::after { content: ''; position: absolute; left: 0; top: -8px; bottom: -38px; width: 152px; }   /* 23 + 8 + 38 = 69 units: 45 CSS px on the phone */
/* the details card: its own paper plane, fixed to the screen, beside the face on a laptop and above the mark on a phone */
.spk-card { position: fixed; top: 72px; z-index: 41; width: min(440px, calc(100vw - 48px)); max-height: calc(100vh - 210px); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 16px 22px 14px; background: var(--paper, #f1ece2); color: var(--ink, #15141a); border: 1.6px solid rgba(21, 20, 26, 0.78); border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px; opacity: 0; transition: opacity 0.18s; }
.spk-card.on { opacity: 1; }
.spk-card.phone { top: auto; bottom: 136px; left: 10px; right: 10px; width: auto; max-height: 46vh; padding: 14px 16px 10px; }
.spk-card .rule { display: block; width: 100%; height: 12px; margin: 0 0 6px; pointer-events: none; }
.spk-card h3 { font: 400 24px/1.15 var(--type); margin: 0 0 6px; text-transform: none; outline: none; }
.spk-card h3:focus-visible { outline: 1.5px dashed var(--chrome, #6b6258); outline-offset: 3px; }
.spk-card .who { font-size: 16px; line-height: 1.35; margin: 0 0 4px; opacity: 0.88; }
.spk-card .who.org { margin-bottom: 12px; }
.spk-card .bio { font-size: 15.5px; line-height: 1.5; margin: 0 0 14px; white-space: pre-wrap; min-height: 1.5em; }
.spk-card .talks-h { font-size: 14px; opacity: 0.8; margin: 0 0 4px; }
.spk-card ul.talks { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.spk-card ul.talks li { font-size: 15.5px; line-height: 1.35; }
.spk-card ul.talks .when { display: block; font-size: 13.5px; opacity: 0.8; }
.spk-card ul.talks a { display: inline-block; min-height: 44px; padding: 4px 0 8px; box-sizing: border-box; color: inherit; text-decoration: underline; text-decoration-color: rgba(21, 20, 26, 0.35); text-underline-offset: 4px; }
.spk-card ul.talks a:hover, .spk-card ul.talks a:focus-visible { text-decoration-color: currentColor; outline: none; }
.spk-card .spk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 4px 0 2px; }
.spk-card .spk-hand { background: none; border: 0; padding: 6px 2px; margin: 0; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; cursor: pointer; color: inherit; mix-blend-mode: multiply; opacity: 0.85; }
.spk-card .spk-hand:hover, .spk-card .spk-hand:focus-visible { opacity: 1; outline: none; }
.spk-card .spk-hand:focus-visible { outline: 1.5px dashed var(--chrome, #6b6258); outline-offset: 2px; }
.spk-card .spk-hand canvas { display: block; }
.spk-card .sample { font-size: 13px; opacity: 0.75; margin: 8px 0 0; }
.spk-card .tw-controls { margin: -8px 0 8px; }
@media (prefers-reduced-motion: reduce) { #place-speakers .art .print, #place-speakers .art .avatar-ink, .spk-card { transition: none; animation: none; } }
/* print mode (lanes-finish core 7): the drawings, not the photographs; no card, no ring of the open card */
html[data-print="on"] .spk-card { display: none; }
html[data-print="on"] #place-speakers .face .art .print { opacity: 0; }
html[data-print="on"] #place-speakers .face.revealed .art .avatar-ink, html[data-print="on"] #place-speakers .face.revealed .art .name-card, html[data-print="on"] #place-speakers .face.revealed .art .card-frame { opacity: 1; }
html[data-print="on"] #place-speakers canvas.open-ring { display: none; }
@media print { .spk-card { display: none; } }
/* with JavaScript off the photographs are the faces, plainly */
html:not(.js) #place-speakers .art img.photo { opacity: 1; position: static; display: block; }
html:not(.js) #place-speakers .art img.avatar { display: none; }
html:not(.js) #place-speakers .art.carded .name-card { display: none; }
html:not(.js) #place-speakers .art.no-photo .name-card { display: flex; }
html:not(.js) #place-speakers .faces { grid-template-columns: repeat(auto-fill, 152px); }
html:not(.js) #place-speakers .panel { width: auto; padding: 0; }
html:not(.js) #place-speakers .panels { display: block; }