/* barefoot.style — "How to measure my feet" page styles
   Scope: everything is nested under .bfm so nothing leaks into the theme.
   Fonts: Space Grotesk (400/500/600/700) + JetBrains Mono (400/500/700) + Instrument Serif
   (400 + italic) — same pair the About page uses, so this page reads as part of the site
   instead of a one-off with its own typographic voice. Enqueued only on this page.

   Body-copy `max-width: NNch` caps from the original handoff (.bfm__lede, steps li > p,
   .bfm__bar p, and an inline one on §01/§02/§05's .bfm__body in the PHP template) were
   removed — they left running text short of the section's actual right edge (the ruler,
   bars, cards, cta all reach it), which read as misaligned. Paragraphs now just fill
   their container. Two caps stay: .bfm__hero-grid h1 (12ch — controls where the headline
   wraps for the mark treatment, not a measure/readability cap) and .bfm__cta p (46ch —
   a deliberately short, punchy CTA blurb next to the buttons, not running body copy). */

.bfm {
  --bfm-ink: #111111;
  --bfm-ink-soft: #6C6C66;
  --bfm-ink-faint: #8A8A85;
  --bfm-rule: #E4E4E0;
  --bfm-rule-soft: #EEEEEA;
  --bfm-yellow: #FFE800;
  --bfm-pink: #FF2E88;
  --bfm-green: #17603A;
  --bfm-green-label: #9FD3B4;
  --bfm-green-body: #D8ECE0;
  --bfm-max: 1240px;
  --bfm-gutter: clamp(16px, 4vw, 40px);

  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  color: var(--bfm-ink);
  background: #FFFFFF;
  max-width: var(--bfm-max);
  margin: 0 auto;
  padding: 0 var(--bfm-gutter);
  box-sizing: border-box;
}
.bfm *, .bfm *::before, .bfm *::after { box-sizing: border-box; }
/* :where() keeps this reset at effectively zero specificity beyond the leading .bfm,
   so ANY single-class component rule below (.bfm__quote, .bfm__steps-head, etc.) wins
   on margin/padding/font-size without needing its own .bfm prefix or !important — a
   plain `.bfm h1, .bfm p, ...` compound selector here would silently outrank single
   classes applied to the same tags (e.g. .bfm__quote on a <blockquote>) regardless of
   source order, which is exactly what happened before this was written as :where(). */
.bfm :where(h1, h2, h3, h4, p, ol, ul, li, blockquote) { margin: 0; padding: 0; }
.bfm ol, .bfm ul { list-style: none; }
.bfm mark { background: var(--bfm-yellow); color: var(--bfm-ink); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bfm strong { font-weight: 700; }
.bfm a:not(.bfm__btn) { color: var(--bfm-ink); }

/* --- shared bits ------------------------------------------------------ */
.bfm__mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.bfm__pill { border-radius: 999px; padding: 6px 14px; }
.bfm__pill--green { background: var(--bfm-green); color: #FFFFFF; }
.bfm__pill--outline { border: 1px solid #E0E0DC; color: var(--bfm-ink-soft); }
.bfm__serif-italic { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }
.bfm__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bfm-pink); flex: none; }

/* two-column section: label rail + body. Collapses on mobile. */
.bfm__section {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(28px, 5vh, 52px) 0;
  border-top: 1px solid var(--bfm-rule);
}
.bfm__rail { display: grid; gap: 10px; align-content: start; justify-items: start; }
.bfm__body { display: grid; gap: 26px; }

.bfm h2 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; line-height: 1.0; letter-spacing: -.03em; }
.bfm :where(p) { font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.bfm__muted { color: var(--bfm-ink-soft); }

/* --- hero ------------------------------------------------------------- */
.bfm__hero { padding: clamp(28px, 5vh, 48px) 0 clamp(32px, 6vh, 64px); display: grid; gap: 30px; }
.bfm__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bfm__tags span:last-child { color: #B5B5AE; }
.bfm__hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  padding: clamp(8px, 2vh, 24px) 0 clamp(20px, 5vh, 56px);
}
/* line-height 1.08, not the original .92 — Space Grotesk's line box is taller than
   Archivo's (the design was tuned for), and at .92 the <mark> background on "my feet"
   visibly cut into the line above ("measure"). Checked at 1.0 first: still touched. */
.bfm__hero-grid h1 { font-size: clamp(46px, 8vw, 116px); font-weight: 700; line-height: 1.0; letter-spacing: -.04em; max-width: 12ch; }
/* No max-width here on purpose: the intro paragraph is a grid item that otherwise
   stretches to fill its column, and this column is already the narrower half of a
   two-up split (h1 | intro) — capping it further at 44ch left its right edge ~25px
   short of the ruler's right edge below (measured 1195 vs 1220 at 1280px viewport),
   which read as misaligned since every other full-width element on the page shares
   that same right edge. */
.bfm__hero-grid p { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; padding-bottom: clamp(0px, 1.5vw, 18px); }
.bfm__hero-grid mark.is-pink { background: var(--bfm-pink); color: #FFFFFF; }

/* ruler graphic (pure CSS, no image) */
.bfm__ruler { display: grid; gap: 8px; }
.bfm__ruler-labels { display: flex; justify-content: space-between; color: var(--bfm-ink-faint); letter-spacing: .12em; }
.bfm__ruler-labels span:last-child { color: var(--bfm-pink); }
.bfm__ruler-track { height: 56px; border-bottom: 1px solid var(--bfm-ink); position: relative; }
.bfm__ruler-track::before,
.bfm__ruler-track::after {
  content: ""; position: absolute; inset: 0;
  background-position: bottom; background-repeat: repeat-x;
}
.bfm__ruler-track::before { background-image: repeating-linear-gradient(to right, #B5B5AE 0 1px, transparent 1px 12px); background-size: 100% 16px; }
.bfm__ruler-track::after  { background-image: repeating-linear-gradient(to right, var(--bfm-ink) 0 1px, transparent 1px 60px); background-size: 100% 34px; }

/* --- numbered steps --------------------------------------------------- */
.bfm__steps-head {
  display: flex; align-items: center; gap: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 10px;
}
.bfm__steps-head::after { content: ""; flex: 1; height: 1px; background: var(--bfm-rule); }
.bfm__steps li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px;
  padding: 16px 0; border-bottom: 1px solid var(--bfm-rule-soft);
}
.bfm__steps li > span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; color: var(--bfm-pink); padding-top: 4px;
}

/* --- green pull-quote ------------------------------------------------- */
.bfm__quote {
  background: var(--bfm-green); color: #FFFFFF;
  padding: clamp(32px, 5vw, 56px);
  display: grid; gap: clamp(20px, 2.6vw, 32px); position: relative;
}
.bfm__quote::before {
  content: ""; position: absolute; top: -9px; right: 30px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--bfm-pink);
}
.bfm__quote-label { color: var(--bfm-green-label); letter-spacing: .12em; }
.bfm__quote-lead { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.3; max-width: 58ch; }
.bfm__quote-lead .bfm__serif-italic { font-size: 1em; }
.bfm__quote-foot { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; color: var(--bfm-green-body); max-width: 58ch; }

/* --- note cards ------------------------------------------------------- */
.bfm__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.bfm__card { border: 1px solid var(--bfm-rule); padding: 24px; display: grid; gap: 10px; align-content: start; }
.bfm__card p { font-size: 17px; line-height: 1.55; }
.bfm__card-label {
  justify-self: start; background: var(--bfm-yellow); padding: 5px 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}

/* --- two-up columns (§03) -------------------------------------------- */
.bfm__split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--bfm-rule); padding-top: 24px;
}
.bfm__split > div { display: grid; gap: 10px; align-content: start; }
.bfm__split h4 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.bfm__split p { font-size: 17px; }
.bfm__split .bfm__mono { color: var(--bfm-pink); }

/* --- allowance bars (§04) -------------------------------------------- */
.bfm__bars { display: grid; gap: 24px; }
.bfm__bar-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.bfm__bar { display: grid; gap: 10px; }
.bfm__bar-labels { display: flex; color: var(--bfm-ink-soft); }
.bfm__bar-labels span:last-child { color: var(--bfm-ink); text-align: right; white-space: nowrap; }
.bfm__bar-track { display: flex; height: 32px; border: 1px solid var(--bfm-ink); }
.bfm__bar-fill { background: var(--bfm-ink); }
/* Allowance segment: same treatment on both bars (was a different solid colour per
   bar — yellow for length, pink for width) — white with a diagonal hatch, so "this is
   the allowance, not the measured foot" reads as one consistent idea across both. */
.bfm__bar-extra {
  background-color: #FFFFFF;
  background-image: repeating-linear-gradient(45deg, var(--bfm-ink) 0 1px, transparent 1px 7px);
}
.bfm__bar p { font-size: 17px; }

/* --- yellow CTA ------------------------------------------------------- */
.bfm__cta {
  background: var(--bfm-yellow);
  padding: clamp(32px, 4.5vw, 64px);
  display: grid; gap: clamp(24px, 3vw, 40px);
  position: relative; overflow: hidden;
}
.bfm__cta::before {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: var(--bfm-pink); opacity: .16;
}
.bfm__cta-text { display: grid; gap: 14px; position: relative; }
.bfm__cta h3 { font-size: clamp(32px, 4.6vw, 60px); font-weight: 700; line-height: .95; letter-spacing: -.035em; }
.bfm__cta .bfm__mono { color: rgba(17,17,17,.55); }
.bfm__cta p { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; max-width: 46ch; }
.bfm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; position: relative; }
.bfm__btn {
  font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  padding: 15px 26px; border: 1px solid var(--bfm-ink); text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bfm__btn--solid { background: var(--bfm-ink); color: #FFFFFF; }
.bfm__btn--solid:hover, .bfm__btn--solid:focus-visible { background: var(--bfm-pink); border-color: var(--bfm-pink); color: #FFFFFF; }
.bfm__btn--ghost { color: var(--bfm-ink); background: transparent; }
.bfm__btn--ghost:hover, .bfm__btn--ghost:focus-visible { background: var(--bfm-ink); color: var(--bfm-yellow); }

/* --- sources ---------------------------------------------------------- */
.bfm__sources h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.bfm__sources p { font-size: 17px; color: var(--bfm-ink-soft); }

/* --- responsive ------------------------------------------------------- */
@media (max-width: 860px) {
  .bfm__section { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bfm__rail { flex-direction: row; }
}
@media (max-width: 600px) {
  .bfm p { font-size: 17px; }
  .bfm__ruler-track { height: 44px; }
  .bfm__btn { width: 100%; text-align: center; }
}