/* Winterfield Health — site stylesheet
   Tokens and values taken from the Claude Design handoff, brand/handoff.md.
   Hand-built static CSS, no build pipeline. */

:root {
  --wf-terracotta: #B4552D;
  --wf-terracotta-hover: #8F3F1F;
  --wf-olive: #4A5D43;
  --wf-gold: #E9A13B;
  --wf-gold-hover: #D18F2E;
  --wf-ink: #3B2E25;
  --wf-cream: #FAF5EF;
  --wf-body: #5C4F44;
  --wf-muted: #8A7A6C;
  --wf-on-terracotta: #FFF7F0;
  --wf-on-olive: #F2F5EF;
  --wf-on-ink: #FAF5EF;
  --wf-on-ink-muted: #D9CCBE;
  --wf-on-ink-dim: #C9B8A6;
  --wf-hairline: rgba(59, 46, 37, .1);
  --wf-hairline-strong: rgba(59, 46, 37, .12);
  --wf-tint: #F5EDE2;

  --wf-serif: 'Lora', Georgia, serif;
  --wf-sans: 'Nunito Sans', system-ui, -apple-system, sans-serif;

  --wf-max: 1200px;
  --wf-gutter: 40px;
}

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

body {
  margin: 0;
  background: var(--wf-cream);
  color: var(--wf-ink);
  font: 400 16px/1.65 var(--wf-sans);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--wf-terracotta); }
a:hover { color: var(--wf-terracotta-hover); }

h1, h2, h3 { font-family: var(--wf-serif); font-weight: 600; margin: 0; }

.wrap {
  max-width: var(--wf-max);
  margin: 0 auto;
  padding-left: var(--wf-gutter);
  padding-right: var(--wf-gutter);
  width: 100%;
}

.kicker {
  font: 700 11px var(--wf-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wf-muted);
}

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

.btn {
  display: inline-block;
  font: 700 14px var(--wf-sans);
  border-radius: 999px;
  padding: 12px 22px;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-primary { background: var(--wf-terracotta); color: var(--wf-on-terracotta); }
.btn-primary:hover { background: var(--wf-terracotta-hover); color: var(--wf-on-terracotta); }
.btn-gold { background: var(--wf-gold); color: var(--wf-ink); }
.btn-gold:hover { background: var(--wf-gold-hover); color: var(--wf-ink); }
.btn-sm { font-size: 13.5px; padding: 10px 18px; }

.link-more {
  font: 700 13.5px var(--wf-sans);
  color: var(--wf-terracotta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- announcement ---------- */

.announce {
  background: var(--wf-olive);
  color: var(--wf-on-olive);
  text-align: center;
  padding: 9px 16px;
  font: 600 12.5px var(--wf-sans);
}
.announce a {
  color: var(--wf-on-olive);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.announce a:hover { color: #fff; }

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

.site-header {
  background: var(--wf-cream);
  border-bottom: 1px solid var(--wf-hairline);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
}
.lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  text-decoration: none;
  color: inherit;
}
.lockup .word {
  font: 600 21px/1 var(--wf-serif);
  color: var(--wf-ink);
  white-space: nowrap;
}
.lockup .word em { font-style: normal; color: var(--wf-terracotta); }

.main-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font: 700 13.5px var(--wf-sans);
}
/* Two of the labels are two words joined by an ampersand, and a wrapped label
   reads as two nav items rather than one. They never wrap. The header stacks
   at 1180px instead, which is the width the single row stops fitting at. */
.main-nav a { color: var(--wf-body); text-decoration: none; white-space: nowrap; }
.main-nav a:hover { color: var(--wf-terracotta); }

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.icon-btn {
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--wf-body);
  text-decoration: none;
}
.icon-btn:hover { color: var(--wf-terracotta); }

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

.hero { background: var(--wf-tint); transition: background .5s; }
.hero .wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
  min-height: 440px;
}
.hero-copy { padding: 48px 0; }

/* Every slide's text occupies the same grid cell, so the cell is as tall as the
   longest of them and the hero holds one height while the carousel runs. The
   alternative, a fixed min-height, needs a number that is only right at one
   window width: measured on 2026-07-29, the tallest slide is 485px at a
   1280px window and 533px at 1001px, where the headline takes a fourth line.
   Picking 533 would leave 90px of dead space under the shortest slide on a
   laptop, and picking 485 would leave the jump in place on a small window. */
.hero-stack { display: grid; }
.hero-stack > .hero-slide { grid-area: 1 / 1; }
.hero-ghost { visibility: hidden; }

.hero-copy h1 {
  font-size: 42px;
  line-height: 1.15;
  margin-top: 12px;
  text-wrap: pretty;
}
.hero-copy p {
  font: 400 16px/1.65 var(--wf-sans);
  color: var(--wf-body);
  margin: 14px 0 0;
  max-width: 440px;
}
.hero-cta { margin-top: 22px; }

.hero-controls {
  display: flex;
  gap: 10px;
  margin-top: 34px;
  align-items: center;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #D8C7B2;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: width .3s, background .3s;
}
.dot[aria-current="true"] { width: 26px; background: var(--wf-terracotta); }
.arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--wf-terracotta);
  background: none;
  color: var(--wf-terracotta);
  font: 700 15px var(--wf-sans);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.arrow:first-of-type { margin-left: 14px; }
.arrow:hover { background: var(--wf-terracotta); color: var(--wf-on-terracotta); }

.hero-art { align-self: stretch; padding: 36px 0; }
.hero-photo {
  height: 100%;
  min-height: 360px;
  border-radius: 16px;
  overflow: hidden;
  background: #F0E4D6;
}

/* object-fit absorbs any mismatch between the source image's aspect ratio
   and the hole it sits in, so images do not need pre-cropping to exact sizes */
.hero-photo img,
.story-photo img,
.locations-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- action row ---------- */

.action-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: -34px;
  position: relative;
}
.action-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 6px 22px rgba(59, 46, 37, .1);
  text-decoration: none;
  color: inherit;
  transition: transform .15s;
}
.action-card:hover { transform: translateY(-3px); color: inherit; }
.action-card h3 { font-size: 17px; margin-top: 10px; }
.action-card p {
  font: 400 12.5px/1.55 var(--wf-sans);
  color: var(--wf-muted);
  margin: 4px 0 0;
}

/* ---------- section headers ---------- */

.band { padding-top: 64px; }
.band-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
}
.band-head h2 { font-size: 30px; line-height: 1.2; margin-top: 8px; }

/* ---------- story cards ---------- */

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 22px;
}
.story-card {
  background: #fff;
  border: 1px solid var(--wf-hairline);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s;
}
.story-card:hover { box-shadow: 0 6px 20px rgba(59, 46, 37, .12); color: inherit; }
.story-photo {
  height: 150px;
  overflow: hidden;
  background: #EAE0CE;
}
.story-body { padding: 16px 18px 18px; }
.story-tag {
  font: 700 10.5px var(--wf-sans);
  letter-spacing: .14em;
  color: var(--wf-olive);
}
.story-card h3 { font-size: 17px; line-height: 1.35; margin-top: 6px; }

/* ---------- locations band ---------- */

.locations {
  background: var(--wf-ink);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  overflow: hidden;
  margin-top: 64px;
}
.locations-copy { padding: 44px 48px; color: var(--wf-on-ink); }
.locations-copy .kicker { color: var(--wf-on-ink-dim); }
.locations-copy h2 { font-size: 30px; line-height: 1.2; margin-top: 10px; }
.locations-copy p {
  font: 400 14.5px/1.65 var(--wf-sans);
  color: var(--wf-on-ink-muted);
  margin: 12px 0 0;
  max-width: 400px;
}
.stats { display: flex; gap: 26px; margin-top: 22px; }
.stat-n { font: 600 30px var(--wf-serif); color: var(--wf-gold); }
.stat-l { font: 600 11.5px var(--wf-sans); color: var(--wf-on-ink-dim); }
.locations .btn { margin-top: 24px; }
.locations-map {
  min-height: 280px;
  background: var(--wf-ink);
  overflow: hidden;
}

/* ---------- news list ---------- */

.news-list {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  border-top: 1px solid var(--wf-hairline-strong);
}
.news-row {
  display: flex;
  gap: 24px;
  align-items: baseline;
  padding: 16px 4px;
  border-bottom: 1px solid var(--wf-hairline-strong);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.news-row:hover { background: var(--wf-tint); color: inherit; }
.news-date {
  font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--wf-muted);
  flex: none;
  width: 80px;
}
.news-title { font: 600 16.5px var(--wf-serif); flex: 1; }
.news-read { font: 700 13px var(--wf-sans); color: var(--wf-terracotta); }

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

.site-footer {
  background: var(--wf-ink);
  color: var(--wf-on-ink-muted);
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 36px;
}
.footer-lockup { display: flex; align-items: center; gap: 10px; }
.footer-lockup .word { font: 600 19px var(--wf-serif); color: var(--wf-on-ink); }
.footer-lockup .word em { font-style: normal; color: var(--wf-gold); }
.footer-address {
  font: 400 13px/1.7 var(--wf-sans);
  margin-top: 14px;
  font-style: normal;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 600 13px var(--wf-sans);
}
.footer-col h2 {
  font: 700 10.5px var(--wf-sans);
  letter-spacing: .14em;
  color: var(--wf-muted);
  margin: 0;
}
.footer-col a { color: var(--wf-on-ink-muted); text-decoration: none; }
.footer-col a:hover { color: var(--wf-on-ink); }

.footer-bottom { border-top: 1px solid rgba(250, 245, 239, .15); }
.footer-bottom .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.copyright { font: 400 11.5px var(--wf-sans); color: var(--wf-muted); }
.footer-controls { display: flex; gap: 8px; }
.pill-control {
  font: 700 11.5px var(--wf-sans);
  color: var(--wf-on-ink);
  border: 1px solid rgba(250, 245, 239, .35);
  padding: 7px 12px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.pill-control:hover { background: rgba(250, 245, 239, .12); color: var(--wf-on-ink); }

/* ---------- not-built page ---------- */

.nb-main { padding: 72px 0 96px; flex: 1; }
.nb-card {
  background: #fff;
  border: 1px solid var(--wf-hairline);
  border-radius: 14px;
  padding: 40px 44px;
  max-width: 720px;
  box-shadow: 0 6px 22px rgba(59, 46, 37, .06);
}
.nb-card h1 { font-size: 32px; line-height: 1.2; margin-top: 10px; }
.nb-lede {
  font: 400 16px/1.65 var(--wf-sans);
  color: var(--wf-body);
  margin: 14px 0 0;
}
.nb-facts {
  margin: 28px 0 0;
  border-top: 1px solid var(--wf-hairline-strong);
}
.nb-facts > div {
  display: flex;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wf-hairline-strong);
}
.nb-facts dt {
  font: 700 11px var(--wf-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wf-muted);
  flex: none;
  width: 150px;
  padding-top: 3px;
}
.nb-facts dd {
  margin: 0;
  font: 400 15px/1.5 var(--wf-sans);
  color: var(--wf-ink);
}
.nb-id {
  font: 600 15px ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--wf-tint);
  padding: 3px 9px;
  border-radius: 5px;
  user-select: all;
}
.nb-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* The cartoon, shared by not-built.html and error.php. Beside the heading on a
   wide screen, above it on a narrow one. The illustration's own background is
   the same cream as the page, so it needs no frame to sit down properly. */
.nb-top {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.nb-art img { display: block; width: 100%; height: auto; border-radius: 10px; }
.nb-intro > :first-child { margin-top: 0; }
/* A requested address can be long and has no spaces to break at. */
.nb-path {
  font: 400 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .nb-top { grid-template-columns: 1fr; gap: 20px; }
  .nb-art { max-width: 300px; }
}

/* The header stacks earlier than everything else. Lockup, five nav labels, the
   search icon and two buttons need about 1165px of content box, so below 1180px
   the nav takes its own full-width row and wraps between labels, never inside
   one. Measured; re-measure if a label is added or lengthened. */
@media (max-width: 1180px) {
  .site-header .wrap { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; }
  .main-nav { margin-left: 0; order: 3; width: 100%; flex-wrap: wrap; gap: 16px 22px; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 1000px) {
  :root { --wf-gutter: 24px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-art { padding-bottom: 0; }
  .action-row { grid-template-columns: repeat(2, 1fr); }
  .story-grid { grid-template-columns: 1fr; }
  .locations { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nb-card { padding: 28px 24px; }
  .nb-facts > div { flex-direction: column; gap: 4px; }
  .nb-facts dt { width: auto; }
}

@media (max-width: 620px) {
  .hero-copy h1 { font-size: 32px; }
  .action-row { grid-template-columns: 1fr; margin-top: 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .news-row { flex-wrap: wrap; gap: 8px; }
  .news-date { width: auto; }
}