/* ==========================================================================
   Chiropractic Association of Uganda
   Design system — tokens and components.

   Editorial / book-like: structure is drawn with 1px hairline rules, never
   with shadows or saturated fills. Colour is applied as stroke and small
   emphasis. No gradients, no drop shadows, no icons except the checklist tick.
   ========================================================================== */

:root {
  /* — brand colours — */
  --color-bg: #f7f5f1;        /* Ivory  — page background */
  --color-surface: #ffffff;   /* White  — card surfaces */
  --color-text: #252a2d;      /* Charcoal — all body/heading text */
  --color-divider: #d8d2c9;   /* Stone  — every hairline rule */
  --color-accent: #8a7b6b;    /* Taupe  — accent base: borders, rules */

  /* Accent ramp derived from taupe. Paragraph-size accent text uses 700,
     never the 500 base — the base fails contrast on ivory. */
  --color-accent-100: #f0ede9;
  --color-accent-200: #e0dad2;
  --color-accent-300: #c9bfb3;
  --color-accent-400: #a99c8d;
  --color-accent-500: #8a7b6b;
  --color-accent-600: #7a6c5d;
  --color-accent-700: #61564a;
  --color-accent-800: #4a4138;
  --color-accent-900: #332d27;

  /* Neutral ramp derived from charcoal. */
  --color-neutral-100: #efedea;
  --color-neutral-200: #e2dfda;
  --color-neutral-300: #c8c4bd;
  --color-neutral-400: #a3a09b;
  --color-neutral-500: #7d7c78;
  --color-neutral-600: #5f6063;
  --color-neutral-700: #494d50;
  --color-neutral-800: #35393c;
  --color-neutral-900: #252a2d;

  /* — type — */
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;

  /* — space — 4.6px base step */
  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  /* — shape — small radii only; no pills */
  --radius: 4px;

  /* — layout — */
  --measure: 1080px;
  --gutter: var(--space-8);
  --section-y: calc(var(--space-8) * 1.5);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 400; /* display type never goes bold */
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--color-accent-700);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-accent-600);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

::selection {
  background: var(--color-accent-200);
}

/* The `hidden` attribute must win over component display values, otherwise a
   `.card { display: flex }` stays visible after the register search hides it. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  font-size: 14px;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
}

.section {
  padding: var(--section-y) var(--gutter);
}

/* Hairline rules separate every major section. */
.section--ruled {
  border-bottom: 1px solid var(--color-divider);
}

.section--tinted {
  background: var(--color-accent-100);
}

.section--flush {
  padding: var(--gutter);
}

/* Keeps the gutter but lets the block supply its own vertical rhythm. */
.section--noy {
  padding-top: 0;
  padding-bottom: 0;
}

/* Two-column editorial block: narrow heading left, justified prose right. */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-8);
  align-items: start;
}

.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--space-6) * 1.25);
}

/* ==========================================================================
   Typography
   ========================================================================== */

.kicker {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0 0 var(--space-3);
}

/* Display type carries a touch of negative tracking — Cormorant sets loose
   at these sizes without it. Smaller heading-face elements do not. */
.display {
  font-family: var(--font-heading);
  font-size: 58px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 20ch;
  margin: 0 0 calc(var(--space-4) * 1.25);
}

.page-title {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
}

.h2 {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}

.h2--sm {
  font-size: 30px;
}

.lede {
  font-size: 18px;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 0 var(--space-6);
}

.lede--sm {
  font-size: 17px;
  max-width: 64ch;
  margin-bottom: calc(var(--space-4) * 1.25);
}

.prose {
  font-size: 16px;
  line-height: 1.75;
  text-align: justify;
}

.prose--sm {
  font-size: 15px;
}

.prose + .prose {
  margin-top: var(--space-4);
}

.pull-line {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.3;
  color: var(--color-accent-700);
  margin: 0;
}

.muted {
  color: var(--color-neutral-700);
}

.tnum {
  font-feature-settings: "tnum";
}

/* ==========================================================================
   Buttons — outlined, never filled
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--space-2) calc(var(--space-3) * 1.2);
}

.btn-primary {
  color: var(--color-accent-700);
  border-color: var(--color-accent);
}

.btn-primary:hover {
  color: var(--color-accent-800);
  background: var(--color-accent-100);
}

.btn-primary:active {
  background: var(--color-accent-200);
}

.btn-ghost {
  color: var(--color-accent-700);
  padding-inline: var(--space-1);
}

.btn-ghost:hover {
  color: var(--color-accent-800);
  background: var(--color-accent-100);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.arrow-link {
  font-size: 15px;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
}

.input::placeholder {
  color: var(--color-neutral-500);
}

.input:hover {
  border-color: var(--color-accent-400);
}

.input:focus-visible {
  border-color: var(--color-accent);
  outline-offset: 0;
}

.search {
  display: flex;
  gap: var(--space-3);
  max-width: 640px;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
}

.card-title {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.2;
}

/* ==========================================================================
   Tags
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 3px;
  border: 1px solid transparent;
}

.tag-accent {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}

.tag-outline {
  font-size: 14px;
  padding: 5px 12px;
  background: var(--color-bg);
  border-color: var(--color-accent);
  color: var(--color-accent-700);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo img {
  height: 52px;
  width: auto; /* the intrinsic width attribute would otherwise stretch it */
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
  font-size: 14px;
  white-space: nowrap;
}

.nav-links a {
  color: var(--color-text);
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--color-accent-700);
}

.nav-links a[aria-current="page"] {
  color: var(--color-accent-700);
  border-bottom: 1px solid var(--color-accent);
}

.nav-links .btn:hover {
  color: var(--color-accent-800);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-6) var(--gutter);
  border-top: 1px solid var(--color-divider);
  font-size: 14px;
  color: var(--color-neutral-600);
}

.footer-links {
  display: flex;
  gap: var(--space-4);
  white-space: nowrap;
}

.footer-links a {
  text-decoration: none;
}

/* ==========================================================================
   Home — hero
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
}

/* Decorative watermark, sized to fill space the copy was never going to use:
   the heading caps at 20ch (553px) and the intro at 62ch (739px), so at 300px
   the mark sits entirely in the leftover gutter and the hero text wraps exactly
   as it does in the design. Below 1100px there is no leftover to sit in, and
   the mark is dropped rather than allowed to squeeze the paragraph. */
.hero-mark {
  width: clamp(240px, 23vw, 300px);
  height: auto;
  justify-self: end;
  opacity: 0.14;
}

/* ==========================================================================
   Home — verify strip
   ========================================================================== */

.verify-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.verify-col {
  padding: calc(var(--space-6) * 1.25) var(--space-6);
  border-right: 1px solid var(--color-divider);
}

.verify-col:first-child {
  padding-left: 0;
}

.verify-col:last-child {
  padding-right: 0;
  border-right: 0;
}

.verify-col h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 400;
  color: var(--color-accent-700);
  margin: 0 0 var(--space-2);
}

.verify-col p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-neutral-700);
}

/* ==========================================================================
   Home — "ask before you book" checklist
   ========================================================================== */

.checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--space-4) * 1.25) var(--space-8);
}

.checklist-item {
  display: flex;
  gap: var(--space-4);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
}

.checklist-tick {
  flex: none;
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1;
  color: var(--color-accent-600);
}

.checklist-q {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 var(--space-1);
}

.checklist-a {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-neutral-700);
}

/* ==========================================================================
   Banded call-outs (patient message, CTA)
   ========================================================================== */

.band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.band-title {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1.2;
  max-width: 26ch;
}

.band-title--sm {
  font-size: 28px;
  max-width: none;
}

.band-note {
  font-size: 15px;
  line-height: 1.7;
  max-width: 56ch;
  margin-top: var(--space-3);
  color: var(--color-neutral-700);
}

.equation {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--color-accent-800);
}

/* ==========================================================================
   Directory
   ========================================================================== */

.result-count {
  font-size: 13px;
  color: var(--color-neutral-500);
  margin-bottom: var(--space-4);
  font-feature-settings: "tnum";
}

.directory {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--space-4) * 1.25);
}

.directory-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.directory-qual {
  font-size: 14px;
  color: var(--color-neutral-600);
}

.directory-rows {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: 15px;
}

.directory-row {
  display: flex;
  gap: var(--space-3);
}

.directory-row dt {
  flex: none;
  width: 84px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-500);
  line-height: 1.7;
}

.directory-row dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.directory-row a {
  text-decoration: none;
}

.directory-row a:hover {
  text-decoration: underline;
}

.directory-empty {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-neutral-700);
}

/* ==========================================================================
   About — numbered steps
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--space-6);
}

.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-6);
  border-top: 1px solid var(--color-divider);
  padding-top: calc(var(--space-4) * 1.25);
}

.step-n {
  font-family: var(--font-heading);
  font-size: 44px;
  line-height: 1;
  color: var(--color-accent-300);
  font-feature-settings: "tnum";
}

.step-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5; /* keeps the title's cap-height level with the 44px numeral */
  margin: 0 0 var(--space-2);
}

.step p {
  font-size: 15px;
  line-height: 1.75;
  max-width: 70ch;
  text-align: justify;
}

.callout {
  font-size: 15px;
  line-height: 1.7;
  max-width: 70ch;
  margin-top: var(--space-6);
  padding: var(--space-4) calc(var(--space-4) * 1.25);
  border-left: 2px solid var(--color-accent);
  background: var(--color-accent-100);
}

/* ==========================================================================
   About — training subject list
   ========================================================================== */

.subject-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.subject-list li {
  font-size: 15px;
  line-height: 1.6;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}

/* ==========================================================================
   Blog
   ========================================================================== */

.post-list {
  display: grid;
  gap: calc(var(--space-6) * 1.25);
}

.post-card {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
}

.post-date {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  font-feature-settings: "tnum";
}

.post-card-title {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.2;
  margin: var(--space-2) 0;
}

.post-card-title a {
  color: inherit;
  text-decoration: none;
}

.post-card-title a:hover {
  color: var(--color-accent-700);
}

.post-excerpt {
  font-size: 15px;
  line-height: 1.7;
  max-width: 72ch;
  color: var(--color-neutral-700);
}

/* Long-form article body, rendered from Markdown. */
.article {
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.75;
}

.article h2 {
  font-size: 30px;
  letter-spacing: -0.015em;
  margin: calc(var(--space-8) * 1.1) 0 var(--space-3);
}

.article h3 {
  font-size: 24px;
  letter-spacing: -0.015em;
  margin: var(--space-6) 0 var(--space-2);
}

.article p {
  margin: 0 0 var(--space-4);
}

.article ul,
.article ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.article li {
  margin-bottom: var(--space-2);
}

.article blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) calc(var(--space-4) * 1.25);
  border-left: 2px solid var(--color-accent);
  background: var(--color-accent-100);
  font-size: 15px;
}

.article blockquote p:last-child {
  margin-bottom: 0;
}

.article hr {
  height: 1px;
  border: 0;
  margin: var(--space-8) 0;
  background: var(--color-divider);
}

.article img {
  border-radius: var(--radius);
  margin: var(--space-6) 0;
}

.post-footer {
  margin-top: calc(var(--space-8) * 1.1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: 15px;
}

/* ==========================================================================
   Responsive — prototypes are desktop-first; grids collapse below ~760px
   ========================================================================== */

/* Below this the hero watermark has no gutter left to sit in and would start
   squeezing the intro paragraph, so it goes rather than reflowing the copy. */
@media (max-width: 1099px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-mark {
    display: none;
  }
}

@media (max-width: 860px) {
  .display {
    font-size: 44px;
    max-width: none;
  }

  .page-title {
    font-size: 38px;
  }

  .h2 {
    font-size: 30px;
  }

  .h2--sm {
    font-size: 26px;
  }

  .lede {
    font-size: 17px;
  }

  .band-title {
    font-size: 28px;
  }

  .editorial,
  .cols-2,
  .directory,
  .checklist {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }


  .verify-strip {
    grid-template-columns: 1fr;
  }

  .verify-col {
    padding: var(--space-4) 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
  }

  .verify-col:first-child {
    padding-top: var(--space-6);
  }

  .verify-col:last-child {
    padding-bottom: var(--space-6);
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 22px;
    --section-y: calc(var(--space-8) * 1.15);
  }

  body {
    font-size: 15px;
  }

  .display {
    font-size: 36px;
  }

  .page-title {
    font-size: 32px;
  }

  .h2 {
    font-size: 26px;
  }

  .h2--sm,
  .band-title,
  .band-title--sm {
    font-size: 24px;
  }

  .nav {
    padding: var(--space-3) 22px;
    gap: var(--space-3);
  }

  .nav-logo img {
    height: 44px;
  }

  /* Links drop to their own row beneath the logo, each staying intact. */
  .nav-links {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    font-size: 13px;
  }

  .nav-links > * {
    white-space: nowrap;
  }

  /* Justified text sets badly in narrow columns. */
  .prose,
  .step p {
    text-align: left;
  }

  .subject-list {
    grid-template-columns: 1fr;
  }

  .step {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .step-n {
    font-size: 32px;
  }

  .step-title {
    font-size: 21px;
  }

  .directory-row {
    flex-direction: column;
    gap: 2px;
  }

  .directory-row dt {
    width: auto;
    line-height: 1.4;
  }

  .band {
    gap: var(--space-4);
  }

  .footer {
    flex-direction: column;
  }

  .footer-links {
    white-space: normal;
    flex-wrap: wrap;
  }
}

@media print {
  .nav-links,
  .search,
  .skip-link {
    display: none;
  }

  body {
    background: #fff;
  }
}

/* ==========================================================================
   Register — people
   ========================================================================== */

/* Portraits are framed like cards: white ground, hairline edge, 4px radius.
   4:5 is forgiving of the mixed crops the practitioners supplied; faces sit
   in the upper part of every photo, so the crop anchors there. */
.portrait {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.person-head {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.person-id {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.person-id .tag {
  align-self: flex-start;
  margin-top: var(--space-1);
}

.card-title a {
  color: inherit;
  text-decoration: none;
}

.card-title a:hover {
  color: var(--color-accent-700);
}

/* Pushed to the card foot so cards in a grid row end level. */
.card-more {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: 14px;
}

.card-more a {
  text-decoration: none;
}

.card-more a:hover {
  text-decoration: underline;
}

.tag-pending {
  background: transparent;
  border-color: var(--color-neutral-300);
  color: var(--color-neutral-700);
}

.dd-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dd-list li + li {
  margin-top: 2px;
}

/* — profile page — */

.profile-head {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.profile-letters {
  font-size: 17px;
  color: var(--color-neutral-600);
  margin: 0 0 var(--space-4);
}

.profile-summary {
  font-size: 16px;
  line-height: 1.7;
  max-width: 58ch;
  margin: 0 0 var(--space-6);
}

.subject-list--single {
  grid-template-columns: 1fr;
}

.subject-list--single li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.qual-inst {
  color: var(--color-neutral-600);
  text-align: right;
}

.clinic-list {
  display: grid;
  gap: var(--space-4);
}

.clinic {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-3);
}

.clinic-name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

.clinic-where {
  font-size: 15px;
  color: var(--color-neutral-700);
  margin-top: var(--space-1);
}

.clinic-link {
  font-size: 14px;
  margin-top: var(--space-2);
}

.clinic-link a {
  text-decoration: none;
}

.clinic-link a:hover {
  text-decoration: underline;
}

/* Clinic logos sit in the same white, hairline-edged frame as portraits, so
   their own colours read as content inside the system rather than as UI. */
.clinic--logo {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.clinic-logo {
  width: 64px;
  height: 64px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
}

.clinic-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-rows {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  font-size: 15px;
}

.detail-row {
  display: flex;
  gap: var(--space-3);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-2);
}

.detail-row dt {
  flex: none;
  width: 190px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-500);
  line-height: 1.7;
}

.detail-row dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-row a {
  text-decoration: none;
}

.detail-row a:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .profile-head {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: var(--space-6);
  }
}

@media (max-width: 640px) {
  .profile-head {
    grid-template-columns: 1fr;
  }

  .portrait--lg {
    max-width: 200px;
  }

  .subject-list--single li {
    flex-direction: column;
    gap: 0;
  }

  .qual-inst {
    text-align: left;
  }

  .detail-row {
    flex-direction: column;
    gap: 2px;
  }

  .detail-row dt {
    width: auto;
    line-height: 1.4;
  }
}