html { scroll-behavior: auto; }
/* The speaking portfolio uses the site's paper, ink and rust palette. */
.speaker-page {
  --sp-accent: #9c3c20;
  --sp-muted: #47545a;
  --sp-gutter: clamp(20px, 4vw, 64px);
  --sp-serif: Georgia, "Times New Roman", serif;
}
.sp-wrap {
  width: min(1240px, calc(100% - 2 * var(--sp-gutter)));
  margin-inline: auto;
}
.speaker-page main section { padding-block: clamp(44px, 5.3vw, 78px); }
.speaker-page main [id] { scroll-margin-top: 90px; }
.speaker-page h2, .speaker-page h3 {
  color: inherit;
  font-family: var(--sp-serif);
  font-weight: 400;
  letter-spacing: -.044em;
  text-wrap: balance;
}
.speaker-page h2 {
  margin: 0;
  max-width: none;
  font-size: clamp(2.5rem, 4.4vw, 4.25rem);
  line-height: 1.04;
}
.speaker-page h3 {
  margin: 0;
  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
  line-height: 1.13;
}
.sp-header nav { min-height: 69px; }
.sp-header .navlinks { font-size: .91rem; gap: clamp(14px, 1.8vw, 25px); }
.sp-header .navlinks [aria-current] {
  color: var(--sp-accent);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.sp-menu { display: none; }
.skip-link {
  position: fixed; z-index: 50; top: 10px; left: 12px;
  transform: translateY(-160%);
  padding: 10px 16px; background: var(--ink); color: var(--paper);
}
.skip-link:focus { transform: none; }
.speaker-page :is(a, button):focus-visible {
  outline: 3px solid #1665a1; outline-offset: 4px;
}
.sp-kicker, .sp-edition, .sp-caption-label, .sp-dateline span, .sp-count {
  font: 700 .75rem/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
}
.sp-kicker { display: flex; align-items: center; gap: 13px; color: var(--sp-accent); margin: 0; }
.sp-kicker::before { content: ""; display: block; width: 29px; height: 2px; background: currentColor; }
.sp-edition {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 22px;
  color: var(--sp-accent); padding-bottom: 13px; margin-bottom: clamp(22px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}
.sp-edition span + span { color: var(--sp-muted); font-weight: 500; letter-spacing: .085em; }
.sp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 25px; }
.sp-button, .sp-link {
  display: inline-flex; align-items: center; gap: 12px; justify-content: center;
  font: 700 .94rem/1.4 Arial, Helvetica, sans-serif;
}
.sp-button { min-height: 46px; padding: 12px 18px; border: 1px solid transparent; }
.sp-primary { background: var(--sp-accent); color: #fff; }
.sp-primary:hover { background: var(--ink); }
.sp-link {
  width: fit-content; min-height: 44px; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.sp-link:hover { color: var(--sp-accent); }
.sp-link > span, .sp-button > span { text-decoration: none; font-size: 1.12em; }

.speaker-page .sp-mast { padding-block: clamp(32px, 3.6vw, 54px); }
.sp-mast-grid {
  display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(0, .84fr);
  gap: clamp(30px, 6vw, 92px); align-items: center;
}
.sp-mast-copy { max-width: 705px; }
.sp-mast h1 {
  font: 400 clamp(3.7rem, 7.6vw, 7.05rem)/.94 var(--sp-serif);
  letter-spacing: -.064em; margin: clamp(20px, 2.5vw, 34px) 0 clamp(18px, 2vw, 27px);
}
.sp-mast h1 span { display: block; }
.sp-position {
  font: 400 clamp(1.4rem, 2.12vw, 2.05rem)/1.23 var(--sp-serif);
  letter-spacing: -.025em; margin: 0 0 16px; max-width: 32ch;
}
.sp-bio { margin: 0; max-width: 61ch; color: var(--sp-muted); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.65; }
.sp-figure { margin: 0; min-width: 0; }
.sp-feature { width: min(100%, 410px); justify-self: center; }
.sp-photo {
  display: block; position: relative; cursor: zoom-in; background: #e2ddd3;
  outline-offset: 5px;
}
.sp-photo img {
  display: block; width: 100%; height: auto; max-width: 100%;
  object-fit: contain;
}
.sp-expand {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  display: grid; place-items: center; background: #1d2428ed; color: white; font-size: 0;
}
.sp-expand::before {
  content: ""; width: 16px; height: 16px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M12 3h5v5M17 3l-6 6M8 17H3v-5m0 5 6-6'/%3E%3C/svg%3E");
}
.sp-photo:hover .sp-expand, .sp-photo:focus-visible .sp-expand { background: var(--sp-accent); }
.sp-figure figcaption { margin-top: 9px; color: var(--sp-muted); font-size: .96rem; line-height: 1.5; }
.sp-feature figcaption {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--line); margin-top: 12px; padding-top: 9px;
}
.sp-caption-label { color: var(--sp-accent); font-size: .68rem; white-space: nowrap; }

.sp-intro {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .88fr);
  align-items: end; gap: clamp(32px, 5vw, 72px); margin-bottom: clamp(28px, 3vw, 42px);
}
.sp-intro p, .sp-panel > p:not(.sp-dateline), .sp-organiser > div > p:not(.sp-kicker),
.sp-records article > p:not(.sp-dateline), .sp-section-note {
  margin: 0; font-size: 1.04rem; line-height: 1.65; color: var(--sp-muted);
}
.sp-intro p { max-width: 57ch; }
.sp-panels, .sp-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 50px); }
.sp-dateline {
  margin: 0 0 13px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
  font-size: .89rem; line-height: 1.5; color: var(--sp-muted);
}
.sp-dateline span { color: var(--sp-accent); margin-right: 5px; }
.sp-panel {
  border-top: 2px solid var(--ink); padding-top: 14px; min-width: 0;
  display: flex; flex-direction: column; align-items: stretch;
}
.sp-panel h3 { margin: 19px 0 8px; }
.sp-panel .sp-link, .sp-records .sp-link { margin-top: auto; padding-block: 10px; }
.sp-panel > p:not(.sp-dateline) { margin-bottom: 6px; }
.sp-organiser {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(26px, 5vw, 76px); align-items: center;
  border-top: 1px solid var(--line); margin-top: clamp(28px, 3.6vw, 48px); padding-top: clamp(25px, 3.4vw, 44px);
}
.sp-organiser h3 { margin: 12px 0; }
.sp-organiser > div { max-width: 46ch; }
.sp-organiser .sp-link { margin-top: 12px; }

.sp-topics { background: var(--ink); color: var(--paper); }
.sp-topics .sp-edition { border-color: #505a5e; color: #f2a585; }
.sp-topic-layout, .sp-invite-grid {
  display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(32px, 7vw, 100px); align-items: start;
}
.sp-topics .sp-section-note { color: #cdd2d2; max-width: 33ch; margin-top: 16px; }
.sp-theme-list { margin: 0; counter-reset: theme; }
.sp-theme-list > div {
  counter-increment: theme; position: relative; padding: 17px 0 18px 43px;
  border-bottom: 1px solid #505a5e;
}
.sp-theme-list > div:first-child { padding-top: 1px; }
.sp-theme-list > div::before {
  position: absolute; left: 0; top: 19px; color: #f2a585;
  font: 700 .78rem/1.5 Arial, sans-serif; letter-spacing: .08em;
  content: counter(theme, decimal-leading-zero);
}
.sp-theme-list > div:first-child::before { top: 3px; }
.sp-theme-list dt { font: 400 clamp(1.45rem, 2.1vw, 1.9rem)/1.2 var(--sp-serif); letter-spacing: -.025em; }
.sp-theme-list dd { margin: 6px 0 0; line-height: 1.55; color: #cdd2d2; }
.sp-records { margin-top: 28px; }
.sp-records article { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 18px; }
.sp-records h3 { font-size: clamp(1.65rem, 2.35vw, 2.25rem); margin: 4px 0 12px; }
.sp-records .sp-link { padding-top: 16px; }
.sp-attendance { color: var(--sp-muted); border-top: 1px solid var(--line); margin: 24px 0 0; padding-top: 17px; font-size: .95rem; }
.sp-attendance strong { margin-right: 8px; color: var(--ink); }
.sp-invite { background: var(--sp-accent); color: #fffaf2; }
.sp-invite .sp-edition { border-color: #e3a58d; color: #fffaf2; }
.sp-invite h2 { font-size: clamp(3.2rem, 6.4vw, 6rem); }
.sp-invite-copy { align-self: center; }
.sp-invite-copy p { font-size: 1.11rem; max-width: 53ch; margin: 0; }
.sp-email { display: inline-block; margin-top: 19px; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.sp-reverse { background: var(--paper); color: var(--ink); }
.sp-reverse:hover { background: var(--ink); color: #fff; }
.sp-invite .sp-link, .sp-invite .sp-link:hover { color: #fff; }
.sp-invite :is(a, button):focus-visible, .sp-viewer button:focus-visible { outline-color: #ffcf8a; }

.sp-viewer {
  position: fixed; inset: 0; margin: auto;
  width: min(1060px, calc(100vw - 48px)); height: min(92vh, 1000px); height: min(92dvh, 1000px);
  max-width: none; max-height: none; padding: 16px 20px; border: 1px solid #586168;
  background: var(--ink); color: var(--paper);
}
.sp-viewer:not([open]) { display: none; }
.sp-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
.sp-viewer::backdrop { background: rgb(14 18 20 / .89); }
html:has(.sp-viewer[open]) { overflow: hidden; }
.sp-viewer-top, .sp-viewer-foot, .sp-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-viewer-top h2 { margin: 0; font: 400 clamp(1.15rem, 2vw, 1.6rem)/1.2 var(--sp-serif); letter-spacing: -.02em; }
.sp-viewer button, .sp-menu {
  appearance: none; border: 1px solid currentColor; font: 600 .91rem/1.25 Arial, sans-serif;
  background: transparent; color: inherit; cursor: pointer; min-height: 44px; padding: 8px 12px;
}
.sp-close span { font-size: 1.2em; margin-left: 4px; }
.sp-viewer button:hover { background: #354147; }
.sp-viewer-stage { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; background: #141a1c; }
.sp-viewer-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.sp-viewer-foot { align-items: end; }
.sp-count { color: #f2a585; }
#viewer-caption { margin: 3px 0 0; max-width: 75ch; font-size: .98rem; line-height: 1.45; }
.sp-controls { flex: 0 0 auto; gap: 6px; }
.sp-controls button { min-width: 44px; font-size: 1.15rem; }
@media (min-width: 761px) {
  .sp-header nav { grid-template-columns: 1fr auto; padding: 0; }
  .sp-header .navlinks { padding: 0; border: 0; }
}
@media (max-width: 760px) {
  .sp-header nav { grid-template-columns: minmax(0, 1fr) auto; min-height: 59px; gap: 4px 10px; padding-block: 6px; }
  .sp-header .name { font-size: 1rem; }
  .sp-header .name img { width: 30px; height: 30px; }
  .sp-menu:not([hidden]) { display: inline-flex; align-items: center; gap: 7px; border: 0; color: var(--ink); }
  .sp-header .navlinks { grid-column: 1 / -1; width: 100%; flex-wrap: wrap; white-space: normal; gap: 0 19px; padding: 4px 0; }
  .sp-header .navlinks a { padding-block: 9px; }
  .sp-header .sp-menu:not([hidden])[aria-expanded="false"] + .navlinks { display: none; }
}
@media (max-width: 700px) {
  .speaker-page { --sp-gutter: 20px; }
  .sp-mast-grid, .sp-intro, .sp-panels, .sp-organiser, .sp-topic-layout, .sp-records, .sp-invite-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-mast-grid { gap: 27px; }
  .sp-mast h1 { font-size: clamp(3.2rem, 12.3vw, 5.45rem); }
  .sp-feature { justify-self: start; width: min(100%, 430px); }
  .sp-intro, .sp-topic-layout, .sp-invite-grid { gap: 18px; }
  .sp-panels, .sp-records { gap: 32px; }
  .sp-edition { font-size: .7rem; letter-spacing: .09em; }
  .sp-organiser { gap: 17px; }
  .sp-organiser > div { grid-row: 1; }
  .sp-topic-layout h2 br, .sp-invite-grid h2 br { display: none; }
  .sp-theme-list > div:first-child { border-top: 1px solid #505a5e; padding-top: 16px; }
  .sp-theme-list > div:first-child::before { top: 18px; }
  .sp-feature figcaption { gap: 10px; }
  .sp-edition span + span { margin-left: auto; }
  .sp-viewer { width: calc(100vw - 12px); padding: 10px; height: fit-content; max-height: 95vh; max-height: 95dvh; }
  .sp-viewer[open] { grid-template-rows: auto auto auto; }
  .sp-viewer-stage { width: 100%; aspect-ratio: var(--photo-ratio); max-height: calc(95vh - 13rem); max-height: calc(95dvh - 13rem); }
  .sp-viewer-top, .sp-viewer-foot { gap: 8px; }
  .sp-viewer-foot { flex-wrap: wrap; }
  .sp-controls { margin-left: auto; }
  .sp-email { margin-top: 12px; }
  .speaker-page footer .socials { flex-wrap: wrap; }
}
@media (max-height: 450px) {
  .sp-viewer { height: 100vh; height: 100dvh; padding: 5px 11px; }
  .sp-viewer[open] { gap: 4px; grid-template-rows: auto minmax(0, 1fr) auto; }
  .sp-viewer-stage { max-height: none; aspect-ratio: auto; }
  .sp-viewer-foot { flex-wrap: nowrap; }
  #viewer-caption { font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
