/* Print styles. Used twice:
   1. Linked with media="print" on the page, Playwright prints it as the full media kit PDF.
   2. Inlined into the one-sheet HTML that scripts/pdf.mjs renders separately. */

body {
  background: var(--porcelain);
  color: var(--navy);
}

/* Never print navigation, buttons or the video player */

.site-header,
.skip-link,
.site-nav,
.btn,
.copy-btn,
.topics-cta,
.section-cta,
.contact-actions,
#top-sentinel,
.video-frame video,
.video-frame iframe {
  display: none !important;
}

/* The reveal animation must not leave anything invisible in the PDF:
   Playwright prints the page after scripts have run */

.will-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* The dark video field stays a light block in print */

.section-video {
  background: none !important;
  color: var(--navy) !important;
  padding-block: 14pt;
  margin: 0;
}

.section-video .overline,
.video-frame figcaption {
  color: var(--navy) !important;
  text-align: left;
}

/* The static frame that replaces the video in print */

.print-only {
  display: block !important;
}

.video-print-note {
  font-size: 9pt;
  margin-top: 6pt;
}

/* Print typography */

body {
  font-size: 10.5pt;
  line-height: 1.5;
}

.section,
.contact {
  padding-block: 14pt;
}

h1 {
  font-size: 24pt;
}

h2 {
  font-size: 15pt;
  margin-bottom: 10pt;
}

h3 {
  font-size: 11.5pt;
}

/* Cover: name, round portrait, credentials ladder, caption, then the
   stats field right below. Everything centered, no dead air. */

.hero {
  padding-bottom: 6pt;
}

.hero-print-name {
  font-family: var(--font-serif);
  font-size: 26pt;
  font-weight: 500;
  text-align: center;
  margin: 4pt 0 2pt;
  max-width: none;
}

.hero-copy {
  padding: 0 !important;
  text-align: center;
}

.hero .hero-credentials {
  font-size: 9pt;
  line-height: 1.7;
  margin: 0 0 6pt;
}

.hero .hero-tagline {
  font-size: 16pt;
  line-height: 1.35;
  margin: 0 auto 6pt;
  max-width: 24em;
}

.hero-sep + .hero-cred-part::before {
  margin: 4pt auto;
}

.hero .subhead {
  font-size: 12pt;
  margin: 0 auto 10pt;
}

.quote-featured blockquote {
  font-size: 14pt;
}

.stat-value {
  font-size: 16pt;
}

/* Objects that never split: a quote stays with its author, a stat pair,
   a download row, the whole gallery grid, the colored stats field, the
   large About lead. Topic cards may split between paragraphs instead of
   leaving a third of a page empty. */

.quote-featured,
.quote-small,
.bio-block,
.fact-row,
.stat,
.dl-row,
.gallery-grid,
.about-copy .lead,
.proof {
  break-inside: avoid;
}

/* Print flow: normal, readable spacing. The page count is whatever it is;
   the only hard rules are that a heading never separates from its text,
   there are no widowed lines, and the footer never prints alone. */

p {
  orphans: 2;
  widows: 2;
}

.bio-block {
  padding-block: 12pt;
}

.contact {
  padding-block: 12pt;
}

.contact .overline {
  margin-bottom: 8pt;
}

.bio-block:last-child {
  padding-bottom: 12pt;
}

.contact-print p {
  font-family: var(--font-serif);
  font-size: 12pt;
  margin: 0 0 3pt;
  max-width: none;
}

.dl-row {
  padding-block: 8pt;
}

.contact,
.site-footer {
  break-inside: avoid;
}

.site-footer {
  padding-block: 8pt;
  break-before: avoid;
}

h2,
h3 {
  break-after: avoid;
}

.todo,
.img-placeholder,
.stat,
.hero-sep + .hero-cred-part::before,
.proof,
.avatar-initials {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* The aubergine stats field keeps its color in the PDF and never splits */

.proof {
  padding: 14pt;
  margin: 0 0 12pt;
}

/* In print the press kit keeps the download list but not a second copy
   of the biography (About is the only place it prints) */

.print-no-bio .bio-block {
  display: none !important;
}

.gallery-item,
.faq-item {
  break-inside: avoid;
}

/* Keep large media on one printed page */

.img-placeholder {
  break-inside: avoid;
  max-height: 100mm;
  min-height: 50mm;
}

.about-media {
  position: static !important;
}

.hero-media img,
.about-media img {
  max-height: 110mm;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  break-inside: avoid;
  /* the arch stays a screen treatment, print keeps plain rectangles */
  border-radius: 0 !important;
  outline: none !important;
}

.photos-arch .hero-media,
.photos-arch .about-media,
.photos-circle .hero-media,
.photos-circle .about-media {
  padding: 0 !important;
  display: block;
}

/* The cover portrait is the same circle as everywhere else */

.photos-circle .hero-media {
  display: block;
}

.photos-circle .hero-media img {
  border-radius: 50% !important;
  outline: 1px solid var(--gold) !important;
  outline-offset: 4mm;
  width: 78mm !important;
  height: 78mm !important;
  aspect-ratio: 1 / 1 !important;
  max-height: none !important;
  object-fit: cover;
  object-position: 58% 16%;
  margin: 6mm auto 7mm;
  break-inside: avoid;
}

/* The About portrait prints as the same circle as on screen,
   gold keyline included */

.photos-circle .about-media img {
  border-radius: 50% !important;
  outline: 1px solid var(--gold) !important;
  outline-offset: 4mm;
  width: 70mm !important;
  height: 70mm !important;
  aspect-ratio: 1 / 1 !important;
  max-height: none !important;
  object-fit: cover;
  object-position: 50% 22%;
  margin: 6mm auto;
  break-inside: avoid;
}

a {
  color: var(--navy);
}

/* ============================================================
   One-sheet: a single A4 page rendered from its own template
   ============================================================ */

body.one-sheet {
  font-family: var(--font-sans);
  font-size: 9.5pt;
  line-height: 1.45;
  margin: 0;
  background: var(--porcelain);
  color: var(--navy);
}

.one-sheet .os-header {
  border-bottom: 2pt solid var(--gold);
  padding-bottom: 10pt;
  margin-bottom: 12pt;
}

.one-sheet h1 {
  font-family: var(--font-serif);
  font-size: 22pt;
  font-weight: 600;
  margin: 0 0 4pt;
}

.one-sheet .os-positioning {
  font-family: var(--font-serif);
  font-size: 11.5pt;
  color: var(--aubergine);
  margin: 0 0 4pt;
}

.one-sheet .os-sep {
  color: var(--gold);
  margin: 0 0.35em;
}

.one-sheet .os-tagline {
  font-family: var(--font-serif);
  font-size: 12pt;
  color: var(--navy);
  margin: 2pt 0 4pt;
}

.one-sheet .os-meta {
  font-size: 8.5pt;
  margin: 0;
}

.one-sheet h2 {
  font-family: var(--font-sans);
  font-size: 8.5pt;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aubergine);
  margin: 0 0 6pt;
}

.one-sheet section {
  margin-bottom: 12pt;
  break-inside: avoid;
}

.one-sheet .os-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8pt 24pt;
}

.one-sheet .os-stat-value {
  font-family: var(--font-serif);
  font-size: 15pt;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  line-height: 1.2;
}

.one-sheet .os-stat-label {
  font-size: 8.5pt;
}

.one-sheet .os-topic {
  margin-bottom: 8pt;
}

.one-sheet .os-topic h3 {
  font-family: var(--font-serif);
  font-size: 11pt;
  font-weight: 600;
  margin: 0 0 2pt;
}

.one-sheet .os-topic p {
  margin: 0 0 2pt;
}

.one-sheet .os-topic .os-format {
  font-size: 8.5pt;
  color: var(--navy);
}

.one-sheet .os-quote {
  border-left: 2.5pt solid var(--aubergine);
  padding-left: 10pt;
  margin: 0;
}

.one-sheet .os-quote blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 10.5pt;
  margin: 0 0 4pt;
}

.one-sheet .os-quote figcaption {
  font-size: 8.5pt;
}

.one-sheet .os-contact {
  border-top: 1pt solid var(--warm-grey);
  padding-top: 10pt;
}

.one-sheet .os-contact p {
  margin: 0 0 3pt;
}

.one-sheet .todo {
  background: var(--champagne);
  border: 0.75pt dashed var(--gold);
  border-radius: 2pt;
  padding: 0 3pt;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}