/* Silverleaf Eldercare base: fonts, reset, typography, accessibility floor. */

/* Self hosted fonts, SIL Open Font License, latin subsets, no CDN. */
@font-face {
  font-family: "Libre Baskerville";
  src: url("../fonts/libre-baskerville-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("../fonts/libre-baskerville-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/libre-franklin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
  font-weight: 700;
}
h1 { font-size: var(--fs-5); }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-2); }
h4 { font-size: var(--fs-1); }

p { margin: 0 0 var(--sp-4); max-width: 65ch; }

/* Anchor targets clear the sticky header. Without this an in page jump, and
   this site has several, scrolls the target flush to the viewport top where
   the header then covers its own heading. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }

a {
  color: var(--text-strong);
  text-decoration-color: var(--accent-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
a:hover { color: var(--accent-strong); }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Accessibility floor */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: calc(-1 * var(--sp-9));
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-3) var(--sp-5);
  transition: top 200ms var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

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

/* Uppercase eyebrow label, 15px minimum, never used for running text */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--accent-strong);
  display: block;
  margin-bottom: var(--sp-3);
}
.on-ink .eyebrow { color: var(--champagne); }

/* Layout helpers */
.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.section { padding-block: var(--sp-8); background: var(--bg); color: var(--text); }
.section-alt { background: var(--bg-alt); }

/* Imagery treatment (amended 2026-08-06): ALL imagery renders in color with
   the same subtle warm grade. The illustrative vs real distinction is carried
   by captions and alt text, never by grayscale. Since 2026-09-09 there is no
   grayscale anywhere on the site at all: the home hero's scroll release was
   retired and the hero plays in full color from the first frame. .photo still
   marks generated or ambient imagery and .photo-real marks real photography so
   the semantic distinction survives in markup. */
.photo,
.photo-real {
  /* subtle unified warm grade, never a visible tint */
  filter: saturate(1.05) sepia(0.05) contrast(1.02);
}

/* ------------------------------------------------- D1 editorial layer */
/* Flagship display type */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-6);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-variation-settings: "opsz" 144;
  font-weight: 620;
}
.display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-variation-settings: "opsz" 100;
  font-weight: 600;
}
.accent-i { font-style: italic; font-variation-settings: "opsz" 144; font-weight: 480; }

/* Eyebrow, refined: champagne dot and hairline */
.eyebrow-line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow-line::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--champagne);
  flex: none;
}
/* The trailing hairline was retired SITEWIDE on 2026-08-26 by operator
   instruction, page by page and then globally: eyebrows keep the champagne
   dot and nothing after the label. */

/* Centered section pattern, same sweep: headers, subtext, and CTAs center;
   cards and FAQ accordions stay left unless the --all variant asks for them
   too. Paragraphs need margin-inline auto because the base p max-width
   otherwise anchors their box left inside a centered container. */
.sec-center { text-align: center; }
.sec-center h1, .sec-center h2, .sec-center p, .sec-center blockquote { margin-inline: auto; }
.sec-center .card, .sec-center .faq-acc { text-align: left; }
.sec-center .card p, .sec-center .faq-acc p { margin-inline: 0; }
.sec-center--all .card { text-align: center; }
.sec-center--all .card p { margin-inline: auto; }

/* An image that stretches to its split column's full height */
.fill-img { height: 100%; display: block; }
.fill-img img { height: 100%; object-fit: cover; }

/* Four-up card grid where cards are short enough to run one row. Doubled
   selector: .card-grid sets its own columns later in the cascade. */
@media (min-width: 1000px) { .card-grid.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Texture atmosphere: sections stop being flat hex fills. Overlays sit
   behind content and stay faint enough to never touch contrast. */
.textured { position: relative; isolation: isolate; }
.textured > * { position: relative; z-index: 1; }
.textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 480px;
}
.tex-limestone::before { background-image: url("../img/tex-limestone-tile.webp"); opacity: 0.05; }
.tex-linen::before { background-image: url("../img/tex-linen-tile.webp"); opacity: 0.06; }
.tex-oak::before { background-image: url("../img/tex-oak-tile.webp"); opacity: 0.05; }
.on-ink.tex-limestone::before, .on-ink.tex-linen::before, .on-ink.tex-oak::before { opacity: 0.08; mix-blend-mode: screen; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../img/grain-tile.png") repeat;
  background-size: 160px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* Champagne ring ornament, echoing the logo. Place inside a .textured or
   position relative section with overflow hidden. */
.ring-ornament {
  position: absolute;
  border: 1.5px solid var(--champagne);
  border-radius: 50%;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}
.ring-ornament.is-large { width: 34rem; height: 34rem; }
.ring-ornament.is-medium { width: 18rem; height: 18rem; }
.clip { overflow: hidden; }

/* Ring-cropped image */
.ring-crop {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1.5px solid var(--champagne);
  padding: var(--sp-2);
  background: var(--bg-card);
}
.ring-crop img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }

/* Drop cap for editorial paragraphs */
.drop-cap::first-letter {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-size: 3.2em;
  line-height: 0.8;
  float: left;
  padding-right: 0.12em;
  color: var(--accent-strong);
}

/* Oversized ghost numeral for numbered editorial sequences */
.ghost-num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--champagne);
  opacity: 0.75;
}

/* Thin champagne rule, echoes the logo ring */
.rule-champagne {
  border: 0;
  border-top: 2px solid var(--champagne);
  width: var(--sp-8);
  margin: var(--sp-6) 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    /* Skip transitions, never withhold the end state. Color reveal still
       happens, instantly. */
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}