:root {
  --ink: #1a1714;
  --paper: #faf7f2;
  --accent: #6d1a2d;
  --rule: #d9d2c7;
  --muted: #6b645b;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;

  --maxw: 1100px;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--accent);
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Claret on ink is 1.56:1 — far under the 3:1 a focus indicator needs. Inside
   the two ink bands the ring reverses to paper (16.7:1). */
.stats :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--paper);
}

/* Skip link: off-screen until focused, then a paper chip over the ink nav */
.skip-link {
  position: fixed;
  left: var(--s3);
  top: var(--s3);
  z-index: 200;
  padding: var(--s2) var(--s3);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Base typography */
body {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.5;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
}

.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant: small-caps;
  color: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

main section {
  scroll-margin-top: 5rem;
}

/* Scroll-reveal utility (progressive enhancement; see js/main.js initReveals()) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  .js [data-reveal-delay="2"] { transition-delay: 0.12s; }
  .js [data-reveal-delay="3"] { transition-delay: 0.24s; }
  .js [data-reveal-delay="4"] { transition-delay: 0.36s; }
  .js [data-reveal-delay="5"] { transition-delay: 0.48s; }
  .js [data-reveal-delay="6"] { transition-delay: 0.6s; }
  .js [data-reveal-delay="7"] { transition-delay: 0.72s; }
}

/* Sticky nav */
.site-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Without JS the hamburger can't open/close the menu and the fixed,
   transparent nav would permanently overlay page content. Fall back to
   an absolutely-positioned, opaque nav that scrolls away with the page. */
.no-js .site-nav {
  position: absolute;
  background: var(--paper);
}

.no-js .nav-toggle {
  display: none;
}

.site-nav.scrolled {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--rule);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s3);
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(var(--s3), 1.8vw, var(--s4));
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-menu a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  color: var(--accent);
}

/* Where am I? Set by initActiveSection() in js/main.js. A claret rule under
   the current section's link — the marking pen, doing what it does elsewhere. */
.nav-menu a[aria-current] {
  color: var(--accent);
  box-shadow: inset 0 -1px 0 0 var(--accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 760px) {
  .nav-toggle {
    display: flex;
  }

  .nav-inner {
    flex-wrap: wrap;
  }

  .nav-menu {
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  /* Without JS the hamburger cannot open/close the menu, so it stays
     visible and stacked; only once .js is present does it become a
     collapsible dropdown panel. */
  .js .nav-menu {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: color-mix(in srgb, var(--paper) 97%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.3s ease, visibility 0s linear 0.3s;
  }

  .js .nav-menu.open {
    max-height: 24rem;
    visibility: visible;
    transition: max-height 0.3s ease, visibility 0s;
  }

  .nav-menu a {
    width: 100%;
    padding: var(--s3) clamp(1.25rem, 5vw, 3rem);
    border-top: 1px solid var(--rule);
  }
}

/* Hero */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--s6) * 2) var(--s6);
  position: relative;
}

.hero-inner {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: var(--s6);
  align-items: center;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.hero-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.hero-credentials {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--muted);
  font-size: 1rem;
}

/* Where he practises: the first question a referring dentist or a patient asks.
   Set in the system's date treatment, directly under the credentials. */
.hero-practice {
  font-family: var(--font-display);
  font-style: italic;
  font-variant: small-caps;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.hero-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  color: var(--ink);
  max-width: 34ch;
  margin-block-start: var(--s2);
}

/* Shared placeholder photo frame (used by hero + about; reuse for Tasks 5-7) */
.figure-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s3);
}

.figure-frame::before {
  content: "";
  position: absolute;
  inset: var(--s3);
  border: 1px solid var(--rule);
}


/* Photo fills the matted area inside the frame, edge-aligned with the inner rule */
.figure-frame img {
  position: absolute;
  inset: var(--s3);
  width: calc(100% - (var(--s3) * 2));
  height: calc(100% - (var(--s3) * 2));
  object-fit: cover;
}

.portrait-img {
  object-position: 50% 18%; /* keep the face in frame within the 4:5 crop */
}

/* Landscape variant for the about/speaking photo */
.figure-frame--wide {
  aspect-ratio: 3 / 2;
}

.scroll-cue {
  position: absolute;
  inset-inline: 0;
  bottom: var(--s5);
  margin-inline: auto;
  width: fit-content;
  color: var(--muted);
  text-decoration: none;
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 760px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-portrait {
    order: -1;
    width: 78vw; /* explicit width: auto margins disable grid stretch, and the absolutely-positioned img gives no fit-content */
    margin-inline: auto;
  }
}

/* Stats band */
.stats {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s6);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s5) var(--s4);
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.stat-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant: small-caps;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}

@media (max-width: 760px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Section pattern: .section, .eyebrow, h2 */
.section {
  padding-block: var(--s6);
}

.section .container {
  position: relative;
}

.section h2 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 400;
  max-width: 22ch;
  margin-block-end: var(--s5);
}

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s6);
  align-items: start;
}

.about-copy p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.65;
}

.about-copy p + p {
  margin-block-start: var(--s3);
}

@media (max-width: 760px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-figure {
    width: min(85vw, 520px); /* explicit width: see .hero-portrait note */
    margin-inline: auto;
  }
}

/* Education timeline */
.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
  width: 2px;
  height: 100%;
}

.timeline::after {
  z-index: 0;
  background: var(--rule);
}

.timeline::before {
  z-index: 1;
  background: var(--accent);
  transform: scaleY(var(--tl-progress, 0));
  transform-origin: top;
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 7rem 1fr;
  column-gap: var(--s4);
  row-gap: var(--s1);
  align-items: baseline;
  padding-inline-start: clamp(2.5rem, 6vw, 3.25rem);
}

.tl-item + .tl-item {
  margin-block-start: var(--s5);
}

.tl-dot {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0.35em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--paper);
}

.tl-year {
  font-family: var(--font-display);
  font-style: italic;
  font-variant: small-caps;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  white-space: nowrap;
}

.tl-body {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.tl-institution {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
}

.tl-credential {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--muted);
}

@media (max-width: 760px) {
  .tl-item {
    grid-template-columns: 1fr;
  }
}

/* Awards */
.award-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.award-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--s4);
  align-items: baseline;
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.3s ease;
}

.award-row:hover {
  background-color: color-mix(in srgb, var(--accent) 4%, var(--paper));
}

.award-year {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--accent);
}

.award-body {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.award-name {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
}

.award-org {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--muted);
}

@media (max-width: 600px) {
  .award-row {
    grid-template-columns: 1fr;
    row-gap: var(--s1);
  }
}

/* Academic appointments */
.appt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s5) var(--s4);
}

.appt-card {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-block-start: var(--s3);
  border-top: 2px solid var(--accent);
}

.appt-role {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
}

.appt-org {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--muted);
}

.appt-years {
  font-family: var(--font-display);
  font-style: italic;
  font-variant: small-caps;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--accent);
  margin-block-start: var(--s2);
}

.appt-past {
  margin-block-start: var(--s6);
}

.appt-past-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant: small-caps;
  color: var(--muted);
  padding-block-end: var(--s2);
  margin-block-end: var(--s2);
  border-bottom: 1px solid var(--rule);
}

.appt-past-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.appt-past-list li {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--muted);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 600px) {
  .appt-grid {
    grid-template-columns: 1fr;
  }
}

/* Publications */
.pub-note {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--muted);
  margin-block: calc(var(--s5) * -1 + var(--s2)) var(--s4);
}


.pub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pub;
  border-top: 1px solid var(--rule);
}

.pub-item {
  position: relative;
  counter-increment: pub;
  padding-block: var(--s4);
  padding-inline-start: clamp(3rem, 9vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
}

.pub-item::before {
  content: counter(pub);
  position: absolute;
  z-index: 0;
  left: 0;
  top: -0.1em;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1;
  color: var(--rule);
  pointer-events: none;
  user-select: none;
}

.pub-cite {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--ink);
}

/* Verification links: a citation title and the board-certification entry lead
   out to the body that can confirm them. Underlined in rule grey so the link
   reads as part of the record rather than as an accent. */
.pub-title,
.verify-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--rule) 30%, var(--muted));
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.pub-title:hover,
.pub-title:focus-visible,
.verify-link:hover,
.verify-link:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.pub-cite strong {
  font-weight: 600;
  color: var(--accent);
}

.pub-cite em {
  font-style: italic;
  color: var(--muted);
}

/* Speaking */
.speaking-intro {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  max-width: 60ch;
  margin-block-end: var(--s5);
}

.lecture-grid {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4) var(--s5);
}

.lecture-card {
  padding-block-start: var(--s3);
  border-top: 2px solid var(--accent);
}

.lecture-year {
  font-family: var(--font-display);
  font-style: italic;
  font-variant: small-caps;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  color: var(--accent);
  margin-block-end: var(--s1);
}

.lecture-event {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
}

.lecture-venue {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--muted);
}

.lecture-topic {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
  margin-block-start: var(--s1);
}

.countries {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-block-start: var(--s4);
  border-top: 1px solid var(--rule);
  font-variant: small-caps;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--muted);
}

.countries li {
  margin-inline-end: 0.5em;
}

.countries li:not(:first-child)::before {
  content: "\00B7";
  color: var(--rule);
  margin-inline-end: 0.5em;
}

@media (max-width: 700px) {
  .lecture-grid {
    grid-template-columns: 1fr;
  }
}

/* Beyond the clinic */
.beyond-copy {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.65;
  max-width: 60ch;
  margin-block-end: var(--s5);
}

/* Contact footer */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s6);
  scroll-margin-top: 5rem;
}

.site-footer .eyebrow {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}

.footer-heading {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;
  color: var(--paper);
  margin-block-end: var(--s5);
}

/* Three even columns -- contact, socials, sites -- across the container. The
   tracks are explicit rather than auto-fit so all three hold their share of
   the width and the footer reads as one balanced row instead of content
   pooling on the left. Collapses to one column on narrow screens. */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5) var(--s6);
  padding-block-end: var(--s5);
  margin-block-end: var(--s5);
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 25%, transparent);
}

.footer-block {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.footer-address {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--paper) 85%, transparent);
}

.footer-email a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
}

.footer-email a:hover,
.footer-email a:focus-visible {
  color: color-mix(in srgb, var(--accent) 60%, var(--paper));
  border-bottom-color: currentColor;
}

.footer-phone a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
}

.footer-phone a:hover,
.footer-phone a:focus-visible {
  color: color-mix(in srgb, var(--accent) 60%, var(--paper));
  border-bottom-color: currentColor;
}

/* Fixed two columns rather than wrapping. Left to flex-wrap, the width of
   the column decided the break: at this measure three pills fitted and
   LinkedIn was orphaned on a row of its own. Two by two keeps the four
   paired whatever the column does, and equal-width tracks stop the pills
   looking like ragged text. */
/* One pill per row. Wrapping left the break to the column's width -- three
   fitted and LinkedIn was orphaned on a row of its own -- and the resulting
   short block left a hole beside the tall contact column. A single column of
   equal-width pills runs to about the height of the address, which is what
   balances the three tracks. */
.footer-social {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--s2);
  max-width: 180px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* comfortable touch target; the pill's own padding gives ~28px */
  padding: var(--s1) var(--s3);
  border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--paper) 85%, transparent);
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.social-link:hover,
.social-link:focus-visible {
  border-color: var(--paper);
  color: var(--paper);
}

/* The two sites hold the third column, stacked, each mark centred over its
   own caption. */
.footer-sites {
  gap: var(--s5);
}

.footer-site {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

/* The only link in .footer-site is the logo itself. It carries no underline:
   the mark is the affordance, and a rule under a lockup reads as part of the
   artwork. Keyboard focus is covered by the global :focus-visible outline,
   which reverses to paper inside the footer. */
.footer-logo-link {
  display: inline-block;
}

/* Both marks are supplied on an identical 3597x1238 canvas: that shared frame
   IS the alignment, sized by the designer so the two A monograms match. Use
   them uncropped -- trimming each to its own artwork rescales them
   independently and the monograms stop matching. One shared CSS width on
   equal canvases therefore keeps the pair in register. Supplied white on
   transparent for this dark footer, so no colour filter is needed. */
.footer-logo {
  width: 170px;
  height: auto;
  display: block;
  margin-inline: auto;
  opacity: 0.92;
  transition: opacity 0.3s ease;
}

.footer-logo-link:hover .footer-logo,
.footer-logo-link:focus-visible .footer-logo {
  opacity: 1;
}

.footer-site-note {
  display: block;
  margin-block-start: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

.footer-fine {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

/* Three fixed tracks need room: below ~900px a third is too narrow to hold a
   170px mark and its caption on one line, so the footer steps down to two
   columns and then to one. */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Print */
@media print {
  /* White-on-transparent logos disappear on paper; print their names instead */
  .footer-logo {
    display: none !important;
  }

  .footer-logo-link::before {
    content: attr(aria-label);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1rem;
  }

  /* A printed record still has to be verifiable */
  .pub-title::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--muted);
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .site-nav,
  .scroll-cue {
    display: none !important;
  }

  .stats,
  .site-footer {
    background: none !important;
  }

  .stats,
  .site-footer,
  .stats *,
  .site-footer * {
    color: var(--ink) !important;
  }

  .stat-num {
    color: var(--accent) !important;
  }
}