/* ============================================================
   The Newborn Blueprint Method — production layer.
   Loads last, after styles.css -> coaching.css -> shared-offer.css,
   so it can only add; the designer's cascade order is untouched.
   Scoped to the two Blueprint pages (nothing else links this file).
   ============================================================ */

/* styles.css declares this family against uploads/Silhouette.*, a design-tool
   path that 404s in production. Same family redeclared here against the real
   location; last matching @font-face wins, and pages that do not load this
   file keep their existing Pinyon Script fallback. */
@font-face {
  font-family: "Silhouette";
  src: url('/fonts/Silhouette.otf') format('opentype'),
       url('/fonts/Silhouette.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- photos (replacing the design tool's <image-slot> elements) ---- */

.nb-photo { display: block; width: 100%; object-fit: cover; }

/* Expecting, full-bleed hero band. The design tool stored this crop as a pan
   of -8.584579556215418% of the FRAME height, not a fixed object-position, so
   the framing has to be derived from the same height value to hold at every
   width. The percentage in object-position resolves against (frame - image),
   the length against the frame, which reproduces the pan exactly. */
.hero-cover-photo { --nb-hero-h: clamp(300px, 42vw, 520px); }
.hero-cover-photo .nb-photo {
  height: var(--nb-hero-h);
  object-position: 50% calc(50% - 0.08584579556215418 * var(--nb-hero-h));
}

/* Postpartum, hero right column */
.hero--editorial .art .nb-photo {
  height: clamp(340px, 44vw, 560px);
  border-radius: 3px;
  object-position: 50% 50%;
}

/* bio portrait, both pages (.mat > img already carries the 3px radius) */
.kristen .mat .nb-photo { height: 520px; object-position: 50% 50%; }

/* ---- keyboard focus ----
   The prototype authored no focus styles at all, which is a WCAG 2.4.7
   failure the handoff asked not to carry over. Visible only on keyboard
   focus, so the mouse-driven design is unchanged. */
a:focus-visible,
summary:focus-visible,
details.faq > summary:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}
/* The investment button is the one link sitting on a dark sage panel; the
   offset ring lands on that panel, so it needs the light outline. */
.invest-cta a:focus-visible {
  outline-color: #fbfcfb;
}

/* ---- mobile header ----
   The wordmark and the CTA pill share one flex row. The pill is nowrap, so on
   narrow screens flexbox took the space out of the wordmark instead: the 1000x159
   artwork rendered 88x25 on Expecting and 123x25 on Postpartum, squashing the
   logo horizontally. Expecting's longer label ("Enroll before baby arrives")
   also pushed the pill outside the bar below 390px. Giving each its own row
   restores the header TOKENS 4.8 describes: full wordmark, CTA pill, no
   clipping and no distortion. Scoped by file -- only these two pages link this. */
@media (max-width: 560px) {
  .site-header .bar {
    flex-wrap: wrap;
    row-gap: 10px;
    justify-content: center;
  }
  .site-header .wordmark img { max-width: none; }
  .site-header .nav { width: 100%; }
  .site-header .nav .btn-primary {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}