/* Motion mechanics; all final typography, photographs and product geometry are retained. */
.product-story {
  height: 1920vh;
}
.headline-line {
  display: block;
  overflow: clip;
  padding-bottom: 0.055em;
  margin-bottom: -0.055em;
}
.headline-line .line-text {
  display: block;
  will-change: clip-path, transform;
}
.explore h1 .headline-line.last-line {
  margin-top: 1.3%;
}
.explore h1 .line-text {
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
.print-motto span {
  display: block;
}
.stage-footer {
  border-top-color: transparent;
}
.stage-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--hairline);
  transform: scaleX(var(--intro-rule, 1));
  transform-origin: left;
}
.footer-label span {
  display: inline-block;
}
.measure strong {
  display: inline-block;
  min-width: 3ch;
}
.open-angle strong {
  min-width: 2ch;
}
.wall-bridge {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  visibility: hidden;
  isolation: isolate;
}
.bridge-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.wall-bridge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #fcfbf842, transparent 42%);
  opacity: var(--wash, 0);
  pointer-events: none;
}
.travel-prints {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.travel-print {
  position: absolute;
  left: 0;
  top: 0;
  background: #fffdf8;
  padding: 0.55vw;
  transform-origin: center;
  will-change: transform;
}
.travel-print img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.travel-print::before {
  content: "";
  position: absolute;
  width: 19%;
  height: 13%;
  top: -8%;
  left: 39%;
  background: #c1b69e99;
  transform: rotate(-5deg);
  opacity: var(--tape, 0);
}
.bridge-copy {
  z-index: 3;
  opacity: 0;
}
.memories-section {
  margin-top: -100vh;
  height: 100vh;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
}
.wall-print.dragging {
  --paper-scale: 1.01;
}
.wall-hint {
  position: absolute;
  margin: 0;
  pointer-events: none;
}
.wall-context {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  padding: 5px 7px;
  background: #fcfbf8eb;
  color: #465145;
  font: 10px/1 var(--system-font);
  letter-spacing: 0.16em;
  pointer-events: none;
  opacity: 0;
}
.thumbnail-nudge {
  position: absolute;
  border: 0;
  padding: 3px;
  background: #fff;
  pointer-events: none;
  z-index: 6;
  box-shadow: 1px 4px 8px #30261722;
}
.thumbnail-nudge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.specs-scroll {
  height: 240vh;
  position: relative;
}
.specs-section {
  position: sticky;
  top: 0;
  min-height: 100vh;
  padding-top: clamp(78px, 10vh, 120px);
  padding-bottom: 55px;
}
.spec-grid {
  position: relative;
  margin-top: 55px;
  --grid-x: 1;
  --grid-y: 1;
  --rule-opacity: 1;
}
.spec-grid::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--hairline);
  opacity: var(--rule-opacity);
  transform: scaleX(var(--grid-x));
  transform-origin: left;
}
.spec-grid::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--hairline);
  opacity: var(--rule-opacity);
  transform: scaleY(var(--grid-y));
  transform-origin: top;
}
.spec-item::before,
.spec-item::after {
  display: none;
}
.spec-item {
  padding: 30px 20px 36px;
}
.buy-copy .line-text {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .bridge-photo {
    object-position: 65% center;
  }
  .travel-print {
    padding: 4px;
  }
  .specs-section {
    padding-top: 80px;
    padding-bottom: 35px;
  }
  .spec-grid {
    margin-top: 30px;
  }
  .spec-item {
    padding: 26px 8px 32px;
  }

  .buy-copy .line-text {
    white-space: normal;
  }
}
@media (max-height: 620px) {
  .specs-scroll {
    height: auto;
  }
  .specs-section {
    position: relative;
    min-height: 0;
  }
}
.reduce-motion .specs-scroll {
  height: auto;
}
.reduce-motion .specs-section {
  position: relative;
}
@media (prefers-reduced-motion: reduce) {
  .specs-scroll {
    height: auto;
  }
  .specs-section {
    position: relative;
  }
}
/* Keep the complete data grid in view while its parent supplies scroll distance. */
@media (min-width: 761px) and (min-height: 621px) and (max-height: 850px) {
  .specs-section {
    padding-top: 86px;
    padding-bottom: 28px;
  }
  .specs-section .eyebrow {
    margin-bottom: 16px;
  }
  .specs-section .headline {
    font-size: clamp(42px, 7vh, 60px);
  }
  .specs-intro {
    font-size: clamp(23px, 3.8vh, 31px);
    margin-top: 16px;
  }

  .spec-grid {
    margin-top: 26px;
  }
  .spec-item {
    padding: 20px 16px;
  }
  .spec-item strong {
    font-size: clamp(56px, 9vh, 74px);
  }
  .spec-item dd {
    margin-top: 17px;
  }
}

/* Fit each tabletop story in a reading viewport, so paper and its title stay visible together. */
@media (min-width: 761px) {
  .ideas-grid {
    padding-top: 0;
  }
  .idea-card {
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 28px;
  }
  .idea-copy {
    min-height: 0;
    padding-bottom: 18px;
  }
  .idea-copy .eyebrow {
    margin-bottom: 16px;
  }
  .idea-copy .headline {
    font-size: clamp(34px, 3.2vw, 54px);
  }
  .idea-copy .body-copy {
    margin-top: 16px;
  }
  .idea-visual {
    width: min(100%, calc(100svh - 285px));
    aspect-ratio: 1;
  }
  .gift-visual {
    margin-left: auto;
  }
  .craft-visual {
    margin-right: auto;
  }
  .gift-note {
    top: 43%;
  }
  .cut-paper {
    top: 68%;
  }
}

/* Tactile refinement: one continuous surface, with depth only where it explains an action. */
.print-carousel {
  perspective: 1000px;
  perspective-origin: 75% 45%;
}
.print-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.print-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid #74674c15;
  background: linear-gradient(130deg, #fff3, transparent 38%, #63503c06);
  opacity: 0;
  transition: opacity 0.22s;
}
.print-card[data-role="incoming"]::after,
.print-card[data-role="active"]::after {
  opacity: 1;
}
/* The two halves show contiguous coordinates from the SAME panorama, at the same scale. */
.ideas-grid {
  padding: clamp(56px, 7vw, 112px) 4% 60px;
  column-gap: 0;
  row-gap: 28px;
}
.idea-card {
  display: contents;
}
.idea-copy {
  grid-row: 1;
  min-height: 0;
  padding: 0 9% 0 0;
}
.idea-card:nth-child(2) .idea-copy {
  padding: 0 0 0 8%;
}
.idea-visual {
  grid-row: 2;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  overflow: visible;
}
.gift-visual,
.craft-visual {
  margin: 0;
  overflow: hidden;
}
.gift-note {
  left: 54%;
  top: 40%;
  width: 30%;
  transform-origin: 15% 10%;
}
.gift-note span {
  white-space: normal;
}
.gift-ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(
    52.5% 42%,
    56% 37%,
    62% 35.5%,
    69% 36.5%,
    71% 38%,
    69% 41.5%,
    63% 44.5%,
    54% 44.5%
  );
}
.gift-ribbon img {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  max-width: none;
  height: auto;
}
.cut-paper {
  left: 57%;
  top: 76%;
}
.cut-offcut {
  position: absolute;
  left: 80%;
  top: 86%;
  width: 13%;
  height: 7%;
  border-top: 1px solid #c9c0ac;
  transform: rotate(18deg);
}
.wall-hint {
  left: 5%;
  bottom: calc(5% + 66px);
  width: max-content;
  background: #fffdf3;
  color: #555849;
  text-align: left;
  box-shadow: 1px 4px 9px #493e2713;
  transform: rotate(-2deg);
}
.wall-hint::before {
  content: "";
  position: absolute;
  left: 40%;
  top: -5px;
  width: 30px;
  height: 10px;
  background: #c9bd9e66;
  transform: rotate(4deg);
}
.faq-section {
  background: var(--paper);
  padding-bottom: clamp(70px, 9vw, 130px);
}
.faq-item:last-child {
  border-bottom: 0;
}
.faq-item {
  transition: border-color 0.26s;
}
.faq-item:hover {
  border-top-color: #878c83;
}
.faq-item::before {
  transition: transform 0.28s;
}
.faq-answer {
  transition:
    grid-template-rows 0.28s ease,
    opacity 0.28s ease,
    visibility 0.28s;
}
.faq-answer > div {
  clip-path: inset(0 0 100%);
  transform: translateY(4px);
  opacity: 0;
  transition:
    clip-path 0.28s ease,
    transform 0.28s ease,
    opacity 0.26s ease;
}
.faq-item.open .faq-answer > div {
  clip-path: inset(0);
  transform: translateY(0);
  opacity: 1;
}
.buy-section {
  border-top: 0;
  background: var(--paper);
}
.buy-product {
  left: 5%;
  width: 48%;
}
.buy-copy {
  margin-left: 58%;
}
@media (max-width: 760px) {
  .ideas-grid {
    display: block;
    padding: 55px 6% 45px;
  }
  .idea-card {
    display: block;
    padding: 0;
    overflow: visible;
  }
  .idea-card + .idea-card {
    margin-top: 65px;
  }
  .idea-copy,
  .idea-card:nth-child(2) .idea-copy {
    padding: 0 0 24px;
  }
  .idea-visual {
    width: 100%;
    aspect-ratio: 1;
  }
  .idea-copy .headline {
    font-size: 37px;
  }
  .gift-note {
    top: 40%;
    left: 54%;
    width: 30%;
  }
  .cut-paper {
    top: 76%;
  }
  .wall-hint {
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    max-width: 85%;
    padding: 10px 13px;
  }
  .buy-product {
    left: 4%;
    width: 92%;
  }
  .buy-copy {
    margin-left: 7%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .print-carousel {
    perspective: none;
  }
  .faq-answer > div {
    transition: none;
  }
}
.reduce-motion .print-carousel {
  perspective: none;
}
.reduce-motion .faq-answer > div {
  transition: none;
}

/* The offcut casts its shadow outside the clipped paper shape. */
.cut-offcut {
  clip-path: none;
  background: none;
  border: 0;
}
.cut-offcut::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e7e3d7;
  clip-path: polygon(0 0, 100% 8%, 84% 100%, 5% 86%);
  border-top: 1px solid #c9c0ac;
}