/* ==========================================================================
   Salud Borincana landing page
   Palette sampled from the founder's own photographs of Puerto Rico:
   interior forest green and ocean teal. The accent is the blue of the Puerto
   Rican flag, at Enrique's request (2026-08-26); it replaced the heliconia
   orange the first build used.
   ========================================================================== */

:root {
  --ink:          #14211c;
  --forest:       #133c2e;
  --forest-deep:  #0b2a20;
  --teal:         #1a7a78;
  --teal-dark:    #135c5b;
  /* The flag blue, sampled from the image Enrique sent (#0044ff). It clears
     4.5:1 with white text on its own (6.42:1), so unlike the old orange it can
     carry buttons as well as rules. Hover darkens so contrast only improves.
     The token names keep their old "coral" spelling on purpose: every rule in
     this file reads them, and renaming buys nothing. */
  --coral:        #0044ff;  /* button fill, white text: 6.42:1 */
  --coral-hover:  #0039d6;  /* darker on hover: 8.22:1 */
  --coral-accent: #0044ff;  /* rules and dots */
  --sand:         #f7f2e9;
  --sand-deep:    #ede4d5;
  --white:        #ffffff;
  --muted:        #5c6b64;
  --line:         rgba(19, 60, 46, 0.14);

  --shell:      1160px;
  --radius:     14px;
  --radius-lg:  22px;

  --shadow-card: 0 18px 44px -22px rgba(11, 42, 32, 0.34);
  --shadow-lift: 0 28px 64px -28px rgba(11, 42, 32, 0.42);

  --serif: "Merriweather", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------- baseline */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

/* The width/height attributes on each <img> reserve layout space and prevent
   shift while loading. Without height:auto those attributes count as a definite
   height, which overrides every CSS aspect-ratio below. */
img { height: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700; /* Merriweather 600 reads light at these sizes */
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-dark); }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.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;
}

.skip {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--white);
  color: var(--forest);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip:focus { top: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.shell.narrow { max-width: 720px; }

.kicker {
  font-family: var(--sans);
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 0.85rem;
}
.kicker.centered,
.section-title.centered { text-align: center; }

.section-title {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  margin-bottom: 1.1rem;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease,
              border-color 0.16s ease, box-shadow 0.16s ease;
}

.btn-primary {
  background: var(--coral);
  color: var(--white);
  /* A forest shadow, not a blue glow: the blue stays on the button itself
     and stops bleeding into the photograph (audit 8/27). */
  box-shadow: 0 12px 26px -14px rgba(11, 42, 32, 0.55);
}
.btn-primary:hover {
  background: var(--coral-hover);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 1.05rem 2.3rem;
  font-size: 1.075rem;
}

/* On the hero photo: white outline, forest scrim behind the label so the
   text keeps contrast over bright sky (same worst-pixel rule as the header). */
.btn-outline {
  border-color: rgba(255, 255, 255, 0.9);
  color: var(--white);
  background: rgba(11, 42, 32, 0.45);
}
.btn-outline:hover {
  background: rgba(11, 42, 32, 0.65);
  border-color: var(--white);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------- header */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color 0.28s ease, box-shadow 0.28s ease;
}
.site-header.is-solid {
  background: rgba(247, 242, 233, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  text-decoration: none;
  transition: color 0.28s ease;
}
.site-header.is-solid .wordmark { color: var(--forest); }

.wordmark-dot { color: var(--coral-accent); }

.nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav a {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  transition: background-color 0.16s ease, color 0.28s ease;
}
.nav a:hover { background: rgba(255, 255, 255, 0.16); }

.site-header.is-solid .nav a { color: #2c3f37; }
.site-header.is-solid .nav a:hover { background: rgba(19, 60, 46, 0.08); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 11px;
  cursor: pointer;
}
.site-header.is-solid .nav-toggle {
  background: rgba(19, 60, 46, 0.07);
  border-color: var(--line);
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 19px; height: 2px;
  margin-inline: auto;
  background: var(--white);
  border-radius: 2px;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

.site-header.is-solid .nav-toggle-bars,
.site-header.is-solid .nav-toggle-bars::before,
.site-header.is-solid .nav-toggle-bars::after { background: var(--forest); }

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(92svh, 820px);
  padding: 8rem 0 clamp(6rem, 14vw, 10rem);
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 55%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Two scrims, not one. The vertical pass seats the text against the lower
     frame; the horizontal pass guarantees the left-aligned headline has a dark
     bed even where it crosses bright sky. Measured worst-case white-on-backdrop
     across this pair clears 4.5:1. */
  /* Third pass, added at the 2026-08-27 audit: a band under the fixed header
     while it is transparent. The nav links and wordmark sit over the hero's
     brightest sky, and measured on real pixels their worst case was 1.1:1.
     The band takes the header zone to 4.5:1 and fades out by 220px so the
     photograph is untouched below. */
  background:
    linear-gradient(to bottom,
      rgba(11, 42, 32, 0.82) 0,
      rgba(11, 42, 32, 0.74) 96px,
      rgba(11, 42, 32, 0) 220px),
    linear-gradient(to right,
      rgba(11, 42, 32, 0.80) 0%,
      rgba(11, 42, 32, 0.58) 38%,
      rgba(11, 42, 32, 0.20) 70%,
      rgba(11, 42, 32, 0.06) 100%),
    linear-gradient(to bottom,
      rgba(11, 42, 32, 0.55) 0%,
      rgba(11, 42, 32, 0.32) 24%,
      rgba(11, 42, 32, 0.62) 58%,
      rgba(11, 42, 32, 0.88) 100%);
}

.hero-content { color: var(--white); }

.hero .eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 1rem;
}

.hero h1 {
  font-size: clamp(2.3rem, 6.6vw, 4rem); /* Merriweather runs wider than Fraunces */
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1.15rem;
  text-shadow: 0 2px 26px rgba(11, 42, 32, 0.4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* ---------------------------------------------------------------- mission */

/* Tighter than the other sections: the card already carries a large top
   margin, and the old value left a ~235px hole before the team section. */
.mission { padding-bottom: clamp(3rem, 6vw, 4.5rem); }

.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

/* The Hestia move the reference site uses: a card riding up over the hero. */
.mission-card {
  position: relative;
  margin-top: clamp(-7rem, -9vw, -4.5rem);
  padding: clamp(2.25rem, 5vw, 3.5rem);
}
/* A short blue rule inside the card, not a full-width stripe across the
   photograph: the blue marks the statement without fighting the hero. */
.mission-card::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--coral-accent);
  margin-bottom: 1.4rem;
}

.mission-statement {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--forest);
  margin: 0;
  max-width: 46ch;
}

/* ------------------------------------------------------------------- team */

.team {
  background: var(--white);
  padding-block: clamp(4rem, 9vw, 7rem);
}

.photo-caption {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Cards for the people who join the page later (CTO, first physician). Unused
   until their material exists; see the comment in index.html. */
.team-cards {
  display: grid;
  gap: 1.5rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
/* No aspect-ratio crop here: the card photo runs at its own proportions
   (Cody asked for the full frame), and width/height on the <img> hold the
   space. */
.team-card img {
  width: 150px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 0.85rem;
}
/* Portrait beside the words once there is room, so the card fills its column
   instead of stacking a small photo over a wide paragraph (audit 8/27). */
@media (min-width: 600px) {
  .team-card {
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 1.35rem;
    align-items: start;
  }
  .team-card picture { grid-row: 1 / 4; }
  .team-card img { margin-bottom: 0; }
}
.team-card h3 {
  font-size: 1.12rem;
  color: var(--forest);
  margin-bottom: 0.2rem;
}
.team-role {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--teal-dark);
  margin-bottom: 0.6rem;
}
.team-card p { color: #33453d; font-size: 1rem; }

.split {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}

.split-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Beside a text column the night photo stands tall (4:5) on wide screens,
   anchored a little below centre so both faces stay in frame. It stops
   floating mid-column and takes a smaller share of the white section. */
@media (min-width: 900px) {
  .split-media img { aspect-ratio: 4 / 5; object-position: 50% 60%; }
}

/* ---------------------------------------------------------------- founder */

.founder {
  padding-block: clamp(4rem, 9vw, 7rem);
  background:
    linear-gradient(to bottom, var(--sand) 0%, var(--sand-deep) 100%);
}

.founder-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.founder-portrait img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.founder-role {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--teal-dark);
  text-align: center;
}

/* A reading measure: the column used to run to ~78 characters. */
.founder-body { max-width: 62ch; }
.founder-body p { color: #33453d; }

/* ---------------------------------------------------------------- contact */

.contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Sized for a heading and one line while there is no inbox; grows back
     with the mailto button. */
  padding-block: clamp(4rem, 9vw, 6rem);
  text-align: center;
}

.contact-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.contact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(11, 42, 32, 0.84) 0%,
    rgba(11, 42, 32, 0.7) 45%,
    rgba(11, 42, 32, 0.84) 100%);
}

.contact-content { color: var(--white); }

.contact h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); /* same scale as every other h2 */
  color: var(--white);
  margin-bottom: 1rem;
}
.contact p {
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 2.2rem;
  color: rgba(255, 255, 255, 0.9);
}

/* A sentence, not a dashed wireframe pill: the notice should read as a
   statement, not as a button that does nothing (audit 8/27). */
.contact-pending {
  display: inline-block;
  padding: 0;
  border: 0;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* ----------------------------------------------------------------- footer */

/* Sand, not a second dark block under the dark contact panel: the waterfall
   is the closing image and the footer is a quiet line beneath it. */
.site-footer {
  background: var(--sand-deep);
  color: #4f5f58; /* --muted is 4.45:1 on sand-deep; this clears 5:1 */
  padding-block: 2.75rem;
}
.footer-inner { text-align: center; }

.footer-mark {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--forest);
  margin: 0 0 0.4rem;
}
.footer-note {
  font-size: 0.9rem;
  margin: 0;
}

/* ------------------------------------------------------------ breakpoints */

@media (min-width: 900px) {
  /* Photo narrower than the words, both hung from the top, so the heading,
     the card and the photograph share one baseline instead of the card
     floating beside an empty column (audit 8/27). */
  .split { grid-template-columns: 5fr 7fr; align-items: start; }
  .team .split-media { order: -1; }

  .founder-layout {
    grid-template-columns: 320px 1fr;
    align-items: start;
  }
  /* The founder heading lines up with the body column rather than centring
     over a left-weighted grid. */
  .founder .centered {
    text-align: left;
    margin-left: calc(320px + clamp(2rem, 5vw, 3.5rem));
  }
}

@media (max-width: 767px) {
  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.75rem clamp(1.25rem, 5vw, 2.5rem) 1.25rem;
    background: rgba(247, 242, 233, 0.98);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 34px -20px rgba(11, 42, 32, 0.45);
    display: none;
  }
  .nav.is-open { display: flex; }

  .nav a,
  .site-header.is-solid .nav a {
    color: var(--forest);
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
  }

  /* An open menu is attached to its bar: the header goes solid with it, so
     the sheet is not hanging off a transparent strip over the photo. */
  .site-header:has(.nav.is-open) {
    background: rgba(247, 242, 233, 0.98);
    box-shadow: 0 1px 0 var(--line);
  }
  .site-header:has(.nav.is-open) .wordmark { color: var(--forest); }
  .site-header:has(.nav.is-open) .nav-toggle-bars,
  .site-header:has(.nav.is-open) .nav-toggle-bars::before,
  .site-header:has(.nav.is-open) .nav-toggle-bars::after { background: var(--forest); }

  .hero { min-height: 88svh; }
  .mission-card { margin-top: -3.5rem; }

  /* Matches the sizes="70vw" the HTML already declares for this image. */
  .founder-portrait { max-width: min(70vw, 280px); margin-inline: auto; }
}

/* --------------------------------------------------------------- a11y prefs */

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

@media print {
  .site-header, .hero-media, .contact-media, .nav-toggle { display: none; }
  body { background: #fff; }
}