/* ---- The seam — where the velvet buy block meets the Saga leaf ----
   Three treatments, switched by [data-seam] on .pp:
     torn    — ragged paper tear, the parchment ripped away from the red
     deckle  — shallow hand-deckled edge, gentler
     bleed   — no tear; the red soaks into the paper over a long dissolve
     off     — the original hard horizontal break
   Every treatment also lifts the leaf so a band of parchment sits above
   the fold: the peek is what actually makes people scroll. */

.pp[data-seam] { --seam-h: 110px; --seam-lift: 112px; }
.pp[data-seam="peaks"] { --seam-h: 40px; --seam-lift: 104px; }
.pp[data-seam="deckle"] { --seam-h: 72px; --seam-lift: 96px; }
.pp[data-seam="bleed"] { --seam-h: 170px; --seam-lift: 150px; }
.pp[data-seam="off"] { --seam-h: 0px; --seam-lift: 0px; }

/* the buy block keeps a clear band of velvet below the CTA; the leaf rides up
   into the rest of that padding, so the paper shows sooner without ever
   touching the quantity row or the Add to Cart button */
.pp[data-seam]:not([data-seam="off"]) .pp-buy {
  padding-bottom: calc(var(--seam-lift) + clamp(38px, 4vw, 62px));
}

/* ---- the leaf rides up under the buy block ---- */
.pp[data-seam]:not([data-seam="off"]) .gs {
  margin-top: calc(-1 * var(--seam-lift));
  position: relative;
}

/* torn + deckle: an alpha mask carves the ragged top edge out of the leaf */
.pp[data-seam="torn"] .gs,
.pp[data-seam="peaks"] .gs,
.pp[data-seam="deckle"] .gs {
  -webkit-mask-image: var(--seam-mask), linear-gradient(#000, #000);
  mask-image: var(--seam-mask), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--seam-h), 100% calc(100% - var(--seam-h) + 1px);
  mask-size: 100% var(--seam-h), 100% calc(100% - var(--seam-h) + 1px);
  -webkit-mask-position: center top, 0 calc(var(--seam-h) - 1px);
  mask-position: center top, 0 calc(var(--seam-h) - 1px);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
}
.pp[data-seam="torn"] {
  --seam-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='140' preserveAspectRatio='none'%3E%3Cfilter id='t' filterUnits='userSpaceOnUse' x='-60' y='-60' width='1720' height='320'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0055 0.045' numOctaves='4' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='78' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='-60' y='70' width='1720' height='260' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
}
/* peaks — a machine-cut perforation: a 20px tooth, 8px deep, repeated dead
   even across the join. Faint gilt line on the cut, soft contact shadow on
   the velvet above it, and a small scroll cue on the paper below. */
.pp[data-seam="peaks"] {
  --seam-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='40' viewBox='0 0 28 40'%3E%3Cpath d='M0,16 Q6,14 14,4 Q22,14 28,16 L28,40 L0,40 Z' fill='%23fff'/%3E%3C/svg%3E");
}
.pp[data-seam="peaks"] .gs {
  -webkit-mask-size: 28px var(--seam-h), 100% calc(100% - var(--seam-h) + 1px);
  mask-size: 28px var(--seam-h), 100% calc(100% - var(--seam-h) + 1px);
  -webkit-mask-position: left top, 0 calc(var(--seam-h) - 1px);
  mask-position: left top, 0 calc(var(--seam-h) - 1px);
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
}
/* the gilt line riding the cut */
.pp[data-seam="peaks"] .pp-seam-edge {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--seam-lift));
  height: var(--seam-h);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='40' viewBox='0 0 28 40'%3E%3Cpath d='M0,16 Q6,14 14,4 Q22,14 28,16' fill='none' stroke='%23d6a23f' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") left top / 28px 40px repeat-x;
  opacity: 0.34;
}
/* no contact shadow on the perforated cut — clean red-to-paper join */
.pp[data-seam="peaks"] .pp-seam-shade { display: none; }
/* no medallion on the perforated cut */
.pp[data-seam="peaks"] .pp-seam-seal { display: none; }
.pp:not([data-seam="peaks"]) .pp-seam-edge,
.pp:not([data-seam="peaks"]) .pp-seam-shade { display: none; }

.pp[data-seam="deckle"] {
  --seam-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='120' preserveAspectRatio='none'%3E%3Cfilter id='d' filterUnits='userSpaceOnUse' x='-60' y='-60' width='1720' height='300'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0018 0.014' numOctaves='3' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='52' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='-60' y='58' width='1720' height='240' fill='%23fff' filter='url(%23d)'/%3E%3C/svg%3E");
}

/* bleed: no edge at all — the paper fades up into the velvet */
.pp[data-seam="bleed"] .gs {
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.28) calc(var(--seam-h) * 0.42), rgba(0, 0, 0, 0.82) calc(var(--seam-h) * 0.78), #000 var(--seam-h));
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.28) calc(var(--seam-h) * 0.42), rgba(0, 0, 0, 0.82) calc(var(--seam-h) * 0.78), #000 var(--seam-h));
}

/* ---- the seam furniture: contact shadow, red soak, wax seal ---- */
.pp-seam { position: relative; z-index: 3; height: 0; pointer-events: none; }
.pp[data-seam="off"] .pp-seam { display: none; }

/* red soaking down into the paper so the paper reads as a continuation */
.pp-seam-bleed {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--seam-lift));
  height: calc(var(--seam-h) * 1.9);
  background: linear-gradient(180deg, rgba(48, 4, 8, 0.5) 0%, rgba(48, 4, 8, 0.22) 38%, rgba(48, 4, 8, 0) 100%);
  mix-blend-mode: multiply;
}
.pp[data-seam="bleed"] .pp-seam-bleed { height: calc(var(--seam-h) * 1.2); opacity: 0.75; }
.pp[data-seam="peaks"] .pp-seam-bleed { display: none; }

/* the wax seal straddles the join — one object across two surfaces */
.pp-seam-seal {
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--seam-lift) + var(--seam-h) * 0.46);
  width: clamp(64px, 6.4vw, 92px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(72% 72% at 34% 28%, rgba(255, 233, 178, 0.95), rgba(198, 135, 27, 0.92) 46%, rgba(122, 74, 12, 0.96) 100%);
  box-shadow:
    0 10px 22px rgba(28, 2, 5, 0.42),
    inset 0 2px 3px rgba(255, 240, 200, 0.5),
    inset 0 -3px 6px rgba(74, 40, 4, 0.55);
}
.pp-seam-seal::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid rgba(74, 40, 4, 0.4);
}
.pp-seam-seal img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  opacity: 0.62;
  mix-blend-mode: multiply;
}
.pp[data-seam="bleed"] .pp-seam-seal { top: calc(-1 * var(--seam-lift) + var(--seam-h) * 0.62); }

@media (max-width: 940px) {
  .pp[data-seam] { --seam-h: 68px; --seam-lift: 78px; }
  .pp[data-seam="peaks"] { --seam-h: 40px; --seam-lift: 84px; }
  .pp[data-seam="deckle"] { --seam-h: 48px; --seam-lift: 70px; }
  .pp[data-seam="bleed"] { --seam-h: 120px; --seam-lift: 104px; }
}
@media (max-width: 640px) {
  .pp[data-seam] { --seam-h: 52px; --seam-lift: 60px; }
  .pp[data-seam="peaks"] { --seam-h: 40px; --seam-lift: 70px; }
  .pp[data-seam="deckle"] { --seam-h: 38px; --seam-lift: 54px; }
  .pp[data-seam="bleed"] { --seam-h: 96px; --seam-lift: 82px; }
}

/* ---- Read-on band — the fix for "I thought the red was the whole page":
   a centred, ruled invitation sitting in the velvet just above the cut ---- */
.pp-readon { display: flex; justify-content: center; margin-top: clamp(16px, 1.8vw, 26px); }
.pp-readon-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  width: 100%;
  max-width: 720px;
  text-decoration: none;
  color: var(--gold-300, #e3bd6e);
  transition: color 0.3s var(--ease-standard, ease);
}
/* the row is 26px tall — the height of its arrow. Padding would move the flanking
   rules off the text's centre line, so the hit box grows through an expander. */
.pp-readon-link::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}
.pp-readon-rule { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(214, 162, 63, 0) 0%, rgba(214, 162, 63, 0.45) 100%); }
.pp-readon-rule:last-child { background: linear-gradient(90deg, rgba(214, 162, 63, 0.45) 0%, rgba(214, 162, 63, 0) 100%); }
.pp-readon-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(10.5px, 0.95vw, 12px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pp-readon-arrow {
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  font-size: 0;
  animation: pp-readon-nudge 2.6s ease-in-out infinite;
}
.pp-readon-arrow::before, .pp-readon-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 15px;
  height: 15px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}
.pp-readon-arrow::before { top: 1px; opacity: 0.34; }
.pp-readon-arrow::after { top: 9px; }
@keyframes pp-readon-nudge { 0%, 58%, 100% { transform: translateY(0); } 76% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .pp-readon-arrow { animation: none; } }
.pp-readon-link:hover, .pp-readon-link:focus-visible { color: var(--gold-200, #efd9a6); }
/* colour alone is not a focus indicator */
.pp-readon-link:focus-visible { outline: 2px solid var(--gold-300, #e3bd6e); outline-offset: 6px; }
@media (max-width: 640px) {
  .pp-readon-text { white-space: normal; text-align: center; letter-spacing: 0.18em; }
}