/* ============================================================================
   Bloom Arts Foundation — /bloom, revision 2: "Help a kid find their voice"
   Grammar: rhythmic cutlist (scrollcraft). Hard cuts, no pinning, no dwell.

   Brand, from Bloom's own marks: navy wordmark, orange-to-red banded sun.
   Revision 2 warms the light ground to a dawn tint of Bloom's own orange (the
   cool white read as stark) and sizes every cut to its content: a cutlist
   section lands whole, it does not idle in empty height.

   Every ground restates `color` and its button pair alongside its tokens,
   because redefining a token on a subtree does not re-ink text whose colour
   already resolved above it. Contrast pairs are measured on the rendered page
   (scrollcraft/tools/contrast-audit.mjs), not guessed.
   ========================================================================= */

:root {
  --bl-navy:        #0B2352;
  --bl-navy-deep:   #081A40;
  --bl-dawn:        #FFE9DA;   /* Bloom's orange at dawn strength, not a stock cream */
  --bl-dawn-glow:   #FFD3B8;
  --bl-paper:       #F4F6FB;
  --bl-sun-a:       #FF7A00;
  --bl-sun-b:       #E5392C;
  --bl-sun-lite:    #FF8A3D;

  --sc-canvas:      var(--bl-dawn);
  --sc-ink:         var(--bl-navy);
  --sc-ink-soft:    #4B4A63;
  --sc-accent:      #B83A12;   /* 4.9:1 on dawn */
  --sc-accent-ink:  #FFFFFF;
  --sc-font-display: "Montserrat", "Avenir Next", system-ui, sans-serif;
  --sc-font-text:    "Figtree", "Helvetica Neue", system-ui, sans-serif;

  --bl-bar-h: 64px;
  /* One fluid interval for section padding: generous on a desktop, never a
     scroll tax on a phone (taste.md). Headings get more air above than below. */
  --bl-pad-y: clamp(52px, 7vw, 100px);
  --bl-pad-x: clamp(20px, 5vw, 80px);
}

/* ── grounds ──────────────────────────────────────────────────────────── */
.bl-ground--dawn {
  --sc-ink: var(--bl-navy); --sc-ink-soft: #4B4A63;
  --sc-accent: #B83A12; --sc-accent-ink: #FFFFFF;
  --bl-btn-bg: var(--bl-navy); --bl-btn-ink: #FFFFFF;
  background: var(--bl-dawn); color: var(--sc-ink);
}
.bl-ground--navy {
  --sc-ink: #F4F6FB; --sc-ink-soft: #AEBBD8;
  --sc-accent: var(--bl-sun-lite); --sc-accent-ink: var(--bl-navy);
  --bl-btn-bg: var(--bl-sun-lite); --bl-btn-ink: var(--bl-navy);
  background: var(--bl-navy); color: var(--sc-ink);
}
.bl-ground--deep {
  --sc-ink: #F4F6FB; --sc-ink-soft: #AEBBD8;
  --sc-accent: var(--bl-sun-lite); --sc-accent-ink: var(--bl-navy);
  --bl-btn-bg: var(--bl-sun-lite); --bl-btn-ink: var(--bl-navy);
  background: var(--bl-navy-deep); color: var(--sc-ink);
}
/* The close: a sunrise, red high and orange holding at the horizon. Navy clears
   4.5:1 on the orange but only 3.6:1 on the red, so the red stays up behind
   display type and the small legal lines at the foot sit on orange. */
.bl-ground--sun {
  --sc-ink: var(--bl-navy); --sc-ink-soft: #1E2346;
  --sc-accent: var(--bl-navy); --sc-accent-ink: #FFFFFF;
  --bl-btn-bg: var(--bl-navy); --bl-btn-ink: #FFFFFF;
  background: linear-gradient(to top, var(--bl-sun-a) 0%, var(--bl-sun-a) 42%, var(--bl-sun-b) 100%);
  color: var(--sc-ink);
}
/* Sunlit: for a section with small type top to bottom. It keeps to the orange
   half of the sun (never under ~#F7661A), where navy text still clears 4.5:1. */
.bl-ground--sunlit {
  --sc-ink: var(--bl-navy); --sc-ink-soft: #1E2346;
  --sc-accent: var(--bl-navy); --sc-accent-ink: #FFFFFF;
  --bl-btn-bg: var(--bl-navy); --bl-btn-ink: #FFFFFF;
  background:
    radial-gradient(80% 70% at 88% 18%, rgba(255, 160, 80, .55) 0%, rgba(255, 160, 80, 0) 62%),
    linear-gradient(to bottom, #F7661A 0%, var(--bl-sun-a) 70%);
  color: var(--sc-ink);
}

html { scroll-padding-top: var(--bl-bar-h); }

/* PROGRESSIVE ENHANCEMENT. scrollcraft.css hides every [data-sc-in] element
   unconditionally (opacity 0), not only once the engine is running. So if the
   script fails, is blocked, or has not loaded yet, the page is blank — which is
   what a crawler or an Ad Grants reviewer rendering without JS would see.
   The engine is not edited (skill rule); instead, show everything until it has
   mounted and added .sc-ready to <html>, then let it run the entrances.
   The hero deliberately carries no data-sc-in, so it can never flash. */
html:not(.sc-ready) [data-sc-in],
html:not(.sc-ready) [data-sc-stagger] > * { opacity: 1; transform: none; transition: none; }
.bl { overflow-x: clip; background: var(--bl-dawn); }
.bl-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── the loud bar (cutlist: full-width, high contrast, CTAs at wordmark weight) ─ */
.bl-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--bl-bar-h);
  display: flex; align-items: center; gap: 1.1rem;
  padding: 0 clamp(14px, 3vw, 36px);
  background: var(--bl-navy); color: #F4F6FB;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--bl-sun-a), var(--bl-sun-b)) 1;
}
.bl-mark {
  display: flex; align-items: center; gap: .7rem;
  color: inherit; text-decoration: none;
}
.bl-mark__word {
  font-family: var(--sc-font-display); font-weight: 900;
  font-size: 1.25rem; letter-spacing: .02em; line-height: 1;
}
.bl-mark__word small {
  display: block; margin-top: 3px;
  font-weight: 600; font-size: .52rem; letter-spacing: .34em;
}
.bl-meter {
  margin: 0 auto;
  display: flex; align-items: center; min-width: 0;
  font-family: var(--sc-font-text); font-size: .92rem; font-weight: 500;
  color: #AEBBD8; white-space: nowrap; overflow: hidden;
}
.bl-meter__text { overflow: hidden; text-overflow: ellipsis; }
.bl-bar__ctas { display: flex; gap: .5rem; flex: none; }

/* ── buttons. Each ground sets its own pair (--bl-btn-bg/-ink). ─────────── */
.bl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.5rem;
  border-radius: 999px;
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: 1rem; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  background: var(--bl-btn-bg, var(--bl-navy)); color: var(--bl-btn-ink, #FFFFFF);
  box-shadow: 0 6px 18px -8px rgba(8, 26, 64, .55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bl-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(8, 26, 64, .6); }
.bl-btn:focus-visible { outline: 3px solid var(--sc-ink); outline-offset: 3px; }
.bl-btn--xl { min-height: 60px; padding: 0 2.1rem; font-size: 1.08rem; }
.bl-btn--sun { background: var(--bl-sun-a); color: var(--bl-navy); }
.bl-ground--navy .bl-btn--sun,
.bl-ground--deep .bl-btn--sun { background: var(--bl-sun-lite); }
.bl-btn--paper { background: var(--bl-paper); color: var(--bl-navy); }
.bl-btn--bar {
  min-height: 40px; padding: 0 1.05rem; font-size: .86rem;
  background: var(--bl-sun-lite); color: var(--bl-navy);
}
.bl-btn--bar-alt { background: var(--bl-paper); }
.bl-btn--bar:focus-visible { outline-color: var(--bl-sun-lite); }

/* the quiet second door: a direct link, always one tap away */
.bl-textlink {
  display: inline-block; margin-top: 1rem; padding: .2rem 0;
  font-family: var(--sc-font-text); font-weight: 700; font-size: 1rem;
  color: var(--sc-ink); text-decoration: underline; text-underline-offset: .22em;
  text-decoration-thickness: 2px;
}
.bl-textlink:hover { text-decoration-color: var(--sc-accent); }
.bl-textlink:focus-visible { outline: 3px solid var(--sc-ink); outline-offset: 3px; border-radius: 4px; }

/* ── the signature move: Bloom's sun as the giving meter ──────────────── */
.bl-sun { width: 44px; height: 44px; flex: none; display: block; overflow: visible; }
/* Unlit bands are the same sun at low opacity, not an outline: a stroke on a
   band clipped to a circle only draws its top and bottom edges, which at 44px
   reads as horizontal lines rather than Bloom's sun. Bands light bottom-up. */
.bl-sun__band { opacity: .24; transition: opacity .45s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.bl-sun__band.is-lit { opacity: 1; }
.bl-sun.is-whole { animation: bl-whole .7s cubic-bezier(.2, .8, .2, 1) 1; }
@keyframes bl-whole {
  0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); }
}

/* ── cuts: sized to their content ─────────────────────────────────────── */
.bl-cut { position: relative; padding: var(--bl-pad-y) var(--bl-pad-x); }
.bl-wrap { width: min(100%, 1180px); margin-inline: auto; }
.bl-measure { max-width: 60ch; }

.bl-eyebrow {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sc-accent); margin: 0 0 .9rem;
}
.bl-h1, .bl-h2, .bl-num {
  font-family: var(--sc-font-display); font-weight: 900;
  letter-spacing: -.035em; line-height: .96; text-wrap: balance;
  margin: 0;
}
.bl-h1 { font-size: clamp(2.8rem, 6.6vw, 6.2rem); }
.bl-h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); }
.bl-h3 {
  font-family: var(--sc-font-display); font-weight: 800; margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem); letter-spacing: -.02em; line-height: 1.1;
}
.bl-num {
  font-size: clamp(4.4rem, 13vw, 11rem);
  letter-spacing: -.05em; line-height: .86;
  font-variant-numeric: tabular-nums;
}
.bl-lead {
  font-family: var(--sc-font-text); font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.55;
  color: var(--sc-ink-soft); text-wrap: pretty; margin: 1rem 0 0;
}
.bl-body {
  font-family: var(--sc-font-text); font-size: 1.06rem; line-height: 1.62;
  color: var(--sc-ink-soft); text-wrap: pretty; margin: .8rem 0 0;
}
.bl-sub {
  font-family: var(--sc-font-display); font-weight: 800; margin: .9rem 0 0;
  font-size: clamp(1.25rem, 2.4vw, 2rem); letter-spacing: -.02em; line-height: 1.15; max-width: 22ch;
}
.bl-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; align-items: center; }
.bl-micro { font-family: var(--sc-font-text); font-weight: 600; font-size: .95rem; color: var(--sc-ink-soft); margin: .9rem 0 0; }

/* hero — copy leads, the photo trails; a dawn glow behind the photo */
.bl-hero {
  padding-top: calc(var(--bl-bar-h) + clamp(28px, 6vh, 72px));
  min-height: min(100svh, 940px);
  display: grid; align-content: center;
  background:
    radial-gradient(60% 60% at 80% 40%, var(--bl-dawn-glow) 0%, rgba(255, 211, 184, 0) 70%),
    var(--bl-dawn);
}
.bl-hero__grid {
  display: grid; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center;
}
/* Greedy wrap, not balance: balance split it "Help a / kid find / their voice."
   The two doors sit side by side, as equals, so the hero buttons run a rung smaller. */
.bl-hero .bl-h1 { font-size: clamp(3rem, 6.2vw, 5.8rem); text-wrap: wrap; }
.bl-hero .bl-btn--xl { min-height: 56px; padding: 0 1.45rem; font-size: .98rem; }
.bl-hero__photo {
  position: relative; margin: 0;
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(8, 26, 64, .55);
}
.bl-hero__photo img { width: 100%; height: auto; aspect-ratio: 1515 / 1159; object-fit: cover; }
.bl-hero__tag {
  position: absolute; right: 16px; bottom: 16px;
  background: rgba(8, 26, 64, .84); color: #F4F6FB;
  font-family: var(--sc-font-text); font-weight: 600; font-size: .85rem;
  padding: .45rem .8rem; border-radius: 999px;
}

/* the read — the pitch's long line lights word by word (BloomScripts.tsx) */
.bl-pitch__lead { margin: 0; }
.bl-read {
  margin: 1.5rem 0 0; max-width: 16em;
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.12; letter-spacing: -.025em;
  text-wrap: pretty;
}
.bl-read--on .bl-w { opacity: .22; transition: opacity .3s linear; }
.bl-read--on .bl-w.is-read { opacity: 1; }
.bl-w--key { color: var(--sc-accent); }
.bl-pitch__close {
  margin: 1.6rem 0 0;
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem); letter-spacing: -.01em; color: var(--sc-accent);
}

/* proof — the big number leads, three figures stack beside it on hairlines */
.bl-proof {
  display: grid; gap: clamp(28px, 5vw, 80px); align-items: end;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}
.bl-stat__caption {
  font-family: var(--sc-font-display); font-weight: 800; margin: 1rem 0 0;
  font-size: clamp(1.3rem, 2.8vw, 2.3rem); line-height: 1.1;
  letter-spacing: -.02em; max-width: 18ch; text-wrap: balance;
}
.bl-reach { display: grid; gap: 1rem; }
.bl-reach > div {
  display: flex; align-items: baseline; gap: .9rem;
  border-top: 1px solid rgba(244, 246, 251, .2); padding-top: .9rem;
}
.bl-reach__n {
  margin: 0; font-family: var(--sc-font-display); font-weight: 900;
  font-size: clamp(2.4rem, 4.4vw, 3.8rem); letter-spacing: -.045em; line-height: .9;
  font-variant-numeric: tabular-nums;
}
.bl-reach__l { margin: 0; font-family: var(--sc-font-text); font-weight: 600; font-size: 1.02rem; color: var(--sc-ink-soft); }

/* instruments — typographic rhythm: the words are the beat */
.bl-beat { display: flex; flex-wrap: wrap; gap: .1em .38em; align-items: baseline; margin: 0; }
.bl-beat span { font-family: var(--sc-font-display); letter-spacing: -.03em; line-height: 1; }
.bl-beat .w1 { font-weight: 900; font-size: clamp(2.4rem, 7vw, 5.6rem); }
.bl-beat .w2 { font-weight: 300; font-size: clamp(1.5rem, 3.8vw, 3rem); color: var(--sc-ink-soft); }
.bl-beat .w3 { font-weight: 800; font-size: clamp(1.9rem, 5.2vw, 4.2rem); color: var(--sc-accent); }

/* split: copy + photo */
.bl-split {
  display: grid; gap: clamp(28px, 5vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
}
.bl-split--flip > :first-child { order: 2; }
.bl-photo { margin: 0; border-radius: 22px; overflow: hidden; }
.bl-photo img { width: 100%; height: auto; object-fit: cover; }

/* quiet beat — authored silence before the choice */
.bl-quiet { padding: 0; }
.bl-quiet__photo { margin: 0; position: relative; }
.bl-quiet__photo img { width: 100%; height: min(78vh, 760px); object-fit: cover; object-position: 50% 30%; }
.bl-quiet__line {
  /* z-index: the corner scrim below is a ::after, and ::after paints after the
     element's children — so without this it darkened the very line it exists
     to make readable. */
  position: absolute; z-index: 1; left: var(--bl-pad-x); bottom: clamp(24px, 6vh, 64px);
  max-width: 14ch; margin: 0;
  font-family: var(--sc-font-display); font-weight: 900; color: #F4F6FB;
  font-size: clamp(2.4rem, 6vw, 5.2rem); letter-spacing: -.035em; line-height: .96;
}
/* a scrim only where the text sits (taste.md): a corner, not the frame */
.bl-quiet__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 100%, rgba(8, 26, 64, .84) 0%, rgba(8, 26, 64, .45) 34%, rgba(8, 26, 64, 0) 62%);
}

/* the choice — two doors of equal weight; each whole door is one link */
.bl-doors {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 32px); margin-top: clamp(20px, 3vw, 36px);
}
.bl-door {
  display: grid; gap: .65rem; align-content: start;
  padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) clamp(20px, 2.2vw, 30px);
  border-radius: 28px; text-decoration: none;
  box-shadow: 0 24px 48px -30px rgba(8, 26, 64, .6);
  transition: transform .25s ease, box-shadow .25s ease;
}
.bl-door:hover { transform: translateY(-4px); box-shadow: 0 32px 60px -30px rgba(8, 26, 64, .7); }
.bl-door:focus-visible { outline: 3px solid var(--bl-navy); outline-offset: 4px; }
.bl-door--give { background: var(--bl-navy); color: #F4F6FB; }
.bl-door--coffee {
  background: linear-gradient(to bottom, #F7661A 0%, var(--bl-sun-a) 70%); color: var(--bl-navy);
}
.bl-door__media { display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: .35rem; }
.bl-door__media img { width: 100%; height: 100%; object-fit: cover; }
.bl-door__title {
  font-family: var(--sc-font-display); font-weight: 900; padding: 0 .3rem;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem); letter-spacing: -.03em; line-height: 1;
}
.bl-door__text { font-family: var(--sc-font-text); font-size: 1.05rem; line-height: 1.5; padding: 0 .3rem; max-width: 40ch; }
.bl-door__go {
  justify-self: start; display: inline-flex; align-items: center; margin: .4rem .3rem 0;
  min-height: 44px; padding: 0 1.2rem; border-radius: 999px;
  font-family: var(--sc-font-display); font-weight: 800; font-size: .9rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.bl-door--give .bl-door__go { background: var(--bl-sun-lite); color: var(--bl-navy); }
.bl-door--coffee .bl-door__go { background: var(--bl-navy); color: #FFFFFF; }

/* bands — each way to give opens on one full-bleed photograph */
.bl-band {
  padding: 0; min-height: clamp(420px, 62vh, 620px);
  display: grid; align-content: end; overflow: hidden;
  background: var(--bl-navy-deep);
  --sc-ink: #F4F6FB; --sc-ink-soft: #DDE3F0; --sc-accent: var(--bl-sun-lite);
  --bl-btn-bg: var(--bl-sun-lite); --bl-btn-ink: var(--bl-navy);
  color: var(--sc-ink);
}
.bl-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The hall's top third is pale ceiling, where white type measured 2.2:1: crop to
   the children and the drums instead. */
#donate .bl-band__img { object-position: 50% 78%; }
/* scrim where the copy sits, the lower left, not the whole frame */
.bl-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(8, 26, 64, .88) 0%, rgba(8, 26, 64, .5) 42%, rgba(8, 26, 64, 0) 70%),
    linear-gradient(90deg, rgba(8, 26, 64, .66) 0%, rgba(8, 26, 64, .3) 34%, rgba(8, 26, 64, 0) 56%);
}
.bl-band__copy { position: relative; z-index: 1; padding: var(--bl-pad-y) var(--bl-pad-x); }
.bl-band .bl-h1 { max-width: 12ch; }
.bl-band .bl-lead { color: var(--sc-ink-soft); }
/* The morning photo was composed with calm navy space on its left for exactly
   this copy, so it needs only a light scrim and the copy sits high. */
.bl-band--morning { align-content: center; }
/* The wall is the left ~45% of the frame; the copy anchors to the viewport's
   left edge (not the centred wrap) and stays inside it, clear of the mug. */
.bl-band--morning .bl-band__copy { margin-left: 0; width: min(100%, 700px); }
.bl-band--morning .bl-h1 { font-size: clamp(2.6rem, 4.3vw, 3.9rem); max-width: 8.8em; }
.bl-band--morning::after {
  background: linear-gradient(90deg, rgba(8, 26, 64, .6) 0%, rgba(8, 26, 64, .25) 38%, rgba(8, 26, 64, 0) 58%);
}
.bl-badge {
  display: inline-flex; align-items: center; margin: 0 0 1.1rem;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--bl-sun-lite); color: var(--bl-navy);
  font-family: var(--sc-font-display); font-weight: 900; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase;
}

/* chips — native radios, styled; used by both pickers */
.bl-chips { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.bl-chip { position: relative; display: inline-flex; }
.bl-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.bl-chip span {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 .95rem;
  border-radius: 999px; border: 2px solid color-mix(in srgb, var(--sc-ink) 34%, transparent);
  font-family: var(--sc-font-display); font-weight: 800; font-size: 1.02rem;
  font-variant-numeric: tabular-nums; color: var(--sc-ink);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.bl-chip:hover span { border-color: var(--bl-sun-lite); }
.bl-chip input:checked + span { background: var(--bl-sun-lite); border-color: var(--bl-sun-lite); color: var(--bl-navy); }
.bl-chip input:focus-visible + span { outline: 3px solid var(--sc-ink); outline-offset: 3px; }

/* way one — the gift picker */
.bl-picker {
  display: grid; gap: clamp(24px, 5vw, 72px); align-items: center;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  margin-top: clamp(20px, 3vw, 36px);
}
.bl-picker__sun { display: grid; justify-items: center; gap: .8rem; }
.bl-sun--xl { width: min(100%, 320px); height: auto; aspect-ratio: 1; }
.bl-picker__sunnote { margin: 0; font-family: var(--sc-font-text); font-size: .95rem; color: var(--sc-ink-soft); }
/* the detail holds its height so the button does not jump between tiers */
.bl-picker__detail { margin-top: 1.4rem; min-height: 8.6em; }
.bl-picker__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem); letter-spacing: -.02em; line-height: 1.12;
}
.bl-picker__body {
  margin: .6rem 0 0; max-width: 56ch;
  font-family: var(--sc-font-text); font-size: 1.04rem; line-height: 1.6; color: var(--sc-ink-soft);
}
.bl-picker .bl-btn { margin-top: 1.2rem; }
.bl-picker__fine { margin: .8rem 0 0; max-width: 56ch; font-family: var(--sc-font-text); font-size: .9rem; color: var(--sc-ink-soft); }

/* other ways — Bloom's remaining standard options, as a definition list */
.bl-other {
  display: grid; gap: clamp(24px, 5vw, 72px); align-items: start;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}
.bl-ways { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 2rem; }
.bl-ways > div { border-top: 2px solid var(--bl-navy); padding-top: .8rem; }
.bl-ways dt { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.12rem; }
.bl-ways dd { margin: .35rem 0 0; font-family: var(--sc-font-text); font-size: 1rem; line-height: 1.5; color: var(--sc-ink-soft); }

/* way two — the coffee */
.bl-coffee .bl-lead { margin-top: 0; color: var(--sc-ink); font-weight: 600; }
.bl-perks { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .8rem; }
.bl-perks li {
  display: flex; align-items: center; gap: .85rem;
  font-family: var(--sc-font-display); font-weight: 800; font-size: 1.14rem; letter-spacing: -.01em;
}
.bl-perks li small {
  display: block; margin-top: .2rem; max-width: 46ch;
  font-family: var(--sc-font-text); font-weight: 600; font-size: .92rem; letter-spacing: 0;
  color: var(--sc-ink-soft);
}
.bl-perks svg {
  flex: none; width: 46px; height: 46px; padding: 11px; border-radius: 50%;
  background: var(--bl-navy); color: var(--bl-sun-lite);
}
.bl-bags { display: flex; justify-content: center; align-items: end; gap: clamp(10px, 2.2vw, 26px); }
.bl-bag { margin: 0; text-align: center; }
.bl-bag:nth-child(2) { transform: translateY(-18px); }
.bl-bag img {
  width: clamp(92px, 12.5vw, 172px); height: auto; aspect-ratio: 1024 / 1536; object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(8, 26, 64, .32));
}
.bl-bag figcaption {
  margin-top: .6rem;
  font-family: var(--sc-font-display); font-weight: 900; font-size: 1rem; letter-spacing: .01em;
}
.bl-bag figcaption small {
  display: block; margin-top: .15rem;
  font-family: var(--sc-font-text); font-weight: 600; font-size: .85rem; color: var(--sc-ink-soft);
}

/* what a year of coffee does — steps, then the coffee picker */
.bl-detail { align-items: start; }
.bl-steps { list-style: none; counter-reset: step; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1rem; }
.bl-steps li {
  counter-increment: step; position: relative; padding-left: 2.8rem;
  font-family: var(--sc-font-text); font-size: 1.05rem; line-height: 1.55; color: var(--sc-ink-soft);
}
.bl-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -.1em;
  font-family: var(--sc-font-display); font-weight: 900; font-size: 2rem; line-height: 1;
  color: var(--sc-accent);
}
.bl-steps strong { display: block; color: var(--sc-ink); font-family: var(--sc-font-display); font-weight: 800; font-size: 1.15rem; }
.bl-disclose { font-family: var(--sc-font-text); font-size: .88rem; line-height: 1.55; color: var(--sc-ink-soft); margin: 1.4rem 0 0; max-width: 62ch; }
.bl-cpick {
  display: grid; gap: 1rem; align-content: start;
  padding: clamp(18px, 2.4vw, 32px); border-radius: 28px;
  background: rgba(244, 246, 251, .06); border: 1px solid rgba(244, 246, 251, .16);
}
.bl-cpick .bl-chips legend { float: left; width: 100%; padding: 0; }
.bl-cpick__q { margin: 0 0 .7rem; font-family: var(--sc-font-display); font-weight: 800; font-size: 1.2rem; }
.bl-cpick__result { display: grid; }
.bl-cpick__n {
  margin: 0; font-family: var(--sc-font-display); font-weight: 900;
  font-size: clamp(3.6rem, 7vw, 5.8rem); letter-spacing: -.05em; line-height: .9;
  color: var(--bl-sun-lite); font-variant-numeric: tabular-nums;
}
.bl-cpick__l { margin: .3rem 0 0; font-family: var(--sc-font-display); font-weight: 800; font-size: 1.3rem; }
.bl-cpick__why { margin: .8rem 0 0; font-family: var(--sc-font-text); font-size: 1.08rem; line-height: 1.5; }
.bl-cpick__hero {
  margin: 0; font-family: var(--sc-font-display); font-weight: 900;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance;
}
.bl-cpick__club {
  margin: .75rem 0 0; font-family: var(--sc-font-display); font-weight: 800;
  font-size: 1.12rem; line-height: 1.3; letter-spacing: -.01em; color: var(--bl-sun-lite);
}
.bl-cpick__price { margin: .6rem 0 0; font-family: var(--sc-font-text); font-size: .9rem; line-height: 1.5; color: var(--sc-ink-soft); }
.bl-cpick .bl-btn { justify-self: start; }

/* close — abrupt, full-bleed, both doors, and the whole sun in navy */
.bl-close { padding-bottom: clamp(28px, 4vw, 48px); }
.bl-close__grid {
  display: grid; gap: clamp(24px, 4vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr);
}
.bl-close .bl-h1 { color: var(--bl-navy); max-width: 12ch; }
.bl-close__sun { display: grid; justify-items: end; }
.bl-sun--close { width: min(100%, 280px); height: auto; aspect-ratio: 1; }
.bl-sun--close .bl-sun__band { fill: var(--bl-navy); opacity: 1; }
.bl-sun--close.is-whole { animation: none; }
/* GenC's global styles/footer.css sets `footer { background: var(--cream);
   border-top: … }` on EVERY footer, which painted a cream box across Bloom's
   orange close. Reset it here (.bl .bl-foot outranks the bare element rule). */
.bl .bl-foot { background: transparent; border-top: 0; }
.bl-foot {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid; gap: 1.4rem; grid-template-columns: auto minmax(0, 1fr); align-items: end;
  font-family: var(--sc-font-text); font-size: .9rem; line-height: 1.6; color: var(--bl-navy);
}
/* One-colour logo on the orange close: the full-colour mark's own orange sun
   vanishes into the gradient, so the logo's alpha is filled with navy. */
.bl-foot__logo {
  display: block; width: 190px; aspect-ratio: 2000 / 425;
  background: var(--bl-navy);
  -webkit-mask: url(/IMG/Logos/Bloom/bloom-logo-transparent_.png) center / contain no-repeat;
          mask: url(/IMG/Logos/Bloom/bloom-logo-transparent_.png) center / contain no-repeat;
}
.bl-foot a { color: var(--bl-navy); font-weight: 700; }
.bl-foot p { margin: 0; }

/* ── phones: step the type down a rung, stack the splits, compress the bar ─ */
@media (max-width: 860px) {
  .bl-hero { min-height: auto; }
  .bl-hero__grid, .bl-split, .bl-proof, .bl-picker, .bl-other, .bl-close__grid { grid-template-columns: 1fr; }
  .bl-split--flip > :first-child { order: 0; }
  .bl-meter { display: none; }
  .bl-mark__word small { display: none; }
  .bl-bar { gap: .6rem; }
  .bl-bar__ctas { margin-left: auto; }
  .bl-doors { grid-template-columns: 1fr; }
  .bl-ways { grid-template-columns: 1fr; }
  .bl-sun--xl { width: min(62vw, 240px); }
  .bl-picker__detail { min-height: 0; }
  .bl-close__sun { display: none; }
  .bl-foot { grid-template-columns: 1fr; }
  .bl-bags { justify-content: flex-start; }
  .bl-band { min-height: clamp(380px, 70vh, 560px); }
  .bl-band--morning { align-content: end; }
  .bl-band--morning .bl-band__copy { width: 100%; }
  .bl-band--morning .bl-band__img { object-position: 70% 50%; }
  .bl-band--morning::after {
    background: linear-gradient(0deg, rgba(8, 26, 64, .9) 0%, rgba(8, 26, 64, .5) 45%, rgba(8, 26, 64, 0) 75%);
  }
}
@media (max-width: 480px) {
  .bl-mark__word { font-size: 1.02rem; }
  .bl-btn--bar { padding: 0 .8rem; font-size: .76rem; min-height: 38px; }
  .bl-actions .bl-btn { width: 100%; }
  .bl-chip span { min-height: 48px; padding: 0 .95rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-btn, .bl-door, .bl-sun__band, .bl-read--on .bl-w { transition: none; }
  .bl-btn:hover, .bl-door:hover { transform: none; }
  .bl-sun.is-whole { animation: none; }
}