@import url('/assets/fonts/fonts.css');

/* ---------------------------------------------------------------- tokens */
:root {
  /* University of Virginia palette: Jefferson Blue and Rotunda Orange. */
  --brand: #232d4b;
  --brand-700: #1a2138;
  --brand-900: #12172a;
  --brand-500: #3c4c7c;
  --brand-300: #a8b4ce;
  --brand-100: #e9edf4;
  --brand-50: #f4f6fa;

  --accent: #e57200;
  /* Darkened just enough that white button text clears WCAG AA for large text. */
  --accent-strong: #d96a00;
  --accent-ink: #a85400;
  --accent-soft: #fdeedd;

  --ink: #1c2130;
  --ink-soft: #4a5268;
  --ink-mute: #6d7488;

  --bg: #fffefc;
  --sand: #f4f6fa;
  --line: #dde2ec;

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.44rem, 1.32rem + 0.6vw, 1.8rem);
  --step-3: clamp(1.73rem, 1.53rem + 1vw, 2.35rem);
  --step-4: clamp(2.07rem, 1.75rem + 1.6vw, 3.05rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(35, 45, 75, 0.07), 0 2px 8px rgba(35, 45, 75, 0.05);
  --shadow-md: 0 4px 12px rgba(35, 45, 75, 0.09), 0 12px 32px rgba(35, 45, 75, 0.07);

  --wrap: 1140px;
  --measure: 68ch;
  --header-h: 4.5rem;
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
  /* Long clinical terms ("Hyperpigmentation") must hyphenate rather than push
     the page sideways on a narrow phone. */
  overflow-wrap: break-word;
  hyphens: auto;
  color: var(--brand-700);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { text-wrap: pretty; }

a { color: var(--brand); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-ink); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--brand-50);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.12em 0.35em;
  /* A long URL must break rather than push the page sideways on a phone. */
  overflow-wrap: anywhere;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

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

/* ---------------------------------------------------------------- layout */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 780px); margin-inline: auto; }
.section { padding-block: var(--sp-8); }
.section--sand { background: var(--sand); }
.section--tight { padding-block: var(--sp-7); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------------------------------------------------------------- header */
.topbar {
  background: var(--brand-700);
  color: #dceceb;
  font-size: var(--step--1);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-2);
  text-align: center;
}
.topbar a { color: #fff; font-weight: 500; }
.topbar a:hover { color: var(--brand-300); }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 251, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.brand__logo {
  display: block;
  height: 2.6rem;
  width: auto;
  flex: none;
  border-radius: 6px;
}
.brand__sub {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--line);
}

.nav { display: flex; align-items: center; gap: var(--sp-5); }
.nav__list { display: flex; gap: var(--sp-5); list-style: none; padding: 0; }
.nav__list a {
  text-decoration: none;
  font-weight: 500;
  color: var(--ink-soft);
  padding-block: var(--sp-2);
  position: relative;
  white-space: nowrap;
}
.nav__list a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.18s ease;
}
.nav__list a:hover, .nav__list a[aria-current='page'] { color: var(--brand-700); }
.nav__list a:hover::after, .nav__list a[aria-current='page']::after { transform: scaleX(1); }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  color: var(--brand-700);
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.72em 1.5em;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--step-0);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px; /* comfortable mobile tap target */
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--brand-700); color: #fff; box-shadow: var(--shadow-md); }
.btn--ghost { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn--ghost:hover { background: var(--brand-50); color: var(--brand-700); }
.btn--accent { background: var(--accent-strong); color: #fff; }
.btn--accent:hover { background: var(--accent-ink); color: #fff; }
.btn--sm { padding: 0.5em 1.05em; font-size: var(--step--1); min-height: 38px; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Used by the 404 page. auto-fit keeps it responsive without a breakpoint. */
.link-grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: var(--brand-900);
}
.hero__media { position: absolute; inset: 0; }
/* `<picture>` is display:inline by default, so a percentage height on the image
   has nothing to resolve against and the photo collapses to its intrinsic
   aspect ratio — covering only part of a tall hero. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps the dermatoscope and clinician in frame as the viewport narrows. */
  object-position: 68% 45%;
}
/* The photograph is bright on the left, where the copy sits, so the scrim is
   heaviest there and clears the right side for the image itself. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(18, 23, 42, 0.97) 0%,
      rgba(18, 23, 42, 0.93) 32%,
      rgba(26, 33, 56, 0.66) 56%,
      rgba(35, 45, 75, 0.22) 100%);
}
/* A hairline of Rotunda Orange ties the band to the logo. */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 45%, transparent 100%);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.hero__content { max-width: 42rem; }
.hero__eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.hero h1 { color: #fff; margin-bottom: var(--sp-4); }
.hero__lede { font-size: var(--step-1); color: #d8dfee; margin-bottom: var(--sp-6); max-width: 34rem; }
.hero__lede a { color: #fff; font-weight: 600; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.hero__lede a:hover { color: var(--accent); }
/* On the navy hero a navy button disappears, so the primary CTA turns orange. */
.hero .btn--primary { background: var(--accent-strong); color: #fff; }
.hero .btn--primary:hover { background: var(--accent); color: #fff; }
.hero .btn--ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ----------------------------------------------------------------- cards */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.card p { color: var(--ink-soft); }
.card__icon { color: var(--accent-ink); font-size: 1.5rem; margin-bottom: var(--sp-3); }

.provider-card { text-align: center; }
.provider-card img {
  width: 190px; height: 190px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto var(--sp-4);
  border: 4px solid #fff;
  box-shadow: var(--shadow-md);
}
.provider-card h3 { font-size: var(--step-1); }
.provider-card .credential {
  color: var(--accent-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

/* ------------------------------------------------------- condition index */
.filter-bar { margin-bottom: var(--sp-5); }
.filter-bar input {
  width: 100%;
  max-width: 26rem;
  padding: 0.7em 1em;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.filter-bar input:focus { border-color: var(--brand-300); }

.topic-list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.topic-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  font-weight: 500;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.topic-list a:hover { border-color: var(--brand-300); transform: translateX(3px); color: var(--brand-700); }
.topic-list a::after { content: '\2192'; color: var(--brand-300); }
.topic-group h3 {
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.topic-group + .topic-group { margin-top: var(--sp-6); }
.is-hidden { display: none !important; }

/* ----------------------------------------------------------------- prose */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--step-1); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--sp-2); }
.prose strong { color: var(--brand-700); font-weight: 600; }
.prose figure { margin-block: var(--sp-6); }
.prose figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); width: 100%; }
.prose figcaption {
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  color: var(--ink-mute);
  text-align: center;
}
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  color: var(--ink-soft);
  font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--sp-7); }

/* ------------------------------------------------------------ provider bio */
.bio-head { margin-bottom: var(--sp-6); }
.prose .bio-head figure { margin: 0 0 var(--sp-5); }
.bio-head__portrait img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.bio-head__welcome {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.32;
  color: var(--brand-700);
}
.bio-head__welcome + p { margin-top: var(--sp-4); color: var(--ink-soft); }

@media (min-width: 720px) {
  .bio-head { display: grid; grid-template-columns: 250px 1fr; gap: var(--sp-6); align-items: start; }
  .prose .bio-head figure { margin: 0; }
}

/* Credential list. Each row is a labelled block so the entries stay distinct
   rather than collapsing into one run-on paragraph. */
.cv { margin-top: var(--sp-5); }
.cv__row { padding-block: var(--sp-4); border-top: 1px solid var(--line); }
.cv__row:last-child { border-bottom: 1px solid var(--line); }
.cv dt {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--sp-3);
}
.cv dd {
  margin: 0;
  color: var(--ink-soft);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem var(--sp-4);
  align-items: baseline;
}
.cv dd + dd { margin-top: var(--sp-3); }
.cv__where {
  grid-column: 1 / -1;
  color: var(--ink-mute);
  font-size: var(--step--1);
}
.cv__when {
  color: var(--ink-mute);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Label in the first column, every entry stacked in the second. Without
   explicit placement the second and later <dd>s wrap back under the label. */
@media (min-width: 720px) {
  .cv__row { display: grid; grid-template-columns: 12rem 1fr; column-gap: var(--sp-5); row-gap: var(--sp-3); }
  .cv dt { grid-column: 1; grid-row: 1; margin-bottom: 0; padding-top: 0.15rem; }
  .cv dd { grid-column: 2; }
  .cv dd + dd { margin-top: 0; }
}

/* The date needs the full width back before the description gets too narrow. */
@media (max-width: 460px) {
  .cv dd { grid-template-columns: 1fr; }
}

.page-head { background: var(--sand); border-bottom: 1px solid var(--line); padding-block: var(--sp-7); }
.page-head p { color: var(--ink-soft); max-width: var(--measure); margin-top: var(--sp-3); }

/* On the narrowest phones a long single-word clinical term ("Hyperpigmentation")
   is wider than the content box at --step-4, forcing an ugly mid-word break.
   One step down fits it whole and reads better at this size regardless. */
@media (max-width: 380px) {
  h1 { font-size: var(--step-3); }
}

.breadcrumb { font-size: var(--step--1); color: var(--ink-mute); margin-bottom: var(--sp-3); }
.breadcrumb a { color: var(--ink-mute); }
.breadcrumb a:hover { color: var(--accent-ink); }

/* --------------------------------------------------------------- contact */
.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.info-card h3 { font-size: var(--step-1); margin-bottom: var(--sp-4); }
.info-row { display: flex; gap: var(--sp-3); padding-block: var(--sp-3); border-top: 1px solid var(--line); }
.info-row:first-of-type { border-top: 0; padding-top: 0; }
.info-row dt { font-weight: 600; color: var(--brand-700); min-width: 5.5rem; flex: none; }
.info-row dd { margin: 0; color: var(--ink-soft); }

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.hours th { font-weight: 500; color: var(--ink-soft); }
.hours td { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours .is-closed { color: var(--ink-mute); }

.callout {
  background: var(--brand-50);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
}
.callout--warn { background: var(--accent-soft); border-left-color: var(--accent); }
.callout p + p { margin-top: var(--sp-3); }

.cta-band { background: var(--brand); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: var(--sp-3); }
.cta-band p { color: #cfe3e2; max-width: 38rem; margin: 0 auto var(--sp-5); }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn--ghost { border-color: rgba(255, 255, 255, 0.65); color: #fff; }
.cta-band .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.cta-band .btn--primary { background: #fff; color: var(--brand-700); }
.cta-band .btn--primary:hover { background: var(--sand); color: var(--brand-700); }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--brand-700); color: #c5dbda; padding-block: var(--sp-7) var(--sp-5); }
.footer h2, .footer h3 { color: #fff; font-size: var(--step-0); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.footer a { color: #dceceb; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.footer__bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  font-size: var(--step--1);
  color: #9dbcba;
}

/* -------------------------------------------------------------- mobile */
/* The horizontal nav needs roughly 980px to lay out five links plus the CTA
   on one line; below that it collapses to the drawer. */
@media (max-width: 980px) {
  .nav__toggle { display: inline-flex; align-items: center; gap: var(--sp-2); }

  /* Anchored to the header itself, so the panel sits directly beneath the bar
     whether or not the topbar has scrolled away. A percentage translate is
     relative to the panel's own height, so a short menu never cleared the
     header and its last item peeked above the bar — hide it outright instead. */
  .nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: var(--sp-3) 0 var(--sp-5);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .nav__list[data-open='true'] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__list a {
    display: block;
    padding: var(--sp-4) 1.25rem;
    font-size: var(--step-1);
  }
  .nav__list a::after { display: none; }

  .nav > .btn { display: none; }
  .nav__list .nav__cta { padding-inline: 1.25rem; padding-top: var(--sp-4); }
  /* `.nav__list a` is more specific than `.btn--primary`, so restate the
     button's own colours here or the label renders as dark body text. */
  .nav__list .nav__cta .btn {
    width: 100%;
    color: #fff;
    padding-block: var(--sp-3);
  }
  .nav__list .nav__cta .btn:hover { color: #fff; }
}

@media (min-width: 981px) {
  .nav__list .nav__cta { display: none; }
}

@media (max-width: 980px) {
  /* Copy spans the full width here, so the scrim has to cover the whole frame.
     Eased off through the middle so the photograph still reads behind the text
     while white type stays well clear of AA contrast. */
  .hero::before {
    background:
      linear-gradient(180deg,
        rgba(18, 23, 42, 0.88) 0%,
        rgba(18, 23, 42, 0.80) 45%,
        rgba(18, 23, 42, 0.90) 100%);
  }
  .hero__media img { object-position: 62% 40%; }
}

@media (max-width: 560px) {
  .provider-card img { width: 150px; height: 150px; }
  .btn-row .btn { width: 100%; }
  .topbar__inner { gap: var(--sp-1) var(--sp-4); }
}

/* The locality tag is the first thing to give up when the header gets tight. */
@media (max-width: 1100px) {
  .brand__sub { display: none; }
}

/* Touch targets. Line-height alone leaves these links around 16–22px tall,
   which is well under the 44px a fingertip needs — and the phone number is the
   primary action on a phone. Buttons already clear this on their own padding. */
@media (max-width: 980px) {
  .topbar a,
  .footer ul a,
  .info-row dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .topbar__inner { padding-block: 0; }
  .footer ul { gap: 0; }
  .footer__bottom a { display: inline-block; padding-block: var(--sp-3); }
}

@media print {
  .header, .topbar, .footer, .cta-band, .nav { display: none; }
  body { color: #000; background: #fff; }
}