/* Home hero: CMS hero image with overlaid OOO.Tea wordmark and two CMS
   speech bubbles whose font size is computed in the template (scales
   down with text length, 11px floor). Positions are % of the 405×410
   hero design box. */

.home__hero {
  position: relative;
}

.home__hero-img {
  display: block;
  width: 100%;
  height: auto;
}

.home__hero-wordmark {
  position: absolute;
  left: 26.5%;   /* centered at the doubled width */
  top: 68%;      /* sits atop the hill illustration below */
  width: 46.92%; /* the drawn 95px doubled */
  height: auto;
}

.home__bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  font-weight: var(--weight-medium);
  line-height: 1.25;
  overflow: hidden; /* belt & braces — caps + sizing should prevent this */
  overflow-wrap: break-word;
  hyphens: auto;
}

.home__bubble--right {
  /* measured ink-free interior of the drawn bubble: 83×90 at (236,88) */
  left: 58.15%;
  top: 7.2%;
  width: 20.49%;
  height: 21.95%;
}

.home__bubble--left {
  /* true interior 63×56 at (12,196) — the bubble's dotted bottom edge
     isn't its actual boundary */
  left: 2.96%;
  top: 33.66%;
  width: 15.56%;
  height: 13.66%;
}

/* size buckets set by the template (11-15px at the 405 design width;
   vw-scaled, floored at 11px for readability) */
.home__bubble--s11 { font-size: max(var(--text-micro), 2.72vw); }
.home__bubble--s12 { font-size: max(var(--text-micro), 2.96vw); }
.home__bubble--s13 { font-size: max(var(--text-micro), 3.21vw); }
.home__bubble--s14 { font-size: max(var(--text-micro), 3.46vw); }
.home__bubble--s15 { font-size: max(var(--text-micro), 3.70vw); }

/* ---- aggregation sections ---- */

/* home is mostly full-bleed bands/strips — sections opt back into the
   gutter individually instead of inheriting .page's */
.page.home {
  padding: 0;
}

.home__section {
  margin-top: var(--space-4);
}

/* per-section pill fills */
.home__pill--shop { background: #fcf3fa; }
.home__pill--gathering { background: #50bb9f; }
.home__pill--journal { background: #fdff90; }

/* On home the pills double as links to their section (same target as the
   More band below them) — h2 keeps the heading semantics, the anchor's
   ::before expands its hitbox over the whole pill, same accessible-card
   pattern as the cards' title links. No hover state by design; keyboard
   focus keeps the underline as its indicator. */
.page.home .divider-pill {
  position: relative;
}

.page.home .divider-pill a {
  color: inherit;
  text-decoration: none;
}

.page.home .divider-pill a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-l);
}

.page.home .divider-pill a:focus-visible {
  text-decoration: underline;
}

/* full-width color band with oversized text spilling past it (by design);
   the vw term tracks the 44px/405 design ratio, rem bounds keep zoom
   working */
/* flex, not grid: the arrow ::after would be its own grid item and drop to
   a second row */
.home__band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em; /* a word-space's worth of air before the arrow ::after */
  height: 3.08125rem; /* the designed 58px * 0.85 */
  margin-top: var(--space-4);
  /* 0.85 of the 44px/405 design ratio; rem bounds keep zoom working */
  font-size: clamp(calc(var(--text-heading) * 0.85), 9.265vw, calc(var(--text-display) * 0.85));
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  overflow: visible;
}

/* Arrow lives here, not in the markup, so the desktop gathering band can
   point the other way without a second text node in the DOM. */
.home__band::after {
  content: '→';
}

/* the label is its own span so the rule can't reach the arrow */
@media (hover: hover) {
  .home__band:hover .home__band-label {
    text-decoration: underline;
  }
}

.home__band--shop { background: #fcf3fa; } /* same pink as the Shop pill */
.home__band--gathering { background: #50bb9f; }
.home__band--journal {
  background: #fdff90; /* same yellow as the Journal pill */
}

/* phones: the featured entry's description sits a notch tighter, and the
   scatter rows close to half their gap */
@media (max-width: 45.9375rem) {
  .page.home .home-journal__featured .article-card__excerpt {
    line-height: 1.3;
  }

  /* .page.home outranks the base rule further down the file */
  .page.home .home-journal__scatter {
    row-gap: var(--space-2); /* half the base --space-4 */
  }
}

/* ---- shop strip ---- */

.home-shop {
  position: relative;
  margin-top: var(--space-4);
}

.home-shop__viewport {
  overflow: hidden;
  /* the slides' basket buttons end exactly at the clip edge — without a
     sliver of room, subpixel rounding shaves their bottom border */
  padding-bottom: 3px;
  cursor: grab;
}

.home-shop__viewport.is-dragging {
  cursor: grabbing;
}

.home-shop__track {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--gutter);
  display: flex;
  touch-action: pan-y;
  animation: product-slide-scroll 90s linear infinite; /* no-JS fallback, keyframes from product.css */
}

/* js/scrub-strip.js splits the track's two item sets into their own
   .scrub-strip__group wrappers (position set inline by the JS) so they
   can relay past each other independently. */
.home-shop__track .scrub-strip__group {
  display: flex;
  touch-action: pan-y;
  width: max-content; /* shrink-to-fit — getBoundingClientRect() must report real content width, not the viewport's */
}

/* pitch: 80% image + 7.5% gap (354/405) */
.home-shop__slide {
  position: relative;
  flex: 0 0 80%;
  margin-right: 7.5%;
}

.home-shop__media {
  position: relative; /* anchors .product-card__bestseller (shop.css) */
}

/* +10% over shop.css's own bestseller badge size on this page — badge/
   peek/text all scaled together to stay in proportion. Anchor offset
   (right/bottom on .product-card__bestseller) stays as-is — that's
   distance from the card corner, not part of the icon's own scale. */
.home-shop__media .product-card__bestseller {
  width: 5.98125rem;     /* 95.7px, 87px * 1.1 */
  height: 4.7953125rem;  /* 76.725px, 69.75px * 1.1 */
}

.home-shop__media .product-card__bestseller-badge {
  width: 3.09375rem; /* 49.5px, 45px * 1.1 */
  height: 3.09375rem;
}

.home-shop__media .product-card__bestseller-peek {
  width: 2.9390625rem;  /* 47.025px, 42.75px * 1.1 */
  height: 4.7953125rem; /* 76.725px, 69.75px * 1.1 */
}

.home-shop__media .product-card__bestseller-text {
  left: 0.20625rem;     /* 3.3px, 3px * 1.1 */
  top: 2.6296875rem;    /* 42.075px, 38.25px * 1.1 */
  width: 2.68125rem;    /* 42.9px, 39px * 1.1 */
  font-size: 0.5671875rem; /* 9.075px, 8.25px * 1.1 */
}

.home-shop__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4; /* the shop's uniform photo format, shown whole */
  object-fit: cover;
}

.home-shop__img--empty {
  background: #ececec;
}

.home-shop__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.home-shop__name {
  flex: 1;
  min-width: 0; /* lets it wrap/shrink instead of pushing .home-shop__stock out */
  font-size: var(--text-body); /* 20px SemiBold — matches product-card names */
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

/* only reserved when home-shop.js finds at least one title in the
   current set actually wraps to 2 lines — keeps the card shorter when
   every title fits on 1 line (more common in EN than in ES, where
   titles run longer), while still keeping every card's price/basket
   row aligned to the same y whenever a 2-line title is present */
.home-shop--tall-titles .home-shop__name {
  min-height: 2.6em; /* 2 * line-height */
}

.home-shop__stock {
  flex: none; /* never yields its line to the title — title wraps first */
  white-space: nowrap;
}

.home-shop__name a {
  text-decoration: none;
}

/* whole slide opens the product (accessible-card pattern: short link
   text, hitbox expanded via ::before) */
.home-shop__name a::before {
  content: "";
  position: absolute;
  inset: 0;
}

.home-shop__stock,
.home-shop__price {
  font-size: var(--text-body);
  font-weight: var(--weight-light);
  line-height: 1.3;
}

.home-shop__basket {
  position: relative; /* above the expanded name hitbox */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3em 0.9em;
  border: 1px solid var(--color-ink); /* --border-thin */
  border-radius: var(--radius-m);
  /* buttons get a UA-default grey face color unless reset — without
     this, the real <button> (real Shopify variant) and the mailto <a>
     fallback (no variant yet) render with different backgrounds */
  background: none;
  font-size: var(--text-body); /* 20px — larger than shop cards' 16px, larger card */
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer; /* a <button> defaults to the arrow, unlike the links beside it */
}

/* explicit, not the browser's own inconsistent disabled style — same
   opacity as .u-dimmed (base.css), applied to .home-shop__stock when
   out of stock, so the label and button dim together as one state */
.home-shop__basket:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* fills pink on hover. :not(:disabled) because a disabled button is
   still hoverable — an out-of-stock one would otherwise light up as if
   it were live. Gated so a tap doesn't latch the state on touch. */
@media (hover: hover) {
  .home-shop__basket:not(:disabled):hover {
    background: #ffdff9;
  }
}

.home-shop__basket:not(:disabled):focus-visible {
  background: #ffdff9;
}

/* ---- gathering ---- */

/* .page.home prefix: gatherings.css/journal.css load after this file and
   reset .events/.articles padding — higher specificity keeps the gutter */
.page.home .home__event {
  padding-inline: var(--gutter); /* .events normally inherits this from .page */
}

/* ---- journal ---- */

.page.home .home-journal__featured {
  padding-inline: var(--gutter);
}

/* .article-card's own margin-bottom (journal.css, 2.5rem — the group gap
   between multiple stacked cards on the regular journal listing) plus
   this section's own margin-top don't collapse (the featured card's
   grid/subgrid container isn't normal block flow), so they add up
   directly — halving the gap to the scatter grid below means halving
   both (measured 64px total before, 32px after). */
.page.home .home-journal__featured .article-card {
  margin-bottom: 1.25rem;
}

/* unlike the journal listing's subgrid cards, these deliberately flow
   naturally — each excerpt starts right after its own title */
.home-journal__scatter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: 5%;
  row-gap: var(--space-4);
  margin-top: 0.75rem; /* half of --space-3 (24px) → 12px */
  padding-bottom: 0;
  padding-inline: var(--gutter);
}

/* the pair wrappers are a desktop device only — here the four entries lay
   themselves out as direct children of the grid, as they always have */
.home-journal__col {
  display: contents;
}

.home-journal__item {
  position: relative; /* anchors the title link's expanded hitbox */
}

.home-journal__title {
  margin-bottom: var(--space-1);
  font-size: var(--text-body); /* 20px — journal's small-card title size */
  font-weight: var(--weight-regular);
  line-height: 1.3;
}

/* no main event (journal alone in the split, same state the desktop
   band handles below): the scatter titles carry the section, so they
   step up to medium — every breakpoint, hence outside the media blocks */
.home__section--journal:only-child .home-journal__title {
  font-weight: var(--weight-medium);
}

.home-journal__title a {
  text-decoration: none;
}

/* journal's small-card excerpt tier, capped so a long tagline can't push
   the image far down its column */
.home-journal__excerpt {
  margin-bottom: var(--space-1);
  font-size: var(--text-small); /* 14px */
  font-weight: var(--weight-light);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* title + photo both open the article (accessible-card pattern: short
   link text, hitbox expanded over the whole entry). z-index lifts the
   hitbox above .home-journal__media, which is positioned (for the Read
   circle) and later in the DOM, so it would otherwise paint on top and
   swallow photo clicks; the Read circle stays above both at 2. */
.home-journal__title a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.home-journal__media {
  position: relative;
}

/* photos keep their own natural height at the shared column width */
.home-journal__img {
  display: block;
  width: 100%;
  height: auto;
}

.home-journal__img--empty {
  aspect-ratio: 4 / 5;
  background: #ececec;
}

/* circular Read — same font tier as journal's small-card Read (16px);
   js/read-bubble.js drifts it within the image bounds */
.home-journal__read {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  z-index: 2; /* above the title link's expanded hitbox */
  will-change: transform; /* one persistent layer across the drift's legs, no re-raster at each bounce */
  /* an axis-aligned translation gets snapped to whole device pixels (text
     crispness), which at 15–20px/s reads as a 20–30Hz step; the hair of
     rotation forces genuine sub-pixel positioning */
  rotate: 0.01deg;
  display: grid;
  place-items: center;
  width: 3.375rem; /* 54px */
  height: 3.375rem;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-size: var(--text-ui);
  font-weight: var(--weight-regular);
  line-height: 1;
  text-decoration: none;
}

.home-journal__read:focus-visible {
  background: #fdff90; /* the Journal pill's yellow */
}

@media (hover: hover) {
  .home-journal__read:hover {
    background: #fdff90;
  }
}

/* ============================================================
   Desktop. Reflow only — every rule above
   is mobile's and stays untouched; sizes here are those scaled
   proportionally, and the markup/JS (scrub-strip slider, drifting
   Read bubbles, newsletter dialog) are the mobile ones reused.
   ============================================================ */

/* below 72rem the wrapper must not exist as a box at all */
.home__split {
  display: contents;
}

/* only one of each bubble pair is ever shown (home.php) — display:none
   keeps the other out of the accessibility tree too, so nothing is read
   twice. After .home__bubble's own display:flex, which it must beat. */
.home__bubble--desktop {
  display: none;
}

/* tablet band: the scatter photos run near double their 405 design
   width, so the Read bubbles scale up a step with them */
@media (min-width: 46rem) and (max-width: 71.9375rem) {
  .home-journal__read {
    width: 3.88125rem; /* 54px + 15% */
    height: 3.88125rem;
  }

  /* the shop strip 15% down as one piece: the slide box shrinks (photo
     follows its width) and the type/button/badge scale with it — text is
     rem-fixed, so the box change alone wouldn't touch it. The box then
     took another 30% off its height (width follows the 3:4 photo). */
  .home-shop__slide {
    flex-basis: 47.6%; /* 68% * 0.7 */
    margin-right: 4.4625%;
  }

  /* the wordmark at the phone's share reads oversized on the wide hero */
  .home__hero-wordmark {
    left: 32.37%; /* keeps the base rule's centre (26.5% + half of 46.92%) */
    width: 35.19%; /* the base 46.92% * 0.75 */
  }

  /* the More bands read to the right edge (as on desktop), 15% down as
     one piece — at these widths the mobile clamp sits at its
     --text-display ceiling, so the type scales off that */
  .home__band {
    justify-content: flex-end;
    padding-inline: var(--gutter);
    height: 3.08125rem; /* 3.625rem * 0.85 */
    font-size: calc(var(--text-display) * 0.85);
  }

  /* the featured journal entry fits one screen under the header: the
     photo is the one flexible row and crops (cover) to whatever the
     title/excerpt/Read leave — same device as the desktop split */
  .page.home .home-journal__featured .article-card {
    display: flex;
    flex-direction: column;
    height: calc(100svh - 2.78125rem);
  }

  /* held vertically the full fit still runs long — 20% shorter, cropping
     the photo harder; landscape keeps the exact screen fit */
  @media (orientation: portrait) {
    .page.home .home-journal__featured .article-card {
      height: calc((100svh - 2.78125rem) * 0.8);
    }
  }

  /* the scatter entries' titles, a step up from their 20px base */
  .home-journal__title {
    font-size: 1.375rem; /* 22px — Vytas-tuned */
  }

  .page.home .home-journal__featured .article-card__img {
    flex: 1;
    min-height: 0;
    object-fit: cover;
  }

  .page.home .home-journal__featured .article-card__title,
  .page.home .home-journal__featured .article-card__excerpt {
    flex: none;
  }

  .page.home .home-journal__featured .article-card__more {
    flex: none;
    align-self: center; /* the column would otherwise stretch the pill card-wide */
  }

  .home-shop__name,
  .home-shop__stock,
  .home-shop__price,
  .home-shop__basket {
    font-size: 1.1875rem; /* 19px — the scaled 17px +2, Vytas-tuned */
  }

  /* the badge doubles here (net 1.7 after the strip's overall 0.85):
     the one small-print exception reads as dust at tablet card sizes */
  .home-shop__media .product-card__bestseller {
    scale: 1.53;
    transform-origin: bottom right;
  }

  .home-shop__basket {
    border-width: 1px; /* down from 1.5 — the smaller strip wants a lighter line */
  }
}

@media (min-width: 72rem) {
  /* How far the shop strip rides up over the foot of the hero art. In rem,
     not vw: it has to land the yellow marquee flush against the hero's
     bottom edge, and everything between the two is rem-based, so a vw
     value left a white sliver that changed size with the window.

       2.625rem  SHOP pill box (20px text at 1.4, +0.3em padding, +1px border)
       1.5rem    pill bottom margin
       2rem      pill TOP margin, which collapses out through main's own
                 zero padding, so it has to be paid back here
       0.125rem  hairline of overlap so rounding can't reopen the gap */
  .page.home {
    --home-overlap: 6.25rem;
    position: relative;
    z-index: 1;
    margin-top: calc(var(--home-overlap) * -1);
  }

  /* No box sizing here: the hero box is exactly the served image (its
     <picture> desktop source — a dedicated artwork, or the mobile art
     cropped server-side to the frame's 1440/985), so the marquee below
     always sits on the image's bottom edge whatever its height. */

  /* All overlay geometry below is measured from the dedicated desktop
     artwork (header-desktop.jpg, 2606×1309): ink-free interiors read off
     the source pixels, expressed as % of the art box so they hold at any
     width. A new desktop artwork needs its own measuring pass. */

  /* OOO.Tea rides the kettle body (its interior: x 355-560, y 470-593 of
     the source) */
  .home__hero-wordmark {
    left: 13.8%;
    top: 35.8%;
    width: 7.5%;
  }

  /* the drawn square bubble, upper middle (interior ≈ x 1543-1905,
     y 112-412 of the source); em side padding keeps the text off the
     ink at every size tier */
  .home__bubble--right {
    left: 59.2%;
    top: 8.4%;
    width: 13.9%;
    height: 24.4%;
    padding-inline: 0.6em;
  }

  /* the round bubble, lower left (interior ≈ x 466-702, y 670-907; the
     drawing bulges lower-left, so the box rides low of the ink's own
     middle to LOOK centered). The drawn interior is tight, so its copy
     keeps breathing room off the ink — em, so it tracks whichever size
     tier lands here. */
  .home__bubble--left {
    left: 17.7%;
    top: 52.4%;
    width: 9.6%;
    height: 19.6%;
    padding: 0.2em 0.25em;
  }

  /* flat size here, no buckets — the desktop fields' caps (home.yml) are
     measured against it */
  .home__bubble--mobile {
    display: none;
  }

  .home__bubble--desktop {
    display: flex;
  }

  /* Size ladder, same idea as mobile's s11-s15: shorter copy gets a bigger
     tier so it still fills the drawn bubble instead of floating in the
     middle of it. home.php picks the tier from the text's length, per
     bubble. vw, so bubble and text scale together and a tier holds the
     same amount at any desktop width; the rem floor is the zoom-safety
     term (bare vw type fails WCAG zoom) and sits below each tier's value
     at the 1440 design width, so it never engages there. The drawn
     bubbles in this artwork are smaller than the old crop's, hence the
     lower tiers — d1 is ~19px at 1440. */
  .home__bubble--d1 { font-size: max(var(--text-small), 1.08vw); }
  .home__bubble--d2 { font-size: max(var(--text-small), 1.38vw); }
  .home__bubble--d3 { font-size: max(var(--text-ui), 1.6vw); }
  .home__bubble--d4 { font-size: max(var(--text-ui), 1.85vw); }
  .home__bubble--d5 { font-size: max(var(--text-body), 2.2vw); }
  .home__bubble--d6 { font-size: max(var(--text-body), 2.75vw); }

  /* Section pills up a fifth. The padding is em-based so it follows the
     font on its own — only the fixed width has to be scaled alongside.
     --text-body is the next token up from --text-ui (a true 19.2px would
     be a bespoke value, which the units policy rules out for text). */
  .home__pill--shop,
  .home__pill--gathering,
  .home__pill--journal {
    width: 12.6rem;
    font-size: var(--text-body);
  }

  /* 30% off .divider-pill's 2rem. Deliberately not the SHOP pill: its top
     margin collapses out through main and is a term in --home-overlap
     above, so changing it would shift the hero/marquee alignment. */
  .home__pill--gathering,
  .home__pill--journal {
    margin-top: 1.4rem;
  }

  /* ---- shop strip: four cards across, images overlapping the hero ---- */

  /* +15% over the home strip's own already-enlarged badge — every part
     scales together so the icon stays in proportion. The anchor offset on
     .product-card__bestseller is distance from the card corner, not scale,
     so it stays put. */
  .home-shop__media .product-card__bestseller {
    width: 6.878rem;
    height: 5.5146rem;
  }

  .home-shop__media .product-card__bestseller-badge {
    width: 3.5578rem;
    height: 3.5578rem;
  }

  .home-shop__media .product-card__bestseller-peek {
    width: 3.379rem;
    height: 5.5146rem;
  }

  .home-shop__media .product-card__bestseller-text {
    left: 0.2372rem;
    top: 3.0241rem;
    width: 3.0834rem;
    font-size: 0.6523rem; /* 10.44px — the 9.075px badge tier ×1.15, same approved sub-floor exception as shop.css */
  }

  .home-shop__slide {
    flex: 0 0 22%;
    margin-right: 2.5%; /* 24.5% pitch — four cards to a viewport */
    /* mouse-dragging the strip would otherwise select the card's text on
       the way past (same reason .marquee__track sets it) */
    user-select: none;
    -webkit-user-select: none;
  }

  /* one size across the whole card — mobile sets the name a tier above its
     stock/price/button, desktop levels them. The bestseller badge is
     deliberately excluded: it's scaled as one piece with its own artwork
     above. .home-shop__basket's padding is em-based, so its box follows. */
  .home-shop__name,
  .home-shop__stock,
  .home-shop__price,
  .home-shop__basket {
    font-size: var(--text-body);
  }

  /* up from Light — the card's supporting figures carry at this size */
  .home-shop__stock,
  .home-shop__price {
    font-weight: var(--weight-regular);
  }

  /* mobile's 10.9vw would read 157px at 1440. Band stays full-bleed (it's
     a colour strip) but its text pulls to the content column's right edge.
     47.5px tall — holds the 32px type with a hair of air; only the
     justify axis is overridden, so the base rule's align-items:center
     still centres the text vertically. */
  .home__band {
    height: 2.97rem;
    justify-content: flex-end;
    padding-inline: var(--gutter);
    font-size: var(--text-heading);
  }

  /* ---- gathering + journal, side by side in one screen ---- */

  /* 1/3 : 2/3, held to the viewport height so the whole section
     can be taken in at once. The columns own the height and their media
     shrink into it, rather than the content dictating an overflow.
     svh, not dvh: dvh grows when a tablet browser's toolbar retracts
     mid-scroll, opening a live gap above the bands that closes again on
     the way back up. */
  .home__split {
    display: grid;
    grid-template-columns: 1fr 2fr;
    height: 100svh;
  }

  .home__split > .home__section {
    display: grid;
    grid-template-rows: auto 1fr auto; /* pill, content, band */
    min-height: 0; /* without this a grid item refuses to shrink below its content */
    margin-top: 0;
  }

  /* the whole left third carries the gathering tint, not just its pill */
  .home__section--gathering {
    background: #50bb9f;
  }

  .home__split > .home__section > :nth-child(2) {
    min-height: 0;
    overflow: hidden;
  }

  .home__split .home__band {
    margin-top: 0;
    /* colour strip stays full-bleed; only its text moves to the page edge */
    padding-inline: var(--page-inset);
  }

  /* Left column, so it reads towards the page edge it sits against —
     mirrored from the journal band on the right. */
  .home__split .home__band--gathering {
    justify-content: flex-start;
  }

  .home__split .home__band--gathering::after {
    content: none;
  }

  .home__split .home__band--gathering::before {
    content: '←';
  }

  /* Content meets the page column — level with the header's logo on the
     left and its cart glyph on the right. The outer edges take the vw
     inset (a % here would resolve against the column, not the viewport);
     the inner edges, which meet the other column, just need a gap. */
  /* Both columns' media start at the same y. The pills above them are
     identical, so the two wrappers only have to agree on their own top
     edge — anything either list brings of its own is zeroed here rather
     than left to cancel out by luck. */
  .page.home .home__event,
  .page.home .home-journal__featured {
    margin-top: 0;
    padding-top: 0;
  }

  .page.home .home__event {
    padding-left: var(--page-inset);
    padding-right: var(--space-4);
  }

  .page.home .home-journal__featured,
  .home-journal__scatter {
    padding-left: var(--space-4);
    padding-right: var(--page-inset);
  }

  .page.home .home__event {
    min-height: 0;
  }

  /* A-series vertical poster frame (1:√2, an upright A4): whatever an
     editor uploads is cropped into it, so every event reads as the same
     poster. The card is a full-height flex column so the image is the one
     part that can shrink (min-height:0) when the viewport is too short:
     the frame gives up height (cropping harder) before the title and
     buttons below it get clipped. */
  .home__section--gathering .event-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .home__section--gathering .event-card__img {
    aspect-ratio: 1 / 1.4142;
    width: 100%;
    height: auto;
    max-height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
  }

  /* The pill centres on the poster, not on the column: the media box is
     inset by --page-inset on the left and --space-4 on the right, so its
     centre sits half that difference off the column's. */
  .home__split .home__pill--gathering {
    translate: calc((var(--page-inset) - var(--space-4)) / 2);
  }

  /* 30% off the card's own 1rem */
  .home__section--gathering .event-card__actions {
    margin-top: 0.7rem;
  }

  /* Event Journal is a fill-less pill, so on this column's tint it reads
     teal-on-teal — white is the state change it has available. Scoped to
     the home column: on the gatherings page the same button sits on white
     already, where this would do nothing. Attend keeps its own green. */
  .home__section--gathering .event-card__action:not(.event-card__action--attend):focus-visible {
    background: var(--color-paper);
  }

  @media (hover: hover) {
    .home__section--gathering .event-card__action:not(.event-card__action--attend):hover {
      background: var(--color-paper);
    }
  }

  /* ---- journal: featured left (40%), scatter right (60%) ---- */

  /* The split sets how wide the scatter photos run, and so how tall they
     come out: wide enough and each fills the half-column it was given,
     leaving no dead air between an upper entry and the one below it. */
  /* No main event flagged in the Panel → no gathering column rendered →
     journal alone in the split: the regular layout stretched over the
     full width. The featured card keeps its stack on the left at close
     to its usual size; the freed width all goes to the scatter, whose
     photos grow into the extra room — each entry takes an equal share of
     the column and its photo fills what the text leaves, whole (contain),
     so the taller pairs can't overflow the band. */
  .home__section--journal:only-child {
    grid-column: 1 / -1;
    grid-template-columns: 40fr 60fr;
  }

  .page.home .home__section--journal:only-child .home-journal__item {
    flex: 1 1 0;
    min-height: 0;
  }

  .page.home .home__section--journal:only-child .home-journal__media {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* full container width, cropping the height overflow — the one scatter
     variant where filling beats showing the photo whole */
  .page.home .home__section--journal:only-child .home-journal__img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center top;
  }

  /* flex:none, or the growing photo squeezes the second clamped line
     out of the excerpt — text keeps its lines, the photo takes the rest. */
  .page.home .home__section--journal:only-child .home-journal__title,
  .page.home .home__section--journal:only-child .home-journal__excerpt {
    flex: none;
  }

  /* title/excerpt split ±2px around the variant's old shared 15px tier,
     so the titles carry the section (they're also medium, see base) */
  .page.home .home__section--journal:only-child .home-journal__title {
    font-size: 1.0625rem; /* 17px, the article-body tier */
  }

  .page.home .home__section--journal:only-child .home-journal__excerpt {
    font-size: var(--text-caption); /* 13px */
  }

  /* 22px — the last line was clipping against the fixed band at the
     featured excerpt's 24px tier; off-token, nearest 20px and 24px */
  .page.home .home__section--journal:only-child .article-card__excerpt {
    font-size: 1.375rem;
  }

  /* The shared floor gap above the split's bottom edge — journal columns
     and the gathering card's buttons all stop short by this much, so the
     featured Read and Attend sit on one line. On the wrapper: both
     columns have to read it. */
  .home__split {
    --journal-floor: 0.75rem;
  }

  .home__section--gathering .event-card__actions {
    margin-bottom: var(--journal-floor);
  }

  .home__section--journal {
    grid-template-columns: 57.5fr 42.5fr;
    column-gap: var(--space-4);
  }

  .home__pill--journal,
  .home__band--journal {
    grid-column: 1 / -1;
  }

  .page.home .home-journal__featured {
    grid-column: 1;
    grid-row: 2;
    display: block;
    padding-right: 0;
  }

  /* mobile's stack — image, title, excerpt, Read — but out of the
     listing's subgrid, which has no rows to borrow here. Full-height
     column so the card's own margin-top:auto lands Read on the bottom
     line, level with the gathering column's buttons. */
  .page.home .home-journal__featured .article-card--featured {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
  }

  /* the one flexible row: grows into whatever the text doesn't need,
     cropping the photo (cover), so Read lands on the floor line with no
     dead air above it whatever the photo's own ratio */
  .page.home .home-journal__featured .article-card__img {
    flex: 1;
    min-height: 0;
    object-fit: cover;
  }

  /* the img above is the card's one shrinkable row — flexed text would
     get shaved a few px instead and overflow:hidden clips the descenders */
  .page.home .home-journal__featured .article-card__title,
  .page.home .home-journal__featured .article-card__excerpt {
    flex: none;
  }

  /* Attend's own recipe (measured: 20px type, 5px 20px padding), so the
     two buttons read as one row across the split; the flexible image
     above sheds the extra height */
  .page.home .home-journal__featured .article-card__more {
    align-self: center; /* centered on the card — and never stretched card-wide by the flex column */
    margin-top: 1rem; /* air under the excerpt; also crops the image by as much */
    margin-bottom: var(--journal-floor);
    padding: 0.25em 1em;
    font-size: var(--text-body);
  }

  /* The Panel's floating-read choice styles the journal listing's cards;
     home's featured slot is its own layout where Read is always the pill
     on the floor line — restated over journal.css's circle rule (which
     outranks the base by one class and loads after this file). */
  .page.home .home-journal__featured .article-card--floating-read .article-card__more {
    position: relative;
    left: auto;
    top: auto;
    display: inline-flex;
    width: auto;
    height: auto;
    margin: 1rem 0 var(--journal-floor); /* keep the same air as the non-floating variant above */
    padding: 0.25em 1em;
    border-radius: var(--radius-l);
    background: none;
  }

  /* restated at this specificity — the background:none above outranks
     journal.css's own yellow hover/focus restatements */
  .page.home .home-journal__featured .article-card--floating-read .article-card__more:focus-visible {
    background: #fdff90;
  }

  @media (hover: hover) {
    .page.home .home-journal__featured .article-card--floating-read .article-card__more:hover {
      background: #fdff90;
    }
  }

  /* ---- journal scatter: two by two down the right column ---- */

  .page.home .home-journal__featured .article-card__title {
    font-weight: var(--weight-medium);
  }


  /* Two independent stacks, each owning half the block's height: shared
     grid rows would start both lower entries under the taller of the two
     above them, and a multi-column box of a fixed height opens a third
     column sideways rather than clipping. Splitting each column between
     its two entries evenly is what puts both lower photos on the block's
     floor — level with the featured Read button. */
  .home-journal__scatter {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr; /* the pairs need a definite height to split */
    align-items: stretch; /* mobile aligns to start, which leaves the pairs zero-height */
    column-gap: var(--space-3);
    min-height: 0;
    margin-top: 0; /* both columns' first line starts on the same y */
    padding-left: 0;
    padding-bottom: var(--journal-floor);
    overflow: hidden;
  }

  /* Entries take the height their own photo needs, so no white space ever
     collects under a photo; the column's spare height falls to the foot
     of the block instead. */
  .home-journal__col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* 20px */
    min-height: 0;
  }

  .home-journal__item {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
  }

  .home-journal__media {
    flex: 0 0 auto;
    min-height: 0;
  }

  .home-journal__img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left top;
  }

  .home-journal__col:last-child .home-journal__img {
    object-position: right top;
  }


  /* a tier down from mobile's — four entries share one column here, and
     every line of text is height the photos don't get */
  .home-journal__title {
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
  }

  .home-journal__excerpt {
    font-size: var(--text-caption);
    font-weight: var(--weight-regular);
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }

}

/* landscape-tablet slice of desktop (Pro 12.9 tops out at 1366): the
   strip's basket keeps the thicker border it has in the portrait band */
@media (min-width: 72rem) and (max-width: 85.4375rem) {
  .home-shop__basket {
    border-width: 1.5px;
  }

  /* the drawn bubble is proportionally tighter at these widths — the big
     (right) bubble's ladder steps down ~10% so the copy keeps air off
     the ink; floors one token down to actually engage smaller */
  .home__bubble--right.home__bubble--d1 { font-size: max(var(--text-caption), 0.97vw); }
  .home__bubble--right.home__bubble--d2 { font-size: max(var(--text-caption), 1.24vw); }
  .home__bubble--right.home__bubble--d3 { font-size: max(var(--text-small), 1.44vw); }
  .home__bubble--right.home__bubble--d4 { font-size: max(var(--text-small), 1.67vw); }
  .home__bubble--right.home__bubble--d5 { font-size: max(var(--text-ui), 1.98vw); }
  .home__bubble--right.home__bubble--d6 { font-size: max(var(--text-ui), 2.48vw); }

  /* strip up 15% as one piece — same coupling as the portrait band's
     shrink: box + type + badge together */
  .home-shop__slide {
    flex-basis: 25.3%;    /* desktop's 22% * 1.15 */
    margin-right: 2.875%;
  }

  .home-shop__name,
  .home-shop__stock {
    font-size: 1.375rem; /* 22px */
  }

  .home-shop__price,
  .home-shop__basket {
    font-size: var(--text-body); /* 20px — a step under the name */
  }

  .home-shop__media .product-card__bestseller {
    scale: 1.15;
    transform-origin: bottom right;
  }
}