/*
 * Generated by scripts/port-css.mjs from the CSS Modules that preceded
 * this theme. Edit the rules here — the generator is kept for reference,
 * not re-run against a moved target.
 */

/* ─── components/sections/Brands.module.css ─────────────────────────────────────── */
.us-br {
  position: relative;
  padding-block: var(--air);
  /*
   * The exact formula behind `.head`'s own two-line height: `display-md`'s
   * font-size, doubled by its 0.92 line-height, times two lines. `.decoCheer`
   * below reads this rather than a guessed pixel offset, so it lands on
   * "nothing filler"'s baseline at every width, not just the ones measured.
   */
  --h2-fs: clamp(2.2rem, 6vw, 5.2rem);
}

.us-br-head { margin-bottom: 2.6rem; display: flex; flex-direction: column; gap: 0.8rem; }

.us-br-list { border-top: 1px solid var(--ink-12); }

.us-br-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.6rem;
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--ink-12);
  overflow: hidden;
  isolation: isolate;
}

/* the tint that wipes across on hover */
.us-br-row-wash {
  position: absolute;
  inset: 0;
  background: var(--tint-soft, var(--lilac-soft));
  transform: scaleY(0);
  transform-origin: bottom;
  z-index: -1;
}

.us-br-row-name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(1.9rem, 5.4vw, 5rem);
  white-space: nowrap;
}

.us-br-row-note {
  font-size: 0.86rem;
  color: var(--grey);
  max-width: 26rem;
  justify-self: start;
  padding-left: clamp(0px, 3vw, 3rem);
}

.us-br-row-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--grey);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.us-br-row-arrow { width: 18px; height: 14px; }
.us-br-row-arrow path { stroke: var(--ink); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* the product stack that slides in from the right on hover */
.us-br-peek {
  position: absolute;
  right: clamp(1rem, 6vw, 7rem);
  top: 50%;
  display: flex;
  gap: 0.6rem;
  pointer-events: none;
  z-index: 2;
}
.us-br-peek-card { width: clamp(72px, 8vw, 108px); }

@media (max-width: 899px) {
  .us-br-row { grid-template-columns: 1fr; gap: 0.6rem; }
  .us-br-row-note { padding-left: 0; }
  .us-br-peek { display: none; }
}

/* ── Decoration ──────────────────────────────────────────────────────
   There is no wrapper band here any more. Every character in this section is
   a direct child of the section, positioned against it, because all three
   derive their placement from the same two things — `var(--air)` and the
   headline's own height — and a wrapper offset by a `clamp()` of its own only
   put a second, unrelated variable in the middle of that arithmetic. */

/*
 * The pair, watching from the far right of the band. Percentages here are
 * against the band's own box — `.deco` sets no
 * `overflow: hidden`, so a mark taller than the 8rem band (this one is) is
 * free to spill past its top and bottom edges rather than being clipped to it.
 * `top: 45%` plus its own height still clears `.list` with room at every width
 * this was checked at (30px+ at the tightest).
 *
 * Faces right already; the rotate tips that gaze down toward the rows below,
 * which is the only cue here that the band hides more underneath it.
 */
.us-br-deco-pair {
  /*
   * Sitting on the same rule `.decoChill` stands on, not hovering above it.
   *
   * `top: 45%` of `.deco`'s 8rem band put them in mid-air with nothing under
   * them — two dogs and a headline sharing a white box. The rule is `.list`'s
   * `border-top`, and it is derived here exactly as it is for `.decoChill`:
   * `.head` starts at `var(--air)`, its own height is the two-line h2
   * (`--h2-fs` x 1.84), and the gap under it is `.head`'s 2.6rem margin. That
   * arithmetic is measured from the *section*, which is why the element moved
   * out of `.deco` in the component — `.deco` is offset from the section's top
   * by a `clamp()` of its own, and a `top` inside it would be measured from
   * there.
   *
   * They are a *seated* pair, so the 12px tuck is deeper than the standing
   * figure's 5px: a rump settles onto a line, it does not balance on it.
   *
   * The `rotate(9deg)` that used to tip their gaze toward the rows is gone. It
   * was doing nothing — `castIn`'s entrance writes the whole `transform`
   * property, so GSAP owned it from the first frame — and now that they are on
   * a line, a tilt would lift one side of them off it.
   */
  --pair-w: clamp(110px, 9vw, 170px);
  /* 620x539 in the manifest. */
  --pair-h: calc(var(--pair-w) * 0.8694);
  width: var(--pair-w);
  top: calc(var(--air) + var(--h2-fs) * 1.84 + 2.6rem - var(--pair-h) + 12px);
  /*
   * Measured off the section's outer edge, which ignores its own
   * `padding-right: gutter + rail` — the fixed side rail (`--rail`, 68px) sits
   * in that reserved strip and paints over anything placed past it. `9%`
   * clears the rail at every width this was checked at.
   */
  right: 9%;
  opacity: 0.94;
}

.us-br-head { position: relative; z-index: 1; }

/*
 * Bluey, reaching up into "nothing filler" from below.
 *
 * `top` is exact, not eyeballed: `.head`'s own bottom edge sits at
 * `--air` + the h2's real two-line height (`--h2-fs` × 1.84, i.e. its
 * 0.92 line-height twice) — the same box `.head`'s CSS margin measures from.
 * The `- 16px` is how far her paws are deliberately let overlap up into the
 * line rather than merely touch under it; the gap below that line is exactly
 * `.head`'s own 2.6rem margin-bottom, and at this height (52px) her feet still
 * clear it before `.list` starts.
 *
 * `left` is a plain percentage of the section width rather than a formula off
 * the h2's own box, because "nothing filler" is a SplitText mask target, not a
 * stable measuring surface — verified against the rendered line at 1180 / 1440
 * / 1920 instead.
 */
/*
 * Bluey holds the headline up — both raised paws just under the baseline of
 * "nothing filler". This is the one deliberate text contact in the cast layer.
 *
 * Width lives here rather than on the component so the offset below can be
 * derived from it. An earlier pass pinned her at a flat 38px, which cleared
 * the type at every width and made the placement pointless: at 1920 she was a
 * 38px smudge beside 90px letterforms and read as a stray sticker rather than
 * as something holding a line up. She has to be big enough to look like she is
 * taking the weight.
 *
 * `top` is the second h2 line's baseline, derived from `--h2-fs` rather than
 * guessed — the headline is two lines at every width this shows at. The
 * negative margin then lifts her until her paws are *in* the letterforms
 * rather than under them. That is further than it sounds — she is 520x761, so
 * at 112px wide she stands 164px tall, and the clear band between the
 * headline's baseline and the `.list` border is only ~60px. Hung from the
 * baseline she dropped across the rule into the Stanley row's copy. Lifted,
 * she overlaps the type she is holding, which is the effect anyway.
 *
 * Margin, not `transform`: `castIn`'s `reach` entrance tweens `rotate`, and
 * GSAP writes the whole `transform` property when it does.
 */
.us-br-deco-cheer {
  --cheer-w: clamp(64px, 5.8vw, 112px);
  width: var(--cheer-w);
  /*
   * Her feet on the second line's baseline, exactly — no lift.
   *
   * She used to be hung a little higher than this so her paws finished *inside*
   * the letterforms, which is what "holding the line up" wanted. It does not
   * survive being looked at: she is 520x761, so at 112px wide she stands 164px
   * tall against a 76px line, and what a reader sees is not two paws under a
   * baseline but a whole dog standing behind the words — reported, fairly, as
   * an image in the background of the title. The clear band under the headline
   * is only 42px (the h2's 2.6rem margin plus a little), and a Bluey that fits
   * in 42px is 29px wide, which is the "stray sticker" this placement was
   * rewritten once already to stop being.
   *
   * So she moves out from behind the line and stands at the end of it instead
   * (see `left`), paws up, feet on the same baseline. Same gesture, same
   * relationship to the headline, nothing behind the type.
   */
  top: calc(var(--air) + var(--h2-fs) * 1.84 - var(--cheer-w) * 1.4635);
  /*
   * Just past the end of "nothing filler", derived the same way `top` is — not
   * a percentage of the section.
   *
   * The headline's width is a function of `--h2-fs`, not of the viewport:
   * measured, the second line runs 8.85 x the font size (627px at 71px type,
   * 737px at 83px), and above about 870px the clamp pins the font size so the
   * line stops growing altogether while the section keeps widening. A
   * percentage `left` therefore drifts across the letterforms as the viewport
   * changes — which is how an earlier pass had her over the word gap at 1920
   * and squarely on the N of NOTHING at 1440.
   *
   * `8.85em + 12px` is the character after the line's last, at every width.
   * `.decoPair` holds the far right of the same band and the gap between them
   * is 277px at 1440 and 647px at 1920, so nothing crowds.
   */
  left: calc(var(--gutter) + var(--h2-fs) * 8.85 + 12px);
}

/*
 * Bluey, standing on the top rule of the brand list.
 *
 * `.decoCheer` ends around x931 at 1920 and `.decoPair` does not start until
 * x1590 — 659px of empty white across the widest part of the head band, with a
 * 1px rule running underneath it. That rule is `.list`'s `border-top`, the
 * first drawn line in the section, and it is the only thing in this band a
 * character can touch.
 *
 * Derived the same way `.decoCheer`'s `top` is: `.head` starts at `var(--air)`
 * and its own height is the two-line h2 (`--h2-fs` x 1.84 — the font size
 * times its 0.92 line-height, twice), and the gap to `.list` is `.head`'s own
 * 2.6rem bottom margin. Subtracting his height puts his paws on the line, and
 * the 5px back off tucks them behind it.
 *
 * 69% is the one column that clears both neighbours at every desktop width.
 * `.decoCheer` tracks the headline (its `left` is a multiple of `--h2-fs`) and
 * `.decoPair` is pinned to the right at `right: 9%`, so the gap between them
 * narrows from 659px at 1920 to 119px at 900 — measured, the clearances at 69%
 * are 32px and 31px at the tightest.
 *
 * He is the one source in `Elements/bluey/` drawn standing square on his own
 * paws with nobody leaning on him, which is what a placement on a horizontal
 * line needs; the two already here are a reach and a seated pair.
 */
.us-br-deco-chill {
  --chill-w: clamp(56px, 5vw, 96px);
  /* 520x718 in the manifest. Read off the built asset, never guessed. */
  --chill-h: calc(var(--chill-w) * 1.3808);
  width: var(--chill-w);
  top: calc(var(--air) + var(--h2-fs) * 1.84 + 2.6rem - var(--chill-h) + 5px);
  left: 69%;
}

@media (max-width: 899px) {
  /* The head stacks here and the band the three of them share is gone: the
     headline runs to the full measure and `.list` starts ~40px under it. */
  .us-br-deco-pair, .us-br-deco-chill { display: none; }

  /*
   * Bluey does not go off — she moves to the other end of the section and
   * turns her gesture upside down.
   *
   * The deepest empty space on the phone layout of this section is the band
   * *under* the list: at 390 the SMIGGLE row's closing rule sits at y544 and
   * the section runs to y810, which is 265px of white with one line drawn
   * across the top of it. A standing figure has nothing to stand on down
   * there — but this pose is a reach, both paws over her head, and a reach
   * does not need a floor. It needs something above it to reach *for*, and
   * that rule is exactly that.
   *
   * The anchor is the same one `.decoHug` uses at the top of this file:
   * `.list` is the section's last child and carries no bottom margin, so its
   * closing border sits exactly `var(--air)` above the section's bottom edge.
   * Subtracting her own height puts the top of her box — which is her paws,
   * not her head — on that line, and the 8px carries them just past it.
   *
   * Left, because `.decoHug` holds the right of the same rule from inside the
   * row above it. The two read as one dog reaching up to the shelf the others
   * are standing on.
   */
  .us-br-deco-cheer {
    --cheer-w: clamp(78px, 22vw, 104px);
    display: block;
    top: auto;
    left: 9%;
    bottom: calc(var(--air) - var(--cheer-w) * 1.4635 + 8px);
  }
}


/*
 * Bandit, Bingo and the puppy, standing on the closing rule of the SMIGGLE row.
 *
 * They used to stand in the band *under* that rule, on the section's own
 * bottom edge — and that band is `padding-block: var(--air)`, i.e. the air
 * every section leaves before the next one starts. Nothing is drawn there and
 * nothing ever will be, so what a viewer saw was three dogs in the middle of a
 * white gap with no floor: the placement had no verb. Standing them on the one
 * line that *is* drawn there gives them one.
 *
 * The anchor is derived, not measured. `.list` is the last child of the
 * section and carries no bottom margin, so its closing border sits exactly
 * `var(--air)` above the section's own bottom edge at every width and every
 * row count — which makes `bottom: calc(var(--air) - 7px)` their feet, seven
 * pixels of paw tucked behind the line so they stand *on* it rather than
 * balance on top of it.
 *
 * Height is bounded by the row they now stand in: they rise off the rule into
 * the SMIGGLE row, and anything taller than that row's ~154px (1920) puts
 * their heads through the rule above and into STANLEY's copy. 104px wide is
 * 147px tall, and the clamp keeps that relationship down to 900 where the row
 * is only 101px deep.
 *
 * `left` keeps them in the row's one clear column, and that column moves:
 * `.rowNote` is capped at 26rem, so as the page narrows its right edge slides
 * from 47.3% of the viewport at 1920 to 65.1% at 1280, while `.rowMeta` comes
 * the other way, from 88.2% to 83.9%. Two values cover the whole desktop
 * range; below 1100 the two edges are 24px apart and there is no column left
 * at all, which is what the rule further down answers.
 *
 * They are rendered *after* `.list` in the component for this to work: `.row`
 * sets `isolation: isolate` for its hover wash, so a character painted before
 * it is behind that wash and vanishes the moment the row is hovered.
 */
.us-br-deco-hug {
  --hug-w: clamp(58px, 5.6vw, 104px);
  width: var(--hug-w);
  bottom: calc(var(--air) - 7px);
  left: 66%;
}

@media (max-width: 1279px) and (min-width: 1100px) {
  /* The note has reached 65-71% of the width here and the meta has come in to
     82-84%. 72% is the middle of what is left. */
  .us-br-deco-hug { left: 72%; }
}

@media (max-width: 1099px) and (min-width: 900px) {
  /*
   * The one width band where they cannot stand on the rule.
   *
   * The row is still a three-column grid here, and the two columns either side
   * have closed on the middle: measured at 940 the note's right edge is at
   * 77% and the meta's left edge at 79.6%, a 24px window for a 58px figure.
   * There is nowhere on that line to put them.
   *
   * So they step down into the band under it. That band is the section's own
   * `padding-block: var(--air)` and nothing is drawn in it, which is exactly
   * the placement this pass moved them *out of* — it is a worse picture than
   * standing on the rule and a better one than standing on the copy, and this
   * is the only range where that trade has to be made.
   */
  .us-br-deco-hug { bottom: -2%; left: auto; right: 8%; }
}

@media (max-width: 899px) {
  /*
   * Back on the rule. The row stacks here — `grid-template-columns: 1fr`, name
   * over note over meta, all of it left-aligned — so the right of the row's
   * closing line is clear, which is the one thing the three-column desktop
   * layout could not offer between 900 and 1100.
   */
  .us-br-deco-hug { left: auto; right: 6%; }
}

@media (max-width: 559px) {
  /*
   * ...until the copy stops leaving a right-hand edge at all.
   *
   * `.rowNote` caps at 26rem, so it stops being a column and starts being the
   * whole row somewhere around 540px: at 600 it ends at x440 and he starts at
   * x506, at 430 it reaches x410 and he starts at x352. Measured, that is 6%
   * and 19% of him on the words at 390 and 360.
   *
   * There is nowhere in the row to move him to — the name, the note and the
   * item count stack down the left and each of the gaps between them is under
   * 50px — so on a handset the rule is `.decoCheer`'s alone, reaching up to it
   * from the band underneath. One dog on a line reads better than two, one of
   * which is on a sentence.
   */
  .us-br-deco-hug { display: none; }
}