:root {
  /* Design typography tokens: Space Grotesk** Groteskk for navigation; IBM Plex Sans Condensed** Condensedd for botanical notes. Uniqueness token: Interprets “trade” as a clandestine professional flower/specimen exchange. */
  --deep-dock: #07111F;
  --blue-steel: #0E2438;
  --gunmetal: #6F7D8C;
  --silver: #C7D0DA;
  --acid: #B8FF3C;
  --orchid: #6D5BFF;
  --blush: #F2B6C8;
  --ink: #020408;
  --display: "Archivo Black", Impact, Haettenschweiler, "Arial Black", sans-serif;
  --grotesk: "Space Grotesk", Inter, system-ui, sans-serif;
  --condensed: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  color: var(--silver);
  background: var(--deep-dock);
  font-family: var(--grotesk);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    repeating-linear-gradient(90deg, rgba(199, 208, 218, .035) 0 1px, transparent 1px 7px),
    linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,.055) 41%, transparent 46% 100%);
  mix-blend-mode: screen;
}

.trade-tag {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 100;
  width: min(390px, calc(100vw - 36px));
  padding: 10px;
  border: 3px solid var(--ink);
  color: var(--ink);
  background: linear-gradient(135deg, var(--silver), var(--gunmetal));
  box-shadow: 8px 8px 0 var(--ink), inset 0 0 0 2px rgba(255,255,255,.22);
  transform: rotate(.6deg);
}

.trade-tag::before,
.trade-tag::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--ink);
  border-radius: 50%;
  top: 8px;
}

.trade-tag::before { left: 8px; }
.trade-tag::after { right: 8px; }

.trade-tag__brand {
  padding-left: 18px;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: lowercase;
}

.trade-tag__marks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 9px;
}

.trade-tag__mark {
  display: block;
  padding: 7px 6px;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: rgba(7, 17, 31, .1);
  font-family: var(--condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .13em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.trade-tag__mark.is-active {
  background: var(--acid);
  box-shadow: inset 0 -5px 0 rgba(2, 4, 8, .18);
}

.dossier { position: relative; }

.slip {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  border-bottom: 8px solid var(--ink);
  background: var(--deep-dock);
  box-shadow: 0 28px 0 var(--ink);
  isolation: isolate;
}

.slip::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 4px solid var(--ink);
  pointer-events: none;
  z-index: 7;
}

.ledger-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent calc(16.666% - 1px), rgba(111, 125, 140, .4) calc(16.666% - 1px) calc(16.666% + 1px), transparent calc(16.666% + 1px)),
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(111, 125, 140, .18) 54px 56px),
    radial-gradient(circle at 22% 28%, rgba(109, 91, 255, .22), transparent 28%),
    linear-gradient(145deg, var(--deep-dock), var(--blue-steel));
  background-size: 16.666% 100%, 100% 56px, auto, auto;
}

.metal-tag,
.stamp,
.card-label,
.contract-label {
  border: 3px solid var(--ink);
  color: var(--ink);
  background: var(--silver);
  box-shadow: 6px 6px 0 var(--ink);
  font-family: var(--condensed);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.slip__code {
  position: absolute;
  top: 26px;
  left: 28px;
  z-index: 10;
  padding: 8px 13px;
  font-size: 15px;
}

.wordmark {
  position: absolute;
  left: -3vw;
  bottom: 6vh;
  z-index: 5;
  margin: 0;
  color: var(--silver);
  font-family: var(--display);
  font-size: clamp(82px, 18vw, 270px);
  line-height: .72;
  letter-spacing: -.09em;
  text-transform: lowercase;
  text-shadow: 10px 10px 0 var(--ink), -2px -2px 0 var(--gunmetal);
}

.shutter {
  position: absolute;
  left: 0;
  width: 100%;
  height: 31vh;
  z-index: 4;
  border: 5px solid var(--ink);
  background: linear-gradient(100deg, var(--ink), var(--blue-steel) 42%, var(--gunmetal) 44%, var(--blue-steel) 48%, var(--ink));
  box-shadow: 0 14px 0 var(--ink);
  transition: transform 700ms steps(5, end);
}

.shutter--top { top: 18vh; transform: translateX(-8vw); }
.shutter--bottom { top: 49vh; transform: translateX(11vw); }
.slip--arrival.is-visible .shutter--top { transform: translateX(-20vw); }
.slip--arrival.is-visible .shutter--bottom { transform: translateX(24vw); }

.arrival-flower {
  position: absolute;
  left: 44%;
  top: 26%;
  z-index: 3;
  width: 260px;
  height: 340px;
  filter: drop-shadow(0 0 36px rgba(242, 182, 200, .45));
}

.specimen__petal,
.pressed-flower i,
.seal__petals i {
  position: absolute;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.65), transparent 20%), var(--blush);
  border: 3px solid var(--ink);
  opacity: .86;
}

.specimen__petal { width: 92px; height: 154px; border-radius: 70% 20% 65% 20%; transform-origin: 50% 100%; }
.specimen__petal--one { left: 80px; top: 12px; transform: rotate(-24deg); }
.specimen__petal--two { left: 116px; top: 30px; transform: rotate(21deg); }
.specimen__petal--three { left: 74px; top: 98px; transform: rotate(96deg); background-color: rgba(109, 91, 255, .72); }
.specimen__stem { position: absolute; left: 130px; top: 145px; width: 8px; height: 190px; background: var(--acid); border: 3px solid var(--ink); transform: rotate(11deg); }

.dock-caption { position: absolute; left: 8vw; top: 32vh; z-index: 8; padding: 14px 18px; font-size: 18px; transform: rotate(-2deg); }
.side-note, .valuation-note, .contract-note {
  position: absolute;
  max-width: 410px;
  color: var(--silver);
  font-family: var(--grotesk);
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.16;
}
.side-note { right: 8vw; bottom: 14vh; }

.slip--table { background: var(--silver); color: var(--ink); }
.ledger-grid--mat { background-color: var(--silver); background-image: repeating-linear-gradient(90deg, transparent 0 56px, rgba(2,4,8,.28) 56px 59px), repeating-linear-gradient(0deg, transparent 0 56px, rgba(2,4,8,.2) 56px 59px), radial-gradient(circle at 70% 28%, rgba(184,255,60,.35), transparent 23%); }

.section-title {
  position: absolute;
  left: 6vw;
  top: 12vh;
  z-index: 5;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(54px, 10vw, 158px);
  line-height: .82;
  letter-spacing: -.065em;
  text-transform: uppercase;
  text-shadow: 7px 7px 0 var(--gunmetal);
}

.ruler { position: absolute; z-index: 3; background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 18px), var(--gunmetal); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.ruler--horizontal { left: 9vw; right: 8vw; top: 42vh; height: 35px; }
.ruler--vertical { right: 16vw; top: 17vh; bottom: 12vh; width: 35px; background: repeating-linear-gradient(0deg, var(--ink) 0 3px, transparent 3px 18px), var(--gunmetal); }

.specimen-card { position: absolute; z-index: 4; border: 5px solid var(--ink); background: rgba(7,17,31,.92); box-shadow: 12px 12px 0 var(--ink); }
.specimen-card--petal { left: 15vw; top: 48vh; width: 310px; height: 300px; transform: rotate(-3deg); }
.specimen-card--root { right: 20vw; top: 30vh; width: 310px; height: 260px; transform: rotate(2deg); }
.card-label { display: inline-block; padding: 7px 10px; margin: -4px 0 0 -4px; font-size: 14px; background: var(--acid); }

.pressed-flower { position: absolute; inset: 42px 20px 20px; }
.pressed-flower i { width: 86px; height: 132px; left: 100px; top: 22px; border-radius: 80% 12% 70% 18%; transform-origin: 45% 90%; }
.pressed-flower i:nth-child(1) { transform: rotate(-54deg); }
.pressed-flower i:nth-child(2) { transform: rotate(-12deg); background-color: var(--orchid); }
.pressed-flower i:nth-child(3) { transform: rotate(31deg); }
.pressed-flower i:nth-child(4) { transform: rotate(76deg); background-color: rgba(184,255,60,.78); }
.pressed-flower span { position: absolute; left: 139px; top: 118px; width: 8px; height: 110px; background: var(--acid); border: 3px solid var(--ink); }

.root-diagram { position: absolute; inset: 40px 20px 20px; width: calc(100% - 40px); height: calc(100% - 60px); }
.root-diagram path { fill: none; stroke: var(--blush); stroke-width: 8; stroke-linecap: square; stroke-dasharray: 360; stroke-dashoffset: 360; transition: stroke-dashoffset 900ms steps(6, end); }
.slip--table.is-visible .root-diagram path { stroke-dashoffset: 0; }

.callout { position: absolute; z-index: 6; width: 285px; padding: 14px; border: 4px solid var(--ink); background: var(--silver); box-shadow: 9px 9px 0 var(--ink); font-family: var(--condensed); text-transform: uppercase; }
.callout b { display: block; font-family: var(--display); font-size: 22px; line-height: .9; }
.callout span { display: block; margin-top: 8px; font-size: 14px; letter-spacing: .07em; }
.callout--one { left: 46vw; top: 58vh; }
.callout--two { left: 7vw; top: 27vh; }
.annotation-line { position: absolute; z-index: 5; height: 5px; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform 650ms steps(4, end); }
.annotation-line--one { left: 42vw; top: 64vh; width: 210px; rotate: -18deg; }
.annotation-line--two { left: 23vw; top: 34vh; width: 255px; rotate: 21deg; }
.is-visible .annotation-line { transform: scaleX(1); }

.slip--valuation { background: var(--blue-steel); }
.section-title--stamp { color: var(--silver); text-shadow: 8px 8px 0 var(--ink); }
.counter-board { position: absolute; left: 7vw; right: 8vw; top: 34vh; z-index: 6; display: grid; gap: 14px; }
.counter-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, 260px); align-items: center; border: 5px solid var(--ink); background: var(--silver); color: var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.counter-row span { padding: 18px 22px; font-family: var(--condensed); font-size: clamp(20px, 3vw, 42px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.counter { display: block; padding: 8px 20px; border-left: 5px solid var(--ink); background: var(--acid); font-family: var(--display); font-size: clamp(56px, 9vw, 108px); line-height: .9; text-align: right; letter-spacing: -.08em; box-shadow: inset 0 -12px 0 rgba(2,4,8,.2); }
.counter-row.is-landed { transform: translate(-4px, -4px); box-shadow: 15px 15px 0 var(--ink); }
.stamp-wheel { position: absolute; right: 8vw; bottom: 10vh; z-index: 7; padding: 20px 24px; background: var(--blush); font-size: 24px; transform: rotate(4deg) scale(.92); transition: transform 260ms steps(2, end); }
.stamp-wheel.is-hit { transform: rotate(-2deg) scale(1.04); background: var(--acid); }
.valuation-note { right: 11vw; top: 21vh; padding: 16px; border-left: 7px solid var(--orchid); background: rgba(2,4,8,.42); }
.pollen-field span { position: absolute; z-index: 4; width: 10px; height: 10px; background: var(--acid); border: 2px solid var(--ink); border-radius: 50%; transition: transform 450ms steps(4, end); }
.pollen-field span:nth-child(1) { left: 58vw; top: 39vh; }
.pollen-field span:nth-child(2) { left: 64vw; top: 53vh; }
.pollen-field span:nth-child(3) { left: 72vw; top: 44vh; }
.pollen-field span:nth-child(4) { left: 82vw; top: 61vh; }
.pollen-field span:nth-child(5) { left: 51vw; top: 70vh; }
.pollen-field.is-scattered span:nth-child(1) { transform: translate(-18px, 9px); }
.pollen-field.is-scattered span:nth-child(2) { transform: translate(15px, -16px); }
.pollen-field.is-scattered span:nth-child(3) { transform: translate(25px, 11px); }
.pollen-field.is-scattered span:nth-child(4) { transform: translate(-20px, -20px); }
.pollen-field.is-scattered span:nth-child(5) { transform: translate(12px, 23px); }

.slip--contract { background: var(--deep-dock); }
.ledger-grid--contract { background-image: linear-gradient(90deg, transparent calc(16.666% - 2px), rgba(199,208,218,.24) calc(16.666% - 2px) calc(16.666% + 2px), transparent calc(16.666% + 2px)), radial-gradient(circle at 50% 50%, rgba(242,182,200,.18), transparent 28%), linear-gradient(145deg, var(--deep-dock), var(--ink)); }
.contract-assembly { position: absolute; inset: 27vh 7vw 8vh; z-index: 5; border: 6px solid var(--ink); background: linear-gradient(135deg, var(--silver), var(--gunmetal)); box-shadow: 18px 18px 0 var(--ink); overflow: hidden; }
.barcode { position: absolute; left: 0; top: 0; bottom: 0; width: 23%; display: flex; gap: 8px; padding: 24px; background: var(--silver); border-right: 6px solid var(--ink); }
.barcode span { flex: 1; background: var(--ink); transform-origin: top; transform: scaleY(.05); transition: transform 900ms steps(8, end); }
.barcode span:nth-child(2), .barcode span:nth-child(5) { flex: .45; }
.barcode span:nth-child(3) { flex: 1.7; }
.barcode.is-scanned span { transform: scaleY(1); }
.seal { position: absolute; left: 50%; top: 50%; width: min(43vw, 440px); height: min(43vw, 440px); transform: translate(-50%, -50%) rotate(-8deg); border: 7px solid var(--ink); border-radius: 50%; background: var(--blush); box-shadow: 13px 13px 0 var(--ink), inset 0 0 0 18px var(--orchid), inset 0 0 0 27px var(--ink); transition: transform 500ms steps(5, end); }
.slip--contract.is-visible .seal { transform: translate(-50%, -50%) rotate(0deg); }
.seal__core { position: absolute; inset: 34%; display: grid; place-items: center; border: 5px solid var(--ink); border-radius: 50%; background: var(--acid); color: var(--ink); font-family: var(--display); font-size: clamp(18px, 2.8vw, 34px); line-height: .82; text-align: center; }
.seal__petals i { left: 50%; top: 50%; width: 29%; height: 45%; border-radius: 70% 20% 70% 20%; transform-origin: 50% 88%; }
.seal__petals i:nth-child(1) { transform: translate(-50%, -88%) rotate(0deg); }
.seal__petals i:nth-child(2) { transform: translate(-50%, -88%) rotate(60deg); background-color: var(--silver); }
.seal__petals i:nth-child(3) { transform: translate(-50%, -88%) rotate(120deg); }
.seal__petals i:nth-child(4) { transform: translate(-50%, -88%) rotate(180deg); background-color: var(--orchid); }
.seal__petals i:nth-child(5) { transform: translate(-50%, -88%) rotate(240deg); }
.seal__petals i:nth-child(6) { transform: translate(-50%, -88%) rotate(300deg); background-color: var(--silver); }
.contract-label { position: absolute; z-index: 3; padding: 12px; max-width: 260px; font-size: 16px; }
.contract-label--left { left: 27%; top: 12%; transform: rotate(-2deg); background: var(--acid); }
.contract-label--right { right: 4%; bottom: 16%; transform: rotate(2deg); }
.wax { position: absolute; right: 8%; top: 14%; padding: 18px; background: var(--blush); font-size: 20px; transform: rotate(9deg); }
.contract-note { left: 31%; bottom: 7%; z-index: 6; color: var(--ink); background: rgba(199,208,218,.7); padding: 12px; border: 4px solid var(--ink); }

@media (max-width: 760px) {
  .trade-tag { top: 10px; right: 10px; width: calc(100vw - 20px); }
  .slip__code { top: 112px; left: 20px; max-width: calc(100vw - 40px); }
  .wordmark { bottom: 14vh; font-size: 23vw; }
  .side-note, .valuation-note, .contract-note { left: 24px; right: 24px; max-width: none; font-size: 17px; }
  .side-note { bottom: 5vh; }
  .section-title { top: 17vh; font-size: 16vw; }
  .specimen-card--petal { left: 7vw; top: 50vh; width: 250px; height: 250px; }
  .specimen-card--root { right: 6vw; top: 31vh; width: 240px; height: 210px; }
  .callout { width: 210px; }
  .callout--one { left: 31vw; top: 72vh; }
  .callout--two { left: 6vw; top: 42vh; }
  .counter-board { top: 36vh; left: 24px; right: 24px; }
  .counter-row { grid-template-columns: 1fr 110px; }
  .counter-row span { font-size: 16px; padding: 12px; }
  .counter { font-size: 48px; padding: 8px 10px; }
  .stamp-wheel { right: 24px; bottom: 6vh; font-size: 17px; }
  .contract-assembly { inset: 30vh 20px 7vh; }
  .barcode { width: 22%; padding: 12px; gap: 4px; }
  .seal { width: 260px; height: 260px; }
  .contract-label--left { left: 23%; top: 8%; }
  .contract-label--right { right: 3%; bottom: 6%; }
  .wax { right: 5%; top: 28%; }
}