/* ============================================================================
   Mindprint — the homepage (D88, the merged storefront front door).

   This sheet is deliberately thin. Everything the page shares with the rest of
   the storefront — .wrap, .hbtn, the .pcard/.masonry grid (new-featured.css),
   the .tile/.well pane (storefront.css), the details panel and .browser lanes
   (pattern-browser.css), the dock — comes from those sheets unchanged; loading
   order puts this file last so its few overrides win. What is here is only what
   D88 genuinely added: the hero's drift backdrop and vignette, the pair
   carousel and its rectangle, the generate console band, the section headers,
   the deep-cuts spin, and the wall's full-row trim.

   No --mp-* token is redefined here. The one motion curve is pattern-browser's
   own cubic-bezier(.22,.9,.26,1), inlined as that sheet inlines it.
   ========================================================================== */

/* ══ Hero — the catalog drifts behind the copy ══ */

.hm-hero {
  position: relative;
  z-index: 1;
  /* The drift runs on past this section's bottom edge and fades out over the gap above
     the next header, so the vertical axis has to stay open. `clip` shuts the horizontal
     one without turning the hero into a scroll container the way `hidden` would — and
     without it the copy's vignette (inset -70px) would widen the page on a phone. */
  overflow-x: clip;
  padding: clamp(26px, 3.5vw, 48px) 0 clamp(18px, 2.5vw, 30px);
}

.hm-hero .wrap { position: relative; z-index: 2; }

.hm-drift {
  /* How far past the hero the field runs, and over how much of its tail it dissolves. The
     bleed is sized against the next section's top margin, so the last of the garments dies
     out roughly where that header begins rather than under it. */
  --bleed: clamp(48px, 5vw, 84px);
  --fade: clamp(140px, 18vw, 300px);
  position: absolute;
  top: -70px;
  right: 0;
  bottom: calc(-1 * var(--bleed));
  left: 0;
  z-index: 0;
  display: flex;
  /* Columns size to their own content rather than stretching to this box: the loop below
     travels half the column, which is one whole copy of its images only when the column
     IS its images. Stretched, it travelled half the hero instead and jumped every lap. */
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, .9vw, 16px);
  padding: 0 clamp(6px, 1vw, 20px);
  /* The field is deliberately wider than the window at most sizes — cropping the outer
     columns is what keeps it dense edge to edge instead of trailing off into margin. */
  overflow: hidden;
  pointer-events: none;
  opacity: .42;
  /* Solid through the copy, then a long fade that ends on the box's own bottom edge —
     which sits below the hero, so the garments dissolve into the next section rather
     than being sheared off at the section boundary. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 calc(100% - var(--fade)), transparent 100%);
}

.hm-drift .col {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, .8vw, 14px);
  flex: none;
  width: clamp(120px, 15.5vw, 250px);
  animation: hm-drift-up var(--dur, 48s) linear infinite;
}

/* Staggered speeds and alternating directions keep the field from reading as one sheet. */
.hm-drift .col:nth-child(even) { animation-direction: reverse; }
.hm-drift .col:nth-child(2) { --dur: 58s; }
.hm-drift .col:nth-child(3) { --dur: 44s; }
.hm-drift .col:nth-child(4) { --dur: 64s; }
.hm-drift .col:nth-child(5) { --dur: 52s; }
.hm-drift .col:nth-child(6) { --dur: 41s; }
.hm-drift .col:nth-child(7) { --dur: 61s; }

/* The cut-outs are square plates with the garment floated inside them, so the ratio is
   declared rather than waited for: js/home.js sizes the loop from the column's height and
   must not measure it while the images are still undecided. `contain` keeps any plate that
   is not square letterboxed rather than stretched. */
.hm-drift img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .55));
}

/* The loop travels one copy's height; js/home.js doubles each column's children. Without JS
   the columns stand still, which is a fine floor. */
@keyframes hm-drift-up { to { transform: translateY(-50%); } }

@media (prefers-reduced-motion: reduce) { .hm-drift .col { animation: none; } }

/* The vignette that keeps the copy readable — opacity does the work, no blur, no panel. */
.hm-hero .copy { position: relative; max-width: 640px; }

.hm-hero .copy::before {
  content: "";
  position: absolute;
  inset: -48px -70px;
  z-index: -1;
  background: radial-gradient(85% 90% at 38% 50%, rgba(0, 0, 0, .94), rgba(0, 0, 0, .72) 55%, transparent 82%);
}

/* On a phone the copy spans the column the garments drift through, so the pool has to be
   wider and darker than the desktop's off-centre one — this is what lets the field itself
   come up to .58 without the headline having to fight it. */
@media (max-width: 700px) {
  .hm-hero .copy::before {
    inset: -30px -26px;
    background:
      radial-gradient(122% 66% at 46% 44%, rgba(0, 0, 0, .93), rgba(0, 0, 0, .8) 46%, rgba(0, 0, 0, .42) 76%, transparent 100%);
  }
}

.hm-hero .eyeb {
  margin-bottom: 14px;
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mp-mute);
}

.hm-hero .eyeb b { color: var(--mp-pink); font-weight: 700; }

.hm-hero h1 {
  margin: 0 0 14px;
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: .98;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.hm-hero h1 em {
  font-style: normal;
  background: var(--mp-brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hm-hero h1.alt { text-transform: uppercase; letter-spacing: -.02em; line-height: .96; }

.hm-hero h1.alt .ln2 {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--mp-pink);
}

.hm-hero .sub {
  color: var(--mp-dim);
  font-size: clamp(14px, 1.3vw, 16.5px);
  max-width: 52ch;
  margin: 0 0 20px;
  line-height: 1.55;
}

.hm-hero .ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* The pair has to read as one control set. Site-wide `.hbtn` is the 40px admin size and
   `.hbtn.primary` is the 46px storefront one, so beside the pink pill the plain button was
   both shorter and top-aligned — a dead grey chip rather than the second door. It keeps the
   button system's shape and takes the primary's measurements, on glass over the drift. */
.hm-hero .ctas .hbtn {
  height: 46px;
  padding: 0 26px;
  font-size: 12px;
  letter-spacing: .14em;
}

.hm-hero .ctas .hbtn:not(.primary) {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .3);
  color: var(--mp-ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hm-hero .ctas .hbtn:not(.primary):hover {
  background: rgba(255, 255, 255, .13);
  border-color: var(--mp-pink);
  color: var(--mp-ink);
}

/* The phone's single-line pair of doors; hidden wherever the pills fit. */
.hm-hero .cta-line { display: none; }

@media (max-width: 700px) {
  .hm-hero { padding: 22px 0 14px; }
  .hm-hero .sub { font-size: 13.5px; margin-bottom: 14px; }
  .hm-hero .ctas { display: none; }
  .hm-hero .cta-line { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
  /* Wider tiles at a higher opacity — on a phone the field was legible only as texture.
     What buys the extra strength back is the vignette below, not a dimmer catalog. */
  .hm-drift { gap: 10px; padding: 0 4px; opacity: .58; --bleed: clamp(34px, 9vw, 60px); --fade: clamp(100px, 28vw, 170px); }
  .hm-drift .col { width: clamp(104px, 30vw, 150px); gap: 8px; }
}

.hm-hero .cta-line a {
  font-family: var(--mp-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mp-ink);
}

.hm-hero .cta-line a b { color: var(--mp-pink); font-weight: 700; }
.hm-hero .cta-line a.alt { color: var(--mp-peach); }
.hm-hero .cta-line .dot { color: var(--mp-line); font-size: 12px; }

/* ══ Section headers — one row that truly compresses ══ */

.hm-shelf { margin: clamp(30px, 4.2vw, 52px) 0; position: relative; z-index: 1; }

.hm-hd {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
  min-width: 0;
}

.hm-hd h2 {
  margin: 0;
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  letter-spacing: -.01em;
  white-space: nowrap;
  flex: none;
}

.hm-hd .micro {
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mp-mute);
}

.hm-hd .eyebrow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-hd .count { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-hd a.more { flex: none; color: var(--mp-pink); white-space: nowrap; }
.hm-hd a.more:hover { color: var(--mp-pink-soft); }

.hm-hd .spin {
  flex: none;
  border: 1px solid var(--mp-line);
  background: transparent;
  border-radius: var(--mp-r-pill);
  color: var(--mp-peach);
  font-family: var(--mp-mono);
  font-size: 10px;
  letter-spacing: .16em;
  padding: 6px 13px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.hm-hd .spin:hover { border-color: var(--mp-peach); }
.hm-hd .spin .die { display: inline-block; margin-right: 6px; transition: transform .5s cubic-bezier(.22, .9, .26, 1); }
.hm-hd .spin.rolling .die { transform: rotate(360deg); }

@media (max-width: 700px) {
  .hm-hd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 5px;
    column-gap: 12px;
    align-items: center;
  }
  .hm-hd h2 { grid-column: 1; font-size: 20px; }
  .hm-hd .spin { grid-column: 2; grid-row: 1; justify-self: end; padding: 5px 11px; font-size: 9px; }
  .hm-hd .count { grid-column: 2; grid-row: 1; justify-self: end; font-size: 9px; }
  .hm-hd .eyebrow { grid-column: 1; grid-row: 2; font-size: 9px; letter-spacing: .16em; }
  .hm-hd a.more { grid-column: 2; grid-row: 2; justify-self: end; font-size: 9px; }
  .hm-hd .spin ~ .count { display: none; }
}

/* ══ The carousels — full-bleed native scroll, a mirrored pair per screen ══ */

/* Full-bleed for free: this sits directly in the section, which already spans the page.
   The 100vw-and-pull-back trick it used to run is a scrollbar wider than the page it is
   measured against — 100vw counts the vertical scrollbar's own width and 100% does not. */
.hm-carowrap { position: relative; width: 100%; }

.hm-caro {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 6px 0 10px;
  cursor: grab;
}

.hm-caro::-webkit-scrollbar { display: none; }
.hm-caro.dragging { cursor: grabbing; }
.hm-caro.compact { scroll-snap-type: x proximity; }

.hm-caro .track { display: flex; gap: 18px; width: max-content; align-items: stretch; }

.hm-slot {
  flex: 0 0 auto;
  display: flex;
  width: min(44vw, 620px);
  scroll-snap-align: center;
  opacity: .42;
  transform: scale(.985);
  transition: opacity .4s, transform .5s cubic-bezier(.22, .9, .26, 1);
}

.hm-slot.is-active { opacity: 1; transform: none; }
.hm-slot > * { width: 100%; }

.hm-carowrap .arr {
  position: absolute;
  top: calc(50% - 21px);
  z-index: 6;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--mp-line-soft);
  background: rgba(10, 10, 15, .85);
  backdrop-filter: blur(8px);
  color: var(--mp-ink);
  font-size: 16px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .18s;
}

.hm-carowrap .arr:hover { border-color: var(--mp-pink); }
.hm-carowrap .arr.l { left: 18px; }
.hm-carowrap .arr.r { right: 18px; }

/* The rectangle: a product card that carries its own words. Hover is the /new tile's. */
.hm-fcard {
  position: relative;
  display: grid;
  grid-template-columns: 11fr 10fr;
  align-items: center;
  gap: 6px;
  border-radius: calc(var(--mp-r-card) + 4px);
  overflow: hidden;
  min-height: 270px;
  height: 100%;
  border: 1px solid var(--mp-line);
  cursor: pointer;
  color: var(--mp-ink);
  text-decoration: none;
  background:
    radial-gradient(130% 110% at var(--gx, 80%) 0%,
      rgb(var(--accent-rgb, 251 94 190) / .32),
      rgb(var(--accent-rgb, 251 94 190) / .07) 55%, transparent 80%),
    var(--mp-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
  transition: transform .3s cubic-bezier(.22, .9, .26, 1), border-color .2s, box-shadow .3s;
}

.hm-fcard:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .28);
  color: var(--mp-ink);
  box-shadow: 0 22px 50px -20px var(--glow, rgba(251, 94, 190, .35)), inset 0 1px 0 rgba(255, 255, 255, .13);
}

.hm-fcard.flip { grid-template-columns: 10fr 11fr; --gx: 20%; }

.hm-fcard .info {
  padding: clamp(16px, 2vw, 28px);
  display: grid;
  gap: 9px;
  align-content: center;
  justify-items: start;
  min-width: 0;
}

.hm-fcard.flip .info { order: 2; }

/* The mockup owns the full card height — crop a sleeve before shrinking the garment. */
.hm-fcard .art { position: relative; height: 100%; min-height: inherit; }

.hm-fcard .art img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(100% - 10px);
  width: auto;
  max-width: none;
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, .55));
  transition: transform .5s cubic-bezier(.22, .9, .26, 1);
}

.hm-fcard:hover .art img { transform: translateX(-50%) scale(1.045); }

.hm-fcard .eyeb {
  font-family: var(--mp-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mp-pink);
}

.hm-fcard .hm-pat {
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.05;
  letter-spacing: -.015em;
}

.hm-fcard .gm {
  font-family: var(--mp-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mp-dim);
}

.hm-fcard .blurb {
  margin: 0;
  color: var(--mp-mute);
  font-size: 12.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Only as many tag chips as fit one line: overflow wraps onto a hidden second row. */
.hm-fcard .tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-height: 24px;
  overflow: hidden;
  align-content: flex-start;
}

.hm-fcard .tags i {
  font-style: normal;
  padding: 4px 9px;
  border-radius: var(--mp-r-pill);
  background: var(--mp-raise);
  color: var(--mp-mute);
  font-family: var(--mp-mono);
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hm-fcard .buy { display: flex; align-items: baseline; gap: 14px; margin-top: 2px; }

.hm-fcard .pr {
  font-family: var(--mp-mono);
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--mp-pink);
  font-weight: 700;
}

.hm-fcard .cta {
  font-family: var(--mp-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mp-pink);
  white-space: nowrap;
}

.hm-fcard:hover .cta { color: var(--mp-pink-soft); }

/* The phone twin: below 700px the slot swaps the rectangle for the standardized product
   square (rendered beside it by _HomeFeatures), sized so two-plus sit on screen. */
.hm-slot .hm-compact { display: none; }

@media (max-width: 700px) {
  .hm-carowrap .arr { display: none; }
  .hm-slot { width: min(46vw, 230px); opacity: .7; transform: scale(.98); }
  .hm-slot.is-active { opacity: 1; transform: none; }
  .hm-slot .hm-fcard { display: none; }
  .hm-slot .hm-compact { display: flex; height: 100%; }
  .hm-slot .hm-compact .cm { flex: 1; }
  .hm-slot .hm-compact .nm,
  .hm-slot .hm-compact .pt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-slot .hm-compact .pt { display: inline-flex; max-width: 100%; }
  .hm-slot .hm-compact .cta { display: none; }
}

/* The compact twin's badge, in the caption rather than over the picture — the same pink mono
   line the rectangle carries above its name, at the smaller card's scale. It cannot wrap: the
   longest label in the vocabulary is "Customer favorite", and two lines of it would push the
   price out of a card sized to put two on a phone screen. */
.hm-slot .hm-compact .eyeb {
  font-family: var(--mp-mono);
  font-size: 8.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mp-pink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══ The generate console — the loom's one home ══ */

.hm-gen {
  position: relative;
  z-index: 0;
  margin: clamp(40px, 5vw, 64px) 0;
  padding: clamp(18px, 2.2vw, 30px) 0;
  /* Sideways only. The lanes are now long enough to cover any window (js/home.js keeps
     doubling until they do), and a strip that runs past the right edge of the page is a
     horizontal scrollbar on every page it is part of. The vertical axis stays open on
     purpose — that is what lets whole tiles slide under the neighbouring sections. */
  overflow-x: clip;
}

/* Whole tiles, never cropped: no overflow clip here — the lanes drift under the neighbouring
   sections, which stack above via .hm-shelf's z-index. */
.hm-lanes {
  position: absolute;
  inset: -56px -4vw;
  transform: rotate(-3deg);
  display: grid;
  gap: 14px;
  align-content: space-evenly;
  opacity: .6;
  pointer-events: none;
}

.hm-lanes .lane {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: hm-lane-l 48s linear infinite;
}

.hm-lanes .lane.rev { animation: hm-lane-r 54s linear infinite; }

.hm-lanes img { width: 120px; height: 120px; border-radius: 14px; object-fit: cover; }

@keyframes hm-lane-l { to { transform: translateX(-50%); } }
@keyframes hm-lane-r { from { transform: translateX(-50%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) { .hm-lanes .lane { animation: none; } }

.hm-gen .console {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  background: rgba(10, 10, 15, .82);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 201, 160, .3);
  border-radius: calc(var(--mp-r-card) + 8px);
  padding: clamp(26px, 4vw, 44px) clamp(20px, 3.5vw, 44px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 60px rgba(255, 201, 160, .07);
}

.hm-gen .k { color: var(--mp-peach); font-family: var(--mp-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }

.hm-gen h2 {
  margin: 8px 0 6px;
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 38px);
  letter-spacing: -.02em;
}

.hm-gen h2 em { font-style: normal; color: var(--mp-peach); }

.hm-gen p { color: var(--mp-mute); margin: 0 0 20px; line-height: 1.5; font-size: 14px; }

.hm-gen .pbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  border-radius: var(--mp-r-pill);
  background: var(--mp-raise);
  border: 1px solid var(--mp-line);
  padding: 0 7px 0 20px;
  text-align: left;
}

.hm-gen .pbar .field {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--mp-ink);
  font-family: var(--mp-mono);
  font-size: 12.5px;
  outline: none;
}

.hm-gen .pbar .field::placeholder { color: var(--mp-dim); }

.hm-gen .pbar .genb {
  border: none;
  border-radius: var(--mp-r-pill);
  background: var(--mp-pink);
  color: var(--mp-ink-on-pink);
  font-family: var(--mp-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  height: 40px;
  padding: 0 22px;
  cursor: pointer;
  transition: background .18s, transform .18s cubic-bezier(.22, .9, .26, 1);
}

.hm-gen .pbar .genb:hover { background: var(--mp-pink-soft); transform: translateY(-1px); }
.hm-gen .pbar .genb:disabled { opacity: .6; cursor: default; transform: none; }

.hm-gen .exs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.hm-gen .exs button {
  font-family: var(--mp-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mp-dim);
  background: transparent;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-pill);
  padding: 6px 12px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.hm-gen .exs button:hover { color: var(--mp-peach); border-color: rgba(255, 201, 160, .5); }

@media (max-width: 700px) {
  .hm-gen { padding: clamp(42px, 6vh, 64px) 0; }
  .hm-lanes { inset: -40px -34vw; gap: 12px; transform: rotate(-4deg); opacity: .8; }
  .hm-lanes img { width: 94px; height: 94px; border-radius: 12px; }
  /* Wider and tighter than it was: app.css holds every phone text field at the platform's
     16px floor (below it iOS zooms the page on focus), so the field needs the room back —
     it takes it from the console's margins and the button's padding, not from the type. */
  .hm-gen .console { max-width: min(92vw, 400px); padding: 22px 14px; }
  .hm-gen h2 { font-size: 21px; }
  .hm-gen p { font-size: 12.5px; margin-bottom: 14px; }
  .hm-gen .pbar { height: 48px; padding: 0 6px 0 14px; gap: 8px; }
  .hm-gen .pbar .field { letter-spacing: -.01em; }
  .hm-gen .pbar .genb { height: 36px; padding: 0 14px; font-size: 10px; letter-spacing: .1em; }
  .hm-gen .exs { display: none; }
}

/* ══ The wall — full rows only, and a panel that belongs to the window ══ */

/* js/home.js measures the lane, fixes the column count and hides the tiles past the last
   complete row; [hidden] must beat the tile's own display. */
.hm-wall-sec .wall .tile[hidden] { display: none; }

/* On /patterns the browser IS the page, so a sticky sidecar reads as the window's own rail.
   Here the browser is one section of a long page, and the same sticky panel slides in against
   that section's box — it arrives from the section's right edge and stops where the section
   stops, which is exactly the seam Roger saw. Fixed positioning gives the desktop what the
   phone sheet already has: the panel belongs to the window. The grid column still opens
   underneath it, so the wall narrows out of the way instead of hiding beneath it. */
@media (min-width: 901px) {
  .hm-wall-sec .panel {
    position: fixed;
    top: calc(var(--admin-bar-h, 66px) + 10px);
    right: 12px;
    width: var(--panel-w);
    max-width: calc(100vw - 24px);
    height: calc(100dvh - var(--admin-bar-h, 66px) - 22px);
    margin: 0;
  }

  /* The browser clips its own overflow so the closed panel's 40px slide-out cannot widen the
     page. A fixed panel never contributes to the page's scroll width in the first place, and
     that clip would now cut the panel off at the section — so here the lane stays open. */
  .hm-wall-sec .browser { overflow-x: visible; }
}

/* The homepage's masonry never goes empty-wide: the deep-cuts re-roll fades. */
.masonry.spin-out .pcard { opacity: 0; transform: translateY(10px); transition: all .18s ease-in; }