/* ═══════════════════════════════════════════════════════════════════════
   SINKOR MEDICAL CENTER
   Direction D: the night half makes one claim, everything below is answers.

   ── The idea ────────────────────────────────────────────────────────────
   A district hospital's website is read by two people. One is frightened
   and needs to know where to go right now. The other is planning a Tuesday
   and needs to know which clinic runs and what to bring. The first is
   answered by the night half: one photograph, one sentence, one number.
   The second is answered by everything below it, which is a timetable
   rather than an argument.

   The rule that holds it together: THE HERO NEVER LISTS AND THE BOARD
   NEVER PERSUADES. Break that and this becomes two designs stapled
   together.

   ── Why it looks like this ──────────────────────────────────────────────
   Painted board signage, which is how information is actually posted in
   Monrovia: hard edges, heavy caps, high contrast, no ornament, one
   signal colour that means "read this first". It survives a cheap screen
   in daylight, which the previous warm-cream design did not.

   No rounded corners anywhere. That is deliberate and load bearing: the
   moment a card gets a radius this drifts back toward the generic
   soft-card look it was built to escape.

   ── Type ────────────────────────────────────────────────────────────────
   One family, Figtree Variable, self hosted (SIL OFL, see fonts/). Roles
   are separated by weight, case and tracking rather than by a second
   family, because signage does exactly that. 800 uppercase for anything
   that acts as a sign; 400 to 600 for reading.

   Self hosted rather than fetched from Google, which the previous build
   did on every page load. This site is read over Liberian mobile data and
   a third party request in the critical path is a real cost.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ground */
  --night:    #07120E;   /* the photograph's ground, green biased near black */
  --board:    #123B2A;   /* painted board green */
  --board-2:  #0C2A1E;   /* the darker panel */
  --chalk:    #FCFCF8;   /* paper, warm enough not to glare */
  --chalk-2:  #F3F4EE;

  /* one signal colour, and it means "read this first" */
  --signal:   #FFC400;
  --signal-2: #FFD34D;

  /* ink and rules. Neutrals carry a green bias so they read as chosen. */
  --ink:      #0A140F;
  --ink-2:    #2C3A33;
  --muted:    #5A6E63;
  --mist:     #C7DACF;
  --mist-2:   #9FBBAC;
  --rule:     #E3E7DF;
  --rule-2:   #D3DACF;

  --shell: 1180px;
  --gap: 28px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--board); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gap); }

.skip {
  position: absolute; left: -9999px;
  background: var(--signal); color: var(--ink); padding: 10px 16px; font-weight: 700; z-index: 99;
}
.skip:focus { left: 12px; top: 12px; }

/* ── utility bar ───────────────────────────────────────────────────── */
.util { background: var(--board-2); color: #fff; font-size: 13.5px; }
.util .shell { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 2px; padding-bottom: 2px; }
.util .l, .util .r { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/*
 * Padded to a real tap target rather than sized by its text. The emergency
 * number is the single most important thing to press on this site and it was
 * 21 pixels tall, which is a thumb-width miss on a phone held one handed by
 * somebody who is frightened.
 */
.util a { color: var(--mist); text-decoration: none; display: inline-block; padding: 11px 0; }
.util a:hover { color: #fff; }
.util .tel { color: var(--signal); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .util .l { display: none; }
  .util .shell { justify-content: space-between; }
  /* On a phone the number is the point of this bar, so it gets the room. */
  .util .tel { font-size: 15px; }
}

/* ── masthead ──────────────────────────────────────────────────────── */
.mast { background: var(--board); color: #fff; }
.mast .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-top: 16px; padding-bottom: 14px; }
.mark { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: #fff; }
.mark b { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; }
.mark em { font-style: normal; color: var(--signal); font-weight: 800; text-transform: uppercase; font-size: 17px; }

/*
 * NAVIGATION THAT EXISTS ON A TELEPHONE.
 *
 * This was `display: none` below 860px with no hamburger and no disclosure
 * behind it, so a phone had NO navigation at all: the only way between pages
 * was the footer, at the bottom of every one. On a site whose whole audience
 * reads it on a cheap phone that is the most serious thing that can be wrong,
 * and it survived a check that only asked whether anything overflowed.
 *
 * A scrolling strip rather than a hamburger, for three reasons. It needs no
 * JavaScript, so it cannot fail on a slow connection while the page renders
 * around it. It has no state, so it cannot be left open or stuck. And the
 * links are VISIBLE, which on a signboard is the entire point: a menu behind
 * a button is a menu most people never open.
 */
.nav {
  display: flex; gap: 20px; font-size: 15px;
  width: 100%; overflow-x: auto; scrollbar-width: none;
  /* Bleed to the screen edges so a scrolled strip does not look cut off. */
  margin: 2px calc(var(--gap) * -1) -4px; padding: 0 var(--gap) 4px;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  color: var(--mist); text-decoration: none; white-space: nowrap;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--signal); }

@media (min-width: 860px) {
  .mast .shell { flex-wrap: nowrap; padding-bottom: 16px; }
  .nav { width: auto; margin: 0; padding: 0; overflow: visible; gap: 22px; font-size: 14.5px; }
  .nav a { padding: 0 0 2px; }
}

/* ── the night hero: one claim ─────────────────────────────────────── */
.hero { position: relative; background: var(--night); display: grid; align-items: end; min-height: 520px; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) contrast(1.08) brightness(.55); }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,18,14,.6) 0%, rgba(7,18,14,.26) 34%, rgba(7,18,14,.95) 100%);
}
.hero-in { position: relative; z-index: 2; width: 100%; padding-top: 46px; padding-bottom: 40px; }
.hero h1 {
  margin: 0 0 16px; color: #fff; font-weight: 800; text-transform: uppercase;
  font-size: clamp(40px, 8vw, 88px); line-height: .92; letter-spacing: -0.042em;
  text-wrap: balance; max-width: 13ch;
}
.hero h1 em { font-style: normal; color: var(--signal); }
.hero .lead { margin: 0 0 24px; max-width: 44ch; font-size: 17px; color: var(--mist); }

.live {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
  background: var(--signal); color: var(--ink); font-weight: 800; font-size: 12px;
  letter-spacing: .09em; text-transform: uppercase; padding: 7px 13px;
}
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live i { animation: none; } }

/* ── page hero for interior pages: no photograph, no competition ───── */
.phero { background: var(--board); color: #fff; }
.phero .shell { padding-top: 44px; padding-bottom: 44px; }
.phero .eyebrow { color: var(--signal); }
.phero h1 {
  margin: 0 0 12px; color: #fff; font-weight: 800; text-transform: uppercase;
  font-size: clamp(30px, 5.4vw, 56px); line-height: .96; letter-spacing: -0.035em;
  text-wrap: balance; max-width: 18ch;
}
.phero .lead { margin: 0; max-width: 56ch; color: var(--mist); font-size: 17px; }

/* ── buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-block; text-decoration: none; font-weight: 750; font-size: 15px;
  padding: 14px 24px; background: var(--signal); color: var(--ink);
  border: 2px solid var(--signal); transition: background .16s, border-color .16s;
}
.btn:hover { background: var(--signal-2); border-color: var(--signal-2); }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.09); }
.btn.dark { background: var(--board); border-color: var(--board); color: #fff; }
.btn.dark:hover { background: var(--board-2); border-color: var(--board-2); }
.btn.sm { padding: 10px 17px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── the fact strip: what is open right now ────────────────────────── */
.facts { background: var(--board); }
.facts .shell { display: grid; gap: 18px; padding-top: 22px; padding-bottom: 22px; }
@media (min-width: 760px) { .facts .shell { grid-template-columns: repeat(3, 1fr); } }
.fact b { display: block; color: #fff; font-size: 15.5px; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.fact span { display: block; font-size: 13.5px; color: var(--mist-2); }

/* ── sections and headings ─────────────────────────────────────────── */
section { padding: 52px 0; }
section.tight { padding: 36px 0; }
.eyebrow {
  margin: 0 0 10px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--muted);
}
h2 {
  margin: 0 0 8px; font-size: clamp(24px, 3.4vw, 36px); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance;
}
h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.012em; }
.sub { margin: 0 0 26px; color: var(--muted); font-size: 16.5px; max-width: 56ch; }
.prose p { max-width: 66ch; }
.prose p + p { margin-top: 14px; }

/* ── the board: hard grid, black rules, no radius ──────────────────── */
.board { display: grid; gap: 3px; background: var(--ink); border: 3px solid var(--ink); }
@media (min-width: 800px) { .board.split { grid-template-columns: 1.85fr 1fr; } }

/*
 * `min-width: 0` is load bearing, not tidying.
 *
 * A grid child defaults to `min-width: auto`, which means it refuses to
 * shrink below its content. The clinic timetable is wider than a narrow
 * phone, so the panel pushed past the viewport and took the whole page
 * sideways with it, while the `.scroll-x` wrapper inside it never
 * engaged because the panel had already given it all the room it asked
 * for. The page must never scroll horizontally; the table may.
 */
.panel { background: var(--chalk); padding: 22px; min-width: 0; }
.panel.dark { background: var(--board-2); color: #fff; }
.panel h3 {
  margin: 0 0 14px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: #4A6B5B;
}
.panel.dark h3 { color: var(--signal); }

.days { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.days td { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px; vertical-align: baseline; }
.days tr:last-child td { border-bottom: 0; }
.days .d { font-weight: 800; text-transform: uppercase; font-size: 12.5px; letter-spacing: .06em; width: 5.2em; color: #2C5342; }
.days .c { font-weight: 600; }
.days .t { text-align: right; color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.days tr.always .c, .days tr.always .t { color: var(--board); font-weight: 700; }

.numbered { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.numbered li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.numbered li b { color: var(--signal); flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.panel.dark .numbered li { color: #D7E4DC; }

/* ── the emergency band: the only place signal fills a whole block ──── */
.emerg { background: var(--signal); color: var(--ink); padding: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.emerg b { display: block; font-size: clamp(19px, 3vw, 28px); text-transform: uppercase; font-weight: 800; letter-spacing: -0.022em; }
.emerg p { margin: 5px 0 0; font-size: 15px; max-width: 50ch; }
.emerg a { background: var(--ink); color: var(--signal); text-decoration: none; font-weight: 750; padding: 14px 24px; white-space: nowrap; }
.emerg a:hover { background: #16241C; }

/* ── card grids ────────────────────────────────────────────────────── */
.grid { display: grid; gap: 3px; background: var(--rule-2); border: 1px solid var(--rule-2); }
@media (min-width: 640px) { .grid.two { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .grid.three { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid.three { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--chalk); padding: 22px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; min-width: 0; }
a.card:hover { background: var(--chalk-2); }
.card .when { font-size: 13px; color: #2C5342; font-weight: 700; }
.card p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.card .more { margin-top: auto; padding-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--board); }

/* ── ticked lists ──────────────────────────────────────────────────── */
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; }
.ticks li::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 6px; background: var(--signal); }

/* ── split layouts ─────────────────────────────────────────────────── */
.split-2 { display: grid; gap: 34px; }
@media (min-width: 900px) { .split-2 { grid-template-columns: 1.1fr .9fr; align-items: start; } }

/* ═══════════════════════════════════════════════════════════════════
   IMAGE SLOTS — the one place to change when real photographs arrive.

   Every picture on the site is either the shared photograph reused at a
   different crop, or one of these designed panels. To replace a panel
   with a photograph: put the file in assets/img/, then swap the element
   for <img class="shot" src="assets/img/your-file.jpg" alt="…">. The
   surrounding layout does not change.

   The panels are not grey boxes waiting to be filled. They are drawn
   from the board: a flat green field with the hospital's own signal
   rule across it, so a page without a photograph still looks finished.
   That matters because some of these pages should never carry one.
   ═══════════════════════════════════════════════════════════════════ */
.shot { width: 100%; height: 340px; object-fit: cover; }
.shot.tall { height: 440px; }
.shot.wide { height: 260px; }
.shot.night { filter: saturate(.6) contrast(1.08) brightness(.62); }
.shot.day { filter: saturate(.82) contrast(1.03); }

.plate {
  position: relative; overflow: hidden; min-height: 300px;
  background: var(--board); color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 24px;
}
.plate::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 11px);
}
.plate::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--signal);
}
.plate b { position: relative; font-size: clamp(20px, 3vw, 28px); font-weight: 800; text-transform: uppercase; letter-spacing: -0.028em; line-height: 1.02; }
.plate span { position: relative; font-size: 14px; color: var(--mist-2); max-width: 34ch; }
.plate.tall { min-height: 440px; }
.plate.short { min-height: 220px; }

figure { margin: 0; }
figcaption { margin-top: 9px; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ── people ────────────────────────────────────────────────────────── */
.person { background: var(--chalk); padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.person .initials {
  width: 52px; height: 52px; background: var(--board); color: var(--signal);
  display: grid; place-items: center; font-weight: 800; font-size: 17px; margin-bottom: 8px;
}
.person b { font-size: 16px; }
.person .role { font-size: 13px; color: #2C5342; font-weight: 700; }
.person p { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* ── notices and dated items ───────────────────────────────────────── */
.notice { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.notice:last-child { border-bottom: 0; }
.notice .date { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.notice b { font-size: 17px; letter-spacing: -0.012em; }
.notice p { margin: 0; color: var(--muted); font-size: 15px; max-width: 68ch; }

/* ── callout ───────────────────────────────────────────────────────── */
.callout { border-left: 7px solid var(--signal); background: var(--chalk-2); padding: 18px 20px; }
.callout b { display: block; margin-bottom: 4px; }
.callout p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 66ch; }

/* ── footer ────────────────────────────────────────────────────────── */
footer { background: var(--board-2); color: var(--mist); padding: 46px 0 30px; margin-top: 10px; }
footer .fgrid { display: grid; gap: 28px; }
@media (min-width: 720px) { footer .fgrid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
footer h4 { margin: 0 0 12px; color: #fff; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
footer a { display: block; color: var(--mist); text-decoration: none; font-size: 14.5px; padding: 4px 0; }
footer a:hover { color: #fff; }
footer p { margin: 0 0 6px; font-size: 14.5px; }
footer .tel { color: var(--signal); font-weight: 700; font-variant-numeric: tabular-nums; }
footer .base { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: var(--mist-2); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* ── tables that must scroll rather than break the page ────────────── */
.scroll-x { overflow-x: auto; }