/* Neck Pain Journal - neckpainjournal.com
   Identity: "the bound journal". A clinical field journal about one injury, ruled, numbered, and dated.
   Concept: a careful journal of a careless kind of injury.
   Type: Newsreader (display and long-form serif, optical sizes on) / Source Sans 3 (UI and body copy)
         / DM Mono (register labels, entry folios, date stamps)
   Palette: slate ink, cool fog canvas, white paper, cobalt rule and link, one oxblood stamp
   Hero: photograph of the open journal on the right, typographic promise on the left, faint rules behind both.
   Signature: the vertebral chain (five dots on a curve) as the mark; faint journal rules behind every
              page head; "Entry 04" folios in mono; a dated stamp on every article head; hairline rules
              instead of boxes wherever a box would do. */

:root {
  --ink: #16233a;
  --ink-2: #22324d;
  --body: #2b3647;
  --muted: #5c6a7d;
  --faint: #8a96a8;

  --canvas: #f2f4f7;
  --canvas-2: #e9edf2;
  --paper: #ffffff;
  --paper-2: #f8f9fb;

  --line: #d8dee8;
  --line-2: #c9d1dd;
  --rule: rgba(36, 86, 166, 0.07);

  --cobalt: #2456a6;
  --cobalt-deep: #1a4284;
  --cobalt-soft: #5b8fd6;
  --cobalt-wash: #e8eef9;

  --stamp: #8f2f2a;
  --stamp-wash: #f7eceb;

  --on-dark: #eef2f8;
  --on-dark-soft: #b6c3d6;
  --on-dark-mute: #7f90a8;

  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Pro", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --shell: 1160px;
  --read: 680px;
  --r: 4px;
  --ease: cubic-bezier(0.3, 0.02, 0.2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cobalt-deep); }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; border-radius: 2px; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 32px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

/* ---------- Register label (signature: a vertebra dot, then mono caps) ---------- */
.reg {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cobalt);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.reg::before {
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cobalt);
  box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 3.5px var(--cobalt);
  flex: 0 0 auto;
}
.reg.stamp { color: var(--stamp); }
.reg.stamp::before { background: var(--stamp); box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 3.5px var(--stamp); }

/* ---------- Journal rules (signature background) ---------- */
.ruled {
  position: relative;
  overflow: hidden;
}
.ruled::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--rule) 31px, var(--rule) 32px);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.ruled > * { position: relative; z-index: 1; }

/* ---------- Emergency strip ---------- */
.er-strip {
  background: var(--ink);
  color: var(--on-dark-soft);
  font-size: 13.5px;
  line-height: 1.5;
}
.er-strip .shell { display: flex; gap: 12px; align-items: flex-start; padding-top: 9px; padding-bottom: 9px; }
.er-strip .shell::before {
  content: "";
  flex: 0 0 auto; margin-top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--stamp);
  box-shadow: 0 0 0 3px rgba(143, 47, 42, 0.28);
}
.er-strip strong { color: #fff; font-weight: 600; }
.er-strip a { color: #fff; }

/* ---------- Masthead (centered, newspaper style) ---------- */
.masthead { background: var(--paper); border-bottom: 1px solid var(--line); }
.masthead .shell { text-align: center; padding-top: 26px; padding-bottom: 0; }
.masthead .folio-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line); padding-bottom: 10px;
}
.brand {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--ink);
  padding: 22px 0 16px;
}
.brand .mark { width: 40px; height: 40px; color: var(--cobalt); }
.brand-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -0.015em;
  line-height: 1;
  font-optical-sizing: auto;
}
.brand-tag {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.navbar { border-top: 1px solid var(--line); }
.nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 4px 30px;
  padding: 12px 0;
}
.nav a {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: 4px 0;
  position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--cobalt); transform: scaleX(0); transform-origin: center;
  transition: transform 0.25s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--cobalt); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cobalt); color: #fff;
  text-decoration: none;
  font-family: var(--sans); font-weight: 600; font-size: 15.5px;
  padding: 13px 22px;
  border-radius: var(--r);
  border: 1px solid var(--cobalt);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 1px 2px rgba(22, 35, 58, 0.12), 0 12px 24px -16px rgba(36, 86, 166, 0.7);
}
.btn:hover { background: var(--cobalt-deep); color: #fff; transform: translateY(-1px); }
.btn .arw { transition: transform 0.2s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.btn.ghost:hover { border-color: var(--cobalt); color: var(--cobalt-deep); background: var(--paper); }
.btn.on-dark { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.btn.on-dark:hover { background: #fff; color: var(--ink); }

/* ---------- Hero ---------- */
.hero { background: var(--canvas); border-bottom: 1px solid var(--line); }
.hero .shell {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center;
  padding-top: 72px; padding-bottom: 72px;
}
.hero-copy { max-width: 48ch; }
.hero .reg { margin-bottom: 22px; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4.1vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 22px;
  font-optical-sizing: auto;
}
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--cobalt); }
.hero .lede {
  font-family: var(--serif);
  font-size: 20px; line-height: 1.5; color: var(--ink-2);
  margin: 0 0 30px; max-width: 52ch;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-actions .phone { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.hero-actions .phone a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.hero-fig { margin: 0; }
.hero-fig img {
  width: 100%; height: auto;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(22,35,58,0.06), 0 30px 50px -36px rgba(22,35,58,0.5);
}
figcaption, .cap {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.06em; line-height: 1.55;
  color: var(--muted);
  margin-top: 12px;
}
figcaption b { font-weight: 500; color: var(--cobalt); text-transform: uppercase; letter-spacing: 0.12em; margin-right: 6px; }

/* ---------- Sections ---------- */
section { padding: 68px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.section-head h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(28px, 3.3vw, 38px); line-height: 1.1; letter-spacing: -0.018em;
  color: var(--ink); margin: 14px 0 0; max-width: 22ch;
}
.section-head .count { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding-bottom: 8px; }

/* ---------- Entries index ---------- */
.entries { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--line-2); }
.entry {
  display: grid; grid-template-columns: 64px 1fr; gap: 18px;
  padding: 26px 0 28px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  transition: color 0.2s var(--ease);
}
.entry .folio { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--faint); padding-top: 6px; line-height: 1.4; }
.entry .folio b { display: block; font-weight: 500; color: var(--cobalt); font-size: 16px; letter-spacing: 0; }
.entry h3 {
  font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.18; letter-spacing: -0.012em;
  margin: 0 0 8px; color: var(--ink);
  transition: color 0.2s var(--ease);
}
.entry:hover h3 { color: var(--cobalt); }
.entry p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); max-width: 48ch; }
.entry .go { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cobalt); margin-top: 10px; display: inline-block; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.entry:hover .go { opacity: 1; transform: translateX(0); }
.entry.lead {
  grid-column: 1 / -1;
  grid-template-columns: 84px 1fr 1fr;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 30px 30px 30px 26px; margin: 28px 0 8px;
  align-items: center;
  box-shadow: 0 1px 2px rgba(22,35,58,0.04), 0 24px 40px -32px rgba(22,35,58,0.35);
}
.entry.lead h3 { font-size: 30px; }
.entry.lead p { max-width: 44ch; font-size: 16px; }
.entry.lead .lead-fig { margin: 0; }
.entry.lead .lead-fig img { width: 100%; height: auto; border: 1px solid var(--line); }

/* ---------- Observations band (dark) ---------- */
.band {
  background: var(--ink); color: var(--on-dark-soft);
  position: relative; overflow: hidden;
}
.band::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(255,255,255,0.035) 31px, rgba(255,255,255,0.035) 32px);
  pointer-events: none;
}
.band .shell { position: relative; z-index: 1; }
.band .reg { color: var(--cobalt-soft); margin-bottom: 34px; }
.band .reg::before { background: var(--cobalt-soft); box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 3.5px var(--cobalt-soft); }
.obs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.ob { padding: 6px 36px; border-left: 1px solid rgba(255,255,255,0.12); }
.ob:first-child { padding-left: 0; border-left: none; }
.ob .num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--cobalt-soft); display: block; margin-bottom: 16px; }
.ob strong {
  display: block; font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.18; letter-spacing: -0.012em;
  color: #fff; margin-bottom: 10px;
}
.ob strong em { color: var(--cobalt-soft); font-weight: 400; }
.ob span { display: block; font-size: 15.5px; line-height: 1.6; color: var(--on-dark-soft); }
.band .band-foot { margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.band .band-foot p { margin: 0; font-family: var(--serif); font-size: 19px; color: var(--on-dark); max-width: 56ch; }

/* ---------- Feature (photo + copy) ---------- */
.feature { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature .shell { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feature.flip .shell > :first-child { order: 2; }
.feature-copy .reg { margin-bottom: 18px; }
.feature-copy h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(27px, 3.1vw, 36px);
  line-height: 1.12; letter-spacing: -0.016em; color: var(--ink); margin: 0 0 16px;
}
.feature-copy p { margin: 0 0 16px; font-size: 17px; color: var(--body); }
.feature-copy p:last-child { margin-bottom: 0; }
.feature-fig { margin: 0; }
.feature-fig img { width: 100%; height: auto; border: 1px solid var(--line); }

/* ---------- Featured clinic ---------- */
.clinic {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(22,35,58,0.04), 0 26px 48px -34px rgba(22,35,58,0.4);
}
.clinic::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cobalt); }
.clinic-head { padding: 34px 38px 26px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: start; }
.clinic-head .reg { margin-bottom: 14px; }
.clinic-head h2, .clinic-head h3 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: -0.016em; color: var(--ink); margin: 0 0 8px; }
.clinic-head .tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.clinic-head p { margin: 0 0 14px; font-size: 16.5px; color: var(--body); }
.clinic-head p:last-child { margin-bottom: 0; }
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); }
.room { padding: 26px 30px 28px 38px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.room:last-child { border-right: none; }
.room .reg { margin-bottom: 8px; }
.room h4, .room h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 4px; color: var(--ink); letter-spacing: -0.01em; }
.room address { font-style: normal; font-size: 15.5px; line-height: 1.5; color: var(--body); }
.room .hours { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--muted); margin: 6px 0 8px; }
.room .tel { font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); align-self: flex-start; }
.room .tel:hover { color: var(--cobalt); border-color: var(--cobalt); }
.room .btn { align-self: flex-start; margin-top: 14px; padding: 10px 16px; font-size: 14px; }
.clinic-foot { padding: 18px 38px 22px; border-top: 1px solid var(--line); background: var(--paper-2); font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.review { border-top: 2px solid var(--ink); padding-top: 18px; }
.review blockquote { margin: 0 0 14px; font-family: var(--serif); font-size: 21px; line-height: 1.35; color: var(--ink); font-style: italic; }
.review cite { font-style: normal; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.reviews-note { font-size: 13.5px; color: var(--muted); margin: 26px 0 0; max-width: 70ch; }

/* ---------- Article head ---------- */
.article-head { background: var(--canvas); border-bottom: 1px solid var(--line); padding: 56px 0 44px; }
.article-head .shell { max-width: 900px; }
.article-head .reg { margin-bottom: 20px; }
.article-head h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(32px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 20px; max-width: 20ch;
}
.article-head .lede { font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 58ch; }
.datestamp {
  display: inline-flex; flex-direction: column; gap: 2px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stamp); border: 1.5px solid var(--stamp); border-radius: 3px; padding: 7px 11px;
  transform: rotate(-1.4deg); margin-top: 28px; background: rgba(255,255,255,0.55);
}
.datestamp b { font-weight: 500; }
.byline { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- Article layout ---------- */
.article { padding: 52px 0 72px; }
.article .shell { display: grid; grid-template-columns: minmax(0, var(--read)) 300px; gap: 64px; justify-content: center; align-items: start; }
.prose { font-family: var(--serif); font-size: 19.5px; line-height: 1.66; color: var(--body); min-width: 0; }
.prose > p:first-of-type::first-letter {
  font-family: var(--serif); font-weight: 500; float: left; font-size: 66px; line-height: 0.8;
  padding: 7px 10px 0 0; color: var(--cobalt);
}
.prose h2 {
  font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.16; letter-spacing: -0.016em;
  color: var(--ink); margin: 46px 0 14px;
}
.prose h3 { font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: -0.005em; margin: 30px 0 8px; color: var(--ink); }
.prose p { margin: 0 0 20px; }
.prose ul, .prose ol { margin: 0 0 22px; padding: 0; list-style: none; }
.prose li { position: relative; margin-bottom: 12px; padding-left: 28px; line-height: 1.58; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3px var(--cobalt); }
.prose ol { counter-reset: j; }
.prose ol li { counter-increment: j; }
.prose ol li::before { content: counter(j, decimal-leading-zero); position: absolute; left: 0; top: 4px; font-family: var(--mono); font-size: 13px; color: var(--cobalt); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--cobalt); }
.prose figure { margin: 34px 0; }
.prose figure img { width: 100%; height: auto; border: 1px solid var(--line); }
.prose .cite { font-family: var(--sans); font-size: 14px; color: var(--muted); }

.findings {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 28px 18px; margin: 0 0 34px;
  font-family: var(--sans); font-size: 16.5px;
  box-shadow: 0 1px 2px rgba(22,35,58,0.04);
}
.findings .reg { margin-bottom: 14px; }
.findings ul { margin: 0; }
.findings li { margin-bottom: 10px; color: var(--body); }
.findings li::before { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--cobalt); }

.callout {
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--cobalt);
  padding: 20px 24px; margin: 30px 0;
  font-family: var(--sans); font-size: 16.5px; line-height: 1.6; color: var(--body);
}
.callout strong { display: block; font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.callout.er { border-left-color: var(--stamp); }
.callout.er strong { color: var(--stamp); }

.cta-inline {
  background: var(--ink); color: var(--on-dark-soft); border-radius: var(--r);
  padding: 30px 32px; margin: 40px 0;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  font-family: var(--sans);
}
.cta-inline .reg { color: var(--cobalt-soft); margin-bottom: 10px; }
.cta-inline .reg::before { background: var(--cobalt-soft); box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 3.5px var(--cobalt-soft); }
.cta-inline h3 { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.15; color: #fff; margin: 0 0 8px; letter-spacing: -0.012em; }
.cta-inline p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.cta-inline .phone { font-family: var(--mono); font-size: 12.5px; margin-top: 10px; color: var(--on-dark-mute); }
.cta-inline .phone a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }

/* ---------- Aside ---------- */
.aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 22px; font-family: var(--sans); }
.aside-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 20px; }
.aside-box .reg { margin-bottom: 14px; }
.aside-box h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.2; margin: 0 0 8px; color: var(--ink); }
.aside-box p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.aside-box .btn { width: 100%; justify-content: center; margin-top: 6px; }
.aside-box .hours { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--muted); margin: 0 0 10px; }
.aside-box .tel { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.aside-nav a { display: block; font-size: 15px; color: var(--ink); text-decoration: none; padding: 9px 0; border-bottom: 1px solid var(--line); line-height: 1.35; }
.aside-nav a:last-child { border-bottom: none; }
.aside-nav a:hover { color: var(--cobalt); }
.aside-nav a span { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-right: 8px; }
.aside .note { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; }

/* ---------- Related (bottom of article) ---------- */
.related { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--line-2); font-family: var(--sans); }
.related .reg { margin-bottom: 10px; }
.related a { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-family: var(--serif); font-size: 19px; color: var(--ink); text-decoration: none; padding: 13px 0; border-bottom: 1px solid var(--line); }
.related a span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); flex: 0 0 auto; }
.related a:hover { color: var(--cobalt); }

/* ---------- FAQ ---------- */
.faq-list { margin: 0; padding: 0; list-style: none; font-family: var(--sans); }
.faq-list li { border-top: 1px solid var(--line-2); padding: 26px 0 8px; }
.faq-list li:first-child { border-top: none; padding-top: 0; }
.faq-list h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.2; margin: 0 0 10px; color: var(--ink); letter-spacing: -0.012em; }
.faq-list h2 span { font-family: var(--mono); font-size: 12px; color: var(--cobalt); letter-spacing: 0.08em; margin-right: 12px; vertical-align: middle; }
.faq-list p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; }

/* ---------- Rooms page ---------- */
.room-cards { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 30px 0; font-family: var(--sans); }
.room-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 28px; display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: start; }
.room-card .reg { margin-bottom: 10px; }
.room-card h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 0 0 6px; color: var(--ink); letter-spacing: -0.012em; }
.room-card address { font-style: normal; font-size: 16px; color: var(--body); margin-bottom: 10px; }
.room-card .hours { font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: var(--muted); margin: 0 0 12px; }
.room-card .tel { font-weight: 600; font-size: 18px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.room-card .go-col { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 170px; }
.room-card .go-col .btn { justify-content: center; }

/* ---------- Footer ---------- */
.site-foot { background: var(--ink); color: var(--on-dark-soft); font-size: 14px; border-top: 4px solid var(--cobalt); }
.site-foot .shell { padding-top: 56px; padding-bottom: 40px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
.foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: #fff; text-decoration: none; }
.foot-brand .mark { width: 34px; height: 34px; color: var(--cobalt-soft); }
.foot-brand b { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
.foot-brand span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-mute); margin-top: 3px; }
.foot-lead { color: var(--on-dark-soft); max-width: 40ch; margin: 0 0 18px; line-height: 1.6; }
.foot-col h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-mute); margin: 0 0 16px; font-weight: 500; }
.foot-col a { display: block; color: var(--on-dark-soft); text-decoration: none; margin-bottom: 10px; }
.foot-col a:hover { color: #fff; }
.foot-col .tel { font-family: var(--mono); font-size: 13px; }
.site-foot .btn { margin-top: 6px; }
.foot-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12.5px; line-height: 1.65; color: var(--on-dark-mute); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.foot-legal p { margin: 0 0 10px; }
.foot-legal strong { color: var(--on-dark-soft); font-weight: 600; }
.foot-legal .reg { color: var(--on-dark-mute); margin-bottom: 10px; }
.foot-legal .reg::before { background: var(--stamp); box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 3.5px var(--stamp); }
.foot-year { margin-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-mute); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .shell { grid-template-columns: 1fr; gap: 34px; padding-top: 48px; padding-bottom: 56px; }
  .hero-copy { max-width: 100%; }
  .entries { grid-template-columns: 1fr; }
  .entry.lead { grid-template-columns: 84px 1fr; }
  .entry.lead .lead-fig { grid-column: 2; }
  .obs { grid-template-columns: 1fr; gap: 26px; }
  .ob { padding: 0 0 0 22px; border-left: 1px solid rgba(255,255,255,0.12); }
  .ob:first-child { padding-left: 22px; border-left: 1px solid rgba(255,255,255,0.12); }
  .feature .shell { grid-template-columns: 1fr; gap: 30px; }
  .feature.flip .shell > :first-child { order: 0; }
  .clinic-head { grid-template-columns: 1fr; gap: 20px; }
  .rooms { grid-template-columns: 1fr; }
  .room { border-right: none; border-top: 1px solid var(--line); }
  .reviews { grid-template-columns: 1fr; gap: 20px; }
  .article .shell { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .aside { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
  .foot-legal { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .shell { padding: 0 20px; }
  section { padding: 50px 0; }
  .masthead .folio-row { display: none; }
  .brand { padding: 14px 0 12px; }
  .brand-name { font-size: 30px; }
  .brand-tag { font-size: 9.5px; letter-spacing: 0.14em; }
  .nav { gap: 2px 16px; padding: 10px 0; }
  .nav a { font-size: 12px; letter-spacing: 0.05em; }
  .hero h1 { font-size: clamp(34px, 9.2vw, 44px); }
  .hero .lede { font-size: 18.5px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .entry { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .entry .folio { padding-top: 0; }
  .entry .folio b { display: inline; margin-right: 8px; }
  .entry.lead { grid-template-columns: 1fr; padding: 22px 20px; }
  .entry.lead .lead-fig { grid-column: 1; order: -1; }
  .entry h3 { font-size: 21px; }
  .entry.lead h3 { font-size: 25px; }
  .article-head { padding: 40px 0 34px; }
  .article-head h1 { font-size: clamp(30px, 8.4vw, 38px); }
  .article-head .lede { font-size: 18.5px; }
  .prose { font-size: 18px; }
  .prose h2 { font-size: 24px; }
  .findings { padding: 20px 18px 12px; }
  .cta-inline { grid-template-columns: 1fr; padding: 24px 20px; }
  .cta-inline .btn { width: 100%; justify-content: center; }
  .clinic-head, .clinic-foot { padding-left: 22px; padding-right: 22px; }
  .room { padding: 22px 22px 24px 26px; }
  .room-card { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .faq-list h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Additions (build 3): room-card CTA contrast ---------- */
.prose .btn, .prose .btn:hover { color: #fff; }
.prose .btn.ghost { color: var(--ink); }
.prose .btn.ghost:hover { color: var(--cobalt-deep); }
.prose .btn.on-dark, .prose .btn.on-dark:hover { color: var(--ink); }

/* ---------- Additions (build 2) ---------- */
.hero-phone { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted); margin: 18px 0 0; }
.hero-phone a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.hero-fig img { aspect-ratio: 3 / 2; object-fit: cover; }
.feature-fig img, .lead-fig img { aspect-ratio: 3 / 2; object-fit: cover; }
.entry.lead .lead-fig figcaption { margin-top: 10px; }
.entry .folio b { letter-spacing: 0; }
.entry > span:last-child { min-width: 0; }
.entry.lead > span:nth-child(2) { padding-right: 12px; }
.reviews-sec { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.closing { text-align: left; }
.closing .shell { max-width: 860px; }
.closing h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.018em; color: var(--ink); margin: 14px 0 18px; }
.closing p { font-size: 17px; color: var(--body); max-width: 62ch; margin: 0 0 26px; }
.site-foot .foot-about .btn { margin-top: 4px; }
.foot-brand > span { display: flex; flex-direction: column; }
.prose figure figcaption, .prose .cap { font-family: var(--mono); }
.prose-faq .faq-list { margin: 14px 0 0; }
.prose-faq .faq-list li { padding-left: 0; }
.prose-faq .faq-list li::before { display: none; }
.prose-faq .faq-list h2 { margin-top: 0; }
.prose ol.faq-list { counter-reset: none; }
.room-card .go-col .btn.ghost { font-size: 14px; }
.article-head .datestamp { display: inline-flex; }
.prose .findings li::before { top: 10px; }
.prose > figure:first-child { margin-top: 0; }
@media (max-width: 640px) {
  .hero-fig { order: -1; }
  .hero .shell { gap: 26px; }
  .closing h2 { font-size: 27px; }
  .er-strip { font-size: 12.5px; }
  .entries { border-top: none; }
}
@media (min-width: 641px) { .hero-phone { white-space: nowrap; } }

/* Cascade guard: the phone rule `.prose h2` shares specificity with the register
   labels inside .prose and is declared later, which inflated them at 390px.
   Re-declare their sizes last so they hold at every width. */
.faq-list h2 span { font-size: 12px; }
.prose .faq-list h2 span { font-size: 12px; }