/* ============================================================
   THE BUDGET, CONSIDERED. — /budget, design pass
   Shared tokens and components (grid, type, buttons, ribbon, reveal, reduced motion)
   live in main.css. This file is the page composition only.
   ============================================================ */

/* ---------- 00 · Hero: the comma settles on load and drifts on scroll. Copy and comma share a midline at 46% of the hero's height. ---------- */
/* the page's html is cream too, so the scrollbar gutter beside the content is cream on /budget */
html.bd-page-html { background: var(--bd-cream); }
body.bd-page { background: var(--bd-cream); }
.bd-hero {
  position: relative; overflow: hidden;
  background: var(--bd-cream); color: var(--bd-ink);
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(8.5rem, 17vh, 11rem); padding-bottom: clamp(5rem, 11vh, 8rem);
}
/* from 900px the bottom padding runs 8svh deeper than the top, which puts the content's centre at 46% */
@media (min-width: 900px) { .bd-hero { padding-bottom: calc(clamp(8.5rem, 17vh, 11rem) + 8svh); } }
.bd-hero__grid { row-gap: 48px; align-items: center; }
.bd-hero__copy { grid-column: 1 / span 6; }
.bd-hero__visual { grid-column: 7 / span 6; position: relative; margin: 0; justify-self: end; width: 100%; max-width: 520px; }
.bd-hero__glow {
  position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side at 70% 45%, rgba(226, 27, 27, .05), transparent);
}
.bd-hero__drift { position: relative; z-index: 1; will-change: transform; }
.bd-hero__comma {
  display: block; width: 100%; height: auto; margin-left: auto;
  opacity: 0; transform: scale(1.03);
  transition: opacity 900ms cubic-bezier(.2, .7, .2, 1), transform 900ms cubic-bezier(.2, .7, .2, 1);
}
.bd-page.is-live .bd-hero__comma,
.no-js .bd-hero__comma { opacity: 1; transform: none; }
/* the comma keeps its proportions and stops at 36vw or the viewport less 200px, so it never runs off the bottom */
@media (min-width: 900px) {
  .bd-hero__comma { width: auto; max-width: 100%; max-height: min(36vw, calc(100svh - 200px)); }
}
.bd-title {
  margin-top: 16px;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(3rem, calc(.8rem + 6vw), 6.2rem);
  line-height: .98; letter-spacing: -.025em;
}
.bd-status {
  margin-top: 28px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5;
  color: rgba(10, 10, 10, .7);
}
.bd-sub { margin-top: 24px; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; }
.bd-meta { margin-top: 16px; font: 600 12px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(10, 10, 10, .6); }
.bd-actions { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; }

/* ---------- 01 · Same Budget. Different decisions. A sticky editorial spread. ---------- */
.bd-spread { align-items: start; }
.bd-spread__lead { grid-column: 1 / span 5; position: sticky; top: 120px; align-self: start; }
.bd-spread__list { grid-column: 7 / span 6; }
.bd-spread__lead .bd-h2 + .bd-body,
.bd-perspectives .bd-head .bd-h2 + .bd-body { margin-top: 28px; }
.bd-spread__lead .bd-body + .bd-body { margin-top: 18px; }
.bd-pull {
  margin: 48px 0 0; padding-left: 24px;
  border-left: 2px solid var(--red);
  font-family: var(--serif); font-size: 24px; line-height: 1.4;
  max-width: 34ch;
}
.bd-qlist { list-style: none; margin-top: 28px; border-bottom: 1px solid var(--bd-hair-cream); }
.bd-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center;
  min-height: 112px; border-top: 1px solid var(--bd-hair-cream);
}
.bd-row__q {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(28px, 2.6vw, 40px); line-height: 1.15; letter-spacing: -.01em;
}
.bd-caveat { margin-top: 24px; font-size: 14px; line-height: 1.6; color: rgba(10, 10, 10, .6); max-width: 52ch; }
.bd-q01 { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--bd-hair-cream); scroll-margin-top: 120px; }
.bd-q01 .bd-label { margin-bottom: 16px; }
.bd-q01 .todo { display: block; margin-top: 16px; }
.bd-h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -.005em; }

/* ---------- 02 · Inside every question. Stage (cols 1–8), components (cols 9–12). ---------- */
.bd-inside .bd-head .bd-label { margin-bottom: 20px; }
.bd-anatomy { margin-top: 72px; align-items: start; }
.bd-stage { grid-column: 1 / span 8; margin: 0; position: sticky; top: 120px; align-self: start; }
.bd-stage__frame {
  position: relative;
  border: 1px solid var(--bd-hair-cream);
  box-shadow: var(--bd-shadow);
}
.bd-stage__img { display: block; width: 100%; height: auto; }
.bd-stage__caption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: rgba(10, 10, 10, .6); }

/*  Marker centres, measured from sample-spread.webp (natural 2000 × 942 px) by circle search on the red
    ink, then drawn back over the image to check. Centre of each printed ring, as a percentage:
      01  (56, 189)   -> left 2.80%   top 20.06%      (left page, top)
      02  (55, 386)   -> left 2.75%   top 40.98%      (left page, middle)
      03  (56, 619)   -> left 2.80%   top 65.71%      (left page, bottom)
      04  (696, 127)  -> left 34.80%  top 13.48%      (middle page, top)
      05  (695, 489)  -> left 34.75%  top 51.91%      (middle page, middle)
      06  (696, 690)  -> left 34.80%  top 73.25%      (middle page, bottom)
      07  (1617, 432) -> left 80.85%  top 45.86%      (planner page)
    The printed rings are about 56 px across at natural size, so about 33 px at a 1180 px stage. */
.bd-marker {
  position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 2px solid var(--red); border-radius: 50%; background: transparent;
  opacity: 0; transform: scale(1); pointer-events: none;
  transition: opacity 400ms ease, transform 400ms ease, box-shadow 400ms ease;
}
.bd-marker.is-on {
  opacity: 1; transform: scale(1.08);
  box-shadow: 0 0 0 8px rgba(226, 27, 27, .12);
  transition-duration: 240ms;
}
.bd-marker[data-marker="01"] { left: 2.80%; top: 20.06%; }
.bd-marker[data-marker="02"] { left: 2.75%; top: 40.98%; }
.bd-marker[data-marker="03"] { left: 2.80%; top: 65.71%; }
.bd-marker[data-marker="04"] { left: 34.80%; top: 13.48%; }
.bd-marker[data-marker="05"] { left: 34.75%; top: 51.91%; }
.bd-marker[data-marker="06"] { left: 34.80%; top: 73.25%; }
.bd-marker[data-marker="07"] { left: 80.85%; top: 45.86%; }

.bd-components { grid-column: 9 / span 4; position: static; align-self: start; list-style: none; border-bottom: 1px solid var(--bd-hair-cream); }
.bd-component {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start;
  padding: 24px 0; border-top: 1px solid var(--bd-hair-cream); outline: none;
}
.bd-component:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.bd-component .bd-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  transition: background-color 240ms ease, color 240ms ease;
}
.bd-component.is-on .bd-num { background: var(--red); color: #fff; }
.bd-component p { margin-top: 8px; font-size: 15px; line-height: 1.6; max-width: 40ch; color: rgba(10, 10, 10, .85); }

/* ---------- 03 · Four perspectives (people grid reused, no email addresses) ---------- */
.bd-people { margin-top: 56px; }
.bd-perspectives .person .role { color: var(--red); letter-spacing: .2em; }

/* ---------- 04 · The film: black band, film frame 420px at ≥1200 in the right half ---------- */
.bd-film__grid { align-items: center; }
.bd-film__copy { grid-column: 1 / span 6; }
.bd-film__copy .bd-body { margin-top: 24px; max-width: 30ch; }
.bd-film__frame {
  grid-column: 7 / span 6; justify-self: center;
  width: min(420px, 100%); margin: 0;
}
/* the border and shadow belong to the picture; the caption sits 12px beneath it */
.bd-film__media {
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
}
.bd-film__media video {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; background: var(--ink);
}
.bd-film__frame figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .6); }

/* ---------- 05 · Register: the form card right; the reader stands 120px outside the content column, bottom-left ---------- */
.bd-register { overflow: hidden; }
.bd-register__copy { grid-column: 1 / span 5; position: relative; }
.bd-register__panel { grid-column: 6 / span 7; position: relative; z-index: 1; align-self: center; }
.bd-register__panel .form-panel { box-shadow: var(--bd-shadow); }
/* the register heading holds one line for its payoff at 1280 and 1440 */
.bd-register .bd-h2 { font-size: clamp(36px, 3.6vw, 52px); }
.bd-register .bd-payoff { white-space: nowrap; }
.bd-promise {
  margin-top: 24px; max-width: 30ch;
  font-family: var(--serif); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; color: var(--bd-ink);
}
/* absolutely placed in the section, so the left edge can sit 120px outside the 1280px column. The content column starts at
   max(gutter, 50% - 640px); the reader is clamped to the viewport edge. He bleeds off the section's bottom (the section clips him). */
.bd-register__reader {
  position: absolute; z-index: 0; pointer-events: none;
  left: max(0px, calc(max(var(--bd-gutter), 50% - var(--bd-maxw) / 2) - 120px));
  bottom: calc(-1 * var(--bd-section-pad) - 48px);
  height: 520px; width: auto;
}
.bd-form-grid { grid-template-columns: 1fr 1fr; }
.bd-register__panel .form-error { margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--red-deep); }
.bd-register__panel .form-error[hidden] { display: none; }
.bd-register .budget-links { list-style: none; margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.bd-register .budget-links a {
  font: 600 12px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bd-ink);
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: left bottom; background-size: 0% 1px; padding-bottom: 4px;
  transition: background-size 200ms ease;
}
.bd-register .budget-links a:hover,
.bd-register .budget-links a:focus-visible { background-size: 100% 1px; }

/* ---------- Chapter marker: contained in the left gutter, a cream pill, hidden under 1280 ---------- */
.bd-page .chapter {
  left: 24px; bottom: 24px; max-width: 120px; gap: 12px;
  padding: 10px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--bd-cream) 82%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--bd-ink); mix-blend-mode: normal; pointer-events: auto;
}
.bd-page .chapter .ch-num { color: var(--bd-ink); }
.bd-page .chapter .ch-sep { width: 24px; height: 1px; background: var(--red); }
.bd-page .chapter .ch-name {
  display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width 240ms ease, opacity 240ms ease;
}
.bd-page .chapter:hover .ch-name,
.bd-page .chapter:focus-within .ch-name { max-width: 240px; opacity: 1; }
.bd-page.on-black .chapter { background: rgba(10, 10, 10, .6); color: #fff; }
.bd-page.on-black .chapter .ch-num { color: #fff; }
@media (max-width: 1279px) { .bd-page .chapter { display: none; } }

/* ---------- Header on /budget: once the hero has scrolled under it (main.js sets .head-solid), the header turns solid cream.
   Content passes under it, never through. /budget has no ribbon, so the header drops the ribbon's padding. ---------- */
.bd-page .site-head { padding-top: 0; }
.bd-page.head-solid:not(.idx-open) .site-head {
  background: color-mix(in srgb, var(--bd-cream) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bd-hair-cream);
}
.bd-page.head-solid:not(.idx-open) .head-nav a,
.bd-page.head-solid:not(.idx-open) .brand-name,
.bd-page.head-solid:not(.idx-open) .menu-toggle { color: var(--bd-ink); }
.bd-page.head-solid:not(.idx-open) .menu-toggle .bars i { background: var(--bd-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .bd-register__reader { height: 400px; }
}
@media (max-width: 899px) {
  .bd-hero__copy, .bd-hero__visual { grid-column: 1 / -1; }
  .bd-hero__visual { justify-self: start; max-width: 360px; }

  .bd-spread { display: flex; flex-direction: column; }
  .bd-spread__lead, .bd-spread__list { display: contents; }
  .bd-spread > .bd-spread__lead > .bd-h2 { order: 1; }
  .bd-spread > .bd-spread__lead > .bd-body:nth-of-type(1) { order: 2; }
  .bd-spread > .bd-spread__lead > .bd-body:nth-of-type(2) { order: 3; }
  .bd-spread > .bd-spread__list > .bd-label { order: 4; }
  .bd-spread > .bd-spread__list > .bd-qlist { order: 5; }
  .bd-spread > .bd-spread__list > .todo { order: 6; }
  .bd-spread > .bd-spread__list > .bd-caveat { order: 7; }
  .bd-spread > .bd-spread__list > .bd-q01 { order: 8; }
  .bd-spread > .bd-spread__lead > .bd-pull { order: 9; }
  .bd-row { min-height: 88px; }
  .bd-pull { margin-top: 40px; }

  .bd-anatomy { display: flex; flex-direction: column; gap: 48px; }
  .bd-stage, .bd-components { grid-column: auto; }
  .bd-stage, .bd-components { position: static; }

  .bd-people { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }

  .bd-film__copy, .bd-film__frame { grid-column: 1 / -1; }
  .bd-film__frame { width: 100%; max-width: none; justify-self: stretch; }

  .bd-register__copy, .bd-register__panel { grid-column: 1 / -1; }
  .bd-register__reader { display: none; }
  .bd-form-grid { grid-template-columns: minmax(0, 1fr); }
  .bd-form-grid .field { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bd-title { font-size: clamp(2.7rem, 13vw, 3.6rem); }
  .bd-pull { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-hero__comma, .bd-marker, .bd-component .bd-num, .bd-page .chapter .ch-name { transition: none !important; transform: none !important; }
}