/* ============================================================
   EDITORIAL CUTOUTS
   The transparent-background model photography is treated as
   collage material, not as product shots: every figure is an
   alpha PNG that sits directly on the night sky with no frame,
   no crop box and no backing plate.

   Three ideas hold the whole system together:

   1. A host/layer pair. Any section that carries figures gets
      .cut-host; the figures live inside .cut-layer, which is an
      inert absolute plane pinned to that host. Real content is
      lifted above it, so a figure can never take a click or bury
      a price, a button or a product card.

   2. Two transform channels per figure. .cut owns placement
      (scroll parallax + the fixed editorial tilt) and the inner
      <img> owns the idle float. Keeping them on separate
      elements means the two motions compose without either one
      having to know about the other.

   3. Per-figure custom properties. --cut-tilt, --cut-amp,
      --cut-float and --cut-delay are the only knobs; art
      direction happens in the placement rules further down and
      never by editing the primitive.

   Loaded after lucky-pages.css, before lucky-sky.css.
   ============================================================ */

/* ---------- HOST / LAYER PRIMITIVE ---------- */

.cut-host { position: relative; }

/* Figures bleed past their section on purpose, so the host can't clip the
   y-axis. Clipping x only keeps the bleed from ever becoming a horizontal
   scrollbar on a phone. */
.cut-host { overflow-x: clip; }

.cut-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* The one layer that is allowed in front of the copy. Reserved for figures
   placed in empty space, never over type. */
.cut-layer.front { z-index: 3; }

/* Everything that isn't a figure plane outranks the background plane, so
   headlines, cards and CTAs always win. */
.cut-host > :not(.cut-layer) { position: relative; z-index: 2; }

/* ---------- THE FIGURE ---------- */

.cut {
  position: absolute;
  margin: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  /* --cut-shift is written by lucky-cutouts.js on scroll. */
  transform: translate3d(0, var(--cut-shift, 0px), 0) rotate(var(--cut-tilt, 0deg));
  will-change: transform;
}

.cut > img {
  display: block;
  width: 100%;
  height: auto;
  /* A pink bloom plus a deep shadow gives the alpha edge something to sit
     against, so the figures read as lit objects on the sky rather than as
     stickers pasted onto it. */
  filter:
    drop-shadow(0 0 30px rgba(255, 60, 141, .26))
    drop-shadow(0 22px 38px rgba(0, 0, 0, .72));
  animation: cutFloat var(--cut-float, 11s) ease-in-out var(--cut-delay, 0s) infinite alternate;
}

@keyframes cutFloat {
  from { transform: translate3d(0, calc(var(--cut-amp, 7px) * -1), 0); }
  to   { transform: translate3d(0, var(--cut-amp, 7px), 0); }
}

/* Figures fade up once as they enter the viewport. The hidden start state is
   gated on .cut-js, which lucky-cutouts.js puts on <html>, so a figure is
   never left invisible if the script fails to run. */
.cut-js .cut[data-cut-reveal] {
  opacity: 0;
  transition: opacity .85s ease;
}
.cut-js .cut[data-cut-reveal].is-in { opacity: 1; }

/* ---------- EDITORIAL CAPTIONS ---------- */
/* Kept at 7px in the brand pixel face and set in acid on black: legible when
   you look for it, silent when you're reading a price. */

.cut-caption {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  color: var(--lc-acid);
  font-family: var(--lc-font);
  font-size: 7px;
  letter-spacing: 2.2px;
  line-height: 1.8;
  text-shadow: 0 2px 8px #000, 0 0 14px #000;
  white-space: nowrap;
  pointer-events: none;
}

.cut-caption::before,
.cut-caption::after {
  color: var(--lc-pink-hot);
  font-size: 9px;
  opacity: .85;
}
.cut-caption::before { content: "["; }
.cut-caption::after  { content: "]"; }

.cut-caption.soft { color: var(--lc-pink-soft); }

/* ---------- Y2K INTERNET GRAPHICS ---------- */
/* Small, few, and always decorative. Each one is aria-hidden in the markup. */

.y2k {
  position: absolute;
  z-index: 4;
  display: block;
  pointer-events: none;
}

.y2k-sparkle { color: var(--lc-cream); animation: y2kTwinkle 5.5s ease-in-out infinite alternate; }
.y2k-sparkle.acid { color: var(--lc-acid); }
.y2k-sparkle.pink { color: var(--lc-pink-soft); }
.y2k-sparkle svg { display: block; width: 100%; height: auto; fill: currentColor; }

@keyframes y2kTwinkle {
  from { opacity: .35; transform: scale(.86) rotate(0deg); }
  to   { opacity: 1;   transform: scale(1) rotate(22deg); }
}

.y2k-heart { color: var(--lc-pink-hot); animation: y2kDrift 8s ease-in-out infinite alternate; }
.y2k-heart.acid { color: var(--lc-acid); }
.y2k-flower { color: var(--lc-pink-soft); animation: y2kDrift 9.5s ease-in-out infinite alternate; }
.y2k-heart svg, .y2k-flower svg { display: block; width: 100%; height: auto; fill: currentColor; }
.y2k-flower .petal { fill: currentColor; }
.y2k-flower .core { fill: var(--lc-acid); }

@keyframes y2kDrift {
  from { transform: translate3d(0, -5px, 0) rotate(-6deg); }
  to   { transform: translate3d(0, 5px, 0) rotate(6deg); }
}

/* Classic pointer, used sparingly to aim at a real control. */
.y2k-cursor { width: 15px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .9)); animation: y2kNudge 3.6s ease-in-out infinite alternate; }
.y2k-cursor svg { display: block; width: 100%; height: auto; }

@keyframes y2kNudge {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(3px, -4px, 0); }
}

/* Dotted connector between two parts of a composition. */
.y2k-dots { color: var(--lc-pink-hot); opacity: .6; }
.y2k-dots svg { display: block; width: 100%; height: auto; }
.y2k-dots svg path { stroke: currentColor; stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; fill: none; }

/* Brushed-chrome hairline, the Y2K UI bevel reduced to one rule. */
.y2k-chrome {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #4a4a55 0%, #e8e8f2 18%, #9aa0b4 38%, #fbfbff 54%, #7b8196 74%, #d8d8e6 88%, #43434e 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 0 14px rgba(255, 255, 255, .2);
  opacity: .8;
}

/* Peel-off stickers. Rotation is baked in — these are meant to look stuck on. */
.y2k-sticker {
  padding: 7px 11px;
  border: 2px solid var(--lc-acid);
  background: var(--lc-ink);
  color: var(--lc-acid);
  font-family: var(--lc-font);
  font-size: 7px;
  letter-spacing: 1.6px;
  line-height: 1.6;
  white-space: nowrap;
  box-shadow: 3px 3px 0 rgba(255, 60, 141, .55);
  transform: rotate(var(--sticker-tilt, -7deg));
}
.y2k-sticker.pink {
  border-color: var(--lc-pink-hot);
  color: var(--lc-pink-soft);
  box-shadow: 3px 3px 0 rgba(214, 255, 73, .45);
}

/* Corner brackets, for framing a block of editorial copy. */
.y2k-frame { position: relative; }
.y2k-frame::before,
.y2k-frame::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.y2k-frame::before { top: -10px; left: -12px; border-top: 2px solid var(--lc-acid); border-left: 2px solid var(--lc-acid); }
.y2k-frame::after { bottom: -10px; right: -12px; border-bottom: 2px solid var(--lc-pink-hot); border-right: 2px solid var(--lc-pink-hot); }

/* ============================================================
   HERO COLLAGE
   Replaces the single full-bleed campaign photo. Two reserved
   columns of type bracket the collage — the headline and CTAs on
   the left, the meta rail (look number, IRL badge, brand line) on
   the right — and three figures at three different scales build
   depth in the space between them. The largest figure crosses the
   section's bottom border into the page below.

   The rail is a real grid column rather than an overlay, so the
   figures are offset inboard by its width and can never reach the
   text on either side.
   ============================================================ */

.lc-hero.lc-hero-collage {
  /* The one source of truth for how much room the rail takes: the figure
     offsets are derived from it, so the two can't drift apart. */
  --hero-rail: clamp(132px, 13vw, 190px);
  --hero-rail-gap: clamp(6px, 1vw, 24px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hero-rail);
  column-gap: clamp(16px, 3vw, 40px);
  align-items: center;
  /* Inherits the first-screen budget from .lc-hero. The padding is measured
     in vh rather than vw from here down: on a short laptop screen it is the
     height that runs out, and vw padding kept growing while the room for the
     headline and the CTA row shrank. */
  padding: clamp(20px, 3vh, 72px) clamp(18px, 5vw, 72px) clamp(22px, 3vh, 64px);
  /* The figures cross the bottom border on purpose. */
  overflow: visible;
  overflow-x: clip;
  background: none;
  background-image: none;
}

/* Only a floor wash remains of the old photo scrim — it dissolves the legs of
   the background figures into the sky instead of darkening the whole frame. */
.lc-hero.lc-hero-collage::after {
  z-index: 1;
  background: linear-gradient(180deg, transparent 0%, transparent 58%, rgba(0, 0, 0, .34) 82%, rgba(0, 0, 0, .72) 100%);
}

.lc-hero.lc-hero-collage .lc-hero-inner {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  max-width: min(660px, 56%);
  gap: clamp(9px, 1.6vh, 24px);
}

/* A slightly wider measure costs nothing on a wide screen and saves the long
   second paragraph a line, which is a line the CTA row gets back. */
.lc-hero-collage .lc-hero-sub {
  max-width: 46ch;
  line-height: 1.85;
}

/* --- the right-hand meta rail --- */
/* Small type, right-aligned, vertically centred against the headline: the
   look number, the IRL badge and the brand line read as a magazine's
   right-hand column. */
.lc-hero-collage .lc-hero-rail {
  grid-column: 2;
  grid-row: 1;
  /* Top of the column, not its middle: the hero is no taller than the first
     screen now, and the bottom-right corner belongs to the fixed radio
     widget — centred, the brand line and the badge's rule ended up behind
     it. */
  align-self: start;
  /* Above the front figure plane, not just the background one — whatever the
     viewport does to the figure's width, this text stays readable. */
  z-index: 4;
  display: grid;
  justify-items: end;
  gap: clamp(10px, 1.5vh, 18px);
  text-align: right;
}

/* In the rail the caption is type in a column, not a pin on a photo. */
.lc-hero-collage .lc-hero-rail .cut-caption.hero-cap {
  position: static;
  display: block;
  padding: 0;
  white-space: normal;
}
/* display:block drops the flex gap, so the brackets need their own spacing to
   sit the way they do on the pinned captions. */
.lc-hero-collage .lc-hero-rail .cut-caption.hero-cap::before { margin-right: 6px; }
.lc-hero-collage .lc-hero-rail .cut-caption.hero-cap::after { margin-left: 6px; }

/* Both of these were sized for a full-width copy column; in a ~190px rail
   they need to wrap rather than run off the edge. */
.lc-hero-collage .lc-hero-rail .lc-hero-badge {
  font-size: 7px;
  letter-spacing: 1.6px;
}
.lc-hero-collage .lc-hero-rail .lc-hero-eyebrow {
  font-size: clamp(7px, .8vw, 9px);
  letter-spacing: clamp(1.6px, .3vw, 3px);
}

/* A soft radial behind the copy only. Does the legibility work that a solid
   panel would do, without putting a box on the page. */
.lc-hero.lc-hero-collage .lc-hero-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14% -22% -16% -30%;
  background: radial-gradient(ellipse 68% 58% at 34% 50%, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .66) 46%, transparent 78%);
  pointer-events: none;
}

.lc-hero-eyebrow {
  margin: 0;
  color: var(--lc-pink-soft);
  font-size: clamp(8px, 1.1vw, 11px);
  letter-spacing: clamp(2px, .5vw, 6px);
  line-height: 1.8;
  text-shadow: 0 2px 10px #000;
}

/* "WEAR YOUR" is nine characters of a monospaced pixel face, so the headline
   has a hard minimum width of 9em that no wrapping can reduce. The coefficient
   is set so that width always lands short of the campaign figure's left edge
   now that the rail has taken space off the right; the 74px ceiling is
   unchanged, so wide screens look exactly as before. */
.lc-hero.lc-hero-collage h1 {
  /* Two lines of this headline are the tallest single item on the first
     screen, so the width term is capped against the viewport height too. */
  font-size: clamp(30px, min(4.8vw, 7vh), 74px);
  line-height: 1.06;
  letter-spacing: 0;
}

.lc-hero-chrome { width: clamp(120px, 18vw, 210px); }

/* The SHOP ALL button is the loudest thing in the copy column. */
.lc-hero-collage .lc-btn.hero-primary {
  min-height: clamp(50px, 6.6vh, 58px);
  padding: clamp(13px, 1.8vh, 16px) 28px;
  font-size: clamp(10px, 1.3vw, 13px);
}
.lc-hero-collage .lc-btn.hero-primary:hover,
.lc-hero-collage .lc-btn.hero-primary:focus-visible {
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 rgba(214, 255, 73, .6);
}

/* --- figure placement: primary, no tilt, crosses the border --- */
.cut-hero-lead {
  right: calc(var(--hero-rail) + var(--hero-rail-gap));
  bottom: -5%;
  width: clamp(246px, 27vw, 428px);
  --cut-amp: 6px;
  --cut-float: 12.5s;
}

/* --- secondary, tucked behind and above the primary --- */
.cut-hero-back {
  right: calc(var(--hero-rail) + clamp(150px, 19vw, 330px));
  bottom: 2%;
  width: clamp(132px, 15vw, 248px);
  --cut-tilt: -4deg;
  --cut-amp: 9px;
  --cut-float: 9.5s;
  --cut-delay: -3s;
}
.cut-hero-back > img { filter: drop-shadow(0 0 26px rgba(255, 60, 141, .2)) drop-shadow(0 18px 30px rgba(0, 0, 0, .8)) brightness(.88); }

/* --- tertiary, small, far left, mostly outside the copy column --- */
.cut-hero-side {
  left: clamp(-58px, -2.4vw, -18px);
  bottom: -11%;
  width: clamp(104px, 11.5vw, 184px);
  --cut-tilt: 3.5deg;
  --cut-amp: 8px;
  --cut-float: 10.5s;
  --cut-delay: -6s;
}
.cut-hero-side > img { filter: drop-shadow(0 0 22px rgba(214, 255, 73, .16)) drop-shadow(0 16px 28px rgba(0, 0, 0, .8)) brightness(.9); }

/* --- hero decoration --- */
/* These live in the background plane, so anything they land on top of wins.
   The percentages put them in the channel between the copy and the figure,
   which is the one part of the frame nothing else occupies. */
.lc-hero-collage .y2k-sparkle.s1 { top: 16%; right: 52%; width: 26px; }
.lc-hero-collage .y2k-sparkle.s2 { top: 72%; right: 50%; width: 15px; animation-delay: -2.4s; }
.lc-hero-collage .y2k-sparkle.s3 { top: 30%; left: 6%; width: 13px; animation-delay: -4s; }
.lc-hero-collage .y2k-heart.h1 { top: 22%; left: 2%; width: 20px; }
.lc-hero-collage .y2k-sticker.st1 { top: 46%; right: 47%; --sticker-tilt: 8deg; }

/* The pointer and its dotted tail aim at the SHOP ALL button. */
.hero-aim { position: relative; display: inline-flex; align-items: center; }
.hero-aim .y2k-dots { bottom: -22px; left: 12%; width: clamp(60px, 9vw, 120px); }
.hero-aim .y2k-cursor { bottom: -34px; left: calc(12% + clamp(60px, 9vw, 120px) - 4px); }

/* ============================================================
   EDITORIAL LOOKBOOK
   A 2000s magazine spread. Twelve columns give the figures and
   the copy panel honest, unequal footprints; the tilts and the
   two deliberate overhangs come from the placement rules, not
   from the grid.
   ============================================================ */

.lookbook {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 40px) clamp(60px, 9vw, 120px);
  overflow-x: clip;
}

.lookbook-head {
  display: grid;
  gap: 14px;
  max-width: 46ch;
  margin-bottom: clamp(20px, 3vw, 34px);
}

.lookbook-issue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
  margin: 0 0 clamp(18px, 3vw, 30px);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--lc-line);
  color: var(--lc-pink-soft);
  font-family: var(--lc-font);
  font-size: 7px;
  letter-spacing: 2.4px;
  line-height: 1.8;
}
.lookbook-issue b { color: var(--lc-acid); font-weight: 400; }

.lookbook-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: clamp(10px, 1.6vw, 22px);
  min-height: clamp(620px, 64vw, 880px);
}

/* Figures in the spread are in-flow grid items rather than absolute pins, so
   the stage can collapse honestly on a phone. The tilt/float primitive still
   applies; only the positioning scheme changes. */
.lookbook .lb-fig {
  position: relative;
  margin: 0;
  align-self: start;
}

/* --- one large full-body figure anchoring the left edge --- */
.lb-fig.lb-lead {
  grid-column: 1 / span 4;
  grid-row: 1 / span 2;
  width: 100%;
  --cut-amp: 7px;
  --cut-float: 13s;
}

/* --- the editorial copy block: always on top of everything --- */
.lookbook .lb-panel {
  position: relative;
  z-index: 5;
  grid-column: 5 / span 4;
  grid-row: 1;
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
  justify-items: start;
  margin-top: clamp(28px, 5vw, 68px);
  padding: clamp(18px, 2.4vw, 26px);
  border: 2px solid var(--lc-line);
  /* Near-opaque so the figure behind it stays visible at the edges but never
     competes with the words. */
  background: rgba(6, 6, 11, .9);
  backdrop-filter: blur(2px);
}
.lookbook .lb-panel h3 {
  margin: 0;
  color: var(--lc-cream);
  font-family: var(--lc-font);
  font-size: clamp(13px, 1.9vw, 20px);
  font-weight: 400;
  line-height: 1.4;
  text-shadow: 3px 3px 0 var(--lc-pink-hot);
}
.lookbook .lb-panel p {
  margin: 0;
  color: var(--lc-cream);
  font-family: var(--lc-font);
  font-size: 8px;
  line-height: 2.2;
}
.lookbook .lb-panel .lb-panel-meta { color: var(--lc-pink-soft); font-size: 7px; letter-spacing: 1.6px; }

/* --- a close-up beside the copy --- */
.lb-fig.lb-close {
  grid-column: 9 / span 4;
  grid-row: 1;
  width: 100%;
  margin-top: clamp(-10px, -1vw, 0px);
  --cut-tilt: -2.5deg;
  --cut-amp: 6px;
  --cut-float: 10s;
  --cut-delay: -2s;
}

/* --- a smaller figure overlapping the copy panel, sitting behind it --- */
.lb-fig.lb-overlap {
  grid-column: 4 / span 3;
  grid-row: 2;
  z-index: 1;
  width: 128%;
  margin-top: clamp(-120px, -11vw, -40px);
  margin-left: clamp(-70px, -5vw, -20px);
  --cut-tilt: 3.5deg;
  --cut-amp: 9px;
  --cut-float: 11.5s;
  --cut-delay: -5s;
}

/* --- the figure that breaks the section boundary --- */
.lb-fig.lb-bleed {
  grid-column: 9 / span 4;
  grid-row: 2;
  width: 132%;
  margin-top: clamp(18px, 3vw, 46px);
  /* Pulls past the right padding and the 1240px container both. */
  margin-right: clamp(-190px, -13vw, -60px);
  /* No tilt: this figure already reads as dynamic because it leaves the
     section, and four of the ten cutouts stay perfectly upright. */
  --cut-amp: 8px;
  --cut-float: 12s;
  --cut-delay: -7s;
}

/* Captions ride with their figure. */
.lookbook .lb-fig .cut-caption { position: absolute; }
.lb-lead .cut-caption { bottom: 6%; left: 4%; }
.lb-close .cut-caption { top: 4%; left: 2%; }
.lb-overlap .cut-caption { bottom: 10%; right: 6%; }
.lb-bleed .cut-caption { top: 2%; left: 4%; }

/* --- lookbook decoration --- */
.lookbook .y2k-sparkle.s1 { top: 4%; left: 31%; width: 20px; }
.lookbook .y2k-sparkle.s2 { top: 52%; right: 34%; width: 14px; animation-delay: -3.1s; }
.lookbook .y2k-heart.h1 { top: 34%; left: 27%; width: 17px; }
.lookbook .y2k-flower.f1 { bottom: 16%; left: 2%; width: 22px; }
.lookbook .y2k-dots.d1 { top: 30%; left: 30%; width: clamp(70px, 11vw, 150px); }
.lookbook .y2k-sticker.st1 { bottom: 6%; left: 34%; --sticker-tilt: -6deg; z-index: 6; }

.lookbook-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  margin-top: clamp(26px, 4vw, 46px);
}

/* ============================================================
   SECTION ACCENTS
   Single figures used as punctuation next to a heading. Each one
   is confined to the heading area of its section, so no figure
   ever reaches a product card, a price or a shopping control.
   ============================================================ */

/* --- Dayton charm bar: phone to ear, aimed at the booking CTA --- */
.cut-accent-phone {
  left: clamp(-120px, -7vw, -30px);
  top: 6%;
  width: clamp(180px, 22vw, 330px);
  --cut-tilt: 3deg;
  --cut-amp: 7px;
  --cut-float: 11s;
}
.cut-accent-phone > img { filter: drop-shadow(0 0 24px rgba(255, 60, 141, .2)) drop-shadow(0 18px 30px rgba(0, 0, 0, .78)) brightness(.92); }

#charm-bar-dayton .cut-caption.cap-phone { top: 4%; left: clamp(10px, 3vw, 60px); }
#charm-bar-dayton .y2k-sparkle.s1 { top: 2%; left: 21%; width: 16px; }
#charm-bar-dayton .y2k-heart.h1 { bottom: 24%; left: 15%; width: 15px; }

/* --- Bestsellers: a product detail shot beside the heading only --- */
.cut-accent-hands {
  right: clamp(-70px, -3vw, -6px);
  top: clamp(-42px, -3vw, -8px);
  width: clamp(170px, 21vw, 300px);
  --cut-tilt: -4deg;
  --cut-amp: 6px;
  --cut-float: 9s;
}
.bestsellers-head { position: relative; }
.bestsellers-head .cut-layer { inset: 0 0 auto 0; height: 100%; }
/* The layer sits one level deeper than a normal host child here, so the copy
   needs its own lift — the .cut-host rule only reaches direct children. */
.bestsellers-head > .lc-section-head { position: relative; z-index: 2; }
.bestsellers-head .cut-caption.cap-hands { top: -34px; right: clamp(-20px, 0vw, 10px); }
.bestsellers-head .y2k-sparkle.s1 { top: -18px; right: 33%; width: 14px; }

/* --- Real lucky builds: the group shot anchoring the heading --- */
.cut-accent-trio {
  right: clamp(-220px, -12vw, -70px);
  top: clamp(-70px, -5vw, -20px);
  width: clamp(300px, 41vw, 560px);
  --cut-amp: 6px;
  --cut-float: 14s;
}
.cut-accent-trio > img { filter: drop-shadow(0 0 34px rgba(255, 60, 141, .2)) drop-shadow(0 24px 42px rgba(0, 0, 0, .8)) brightness(.94); }

#builds .cut-caption.cap-trio { top: clamp(-46px, -3vw, -16px); right: clamp(4px, 3vw, 64px); }
#builds .y2k-sparkle.s1 { top: 8%; right: 46%; width: 18px; }
#builds .y2k-flower.f1 { top: 2%; right: 18%; width: 20px; }

/* ============================================================
   RESPONSIVE
   The figures are re-composed at each step rather than scaled
   down: figures drop out, change corner, or move from an
   absolute pin into normal flow. Faces, prices, navigation and
   CTAs stay clear at every width.
   ============================================================ */

/* ---- narrow desktop / large tablet ---- */
@media (max-width: 1280px) {
  /* Below this width the three CTAs stop fitting the copy column two-abreast
     and take a row each, which is the row that pushed the last button under
     the fold. Stated as a grid instead: the primary keeps a row of its own and
     the two secondaries share the next one, at matched heights. */
  .lc-hero-collage .lc-btn-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .lc-hero-collage .hero-aim {
    display: flex;
    grid-column: 1 / -1;
  }
  .lc-hero-collage .hero-aim .lc-btn { width: 100%; }
  .lc-hero-collage .lc-btn-row .lc-btn:not(.hero-primary) {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 9px;
  }
}

@media (max-width: 1100px) {
  .lc-hero.lc-hero-collage { --hero-rail: clamp(124px, 12vw, 150px); }
  .lc-hero.lc-hero-collage .lc-hero-inner { max-width: min(560px, 60%); }
  /* The far-left figure is the first thing to go: it is the one that would
     start crowding the headline. */
  .cut-hero-side { display: none; }
  .lc-hero-collage .y2k-heart.h1,
  .lc-hero-collage .y2k-sparkle.s3 { display: none; }

  .lookbook .lb-panel { grid-column: 5 / span 5; }
  .lb-fig.lb-close { grid-column: 10 / span 3; }
  .lb-fig.lb-bleed { grid-column: 9 / span 4; width: 124%; }
  .lookbook .y2k-dots.d1 { display: none; }

  .cut-accent-trio { width: clamp(260px, 44vw, 430px); }
  .cut-accent-phone { width: clamp(160px, 24vw, 250px); }
}

/* ---- tablet: the hero and the spread both re-flow ---- */
@media (max-width: 900px) {
  /* HERO — from a two-zone composition into stacked copy + a figure row.
     The layer stops being an absolute plane and becomes a flex strip below
     the copy, which is a genuine re-arrangement rather than a shrink. */
  .lc-hero.lc-hero-collage {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    align-items: start;
    padding-bottom: 0;
  }
  /* The rail stops being a column and becomes the strip of meta type above the
     headline — which is where it sat before the collage existed, and the only
     arrangement that keeps 7px type readable on a phone. */
  .lc-hero-collage .lc-hero-rail {
    grid-column: 1;
    grid-row: 1;
    justify-items: start;
    gap: clamp(10px, 2.4vw, 16px);
    margin-bottom: clamp(14px, 3vw, 22px);
    text-align: left;
  }
  .lc-hero-collage .lc-hero-rail .lc-hero-badge { font-size: 8px; letter-spacing: 2px; }
  .lc-hero-collage .lc-hero-rail .lc-hero-eyebrow {
    font-size: clamp(8px, 1.6vw, 11px);
    letter-spacing: clamp(2px, .6vw, 5px);
  }
  /* First-screen budget. The look number is the one line in the rail that
     carries no information, so it goes rather than pushing the CTAs down. */
  .lc-hero-collage .lc-hero-rail .cut-caption.hero-cap { display: none; }

  .lc-hero.lc-hero-collage .lc-hero-inner {
    grid-row: 2;
    max-width: 100%;
    text-align: left;
  }
  .lc-hero.lc-hero-collage .lc-hero-inner::before { inset: -12% -14% -14% -16%; }

  /* Rows 3 and 4, stated rather than left to auto-placement: both planes
     belong below the copy so the headline and the three CTAs are the first
     things on screen, and so the front plane's negative pull lands on the
     figure strip instead of on the buttons. */
  .lc-hero-collage .cut-layer,
  .lc-hero-collage .cut-layer.front {
    grid-column: 1;
    position: relative;
    inset: auto;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0;
    margin-top: clamp(18px, 4vw, 34px);
  }
  .lc-hero-collage .cut-layer { grid-row: 3; }
  .lc-hero-collage .cut-layer.front { grid-row: 4; }
  .lc-hero-collage .cut { position: relative; inset: auto; width: auto; }
  .cut-hero-lead { flex: 0 0 auto; width: min(62%, 320px); --cut-tilt: 0deg; }
  /* The second figure returns as a partner in the strip, overlapping the
     primary from behind. */
  .cut-hero-back {
    display: block;
    flex: 0 0 auto;
    width: min(30%, 150px);
    margin-right: -9%;
    margin-bottom: 4%;
    --cut-tilt: -4deg;
  }
  .lc-hero-collage .cut-layer.front { margin-top: -30%; justify-content: flex-end; }
  .lc-hero-collage .y2k-sticker.st1,
  .lc-hero-collage .y2k-sparkle.s2 { display: none; }
  .lc-hero-collage .y2k-sparkle.s1 { top: 8%; right: 8%; }

  /* LOOKBOOK — a single readable column. Overlaps shrink to small, safe
     offsets and every caption moves clear of the copy. */
  .lookbook-stage {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: 0;
    gap: clamp(14px, 3vw, 24px);
  }
  .lb-fig.lb-lead { grid-column: 1 / span 4; grid-row: 1; }
  .lookbook .lb-panel { grid-column: 1 / span 6; grid-row: 2; margin-top: clamp(-56px, -7vw, -20px); }
  .lb-fig.lb-close { grid-column: 4 / span 3; grid-row: 1; align-self: end; margin-top: 0; width: 136%; margin-left: -30%; }
  .lb-fig.lb-overlap { grid-column: 1 / span 3; grid-row: 3; width: 108%; margin: clamp(-30px, -4vw, -12px) 0 0; }
  .lb-fig.lb-bleed { grid-column: 4 / span 3; grid-row: 3; width: 128%; margin: clamp(26px, 5vw, 50px) clamp(-90px, -9vw, -40px) 0 0; }
  .lookbook .y2k-sparkle.s2,
  .lookbook .y2k-heart.h1 { display: none; }
  .lookbook .y2k-sticker.st1 { bottom: 1%; left: 2%; }

  /* SECTION ACCENTS — the two heading figures that share horizontal space
     with centred text step out of the way entirely. */
  .cut-accent-phone,
  #charm-bar-dayton .cut-caption.cap-phone,
  #charm-bar-dayton .y2k-heart.h1,
  #charm-bar-dayton .y2k-sparkle.s1 { display: none; }

  .cut-accent-trio {
    right: clamp(-150px, -18vw, -60px);
    top: auto;
    bottom: -8%;
    width: clamp(210px, 40vw, 320px);
    opacity: .9;
  }
  #builds .cut-caption.cap-trio { display: none; }

  .cut-accent-hands { width: clamp(120px, 20vw, 180px); top: auto; bottom: -10%; right: -5%; }
  .bestsellers-head .cut-caption.cap-hands { display: none; }
}

/* ---- phone ---- */
@media (max-width: 640px) {
  .lc-hero.lc-hero-collage { padding-inline: clamp(14px, 5vw, 22px); }
  .lc-hero.lc-hero-collage h1 { font-size: clamp(26px, 9.4vw, 44px); }
  .cut-hero-lead { width: min(74%, 290px); }
  .cut-hero-back { width: min(34%, 124px); margin-right: -11%; }
  .lc-hero-collage .cut-layer.front { margin-top: -34%; }
  .hero-aim .y2k-dots, .hero-aim .y2k-cursor { display: none; }
  .lc-hero-collage .lc-btn.hero-primary { width: 100%; }

  .lookbook { padding-bottom: clamp(46px, 12vw, 70px); }
  .lookbook-stage { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lb-fig.lb-lead { grid-column: 1 / span 3; }
  .lb-fig.lb-close { grid-column: 3 / span 2; width: 142%; margin-left: -42%; }
  .lookbook .lb-panel { grid-column: 1 / span 4; margin-top: clamp(-34px, -6vw, -14px); }
  .lb-fig.lb-overlap { grid-column: 1 / span 2; grid-row: 3; width: 112%; }
  .lb-fig.lb-bleed { grid-column: 3 / span 2; grid-row: 3; width: 130%; margin-right: clamp(-70px, -14vw, -30px); }
  /* Captions sit under their figure on a phone — over the photo there is no
     longer enough clear space to keep them subtle. */
  .lookbook .lb-fig .cut-caption {
    position: static;
    display: block;
    margin-top: 6px;
    font-size: 6px;
    letter-spacing: 1.4px;
    white-space: normal;
  }

  .cut-accent-trio { width: clamp(170px, 46vw, 250px); right: -18%; bottom: -6%; }
  .cut-accent-hands { display: none; }
  .bestsellers-head .y2k-sparkle.s1 { display: none; }
  .lookbook .y2k-flower.f1 { display: none; }
}

/* ---- short viewports ----
   A shallow laptop window and a small phone hit the same wall: the height
   runs out before the CTA row does. Everything here is vertical rhythm, so
   the composition is unchanged — it just breathes less. */
@media (max-height: 800px) {
  .lc-hero.lc-hero-collage { padding-block: clamp(12px, 2.1vh, 72px) clamp(14px, 2.1vh, 64px); }
  .lc-hero.lc-hero-collage .lc-hero-inner { gap: clamp(8px, 1.3vh, 24px); }
  .lc-hero-collage .lc-hero-sub { line-height: 1.7; }
  .lc-hero-collage .lc-hero-rail { gap: 8px; }
  /* Still a 46px target, comfortably above the 44px minimum. */
  .lc-hero-collage .lc-btn.hero-primary { min-height: 50px; padding-block: 13px; }
  .lc-hero-collage .lc-btn-row .lc-btn:not(.hero-primary) { min-height: 46px; padding-block: 12px; }
}

/* ---- the shortest screens ----
   On a small phone or a 600px-tall laptop window the copy alone is taller
   than the first screen. The opening line carries the pitch; the second
   paragraph's facts are also in the IRL badge above it and the charm bar
   section below, so it is the one thing here that can step aside for the
   buttons. */
@media (max-height: 680px) {
  .lc-hero-collage .lc-hero-sub + .lc-hero-sub { display: none; }
  .lc-hero-collage .lc-hero-chrome { display: none; }
}

/* ---- the smallest phones ----
   At 320x568 the buttons still need about one more line. The eyebrow
   repeats the name the logo directly above it already spells out, so it is
   the next thing to give way. */
@media (max-width: 420px) and (max-height: 600px) {
  .lc-hero-collage .lc-hero-rail .lc-hero-eyebrow { display: none; }
  .lc-hero-collage .lc-hero-rail { margin-bottom: 4px; }
}

/* ============================================================
   REDUCED MOTION
   Every figure and graphic lands in its final composed position
   with nothing moving. Parallax is also switched off in JS.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cut > img,
  .y2k-sparkle,
  .y2k-heart,
  .y2k-flower,
  .y2k-cursor { animation: none !important; }

  .cut { --cut-shift: 0px !important; }
  .cut-js .cut[data-cut-reveal] { opacity: 1 !important; transition: none; }
  .y2k-sparkle { opacity: .9; }
}

/* ============================================================
   PAGE ACCENTS — BEYOND THE HOMEPAGE
   The same host/layer contract as the sections above, applied
   one figure at a time to the interior pages. Two rules kept
   these placements out of trouble:

   • Nothing hangs past its host horizontally. The interior
     hosts are .lc-section / .editorial / .manifesto-block, all
     of which are max-width boxes centred in the viewport, so a
     negative left/right would meet .cut-host's overflow-x clip
     and cut the photograph on a hard vertical line. These
     figures sit flush to the host edge instead and do their
     bleeding on the y-axis, which is unclipped.

   • Every figure is sized to stay in its section's heading
     band. Below that band live cards and panels with opaque
     backgrounds, and a figure that reached them would simply
     disappear behind them rather than read as collage.

   Copy still wins everywhere: .cut-host lifts every non-layer
   child to z-index 2, so type sits in front of the figure and
   the figure never takes a click.
   ============================================================ */

/* --- Lucky Angel, the drop story: the winged look, given a row
       of its own across the top of the band --- */
/* The one figure on the site that does not sit in a gutter. Her wings span
   2.1x her own width, which is wider than the slack left beside a 52ch
   measure at any viewport, so fitting them next to the copy would mean
   shrinking them at every step down. Instead the collage layer comes out of
   the background plane here and takes a full-width grid row above the two
   columns. Nothing shares that row, so the wings run at one size from
   desktop to a 360px phone and no text is ever behind them. */
#angel-story .cut-layer {
  /* Relative, not static: the caption below is still absolutely positioned
     against this layer, and .editorial itself is not a containing block. */
  position: relative;
  inset: auto;
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.2vw, 16px);
}

.cut-angel-look {
  position: relative;
  right: auto;
  bottom: auto;
  /* Floor is the 170px she was capped at on desktop before she moved out of
     the gutter, so no width shrinks her: from 700px up she only gets bigger. */
  width: clamp(168px, 24vw, 280px);
  /* Her cut-out is 467x1500 - 3.21x its width tall. Letting that set the row
     would open ~900px of empty column beside her, so the row is capped at
     the part of her the wings need and the rest of the photo is masked off
     below. 467/820 keeps her top 55%. */
  aspect-ratio: 467 / 820;
  --cut-tilt: 3deg;
  --cut-amp: 8px;
  --cut-float: 11.5s;
  --wing-span: 210%;
  --wing-top: 10.6%;
  --wing-opacity: .55;
}
/* Lighter-handed than the old gutter treatment: she is in open space now
   rather than reading through body copy, so she no longer has to recede. */
.cut-angel-look > img { filter: drop-shadow(0 0 24px rgba(255, 60, 141, .18)) drop-shadow(0 18px 32px rgba(0, 0, 0, .82)) brightness(.88); }

/* --- the wings --- */
/* Placed in percentages of the figure's own box, so the pair stays pinned to
   her shoulders at every width off one set of numbers: her width is clamped
   once and the wings scale off it. The art's attach point sits at 50% across
   and 64.5% down its own box, which these offsets land on her upper back.
   The float animation and the reduced-motion opt-out both come from the
   shared .cut > img rules above. */
.cut-angel-look > .angel-wings {
  position: absolute;
  /* 52% is the centre of her upper back across the cut-out's own width; the
     span is halved off it so the pair stays centred on her. --wing-top is
     a share of the box height: the art's own height is span x 0.2296 of her
     width, and 10.6% is what puts its attach point on her shoulder line. */
  top: var(--wing-top);
  left: calc(52% - var(--wing-span) / 2);
  z-index: 0;
  width: var(--wing-span);
  height: auto;
  opacity: var(--wing-opacity);
  /* Dimmer and softer than she is, so she reads as the solid subject and the
     wings as light behind her rather than a second object in front of the
     background. The blur is what stops the feather edges from looking cut. */
  filter:
    drop-shadow(0 0 22px rgba(255, 181, 213, .42))
    drop-shadow(0 0 54px rgba(255, 60, 141, .22))
    blur(.4px);
  /* The tips dissolve before they reach the section's clip edge, so whatever
     .cut-host does cut is already down to nothing and no hard vertical line
     shows up at the outer wing. --wing-fade widens on the narrowest phones,
     where the span runs a little past the section: the pair keeps its size
     and gives up a few more pixels of tip instead. */
  --wing-fade: 11%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--wing-fade), #000 calc(100% - var(--wing-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--wing-fade), #000 calc(100% - var(--wing-fade)), transparent 100%);
}

/* She sits in front of her own wings, and out of flow like them so that the
   aspect-ratio above is what decides the row height rather than her full
   3.21:1 photo. The bottom edge of that box falls at 54.7% of the photo, so
   she is faded out just short of it and the crop never reads as a cut line
   above the copy. */
.cut-angel-look > img:not(.angel-wings) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 38%, transparent 54%);
          mask-image: linear-gradient(180deg, #000 0, #000 38%, transparent 54%);
}

/* Centred under her in the layer's own grid, rather than pinned to a corner
   of a band it no longer spans. */
#angel-story .cut-caption.cap-angel { position: static; }
/* Placed into the figure's own cell so the offsets below read against her
   row rather than against an empty auto row underneath the caption. */
#angel-story .y2k-sparkle.s1 { grid-area: 1 / 1; top: 14%; right: 12%; width: 16px; }

/* --- Charm bar, the virtual builder: hands on a handheld,
       tucked under the builder CTA --- */
.cut-bar-hands {
  right: 0;
  bottom: clamp(-40px, -3.5vw, -12px);
  width: clamp(160px, 20vw, 292px);
  --cut-tilt: -4deg;
  --cut-amp: 6px;
  --cut-float: 9.5s;
  --cut-delay: -2s;
}
.cut-bar-hands > img { filter: drop-shadow(0 0 26px rgba(214, 255, 73, .16)) drop-shadow(0 18px 30px rgba(0, 0, 0, .8)) brightness(.86); }

#charm-bar-online .cut-caption.cap-bar { bottom: clamp(4px, 1.5vw, 22px); right: clamp(8px, 2vw, 30px); }
#charm-bar-online .y2k-sparkle.s1 { bottom: 34%; right: 22%; width: 15px; }

/* --- Booking, how it works: the phone-to-ear read as "call to
       book", in the empty gutter beside the centred heading --- */
.cut-booking-call {
  left: 0;
  top: clamp(-26px, -2vw, -6px);
  width: clamp(140px, 16vw, 232px);
  --cut-tilt: 3.5deg;
  --cut-amp: 7px;
  --cut-float: 12s;
}
.cut-booking-call > img { filter: drop-shadow(0 0 24px rgba(255, 60, 141, .2)) drop-shadow(0 18px 30px rgba(0, 0, 0, .78)) brightness(.88); }

#how-booking-works .cut-caption.cap-booking { top: clamp(2px, 1.4vw, 18px); left: clamp(10px, 2.4vw, 42px); }
#how-booking-works .y2k-heart.h1 { top: 30%; left: 12%; width: 15px; }

/* --- Reviews, real builds: a finished name build beside the
       heading, above the grid of customer photos --- */
.cut-proof-charm {
  right: 0;
  top: clamp(-28px, -2.2vw, -8px);
  width: clamp(126px, 15vw, 214px);
  --cut-tilt: 5deg;
  --cut-amp: 7px;
  --cut-float: 10.5s;
  --cut-delay: -4s;
}
.cut-proof-charm > img { filter: drop-shadow(0 0 28px rgba(255, 60, 141, .22)) drop-shadow(0 18px 32px rgba(0, 0, 0, .78)) brightness(.9); }

#proof .cut-caption.cap-proof { top: clamp(-4px, 1vw, 14px); right: clamp(6px, 2vw, 28px); }
#proof .y2k-sparkle.s1 { top: 6%; right: 20%; width: 16px; }

/* --- Mission, the personality block: the charm cluster in the
       open right-hand column under the short heading --- */
.cut-mission-charm {
  right: 0;
  bottom: clamp(-30px, -2.6vw, -8px);
  width: clamp(84px, 9.5vw, 138px);
  --cut-tilt: -5deg;
  --cut-amp: 9px;
  --cut-float: 13s;
  --cut-delay: -5s;
}
.cut-mission-charm > img { filter: drop-shadow(0 0 26px rgba(214, 255, 73, .18)) drop-shadow(0 20px 34px rgba(0, 0, 0, .8)) brightness(.88); }

#mission-personality .cut-caption.cap-mission { bottom: 3%; right: clamp(6px, 2vw, 26px); }
#mission-personality .y2k-sparkle.s1 { bottom: 40%; right: 30%; width: 14px; }

/* ---- interior pages: tablet ----
   .editorial and the centred .lc-section heads both give up their
   side gutters here, so every figure shrinks to what still fits in
   the slack left by a 52ch/62ch measure and drops its caption. */
@media (max-width: 900px) {
  /* Lucky Angel is absent from this step and the next: she has her own row
     rather than a gutter, so there is no narrowing gutter to follow. */
  .cut-bar-hands { width: clamp(118px, 17vw, 152px); bottom: clamp(-18px, -2vw, -6px); }
  .cut-booking-call { width: clamp(104px, 15vw, 140px); top: clamp(-12px, -1.2vw, -2px); }
  .cut-proof-charm { width: clamp(96px, 14vw, 132px); top: clamp(-14px, -1.4vw, -4px); }
  .cut-mission-charm { width: clamp(70px, 10vw, 96px); }

  #angel-story .y2k-sparkle.s1,
  #charm-bar-online .cut-caption.cap-bar,
  #charm-bar-online .y2k-sparkle.s1,
  #how-booking-works .cut-caption.cap-booking,
  #how-booking-works .y2k-heart.h1,
  #proof .cut-caption.cap-proof,
  #proof .y2k-sparkle.s1,
  #mission-personality .cut-caption.cap-mission,
  #mission-personality .y2k-sparkle.s1 { display: none; }
}

/* ---- interior pages: phone ----
   The side gutters are gone below this, so a figure can no longer stand
   beside the copy — it stands behind it. Three things keep that legible
   instead of muddy:

   • Each figure moves to the emptiest corner of its host. The .editorial
     bodies keep a 52ch measure and left-align it, which leaves real slack
     down the right edge; the centred .lc-section heads leave slack at both
     ends of every short heading line. That slack is where these land.

   • Each figure grows to roughly a third of the viewport. At the tablet
     width they were sized to squeeze into a gutter — at this width there
     is no gutter to squeeze into, so they may as well read as photographs.

   • The scroll parallax is damped to 45%. The travel is computed from the
     host section and is the same absolute number of pixels here as on a
     desktop, where it is a small fraction of the band the figure sits in.
     On a phone band it is most of it, and an undamped figure would drift
     out of its corner entirely. Scaling --cut-shift inside the transform
     keeps that a CSS concern; the script still writes one number.

   Captions and sparkles stay off from the tablet step above: at this size
   a 7px caption sitting next to 9px body copy reads as a second column of
   type rather than as a label. Copy still wins everywhere — .cut-host
   holds every non-layer child at z-index 2, so headlines, cards and
   buttons render in front of the figure and it never takes a click. */
@media (max-width: 760px) {
  /* Mission collapses to one column here, and the opaque .manifesto-copy
     panel takes the whole lower half of the block. The cluster moves up to
     the heading row and lets its lower third slip behind the panel's top
     edge — a clean horizontal overlap rather than a figure that has simply
     vanished into the panel. */
  .cut-mission-charm {
    top: clamp(-8px, -1.5vw, 0px);
    bottom: auto;
    width: clamp(62px, 18vw, 92px);
    --cut-amp: 6px;
  }
}

@media (max-width: 700px) {
  /* Lucky Angel: same wings at the same span, in the same row of their own.
     Only the float settles down, along with every other figure here. */
  .cut-angel-look { --cut-amp: 6px; }

  /* Charm bar: the hands sit low and to the right of the builder CTA, and
     do the rest of their bleeding downward into the section's own padding
     where there is nothing to collide with. */
  .cut-bar-hands {
    bottom: clamp(-34px, -8vw, -10px);
    width: clamp(130px, 42vw, 200px);
    --cut-amp: 5px;
  }

  /* Booking: still the left-hand corner of the centred head, which is the
     one part of this page the .how-step panels never reach. */
  .cut-booking-call {
    top: clamp(-12px, -2.5vw, -2px);
    width: clamp(104px, 32vw, 150px);
    --cut-amp: 5px;
  }

  /* Reviews: the name build in the right-hand corner of the head, above
     the single column of opaque .build-card photos. */
  .cut-proof-charm {
    top: clamp(-14px, -3vw, -2px);
    width: clamp(100px, 30vw, 146px);
    --cut-amp: 5px;
  }
}

/* Damped travel, as one rule so the shorthand is written once. Kept at the
   mission breakpoint so the cluster is covered too; the reduced-motion
   block above pins --cut-shift to 0px, and calc() carries that through. */
@media (max-width: 760px) {
  .cut-angel-look,
  .cut-bar-hands,
  .cut-booking-call,
  .cut-proof-charm,
  .cut-mission-charm {
    transform: translate3d(0, calc(var(--cut-shift, 0px) * .45), 0) rotate(var(--cut-tilt, 0deg));
  }
}

/* ---- interior pages: the narrowest phones ----
   Lucky Angel's row is as wide as the section allows, and the wings are
   2.1x her 168px floor - 353px, which is the content width of a 384px
   viewport almost to the pixel. Below that the tips reach .cut-host's clip
   edge, so the dissolve is doubled instead of the span reduced: the pair
   stays the size it is at every other width and simply ends in more air. */
@media (max-width: 384px) {
  .cut-angel-look > .angel-wings { --wing-fade: 22%; }
}