/* ==========================================================================
   clarabowron.com — static build
   One stylesheet for all seven pages. Holds only what an inline style cannot
   do: resets, keyframes, pseudo-states, the accessibility block, and the
   responsive breakpoints. Everything else stays inline on the elements.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background: #E4E0D8;
  color: #20241C;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: #A87433; }
:is(nav, footer, header) a:hover { color: inherit; opacity: .82; }

::selection { background: rgba(190, 142, 78, .25); }

img { max-width: 100%; }

/* --------------------------------------------------------------- keyframes */
@keyframes bpwCue  { 0%, 100% { transform: translateY(0);   opacity: .5; }
                     50%      { transform: translateY(9px); opacity: 1; } }
@keyframes bpwGlow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes bpwRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The underline that draws itself beneath "practical skills" in the hero. */
.bpw-mark { position: relative; color: #D6AE6E; white-space: nowrap; }
.bpw-mark::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1.5px; background: rgba(214, 174, 110, .55);
  transform-origin: left center;
  animation: bpwRule 1.1s cubic-bezier(.22, .61, .36, 1) 1.1s both;
}

/* --------------------------------------------------------- pseudo-states */
/* --------------------------------------------------- decorative flex kids
   Fixed-size ornaments inside a flex row with text. Without flex:none the row
   shrinks them the moment the text wraps — a 6px dot renders as a ~4px sliver
   and reads as a rendering artifact. Wrapping is viewport-dependent, so this
   only shows at certain widths; at 320-430px every one of these rows wraps. */
.bpw-dot, .bpw-rule, .bpw-tick { flex: none; }

.bpw-row { transition: padding-left .5s cubic-bezier(.22, .61, .36, 1); }
.bpw-row:hover { padding-left: 10px; }

.bpw-booklink { transition: opacity .3s ease; }
.bpw-booklink:hover { opacity: .88; }

.bpw-paper { transition: background-color .3s ease; }
.bpw-paper:hover { background-color: rgba(190, 142, 78, .05); }

.bpw-field { transition: border-color .2s ease; }
.bpw-field:focus { border-color: #BE8E4E; }

.bpw-pill { transition: transform .3s ease, box-shadow .3s ease; }
.bpw-pill:hover { transform: translateY(-1px); }

/* ----------------------------------------------------------------- FAQ
   Native <details>/<summary>. The Design Component used a click handler on a
   plain <div>, which could not be opened from the keyboard at all — this is
   both simpler and the accessible version. */
.bpw-faq { border-top: 1px solid rgba(32, 36, 28, .16); }
.bpw-faq summary {
  display: flex; align-items: center; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
}
.bpw-faq summary::-webkit-details-marker { display: none; }
.bpw-faq summary::marker { content: ''; }
.bpw-faq-sign {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(32, 36, 28, .25);
  color: #BE8E4E; font-size: 20px; font-family: 'Newsreader', serif;
  transition: border-color .3s ease;
}
.bpw-faq-sign::before { content: '+'; }
.bpw-faq[open] .bpw-faq-sign::before { content: '\2013'; }
.bpw-faq summary:hover .bpw-faq-sign { border-color: rgba(190, 142, 78, .8); }

/* --------------------------------------------------------------- reveals */
/* Fail-open by design: elements are visible unless JS explicitly hides the
   below-fold ones, and an unconditional failsafe restores everything at 2.6s.
   Deleting site.js must never leave the page blank. */
[data-reveal] { opacity: 1; }

/* ==========================================================================
   Accessibility
   ========================================================================== */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid #BE8E4E;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(20, 26, 16, .45);
}
input:focus-visible, textarea:focus-visible {
  outline: 3px solid #BE8E4E;
  outline-offset: 1px;
  box-shadow: none;
}

.bpw-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #1E251A; color: #F3EDE1; padding: 14px 24px;
  font-size: 14px; font-weight: 600; border-radius: 0 0 4px 0;
}
.bpw-skip:focus { left: 0; }

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

main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Responsive
   Verified at 320 / 390 / 430 / 768 / 1024 / 1280.
   ========================================================================== */

/* ---- 1024px: asymmetric two-column layouts even up ---- */
@media (max-width: 1024px) {
  .bpw-statement { gap: clamp(24px, 4vw, 48px) !important; }
  .bpw-statement-b { margin-top: clamp(40px, 8vw, 120px) !important; }
}

/* ---- 900px: everything two-column becomes one ---- */
@media (max-width: 900px) {
  .bpw-statement,
  .bpw-approach,
  .bpw-concerns,
  .bpw-clara,
  .bpw-contact,
  .bpw-hero-2col,
  .bpw-creds,
  .bpw-qa,
  .bpw-strip { grid-template-columns: minmax(0, 1fr) !important; }

  .bpw-statement-b { margin-top: 8px !important; }

  /* The photo that bleeds off the right edge on desktop sits flush on mobile. */
  .bpw-bleed { margin-right: 0 !important; border-radius: 4px !important; }

  /* Clara's portrait leads on mobile rather than sitting beside the copy. */
  .bpw-clara-photo { order: -1; }

  .bpw-strip-cta { justify-content: flex-start !important; }
}

/* ---- 900px: navigation stacks ---- */
@media (max-width: 900px) {
  /* Wordmark on its own line, then the links and the gold pill share one row.
     Letting the pill take a third row made the fixed nav ~157px tall — a fifth
     of a phone screen, permanently. */
  .bpw-nav {
    flex-flow: row wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px 18px !important;
    padding: 12px 18px !important;
  }
  .bpw-nav-side {
    flex: none !important;
    width: auto;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }
  /* Comfortable thumb targets. WCAG 2.1 AA sets no minimum, but 18px-tall
     links in a stacked row are fiddly in practice — 44px is the usable size.
     Achieved with min-height + centring rather than margin, so the row's
     visual spacing is unchanged. */
  .bpw-nav-side a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
  }
  /* The gold pill is hidden on phones. With it, the links and the button can't
     share a row at 390px, so the fixed nav became two rows — 157px, a fifth of
     the screen, on every scroll. The consult CTA is never more than a thumb
     away regardless: it's in every page hero, the dark consult band, and the
     footer. This also makes mobile match Home, which omits the nav pill by
     design (client-confirmed). Restore it only alongside a shorter label. */
  .bpw-nav-side .bpw-pill { display: none !important; }
  .bpw-nav-side:empty { display: none !important; }
  .bpw-wordmark { order: -1; width: 100%; }
  .bpw-wordmark-name { font-size: 31px !important; }
  .bpw-tagline { display: none !important; }

  /* Taller stacked nav needs more clearance under it. */
  .bpw-page-hero { padding-top: clamp(172px, 26vw, 224px) !important; }

  /* Footer links get the same thumb-sized targets as the nav. */
  .bpw-footer-cols a,
  .bpw-fine a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .bpw-footer-cols > div { gap: 2px !important; }
  .bpw-fine { gap: 4px !important; }

  /* ---- Home hero on phones ----
     The hero photo is LANDSCAPE. Cover-cropped into a tall portrait screen it
     zooms enormously — the girl's face fills the whole frame, so there is no
     dark area left to put text on and no object-position that rescues it.
     So on phones the photo is given the top of the screen only, fading into
     solid dark, and the copy sits below it. Do not "restore" the full-bleed
     desktop treatment here; it was tried and it puts the headline across her
     face. */
  .bpw-hero { align-items: flex-start !important; background: #34322C !important; }
  .bpw-hero-layer {
    inset: 0 0 auto 0 !important;
    height: 54svh !important;
    /* Fade the PHOTO out, rather than painting a gradient over it. The old
       approach drew the fade as a percentage of the header's height, so where
       it landed depended on how tall the copy made the page — on Home (a clean
       100svh) the solid point coincided exactly with the photo's bottom edge
       and produced a hard line, while Approach happened to look right. Masking
       the layer itself is always relative to the photo band. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.55) 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.55) 82%, transparent 100%);
  }
  .bpw-hero-photo { object-position: 58% 22% !important; }
  /* Start the copy below the photo band rather than bottom-aligning it — with
     bottom alignment, long copy grows upward and lands back on her face. */
  .bpw-hero-inner {
    margin-top: 0 !important;
    padding-top: calc(48svh + 20px) !important;
    padding-bottom: 8vh !important;
  }
  /* The drifting bottom band is a desktop device — over the flat brown on a
     phone it can show a faint moving edge, so it's off below 900px. */
  .bpw-hero-band { display: none !important; }

  /* Kill the desktop left-to-right wash — it darkens the photo, not the text. */
  .bpw-hero-wash { background: none !important; }
  /* Only a light top darkening now, so the nav stays legible over the photo.
     The photo-to-flat transition is handled by the mask above. */
  .bpw-hero-scrim {
    background: linear-gradient(180deg,
      rgba(38,36,32,.54) 0%,
      rgba(38,36,32,.15) 22%,
      rgba(38,36,32,0) 44%) !important;
  }

  /* Approach hero: same landscape-photo-in-a-portrait-screen problem as Home.
     Give the photo the top band, then start the copy below it on flat dark. */
  .bpw-hero-sub { align-items: flex-start !important; background: #34322C !important; }
  .bpw-hero-sub-inner {
    padding-top: calc(48svh + 20px) !important;
    padding-bottom: 7vh !important;
  }
  .bpw-hero-photo-wide {
    left: 0 !important;
    width: 100% !important;
    object-position: 50% 30% !important;
  }
}

/* ---- 640px: type and rhythm tighten ---- */
@media (max-width: 640px) {
  .bpw-insurance { flex-direction: column !important; align-items: flex-start !important; }
  .bpw-books { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }
  .bpw-footer-cols { gap: 32px !important; }
  .bpw-fine { flex-direction: column !important; gap: 10px !important; }
  .bpw-name-fields { grid-template-columns: minmax(0, 1fr) !important; }
  .bpw-consult-card { padding: 28px !important; }
  .bpw-consult-num { display: none !important; }
}

/* ---- 380px: the narrowest real devices ---- */
@media (max-width: 380px) {
  .bpw-nav-side { gap: 14px !important; }
  .bpw-nav-side a { font-size: 13px !important; }
  .bpw-books { grid-template-columns: minmax(0, 1fr) !important; }
}