/* Layout: a taped carton fills the first screen. Scrolling lifts it away and
   walks you down a warehouse aisle (fixed 3D canvas) past yellow floor signs,
   ending at the loading dock. */
:root {
  --kraft: #cfa974;
  --ink: #1c1712;
  --stamp: #14308f;
  --label: #f7f6f0;
  --sign: #f2c230;
  --night: #17120d;
  --tape-hi: #bb8b45;
  --tape: #a4742f;
  --tape-lo: #93662a;
  --fiber: rgba(60, 38, 15, .06);
  --shadow: rgba(60, 38, 15, .32);

  --font-stencil: "Big Shoulders Stencil", Impact, "Arial Narrow", sans-serif;
  --font-stamp: "Big Shoulders", Impact, "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Segoe UI", Arial, sans-serif;
  --font-data: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --font-barcode: "Libre Barcode 39", var(--font-data);

  --gutter: clamp(16px, 4vw, 48px);
  --tape-h: 2.25rem;
  color-scheme: light;
}

/* Stop phones from enlarging text on their own when turned sideways. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

[hidden] { display: none !important; }

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  background-color: var(--night);
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--tape-hi);
}

.filters { position: absolute; width: 0; height: 0; }

/* The 3D warehouse sits behind everything and stays put while the page scrolls. */
.warehouse {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  opacity: 0;
  transition: opacity .8s ease;
}
.warehouse.is-ready { opacity: 1; }
.vignette {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(10, 7, 4, .5) 100%);
}

/* Printed packing tape: stays at the top so the name is always on screen. */
.tape {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  box-sizing: border-box;
  height: var(--tape-h);
  display: flex;
  align-items: center;
  gap: 3em;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 1em;
  font-family: var(--font-stamp);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .14em;
  color: var(--ink);
  background: linear-gradient(180deg, var(--tape-hi), var(--tape) 45%, var(--tape-lo));
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.tape span { flex: none; }

main { position: relative; z-index: 1; display: block; }

/* The carton: opaque, so it hides the warehouse until it scrolls away. A strip
   of warehouse peeks out underneath to show there is more below. */
.carton {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--tape-h) - 4.5rem);
  min-height: calc(100svh - var(--tape-h) - 4.5rem);
  background-color: var(--kraft);
  /* Paper fibers over faint corrugation flutes. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .09' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .15 0 0 0 0 .06 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23f)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, var(--fiber) 0 1px, transparent 1px 9px);
}
/* The cut edge of the cardboard, with the wavy flute showing. */
.carton::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  background: #a8824f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12'%3E%3Cpath d='M0 10C5.5 10 5.5 2 11 2s5.5 8 11 8' fill='none' stroke='%236f5129' stroke-width='2'/%3E%3C/svg%3E");
  box-shadow: 0 14px 30px rgba(0, 0, 0, .6);
}

.panel {
  flex: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(1.75rem, 5vh, 4rem);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.pitch {
  min-width: 0;
  container-type: inline-size;
  display: grid;
  gap: clamp(1.25rem, 3vh, 2rem);
  justify-items: start;
}

.wordmark {
  margin: 0;
  font-family: var(--font-stencil);
  font-weight: 900;
  font-size: clamp(4.5rem, 12vw, 12rem);
  font-size: min(22.5cqi, 25vh);
  line-height: .86;
  text-transform: uppercase;
  filter: url(#ink-wear);
}
.wordmark span { display: block; }

.stamp {
  margin: 1.8cqi 0 0;
  transform: rotate(-3deg);
  transform-origin: left center;
}
.stamp span {
  display: block;
  margin: .1em;
  padding: .06em .24em .1em;
  font-family: var(--font-stamp);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 7rem);
  font-size: min(14.5cqi, 16vh);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--stamp);
  border: .07em solid currentColor;
  border-radius: .07em;
  outline: .025em solid currentColor;
  outline-offset: .05em;
  filter: url(#ink-wear);
}

.note {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
  line-height: 1.4;
  text-wrap: pretty;
}

/* The shipping label stuck onto the carton. */
.label {
  container-type: inline-size;
  background: var(--label);
  transform: rotate(1.4deg);
  box-shadow: 0 1px 1px var(--shadow), 0 12px 26px var(--shadow);
}
.label dl {
  margin: 0;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
}
.field {
  min-width: 0;
  padding: .85rem 1.1rem;
  border-bottom: 2px solid var(--ink);
}
.field--wide { grid-column: 1 / -1; }
.field--qty { border-right: 2px solid var(--ink); }
.field dt {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.field dd {
  margin: .2rem 0 0;
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
}
.barcode {
  padding: .9rem .75rem .5rem;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-barcode);
  font-size: 2.6rem;
  font-size: 14.5cqi;
  line-height: 1;
}

.carton-foot {
  box-sizing: border-box;
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem 1.5rem;
  padding-block: 0 1.25rem;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.cue {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  font-size: 1.0625rem;
}
.cue svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 3; }
.this-way-up {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .75rem;
}
.this-way-up svg { width: 1.25rem; height: 1.5rem; fill: currentColor; }

/* Warehouse floor signs that pass by as you walk. */
.stop {
  box-sizing: border-box;
  max-width: 84rem;
  min-height: 130vh;
  min-height: 130svh;
  margin-inline: auto;
  display: flex;
  align-items: center;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.stop--right { justify-content: flex-end; }
.stop--dock {
  align-items: flex-end;
  padding-block-end: clamp(1.5rem, 6vh, 3.5rem);
}

.placard {
  box-sizing: border-box;
  width: min(100%, 25rem);
  overflow: hidden;
  border-radius: 3px;
  color: var(--ink);
  background: var(--sign);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 22px 44px rgba(0, 0, 0, .5);
}
.placard::before {
  content: "";
  display: block;
  height: .75rem;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 .75rem, var(--sign) .75rem 1.5rem);
}
.placard-body {
  display: grid;
  gap: .6rem;
  padding: 1.25rem 1.5rem 1.5rem;
}
.placard-tag {
  margin: 0;
  font-family: var(--font-stencil);
  font-weight: 900;
  font-size: 1.375rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.placard h2 {
  margin: 0;
  font-family: var(--font-stamp);
  font-weight: 800;
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.125rem);
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}
.placard-text {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.4;
  text-wrap: pretty;
}

/* A shelf tag that reports where you are in the aisle. */
.locator {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: grid;
  justify-items: center;
  padding: .45rem .75rem .2rem;
  border-radius: 2px;
  color: var(--ink);
  background: var(--label);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
  font-family: var(--font-data);
  font-weight: 600;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
.locator-code {
  font-family: var(--font-barcode);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
}

.foot {
  position: relative;
  z-index: 1;
  padding-block: 1rem;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  color: var(--kraft);
  background: var(--night);
  font-size: .875rem;
}
.foot small { font-size: inherit; }

@media (max-width: 60rem) {
  .panel { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .label { width: 100%; max-width: 22rem; }
  .locator {
    top: calc(var(--tape-h) + .6rem + env(safe-area-inset-top, 0px));
    bottom: auto;
  }
}

/* Small phones: a one-line location tag so it doesn't crowd the signs. */
@media (max-width: 30rem) {
  .locator { padding: .3rem .6rem; font-size: .75rem; }
  .locator-code { display: none; }
}

/* Phones on their side: the carton goes back to side-by-side and everything is
   sized to the short screen, so the name doesn't fill more than the view. */
@media (orientation: landscape) and (max-height: 520px) {
  .panel {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem);
    gap: 1.5rem;
    padding-block: 1rem;
  }
  .pitch { gap: .75rem; }
  .wordmark { font-size: min(22.5cqi, 21vh); }
  .stamp span { font-size: min(14.5cqi, 13.5vh); }
  .note { font-size: 1rem; }
  .label { max-width: 17rem; }
  .field { padding: .5rem .8rem; }
  .field dd { font-size: 1rem; }
  .carton-foot { padding-block-end: .75rem; }
  .placard-body { gap: .4rem; padding: 1rem 1.25rem 1.1rem; }
  .placard h2 { font-size: 2rem; }
  .placard-text { font-size: 1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .stamp { animation: thump .34s cubic-bezier(.2, .8, .2, 1) .25s backwards; }
  .cue svg { animation: nudge 1.6s ease-in-out infinite; }
  @keyframes thump {
    from { opacity: 0; transform: rotate(-8deg) scale(1.5); }
    70% { opacity: 1; transform: rotate(-3deg) scale(.985); }
    to { transform: rotate(-3deg) scale(1); }
  }
  @keyframes nudge {
    0%, 100% { transform: translateY(-2px); }
    50% { transform: translateY(3px); }
  }
}