@font-face {
  font-family: "Young Serif";
  src: url("/assets/fonts/young-serif-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("/assets/fonts/karla-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("/assets/fonts/karla-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}


  /* Layout: same identity as the homepage; a header, a two-photo row, then the three bios stacked shortest first. */
  :root {
    --bg: #ffffff;
    --fg: #1d1a1c;
    --muted: #6d6569;
    --line: #ece6e8;
    --accent: #FC491D;
    --accent-mid: #FFB8A3;
    --accent-soft: #FFDDD5;
    --display: "Young Serif", Georgia, "Times New Roman", serif;
    --body: "Karla", "Helvetica Neue", Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #161315; --fg: #f3eef0; --muted: #a79da2; --line: #2c2629;
      --accent: #FC491D; --accent-mid: #FFB8A3; --accent-soft: #3a1f17; color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #161315; --fg: #f3eef0; --muted: #a79da2; --line: #2c2629;
    --accent: #FC491D; --accent-mid: #FFB8A3; --accent-soft: #3a1f17; color-scheme: dark;
  }

  body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.65; }

  .wrap {
    max-width: 920px; margin: 0 auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-block: clamp(36px, 7vw, 80px);
    display: flex; flex-direction: column; gap: clamp(44px, 7vw, 72px);
  }

  .back { font-size: .9rem; color: var(--muted); text-decoration: none; }
  .back:hover { color: var(--accent); }

  header { display: flex; flex-direction: column; gap: 10px; }
  .eyebrow { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0; }
  h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 5vw, 3.2rem); line-height: 1.05; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
  .role { margin: 0; color: var(--muted); font-size: 1.05rem; }
  .intro { margin: 6px 0 0; max-width: none; }

  h2 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: 0 0 6px; }
  .section-note { margin: 0 0 22px; color: var(--muted); font-size: .95rem; }

  .photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 28px); }
  figure { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .frame { aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border-radius: 14px; background: var(--accent-soft); }
  .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .frame.headshot img { object-position: 50% 20%; }
  .frame.speaking img { object-position: 50% 25%; }
  figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: .95rem; }
  figcaption strong { font-weight: 700; }
  figcaption a { color: var(--fg); text-decoration-color: var(--accent-mid); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-size: .9rem; }
  figcaption a:hover { color: var(--accent); }

  .bios { display: flex; flex-direction: column; gap: 18px; }
  .bio { border: 1px solid var(--line); border-radius: 14px; padding: 22px clamp(18px, 3vw, 28px); display: flex; flex-direction: column; gap: 12px; }
  .bio-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .bio-head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
  .bio-head h3 span { font-weight: 400; color: var(--muted); font-size: .9rem; margin-left: 6px; }
  .bio-text { max-width: 66ch; }
  .bio-text p { margin: 0 0 1em; }
  .bio-text p:last-child { margin-bottom: 0; }

  button.copy {
    font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer;
    border: 1px solid var(--accent-mid); background: transparent; color: var(--fg);
    border-radius: 999px; padding: 6px 14px; transition: background .2s ease, border-color .2s ease;
  }
  button.copy:hover { background: var(--accent-soft); border-color: var(--accent); }
  button.copy[data-done] { background: var(--accent-soft); border-color: var(--accent); }
  button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .links { display: flex; flex-wrap: wrap; gap: 2px 0; list-style: none; margin: 0; padding: 0; font-size: .95rem; }
  .links li + li::before { content: "·"; color: var(--muted); padding: 0 8px; }
  .links a { color: var(--fg); text-decoration: none; border-bottom: 1px solid transparent; }
  .links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

  footer { color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); padding-top: 20px; }

  @media (max-width: 560px) {
    .photos { grid-template-columns: minmax(0, 1fr); }
  }

body{margin:0}img{max-width:100%}

:root {
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
.press-content { display: flex; flex-direction: column; gap: clamp(44px, 7vw, 72px); min-width: 0; }
.press-content:focus { outline: none; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 8px 14px; background: var(--bg); color: var(--fg); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  button.copy { transition: none; }
}