/* PAPER AS INTERFACE — single owners for the living viewport and its paper layers. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23554b39' filter='url(%23n)' d='M0 0h96v96H0z'/%3E%3C/svg%3E");
}
/* One A4 surface for FIRST → ROOM and workspace → SIMPLE. */
.paper-transition {
  position: absolute;
  aspect-ratio: 1 / 1.4142135623730951;
  background: #fffefa;
  outline: var(--paper-stroke, 1px) solid #dedbd266;
  box-shadow: 0 5px 18px #41311e1a;
  transform-origin: center;
  pointer-events: none;
}
.paper-corner {
  position: absolute;
  z-index: 1;
  width: clamp(3px, 3.2%, 7px);
  aspect-ratio: 1;
  opacity: var(--corner-opacity, 0);
  border-color: #74786966;
  border-style: solid;
  border-width: 0;
}
.paper-corner.top-left {
  left: 7%;
  top: 5%;
  border-top-width: var(--paper-stroke, 1px);
  border-left-width: var(--paper-stroke, 1px);
}
.paper-corner.bottom-right {
  right: 7%;
  bottom: 5%;
  border-bottom-width: var(--paper-stroke, 1px);
  border-right-width: var(--paper-stroke, 1px);
}
.product-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.artboard[data-scene="print"] .product-visual {
  z-index: 3;
}
.artboard > .copy {
  z-index: 4;
}
.artboard > .measurements {
  z-index: 5;
}
.living-scroll {
  height: 610vh;
  position: relative;
  margin-top: -100vh;
}
/* A clipping viewport, not a nested scroll container. Focus/scrollIntoView
   must not scroll the offscreen tabletop and displace the visible wall. */
.living-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
  perspective: 1800px;
}
.living-stage .memories-section {
  position: absolute;
  inset: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  min-height: 0;
  max-height: none;
  z-index: 1;
}
.living-stage .wall-photo {
  transform-origin: 50% 85%;
}
.living-stage .ideas-grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  height: 100%;
  margin: 0;
  padding: calc(var(--header-height) + 23px) 4% 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 0;
  row-gap: 24px;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 75%;
}
.living-stage .idea-card {
  display: contents;
}
.living-stage .idea-copy {
  grid-row: 1;
  padding: 0 10% 0 0;
  min-height: 0;
}
.living-stage .idea-card:nth-child(2) .idea-copy {
  padding: 0 0 0 8%;
}
.living-stage .idea-copy .eyebrow {
  margin-bottom: 15px;
}
.living-stage .idea-copy .headline {
  font-size: clamp(32px, 3.2vw, 54px);
  line-height: 1.04;
}
.living-stage .idea-copy .body-copy {
  margin-top: 16px;
  min-height: 0;
}
.living-stage .idea-visual {
  grid-row: 2;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  overflow: hidden;
  isolation: isolate;
}
.paper-scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1;
  transform: translateY(var(--scene-crop, 0px));
}
.paper-scene > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  max-width: none;
  height: auto;
}
.craft-visual .paper-scene > img {
  left: -100%;
}
.gift-note {
  z-index: 3;
}
.gift-ribbon {
  z-index: 4;
  transform-origin: 58% 41%;
}
.cut-paper {
  z-index: 4;
}
.cut-offcut {
  z-index: 5;
}
.leaf-bed,
.cut-leaf,
.leaf-shape {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.leaf-bed,
.leaf-shape {
  clip-path: polygon(
    44.7% 68.7%,
    46.7% 62%,
    46% 58%,
    45.5% 54.5%,
    46.9% 51.9%,
    48% 51.8%,
    49.9% 55.8%,
    51.1% 53.9%,
    53.5% 50%,
    55.8% 48.7%,
    57.1% 49%,
    57.6% 50.5%,
    56.7% 53.7%,
    55.2% 55.7%,
    58.8% 54.5%,
    59.7% 55.4%,
    59.8% 57%,
    57.6% 59.4%,
    54.2% 61%,
    52.3% 61.7%,
    51.1% 63%,
    54.1% 61.5%,
    56.5% 62.3%,
    57% 63.4%,
    55.5% 65.1%,
    52.4% 66.4%,
    49.1% 65.8%,
    47.8% 69.9%,
    46.2% 70.6%,
    44.7% 69.5%
  );
}
.leaf-bed {
  background: #faf8f0;
  z-index: 1;
  opacity: 0;
}
.cut-leaf {
  z-index: 3;
  transform-origin: 48% 67%;
}
.leaf-shape img {
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  max-width: none;
  height: auto;
}
.cut-guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  fill: none;
  stroke: #7d8262;
  stroke-width: 1;
  opacity: 0.42;
}
.cut-guide path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.workspace-sheet {
  left: 58%;
  top: 69%;
  width: 12%;
  transform: rotate(9deg);
  z-index: 2;
}
.workspace-sheet.is-expanded {
  left: 0;
  top: 0;
  z-index: 8;
}
.living-stage > .specs-scroll {
  position: absolute;
  inset: 0;
  margin: 0;
  height: 100%;
  z-index: 9;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.living-stage .specs-section {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-height) + 32px);
  padding-bottom: 32px;
  background: transparent;
}
.living-stage .spec-grid {
  width: 100%;
  flex-shrink: 0;
}
.specs-section > .reveal {
  position: relative;
}
.wall-hint {
  white-space: pre-line;
  font: 10px/1.7 var(--system-font);
  letter-spacing: 0.12em;
  padding: 12px 16px;
  max-width: 240px;
}
.print-card {
  transform-origin: right center;
}
.print-card::before {
  content: "";
  position: absolute;
  inset: auto 0 -2px;
  height: 2px;
  background: #dcd8ce;
  opacity: 0;
  transition: opacity 0.24s;
  transform: translateZ(-1px);
}
.print-card[data-role="active"]::before,
.print-card[data-role="incoming"]::before {
  opacity: 0.8;
}
@media (max-width: 760px) {
  .living-scroll {
    height: 460vh;
  }
  .living-stage .ideas-grid {
    display: block;
    height: 200%;
    padding: 0;
    transform-origin: 50% 50%;
    overflow: visible;
  }
  .living-stage .idea-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 20px;
    width: 88%;
    height: 50%;
    margin: 0 6%;
    padding: calc(var(--header-height) + 30px) 0 28px;
  }
  .living-stage .idea-card + .idea-card {
    margin: 0 6%;
  }
  .living-stage .idea-copy,
  .living-stage .idea-card:nth-child(2) .idea-copy {
    padding: 0;
  }
  .living-stage .idea-copy .headline {
    font-size: 37px;
  }
  .living-stage .idea-copy .eyebrow {
    margin-bottom: 14px;
  }
  .living-stage .idea-copy .body-copy {
    font-size: 14px;
    margin-top: 15px;
  }
  .living-stage .idea-visual {
    height: 100%;
    width: 100%;
  }
  .wall-hint {
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 0.03em;
    text-align: center;
    bottom: calc(6% + 58px);
  }
}
/* Reduced motion keeps the actual sections readable in natural flow. */
.reduce-motion .living-scroll {
  height: auto;
}
.reduce-motion .living-stage {
  position: relative;
  height: auto;
  overflow: visible;
  perspective: none;
}
.reduce-motion .living-stage .memories-section {
  position: relative;
  height: 100svh;
}
.reduce-motion .living-stage .ideas-grid {
  position: relative;
  height: auto;
  padding: 65px 4% 30px;
  visibility: visible;
  opacity: 1;
  transform: none !important;
}
.reduce-motion .living-stage .idea-visual {
  height: auto;
  aspect-ratio: 1;
}
.reduce-motion .paper-scene {
  position: relative;
  transform: none !important;
}
.reduce-motion .living-stage > .specs-scroll {
  position: relative;
  height: auto;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.reduce-motion .living-stage .specs-section {
  position: relative;
  height: auto;
  min-height: 0;
}
.reduce-motion .workspace-sheet.is-expanded,
.reduce-motion .cut-guide {
  display: none;
}
@media (max-width: 760px) {
  .reduce-motion .living-stage .ideas-grid {
    padding: 45px 6%;
  }
  .reduce-motion .living-stage .idea-card {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }
  .reduce-motion .living-stage .idea-card + .idea-card {
    margin: 65px 0 0;
  }
  .reduce-motion .living-stage .idea-copy {
    padding-bottom: 25px;
  }
}
/* Keep the independent cut pieces inside the visible tabletop on shorter desktops. */
.living-stage .cut-paper {
  top: 68%;
}
.living-stage .cut-offcut {
  top: 77%;
}