@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2');
}

/* Color tokens and base typography for drgalvanimd.com.
   Layout-specific styles live in the next sections. */
:root {
  --ink: #0f2740;
  --muted: #5a6878;
  --surface: #ffffff;
  --chip: #f1f5fb;
  --chip-border: #dfe7f0;
  --accent: #2c7a7b;          /* clinical teal — links + focus ring */
  --page: #e6e9ee;            /* desk-surface gray (base) */
  --page-grad: #c8cdd4;       /* darker shade for top of radial gradient */
  --frame: #f5f7fb;           /* passe-partout off-white */
  --frame-border: rgba(15, 39, 64, 0.07);
  --shadow-card: 0 1px 3px rgba(15, 39, 64, 0.06),
                 0 14px 32px rgba(15, 39, 64, 0.10),
                 0 38px 80px rgba(15, 39, 64, 0.08);
  --shadow-hover: 0 6px 18px rgba(15, 39, 64, 0.10);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1500px 1100px at 50% -10%, var(--page-grad) 0%, rgba(230,233,238,0) 60%),
    var(--page);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; }

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

h1 {
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}

p { margin: 0 0 14px; }

/* Desktop layout — applies at all widths; mobile media query overrides below.
   <main> renders as a solid white card (the "business card") sitting on the
   gray surface. Top/bottom margin lets the gray show through. */
main {
  max-width: 920px;
  margin: 56px auto;
  padding: 24px 48px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

main > header {
  animation: fade-down 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.card {
  animation: fade-up 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 180ms both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

main > header { text-align: center; margin-bottom: 32px; }

h1 { font-size: 40px; }

.subtitle {
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px 32px;
  align-items: start;
}

/* Buttons sit in a footer row spanning both card columns, centered as a
   group with a tight 10px gap between them. */
.card nav {
  grid-column: 1 / -1;
  justify-content: center;
  margin-top: 4px;
}

/* Photo sits in a passe-partout: off-white inner frame with a hairline
   border. The card itself carries the ambient shadow, so the photo is flat
   against its mat. */
.card figure {
  margin: 0;
  padding: 12px;
  background: var(--frame);
  border-radius: 8px;
  border: 1px solid var(--frame-border);
}

.card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 4px;
}

.card section p {
  font-size: 19px;
  line-height: 1.55;
  margin-bottom: 14px;
  text-align: justify;
  hyphens: auto;
  /* Pretty wrapping balances all line breaks together (instead of greedy
     left-to-right) so justified lines don't end up with huge word gaps
     when a long word like @drgalvanimd lands near the margin. */
  text-wrap: pretty;
  /* Fallback for engines without text-wrap: pretty support (e.g. older
     Chromium / Brave): allow long words to break instead of pushing the
     previous line into a stretched-out justification. */
  overflow-wrap: break-word;
}

.card section p:last-of-type { margin-bottom: 0; }

/* The anchor's content (@drgalvanimd) is otherwise treated as a single
   unbreakable token. overflow-wrap: anywhere lets the engine break inside
   it when nothing else helps the line fit. */
.card section p a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.card nav {
  display: flex;
  gap: 15px;
  flex-wrap: nowrap;
}

.card nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: var(--chip);
  color: var(--ink);
  border: 1px solid var(--chip-border);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.card nav a:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
  border-color: var(--ink);
}

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

.card nav a.email { background: var(--ink); color: #ffffff; border-color: var(--ink); }
.card nav a.email:hover { background: #163252; border-color: #163252; }

@media (prefers-reduced-motion: reduce) {
  main > header, .card { animation: none; }
  .card nav a, .card nav a:hover { transition: none; transform: none; }
}

/* SVG icons inside nav buttons — defensively block flex-shrink and override
   the global `img, svg { max-width: 100% }` that can collapse intrinsic
   sizing in flex containers. */
.card nav a svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-block;
  max-width: none;
}

.card nav a span { line-height: 1; }

/* Mobile layout — single column, photo full width and cropped to top 2/3,
   icon-only nav buttons sized for touch but compact enough to fit. */
@media (max-width: 720px) {
  main {
    margin: 16px;
    padding: 12px 22px;
    border-radius: 14px;
  }

  main > header { margin-bottom: 8px; }

  h1 { font-size: 26px; letter-spacing: -0.4px; }

  .subtitle { font-size: 16px; margin-top: 4px; }

  .card { grid-template-columns: 1fr; gap: 0; }

  /* Photo passe-partout is 75% of column width, centered. Photo fills the
     matboard interior. */
  .card figure {
    margin: 0 auto 12px;
    width: 75%;
    padding: 8px;
  }

  .card img {
    width: 100%;
    aspect-ratio: 9 / 8;
    object-fit: cover;
    object-position: center top;
  }

  .card section p { font-size: 17px; line-height: 1.35; margin-bottom: 6px; }

  .card section p:last-of-type { margin-bottom: 0; }

  .card nav {
    margin-top: 14px;
    gap: 8px;
  }

  .card nav a {
    flex: 1;
    justify-content: center;
    padding: 11px 0;
    font-size: 0;
    gap: 0;
    border-radius: 8px;
  }

  .card nav a span { display: none; }

  .card nav a svg { width: 22px; height: 22px; }
}

/* Cookie notice — fixed at viewport bottom, click-through (pointer-events: none),
   fade in/out via the .show / .hide classes. consent.js controls visibility. */
#consent {
  position: fixed;
  inset: auto 16px 16px 16px;
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--chip-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 39, 64, 0.14);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.55;
  z-index: 999;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}
#consent p { margin: 0; }
#consent.show { opacity: 1; transform: translateY(0); }
#consent.hide { opacity: 0; transform: translateY(8px); }
#consent a { pointer-events: auto; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Custom error pages share these styles. */
main.error {
  text-align: center;
  max-width: 560px;
  padding: 64px 48px;
}
main.error h1 { font-size: 36px; }
main.error p { font-size: 16px; line-height: 1.7; margin-bottom: 18px; }
main.error a.back {
  display: inline-block;
  margin-top: 8px;
  padding: 9px 16px;
  background: var(--ink);
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
}
@media (max-width: 720px) {
  main.error { padding: 40px 22px; }
  main.error h1 { font-size: 26px; }
}

/* Privacy/legal pages — narrower text column with full prose styling.
   Inherits the card treatment (white background, radius, shadow) from the
   base `main` selector. */
main.prose {
  max-width: 720px;
  padding: 48px;
}
main.prose h1 { font-size: 36px; margin-bottom: 6px; }
main.prose .lead { color: var(--muted); font-size: 14px; margin: 0 0 28px; }
main.prose h2 { font-size: 18px; font-weight: 600; margin: 28px 0 8px; }
main.prose p { font-size: 15.5px; line-height: 1.7; margin: 0 0 12px; }
main.prose ul { font-size: 15.5px; line-height: 1.7; padding-left: 22px; margin: 0 0 12px; }
main.prose li { margin-bottom: 4px; }
main.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
main.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: var(--chip); padding: 1px 5px; border-radius: 3px; }
main.prose .back-row { margin-top: 32px; }
main.prose a.back {
  display: inline-block;
  padding: 9px 16px;
  background: var(--ink);
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
}
@media (max-width: 720px) {
  main.prose { padding: 28px 22px; }
  main.prose h1 { font-size: 26px; }
  main.prose p, main.prose ul { font-size: 14.5px; }
}