/* ============================================================================
   Blog index band 1 — hero + featured post.
   Figma 650:125761 "3" (1512 x 2403 at y=56) inside frame 650:125759 (1512x4056).

   The PAGE fill is 650:125759 -> #F0F2F5 (a light grey), not black. The dark
   teal at the top of the page is not a fill at all: it is two #051F1D ellipses
   in HARD_LIGHT, layer-blurred, sitting over that light page. Everything below
   them resolves back to #F0F2F5.

   Figma child order is back-to-front, so children[0] is the BOTTOM layer.
   Paint order for this band:
     650:125762  Ellipse 473  1707.7x630.4 @ (-147, -58)   #051F1D HARD_LIGHT
     650:125763  Ellipse 474  1280.8x377.4 @ (69.6, 767)   #051F1D HARD_LIGHT
     650:125764  Overlay      1512x890     @ (0, 56)       horizontal teal wash
     650:125765  navbar       1492x59      @ (10, 66)      shared chrome
     650:125784  content      1202x2020    @ (155, 205)

   DECLARED DEVIATION — both ellipses also carry BACKGROUND_BLUR 315.6. Chrome
   composites backdrop-filter on a mix-blend-mode element as an opaque frosted
   plate, nothing like Figma's result. Dropped, exactly as on the home hero.

   Every y offset below is a margin or an absolute top, never padding.
   ========================================================================= */

/* ---- page shell -----------------------------------------------------------
   650:125759 fill #F0F2F5. `isolation: isolate` keeps the HARD_LIGHT ellipses
   blending against this page and not against whatever the browser painted
   underneath it. */
.afxb {
  position: relative;
  isolation: isolate;
  background: #F0F2F5;
  font-family: var(--font-sans);
}

/* ---- band 1 ---------------------------------------------------------------
   The band itself starts at y=56 and is 2403 tall, but the announcement bar
   sits directly above it with no gap, so the section owns 0..2459 and the bar
   is its first flow child. */
.afxb-top {
  position: relative;
  min-height: 2459px;
  overflow: hidden;
}

/* 650:125762 "Ellipse 473" — 1707.7x630.4 @ x=-147 y=-58, #051F1D,
   LAYER_BLUR 516.4 (Figma radius is ~2x the CSS blur() value -> 258.2px),
   rotation 3.1156 rad = 178.51deg, which on a symmetric ellipse is -1.49deg.
   Pinned to the centre so it does not slide when the viewport exceeds 1512. */
/* DECLARED DEVIATION — blur and width are TUNED, not the drawn values, and the
   tuning was measured rather than eyeballed.
   · Blur. Figma LAYER_BLUR 516.4 maps to CSS blur(258.2) by the usual halving,
     but Chrome's Gaussian at that radius spreads the alpha far more than
     Figma's: sampled against the reference render across x=20..1460 at
     y=140/300/460 it came out a mean 47/255 too LIGHT (RMS 50). Sweeping the
     radius and re-sampling each time: 258 -> RMS 50, 150 -> 21, 110 -> 20,
     and 130 with the ellipses widened ~11% -> RMS 15.5, mean -5.5. That last
     is what ships. Residual is worst mid-page (~-30 at y=300 on the left).
   · Width. The drawn ellipse spans x -147..1560.7, edge to edge on a 1512
     frame but short of the right edge on anything wider, where the #F0F2F5
     page showed through as a hard seam. Both keep their DRAWN CENTRES
     (706.85 and 710) and scale with the viewport above 1512.
   Acceptance test if this is ever re-tuned: sampled R at y=140/300/460 across
   x=20..1460 within ~20 of ref/desktop.png. */
.afxb-top__glowA {
  position: absolute; left: 50%; top: -58px;
  width: max(1900px, 125.66vw);          /* 1707.7 drawn x 1.113 */
  height: 630.4px;
  margin-left: min(-999.2px, -66.08vw);  /* keeps the drawn centre, x=706.85 */
  background: var(--af-hero-glow); border-radius: 50%;
  transform: rotate(-1.486deg);
  filter: blur(130px);
  mix-blend-mode: hard-light;
  pointer-events: none;
}
/* 650:125763 "Ellipse 474" — 1280.8x377.4 @ x=69.6 y=767, same paint */
.afxb-top__glowB {
  position: absolute; left: 50%; top: 767px;
  width: max(1450px, 95.90vw);           /* 1280.8 drawn x 1.132 */
  height: 377.4px;
  margin-left: min(-771px, -50.99vw);    /* keeps the drawn centre, x=710 */
  background: var(--af-hero-glow); border-radius: 50%;
  transform: rotate(-1.486deg);
  filter: blur(130px);
  mix-blend-mode: hard-light;
  pointer-events: none;
}
/* 650:125764 "Overlay" — 1512x890 @ y=56, a VECTOR carrying a 89.85deg
   rgba(5,63,59,.62) -> transparent gradient.
   DECLARED DEVIATION — NOT DRAWN ON DESKTOP. It is a vector, not a rectangle,
   so REST reports the bounding box but not the path, and Figma's own render of
   the frame contains none of its effect: sampled across the reference at
   y=140 / 460 / 870 the profile is SYMMETRIC (y=140 reads R=72 at x=20 and
   R=76 at x=1460, darkest R=33 in the middle) and there is no step at all at
   y=946 where the node ends (944 -> 948 is 213 -> 212).
   Building it produced exactly what the reference does not have: a left-to-right
   ramp and a 106-unit hard seam across the page at y=946. The two ellipses
   alone reproduce the reference profile to within ~20-30/255, symmetric and
   gradual. On MOBILE the same gradient is real, reversed, and lives on the band
   frame (650:126029) instead — see the mobile block at the end of this file. */
.afxb-top__overlay {
  /* positioning stays here so the mobile block only has to flip `display` and
     supply the gradient — dropping it into the media query alone leaves the
     element static, which silently collapses it to zero height. */
  position: absolute; left: 0; right: 0; top: 56px; bottom: 0;
  display: none;
  pointer-events: none;
}
.afxb-top__inner { position: relative; z-index: 2; }

/* ---- content column -------------------------------------------------------
   650:125784 — 1202x2020 @ (155, 205). The navbar block above it ends at 125
   (66 + 59), so the column's own top edge is 205 - 125 = 80 of MARGIN.
   Padding here would inflate the box and drag every child down. */
.afxb-wrap {
  width: 1202px;
  margin: 80px auto 0;
  display: flex; flex-direction: column; gap: 120px;
}

/* ---- 650:125785 — hero block, 1202x586, column / gap 60 / align CENTER ---- */
.afxb-hero { display: flex; flex-direction: column; gap: 60px; align-items: center; }

/* 650:125786 — 544x248, column / gap 32 / align CENTER */
.afxb-hero__head {
  width: 544px;
  display: flex; flex-direction: column; gap: 32px; align-items: center;
}
/* 650:125787 — 544x162, SF Pro 510 90px/81px, ls -2.7px, centred.
   Two fills; the linear gradient is fills[1] so it paints on top. */
.afxb-hero__h1 {
  margin: 0; width: 544px;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 90px; line-height: 81px; letter-spacing: -2.7px;
  text-align: center;
  background-image: linear-gradient(160.8deg, #F8F8F8 0%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* ink guard. background-clip:text paints the gradient only inside this
     element's border box, so the descender that hangs below the last line
     box gets no paint at all and is sliced off flat. Push the paint box
     down and take the same space straight back, so the glyphs are whole
     and nothing below this element moves. */
  padding-bottom: .2em; margin-bottom: -.2em;
}
/* 650:125788 — 326x54, SF Pro 510 18px/27px, ls -0.36px, #FFF at 0.8 */
.afxb-hero__lead {
  margin: 0; width: 326px;
  font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; letter-spacing: -.36px;
  text-align: center;
  color: var(--af-white); opacity: .8;
}

/* ---- 650:125789 — featured post, 1202x278 -------------------------------
   fill #F9F9F9, radius 32, row / gap 16 / padding 4, clipsContent. */
.afxb-feat {
  display: flex; flex-direction: row; gap: 16px;
  width: 1202px; height: 278px; box-sizing: border-box;
  padding: 4px;
  background: #F9F9F9; border-radius: 32px;
  overflow: hidden;
  text-decoration: none;
}
/* 650:125790 — 589x270, image fill scaleMode FILL, radius 28 */
.afxb-feat__media {
  position: relative;
  width: 589px; height: 270px; flex: 0 0 589px;
  border-radius: 28px; overflow: hidden;
  background-repeat: no-repeat; background-position: center; background-size: cover;
}
/* 650:125791 — tag pill 94x29. Figma puts it at (20,16) of the CARD, and the
   media box it sits in is itself at (4,4) of that card, so inside the media it
   is (16,16) — not (20,16). Same on the grid card, 650:125843.
   Gradient 73.7deg #053F3B -> rgba(5,63,59,.79) 59.83% -> #FFFFFF, radius 57,
   BACKGROUND_BLUR 8.35 (kept: this one is not on a blend-mode layer). */
.afxb-tag {
  position: absolute; left: 16px; top: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  height: 29px; box-sizing: border-box;
  padding: 4px 12px;
  border-radius: 57px;
  /* The fill carries paint-level "opacity": 0.09, so every stop's alpha is
     multiplied by .09 — this is a frosted glass chip over the photo, not the
     solid dark pill a full-strength gradient produces. (fx.py only applies
     paint opacity to SOLID fills, which is how it was missed the first time.)
     Angle: handles (-0.0603,0.7121)->(1.0814,0.3788) over the 94x29 box give a
     real vector of (107.3, -9.67)px = 84.85deg, not the 73.7 you get by
     reading the normalised handles without correcting for the box. */
  background: linear-gradient(84.85deg,
              rgba(5,63,59,.09) 0%, rgba(5,63,59,.0711) 59.83%, rgba(255,255,255,.09) 100%);
  -webkit-backdrop-filter: blur(8.35px); backdrop-filter: blur(8.35px);
  color: var(--af-white);
  font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  white-space: nowrap;
}
/* 650:125793 — text column 589x270, column / gap 12 / padding 16 / SPACE_BETWEEN */
.afxb-feat__body {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  width: 589px; height: 270px; flex: 0 0 589px; box-sizing: border-box;
  padding: 16px;
}

/* 650:125794 — meta row, row / gap 16 / align CENTER, 14px UPPER */
.afxb-meta {
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  height: 14px;
}
.afxb-meta__item { display: inline-flex; align-items: center; gap: 4px; }
.afxb-meta__item img { display: block; width: 14px; height: 14px; flex: none; }
.afxb-meta__text {
  font-weight: var(--w-medium);
  font-size: 14px; line-height: 16.71px; letter-spacing: -.28px;
  text-transform: uppercase;
  color: rgba(37,63,67,.7);
  white-space: nowrap;
}

/* 650:125829 — 557x125, column / gap 12 */
.afxb-feat__text { display: flex; flex-direction: column; gap: 12px; width: 557px; }
/* 650:125832 — SF Pro 700 32px/35.2px, ls -0.96px, #0D0D0D */
.afxb-feat__title {
  margin: 0; width: 557px;
  font-weight: var(--w-bold);
  font-size: 32px; line-height: 35.2px; letter-spacing: -.96px;
  color: #0D0D0D;
}
/* 650:125833 — SF Pro 400 20px/26.4px, ls -0.6px, #0D0D0D at 0.8, 3 lines */
.afxb-feat__desc {
  margin: 0; width: 557px;
  font-weight: var(--w-regular);
  font-size: 20px; line-height: 26.4px; letter-spacing: -.6px;
  color: #0D0D0D; opacity: .8;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ---- motion ---------------------------------------------------------------
   Tokens only; transform and opacity only. Hover is gated so it does not stick
   after a tap on touch. */
.afxb-feat {
  transition: transform var(--t-base) var(--e-out);
  will-change: transform;
}
.afxb-feat__media { transition: transform var(--t-slow) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .afxb-feat:hover { transform: translateY(-4px); }
  .afxb-feat:hover .afxb-feat__media { transform: scale(1.03); }
  /* the tag lives inside the scaled media box, so counter-scale it or the
     label softens and the pill grows with the photo */
  .afxb-feat:hover .afxb-tag { transform: scale(.97087); }
  .afxbg-card:hover .afxb-tag { transform: scale(.96154); }
}
.afxb-tag { transform-origin: left top; transition: transform var(--t-slow) var(--e-out); }
.afxb-feat:active { transform: translateY(-1px) scale(.995); transition-duration: var(--t-instant); }
/* the shared ring rule squares the card to 4px on keyboard focus; keep the ring */
.afxb-feat:focus-visible { border-radius: 32px; }

/* ---- responsive -----------------------------------------------------------
   The design is drawn at 1512 and 393. Between those two the column simply
   narrows; the values below the 393 breakpoint are the mobile frame's own
   (650:126046), not derived.                                                */
@media (max-width: 1512px) {
  .afxb-wrap { width: auto; max-width: 1202px; margin-left: var(--gutter); margin-right: var(--gutter); }
  .afxb-feat { width: auto; }
  .afxb-feat__media { flex: 1 1 0; width: auto; min-width: 0; }
  .afxb-feat__body { flex: 1 1 0; width: auto; min-width: 0; }
  .afxb-feat__text, .afxb-feat__title, .afxb-feat__desc { width: auto; }
}
@media (max-width: 1100px) {
  .afxb-hero__h1 { font-size: 72px; line-height: 65px; letter-spacing: -2.16px; }
  .afxb-wrap { gap: 96px; }
}
@media (max-width: 860px) {
  .afxb-top { min-height: 0; }
  .afxb-feat { height: auto; flex-direction: column; }
  .afxb-feat__media { width: 100%; flex: none; height: 220px; }
  .afxb-feat__body { width: 100%; flex: none; height: auto; }
}

/* ---- mobile, Figma 650:126021 (393 x 7335) --------------------------------
   650:126046  hero block  345x651 @ x=24.5, column / gap 50
   650:126047  head        345x172, column / gap 24
   650:126050  h1          320x94,  SF Pro 510 52px/46.8px, ls -1.56px
   650:126051  lead        345x54,  18px/27px unchanged
   650:126052  featured    345x429, column / gap 16 / padding 4, radius 32
   650:126053  media       337x167, radius 28
   650:126056  body        337x238, column / gap 32 / padding 16
   650:126072  meta text   12px/14.32px, ls -0.24px
   650:126094  title       272x52,  SF Pro 700 24px/26.4px, ls -0.72px
   650:126095  desc        305x96,  SF Pro 400 18px/23.76px, ls -0.54px
   The content column is 390 @ x=2, so the page gutter is 2px and each block
   is centred inside it at its own drawn width.                              */
@media (max-width: 767px) {
  /* 650:126029 ends at 4739 and its content (650:126045) ends at 4639, so the
     band carries 100px of trailing space before the CTA. On desktop the same
     234px comes out of min-height: 2459; here the band hugs, so it is padding
     on the section rather than a margin on the next band. */
  .afxb-top { min-height: 0; padding-bottom: 100px; background: #FFFFFF; }
  /* 650:126031 "Overlay" is 393x1428 with NO fills on mobile — the teal wash
     moved onto the BAND, 650:126029, which carries two fills: SOLID #FFFFFF
     (hence the background above; the page's #F0F2F5 does not apply here) and
     the same 89.85deg gradient REVERSED — rgba(5,63,59,0) at 0% to
     rgba(5,63,59,.62) at 100% — running the band's full 4683 height.
     Confirmed in the mobile reference: the left edge reads (254,254,254) and
     the right (100,136,133) at every row from y=1000 to y=4600. */
  .afxb-top__overlay {
    display: block;
    background: linear-gradient(89.85deg, rgba(5,63,59,0) 0%, rgba(5,63,59,.62) 100%);
  }
  /* 650:126030 — same ellipse, same paint, clipped to a 393 frame. Centred
     there, so the vw scaling above must not apply. */
  .afxb-top__glowA { width: 1707.7px; height: 630.4px; margin-left: -853.85px; top: -35px; filter: blur(130px); }
  .afxb-top__glowB { display: none; }

  .afxb-wrap {
    width: 390px; max-width: none; margin: 63px auto 0;   /* nav ends 128, block at 188 -> 60 */
    gap: 80px;                                            /* hero ends 839, pills at 919 */
  }
  /* 650:126046 is 345 wide at x=24.5, not the full 390 column, so the block
     hugs rather than filling and centring its children inside a wider box. */
  .afxb-hero { width: 345px; margin: 0 auto; gap: 50px; align-items: center; }
  .afxb-hero__head { width: 345px; gap: 24px; align-items: center; }
  /* 650:126050 is 320 wide inside the 345 block, not 345. That 25px is what
     breaks the line after "to" as drawn; at 345 Inter fits "Welcome to the"
     on the first line and the headline wraps a word later than the design. */
  .afxb-hero__h1 { width: 320px; font-size: 52px; line-height: 46.8px; letter-spacing: -1.56px; }
  .afxb-hero__lead { width: 345px; }

  .afxb-feat {
    width: 345px; height: auto; flex-direction: column; gap: 16px;
    padding: 4px; border-radius: 32px;
  }
  .afxb-feat__media { width: 337px; height: 167px; flex: none; border-radius: 28px; }
  .afxb-feat__body { width: 337px; height: auto; flex: none; gap: 32px; padding: 16px; justify-content: flex-start; }
  .afxb-feat__text { width: 305px; gap: 12px; }
  .afxb-feat__title { width: 305px; font-size: 24px; line-height: 26.4px; letter-spacing: -.72px; }
  .afxb-feat__desc { width: 305px; font-size: 18px; line-height: 23.76px; letter-spacing: -.54px; -webkit-line-clamp: 4; }
  .afxb-meta { gap: 12px; }
  .afxb-meta__text { font-size: 12px; line-height: 14.32px; letter-spacing: -.24px; }
}