/* Physician patient-education design system.
   Proven on drcrodriguez.com (v40 era) and re-skinned for each client.
   Editorial serif display face (Fraunces) over a workhorse sans (Inter).

   TO RE-SKIN A SITE: change only the six values in the PALETTE block below to
   match site_config.py PALETTE, and swap the two font families. Everything
   else is expressed in terms of these variables. Check body text against the
   paper color for >= 4.5:1 contrast before shipping.

   Single external stylesheet, linked from every page. There is no inline
   <script> and no onclick= anywhere on the site: the Content-Security-Policy
   blocks them. Inline style= attributes are fine. */
:root {
  /* ---- PALETTE (mirror site_config.py PALETTE) ---- */
  --paper: #FCF9F6;
  --paper-deep: #F1E9EA;
  --ink: #221C22;
  --line: #E4D8DA;
  --accent: #6E3450;
  --accent-dark: #4E2239;

  /* ---- derived, rarely changed ---- */
  --ink-soft: #55494F;   /* 8.2:1 on paper */
  --ink-faint: #6F626C;  /* 5.5:1 on paper */
  --line-dark: var(--ink);
  --accent-soft: #B98FA3;
  --gold: #B08948;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --navy: var(--ink);
  --teal: var(--accent);
  --teal-dark: var(--accent-dark);
  --sand: var(--paper-deep);
  --radius: 0px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--sans); background: var(--paper); color: var(--ink);
  line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased;
  overflow-x: hidden; width: 100%;
}
img { max-width: 100%; display: block; }
/* ---------- Mobile overflow safety net ----------
   Grid items default to min-width:auto and refuse to shrink below their widest
   child (e.g. a comparison table), which pushed content past the screen edge on
   phones. Force shrinkable tracks and wrap long words everywhere. */
.cond-layout, .cond-layout > *, article, aside.sidebar, .hero-grid, .hero-grid > *,
.person-grid, .person-grid > *, .two-col-stack, .two-col-stack > * { min-width: 0; }
article p, article li, article h2, article h3, .faq-body, .faq-body *, td, th,
.dt-q, .dt-sub, .short-version li, .callout, .sign p, blockquote, .pull-quote p, .quote-card p {
  overflow-wrap: break-word; word-break: break-word;
}
table, video, iframe { max-width: 100%; }
a { color: var(--accent); text-decoration: none; overflow-wrap: break-word; }
a:hover { color: var(--accent-dark); }
a:visited { color: var(--accent); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }
h1 { font-family: var(--serif); font-weight: 550; font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -0.015em; margin-bottom: 18px; }
h1 em { font-style: italic; font-weight: 400; color: var(--accent-dark); }
h2 { font-family: var(--serif); font-weight: 550; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.12; margin-bottom: 16px; letter-spacing: -0.01em; }
h3 { font-family: var(--serif); font-weight: 550; font-size: 1.3rem; line-height: 1.25; margin-bottom: 10px; }

/* ---------- Reading progress ---------- */
.progress-track { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90; background: transparent; pointer-events: none; }
#readProgress { height: 100%; width: 0; background: var(--accent); }

/* ---------- Utility bar ---------- */
.topbar {
  border-bottom: 1px solid var(--line); background: var(--paper);
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.topbar a { color: var(--ink-faint); }
.tb-right { display: flex; align-items: center; gap: 16px; }
.topbar .phone { color: var(--ink); font-weight: 600; letter-spacing: 0.06em; }
.topbar .phone:hover { color: var(--accent); }

/* ---------- Masthead ---------- */
header.site {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,247,246,0.96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-dark);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.brand .mark { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.15rem; font-weight:600; }
.brand-text { font-family: var(--serif); font-size: 1.22rem; font-weight: 650; line-height: 1.15; display: block; }
.brand-text span {
  display: block; font-family: var(--sans); font-weight: 500;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px;
}
nav.main { display: flex; align-items: center; gap: 24px; font-size: 0.95rem; font-weight: 500; }
nav.main > a:not(.cta-btn), nav.main .dropdown > a { color: var(--ink); padding: 6px 0; position: relative; }
nav.main > a:not(.cta-btn)::after, nav.main .dropdown > a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--accent); transition: width 0.25s ease;
}
nav.main > a:not(.cta-btn):hover::after, nav.main .dropdown:hover > a::after { width: 100%; }
nav.main .dropdown { position: relative; }
nav.main .dropdown-menu {
  display: none; position: absolute; top: 100%; left: -18px; min-width: 290px;
  background: var(--paper); border: 1px solid var(--line-dark); padding: 10px 0;
  box-shadow: 6px 6px 0 rgba(36,28,34,0.08);
}
nav.main .dropdown:hover .dropdown-menu, nav.main .dropdown:focus-within .dropdown-menu { display: block; }
nav.main .dropdown-menu a { display: block; padding: 9px 20px; color: var(--ink); font-size: 0.92rem; }
nav.main .dropdown-menu a:hover { background: var(--paper-deep); color: var(--accent-dark); }
nav.main a.cta-btn, .cta-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--accent); border: 1.5px solid var(--accent); color: #fff; padding: 0 24px; height: 42px; border-radius: 999px;
  font-weight: 600; font-size: 0.86rem; letter-spacing: 0.01em; white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
nav.main a.cta-btn:hover, .cta-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; margin: -10px; z-index: 80; -webkit-tap-highlight-color: transparent; }
.nav-toggle span { display: block; width: 26px; height: 2.5px; background: var(--ink); border-radius: 2px; margin: 5px 0; transition: 0.2s; pointer-events: none; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.nav-overlay { display: none; }

/* ---------- Sections / kickers ---------- */
.section { padding: 84px 0; }
.section.tinted { background: var(--paper-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kicker { display: flex; align-items: baseline; gap: 18px; margin-bottom: 34px; border-top: 2px solid var(--ink); padding-top: 16px; }
.kicker .num { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--accent); }
.kicker .eyebrow, .eyebrow {
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft);
}
.eyebrow { display: block; margin-bottom: 14px; color: var(--accent); }
.kicker .eyebrow { margin-bottom: 0; color: var(--ink-soft); }
.section-lead { max-width: 640px; color: var(--ink-soft); margin-bottom: 40px; font-size: 1.05rem; }

/* ---------- Hero ---------- */
.hero { padding: 74px 0 60px; }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 60px; align-items: center; }
.hero .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; letter-spacing: 0.18em; }
.hero .eyebrow::before { content: ""; width: 34px; height: 1.5px; background: var(--accent); display: inline-block; }
.lead, .hero p.lead { font-size: 1.16rem; color: var(--ink-soft); max-width: 560px; margin-bottom: 30px; }
.btn-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; font-weight: 600; font-size: 0.95rem; }
.btn-primary { background: var(--accent); color: #fff; padding: 0 30px; height: 52px; border-radius: 999px; transition: background 0.2s ease, transform 0.2s ease; }
.btn-primary:hover, .btn-primary:visited:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); }
.btn-primary:visited { color: #fff; }
.btn-outline { border: 1.5px solid var(--ink); color: var(--ink); padding: 0 28px; height: 52px; border-radius: 999px; transition: background 0.2s ease, color 0.2s ease; }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-outline:visited { color: var(--ink); }
.arrow-link { font-weight: 600; color: var(--ink); border-bottom: 1.5px solid var(--accent); padding-bottom: 2px; }
.arrow-link:hover { color: var(--accent-dark); }
.hero-photo { position: relative; }
.hero-photo img, .hero-photo .ph { border: 1px solid var(--line-dark); box-shadow: 14px 14px 0 var(--paper-deep), 14px 14px 0 1px var(--line); }
.hero-photo figcaption { margin-top: 22px; font-size: 0.8rem; color: var(--ink-faint); border-left: 2px solid var(--accent); padding-left: 10px; line-height: 1.5; }

/* ---------- Index list (home condition/topic rows) ---------- */
.index-list { border-top: 1px solid var(--line-dark); }
.index-row {
  display: grid; grid-template-columns: 70px 1fr 360px 30px; gap: 26px; align-items: baseline;
  padding: 26px 8px; border-bottom: 1px solid var(--line); color: var(--ink); transition: background 0.2s ease;
}
.index-row:hover, .index-row:visited { color: var(--ink); }
.index-row:hover { background: #F7EEEE; }
.index-row .idx { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink-faint); }
.index-row:hover .idx { color: var(--accent); }
.index-row h3 { font-size: 1.4rem; margin-bottom: 0; }
.index-row .tag { margin-bottom: 6px; }
.index-row p { font-size: 0.94rem; color: var(--ink-soft); }
.index-row .go { font-size: 1.3rem; color: var(--ink-faint); transition: transform 0.2s ease, color 0.2s ease; }
.index-row:hover .go { transform: translateX(6px); color: var(--accent); }

/* ---------- Credential grid ---------- */
.cred-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.cred-cell { border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); padding: 30px 26px 34px; }
.cred-cell h3 { font-size: 1.35rem; margin-bottom: 12px; }
.cred-cell p { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Quotes ---------- */
.quote-rail, .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.pull-quote, .quote-card { border-top: 2px solid var(--ink); padding-top: 22px; background: transparent; }
.pull-quote p, .quote-card p { font-family: var(--serif); font-size: 1.28rem; font-style: italic; line-height: 1.4; margin-bottom: 16px; color: var(--ink); }
.pull-quote cite, .pull-quote .who, .quote-card .who { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); font-style: normal; display: block; }
.review-note { margin-top: 40px; font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { border-top: 2px solid var(--ink); padding-top: 20px; background: transparent; }
.tag, .card .tag {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--accent-dark); margin-bottom: 10px;
}
.card h3 { font-size: 1.3rem; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--accent-dark); }
.card p { font-size: 0.93rem; color: var(--ink-soft); margin-bottom: 10px; }
.more, .card a.more { font-weight: 600; font-size: 0.92rem; color: var(--accent); }

/* ---------- Article / content pages ---------- */
.cond-hero { padding: 60px 0 40px; border-bottom: 1px solid var(--line); }
.crumbs { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 24px; }
.crumbs a { color: var(--ink-faint); }
.crumbs a:hover { color: var(--accent); }
.cond-hero .lead { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink-soft); max-width: 680px; margin-bottom: 0; }
.cond-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 66px; padding-top: 52px; padding-bottom: 84px; }
article h2, .cond-layout h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem); margin: 50px 0 18px;
  border-top: 2px solid var(--ink); padding-top: 20px;
}
article h2:first-of-type { margin-top: 36px; }
article h3 { margin: 32px 0 12px; }
article p { margin-bottom: 18px; color: var(--ink-soft); max-width: 70ch; }
article p strong { color: var(--ink); }
article ul, article ol { margin: 0 0 20px 22px; color: var(--ink-soft); }
article li { margin-bottom: 10px; }
article li strong { color: var(--ink); }
.checklist { list-style: none; margin-left: 0 !important; }
.checklist li { padding-left: 26px; position: relative; }
.checklist li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.short-version { border: 1px solid var(--line-dark); background: var(--paper); padding: 28px 32px 22px; margin-top: 12px; box-shadow: 8px 8px 0 var(--paper-deep), 8px 8px 0 1px var(--line); }
.short-version h2 { border: none; padding: 0; margin: 0 0 14px; font-size: 1.25rem; font-style: italic; color: var(--accent-dark); }
.short-version ul { margin-left: 20px; }
.short-version li { font-size: 0.96rem; margin-bottom: 8px; color: var(--ink-soft); }
.toc-box { margin: 28px 0 8px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.toc-box .toc-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); margin-right: 14px; }
.toc-box a { font-weight: 600; color: var(--ink); margin-right: 18px; border-bottom: 1.5px solid var(--accent); padding-bottom: 1px; display: inline-block; margin-bottom: 6px; }
.toc-box a:hover { color: var(--accent-dark); }
aside.sidebar .side-box, .sidebar .side-box { border: none; border-top: 2px solid var(--ink); background: transparent; padding: 20px 0 0; margin-bottom: 36px; box-shadow: none; }
.side-box { border: 1px solid var(--line-dark); padding: 30px 32px; background: var(--paper); }
.side-box h3, .side-box h4 { font-family: var(--serif); font-weight: 550; margin-bottom: 14px; }
.side-box h4 { font-size: 1.15rem; }
.side-box p { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 12px; }
.side-box .btn { margin-top: 6px; }
.sidebar a { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.sidebar a:hover { color: var(--accent-dark); border-color: var(--accent); }
.sidebar a.btn-primary { color: #fff; border-bottom: none; }
.callout { background: #F7ECE4; border: 1px solid #E8D0BC; padding: 18px 20px; margin: 20px 0; }
.callout strong { color: var(--ink); }
.callout.rose { background: #F7E7EC; border-color: #E7C0CD; }
.callout.warn { background: #FBEFE0; border-color: #E8CFA6; }

/* ---------- Comparison / data tables ---------- */
.table-scroll { overflow-x: auto; margin: 26px 0 30px; border: 1px solid var(--line-dark); }
table.compare { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.92rem; background: var(--paper); }
table.compare caption { text-align: left; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); padding: 12px 16px; border-bottom: 1px solid var(--line); }
table.compare th, table.compare td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); }
table.compare thead th { background: var(--ink); color: var(--paper); font-family: var(--sans); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.03em; border-bottom: none; position: sticky; top: 0; }
table.compare tbody th { font-family: var(--serif); font-weight: 550; color: var(--ink); background: var(--paper-deep); width: 200px; }
table.compare tbody tr:hover td { background: #F7EEEE; }
table.compare td strong { color: var(--ink); }

/* ---------- Image placeholders ---------- */
figure.fig { margin: 26px 0 30px; }
.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; background: repeating-linear-gradient(45deg, #F3E9E8, #F3E9E8 12px, #EEE1E1 12px, #EEE1E1 24px);
  border: 1px dashed var(--accent-soft); color: var(--accent-dark); min-height: 260px; text-align: center; padding: 24px;
}
.ph .ph-icon { font-size: 2rem; line-height: 1; }
.ph .ph-label { font-family: var(--serif); font-size: 1.1rem; font-weight: 550; }
.ph .ph-note { font-size: 0.82rem; color: var(--ink-soft); max-width: 42ch; }
figure.fig figcaption { margin-top: 10px; font-size: 0.84rem; color: var(--ink-faint); border-left: 2px solid var(--accent); padding-left: 10px; }

/* ---------- Decision tree ---------- */
.dtree-wrap { border: 1px solid var(--line-dark); background: var(--paper); box-shadow: 10px 10px 0 var(--paper-deep), 10px 10px 0 1px var(--line); }
.dtree-head { background: var(--ink); color: var(--paper); padding: 20px 28px; }
.dtree-head .eyebrow { color: var(--accent-soft); margin-bottom: 6px; }
.dtree-head h3 { color: var(--paper); font-size: 1.4rem; margin: 0; }
.dt-card { padding: 32px 30px 34px; }
.dt-progress { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); margin-bottom: 14px; }
.dt-q { font-family: var(--serif); font-size: 1.5rem; font-weight: 550; color: var(--ink); margin-bottom: 8px; line-height: 1.2; }
.dt-sub { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 22px; }
.dt-opts { display: flex; flex-direction: column; gap: 12px; }
.dt-opt {
  font-family: var(--sans); font-size: 1rem; font-weight: 500; text-align: left; cursor: pointer;
  border: 1px solid var(--line-dark); background: var(--paper); color: var(--ink); padding: 15px 18px;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease; display: flex; justify-content: space-between; gap: 12px;
}
.dt-opt:hover { background: var(--ink); color: var(--paper); transform: translateX(3px); }
.dt-opt::after { content: "\2192"; opacity: 0.5; }
.dt-card.dt-result h3 { font-family: var(--serif); font-size: 1.5rem; color: var(--accent-dark); margin-bottom: 12px; }
.dt-card.dt-result p { color: var(--ink-soft); margin-bottom: 14px; }
.dt-card.dt-result .dt-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 6px; }
.dt-card.dt-result .dt-links a { font-weight: 600; font-size: 0.92rem; color: var(--ink); border: 1px solid var(--line-dark); padding: 9px 16px; }
.dt-card.dt-result .dt-links a:hover { background: var(--ink); color: var(--paper); }
.dt-restart { margin-top: 22px; background: none; border: none; color: var(--accent); font-weight: 600; cursor: pointer; font-size: 0.9rem; font-family: var(--sans); padding: 0; }
.dt-restart:hover { color: var(--accent-dark); }
.dt-disclaim { font-size: 0.8rem; color: var(--ink-faint); margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- Self-check / warning-signs list ---------- */
.signs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 26px 0; }
.sign { border: 1px solid var(--line-dark); padding: 18px 20px; background: var(--paper); }
.sign h4 { font-family: var(--serif); font-size: 1.08rem; margin-bottom: 6px; }
.sign p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* ---------- FAQ accordion ---------- */
.faq-cat { font-family: var(--serif); font-size: 1.5rem; margin: 44px 0 8px; padding-top: 20px; border-top: 2px solid var(--ink); }
details.faq-acc { border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
details.faq-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; cursor: pointer; list-style: none; padding: 16px 2px; font-family: var(--serif); font-weight: 550; color: var(--ink); font-size: 1.08rem; }
details.faq-acc summary::-webkit-details-marker { display: none; }
details.faq-acc summary:hover { color: var(--accent-dark); }
.faq-caret { flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--line-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: transform 0.2s ease, background 0.2s ease; }
details.faq-acc[open] .faq-caret { transform: rotate(45deg); background: var(--accent); color: #fff; border-color: var(--accent); }
details.faq-acc .faq-body { padding: 2px 2px 20px; color: var(--ink-soft); font-size: 0.98rem; }
details.faq-acc .faq-body p { margin-bottom: 12px; }
.faq-search { width: 100%; padding: 14px 18px; border: 1px solid var(--line-dark); background: var(--paper); font-family: var(--sans); font-size: 1rem; color: var(--ink); margin-bottom: 8px; }
.faq-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---------- Follow / person ---------- */
/* align-items was `center` until 2026-08-23. The bio column is far taller than
   the portrait, so centring floated the photo down the page and left a large
   dead gap above it, level with the Background heading. Only about.html uses
   this grid, so top alignment is safe here. */
.person-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.person-grid .section-copy p { margin-bottom: 22px; color: var(--ink-soft); font-size: 1.05rem; }
.two-col-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

/* ---------- Reveal on scroll ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.65s ease, transform 0.65s ease; }
html.js [data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Back to top / sticky call ---------- */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; display: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: var(--paper); border: 1px solid var(--accent-dark); cursor: pointer;
  align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22); z-index: 58;
}
.back-to-top.visible { display: flex; }
.back-to-top:hover { background: var(--accent-dark); }
.sticky-call { display: none; }

/* ---------- Footer ---------- */
footer.site { background: var(--ink); color: #D6C9CF; padding: 60px 0 40px; }
footer.site .wrap { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
footer.site h4 { font-family: var(--serif); color: var(--paper); font-weight: 550; font-size: 1.05rem; margin-bottom: 14px; }
footer.site a, footer.site a:visited { color: #D6C9CF; font-size: 0.9rem; line-height: 2; }
footer.site a:hover { color: #fff; }
footer.site p { font-size: 0.9rem; line-height: 1.7; }
footer.site .legal { grid-column: 1 / -1; border-top: 1px solid #43373D; padding-top: 24px; margin-top: 16px; font-size: 0.8rem; color: #9A8D93; }
footer.site .legal .foot-credit { margin-top: 10px; font-size: 0.8rem; color: #9A8D93; }
footer.site .legal .foot-credit a { font-size: inherit; line-height: inherit; text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .person-grid, .two-col-stack { grid-template-columns: 1fr; gap: 44px; }
  .cred-grid { grid-template-columns: 1fr 1fr; }
  .quote-rail, .quote-grid { grid-template-columns: 1fr; gap: 30px; }
  .card-grid, .card-grid-2 { grid-template-columns: 1fr; gap: 26px; }
  .visit-grid, .signs-grid { grid-template-columns: 1fr; }
  .index-row { grid-template-columns: 44px 1fr 30px; }
  .index-row .desc { display: none; }
  .cond-layout { grid-template-columns: 1fr; gap: 40px; }
  footer.site .wrap { grid-template-columns: 1fr 1fr; }
}
/* v1.5.6: the menu button takes over at 1180px instead of 860px. Between
   about 1000px and 1140px the full menu crowded her name onto two or three
   lines in the header. Only the menu rules moved; the other phone rules
   below still start at 860px. */
@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  nav.main {
    display: none; position: fixed; top: 0; right: 0; width: min(86vw, 380px); height: 100vh;
    background: var(--paper); border-left: 1px solid var(--line-dark);
    flex-direction: column; align-items: flex-start; gap: 4px; padding: 84px 26px 40px;
    overflow-y: auto; z-index: 70;
  }
  nav.main.open { display: flex; }
  .nav-overlay.open { display: block; position: fixed; inset: 0; background: rgba(36,28,34,0.45); z-index: 59; }
  nav.main .dropdown { width: 100%; }
  nav.main .dropdown-menu { display: block; position: static; border: none; box-shadow: none; padding: 2px 0 10px 8px; min-width: 0; background: transparent; }
  nav.main .dropdown-menu a { color: var(--ink-soft); font-size: 0.95rem; padding: 8px 4px; }
  nav.main .dropdown > a, nav.main > a:not(.cta-btn) { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); padding: 8px 0; }
  nav.main a.cta-btn { margin-top: 18px; width: 100%; height: 48px; }
}
@media (max-width: 860px) {
  body { padding-bottom: 56px; font-size: 16px; }
  .wrap { padding: 0 22px; }
  .topbar .tb-loc { display: none; }
  .topbar .wrap { justify-content: flex-end; }
  .section { padding: 54px 0; }
  .hero { padding: 40px 0; }
  .lead, .hero p.lead { font-size: 1.05rem; margin-bottom: 26px; }
  .cred-cell { padding: 22px 20px 26px; }
  .cond-hero { padding: 38px 0 30px; }
  .cond-layout { padding-top: 34px; padding-bottom: 52px; }
  article h2, .cond-layout h2 { margin: 38px 0 14px; padding-top: 16px; }
  .back-to-top { bottom: 74px; right: 16px; }
  .sticky-call {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: var(--accent); padding: 13px 18px; justify-content: center;
    box-shadow: 0 -6px 18px rgba(0,0,0,0.15);
  }
  .sticky-call a { color: #fff !important; font-weight: 700; font-size: 1rem; }
  .dt-q { font-size: 1.3rem; }
}
@media (max-width: 560px) {
  footer.site .wrap { grid-template-columns: 1fr; gap: 26px; }
  .cred-grid { grid-template-columns: 1fr; }
}

/* ---------- Glossary: clickable medical terms ---------- */
/* Only a span that carries data-key is ever styled as interactive.
   glossary.js strips .term from any author-marked span it cannot resolve, so
   an underline on this site always means a definition is one click away. */
.term {
  color: inherit; cursor: help; background: none; border: none; padding: 0 1px;
  font: inherit; line-height: inherit; text-decoration: none;
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 calc(100% - 1px);
  transition: background-size .16s ease, color .16s ease;
}
.term:hover, .term:focus {
  color: var(--accent-dark);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 2px;
  outline: none;
}
.term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* No glyph marker after the word: at small sizes a raised bullet reads as a
   stray apostrophe. The two-state underline carries the affordance. */

#glossaryPop {
  position: absolute; z-index: 200; width: min(360px, calc(100vw - 24px));
  background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(34, 28, 34, 0.10);
  padding: 0; font-family: var(--sans); display: none;
}
#glossaryPop.open { display: block; }
#glossaryPop .gp-term {
  font-family: var(--serif); font-weight: 650; font-size: 1.12rem; color: var(--paper);
  background: var(--accent-dark); padding: 12px 44px 12px 18px; line-height: 1.25;
}
#glossaryPop .gp-def {
  font-size: 0.95rem; color: var(--ink); line-height: 1.6; padding: 14px 18px 0;
}
#glossaryPop .gp-more {
  display: inline-block; margin: 12px 18px 14px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
#glossaryPop .gp-close {
  position: absolute; top: 6px; right: 8px; background: none; border: none;
  font-size: 1.5rem; line-height: 1; color: var(--paper); cursor: pointer;
  padding: 4px 8px; opacity: .8;
}
#glossaryPop .gp-close:hover { opacity: 1; }

/* ---------- Glossary index page ---------- */
.glossary-body { max-width: 62rem; margin: 0 auto; padding-bottom: 20px; }

.gx-controls {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper); border-bottom: 1px solid var(--ink);
  padding: 18px 0 12px; margin-bottom: 28px;
}
.gx-search-label {
  display: block; font-size: 0.72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-faint); margin-bottom: 6px;
}
.gx-search {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--paper-deep); border: 1px solid var(--line-dark);
  padding: 13px 15px; min-height: 48px;
}
.gx-search::placeholder { color: var(--ink-faint); }
.gx-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.gx-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.gx-chip {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600; cursor: pointer;
  padding: 7px 12px; min-height: 36px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-dark);
}
.gx-chip .gx-n { font-size: 0.72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.gx-chip:hover { background: var(--paper-deep); }
.gx-chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gx-chip.is-on .gx-n { color: var(--paper); opacity: .7; }
.gx-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gx-rail { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 12px; }
.gx-rail a, .gx-rail .gx-off {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; font-size: 0.76rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.gx-rail a:hover { background: var(--accent); color: var(--paper); }
.gx-rail a.is-dim { color: var(--line-dark); pointer-events: none; }
.gx-rail .gx-off { color: var(--line); }

.gx-count {
  margin-top: 10px; font-size: 0.8rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.gx-group { margin-bottom: 34px; scroll-margin-top: 210px; }
.gx-group[hidden] { display: none; }
.gx-letter {
  font-family: var(--serif); font-size: 2rem; font-weight: 650; color: var(--accent);
  line-height: 1; margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.gx-cards { display: block; }
.gx-card {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) 1fr;
  gap: 4px 32px;
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  scroll-margin-top: 220px;
}
.gx-card[hidden] { display: none; }
.gx-card:last-child { border-bottom: none; }
.gx-card.is-target {
  background: var(--paper-deep);
  padding-left: 16px; padding-right: 16px;
  border-left: 3px solid var(--accent);
  border-bottom-color: var(--paper-deep);
}
.gx-head { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.gx-head h3 {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 650; color: var(--ink);
  line-height: 1.22; margin: 0; text-wrap: balance;
}
.gx-tag {
  font-size: 0.6rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; padding: 3px 7px; white-space: nowrap;
  border: 1px solid currentColor; color: var(--ink-faint);
}
.gx-tag-anatomy   { color: #6E3450; }
.gx-tag-diagnosis { color: #574260; }
.gx-tag-test      { color: #2C565B; }
.gx-tag-procedure { color: #85462A; }
.gx-tag-treatment { color: #3B5537; }
.gx-tag-recovery  { color: #71531E; }
.gx-tag-genetics  { color: #414B72; }
.gx-def {
  grid-column: 2; margin: 0; color: var(--ink-soft);
  font-size: 0.97rem; line-height: 1.62; max-width: 44rem;
}
.gx-rel {
  grid-column: 2; margin-top: 9px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.gx-rel span {
  font-size: 0.66rem; letter-spacing: .11em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-faint);
}
.gx-rel a { font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.gx-rel a:hover { color: var(--accent-dark); text-decoration: underline; }

.gx-empty { padding: 40px 0 30px; border-top: 1px solid var(--line); }
.gx-empty[hidden] { display: none; }
.gx-empty h3 { font-family: var(--serif); font-size: 1.4rem; margin-bottom: 8px; }
.gx-empty p { color: var(--ink-soft); max-width: 40rem; }

@media (max-width: 760px) {
  .gx-card { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .gx-head { grid-column: 1; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
  .gx-def, .gx-rel { grid-column: 1; }
  .gx-controls { position: static; padding-top: 14px; }
  .gx-rail { display: none; }
  .gx-group, .gx-card { scroll-margin-top: 20px; }
}
@media (max-width: 480px) {
  .gx-letter { font-size: 1.6rem; }
  .gx-head h3 { font-size: 1.1rem; }
  #glossaryPop .gp-term { font-size: 1.02rem; padding-right: 40px; }
}



/* ==================================================================
   RESTORED SCAFFOLD CSS.

   A section replacement earlier in this build sliced from a match point to
   end-of-file and deleted 65 selectors, including .callout-urgent (the
   emergency boxes), the whole symptom self-check UI, most of the recovery
   timeline, .topic-grid and .topic-card, .refs, and the table swipe hint.
   None of the automated gates caught it: they measure overflow, tap-target
   size and click behaviour, and unstyled markup passes all three.

   Everything from here to the "LOCAL OVERRIDES" marker is verbatim from
   assets/scaffold/css/style.css. Client-specific rules stay below that marker
   so they keep winning on the cascade.
   ================================================================== */


/* ---------- Recovery / post-op timeline cards ---------- */
.recovery-block { border: 1px solid var(--line-dark); padding: 22px 24px; margin: 18px 0; background: var(--paper); }
.recovery-block h3 { margin-bottom: 8px; }
.recovery-block .rb-meta { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); font-weight: 600; margin-bottom: 10px; }
.drain-steps { counter-reset: dstep; list-style: none; margin-left: 0 !important; }
.drain-steps li { position: relative; padding-left: 42px; margin-bottom: 16px; }
.drain-steps li::before {
  counter-increment: dstep; content: counter(dstep); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; font-family: var(--sans);
}

@media (max-width: 480px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 16px; }
  h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .cond-hero .lead { font-size: 1.08rem; }
  table.compare { font-size: 0.86rem; }
  table.compare th, table.compare td { padding: 10px 12px; }
  .recovery-block { padding: 18px 16px; }
}

/* ---------- Table scroll affordance (mobile hint that tables slide) ---------- */
.table-scroll { position: relative; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) {
  .table-scroll::after {
    content: "Swipe table \2192"; position: sticky; left: 0; display: block;
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-faint); padding: 6px 12px; background: var(--paper-deep);
    border-top: 1px solid var(--line);
  }
}

/* ================================================================
   COMPONENTS ADDED FOR THE SCAFFOLD
   (callout variants, handout banners, topic grid, sources block,
   recovery timeline, self-check). All phone-first: every block below
   is verified at 390px and 360px before any site ships.
   ================================================================ */

/* ---------- Button + row aliases used by the scaffold components ---------- */
.hero-actions, .handout-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.btn-ghost { border: 1.5px solid var(--ink); color: var(--ink); padding: 0 28px; height: 52px; border-radius: 999px; transition: background 0.2s ease, color 0.2s ease; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost:visited { color: var(--ink); }

/* ---------- Callout variants ---------- */
.callout-note { background: var(--paper-deep); border-color: var(--line); }
.callout-warn { background: #FBEFE0; border-color: #E8CFA6; }
.callout-urgent { background: #FBE9E6; border-color: #E3B3AA; }
.callout-urgent h3, .callout-urgent h4 { font-family: var(--serif); font-weight: 550; color: #8C2F1E; margin-bottom: 8px; }
.callout ul, .callout ol { margin: 10px 0 0 20px; }
.callout li { margin-bottom: 6px; }

/* ---------- Handout banners ----------
   Accent banner = the PDF exists in /pdfs/. Yellow = genuinely in development.
   Showing yellow when the PDF exists hides finished material from patients. */
.handout {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between;
  align-items: center; margin: 26px 0; padding: 22px 24px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent-dark);
}
.handout h3 { color: #fff; margin-bottom: 6px; }
.handout p { color: rgba(255,255,255,0.9); font-size: 0.95rem; margin: 0; }
.handout .handout-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.handout .btn-primary { background: #fff; color: var(--accent-dark); border-color: #fff; }
.handout .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.6); }
.handout-pending { background: #FBF3DC; color: var(--ink); border-color: #E8CFA6; }
.handout-pending h3 { color: var(--ink); }
.handout-pending p { color: var(--ink-soft); }
.handout-pending .btn-ghost { color: var(--ink); border-color: var(--line-dark); }

/* ---------- Topic grid (home) ---------- */

.sec-sub { color: var(--ink-soft); margin-bottom: 26px; max-width: 60ch; }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 24px; }
.topic-card { display: block; padding: 22px 24px; border: 1px solid var(--line-dark); background: var(--paper); color: var(--ink); }
.topic-card h3 { color: var(--ink); margin-bottom: 6px; }
.topic-card p { color: var(--ink-soft); font-size: 0.94rem; }
.topic-card:hover { background: var(--ink); color: var(--paper); }
.topic-card:hover h3, .topic-card:hover p { color: var(--paper); }

/* ---------- Sources ---------- */
.refs { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
.refs h2 { font-size: 1.4rem; }
.refs ol { margin-left: 20px; }
.refs li { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 10px; overflow-wrap: break-word; }
.rev-stamp { font-size: 0.82rem; color: var(--ink-faint); margin-top: 14px; }
.side-links a { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.94rem; }
.side-links a:last-child { border-bottom: none; }

/* ---------- Recovery timeline ---------- */
.tl-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tl-tab {
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600; cursor: pointer;
  padding: 10px 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-dark);
}
.tl-tab.active, .tl-tab:hover { background: var(--ink); color: var(--paper); }
.tl-intro { color: var(--ink-soft); margin-bottom: 20px; }
.tl-steps { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.tl-step { position: relative; padding: 0 0 26px 26px; }
.tl-step::before {
  content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px;
  background: var(--accent); border: 2px solid var(--paper);
}
.tl-when { display: block; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--accent-dark); margin-bottom: 4px; }
.tl-what h4 { font-family: var(--serif); font-weight: 550; font-size: 1.1rem; margin-bottom: 4px; }
.tl-what p { color: var(--ink-soft); font-size: 0.95rem; }
.tl-disclaim { font-size: 0.82rem; color: var(--ink-faint); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------- Self-check ---------- */
.sc-card { border: 1px solid var(--line-dark); background: var(--paper); padding: 30px 28px; }
.sc-progress { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); margin-bottom: 12px; }
.sc-q { font-family: var(--serif); font-size: 1.4rem; font-weight: 550; line-height: 1.22; margin-bottom: 8px; }
.sc-sub { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 20px; }
.sc-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-opt {
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600; cursor: pointer;
  padding: 12px 24px; min-width: 110px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-dark);
}
.sc-opt:hover { background: var(--ink); color: var(--paper); }
.sc-unsure { font-weight: 500; color: var(--ink-soft); }
.sc-result h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 12px; }
.sc-result p { color: var(--ink-soft); margin-bottom: 12px; }
.sc-urgent { border-color: #C0523C; background: #FBE9E6; }
.sc-urgent h3 { color: #8C2F1E; }
.sc-restart { margin-top: 18px; background: none; border: none; color: var(--accent); font-weight: 600; cursor: pointer; font-size: 0.9rem; font-family: var(--sans); padding: 0; }
.sc-disclaim { font-size: 0.8rem; color: var(--ink-faint); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

@media (max-width: 480px) {
  .handout { padding: 18px 16px; }
  .handout .handout-actions { width: 100%; }
  .handout .btn { flex: 1 1 auto; text-align: center; }
  .sc-card { padding: 22px 18px; }
  .sc-opt { flex: 1 1 100%; }
  .tl-tab { flex: 1 1 auto; }
}


/* ==================================================================
   LOCAL OVERRIDES. Everything below this line is specific to this site
   and must stay after the restored scaffold CSS so it wins the cascade.
   ================================================================== */

/* ------------------------------------------------------------------
   Printable handout banners.

   The download is a primary action on a physician site, second only to the
   phone number, so it gets real weight. Three states:
     .handout-top      a real PDF, at the top of the page, full strength
     .handout-compact  the same PDF repeated at the foot, quieter
     .handout-pending  a handout that does not exist yet, foot of page only
   ------------------------------------------------------------------ */
.handout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 28px; margin: 26px 0; padding: 22px 24px;
  border: 1px solid var(--line-dark); background: var(--paper-deep);
}
.handout > div:first-child { flex: 1 1 22rem; min-width: 0; }
.handout h3 {
  font-family: var(--serif); font-size: 1.22rem; font-weight: 650;
  color: var(--ink); line-height: 1.25; margin: 0 0 5px;
}
.handout p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.55; }
.handout-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.handout-actions .btn { white-space: nowrap; }
.handout-kicker {
  display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--paper); background: var(--accent);
  padding: 3px 9px; margin-bottom: 9px;
}

/* Top placement: the one a patient standing in a pharmacy is looking for. */
.handout-top {
  border: 1px solid var(--ink); border-left: 5px solid var(--accent);
  background: var(--paper-deep);
}

/* Foot repeat: same file, less shouting. */
.handout-compact {
  padding: 16px 20px; background: var(--paper);
  border: 1px solid var(--line-dark); border-left: 3px solid var(--accent);
}
.handout-compact h3 { font-size: 1.05rem; }
.handout-compact p { font-size: 0.89rem; }

/* Not written yet. Never rendered above the fold. */
.handout-pending {
  background: #FBF3DE; border: 1px solid #D9C48A; border-left: 5px solid #B08948;
}
.handout-pending h3 { color: #6B5115; }
.handout-pending p { color: #4E3D14; }

/* ------------------------------------------------------------------
   Physician portrait
   ------------------------------------------------------------------ */
.portrait { margin: 0; }
.portrait img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-dark);
  filter: saturate(0.96);
}
.portrait-hero img { box-shadow: 14px 14px 0 var(--paper-deep); }
.portrait-about img { box-shadow: 10px 10px 0 var(--paper-deep); }

/* ------------------------------------------------------------------
   Location cards with map links
   ------------------------------------------------------------------ */
.loc-addr { margin: 0 0 10px; }
.loc-map {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: .04em; color: var(--accent);
}
.loc-map:hover { color: var(--accent-dark); text-decoration: underline; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------
   Printable handouts index page
   ------------------------------------------------------------------ */
.ho-list { border-top: 2px solid var(--ink); margin: 16px 0 34px; }
.ho-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 28px; padding: 22px 0; border-bottom: 1px solid var(--line);
}
.ho-body { flex: 1 1 24rem; min-width: 0; }
.ho-body h3 {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 650;
  color: var(--ink); margin: 0 0 6px; line-height: 1.25;
}
.ho-body p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.58; }
.ho-web {
  margin-top: 8px !important; font-size: 0.84rem !important;
}
.ho-web a { font-weight: 600; color: var(--accent); }
.ho-actions { flex: 0 0 auto; }
.ho-planned { list-style: none; padding: 0; margin: 14px 0 30px; }
.ho-planned li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.ho-planned li::before {
  content: "In development"; display: inline-block; min-width: 9.5rem;
  font-size: 0.64rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: #7A5A20;
}
.ho-planned a { font-weight: 600; }

@media (max-width: 600px) {
  .handout { padding: 18px 16px; gap: 14px; }
  .handout-actions { width: 100%; }
  .handout-actions .btn { flex: 1 1 100%; text-align: center; }
  .ho-actions { width: 100%; }
  .ho-actions .btn { display: block; text-align: center; }
  .ho-planned li::before { display: block; min-width: 0; margin-bottom: 3px; }
}

/* ------------------------------------------------------------------
   Video embed (homepage). Responsive 16:9, safe when the YouTube ID has
   not been supplied yet.
   ------------------------------------------------------------------ */
.video-frame {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: var(--radius); overflow: hidden;
  background: var(--paper-deep); border: 1px solid var(--line-dark);
}
.video-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.video-frame.video-pending {
  display: flex; align-items: center; justify-content: center;
  text-align: center; border-style: dashed;
}
.video-frame.video-pending > div {
  display: flex; flex-direction: column; gap: .5rem; align-items: center;
  padding: 1.5rem; max-width: 34rem;
}
.video-frame.video-pending .ph-icon { font-size: 2rem; color: var(--accent); line-height: 1; }
.video-frame.video-pending .ph-label { font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.video-frame.video-pending .ph-note { font-size: .86rem; color: var(--ink-soft); line-height: 1.5; }
.video-frame.video-pending code {
  background: var(--paper); padding: .1em .35em; border-radius: var(--radius);
  font-size: .92em; border: 1px solid var(--line);
}

/* ------------------------------------------------------------------
   Location cards
   ------------------------------------------------------------------ */
.loc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; margin: 1.25rem 0 1.5rem;
}
.loc-card {
  background: var(--paper-deep); border: 1px solid var(--line-dark);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.loc-card h3 {
  margin: 0 0 .35rem; font-size: .95rem; letter-spacing: .02em;
  text-transform: uppercase; color: var(--accent-dark);
}
.loc-card p { margin: 0; line-height: 1.55; }
.loc-card a { font-weight: 600; }

/* ------------------------------------------------------------------
   Accessibility floor.

   Every interactive control is at least 44px tall, the minimum comfortable
   tap target on a phone, and this site is read by frightened, tired people
   on small screens who are often older than whoever designed it.

   KEEP THIS BLOCK LAST and do not truncate the file above it. It was wiped
   once by a careless section replacement and the regression only surfaced
   because the gate measures every control on every page.
   ------------------------------------------------------------------ */
.tl-tab, .sc-opt, .dt-opt, .dt-restart, .sc-restart, .gx-chip,
a.btn, button.btn, .handout-actions .btn, .ho-actions .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dt-opt { justify-content: space-between; }
.gx-chip { gap: 6px; }

@media (max-width: 480px) {
  .loc-grid { grid-template-columns: 1fr; gap: .75rem; }
  .loc-card { padding: .85rem .95rem; }
  .video-frame.video-pending > div { padding: 1rem; }
  .video-frame.video-pending .ph-note { font-size: .8rem; }
}

/* Portrait sizing.

   Replaced 2026-08-23 with the photograph Dr. Vasques supplied herself:
   1111x1749, a tall portrait, against the old 428x480 near-square web copy.

   The cap did NOT go up. At 400px wide the new file renders at roughly 2.8x
   pixel density, so the win is sharpness on phones and retina screens rather
   than a bigger picture. Raising the cap instead would make the frame very
   tall, because the aspect ratio changed from 0.89 to 0.64. */
.portrait { margin: 0; max-width: 400px; }
.portrait-hero { margin-left: auto; }
.portrait-about { margin: 0 0 8px; }
.portrait img { width: 100%; height: auto; }
@media (max-width: 900px) {
  .portrait, .portrait-hero { margin: 0 auto; max-width: 300px; }
}

/* ------------------------------------------------------------------
   Missing from the scaffold: .btn-ghost had no rule anywhere, so every
   secondary button on the site (hero, handout banners, sidebars) rendered
   as bare text with no affordance. .hero-actions had no rule either, so the
   two hero buttons sat flush against each other with no gap.
   ------------------------------------------------------------------ */
.btn-ghost {
  border: 1.5px solid var(--line-dark); color: var(--accent);
  background: transparent; padding: 0 26px; height: 52px; border-radius: 999px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-ghost:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn-ghost:visited { color: var(--accent); }
.btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px;
}
.side-box .btn { width: 100%; margin-top: 4px; }

@media (max-width: 480px) {
  .hero-actions .btn { flex: 1 1 100%; }
  .btn-primary, .btn-ghost, .btn-outline { padding: 0 20px; }
}

/* ------------------------------------------------------------------
   Browse by topic.

   Was ten identical boxes in a four-column grid with a ragged last row. At
   268px a card gives about 28 characters a line, so every title broke across
   two lines and the body copy read as a column of stubs. Rebuilt as three
   labeled groups of four, with cards wide enough that titles sit on one line
   and descriptions get a comfortable measure.
   ------------------------------------------------------------------ */
.topic-groups { margin-top: 30px; }

.topic-group + .topic-group { margin-top: 44px; }

.topic-grouplabel {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
  gap: 16px;
  margin-top: 0;
}

.topic-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px 26px 20px;
  border: 1px solid var(--line-dark);
  background: var(--paper); color: var(--ink);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.topic-card h4 {
  font-family: var(--serif); font-size: 1.24rem; font-weight: 650;
  line-height: 1.22; color: var(--ink); margin: 0 0 8px;
  text-wrap: balance;
}
.topic-card p {
  color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6;
  margin: 0 0 16px; max-width: 42rem;
}
.topic-go {
  margin-top: auto; font-family: var(--sans); font-size: 0.76rem;
  font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent);
}
.topic-card:hover {
  background: var(--paper-deep); border-color: var(--accent);
  transform: translateY(-2px);
}
.topic-card:hover h4 { color: var(--accent-dark); }
.topic-card:hover p { color: var(--ink-soft); }
.topic-card:hover .topic-go { color: var(--accent-dark); }
.topic-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 820px) {
  .topic-grid { grid-template-columns: 1fr; gap: 12px; }
  .topic-group + .topic-group { margin-top: 34px; }
  .topic-card { padding: 20px 20px 16px; }
  .topic-card h4 { font-size: 1.15rem; }
  .topic-card p { margin-bottom: 12px; }
}

/* Three containers the generator emits that had no rule of their own.
   Found by scripts/check_styles.py, which is the point of that gate. */
.hero-copy { max-width: 34rem; }
.tl-wrap { margin: 22px 0 8px; }
.gx-searchrow { margin-bottom: 4px; }

/* ------------------------------------------------------------------
   Round 2 (v1.4), 2026-08-30.

   1. Button readability + one format per function (CRod's comment 5).
      The scaffold's .handout button variants assumed a dark accent banner
      and painted the call button white-on-transparent; the local .handout
      is light, so that button was nearly invisible (his screenshot).
      Function scheme, everywhere on the site:
        solid plum   = call a phone number  (.btn-primary)
        plum outline = open or download something (.btn-ghost, .btn-outline)
   ------------------------------------------------------------------ */
.handout .btn-primary { background: var(--accent); color: #fff; border: 1.5px solid var(--accent); }
.handout .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.handout .btn-ghost { color: var(--accent); border-color: var(--accent); background: var(--paper); }
.handout .btn-ghost:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.handout-pending .btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { border-color: var(--accent); }
.btn-outline { border: 1.5px solid var(--accent); color: var(--accent); }
.btn-outline:hover { background: var(--accent); color: #fff; }
.btn-outline:visited { color: var(--accent); }

/* 2. Time-aware "who to call right now" line (js/call-now.js) and the
      highlight on the number card that is the right call at this moment.
      Empty until the script fills it, so no-JS renders nothing, not a stub. */
.callnow { font-size: 0.95rem; margin: 0 0 14px; }
.callnow:empty { display: none; }
.callnow-open strong { color: var(--accent-dark); }
.callnow-closed strong { color: #8C2F1E; }
.loc-card .num-hours { font-size: 0.83rem; color: var(--ink-soft); margin-top: 6px; }
/* .loc-card.num-now highlight REMOVED in v1.5.3 (CRod: all four number
   boxes get the same box). The dynamic guidance line above the grid carries
   the "which number right now" message instead. */
footer.site .foot-hours { font-size: 0.85rem; }
footer.site .callnow { font-size: 0.85rem; }

/* v1.5.1: the Google-reviews line on about#contact. A plain sentence, not a
   button: reviews are patient-published content we point at, not a CTA we
   own. */
.reviews-link { margin-top: 18px; font-size: 0.95rem; }

/* ------------------------------------------------------------------
   v1.5.2 polish, from CRod's screenshots (2026-09-03).

   1. About page Background/How-I-practice paragraphs were cramped: that
      column lives in .person-grid, not <article>, so it never received
      article p's bottom margin. Give it the same rhythm, plus breathing
      room before each following h2.
   ------------------------------------------------------------------ */
.person-grid p { margin-bottom: 18px; max-width: 70ch; }
.person-grid h2 { margin-top: 34px; }
.person-grid > div > h2:first-child { margin-top: 0; }
.person-grid .pull-quote { margin: 22px 0 24px; }

/* 2. "Call" button sat flush against the "Surgery scheduling:" line in the
      sidebar box. Real gap after any sidebar button, and the .more line
      breathes on its own. */
.side-box .btn { margin-top: 8px; margin-bottom: 6px; }
.side-box .more { display: block; margin-top: 12px; }

/* 3. The four number cards on when-to-call: a strict two-by-two so edges
      align and heights match, instead of auto-fit's 3+1 ragged row. */
.num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .num-grid { grid-template-columns: 1fr; } }

/* 4. Footer hours: the static line is the no-JS fallback ONLY. When
      call-now.js is live it tags <body> and the dynamic line replaces the
      static one instead of stacking under it. */
body.callnow-live footer.site .foot-hours { display: none; }

/* ------------------------------------------------------------------
   v1.5.3 (2026-09-03, evening), from CRod's phone pass and the after-hours
   call flow.

   1. Mobile sticky call bar. The scaffold styled ".sticky-call a" (a child
      link) but the bar IS the <a>, so the label inherited the page link
      colour: plum text on a plum bar, invisible, which is why the bar read
      as an empty burgundy stripe on his phone. It was also 52px tall. Now
      white text, 44px (the tap-target floor), and body padding to match.
   ------------------------------------------------------------------ */
@media (max-width: 860px) {
  .sticky-call, .sticky-call:visited {
    color: #fff; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
    padding: 0 18px; min-height: 44px; align-items: center;
  }
  .sticky-call:hover { color: #fff; }
  body { padding-bottom: 48px; }
  .back-to-top { bottom: 62px; }
}

/* 2. "Read patient reviews on Google" under the hero Call button (moved out
      of the footer; opens in a new tab). A quiet sentence, not a button. */
.hero-reviews { margin: 14px 0 0; font-size: 0.95rem; }
.hero-reviews a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero-reviews .ext { font-size: 0.8em; color: var(--ink-faint); }

/* 3. After-hours pop-up (js/call-now.js). Opens when a visitor taps the
      office number outside 8:30-5:00 Central. Plain, high-contrast, one
      obvious primary action, and a real close control. */
.ah-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(34, 28, 34, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ah-box {
  position: relative; width: 100%; max-width: 30rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 28px 28px 22px; box-shadow: 0 18px 48px rgba(0,0,0,0.28);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.ah-eyebrow {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 6px;
}
.ah-title { font-size: 1.45rem; margin: 0 0 12px; line-height: 1.2; }
.ah-body p { margin: 0 0 12px; font-size: 1rem; line-height: 1.55; }
.ah-actions { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 14px; }
.ah-actions .btn { width: 100%; }
.ah-emergency { margin: 0 0 6px; font-size: 0.92rem; color: var(--ink-soft); }
.ah-close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  border: 0; background: transparent; color: var(--ink-soft);
  font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: 50%;
}
.ah-close:hover { background: var(--paper-deep); color: var(--ink); }
.ah-notnow {
  display: block; margin: 4px auto 0; min-height: 44px; padding: 0 12px;
  border: 0; background: transparent; color: var(--ink-faint);
  font-size: 0.9rem; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.ah-notnow:hover { color: var(--ink); }
.ah-close:focus-visible, .ah-notnow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.ah-open { overflow: hidden; }
@media (max-width: 480px) {
  .ah-box { padding: 24px 20px 18px; }
  .ah-title { font-size: 1.3rem; }
}

/* v1.5.6: smoother resizing. Her name never wraps in the header, and the
   hero portrait shrinks gradually once it drops below the headline instead
   of snapping from 400px to 300px at 900px. */
.brand-text { white-space: nowrap; }
@media (max-width: 980px) {
  .portrait-hero { margin: 0 auto; max-width: clamp(260px, 36vw, 360px); }
}