/* Self-hosted webfonts: the print on the packaging. Everything printed on a pack
   (wordmarks, kraft label, address) sets Barlow Condensed, a DIN-descendant made
   for industrial packaging; everything machine-printed (price, serials, shelf
   label) sets IBM Plex Mono. The page around the shelf stays on the native OS
   stack. Latin subsets, OFL — see THIRD_PARTY_NOTICES.md. */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/barlow-condensed-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-700.woff2") format("woff2");
}

:root {
  /* One shelf, lit one way. The packs are photographed objects on a studio wall and
     the card faces are printed stock — there is no second set of art for a dark room,
     so the page does not offer one and does not let the UA improvise one either:
     `light` alone keeps form controls, scrollbars and the sheet light when the OS
     asks for dark. */
  color-scheme: light;
  --wall: #f5f5f7;
  --wall-deep: #f5f5f7;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  /* The two text colours as bare channels, the way --shadow-rgb is carried below.
     Everything that wants ink at some fraction — ghost print, pegboard holes, hair
     rules — reaches for these. It was color-mix() before, which buys nothing here
     (mixing an opaque colour into transparent is the alpha, exactly) and costs the
     declaration outright on an engine that cannot resolve it: an unresolved `fill`
     falls back to its initial value, and for fill that is solid black. */
  --ink-rgb: 29 29 31;
  --muted-rgb: 110 110 115;
  --button: #171a1b;
  --button-ink: #f5f5ef;
  /* The pack is a physical object: one size drives it. Its width sets a container,
     and every part inside is a fraction of that width (cqw), so the whole pack —
     hooks, print, sticker, card, QR — scales as one piece instead of thirty
     hand-tuned pixel values. Change the range, not the parts. */
  --pack-min: 300px;
  --pack-max: 360px;
  --card-width: 87%;
  --price-bg: #f1d98a;
  --price-ink: #33270f;
  --sheet: #ffffff;
  --sheet-line: rgba(29, 29, 31, 0.12);
  --sheet-soft: rgba(29, 29, 31, 0.045);
  --section-line: rgba(29, 29, 31, 0.16);
  --row-line: rgba(29, 29, 31, 0.09);
  --stamp: #c53a2a;
  /* DNBar's orange — the one warm brand note on the page, spent only on the
     link that leaves for their warehouse. */
  --dnbar: #ee7d1b;
  --dnbar-rgb: 238 125 27;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial,
    sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial,
    sans-serif;
  --font-condensed: "Barlow Condensed", "Avenir Next Condensed", Bahnschrift, "Roboto Condensed",
    "Arial Narrow", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", Menlo,
    monospace;
  --shadow-rgb: 29 29 31;
  --kraft-face: #262725;
  --kraft-edge: #10110f;
  --kraft-ink: #e6e2da;
  --hook-lo: #747a7b;
  --hook-mid: #999f9f;
  --hook-hi: #c8ccca;
  --hook-outline: rgba(53, 59, 60, 0.3);
  --hook-cast: rgba(29, 34, 35, 0.2);
  --hook-metal: linear-gradient(
    90deg,
    var(--hook-lo) 0%,
    var(--hook-mid) 31%,
    var(--hook-hi) 49%,
    var(--hook-mid) 68%,
    var(--hook-lo) 100%
  );
  --focus: #0e5fbd;
  /* One image, not two — the same call as the pack header's fiber pattern (see
     createHeaderSvg in pack.js). type() inside image-set() is younger than WebP
     itself: Safari 16 and Firefox 112 read the whole function as invalid and take
     the PNG line instead, so a 710 KB plate arrives for a grain that prints at 4.5%
     over the card. WebP has been in every engine since 2020, and an engine without
     it is far below this page's floor — it loses the grain and keeps the card. */
  --paper-material: url("./img/materials/webp/cardboard-fiber.webp?v=2");
  font-family: var(--font-body);
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 280px;
  min-height: 100%;
  background: var(--wall);
}

body {
  /* dvh landed a couple of years after the rest of what this page needs (Chrome 108,
     Safari 15.4). vh first, so the older engine gets a full screen rather than none. */
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background-color: var(--wall);
  background-image: none;
  background-attachment: scroll;
}

body::before {
  content: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.display {
  width: min(100%, 1540px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 68px) clamp(18px, 4.2vw, 56px) clamp(36px, 3.5vw, 56px);
}

.display-header {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-bottom: clamp(58px, 8vw, 104px);
  text-align: center;
}

.brand-heading {
  margin: 0;
  line-height: 1;
}

.brand {
  display: inline-flex;
  color: var(--ink);
  border-radius: 4px;
  text-decoration: none;
}

.brand:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
}

.brand-mark {
  display: block;
  width: auto;
  height: clamp(30px, 3.2vw, 42px);
  fill: currentColor;
}

/* The Q&A and crawlable inventory form one quiet editorial ledger. Both sections
   use the same intro rail and content column instead of stretching several small
   text blocks across the full display wall. */
.faq,
.seo {
  width: min(100%, 1280px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  column-gap: clamp(44px, 5vw, 68px);
  align-items: start;
  padding-top: clamp(28px, 3vw, 38px);
  border-top: 1px solid var(--section-line);
}

.faq {
  margin-top: clamp(56px, 7vw, 96px);
}

.seo {
  margin-top: clamp(48px, 5vw, 72px);
}

.faq__eyebrow,
.seo__pre,
.seo__eyebrow {
  margin: 0 0 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.faq__title,
.seo h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--font-condensed);
  font-size: clamp(29px, 2.5vw, 35px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 0.98;
  text-wrap: balance;
}

.faq__lead,
.seo__note > p:last-child {
  max-width: 40ch;
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.58;
  text-wrap: pretty;
}

/* Two independent FAQ columns keep an opened answer from moving the opposite
   side. One gap value governs the whole rhythm: the space between groups within a
   column and the space where the columns stack into one on a narrow screen are the
   same, so a category never crowds the one above it. */
.faq__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(30px, 3.5vw, 48px);
  row-gap: clamp(28px, 3vw, 38px);
}

.faq__col {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 38px);
  min-width: 0;
}

/* No rules between rows: structure comes from the category label and the whitespace
   under it, not a stack of hairlines. */
.faq__group {
  display: flex;
  flex-direction: column;
}

.faq__group-label {
  margin: 0 0 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.faq__item summary {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  margin-inline: -10px;
  padding: 10px;
  color: var(--ink);
  border-radius: 7px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The chevron sits in a fixed optical zone, so wrapped questions do not move it. */
.faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin: -4px 4px 0 0;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition:
    border-color 160ms ease,
    transform 180ms ease;
}

.faq__item[open] summary::after {
  border-color: var(--ink);
  transform: translateY(4px) rotate(-135deg);
}

.faq__answer {
  padding: 0 0 18px;
}

.faq__answer p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  text-wrap: pretty;
}

.faq__answer a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sheet-line);
  transition: border-color 160ms ease;
}

.faq__answer a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.seo__stock {
  min-width: 0;
}

.seo__eyebrow {
  margin-bottom: 13px;
}

/* A row-major grid reads more naturally than newspaper columns and keeps the
   shelf numbers tied to their names as the viewport changes. */
.seo-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px clamp(10px, 1.4vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-list li {
  position: relative;
  display: grid;
  grid-template-columns: 5ch minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  transition:
    background-color 160ms ease,
    transform 120ms ease;
}

/* The number stamped on the pack's spine stays available without competing with
   the domain; it gains contrast only when the row is being inspected. */
.seo-list__no {
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: 0.38;
  transition: opacity 160ms ease;
}

.seo-list a {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform 160ms ease;
}

/* Extend the link over its ledger row without changing generated SEO markup. */
.seo-list a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
}

.seo-list li:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.seo-list a:focus-visible {
  outline: none;
}

.seo-list li:active {
  transform: translateY(1px);
}

@media (hover: hover) {
  .faq__item summary:hover,
  .faq__item[open] summary:hover,
  .seo-list li:hover {
    background: var(--sheet-soft);
  }

  .faq__item summary:hover::after {
    border-color: var(--ink);
  }

  .faq__answer a:hover {
    border-bottom-color: var(--ink);
  }

  .seo-list li:hover .seo-list__no {
    opacity: 0.68;
  }

  .seo-list li:hover a {
    transform: translateX(2px);
  }
}

@media (max-width: 1180px) {
  .seo-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .faq,
  .seo {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 30px;
  }

  .faq__lead,
  .seo__note > p:last-child {
    max-width: 58ch;
  }

  .seo-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .faq,
  .seo {
    row-gap: 26px;
    padding-top: 26px;
  }

  .faq__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq__item summary {
    min-height: 50px;
    font-size: 15.5px;
  }

  .seo-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
  }

  .seo-list__no {
    display: none;
  }

  .seo-list li {
    grid-template-columns: minmax(0, 1fr);
    min-height: 44px;
    font-size: 11.5px;
  }
}

@media (max-width: 360px) {
  .seo-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-list li {
    min-height: 46px;
    font-size: 12px;
  }
}

/* The counter at the end of the shop: the partner's mark on the left, the shop's
   own name in the middle, the studio's credit in the right corner. The middle
   column is the anchor, so the name stays centered on the page even though the two
   marks are different widths. */
.display-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-top: clamp(64px, 8vw, 112px);
}

.footer-site {
  grid-column: 2;
  justify-self: center;
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  transition: color 160ms ease;
}

.footer-site:hover {
  color: var(--ink);
}

.footer-site:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Design credit. Quiet in the corner until you reach for it: the mark spins and
   the credit slides out from behind it. The pill is set in the shelf's own label
   voice (mono, letterspaced caps), not the studio's. */
.footer-credit {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: var(--muted);
  border-radius: 4px;
  opacity: 0.75;
  text-decoration: none;
  transform: translateY(-50%);
  transition:
    color 200ms ease,
    opacity 200ms ease;
}

.footer-credit__mark {
  display: block;
  width: 26px;
  height: 26px;
  fill: currentColor;
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.footer-credit__tip {
  position: absolute;
  top: 50%;
  right: calc(100% + 2px);
  padding: 6px 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--sheet-soft);
  border: 1px solid var(--sheet-line);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -50%);
  transition:
    opacity 280ms ease,
    transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.footer-credit__tip b {
  color: var(--ink);
  font-weight: 600;
}

.footer-credit:hover,
.footer-credit:focus-visible {
  color: var(--ink);
  opacity: 1;
}

.footer-credit:hover .footer-credit__tip,
.footer-credit:focus-visible .footer-credit__tip {
  opacity: 1;
  transform: translate(0, -50%);
}

.footer-credit:hover .footer-credit__mark,
.footer-credit:focus-visible .footer-credit__mark {
  transform: rotate(450deg);
}

.footer-credit:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.partner {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  padding: 8px;
  border-radius: 6px;
}

.partner:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.partner__logo {
  display: block;
  width: auto;
  height: 34px;
}

.kicker {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
}

.header-domain-icon {
  position: absolute;
  top: calc(100% - 12px);
  left: 50%;
  display: block;
  width: 72px;
  height: 72px;
  opacity: 0.9;
  pointer-events: none;
  transform: translateX(-50%);
}

.rack-section,
.rack {
  position: relative;
}

/* auto-fit fits as many packs as the room allows and lets each one breathe between
   --pack-min and --pack-max; no column-count breakpoints to keep in sync. */
.blister-grid {
  display: grid;
  /* The tracks flex (1fr): auto-fit counts columns by a track's max size, so a fixed
     max would fit fewer, wider-than-needed columns. The pack itself is what carries
     the cap — see .peg-cell max-width. */
  grid-template-columns: repeat(auto-fit, minmax(min(var(--pack-min), 100%), 1fr));
  gap: clamp(58px, 6vw, 86px) clamp(20px, 2.2vw, 30px);
  justify-content: center;
  justify-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.empty-state {
  grid-column: 1 / -1;
  min-height: 240px;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.empty-state code {
  color: var(--ink);
}

.peg-cell {
  container-type: inline-size;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: var(--pack-max);
  isolation: isolate;
}

/* The depth a lifted pack travels through. The vanishing point sits above the middle
   of the pack, at the hook: the pack comes toward you off the peg, so the peg is where
   it is being lifted from.

   Behind the same test script.js puts on the lift itself (see handlePackEnter — a
   pack is only taken off its hook by a pointer that can hover and can point
   precisely). Nothing on a phone ever lifts, so on a phone this bought nothing and
   cost a 3D rendering context per cell — forty of them on a shelf, kept by the
   compositor for a movement that cannot happen there. The cell is already
   position: relative and already isolated, so it stays the containing block and the
   stacking context either way: dropping perspective changes what the engine keeps,
   not a pixel of what it draws. */
@media (any-hover: hover) and (any-pointer: fine) {
  .peg-cell {
    perspective: 1100px;
    perspective-origin: 50% 22%;
  }
}

/* An element cannot query its own container, so the pack's proportions live on its
   children. Ratios of the pack's width — the old 300px design, expressed once. */
.peg-cell > * {
  --header-height: 28cqw;
  --pivot-y: 3.883cqw;
  --hook-offset: 8.333cqw;
  --pouch-seal-depth: 1.333cqw;
  --card-floor-gap: 0.667cqw;
}

/* The hooks are pinned to the cell; the pack hangs below them. */
.pack-enter {
  margin-top: var(--hook-offset);
}

/* The wall while stock is on its way: real hooks, and under each one the
   faint mark a hanging pack leaves on a shop wall. Geometry matches the real
   pack exactly, so arriving packs land on the very same hooks. */
.ghost-cell {
  pointer-events: none;
}

.ghost-pack {
  margin-top: var(--hook-offset);
  animation: ghost-breathe 1900ms ease-in-out var(--ghost-delay, 0ms) infinite alternate backwards;
}

.ghost-pack__header {
  display: block;
  width: 100%;
  height: var(--header-height);
  fill: rgb(var(--ink-rgb) / 0.08);
}

.ghost-pack__pouch {
  aspect-ratio: 0.8;
  margin-top: 2px;
  background: rgb(var(--ink-rgb) / 0.045);
  border-radius: 2px 3px 10px 8px / 2px 3px 15px 13px;
}

@keyframes ghost-breathe {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

.hook {
  position: absolute;
  left: 50%;
  pointer-events: none;
}

.hook-rear {
  top: 0;
  z-index: 0;
  width: 6cqw;
  height: calc(var(--hook-offset) + var(--pivot-y) + 1.333cqw);
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 0.65px var(--hook-cast));
}

.hook-mount {
  position: absolute;
  top: 0.333cqw;
  left: 50%;
  width: 3.333cqw;
  height: 2.667cqw;
  border: 0.5px solid var(--hook-outline);
  border-radius: 50%;
  background-color: var(--hook-mid);
  background-image: var(--hook-metal);
  box-shadow: inset 0.5px 0.5px 0.5px rgb(255 255 255 / 0.2);
  transform: translateX(-50%);
}

.hook-mount::after {
  content: none;
}

.hook-wire {
  position: absolute;
  top: 2.333cqw;
  left: 50%;
  width: 1.333cqw;
  height: calc(100% - 2.667cqw);
  border: 0.5px solid var(--hook-outline);
  border-radius: 2px;
  background-color: var(--hook-mid);
  background-image: var(--hook-metal);
  box-shadow: none;
  transform: translateX(-50%);
}

.hook-front {
  top: calc(var(--hook-offset) + var(--pivot-y) - 1.667cqw);
  z-index: 8;
  width: 4cqw;
  height: 3.333cqw;
  border: 0.5px solid var(--hook-outline);
  border-radius: 50%;
  background-color: var(--hook-mid);
  background-image: var(--hook-metal);
  box-shadow: 1px 1.5px 1px var(--hook-cast);
  transform: translateX(-50%);
}

.hook-front::before {
  position: absolute;
  top: 1cqw;
  right: 2.667cqw;
  width: 4.667cqw;
  height: 1.333cqw;
  border: 0;
  border-radius: 2px 0 0 2px;
  background-color: var(--hook-mid);
  background-image: var(--hook-metal);
  box-shadow: 0 1px 0.6px var(--hook-cast);
  content: "";
}

.hook-front::after {
  content: none;
}

/* Reaching for a pack pulls it toward you by the bottom edge. The pack is still on
   its peg, so it turns about the hook: the foot swings out of the wall and into the
   room while the hang hole stays put. A little lift comes with it, the way it does
   when you tug a pack forward on a shelf, and the shadow deepens as the foot leaves
   the wall. It also straightens as you take hold of it — see script.js. */
.pack-enter {
  position: relative;
  z-index: 2;
  transform-origin: 50% var(--pivot-y);
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.peg-cell.is-lifted {
  /* Its foot is out in front of the wall, so it passes over its neighbours. */
  z-index: 3;
}

.peg-cell.is-lifted .pack-enter {
  /* Positive rotateX brings the foot toward the viewer and lets the head fall back —
     which is the way round a pack tips when you pull it off a shelf by its bottom. */
  transform: translate3d(0, -1.4cqw, 0) rotateX(9deg);
}

.peg-cell.is-lifted .plastic-pouch {
  box-shadow:
    0 2px 2px rgb(var(--shadow-rgb) / 0.07),
    4px 12px 20px rgb(var(--shadow-rgb) / 0.13),
    8px 26px 44px rgb(var(--shadow-rgb) / 0.1),
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 -1px 0 rgb(57 69 73 / 0.045);
}

.plastic-pouch {
  transition: box-shadow 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pack-swing {
  position: relative;
  transform: rotate(var(--rest-angle));
  transform-origin: 50% var(--pivot-y);
}

.pack-swing.is-swinging {
  will-change: transform;
}

.pack-surface {
  position: relative;
}

.cardboard-header {
  position: relative;
  z-index: 5;
  height: var(--header-height);
  color: var(--kraft-face);
  filter:
    drop-shadow(0 2.2px 0.65px rgb(56 39 25 / 0.32))
    drop-shadow(2.5px 5.5px 4.5px rgb(29 29 31 / 0.115));
}

.cardboard-shape {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cardboard-face {
  fill: var(--kraft-face);
}

.cardboard-edge {
  fill: var(--kraft-edge);
  opacity: 0.96;
}

.cardboard-fiber {
  mix-blend-mode: soft-light;
  filter: grayscale(1) contrast(1.58) brightness(1.18);
  opacity: 0.4;
}

.cardboard-light {
  mix-blend-mode: soft-light;
  opacity: 0.4;
}

.cardboard-label {
  position: absolute;
  right: 4cqw;
  bottom: 3.333cqw;
  left: 4cqw;
  z-index: 2;
  overflow: hidden;
  color: var(--kraft-ink);
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-condensed);
  font-size: 4.333cqw;
  font-weight: 600;
  font-stretch: condensed;
  letter-spacing: 0.16em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-overflow: ellipsis;
  mix-blend-mode: normal;
  opacity: 0.97;
  text-shadow:
    0 -0.7px 0.4px rgb(0 0 0 / 0.88),
    0 0.8px 0.45px rgb(255 255 255 / 0.2);
  white-space: nowrap;
}

/* The seal of genuineness, where a graded card carries one: the foot of the card face,
   in the column the code used to hold. A holographic label — a globe over .COM struck in
   polished metal on a round field of diffraction. The two machine marks have traded
   places: the code is a printed thing and belongs on the kraft with the barcode, the seal
   is an applied label and belongs on the card.

   The foil is three layers seen through the mark's own outline — fine diffraction bands
   one way, the spectrum across them, brushed metal under both. Each pack is dealt its
   own --holo, so the shelf reads as a sheet of seals each catching the light at its own
   angle instead of forty identical ones. Nothing travels at rest: the spectrum moves
   only when a pack is lifted, which is one pack at a time and only under a pointer that
   can hover. The scroll-locked background the technique is usually shown with would
   repaint the layer on every scrolled frame, which is the one thing this page cannot
   afford.

   The whole treatment sits behind a mask test, so an engine that cannot mask is left
   with an empty span rather than a rainbow square. */
.domain-card__seal {
  /* The hologram patch, applied at the head of the stamp the way a duty stamp carries one,
     with the line it would tear along behind it.

     The polished mark rides on ::after with inset: 0, so the seal has to be the box that
     inset resolves against — without this it anchors to the footer and the globe is drawn
     across the whole strip.

     The line it tears along is drawn by the stamp, not by this: as padding here it put the
     foil on a box wider than tall, and a radius on that reads as an ellipse. */
  position: relative;
  contain: paint;
  flex: none;
  align-self: center;
  width: var(--stamp-block, 23.333cqw);
  min-width: var(--stamp-block, 23.333cqw);
  max-width: var(--stamp-block, 23.333cqw);
  height: var(--stamp-block, 23.333cqw);
  min-height: var(--stamp-block, 23.333cqw);
  max-height: var(--stamp-block, 23.333cqw);
  aspect-ratio: 1;
  overflow: hidden;
  border: 0.333cqw solid rgb(250 252 252 / 0.52);
  border-radius: 0.667cqw;
  background: linear-gradient(190deg, #eef2f2, #9ca6aa 52%, #e8ecec);
  /* Hot foil sits flush with the print: no cast at all, only the rim the foil's edge
     catches. */
  box-shadow: inset 0 0 0 0.333cqw rgb(255 255 255 / 0.25);
  isolation: isolate;
}

@supports ((mask-image: url("#m")) or (-webkit-mask-image: url("#m"))) {
  /* The label is the whole rectangle, the way a security label is: a field of diffraction
     that the mark then stands on in a different finish.

     The surface is brushed silver. That is the substrate of a real label, and the spectrum
     is not painted over it — it is a flash, a band of hue where the foil happens to catch
     the light, with metal either side of it. Run at full width the colour reads as a rainbow
     sticker; run as a band it reads as metal. Each pack's band sits at its own place along
     the label (--holo), so the shelf looks like one sheet lit from one direction rather than
     forty identical stickers.

     Over the metal, two runs of lace crossing at a shallow angle and concentric rings — the
     interference figure, which is what reads as a hologram rather than as gradient. Every
     cycle is in cqw, so the label scales with the pack like the rest of its print.

     Rows of microtext were tried here, since that is what the reference labels carry: at
     the size this prints — thirty by twenty pack-percent, ninety pixels across — they are
     either legible, and then they are clutter competing with .COM, or they are faint
     enough not to be, and then they are invisible. Measured at four alphas; dropped. */
  .domain-card__seal {
    --foil-mark-spectrum: linear-gradient(
      var(--foil-angle, 100deg),
      transparent 0 30%,
      rgb(70 178 255 / 0.5) 35%,
      rgb(132 78 255 / 0.76) 40%,
      rgb(255 51 174 / 0.82) 45%,
      rgb(255 205 65 / 0.74) 50%,
      rgb(55 229 164 / 0.74) 55%,
      rgb(28 211 255 / 0.78) 60%,
      transparent 67% 100%
    );
    --foil-mark-metal: linear-gradient(
      var(--foil-angle, 100deg),
      #6f797d 0 18%,
      #aeb7ba 30%,
      #edf1f0 43%,
      #fafbfa 48%,
      #879295 54%,
      #5e696d 72%,
      #cbd2d3 88%,
      #788286 100%
    );
    --foil-serial-metal: linear-gradient(
      var(--foil-angle, 100deg),
      #30373a 0 18%,
      #5d686c 30%,
      #aeb7b9 43%,
      #d8dddc 48%,
      #596467 54%,
      #2d3437 72%,
      #879295 88%,
      #3e474a 100%
    );
    background-image:
      /* A narrow specular rake. It crosses the foil; it does not recolour the whole
         sticker, which is what keeps the highlight photographic rather than neon. */
      linear-gradient(
        var(--foil-angle, 100deg),
        transparent 0 34%,
        rgb(255 255 255 / 0.035) 39%,
        rgb(255 255 255 / 0.15) 43%,
        rgb(255 255 255 / 0.64) 46.2%,
        rgb(255 255 255 / 0.3) 48.2%,
        rgb(220 244 255 / 0.09) 51.5%,
        transparent 58% 100%
      ),
      /* The diffraction colours live inside the same moving rake as the metal flare.
         Keeping an identical angle, size and position makes them read as one piece of
         foil instead of a static rainbow under an unrelated white reflection. */
      linear-gradient(
        var(--foil-angle, 100deg),
        transparent 0 31%,
        rgb(72 166 255 / 0.18) 35%,
        rgb(126 76 255 / 0.66) 39%,
        rgb(255 48 170 / 0.74) 43%,
        rgb(255 202 66 / 0.68) 47%,
        rgb(66 230 167 / 0.68) 51%,
        rgb(30 212 255 / 0.76) 55%,
        rgb(119 88 255 / 0.64) 59%,
        transparent 65% 100%
      ),
      /* A circular flare grows out of the rake's brightest point. The rings are not a
         second light source: they share its phase and make the foil throw colour in every
         direction, as a real embossed hologram does when it turns. */
      radial-gradient(
        circle at 50% var(--foil-bloom-y, 42%),
        rgb(255 255 255 / 0.58) 0 4%,
        rgb(83 224 255 / 0.58) 10%,
        rgb(122 82 255 / 0.52) 19%,
        rgb(255 62 176 / 0.48) 28%,
        rgb(255 205 74 / 0.42) 37%,
        rgb(69 228 162 / 0.34) 46%,
        rgb(43 205 255 / 0.24) 55%,
        transparent 67%
      ),
      /* Fine radial spokes break the soft halo into diffraction rays instead of letting
         it read as a generic circular gradient. */
      repeating-conic-gradient(
        from var(--foil-rays-angle, 7deg) at 50% var(--foil-bloom-y, 42%),
        rgb(255 255 255 / 0.34) 0 0.9deg,
        rgb(80 220 255 / 0.26) 1.2deg 2.1deg,
        rgb(134 83 255 / 0.22) 2.4deg 3.2deg,
        rgb(255 74 178 / 0.18) 3.5deg 4.2deg,
        transparent 4.7deg 8deg
      ),
      repeating-linear-gradient(
        var(--foil-angle, 100deg),
        rgb(255 255 255 / 0.26) 0 0.24cqw,
        rgb(255 255 255 / 0) 0.3cqw 0.95cqw
      ),
      repeating-linear-gradient(
        var(--foil-cross-angle, 16deg),
        rgb(255 255 255 / 0.13) 0 0.45cqw,
        rgb(255 255 255 / 0) 0.5cqw 1.8cqw
      ),
      repeating-radial-gradient(
        circle at 32% 38%,
        rgb(255 255 255 / 0.22) 0 0.25cqw,
        rgb(255 255 255 / 0) 0.28cqw 1.15cqw
      ),
      linear-gradient(
        var(--foil-angle, 100deg),
        transparent 0 28%,
        rgb(255 55 151 / 0.28) 36%,
        rgb(255 204 75 / 0.24) 42%,
        rgb(71 226 155 / 0.24) 48%,
        rgb(38 205 247 / 0.3) 54%,
        rgb(116 91 250 / 0.28) 60%,
        transparent 70% 100%
      ),
      linear-gradient(
        190deg,
        #f4f6f5 0 5%,
        #b9c1c3 18%,
        #e9edeb 32%,
        #939ea1 49%,
        #d9dedc 64%,
        #a4aeb0 79%,
        #eff2f1 93%,
        #adb6b8 100%
      );
    background-position:
      var(--sheen-x, 32%) 0,
      var(--sheen-x, 32%) 0,
      var(--sheen-x, 32%) 50%,
      var(--sheen-x, 32%) 50%,
      calc(var(--holo, 0.4) * 0.95cqw) 0,
      calc(var(--holo, 0.4) * 1.8cqw) 0,
      calc(var(--holo, 0.4) * 2.4cqw) calc(var(--holo, 0.4) * 1.8cqw),
      var(--sheen-x, 32%) 0,
      0 0;
    background-size:
      220% 100%,
      220% 100%,
      220% 220%,
      220% 220%,
      auto,
      auto,
      auto,
      220% 100%,
      100% 100%;
    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      repeat,
      repeat,
      repeat,
      no-repeat,
      no-repeat;
    background-blend-mode:
      screen,
      color,
      screen,
      soft-light,
      soft-light,
      soft-light,
      overlay,
      color,
      normal;
    /* The die-cut edge, the darkening the foil picks up towards it, and the lift the
       label sits at on the card. */
    box-shadow:
      inset 0 0 0 0.22cqw rgb(255 255 255 / 0.42),
      inset 0 0 1.6cqw rgb(16 20 22 / 0.24),
      0 0.55cqw 1.1cqw rgb(8 12 14 / 0.42);
    filter:
      saturate(var(--foil-saturation, 1.08))
      contrast(var(--foil-contrast, 1.12))
      brightness(var(--foil-brightness, 0.92));
    transition:
      background-position 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
      filter 320ms ease;
  }

  /* The embossed mark catches the same moving spectrum as the surrounding foil. Both
     layers share --sheen-x, so the colour and the silver rake travel as one reflection
     instead of looking like a separately animated logo. The substrate stays a little
     darker than the label for legibility, but no longer reads as gunmetal. */
  :is(.domain-card__seal, .restock__seal-mark)::after {
    position: absolute;
    inset: 0;
    background-image:
      var(--foil-mark-spectrum),
      var(--foil-mark-metal);
    background-position:
      var(--sheen-x, 32%) 0,
      var(--sheen-x, 32%) 0;
    background-size:
      220% 100%,
      220% 100%;
    background-blend-mode: color, normal;
    filter:
      drop-shadow(0 -0.18cqw 0 rgb(255 255 255 / 0.44))
      drop-shadow(0 0.2cqw 0.22cqw rgb(15 19 21 / 0.22));
    transition: background-position 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='m62 35c-.5-16-13.7-29.1-30-29.1s-29.5 13.1-30 29.1zm-21.9-13.2c1.8.3 3.6.6 5.2 1.1.5 1.7.8 3.5 1.1 5.3-1.8-.3-3.8-.5-5.7-.6-.1-2-.3-3.9-.6-5.8zm-.3-2c-.3-1.8-.7-3.4-1.1-5 1.3.2 2.6.5 3.8.9.8 1.5 1.6 3.2 2.2 5-1.6-.4-3.3-.7-4.9-.9zm5.5-3.2c1.5.6 3 1.3 4.4 2.1.8 1.4 1.5 2.8 2.1 4.4-1.5-.7-3-1.2-4.7-1.7-.6-1.8-1.2-3.3-1.8-4.8zm-4.3 18.4c0-2-.1-3.6-.2-5.5 2.1.2 4 .3 5.9.6.2 1.6.3 2.9.3 4.9zm6.6-11.4c1.4.5 2.7 1 3.9 1.6.3.2.7.4 1 .5.4 1.3.7 2.6.9 3.9-1.5-.4-3.2-.8-5-1.1-.1-1.7-.4-3.3-.8-4.9zm1.4 11.4c0-1-.1-3-.3-4.5 1 .2 2 .5 3 .7.7.2 1.4.3 2 .5.2 1.1.3 2.3.3 3.3zm10.7 0h-3.7c0-1-.1-1.8-.2-2.7 2.1.8 3.4 1.7 3.9 2.7zm-4.1-4.7c-.1-1-.3-2-.5-3 1.6 1.2 3 2.7 4 4.6-1.1-.6-2.2-1.2-3.5-1.6zm-1.3-5.9c-.3-1.1-.7-2.2-1.2-3.3 2 1.7 3.6 3.6 4.8 5.9-1.1-1-2.3-1.9-3.6-2.6zm.4-4.6c-1.1-1-2.3-1.8-3.6-2.6-.8-1.3-1.6-2.5-2.6-3.6 2.3 1.7 4.4 3.8 6.2 6.2zm-7.5-4.6c-1.1-.4-2.1-.8-3.3-1.2-.8-1.3-1.7-2.5-2.7-3.6 2.3 1.2 4.3 2.8 6 4.8zm-6.3-2c-.9-.2-1.9-.4-2.9-.5-.5-1.3-1-2.4-1.6-3.4 1.7.9 3.2 2.2 4.5 3.9zm-7.9-4.7c1 .5 1.9 1.9 2.7 3.9-.9-.1-1.7-.1-2.7-.2zm0 5.8c1 0 2.3.1 3.5.2.4 1.5.8 3.1 1.2 5-1.5-.1-2.7-.2-4.7-.3zm0 7c2 0 3.4.1 5 .3.3 1.8.5 3.8.7 5.9-1.9-.1-3.7-.2-5.7-.2zm0 8c2 0 3.9 0 5.8.1.1 1.8.2 3.6.2 5.6h-6zm-18 5.7h-5c0-1 .1-2.2.2-3.3 1.5-.4 3.1-.9 5-1.2-.1 1.4-.1 3.5-.2 4.5zm.5-6.5c-1.8.3-3.4.7-4.9 1.1.2-1.3.5-2.6.8-3.8 1.5-.8 3.2-1.6 5-2.2-.3 1.6-.6 3.2-.9 4.9zm-3.1-5.5c.6-1.5 1.3-3 2.1-4.4 1.4-.8 2.8-1.5 4.3-2.1-.7 1.5-1.2 3-1.7 4.7-1.7.6-3.3 1.1-4.7 1.8zm10.6 12h-6c0-2 .1-3.2.3-4.9 1.8-.3 3.8-.6 5.9-.7-.1 1.8-.1 3.6-.2 5.6zm.3-7.4c-2 .1-3.9.3-5.7.6.3-1.8.6-3.6 1.1-5.3 1.7-.5 3.5-.8 5.3-1.1-.3 1.8-.5 3.8-.7 5.8zm-3.9-6.9c.6-1.8 1.3-3.5 2.2-5 1.3-.4 2.5-.6 3.9-.9-.1.4-.2.8-.3 1.3-.3 1.1-.5 2.4-.8 3.7-1.8.2-3.4.5-5 .9zm11.6 14.3h-6c0-2 .1-3.8.2-5.7 1.9-.1 3.8-.1 5.8-.1zm0-7.7c-2 0-3.8.1-5.6.2.2-2.1.4-4 .7-5.9 1.6-.2 3-.3 5-.3v6zm0-8c-2 0-3.1.1-4.6.3.2-1 .4-2 .6-3 .2-.7.4-1.4.6-2 1.2-.1 2.5-.2 3.5-.2v4.9zm0-10.8v3.7c-1 0-1.8.1-2.7.2.8-2 1.7-3.3 2.7-3.9zm-3.4.8c-.6.9-1.1 2-1.6 3.4-1 .1-2 .3-2.9.5 1.3-1.7 2.8-3 4.5-3.9zm-4.8 1.1c-1 1-1.9 2.2-2.7 3.6-1.1.3-2.2.7-3.2 1.2 1.7-2 3.7-3.6 5.9-4.8zm-7.1 3.1c-.6.7-1.2 1.4-1.8 2.2-.3.4-.6.9-.9 1.4-1.3.8-2.5 1.7-3.7 2.7 1.9-2.4 4-4.5 6.4-6.3zm-4.7 7.5c-.5 1.1-.9 2.2-1.2 3.3-1.3.8-2.6 1.7-3.6 2.7 1.2-2.3 2.9-4.3 4.8-6zm-2 6.3c-.2 1-.4 1.9-.5 2.9-1.3.5-2.4 1-3.4 1.6.8-1.7 2.2-3.2 3.9-4.5zm-.8 5c-.1.9-.1 1.7-.1 2.7h-3.8c.5-1 1.9-1.9 3.9-2.7z'/%3E%3Cpath d='m34.5 54c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5 8.5 3.8 8.5 8.5-3.8 8.5-8.5 8.5zm0-13c-2.5 0-4.5 2-4.5 4.5s2 4.5 4.5 4.5 4.5-2 4.5-4.5-2-4.5-4.5-4.5z'/%3E%3Cpath d='m60 54h-4v-9.5l-3 1.8-3-1.8v9.5h-4v-16.5l7 4.2 7-4.2z'/%3E%3Cpath d='m21.5 48.8c-.8.7-1.8 1.2-3 1.2-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5c1 0 1.9.3 2.6.9l2.9-2.9c-1.5-1.3-3.4-2-5.5-2-4.7 0-8.5 3.8-8.5 8.5s3.8 8.5 8.5 8.5c2.2 0 4.2-.8 5.7-2.2z'/%3E%3Ccircle cx='6' cy='52' r='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='m62 35c-.5-16-13.7-29.1-30-29.1s-29.5 13.1-30 29.1zm-21.9-13.2c1.8.3 3.6.6 5.2 1.1.5 1.7.8 3.5 1.1 5.3-1.8-.3-3.8-.5-5.7-.6-.1-2-.3-3.9-.6-5.8zm-.3-2c-.3-1.8-.7-3.4-1.1-5 1.3.2 2.6.5 3.8.9.8 1.5 1.6 3.2 2.2 5-1.6-.4-3.3-.7-4.9-.9zm5.5-3.2c1.5.6 3 1.3 4.4 2.1.8 1.4 1.5 2.8 2.1 4.4-1.5-.7-3-1.2-4.7-1.7-.6-1.8-1.2-3.3-1.8-4.8zm-4.3 18.4c0-2-.1-3.6-.2-5.5 2.1.2 4 .3 5.9.6.2 1.6.3 2.9.3 4.9zm6.6-11.4c1.4.5 2.7 1 3.9 1.6.3.2.7.4 1 .5.4 1.3.7 2.6.9 3.9-1.5-.4-3.2-.8-5-1.1-.1-1.7-.4-3.3-.8-4.9zm1.4 11.4c0-1-.1-3-.3-4.5 1 .2 2 .5 3 .7.7.2 1.4.3 2 .5.2 1.1.3 2.3.3 3.3zm10.7 0h-3.7c0-1-.1-1.8-.2-2.7 2.1.8 3.4 1.7 3.9 2.7zm-4.1-4.7c-.1-1-.3-2-.5-3 1.6 1.2 3 2.7 4 4.6-1.1-.6-2.2-1.2-3.5-1.6zm-1.3-5.9c-.3-1.1-.7-2.2-1.2-3.3 2 1.7 3.6 3.6 4.8 5.9-1.1-1-2.3-1.9-3.6-2.6zm.4-4.6c-1.1-1-2.3-1.8-3.6-2.6-.8-1.3-1.6-2.5-2.6-3.6 2.3 1.7 4.4 3.8 6.2 6.2zm-7.5-4.6c-1.1-.4-2.1-.8-3.3-1.2-.8-1.3-1.7-2.5-2.7-3.6 2.3 1.2 4.3 2.8 6 4.8zm-6.3-2c-.9-.2-1.9-.4-2.9-.5-.5-1.3-1-2.4-1.6-3.4 1.7.9 3.2 2.2 4.5 3.9zm-7.9-4.7c1 .5 1.9 1.9 2.7 3.9-.9-.1-1.7-.1-2.7-.2zm0 5.8c1 0 2.3.1 3.5.2.4 1.5.8 3.1 1.2 5-1.5-.1-2.7-.2-4.7-.3zm0 7c2 0 3.4.1 5 .3.3 1.8.5 3.8.7 5.9-1.9-.1-3.7-.2-5.7-.2zm0 8c2 0 3.9 0 5.8.1.1 1.8.2 3.6.2 5.6h-6zm-18 5.7h-5c0-1 .1-2.2.2-3.3 1.5-.4 3.1-.9 5-1.2-.1 1.4-.1 3.5-.2 4.5zm.5-6.5c-1.8.3-3.4.7-4.9 1.1.2-1.3.5-2.6.8-3.8 1.5-.8 3.2-1.6 5-2.2-.3 1.6-.6 3.2-.9 4.9zm-3.1-5.5c.6-1.5 1.3-3 2.1-4.4 1.4-.8 2.8-1.5 4.3-2.1-.7 1.5-1.2 3-1.7 4.7-1.7.6-3.3 1.1-4.7 1.8zm10.6 12h-6c0-2 .1-3.2.3-4.9 1.8-.3 3.8-.6 5.9-.7-.1 1.8-.1 3.6-.2 5.6zm.3-7.4c-2 .1-3.9.3-5.7.6.3-1.8.6-3.6 1.1-5.3 1.7-.5 3.5-.8 5.3-1.1-.3 1.8-.5 3.8-.7 5.8zm-3.9-6.9c.6-1.8 1.3-3.5 2.2-5 1.3-.4 2.5-.6 3.9-.9-.1.4-.2.8-.3 1.3-.3 1.1-.5 2.4-.8 3.7-1.8.2-3.4.5-5 .9zm11.6 14.3h-6c0-2 .1-3.8.2-5.7 1.9-.1 3.8-.1 5.8-.1zm0-7.7c-2 0-3.8.1-5.6.2.2-2.1.4-4 .7-5.9 1.6-.2 3-.3 5-.3v6zm0-8c-2 0-3.1.1-4.6.3.2-1 .4-2 .6-3 .2-.7.4-1.4.6-2 1.2-.1 2.5-.2 3.5-.2v4.9zm0-10.8v3.7c-1 0-1.8.1-2.7.2.8-2 1.7-3.3 2.7-3.9zm-3.4.8c-.6.9-1.1 2-1.6 3.4-1 .1-2 .3-2.9.5 1.3-1.7 2.8-3 4.5-3.9zm-4.8 1.1c-1 1-1.9 2.2-2.7 3.6-1.1.3-2.2.7-3.2 1.2 1.7-2 3.7-3.6 5.9-4.8zm-7.1 3.1c-.6.7-1.2 1.4-1.8 2.2-.3.4-.6.9-.9 1.4-1.3.8-2.5 1.7-3.7 2.7 1.9-2.4 4-4.5 6.4-6.3zm-4.7 7.5c-.5 1.1-.9 2.2-1.2 3.3-1.3.8-2.6 1.7-3.6 2.7 1.2-2.3 2.9-4.3 4.8-6zm-2 6.3c-.2 1-.4 1.9-.5 2.9-1.3.5-2.4 1-3.4 1.6.8-1.7 2.2-3.2 3.9-4.5zm-.8 5c-.1.9-.1 1.7-.1 2.7h-3.8c.5-1 1.9-1.9 3.9-2.7z'/%3E%3Cpath d='m34.5 54c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5 8.5 3.8 8.5 8.5-3.8 8.5-8.5 8.5zm0-13c-2.5 0-4.5 2-4.5 4.5s2 4.5 4.5 4.5 4.5-2 4.5-4.5-2-4.5-4.5-4.5z'/%3E%3Cpath d='m60 54h-4v-9.5l-3 1.8-3-1.8v9.5h-4v-16.5l7 4.2 7-4.2z'/%3E%3Cpath d='m21.5 48.8c-.8.7-1.8 1.2-3 1.2-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5c1 0 1.9.3 2.6.9l2.9-2.9c-1.5-1.3-3.4-2-5.5-2-4.7 0-8.5 3.8-8.5 8.5s3.8 8.5 8.5 8.5c2.2 0 4.2-.8 5.7-2.2z'/%3E%3Ccircle cx='6' cy='52' r='2'/%3E%3C/svg%3E");
    -webkit-mask-size: 70%;
    mask-size: 70%;
    -webkit-mask-position: 50% 30%;
    mask-position: 50% 30%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    content: "";
  }

  /* The pack's number, printed into the foot of the label the way a security label carries
     its serial: over the diffraction, in the same dark ink as the mark above it, small
     enough to read as printed detail rather than a caption. */
  .domain-card__seal::before {
    position: absolute;
    right: 0;
    bottom: 1.667cqw;
    left: 0;
    z-index: 1;
    color: rgb(24 28 31 / 0.82);
    font-family: var(--font-mono);
    font-size: 2.667cqw;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    text-shadow:
      0 -0.2px 0 rgb(255 255 255 / 0.22),
      0 0.35px 0.2px rgb(15 19 21 / 0.46);
    content: var(--seal-no, "");
  }

  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .domain-card__seal::before {
      color: transparent;
      background-image:
        var(--foil-mark-spectrum),
        var(--foil-serial-metal);
      background-position:
        var(--sheen-x, 32%) 0,
        var(--sheen-x, 32%) 0;
      background-size:
        220% 100%,
        220% 100%;
      background-blend-mode: color, normal;
      -webkit-background-clip: text;
      background-clip: text;
      transition: background-position 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
  }

  .pack-swing.is-lighting .domain-card__seal {
    will-change: background-position, filter;
  }
}

.collection-number {
  position: absolute;
  top: 4cqw;
  left: 3.333cqw;
  z-index: 3;
  color: var(--kraft-ink);
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-mono);
  font-size: 4.333cqw;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0.74;
  text-shadow: 0 -0.6px 0.35px rgb(0 0 0 / 0.76);
}

/* A real button: on the display page it opens the purchase inquiry. In the
   editor (no [data-inquire] on the rack) it stays inert under the pointer. */
.price-sticker {
  position: absolute;
  top: 2.333cqw;
  right: 2.667cqw;
  z-index: 3;
  display: grid;
  width: 23.333cqw;
  height: 10cqw;
  margin: 0;
  padding: 0;
  place-items: center;
  overflow: hidden;
  appearance: none;
  border: 1px solid rgb(51 39 15 / 0.16);
  border-radius: 3px 4px 3px 3px;
  background: var(--price-bg);
  color: var(--price-ink);
  box-shadow:
    0 0.7px 0.8px rgb(48 30 17 / 0.22),
    1px 1.8px 2.2px rgb(48 30 17 / 0.11),
    inset 0 0.5px 0 rgb(255 255 255 / 0.34);
  transform: translate(var(--price-x), var(--price-y)) rotate(var(--price-angle));
  transform-origin: 52% 54%;
  isolation: isolate;
  pointer-events: none;
}

.price-sticker::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image: var(--paper-material);
  background-position: center;
  background-size: 170px 170px;
  filter: grayscale(1) contrast(1.12);
  mix-blend-mode: multiply;
  opacity: 0.075;
  content: "";
}

/* No opacity here: a translucent text layer drops subpixel antialiasing and the
   small type turns mushy. The ink prints at full strength instead. */
.price-sticker__value {
  position: relative;
  z-index: 1;
  color: var(--price-ink);
  font-family: var(--font-mono);
  font-size: 4.333cqw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}

.plastic-pouch {
  position: relative;
  aspect-ratio: 0.8;
  margin-top: -0.5px;
  overflow: hidden;
  border: 0.5px solid rgb(66 78 82 / 0.07);
  border-radius: 2px 3px 10px 8px / 2px 3px 15px 13px;
  background-color: rgb(198 213 218 / 0.032);
  box-shadow:
    0 1px 1px rgb(var(--shadow-rgb) / 0.065),
    2px 6px 10px rgb(var(--shadow-rgb) / 0.105),
    4px 15px 24px rgb(var(--shadow-rgb) / 0.075),
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 -1px 0 rgb(57 69 73 / 0.045);
}

.plastic-pouch::before {
  content: none;
}

.plastic-pouch::after {
  content: none;
}

.logo-card {
  position: absolute;
  contain: paint;
  top: auto;
  bottom: calc(var(--pouch-seal-depth) + var(--card-floor-gap));
  left: 50%;
  z-index: 1;
  width: var(--card-width);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(63, 69, 68, 0.13);
  border-radius: 8px;
  /* The card face reads as foil trading-card stock: light falls from above (the
     vertical field), one bloom lifts a top corner without touching the icon, and the
     paper grain (::before) and the raking sheen (::after) ride on top. A pasted
     --card-mesh overrides the face.

     Written twice, because the good version needs relative colour (Chrome 119,
     Safari 16.4, Firefox 128) and a var() an engine cannot resolve takes the whole
     declaration with it — an engine one year short of that painted no card face at
     all, not a plainer one. So the plain one is the base and the rich one is the
     upgrade. Here the stored pastel is the face itself and the same three layers of
     light are laid over it in neutral alpha — held deliberately light, because taking
     enough white to match the brightness of the poles below washes the pastel out to
     grey, and a card that keeps its colour reads closer to the real thing than one
     that matches its lightness. Zero-alpha stops are spelled out rather than left to
     `transparent`, which older engines fade towards black. */
  --card-face:
    radial-gradient(120% 82% at 6% -6%, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 54%),
    radial-gradient(96% 76% at 104% 108%, rgb(0 0 0 / 0.19), rgb(0 0 0 / 0) 56%),
    linear-gradient(
      179deg,
      rgb(255 255 255 / 0.22),
      rgb(255 255 255 / 0) 42%,
      rgb(0 0 0 / 0.3) 96%
    );

  background-color: var(--card-accent, #cfd2d6);
  background-image: var(--card-mesh, var(--card-face));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow:
    inset 0.8px 0.8px 0 rgba(255, 255, 255, 0.68),
    inset -0.8px -0.8px 1px rgba(51, 58, 57, 0.055),
    0 1px 0.8px rgb(var(--shadow-rgb) / 0.11),
    1.5px 3px 4px rgb(var(--shadow-rgb) / 0.075);
  /* The card turns about its own centre, so it stays in the window of the pouch
     however far it settles off square. See getCardVariation in pack.js. */
  transform: translateX(-50%) rotate(var(--card-tilt, 0deg));
  isolation: isolate;
}

/* The foil proper. Every part of the face is derived from the one accent colour in
   OKLCH — so the poles never grey out the way sRGB blobs do, and every card runs the
   same recipe, which is what makes the shelf look like one product line. Punch the
   stored pastel up first (a little lighter, noticeably more chroma), then derive the
   whole face from that vivid base: the hue and identity are kept, but the card reads
   brighter and richer. */
@supports (color: oklch(from red l c h)) {
  .logo-card {
    --acc: oklch(from var(--card-accent, #cfd2d6) calc(l + 0.035) calc(c * 1.22) h);
    --face-hi: oklch(from var(--acc) calc(l + 0.1) calc(c * 0.88) calc(h - 4));
    --face-lo: oklch(from var(--acc) calc(l - 0.1) calc(c * 1.12) calc(h + 9));
    --face-bloom: oklch(from var(--acc) calc(l + 0.04) calc(c * 1.62) calc(h - 34));
    --card-face:
      radial-gradient(120% 82% at 6% -6% in oklab, var(--face-bloom), transparent 54%),
      radial-gradient(96% 76% at 104% 108% in oklab, color-mix(in oklab, var(--face-lo) 72%, transparent), transparent 56%),
      linear-gradient(179deg in oklab, var(--face-hi), var(--acc) 42%, var(--face-lo) 96%);

    background-color: var(--acc);
  }
}

.logo-card::before,
.logo-card::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.logo-card::before {
  z-index: 0;
  background-image: var(--paper-material);
  background-position: center;
  background-size: 520px auto;
  filter: grayscale(1) contrast(0.88) brightness(1.08);
  mix-blend-mode: multiply;
  opacity: 0.045;
}

/* The raking sheen: the light a coated foil card catches. It sits still on the shelf,
   and — the one moment of motion — sweeps across and brightens as the card is pulled
   toward you, the way real foil flares when you tilt it. Screen blend so it reads as
   light on the colour, not a milky film. */
.pack-swing {
  --sheen-x: var(--foil-rest-x, 32%);
  --foil-saturation: var(--foil-rest-saturation, 1.08);
  --foil-brightness: var(--foil-rest-brightness, 0.92);
}

.pack-swing.is-lighting {
  --sheen-x: var(--foil-active-x, 46%);
  --foil-saturation: var(--foil-active-saturation, 1.22);
  --foil-brightness: var(--foil-active-brightness, 0.97);
}

.peg-cell.is-lifted .pack-swing {
  --sheen-x: var(--foil-lift-x, 68%);
  --foil-saturation: var(--foil-lift-saturation, 1.34);
  --foil-brightness: var(--foil-lift-brightness, 1.02);
}

.logo-card::after {
  z-index: 1;
  background-image: linear-gradient(
    var(--foil-angle, 100deg),
    transparent 33%,
    rgb(255 255 255 / 0.36) 46%,
    rgb(255 255 255 / 0.06) 52%,
    transparent 64%
  );
  background-size: 220% 100%;
  background-position: var(--sheen-x, 32%) 0;
  mix-blend-mode: screen;
  opacity: 0.6;
  transition:
    background-position 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 320ms ease;
}

.pack-swing.is-lighting .logo-card::after {
  opacity: 0.72;
}

.peg-cell.is-lifted .logo-card::after {
  opacity: 0.9;
}

/* The plastic catches more light as it turns. Brightness only: a shift would have to be
   signed against --film-flip, which mirrors half the films, and would then rake the wrong
   way on those. */
.pack-swing.is-lighting .pouch-photo {
  filter:
    brightness(clamp(1.42, calc(var(--film-brightness, 1.08) + 0.41), 1.52))
    contrast(clamp(1.14, calc(var(--film-contrast, 1.08) + 0.1), 1.22));
}

.peg-cell.is-lifted .pouch-photo {
  filter:
    brightness(clamp(1.46, calc(var(--film-brightness, 1.08) + 0.45), 1.56))
    contrast(clamp(1.16, calc(var(--film-contrast, 1.08) + 0.12), 1.24));
}

.domain-card-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 4.667cqw 6cqw 3.333cqw;
  color: #171a18;
}

.domain-card__identity {
  display: grid;
  flex: 1;
  gap: 4.667cqw;
  place-content: center;
  justify-items: center;
  min-height: 0;
  padding: 1.667cqw 0 4.667cqw;
  text-align: center;
}

/* Icon and name are stamped into the card like embossed print: a hairline of light
   catches their top edge (the shelf lights from above) and a soft shadow falls below,
   so they read as raised relief on the stock. Offsets are in cqw, so the emboss scales
   with the pack. */
.domain-card__icon {
  width: 15.333cqw;
  height: 15.333cqw;
  color: #1c201e;
  filter:
    drop-shadow(0 -0.09cqw 0.09cqw rgb(255 255 255 / 0.7))
    drop-shadow(0 0.52cqw 0.44cqw rgb(18 14 18 / 0.32));
}

.domain-card__name {
  max-width: 100%;
  overflow: visible;
  font-family: var(--font-condensed);
  font-size: 10.667cqw;
  font-weight: 600;
  font-stretch: condensed;
  letter-spacing: -0.01em;
  line-height: 1.05;
  white-space: nowrap;
  /* Raised relief, matching the icon: light hairline on top, soft shadow below. */
  text-shadow:
    0 -0.18cqw 0.08cqw rgb(255 255 255 / 0.78),
    0 0.5cqw 0.42cqw rgb(18 14 18 / 0.3);
}

.domain-card__footer {
  position: relative;
  /* The stamp sits the same distance from the card's left, right and foot. The card's side
     padding is the face's — 6cqw, set for the name and icon above — so the footer gives back
     the difference. The width is stated rather than left to stretch: a flex item with
     negative margins stretches by one of them, not both, and the stamp came out 3.3cqw from
     the left edge and 6.5cqw from the right. */
  width: calc(100% + 5.333cqw);
  margin-inline: -2.667cqw;
  display: grid;
  gap: 2cqw;
  justify-items: center;
}

/* One object rather than two: a duty stamp, the band an excise mark takes across the thing
   it seals. Its zones are the vernacular of the genre — the code that can be read by
   machine, what to do with it, a line of perforation, and the hologram patch applied over
   the end. Banding them into one stamp is what makes them read as issued together; side by
   side they were two stickers that happened to be adjacent. */
.domain-card__stamp {
  position: relative;
  /* One spacing system governs the strip: a compact outside edge, one larger repeated
     interval between its three square zones, and one shared square size. */
  --stamp-block: 23.333cqw;
  --stamp-edge: 1cqw;
  --stamp-gap: 3.333cqw;
  display: grid;
  grid-template-columns: var(--stamp-block) minmax(0, 1fr);
  /* A definite row keeps WebKit from letting the QR SVG's intrinsic height size
     the strip. Width, height and aspect-ratio all agree; no one feature is a
     single point of failure on older Safari versions. */
  grid-template-rows: var(--stamp-block);
  gap: var(--stamp-gap);
  align-items: center;
  width: 100%;
  padding: var(--stamp-edge);
  overflow: hidden;
  border-radius: 1.333cqw;
  /* One raking gloss on the pack's light axis, over the stock. A run of vertical hairlines
     at two per cent alpha was here as well: at this size that is not guilloche, it is
     noise. */
  background:
    linear-gradient(100deg, rgb(255 255 255 / 0.075), transparent 30% 72%, rgb(255 255 255 / 0.035)),
    #171b1d;
  /* Printed on the card, not applied to it: no cast, no bevel, no lit edge. The raking
     gloss in the background is the card's own coating, and it is flat. */
  color: #f3f4ef;
  isolation: isolate;
}

/* The name of the thing, set on the card's own colour and centred under the two marks
   that stand behind it: the code that opens it, the seal that says it is genuine. No white
   under it — white here would make it a caption on a label, and it is the card's own line.
   Full width, so the longest domain in stock is never in competition with anything. */
.domain-card__address {
  max-width: 100%;
  overflow: hidden;
  /* overflow: hidden clips both axes, so the line has to leave room for its own
     descenders — at zero, the tails of p, y, q and g get shaved. */
  padding-bottom: 0.667cqw;
  font-family: var(--font-mono);
  font-size: 4.667cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The scan-me plate, drawn from the label it is copied from: dark stock, one white shape
   carrying the code and ending in a point, and the words in that point's direction inside
   four corner brackets. The whole plate is print inside the clickable card.

   The white is one shape, not a square with an arrow beside it — that is what the label
   does, and it is why it reads as a sign rather than as two objects. The code keeps its own
   white margin inside it, because that margin is the symbol's quiet zone and a scanner
   needs it whatever the plate is doing.

   The words are set in the pack's own condensed face, the one the kraft prints in. The
   reference uses a heavy gothic; borrowing a new family for eight characters would put a
   third voice on a card that already speaks in two. */
.domain-card__code {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--stamp-block) var(--stamp-block);
  grid-template-rows: var(--stamp-block);
  gap: var(--stamp-gap);
  flex: none;
  align-items: center;
  justify-content: start;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.domain-card__code::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.833cqw;
  border-left: 0.333cqw dashed rgb(237 241 239 / 0.34);
  content: "";
}

/* The point on the white shape, as on the label this is drawn from. Its own element would
   be a second object; as the panel's own edge it is the same piece of white. */
.domain-card__qr::after {
  /* Flush, and the full height of the panel. Inset from its top and bottom it read as a
     wedge stuck to the side with a shoulder at each end — the tail this had. */
  position: absolute;
  top: 50%;
  height: 6.667cqw;
  transform: translateY(-50%);
  /* Lapped one step over the panel, not butted at its edge: a butt joint between two
     paints rounds to a hairline of card at fractional pixel densities, and that hairline
     was the seam. The lap is the same stock, so it shows nothing.

     The lap has to be square before the slope starts, which is what the two extra corners
     in the polygon are for; 11.1% is the lap as a share of this box. Sloping from the box's
     own left edge left a notch bitten out of the joint at each end. */
  left: calc(100% - 0.333cqw);
  width: 3cqw;
  background: inherit;
  clip-path: polygon(0 0, 11.1% 0, 100% 50%, 11.1% 100%, 0 100%);
  content: "";
}

/* What to do with the code, in the two weights the sign it is drawn from uses: the verb
   small, the call large. The frame is four corner brackets — the mark of a thing meant to
   be read by machine — and they are drawn as one rounded, bordered box masked down to its
   corners. Eight background bars gave square ends; a border keeps its radius, so the arms
   end round the way a thick stroke does. */
.domain-card__scan {
  position: relative;
  display: grid;
  /* A small explicit gap opens the two-line call without letting the grid stretch its
     rows. At this leading the rendered ink is almost square inside the square frame. */
  gap: 0.667cqw;
  place-items: center;
  align-content: center;
  align-self: center;
  /* The stamp has 1cqw around every edge. Pinning the frame to this column's end makes
     its right clearance the same 1cqw as the clearance above and below. */
  justify-self: end;
  /* The band's third square. The patch, the code and the sign are one size and stand on
     one line: that is the balance a printed stamp has, and it is why the card below is cut
     to the width three of them need rather than the squares being cut to the card. */
  width: var(--stamp-block);
  min-width: var(--stamp-block);
  max-width: var(--stamp-block);
  height: var(--stamp-block);
  min-height: var(--stamp-block);
  max-height: var(--stamp-block);
  aspect-ratio: 1;
  /* Equal inset on all four sides: together with the line gap, the ink block lands with
     essentially the same air horizontally and vertically. */
  padding: 2cqw;
  font-family: var(--font-condensed);
  font-weight: 600;
  font-stretch: condensed;
  line-height: 0.78;
  text-align: center;
  text-transform: uppercase;
}

/* The verb and the call are set to one measure, which is what makes the pair read as a
   block rather than two lines that happen to be centred. The verb carries a little track to
   reach it, but only a little: tracked far enough to match on size alone it stops looking
   packed, and packed is what a stamped instruction is. The negative margin takes back the
   track CSS hangs after the last letter — without it the line sits half a track left of
   centre. */
.domain-card__scan-lead {
  margin-right: -0.06em;
  font-size: 5.667cqw;
  letter-spacing: 0.06em;
}

.domain-card__scan-call {
  margin-right: -0.01em;
  font-size: 9.333cqw;
  letter-spacing: 0.01em;
}

/* The frame is split into a top and a bottom pair of corners. A previous version cut one
   complete border with two intersecting masks; while the card was transformed Chromium
   could briefly rasterise one mask before the other, exposing the horizontal border as a
   white strip. Each half now needs only one stable mask and keeps the same rounded arms. */
.domain-card__scan::before,
.domain-card__scan::after {
  position: absolute;
  right: 1.333cqw;
  left: 1.333cqw;
  height: 4.667cqw;
  /* Heavier than a hairline bracket, as on the sign this is drawn from: the stroke is
     about a fifteenth of the frame and each arm stays just under a quarter of its side. */
  /* The stroke belongs to the same scalable drawing as the type and insets. A fixed
     pixel width grew disproportionately when browser zoom forced a narrower pack. */
  border: 1.667cqw solid currentColor;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0 22%,
    transparent 22% 78%,
    #000 78%
  );
  mask-image: linear-gradient(to right, #000 0 22%, transparent 22% 78%, #000 78%);
  content: "";
}

.domain-card__scan::before {
  top: 1.333cqw;
  border-bottom: 0;
  border-radius: 2.333cqw 2.333cqw 0 0;
}

.domain-card__scan::after {
  bottom: 1.333cqw;
  border-top: 0;
  border-radius: 0 0 2.333cqw 2.333cqw;
}

.domain-card__qr {
  position: relative;
  display: block;
  width: var(--stamp-block);
  min-width: var(--stamp-block);
  max-width: var(--stamp-block);
  height: var(--stamp-block);
  min-height: var(--stamp-block);
  max-height: var(--stamp-block);
  aspect-ratio: 1;
  /* The margin round the symbol is its quiet zone: four modules, by the standard. The
     narrowest code in stock is 25 modules, so four of them is 4/33 of the panel — 2.667cqw
     of 22cqw, which is the figure below. Take any more white out and the code stops being
     one a scanner is obliged to read. */
  padding: 3cqw;
  border-radius: 1cqw;
  background: #f8f7f2;
  color: #16191b;
}



.domain-card__qr svg {
  display: block;
  width: 100%;
  /* The SVG carries equal intrinsic width/height attributes. Let that ratio derive
     its rendered height instead of feeding 100% back into the parent's grid sizing
     — a circular path older WebKit resolved as a tall QR panel. */
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
}

.pouch-face {
  position: absolute;
  inset: 1px;
  z-index: 6;
  border: 2.25px solid rgb(63 76 80 / 0.045);
  border-radius: 2px 3px 9px 7px / 2px 3px 13px 11px;
  background: transparent;
  box-shadow:
    0 0 0 0.45px rgb(255 255 255 / 0.42),
    inset 1px 0 0 rgb(255 255 255 / 0.22),
    inset -1px 0 0 rgb(49 61 65 / 0.055),
    inset 0 -1px 0 rgb(49 61 65 / 0.05);
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.pouch-photo {
  position: absolute;
  inset: -2%;
  z-index: 5;
  display: block;
  background-image: var(--pouch-pass);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter:
    brightness(clamp(1.38, calc(var(--film-brightness, 1.08) + 0.37), 1.48))
    contrast(clamp(1.14, calc(var(--film-contrast, 1.08) + 0.1), 1.22));
  mix-blend-mode: screen;
  opacity: clamp(0.86, calc(var(--film-opacity, 0.78) + 0.12), 0.93);
  transition: filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Flat 2D on purpose. The seating of the film never animates, and a 3D function
     here — translate3d, or a bare translateZ(0) — reads as "will move in depth" to
     the compositor: inside the cell's perspective it hands the film its own GPU
     layer, and everything painted over it (the pouch window, the front hook) plus
     everything under it (the swing, the cell) gets one too. Six layers a pack, and
     a shelf of forty asked a phone for ~170 MB of texture it does not have: the
     compositor drops what it cannot hold, and the packs come back as empty pouches
     or a blank screen. The same offsets in 2D paint into the page's own tiles. */
  transform:
    translate(var(--film-x, 0), var(--film-y, 0))
    scale(var(--film-scale, 1))
    scaleX(var(--film-flip, 1));
  transform-origin: 50% 50%;
  pointer-events: none;
}

.price-sticker:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.rack[data-inquire] .pack-surface {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rack[data-inquire] .price-sticker {
  cursor: pointer;
  pointer-events: auto;
}

/* ---- End-of-shelf restock CTA ----------------------------------------- */

/* The last bay of the display: one card-sheet, and its right end is bare board.
   Pegboard holes run out from under the copy, one hook is still mounted, and on
   it breathes the ghost of the pack that is not on the wall — the same
   silhouette the shelf shows while stock is on its way. The emptiness is the
   message; the copy tells you what to do about it. */
.restock {
  --restock-pad-y: clamp(30px, 3.8vw, 48px);
  --restock-pad-x: clamp(24px, 3.8vw, 50px);
  position: relative;
  display: grid;
  /* The copy takes what its 52ch note needs; the board sweeps the whole rest of
     the card, so there is no orphaned white between the words and the wall. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin: clamp(56px, 7vw, 92px) 0 0;
  padding: var(--restock-pad-y) var(--restock-pad-x);
  overflow: hidden;
  background: var(--sheet);
  border: 1px solid var(--sheet-line);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgb(var(--shadow-rgb) / 0.04),
    0 14px 34px rgb(var(--shadow-rgb) / 0.05);
}

.restock__eyebrow {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

.restock__title {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--font-condensed);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  font-stretch: condensed;
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-wrap: balance;
}

.restock__note {
  max-width: 52ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.62;
}

.restock__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin-top: clamp(22px, 2.6vw, 30px);
}

/* The shop's own action: an ink pill that keeps you here and opens the sheet. */
.restock__write {
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
  min-height: 48px;
  color: var(--button-ink);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  background: var(--button);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 140ms ease;
}

.restock__write:hover {
  transform: translateY(-1px);
}

.restock__write:active {
  transform: translateY(0) scale(0.98);
}

.restock__write:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The other way out: DNBar's sign as a chip beside the button. The chip stays
   white in both themes — the packs' card faces do the same — so the navy half
   of the wordmark never sinks into a dark card. */
.restock__dnbar {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 0 18px 0 16px;
  background: #fff;
  border: 1px solid var(--sheet-line);
  border-radius: 999px;
  text-decoration: none;
  transition:
    transform 140ms ease,
    border-color 160ms ease;
}

.restock__dnbar-logo {
  display: block;
  width: 88px;
  height: auto;
}

.restock__dnbar-label {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding-left: 12px;
  color: #6e6e73;
  border-left: 1px solid rgb(29 29 31 / 0.12);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
  transition: color 160ms ease;
}

.restock__dnbar-label svg {
  width: 12px;
  height: 12px;
  color: var(--dnbar);
  transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.restock__dnbar:hover {
  transform: translateY(-1px);
  border-color: rgb(var(--dnbar-rgb) / 0.46);
}

.restock__dnbar:hover .restock__dnbar-label {
  color: #1d1d1f;
}

.restock__dnbar:hover .restock__dnbar-label svg {
  transform: translate(2px, -2px);
}

.restock__dnbar:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The bare board. The holes are pegboard dots fading in from under the copy;
   the column bleeds to the card's edges so the board reads as the card's own
   material, not a picture placed on it. Bays sit on one hook line, the way
   hooks share a hole row on a real board. */
.restock__wall {
  position: relative;
  display: flex;
  gap: clamp(26px, 3.2vw, 44px);
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  margin: calc(var(--restock-pad-y) * -1) calc(var(--restock-pad-x) * -1)
    calc(var(--restock-pad-y) * -1) 0;
  padding: clamp(28px, 3vw, 38px) clamp(24px, 3vw, 44px) 30px;
}

.restock__wall::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at center,
    rgb(var(--ink-rgb) / 0.13) 1px,
    transparent 2px
  );
  background-size: 19px 19px;
  -webkit-mask-image: linear-gradient(to left, black 72%, transparent);
  mask-image: linear-gradient(to left, black 72%, transparent);
  content: "";
}

/* A real shelf cell, one pack narrower than the grid's. cqw units resolve
   against this width, so hooks and ghost print at pack proportions. The empty
   bays hold nothing but their hook — the stock is gone; that is the point. */
.restock__bay {
  flex: none;
  width: min(172px, 100%);
}

/* The mystery pack is a real control: the whole silhouette is the button that
   opens the sheet, the way every stocked pack on the shelf opens its own. */
.restock__mystery-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.restock__mystery-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
}

/* The loader's ghosts are divs; here the same classes sit on spans inside a
   button, so the boxes are restored explicitly. */
.restock__mystery-btn .ghost-pack,
.restock__mystery-btn .ghost-pack__pouch {
  display: block;
}

.restock__mystery-btn .ghost-pack__pouch {
  position: relative;
  /* The generic loading ghost leaves a little air between its two blocks. Here the
     silhouette is a finished pouch: overlap the SVG by one pixel so the pegboard
     cannot flash through as a horizontal seam under scaling or rotation. */
  margin-top: -1px;
  border-radius: 0 0 10px 8px / 0 0 15px 13px;
}

/* Reaching for it nudges the pack on its hook — the same pivot every stocked
   pack turns about — and the question prints a shade darker, as if your hand
   brought it closer to the light. */
.restock__mystery-btn .ghost-pack {
  transform-origin: 50% var(--pivot-y);
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.restock__mystery-btn:hover .ghost-pack,
.restock__mystery-btn:focus-visible .ghost-pack {
  transform: rotate(2.6deg);
}

.restock__mystery-btn:active .ghost-pack {
  transform: rotate(0.8deg);
}

/* The question is printed where a real pack prints its wordmark — the same
   condensed face at the same station on the pouch, struck in ghost ink so it
   stays part of the silhouette and breathes with it. */
.restock__mystery {
  display: grid;
  height: 100%;
  padding-bottom: 20cqw;
  place-items: center;
  color: rgb(var(--ink-rgb) / 0.17);
  font-family: var(--font-condensed);
  font-size: 40cqw;
  font-weight: 600;
  font-stretch: condensed;
  line-height: 1;
  transition: color 220ms ease;
  user-select: none;
}

.restock__mystery-btn:hover .restock__mystery,
.restock__mystery-btn:focus-visible .restock__mystery {
  color: rgb(var(--ink-rgb) / 0.34);
}

/* A quiet placeholder for the holographic authenticity seal used by stocked
   packs. It reuses the exact globe + .COM die, but stays flat ghost ink. */
.restock__seal-mark {
  position: absolute;
  bottom: 6cqw;
  left: 50%;
  display: block;
  width: 30cqw;
  height: 30cqw;
  color: rgb(var(--ink-rgb) / 0.17);
  pointer-events: none;
  transform: translateX(-50%);
  transition: color 220ms ease;
}

.restock__seal-mark::after {
  background: currentColor;
  filter: none;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  transition: none;
}

.restock__mystery-btn:hover .restock__seal-mark,
.restock__mystery-btn:focus-visible .restock__seal-mark {
  color: rgb(var(--ink-rgb) / 0.34);
}

/* The board loses its farthest bays as the card narrows, the ghost always last. */
@media (max-width: 1360px) {
  .restock__bay--c {
    display: none;
  }
}

@media (max-width: 940px) {
  .restock__bay--a {
    display: none;
  }
}

@media (max-width: 760px) {
  .restock {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On a phone the packs hang right above this card — the empty bay would just
     be a tall gray hole between them and the copy. The words carry it alone. */
  .restock__wall {
    display: none;
  }

  .restock__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .restock__write,
  .restock__dnbar {
    justify-content: center;
  }
}

/* ---- The shelf below the floor ---------------------------------------- */

/* Container queries are this page's floor (Chrome 105, Safari 16, Firefox 110), and
   an engine under it cannot resolve a single cqw: the header has no height, the hooks
   and the price sticker collapse to nothing, and what is left is not a pack.

   So the pack is pinned to the one width the whole design was drawn at — 300px, the
   figure every ratio above was divided out of — and the parts that would otherwise
   vanish are stated at that width, 1cqw being 3px. This is a floor, not a second copy
   of the design: only the values whose loss breaks the object are here, the polish
   above is allowed to stay behind, and nothing in it is worth keeping in step by hand.
   The bare board's bays take the same 300px so the one shelf keeps one scale. */
@supports not (container-type: inline-size) {
  :root {
    --pack-min: 300px;
    --pack-max: 300px;
  }

  .restock__bay {
    width: min(300px, 100%);
  }

  .peg-cell > * {
    --header-height: 84px;
    --pivot-y: 11.65px;
    --hook-offset: 25px;
    --pouch-seal-depth: 4px;
    --card-floor-gap: 2px;
  }

  /* Safari 15 and older do not have container units. Keep the physical pack at
     its original 300px drawing size and provide definite heights for the three
     boxes that otherwise relied on aspect-ratio. */
  .ghost-pack__pouch,
  .plastic-pouch {
    height: 375px;
  }

  .logo-card {
    height: 348px;
  }

  .peg-cell.is-lifted .pack-enter {
    transform: translate3d(0, -4.2px, 0) rotateX(9deg);
  }

  .hook-rear {
    width: 18px;
    height: calc(var(--hook-offset) + var(--pivot-y) + 4px);
  }

  .hook-mount {
    top: 1px;
    width: 10px;
    height: 8px;
  }

  .hook-wire {
    top: 7px;
    width: 4px;
    height: calc(100% - 8px);
  }

  .hook-front {
    top: calc(var(--hook-offset) + var(--pivot-y) - 5px);
    width: 12px;
    height: 10px;
  }

  .hook-front::before {
    top: 3px;
    right: 8px;
    width: 14px;
    height: 4px;
  }

  .cardboard-label {
    right: 12px;
    bottom: 10px;
    left: 12px;
    font-size: 13px;
  }

  .domain-card__seal {
    left: auto;
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    height: 70px;
    min-height: 70px;
    max-height: 70px;
    border-width: 1px;
    border-radius: 3px;
    background: #c8cecf;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28);
    filter: none;
    transition: none;
  }

  .domain-card__seal::after {
    background: #6f797d;
    filter: none;
    transition: none;
  }

  .domain-card__seal::before {
    bottom: 5px;
    font-size: 8px;
  }

  .price-sticker {
    top: 7px;
    right: 8px;
    width: 70px;
    height: 30px;
  }

  .price-sticker__value {
    font-size: 13px;
  }

  .domain-card-content {
    padding: 25px 18px 8px;
  }

  .domain-card__identity {
    gap: 14px;
    padding: 5px 0 14px;
  }

  .domain-card__icon {
    width: 46px;
    height: 46px;
    filter:
      drop-shadow(0 -0.27px 0.27px rgb(255 255 255 / 0.7))
      drop-shadow(0 1.56px 1.32px rgb(18 14 18 / 0.32));
  }

  .domain-card__name {
    font-size: 32px;
    text-shadow:
      0 -0.54px 0.24px rgb(255 255 255 / 0.78),
      0 1.5px 1.26px rgb(18 14 18 / 0.3);
  }

  .domain-card__footer {
    width: calc(100% + 16px);
    margin-inline: -8px;
    gap: 8px 9px;
  }

  .domain-card__address {
    padding-bottom: 2px;
    font-size: 15px;
  }

  .domain-card__qr {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    height: 70px;
    min-height: 70px;
    max-height: 70px;
    padding: 9px;
    border-width: 1px;
    border-radius: 2px;
  }

  .domain-card__stamp {
    --stamp-block: 70px;
    --stamp-edge: 3px;
    --stamp-gap: 10px;
    grid-template-columns: 70px minmax(0, 1fr);
    grid-template-rows: 70px;
    gap: 10px;
    padding: 3px;
    border-width: 1px;
    border-radius: 4px;
  }

  .domain-card__code {
    grid-template-columns: 70px 70px;
    grid-template-rows: 70px;
    gap: 10px;
  }

  .domain-card__code::before {
    left: -6px;
    border-left-width: 1px;
  }

  .domain-card__qr::after {
    left: calc(100% - 1px);
    width: 9px;
    height: 20px;
  }

  .domain-card__scan {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    height: 70px;
    min-height: 70px;
    max-height: 70px;
    gap: 2px;
    padding: 6px;
  }

  .domain-card__scan-lead {
    font-size: 17px;
  }

  .domain-card__scan-call {
    font-size: 28px;
  }

  .domain-card__scan::before,
  .domain-card__scan::after {
    right: 4px;
    left: 4px;
    height: 14px;
    border-width: 5px;
  }

  .domain-card__scan::before {
    top: 4px;
    border-radius: 7px 7px 0 0;
  }

  .domain-card__scan::after {
    bottom: 4px;
    border-radius: 0 0 7px 7px;
  }

  .restock__mystery {
    padding-bottom: 60px;
    font-size: 120px;
  }

  .restock__seal-mark {
    bottom: 18px;
    width: 90px;
    height: 90px;
  }
}

/* ---- Purchase inquiry sheet ------------------------------------------- */

/* An engine without <dialog> (Safari 15.3 and older) treats it as a plain block, and
   the whole sheet — form, hidden fields and all — prints at the foot of the shelf.
   Only the UA stylesheet was keeping it out of the page; say it here too, so the
   markup does not depend on having one. script.js already checks for showModal. */
dialog:not([open]) {
  display: none;
}

.inquiry {
  width: min(560px, calc(100vw - 32px));
  max-height: min(calc(100vh - 40px), 800px);
  max-height: min(calc(100dvh - 40px), 800px);
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--sheet-line);
  border-radius: 22px;
  box-shadow:
    0 8px 22px rgb(var(--shadow-rgb) / 0.14),
    0 32px 90px rgb(var(--shadow-rgb) / 0.28);
}

.inquiry::backdrop {
  background: rgb(29 29 31 / 0.34);
  -webkit-backdrop-filter: blur(10px) saturate(0.9);
  backdrop-filter: blur(10px) saturate(0.9);
}

.inquiry[open] {
  animation: inquiry-in 420ms cubic-bezier(0.3, 1.24, 0.36, 1);
}

.inquiry[open]::backdrop {
  animation: inquiry-fade 300ms ease-out;
}

.inquiry[data-closing] {
  animation: inquiry-out 170ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

.inquiry[data-closing]::backdrop {
  animation: inquiry-fade 170ms ease-in reverse forwards;
}

.inquiry[data-state="error"] {
  animation: inquiry-shake 320ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes inquiry-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
}

@keyframes inquiry-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.975);
  }
}

@keyframes inquiry-fade {
  from {
    opacity: 0;
  }
}

/* The shake rides the translate property so it never fights the open and
   close animations, which own transform. */
@keyframes inquiry-shake {
  10%,
  90% {
    translate: -1px 0;
  }

  20%,
  80% {
    translate: 2px 0;
  }

  30%,
  50%,
  70% {
    translate: -3px 0;
  }

  40%,
  60% {
    translate: 3px 0;
  }
}

.inquiry__body {
  display: grid;
  gap: 22px;
  max-height: inherit;
  padding: 26px 30px 30px;
  overflow-y: auto;
}

.inquiry__body:focus {
  outline: none;
}

.inquiry__head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.inquiry__eyebrow {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.inquiry__number {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.inquiry__x {
  display: grid;
  width: 44px;
  height: 44px;
  margin: -8px -10px 0 0;
  padding: 0;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.inquiry__x:hover {
  color: var(--ink);
  background: var(--sheet-soft);
}

.inquiry__x:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.inquiry__x svg {
  width: 19px;
  height: 19px;
}

.inquiry__identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sheet-line);
}

/* Opened from the end-of-shelf CTA, the sheet carries no pack: the identity row
   steps aside and a plain line of framing takes its place. */
.inquiry[data-mode="general"] .inquiry__identity {
  display: none;
}

.inquiry__intro {
  margin: 0;
  padding-bottom: 20px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  border-bottom: 1px solid var(--sheet-line);
}

.inquiry__intro[hidden] {
  display: none;
}

.inquiry__chip {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  color: #1c201e;
  background: #e7e6e1;
  border: 1px solid rgb(29 29 31 / 0.08);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
}

.inquiry__chip svg {
  width: 34px;
  height: 34px;
}

/* The chip clones the card icon, which carries an embossed relief filter. In the
   flat sheet that reads as an out-of-place drop shadow, so lay the icon flat. */
.inquiry__chip .domain-card__icon {
  filter: none;
}

.inquiry__names {
  display: grid;
  gap: 1px;
  min-width: 0;
}

/* Ellipsis needs overflow: hidden, and hidden clips both axes — so the line box
   has to leave room for descenders itself. At line-height 1 the box is exactly
   the font size and names like PromptList lose the tail of the p. The leading
   below carries the descenders; the row gap shrinks to keep the optical rhythm. */
.inquiry__name {
  overflow: hidden;
  font-family: var(--font-condensed);
  /* Fits the longest name in the set (Weightlessness) without an ellipsis. */
  font-size: 33px;
  font-weight: 600;
  font-stretch: condensed;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.inquiry__domain {
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.inquiry__price {
  justify-self: end;
  padding: 10px 13px;
  color: var(--price-ink);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: var(--price-bg);
  border: 1px solid rgb(51 39 15 / 0.16);
  border-radius: 4px;
  box-shadow:
    0 1px 1px rgb(48 30 17 / 0.18),
    inset 0 0.5px 0 rgb(255 255 255 / 0.34);
  rotate: -2.5deg;
}

/* The tag gets slapped on a beat after the sheet lands. */
.inquiry[open] .inquiry__price {
  animation: inquiry-tag-in 340ms cubic-bezier(0.2, 1.4, 0.3, 1) 240ms backwards;
}

@keyframes inquiry-tag-in {
  from {
    opacity: 0;
    scale: 1.3;
    rotate: -8deg;
  }
}

.inquiry__form {
  display: grid;
  gap: 18px;
}

.inquiry__form[hidden] {
  display: none;
}

.inquiry__field {
  display: grid;
  gap: 6px;
}

.inquiry__label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.inquiry__optional {
  margin-left: 4px;
  font-style: normal;
  opacity: 0.55;
}

.inquiry__field input,
.inquiry__field textarea {
  width: 100%;
  padding: 13px 15px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  background: var(--sheet-soft);
  border: 1px solid var(--sheet-line);
  border-radius: 12px;
}

.inquiry__field textarea {
  resize: vertical;
  min-height: 130px;
}

.inquiry__field input::placeholder,
.inquiry__field textarea::placeholder {
  color: rgb(var(--muted-rgb) / 0.74);
}

.inquiry__field input:focus-visible,
.inquiry__field textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
}

.inquiry__field input:user-invalid,
.inquiry__field textarea:user-invalid {
  border-color: rgb(192 57 43 / 0.55);
}

.inquiry__botcheck {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.inquiry__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
}

.inquiry__hint {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.35;
}

.inquiry__hint svg {
  flex: none;
  width: 15px;
  height: 15px;
  opacity: 0.8;
}

.inquiry__send {
  flex: none;
  padding: 14px 24px;
  color: var(--button-ink);
  -webkit-font-smoothing: antialiased;
  font-size: 15.5px;
  font-weight: 600;
  background: var(--button);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform 140ms ease,
    opacity 140ms ease;
}

.inquiry__send:hover {
  transform: translateY(-1px);
}

.inquiry__send:active {
  transform: translateY(0) scale(0.98);
}

.inquiry__send:disabled {
  opacity: 0.62;
  cursor: default;
  transform: none;
}

.inquiry__send:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.inquiry[data-state="sending"] .inquiry__send-label {
  animation: inquiry-pulse 850ms ease-in-out infinite alternate;
}

@keyframes inquiry-pulse {
  to {
    opacity: 0.55;
  }
}

/* The second route to the same domain, on the tear-off line of a price tag:
   send an inquiry, or take it straight to the register. Only packs that carry a
   figure show it; an INQUIRE pack has no number to buy at. */
.inquiry__instant {
  margin: 4px 0 0;
  padding-top: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  border-top: 1px dashed var(--sheet-line);
}

.inquiry__instant[hidden] {
  display: none;
}

.inquiry__atom {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.26);
  transition: border-color 140ms ease;
}

.inquiry__atom:hover {
  border-bottom-color: var(--ink);
}

.inquiry__atom:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-bottom-color: transparent;
  border-radius: 2px;
}

.inquiry__atom svg {
  width: 13px;
  height: 13px;
  margin-left: 3px;
  vertical-align: baseline;
  opacity: 0.7;
}

.inquiry__done {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 22px 6px 6px;
  text-align: center;
  animation: inquiry-done-in 340ms ease-out;
}

.inquiry__done[hidden] {
  display: none;
}

@keyframes inquiry-done-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

/* The confirmation moment: a rubber stamp slams onto the slip. */
.inquiry__stamp {
  margin-bottom: 12px;
  padding: 12px 11px 12px 17px;
  color: var(--stamp);
  font-family: var(--font-mono);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.32em;
  line-height: 1;
  text-transform: uppercase;
  border: 3px solid currentColor;
  border-radius: 7px;
  rotate: -7deg;
  animation: inquiry-stamp-in 460ms cubic-bezier(0.16, 1.4, 0.3, 1) 180ms backwards;
}

@keyframes inquiry-stamp-in {
  from {
    opacity: 0;
    filter: blur(2px);
    scale: 1.75;
    rotate: -14deg;
  }

  62% {
    opacity: 1;
    filter: blur(0);
    scale: 0.94;
    rotate: -6.2deg;
  }
}

.inquiry__done-title {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.inquiry__done-note {
  max-width: 36ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.inquiry__close {
  margin-top: 10px;
  padding: 10px 20px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  background: var(--sheet-soft);
  border: 1px solid var(--sheet-line);
  border-radius: 999px;
  cursor: pointer;
}

.inquiry__close:hover {
  background: color-mix(in srgb, var(--sheet-soft) 60%, var(--sheet-line));
}

.inquiry__close:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Phones keep the same object and colour system, but not every microscopic material
   pass. A long shelf of filtered, blended layers is particularly costly in WebKit:
   scrolling has to rasterise cards entering the viewport while Safari also resizes
   its browser chrome. Four fixed foil layers preserve each label's individual rainbow
   and flare; the invisible paper grain, animated sheen and full-surface filter are
   reserved for devices that can actually hover and reveal them. */
@media (any-pointer: coarse) {
  @supports ((mask-image: url("#m")) or (-webkit-mask-image: url("#m"))) {
    .domain-card__seal {
      background-image:
        linear-gradient(
          var(--foil-angle, 100deg),
          transparent 0 34%,
          rgb(255 255 255 / 0.04) 39.5%,
          rgb(255 255 255 / 0.16) 43%,
          rgb(255 255 255 / 0.62) 46.5%,
          rgb(255 255 255 / 0.27) 48.5%,
          rgb(220 244 255 / 0.08) 52%,
          transparent 58.5% 100%
        ),
        linear-gradient(
          var(--foil-angle, 100deg),
          transparent 0 29%,
          rgb(95 177 255 / 0.22) 35%,
          rgb(133 79 255 / 0.64) 41%,
          rgb(255 59 177 / 0.69) 47%,
          rgb(255 207 72 / 0.63) 52%,
          rgb(62 226 165 / 0.59) 57%,
          rgb(36 207 255 / 0.58) 61%,
          transparent 69% 100%
        ),
        radial-gradient(
          circle at 50% var(--foil-bloom-y, 42%),
          rgb(255 255 255 / 0.5) 0 5%,
          rgb(83 224 255 / 0.44) 12%,
          rgb(151 82 255 / 0.4) 22%,
          rgb(255 70 174 / 0.36) 32%,
          rgb(255 204 72 / 0.3) 42%,
          rgb(63 226 164 / 0.22) 51%,
          transparent 64%
        ),
        linear-gradient(
          190deg,
          #f4f6f5 0 8%,
          #b9c1c3 23%,
          #e9edeb 40%,
          #9ca6a9 56%,
          #dce1df 72%,
          #a8b1b3 86%,
          #f1f3f2 100%
        );
      background-position:
        var(--sheen-x, 32%) 0,
        var(--sheen-x, 32%) 0,
        var(--sheen-x, 32%) 50%,
        0 0;
      background-size:
        220% 100%,
        220% 100%,
        220% 220%,
        100% 100%;
      background-repeat: no-repeat;
      background-blend-mode: screen, color, screen, normal;
      filter: none;
      transition: none;
    }

    /* Quietly angled seals keep only their silver substrate on touch devices. This
       avoids a per-card saturation filter while preserving the same no-rainbow rest
       state used by the richer desktop rendering. */
    .peg-cell[data-foil-quiet="true"] .domain-card__seal {
      background-image:
        linear-gradient(
          var(--foil-angle, 100deg),
          transparent 0 34%,
          rgb(255 255 255 / 0.04) 39.5%,
          rgb(255 255 255 / 0.16) 43%,
          rgb(255 255 255 / 0.62) 46.5%,
          rgb(255 255 255 / 0.27) 48.5%,
          rgb(220 244 255 / 0.08) 52%,
          transparent 58.5% 100%
        ),
        linear-gradient(
          190deg,
          #f4f6f5 0 8%,
          #b9c1c3 23%,
          #e9edeb 40%,
          #9ca6a9 56%,
          #dce1df 72%,
          #a8b1b3 86%,
          #f1f3f2 100%
        );
      background-position: var(--sheen-x, 32%) 0, 0 0;
      background-size: 220% 100%, 100% 100%;
      background-repeat: no-repeat;
      background-blend-mode: screen, normal;
    }

    .domain-card__seal::after {
      background-image:
        var(--foil-mark-spectrum),
        var(--foil-mark-metal);
      background-position:
        var(--sheen-x, 32%) 0,
        var(--sheen-x, 32%) 0;
      background-size:
        220% 100%,
        220% 100%;
      background-blend-mode: color, normal;
      filter: none;
      transition: none;
    }

    .peg-cell[data-foil-quiet="true"] .domain-card__seal::after {
      background-image: var(--foil-mark-metal);
      background-position: var(--sheen-x, 32%) 0;
      background-size: 220% 100%;
      background-blend-mode: normal;
    }

    .peg-cell[data-foil-quiet="true"] .domain-card__seal::before {
      background-image: var(--foil-serial-metal);
      background-position: var(--sheen-x, 32%) 0;
      background-size: 220% 100%;
      background-blend-mode: normal;
    }

    .domain-card__seal::before {
      transition: none;
    }
  }

  .logo-card::before,
  .logo-card::after,
  .price-sticker::before {
    display: none;
  }

  .pouch-photo,
  .pack-swing.is-lighting .pouch-photo,
  .peg-cell.is-lifted .pouch-photo {
    filter: none;
    opacity: 0.9;
    transition: none;
  }

  .inquiry__field input,
  .inquiry__field textarea {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .inquiry {
    width: calc(100vw - 20px);
    border-radius: 18px;
  }

  .inquiry__body {
    gap: 16px;
    padding: 18px 18px 20px;
  }

  .inquiry__name {
    font-size: 26px;
  }

  .inquiry__actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }

  .inquiry__send {
    padding: 13px 20px;
  }

  .inquiry__hint {
    justify-content: center;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* No column breakpoints: auto-fit already reflows the shelf, and the pack's print
   scales with the pack. What is left is room to breathe on a phone. */
@media (max-width: 680px) {
  :root {
    /* One pack per row on a phone. The cap is set by height, not width: a pack is
       ~1.55x as tall as it is wide, so a full-width one would not fit on screen and
       you would scroll a single pack. Keep the whole object in view instead. */
    --pack-min: 240px;
    /* A custom property holds whatever it is given and only fails where it is used,
       so a lone min(300px, 46dvh) does not fall back — it takes .peg-cell's max-width
       down with it and the pack stretches the whole phone. The height clause is the
       upgrade instead. */
    --pack-max: 300px;
  }

  @supports (height: 1dvh) {
    :root {
      --pack-max: min(300px, 46dvh);
    }
  }

  .display {
    padding-right: 16px;
    padding-bottom: 32px;
    padding-left: 16px;
  }

  .display-header {
    gap: 12px;
    margin-bottom: 44px;
  }

  .header-domain-icon {
    top: calc(100% - 9px);
    width: 63px;
    height: 63px;
  }

  .blister-grid {
    gap: 50px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .pack-swing {
    will-change: auto !important;
  }

  /* The credit still appears on hover, it just stops spinning and sliding. */
  .footer-credit__tip {
    transform: translate(0, -50%);
  }

  .footer-credit:hover .footer-credit__mark,
  .footer-credit:focus-visible .footer-credit__mark {
    transform: none;
  }
}