/* ═══════════════════════════════════════════════════════════════════
   Robert J. Webb, PA — Las Vegas, Nevada
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted; no third-party requests) ───────────────── */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/instrument-serif-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;                      /* variable: 400/500/600/700 */
  font-display: swap;
  src: url("/assets/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Colour — sampled from the portrait. */
  --ground:  #FBFAF9;
  --ink:     #161F2A;
  --deep:    #123657;
  --mid:     #316C98;
  --steel:   #8EA1AF;
  --camel:   #916846;   /* used exactly three times — see CAMEL 1/2/3 */

  /* --steel-text is --steel darkened along the same hue until it clears
     WCAG AA on the cream ground (4.8:1; #8EA1AF itself is 2.6:1 and fails).
     Used ONLY for small secondary text. Hairlines stay true --steel.
     To use the sampled steel for text as well, set: --steel-text: var(--steel); */
  --steel-text: #5D7383;

  /* Type */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid scale: interpolates smoothly from 375px to 1440px. */
  --t-h1:     clamp(3rem,     2.208rem + 3.380vw, 5.250rem);   /* 48 → 84 */
  --t-lede:   clamp(1.25rem,  1.118rem + 0.563vw, 1.625rem);   /* 20 → 26 */
  --t-h3:     clamp(1.375rem, 1.199rem + 0.751vw, 1.875rem);   /* 22 → 30 */
  --t-body:   clamp(1rem,     0.978rem + 0.094vw, 1.0625rem);  /* 16 → 17 */
  --t-label:  0.8125rem;                                        /* 13 */
  --t-button: 0.875rem;                                         /* 14 */

  /* Space — 8px base */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;

  --rhythm: clamp(80px, 58.87px + 5.634vw, 140px);   /* 80 → 140 */
  --margin: clamp(24px, -2.76px + 7.136vw, 100px);   /* 24 → 100 */
  --measure: 68ch;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
@media (max-width: 699px) { html { scroll-padding-top: 60px; } }
body, h1, h2, h3, p, ul, ol, li, figure, address, form { margin: 0; padding: 0; }
dl, dt, dd, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ── Interaction: colour only, 150ms, and always a visible focus ── */
a, button, input, textarea {
  transition: color 150ms ease-out, background-color 150ms ease-out,
              border-color 150ms ease-out;
}
a { color: var(--mid); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; }
a:hover { color: var(--deep); }

:is(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mid);
  outline-offset: 2px;
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--deep); color: #fff; padding: var(--s2) var(--s3);
  font-size: var(--t-button); font-weight: 600; text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.1em; z-index: 10;
}
.skip-link:focus { left: 0; color: #fff; }

/* ── Shared nav — identical markup in every file ─────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--ground);          /* solid ground: no shadow, no blur */
  border-bottom: 1px solid var(--steel);
  padding-inline: var(--margin);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  height: 72px;
}
.nav__wordmark {
  font-family: var(--sans); font-size: 0.875rem; line-height: 1;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
/* The links row is a flex gap — a fourth item costs nothing to add. */
.nav__links { display: flex; align-items: center; gap: var(--s4); }
.nav__links a {
  font-family: var(--sans); font-size: 0.875rem; line-height: 1;
  font-weight: 500; color: var(--steel-text); text-decoration: none;
}
.nav__links a:hover { color: var(--mid); }

/* Current page: a 1px deep-blue underline, 4px offset.
   Not bold, not a colour change. Driven by body[data-page] so the nav
   markup itself stays byte-identical across the three files. */
body[data-page="about"]   .nav__links a[href="/about/"],
body[data-page="care"]    .nav__links a[href="/care/"],
body[data-page="contact"] .nav__links a[href="/contact/"] {
  text-decoration: underline;
  text-decoration-color: var(--deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

@media (max-width: 699px) {
  .nav__inner { height: 60px; gap: var(--s3); }
  .nav__links { gap: var(--s3); }
  .nav__links a { font-size: 0.8125rem; }
}

/* ── Page head (about, contact) ──────────────────────────────────── */
.page-head {
  padding-inline: var(--margin);
  padding-block: clamp(64px, 40px + 6.4vw, 132px) var(--rhythm);
}
.rule--above { margin-top: 0; margin-bottom: var(--s5); }

/* ── Layout ─────────────────────────────────────────────────────── */
.section, .hero, .slot {
  padding-inline: var(--margin);
  padding-block: 0 var(--rhythm);
}
.hero { padding-block-start: clamp(64px, 40px + 6.4vw, 132px); }
main > :last-child { padding-block-end: var(--rhythm); }

.col-60 { max-width: min(60%, 760px); }
@media (max-width: 899px) {
  .col-60 { max-width: 100%; }
  .rule--wide { width: 100%; }
}

/* 60 / 40 asymmetric split */
@media (min-width: 900px) {
  .hero, .section--split {
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    column-gap: var(--s10);
    align-items: start;
  }
}

/* ── Type ───────────────────────────────────────────────────────── */
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 1.0;
  color: var(--deep);
  /* Instrument Serif 400 is a light face; tracking tightens as it grows
     rather than adding weight the family does not have. */
  letter-spacing: -0.012em;
}
@media (min-width: 768px) { h1 { line-height: 0.95; letter-spacing: -0.022em; } }

.label {
  font-family: var(--sans);
  font-size: var(--t-label);
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--steel-text);
  margin-bottom: var(--s5);
}
.label--place { margin-top: var(--s4); margin-bottom: var(--s4); }
.label a { color: inherit; text-underline-offset: 4px; }
.label a:hover { color: var(--mid); }

/* CAMEL 2 of 3 — the mark before "Where He Practices" */
.label--marked { position: relative; padding-left: var(--s3); }
.label--marked::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 10px; height: 10px; margin-top: -5px;
  background: var(--camel);
}

.positioning {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lede);
  line-height: 1.4;
  max-width: 34ch;
  color: var(--ink);
}

.lead {
  font-family: var(--serif);
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: var(--deep);
  margin-bottom: var(--s4);
  max-width: var(--measure);
}
@media (min-width: 768px) { .lead { line-height: 1.2; } }

p { max-width: var(--measure); }
.section p + p { margin-top: var(--s3); }

.pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-lede);
  line-height: 1.4;
  color: var(--deep);
  margin-top: var(--s6) !important;
  max-width: 46ch;
  hanging-punctuation: first last;   /* optical, not mathematical */
  text-indent: -0.06em;
}

/* ── 1 · Hero ───────────────────────────────────────────────────── */
.rule { border: 0; height: 1px; margin-inline: 0; background: var(--steel); }
/* CAMEL 1 of 3 (hero) and CAMEL 3 of 3 (above "Get in Touch") */
.rule--camel { background: var(--camel); width: 96px; margin-top: var(--s5); }
.rule--wide  { width: min(60%, 760px); margin-bottom: var(--s6); }

.hero__action { margin-top: var(--s8); }

.hero__portrait {
  /* Offset lower so the portrait breaks the hero's baseline. */
  margin-top: clamp(40px, 6vw, 104px);
  width: min(380px, 100%);
}
@media (max-width: 899px) { .hero__portrait { margin-top: var(--s8); } }

.hero__portrait img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--ground);
  /* The photograph fades to white at its bottom edge — no rule there,
     or the hairline would show exactly where the fade stops. */
  border: 1px solid var(--steel);
  border-bottom: 0;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding-inline: var(--s5);
  border-radius: 0; border: 1px solid transparent;
  font-family: var(--sans); font-size: var(--t-button); line-height: 1;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--deep); border-color: var(--deep); color: #fff; }
.btn--primary:hover { background: var(--mid); border-color: var(--mid); color: #fff; }
.btn--secondary { background: transparent; border-color: var(--steel); color: var(--ink); }
.btn--secondary:hover { border-color: var(--mid); color: var(--mid); }
@media (max-width: 767px) { .btn { min-height: 48px; width: 100%; } }

/* ── 3 · The Path ───────────────────────────────────────────────── */
.path__item + .path__item { margin-top: var(--s5); }
.path__date {
  display: block;
  font-size: 0.8125rem; line-height: 1; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--steel-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s1);
}
@media (min-width: 900px) {
  .path__item { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--s4); }
  .path__date { margin-bottom: 0; padding-top: 0.45em; }
}
.path__body { max-width: var(--measure); }

/* Home: the three-line summary. The full sequence lives on /about/. */
.more { margin-top: var(--s5); }
.more a { font-weight: 500; }

/* ── Image slots ────────────────────────────────────────────────── */
.slot__box {
  background: #F1EFEC;
  border: 1px solid var(--steel);
}
.slot__box--wide   { width: 100%; aspect-ratio: 3 / 2; }
.slot__box--square { width: 240px; height: 240px; }
@media (max-width: 899px) { .slot__box--square { margin-top: var(--s6); } }

/* ── 5 · Clinical Focus ─────────────────────────────────────────── */
.focus { border-top: 1px solid var(--steel); }
.focus__item { border-bottom: 1px solid var(--steel); padding-block: var(--s4); }
.focus__name {
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.4;
  font-weight: 600; color: var(--ink); margin-bottom: var(--s1);
}
.focus__note { color: var(--ink); max-width: var(--measure); }

.care__intro { margin-bottom: var(--s6); }

/* ── Credentials (about) ─────────────────────────────────────────── */
/* A quiet definition list: section-label style on the terms, body Inter
   on the values, hairlines between rows. No icons, badges, or cards. */
.creds__row { padding-block: var(--s3); }
.creds__row + .creds__row { border-top: 1px solid var(--steel); }
.creds__label { margin-bottom: var(--s1); }
.creds__value { max-width: var(--measure); }
@media (min-width: 900px) {
  .creds__row {
    display: grid; grid-template-columns: 200px minmax(0, 1fr);
    column-gap: var(--s4); align-items: baseline;
  }
  .creds__label { margin-bottom: 0; }
}

/* ── References (about) ──────────────────────────────────────────── */
/* Hairline above the group; no quotation-mark graphics, no photos,
   no cards, no carousel. */
.refs__note {
  font-size: 0.8125rem; line-height: 1.6; color: var(--steel-text);
  margin-bottom: var(--s4);
}
.refs { margin-top: var(--s6); }
/* 48px between quotes against 24px from a quote to its own attribution:
   a 2:1 ratio, so a one-line quote still reads as part of the pair
   rather than floating on its own. */
.quote + .quote { margin-top: var(--s6); }
.quote__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: var(--deep);
  max-width: 46ch;
  hanging-punctuation: first last;
  text-indent: -0.06em;
}
@media (min-width: 768px) { .quote__text { line-height: 1.2; } }
.quote__by {
  font-family: var(--sans); font-size: var(--t-label); line-height: 1;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--steel-text);
  margin-top: var(--s3);
}

/* ── 7 · Where He Practices ─────────────────────────────────────── */
.clinic__name {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.008em;
  color: var(--deep); margin-bottom: var(--s4);
}
@media (min-width: 768px) { .clinic__name { line-height: 1.2; } }

.clinic__site { padding-block: var(--s3); border-top: 1px solid var(--steel); }
.clinic__site:last-child { border-bottom: 1px solid var(--steel); }
.clinic__place {
  display: block; font-size: var(--t-label); line-height: 1; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--steel-text);
  margin-bottom: var(--s2);
}
.clinic address { font-style: normal; line-height: 1.7; }
.clinic__hours { margin-top: var(--s4); }
.clinic__note  { margin-top: var(--s2); color: var(--ink); }

/* Home: condensed — place and address share a line, on the same
   120px column as The Path. */
@media (min-width: 900px) {
  .clinic--brief .clinic__site {
    display: grid; grid-template-columns: 120px minmax(0, 1fr);
    column-gap: var(--s4); align-items: baseline;
  }
  .clinic--brief .clinic__place { margin-bottom: 0; }
}

.cta__action { margin-top: var(--s4); }

/* ── 8 · Form ───────────────────────────────────────────────────── */
.field { margin-bottom: var(--s4); }
.field label {
  display: block;
  font-family: var(--sans); font-size: var(--t-label); line-height: 1;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink); margin-bottom: var(--s2);
}
.field .req { color: var(--steel-text); font-weight: 500; letter-spacing: 0.06em; }

.field input, .field textarea {
  display: block; width: 100%;
  padding: 14px var(--s2);
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--steel); border-radius: 0;
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.5;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field textarea:hover { border-color: var(--mid); }
.field input:focus-visible, .field textarea:focus-visible {
  border-color: var(--mid);   /* 2px read: 1px border + 2px ring at 2px offset */
  outline: 2px solid var(--mid); outline-offset: 2px;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--deep);
}
.field__error {
  margin-top: var(--s1);
  font-size: 0.875rem; line-height: 1.5; font-weight: 500; color: var(--deep);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__disclaimer {
  font-size: 0.875rem; line-height: 1.6; color: var(--steel-text);
  max-width: var(--measure); margin-bottom: var(--s4);
}
.form__status {
  margin-top: var(--s3); padding: var(--s2) 0;
  border-top: 1px solid var(--steel);
  font-size: 0.9375rem; line-height: 1.6; max-width: var(--measure);
}
.form__status--ok   { color: var(--deep); }
.form__status--fail { color: var(--ink); }
.form__status a { font-weight: 600; }

/* ── Shared footer — identical in every file ─────────────────────── */
.footer {
  padding-inline: var(--margin);
  padding-block: var(--s6);
  border-top: 1px solid var(--steel);
  font-size: 0.875rem; line-height: 1.6; color: var(--steel-text);
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s2) var(--s6);
}
.footer__line { max-width: none; }
.footer__links { display: flex; gap: var(--s4); }
.footer__links a {
  color: var(--steel-text); text-decoration: none; font-weight: 500;
}
.footer__links a:hover { color: var(--mid); }