/* Each sticky scene reserves separate rows for title, content and progress. */
.showcase .stage,
.craft-scenes .stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(24px, 3vh, 40px);
  height: 100svh;
  min-height: 0;
  padding: 106px 7vw 76px;
  isolation: isolate;
}
.showcase .show-title,
.craft-scenes .craft-heading {
  position: relative;
  inset: auto;
}
.showcase .show-title h2,
.craft-scenes .craft-heading h2 {
  font-size: clamp(36px, 4.6vw, 70px);
  margin: 16px 0 0;
}
.show-viewport {
  --card-inset: clamp(18px, 3.2vh, 44px);
  --caption-height: 78px;
  min-height: 0;
  overflow: hidden;
  margin-right: 0;
  padding-right: 0;
  padding-top: var(--card-inset);
  padding-bottom: var(--card-inset);
}
.showcase .show-track {
  position: relative;
  inset: auto;
  height: 100%;
  align-items: center;
  gap: 3vw;
}
.showcase .product {
  flex: 0 0 32vw;
  width: 32vw;
  min-height: 0;
  height: 100%;
  transform-origin: 50% 50%;
  transform: none;
}
.showcase .product > a {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--caption-height);
  height: 100%;
  max-width: 100%;
  margin-inline: auto;
}
.showcase .product-photo {
  height: auto;
  min-height: 0;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: 0 12px 22px -16px #11182055;
}
.showcase .product figcaption {
  padding-top: 18px;
  font-size: 18px;
}
.showcase .scene-bottom {
  position: relative;
  inset: auto;
  gap: 24px;
  min-height: 30px;
  font-size: 9px;
}
.showcase .scene-bottom > span {
  max-width: 300px;
  font-size: 9px;
  line-height: 1.5;
}
.showcase .scene-bar { margin-top: 10px; }
.showcase .stage { padding-inline: max(7vw, calc((100vw - 1700px) / 2)); }
@media (min-width: 1100px) {
  .showcase .stage { padding-top: 94px; padding-bottom: 72px; }
  .showcase .show-title h2 { font-size: clamp(40px, 4vw, 64px); margin-top: 14px; }
  .showcase .show-title br { display: none; }
  .showcase .show-title em { margin-left: .15em; }
}
.product--shirt img,
.product--bottle img { object-fit: cover; background: #eeeae2; }
.showcase .product img { object-position: 50% 50%; }

/* Long reading intervals surround the two scroll-driven scene changes. */
.craft-scenes { height: 380svh; }
.craft-scenes .craft-frames { position: relative; inset: auto; min-height: 0; }
.craft-scenes .craft-frame {
  position: absolute;
  inset: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 7vw;
  align-items: stretch;
}

.craft-scenes .craft-photo {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  height: 100%;
}
.craft-scenes .craft-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding: 0;
  max-width: 420px;
}
.craft-scenes .craft-copy h3 {
  font-size: clamp(36px, 4.7vw, 72px);
  margin: 14px 0;
}
.craft-scenes .craft-copy p { font-size: 15px; line-height: 1.65; }
.craft-scenes .craft-copy > a { margin-top: 12px; }
.craft-scenes .craft-pagination {
  position: relative;
  inset: auto;
  min-height: 12px;
}

@media (max-width: 700px) {
  .showcase .stage,
  .craft-scenes .stage { padding: 90px 7vw 72px; gap: 24px; }
  .showcase .show-title h2 { font-size: clamp(32px, 7.4vw, 44px); }
  .craft-scenes .craft-heading h2 { font-size: 32px; }
  .showcase .show-title h2,
  .craft-scenes .craft-heading h2 { margin-top: 12px; }
  .showcase .show-track { gap: 7vw; }
  .show-viewport { --caption-height: 70px; }
  .showcase .product { flex-basis: 78vw; width: 78vw; }
  .showcase .product figcaption { font-size: 17px; padding-top: 14px; }
  .showcase .product small { font-size: 10px; }
  .showcase .scene-bottom { font-size: 8px; gap: 16px; }
  .showcase .scene-bottom > span { max-width: 180px; font-size: 8px; }
  .craft-scenes .craft-frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 22px;
  }
  .craft-scenes .craft-photo { grid-column: 1; grid-row: 1; }
  .craft-scenes .craft-copy { grid-column: 1; grid-row: 2; max-width: none; align-self: stretch; }
  .craft-scenes .craft-copy .kicker { font-size: 8px; }
  .craft-scenes .craft-copy h3 { font-size: 32px; margin: 10px 0; }
  .craft-scenes .craft-copy p { max-width: 440px; font-size: 12px; line-height: 1.6; margin: 10px 0; }
  .craft-scenes .craft-copy > a { font-size: 11px; margin-top: 0; padding-bottom: 7px; }
}

@media (max-height: 650px) {
  .showcase .stage,
  .craft-scenes .stage { gap: 20px; }
  .showcase .show-title h2,
  .craft-scenes .craft-heading h2 { font-size: 29px; }
  .craft-scenes .craft-frame { gap: 20px; }
  .craft-scenes .craft-copy h3 { font-size: 29px; margin: 8px 0; }
  .craft-scenes .craft-copy p { font-size: 11px; line-height: 1.6; margin: 8px 0; }
  .craft-scenes .craft-copy .kicker { font-size: 7px; }
}

@media (max-height: 500px) and (min-width: 701px) {
  .show-viewport { --card-inset: 10px; --caption-height: 48px; }
  .showcase .stage,
  .craft-scenes .stage { padding: 88px 7vw 48px; gap: 14px; }
  .showcase .show-title h2,
  .craft-scenes .craft-heading h2 { font-size: 26px; margin-top: 8px; }
  .showcase .show-title br,
  .craft-scenes .craft-heading br { display: none; }
  .showcase .show-title em,
  .craft-scenes .craft-heading em { margin-left: .2em; }
  .showcase .show-title .kicker,
  .craft-scenes .craft-heading .kicker { font-size: 8px; }
  .showcase .product figcaption { font-size: 13px; padding-top: 8px; }
  .showcase .product small { font-size: 9px; margin-top: 4px; }
  .showcase .product .arrow { font-size: 20px; }
  .showcase .scene-bottom,
  .showcase .scene-bottom > span { font-size: 7px; min-height: 18px; }
  .showcase .scene-bar { margin-top: 5px; }
  .craft-scenes .craft-copy h3 { font-size: 28px; }
  .craft-scenes .craft-copy > a { font-size: 10px; margin-top: 0; padding-bottom: 6px; }
}

/* The no-motion layout uses normal document flow and shows every scene. */
.static .showcase .stage,
.static .craft-scenes .stage {
  position: relative;
  height: auto;
  display: block;
  overflow: visible;
  padding: 80px 7vw;
}
.static .showcase .show-title,
.static .craft-scenes .craft-heading { margin-bottom: 36px; }
.static .showcase .show-viewport { overflow: visible; margin: 0; padding: 0; }
.static .showcase .show-track { height: auto; gap: 36px 24px; }
.static .showcase .product { width: auto; height: auto; }
.static .showcase .product > a { display: block; }
.static .showcase .product-photo { height: 320px; }
.static .showcase .product img { object-fit: contain !important; background: #d7d0c4; }
.static .showcase .scene-bottom { margin-top: 40px; }
.static .craft-scenes .craft-frame {
  position: relative;
  height: auto;
  padding: 35px 0;
  gap: 32px;
}
.static .craft-scenes .craft-photo { height: 360px; }
.static .craft-scenes .craft-copy { transform: none !important; }
@media (max-width: 700px) {
  .static .craft-scenes .craft-frame { grid-template-rows: auto auto; }
  .static .craft-scenes .craft-photo { height: 280px; }
}
/* On very short portrait windows there is insufficient room to pin both rows. */
@media (max-height: 500px) {
  .showcase { height: auto; }
  .showcase .stage { position: relative; height: auto; min-height: 0; overflow: hidden; }
  .showcase .show-viewport { overflow-x: auto; margin: 0; padding: 0; }
  .showcase .show-track { height: 350px; transform: none !important; }
  .showcase .product { transform: none !important; height: 100%; }
}
@media (max-width: 700px) and (max-height: 500px) {
  .hero { height: auto; }
  .hero .stage { position: relative; height: auto; min-height: 0; padding: 108px 7vw 138px; }
  .hero .hero-intro { position: relative; inset: auto; opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .hero .hero-intro h1 { font-size: clamp(36px, 8vw, 50px); }
  .hero .hero-detail { display: none; }
  .showcase,
  .craft-scenes { height: auto; }
  .showcase .stage,
  .craft-scenes .stage { position: relative; height: auto; overflow: visible; }
  .showcase .show-viewport { overflow-x: auto; margin: 0; padding: 0; }
  .showcase .show-track { height: 310px; transform: none !important; }
  .showcase .product { transform: none !important; height: 100%; }
  .craft-scenes .craft-frame { position: relative; padding: 30px 0; grid-template-rows: 220px auto; opacity: 1 !important; visibility: visible !important; }
  .craft-scenes .craft-copy { transform: none !important; }
  .craft-scenes .craft-pagination { display: none; }
}

/* The shared text row keeps all three image masks perfectly aligned. */
.craft-reveal .craft-copy-window {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  height: var(--craft-copy-height, 240px);
  overflow: hidden;
  contain: paint;
}
.craft-reveal .craft-copy {
  display: flow-root;
  width: 100%;
  will-change: transform;
}
.craft-reveal .craft-photo { contain: paint; }
.craft-reveal .craft-frame:nth-child(2) .craft-photo img { object-position: 55% 65%; }
@media (max-width: 700px) {
  .craft-reveal .craft-frame { grid-template-rows: minmax(0, 1fr) var(--craft-copy-height, 170px); }
  .craft-reveal .craft-copy-window { grid-column: 1; grid-row: 2; align-self: stretch; max-width: none; }
}
.static .craft-reveal .craft-frame { grid-template-rows: auto; }
.static .craft-reveal .craft-copy-window { height: auto; overflow: visible; contain: none; }
@media (max-width: 700px) {
  .static .craft-reveal .craft-frame { grid-template-rows: auto auto; }
}
@media (max-width: 700px) and (max-height: 500px) {
  .craft-reveal .craft-frame { grid-template-rows: 220px auto; }
  .craft-reveal .craft-copy-window { height: auto; overflow: visible; contain: none; }
}

/* Vector arrows keep the brand styling consistent with iOS emoji fonts. */
.link-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}