/* HANDLED, night depot. A dark sorting floor under one sodium lamp, a particle field behind
   every page (fx.js + kit/), paper labels on top. Paper and kraft in the field; stamp red only
   for speed, stamps and the main buttons. One radius for paper (8px), round for stamps. */

:root {
  --depot: #16130f;
  --depot-2: #1d1914;
  --line-d: rgba(239, 232, 218, 0.13);
  --chalk: #efe8da;
  --chalk-2: #bfb5a5;
  --kraft: #c29a6b;
  --kraft-deep: #a98157;
  --paper: #faf9f5;
  --paper-2: #efece4;
  --ink: #1b1814;
  --ink-2: #463f36;
  --ink-3: #6a6155;
  --stamp: #c8352b;
  --stamp-dark: #a52a22;
  --on-stamp: #fff8f2;
  --tape: rgba(222, 182, 104, 0.8);
  --radius: 8px;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 30px 50px -28px rgba(0, 0, 0, 0.95);
  --gutter: clamp(16px, 4vw, 48px);
  --head: 62px;
  /* controls on the dark floor; paper surfaces swap these for ink below */
  --focus: var(--chalk);
  --hint: var(--chalk-2);
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-line: var(--paper);
  --btn-hover: #e4ddcf;
  --ghost-fg: var(--chalk);
  --ghost-line: rgba(239, 232, 218, 0.5);
  --ghost-hover: rgba(239, 232, 218, 0.09);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--depot); }
body {
  margin: 0;
  color: var(--chalk);
  font: 400 16px/1.55 var(--font);
  font-variation-settings: 'wdth' 100;
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* the light: one sodium lamp overhead, darker toward the bottom and the corners, concrete
   grain. Fixed to the screen, over the racks and under the field. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 44% 30% at 50% -4%, rgba(255, 186, 102, 0.2), transparent 72%),
    radial-gradient(ellipse 90% 68% at 50% -12%, rgba(232, 160, 80, 0.13), rgba(232, 160, 80, 0.045) 48%, transparent 76%),
    radial-gradient(ellipse 120% 95% at 50% 28%, transparent 52%, rgba(7, 5, 4, 0.5)),
    linear-gradient(to bottom, transparent 50%, rgba(7, 5, 4, 0.5));
}

/* the racks: two rows of pallet racking loaded with parcels, down both edges, under the light.
   Each strip repeats its art every --tile px; fx.js slides it slower than the page (scroll x
   data-speed, wrapped at --tile), so it never runs out and never repaints. One layer per strip,
   only as wide as the strip: a full-width layer would also hold the empty aisle in GPU memory.
   Both rows end where the copy starts (the margin outside the column plus its gutter), with the
   front row's lit aisle-side upright last, so no text ever sits on the racks; the back row
   (smaller, dimmer) shows through the gaps.
   Art: depot/rack-*.svg (near 440 x 1200, far 400 x 520), drawn for the left; -r is mirrored. */
.depot {
  --tile-n: 1200px;
  --tile-f: 520px;
  --vw: 100vw;
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  container-type: inline-size;
}
/* the column's width without the scrollbar */
@supports (width: 1cqw) { .depot { --vw: 100cqw; } }
.rack {
  position: absolute;
  top: 0;
  width: min(var(--art), calc(max(0px, (var(--vw) - 1180px) / 2) + var(--gutter) - 2px));
  height: calc(100vh + var(--tile));
  height: calc(100lvh + var(--tile));
  background-repeat: repeat-y;
  background-size: auto var(--tile);
  will-change: transform;
}
.rack.l { left: 0; background-position: right top; }
.rack.r { right: 0; background-position: left top; }
.rack.near { --tile: var(--tile-n); --art: calc(var(--tile-n) * 11 / 30); }
.rack.far { --tile: var(--tile-f); --art: calc(var(--tile-f) * 10 / 13); }
.rack.near.l { background-image: url(/depot/rack-near-l.svg); }
.rack.near.r { background-image: url(/depot/rack-near-r.svg); }
.rack.far.l { background-image: url(/depot/rack-far-l.svg); }
.rack.far.r { background-image: url(/depot/rack-far-r.svg); }
@media (max-width: 1280px) { .depot { --tile-n: 1080px; --tile-f: 468px; } }
@media (max-width: 900px) { .depot { --tile-n: 900px; --tile-f: 390px; } }
@media (max-width: 560px) { .depot { --tile-n: 480px; --tile-f: 210px; } }
::selection { background: var(--stamp); color: var(--on-stamp); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus-visible {
  position: fixed; z-index: 90; top: 10px; left: 10px; width: auto; height: auto; clip-path: none;
  padding: 10px 14px; border-radius: var(--radius); background: var(--paper); color: var(--ink); font-weight: 700;
  outline-color: var(--stamp);
}

.wrap { width: min(1180px, 100%); margin: 0 auto; padding: 0 var(--gutter); }

/* the field sits behind everything; pages scroll over it */
#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
main, footer { position: relative; z-index: 1; }
/* pages render after the first API call: hold the space so the footer never jumps */
main { min-height: calc(100svh - var(--head)); }
.stage { position: relative; min-width: 0; }

/* paper surfaces: ink text and ink controls */
.label, .slip, .step, .due, .tag, .nom, .meter, .receipt, .trust, .err, .toast {
  --focus: var(--ink);
  --hint: var(--ink-2);
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-line: var(--ink);
  --btn-hover: var(--ink-2);
  --ghost-fg: var(--ink);
  --ghost-line: var(--ink);
  --ghost-hover: rgba(27, 24, 20, 0.08);
  color: var(--ink);
}

/* copy straight on the field gets a dark halo so particles never cut into it */
.hero-h, .hero-more, .phead-copy, .band-copy, .pin-copy, .words, .stats, .scanh, .timeline, .daily > div > h3, .mine h2 {
  text-shadow: 0 1px 2px rgba(16, 13, 10, 0.95), 0 0 24px rgba(16, 13, 10, 0.75);
}

/* ── header ───────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 30;
  background: rgba(18, 15, 12, 0.84);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-d);
}
.top .wrap { display: flex; align-items: center; gap: 20px; height: var(--head); }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--chalk); font-weight: 900; font-variation-settings: 'wdth' 70; font-size: 1.5rem; letter-spacing: 0.01em; }
.mark svg, .mark img { width: 34px; height: 34px; flex: none; }
.nav { display: flex; gap: 4px; margin-left: auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { text-decoration: none; padding: 8px 12px; border-radius: var(--radius); font-weight: 600; font-size: 0.95rem; white-space: nowrap; color: var(--chalk-2); }
.nav a:hover { color: var(--chalk); background: rgba(239, 232, 218, 0.08); }
.nav a[aria-current='page'] { background: var(--paper); color: var(--ink); }
.nav a:focus-visible { outline-offset: -3px; }

/* ── buttons + fields ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: var(--radius);
  border: 2px solid var(--btn-line); background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; text-decoration: none; text-shadow: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn.red { background: var(--stamp); border-color: var(--stamp-dark); color: var(--on-stamp); }
.btn.red:hover { background: var(--stamp-dark); }
.btn.ghost { background: transparent; border-color: var(--ghost-line); color: var(--ghost-fg); }
.btn.ghost:hover { background: var(--ghost-hover); border-color: var(--ghost-fg); }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 0.9rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 600; font-size: 0.9rem; }
.input, select.input, textarea.input { width: 100%; min-height: 46px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
textarea.input { min-height: 84px; resize: vertical; }
.input::placeholder { color: #776d60; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.seg button { border: 0; background: transparent; color: var(--ink); padding: 10px 18px; font-weight: 700; cursor: pointer; }
.seg button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.seg button:focus-visible { outline-offset: -5px; outline-color: var(--stamp); }
.hint { color: var(--hint); font-size: 0.92rem; }
.err { background: var(--paper); border-left: 6px solid var(--stamp); padding: 10px 14px; border-radius: var(--radius); font-weight: 600; }

/* the shipping address form: an example under each field, what's wrong next to it, the label as it will read */
.addr { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
/* a field beside a taller one (its error showing) keeps its own height; a field scrolled to stays clear of the sticky header */
.addr .field { align-content: start; scroll-margin-top: calc(var(--head) + 24px); }
.field > span i { font-style: normal; font-weight: 400; color: var(--hint); }
.field .ex { color: var(--hint); font-size: 0.8rem; line-height: 1.35; }
.field .ferr { color: var(--stamp-dark); font-size: 0.86rem; font-weight: 700; line-height: 1.35; }
.field .ferr::before { content: '\2715\00a0'; }
.field .fwarn { color: var(--ink); font-size: 0.82rem; font-weight: 700; }
.field.bad .input { border-color: var(--stamp); box-shadow: 0 0 0 1px var(--stamp); }
.field.flag { border-left: 4px solid var(--stamp); padding-left: 10px; }
.addrprev { border: 2px dashed var(--ink-3); border-radius: var(--radius); padding: 10px 14px; background: var(--paper-2); }
.addrprev .k { display: block; font: 700 0.66rem/1.4 var(--mono); letter-spacing: 0.08em; color: var(--ink-2); margin-bottom: 4px; }
.addrprev .lines { font: 500 0.88rem/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.addrprev .lines .hint { font-family: var(--font); }
.fixnote { border-left: 6px solid var(--stamp); }
.fixnote .reasons { margin: 8px 0; padding-left: 20px; }
.fixnote .reasons li { margin: 4px 0; font-weight: 600; }

/* ── the label (signature) ────────────────────────────── */
.label { position: relative; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); font-family: var(--mono); font-size: 0.86rem; }
.label .cell { padding: 12px 16px; border-top: 2px solid var(--ink); }
.label .cell:first-child { border-top: 0; }
.label .k { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-2); }
.label .v { font-weight: 600; }
/* the receipt under an order's TOTAL */
.label .sum { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; margin: 8px 0 0; font-size: 0.78rem; }
.label .sum dt { color: var(--ink-2); }
.label .sum dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.label .sumnote { margin: 8px 0 0; font: 400 0.8rem/1.45 var(--font); color: var(--ink-2); }
.refundform { display: flex; gap: 8px; flex-wrap: wrap; }
.refundform .input { flex: 1 1 220px; min-width: 0; font-family: var(--mono); font-size: 0.82rem; }
.label .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.label .brand { font-family: var(--font); font-weight: 900; font-variation-settings: 'wdth' 62; font-size: 1.7rem; line-height: 1; letter-spacing: 0.01em; }
.label .svc { font-family: var(--font); font-variation-settings: 'wdth' 62; font-weight: 900; font-size: 2.6rem; line-height: 0.9; border: 3px solid var(--ink); padding: 4px 8px; border-radius: 4px; }
.label .to { display: flex; align-items: baseline; gap: 4px; font-family: var(--font); font-variation-settings: 'wdth' 70; font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.05; overflow-wrap: anywhere; }
.label .to input { flex: 1; min-width: 0; border: 0; border-bottom: 3px dashed var(--ink-3); background: transparent; color: var(--ink); font: inherit; padding: 0 0 2px; outline: none; }
.label .to input:focus { border-bottom-color: var(--stamp); }
.label .to input::placeholder { color: #8a8073; }
/* two lines held: the X lookup swaps one-line and two-line answers in here */
.label .who { min-height: 3.1em; color: var(--ink-2); font-size: 0.8rem; margin-top: 6px; }
.label .routing { display: flex; align-items: center; gap: 14px; }
.label .code { font-family: var(--font); font-variation-settings: 'wdth' 62; font-weight: 900; font-size: 2.4rem; line-height: 1; }
.label .btn { font-family: var(--font); }
.barcode { height: 64px; width: 100%; display: block; }

.tape { position: absolute; z-index: 2; width: 190px; height: 38px; background: var(--tape); color: #6b4a22; font: 700 0.7rem/38px var(--mono); letter-spacing: 0.2em; text-align: center; overflow: hidden; white-space: nowrap; clip-path: polygon(0 6%, 4% 0, 9% 7%, 14% 1%, 100% 0, 97% 92%, 92% 100%, 86% 94%, 80% 100%, 0 100%); }

/* rubber stamps: one shape, ink texture, slight rotation */
.stamp { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border: 3px solid currentColor; border-radius: 10px; color: var(--stamp); font-family: var(--font); font-weight: 900; font-variation-settings: 'wdth' 70; letter-spacing: 0.06em; line-height: 1.1; transform: rotate(-5deg); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='1.4' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.1'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='1.4' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.1'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stamp.ink { color: var(--ink); }
.stamp.land { animation: land 0.32s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes land { from { transform: rotate(-12deg) scale(1.6); opacity: 0; } to { transform: rotate(-5deg) scale(1); opacity: 1; } }

/* ── type on the floor ────────────────────────────────── */
.pageh, .band h2, .pin h2 {
  margin: 0 0 10px; font-weight: 900; font-variation-settings: 'wdth' 66;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 0.95; letter-spacing: -0.005em; text-wrap: balance;
}
.sub { max-width: 52ch; margin: 0 0 24px; color: var(--chalk-2); font-size: 1.05rem; }
.sub a { color: var(--chalk); text-underline-offset: 3px; }

/* ── hero: type a handle, the field spells it ─────────── */
.hero { position: relative; padding: clamp(10px, 2.4vh, 28px) 0 clamp(28px, 5vh, 56px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-areas: 'stage label' 'title label' 'more label';
  grid-template-rows: minmax(26vh, 1fr) auto auto;
  column-gap: clamp(28px, 5vw, 72px);
  min-height: calc(100svh - var(--head) - clamp(38px, 7.4vh, 84px));
}
.hero-stage { grid-area: stage; }
.hero-h { grid-area: title; align-self: end; margin: 0; font-weight: 900; font-variation-settings: 'wdth' 62; font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 0.9; letter-spacing: -0.005em; text-wrap: balance; }
.hero-more { grid-area: more; }
.hero .lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 36ch; margin: 18px 0 24px; color: var(--chalk-2); }
.hero .acts { display: flex; gap: 12px; flex-wrap: wrap; }
.printslot { grid-area: label; align-self: center; position: relative; padding-top: 12px; }
.printslot::before { content: ''; position: absolute; top: 0; left: 6%; right: 6%; height: 12px; border-radius: 6px; background: #0b0907; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(239, 232, 218, 0.09); }
.hero .label { transform: rotate(-1.6deg); }
.hero .tape { top: -14px; left: 36%; transform: rotate(-4deg); }
.printing { animation: print 1.15s steps(9, end) both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-28px) rotate(-1.6deg); } to { clip-path: inset(0 0 0 0); transform: translateY(0) rotate(-1.6deg); } }

/* ── the belt: recent gifts ride past as you scroll ───── */
.belt {
  position: relative; z-index: 1; height: 62px; overflow: hidden;
  border-block: 1px solid var(--line-d);
  background: repeating-linear-gradient(90deg, rgba(239, 232, 218, 0.045) 0 2px, transparent 2px 46px), #110e0b;
}
.belt .track { display: flex; align-items: center; gap: 14px; width: max-content; height: 100%; padding-left: 14px; will-change: transform; }
.belt .chip { display: inline-flex; align-items: baseline; gap: 10px; padding: 7px 12px 8px; border-radius: 4px; background: var(--paper); color: var(--ink); box-shadow: 0 8px 14px -8px rgba(0, 0, 0, 0.95); white-space: nowrap; font: 600 0.74rem var(--mono); }
.belt .chip b { font: 900 1.05rem/1 var(--font); font-variation-settings: 'wdth' 66; }
.belt .chip i { font-style: normal; color: var(--ink-2); }
.belt-empty { margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 16px; text-align: center; color: var(--chalk-2); font: 500 0.82rem var(--mono); }

/* ── how a gift travels: pinned, one scan per screen ──── */
/* The sticky layer stays in the flow (no negative margin): a sticky box is held inside its
   section by its margin box, so -100svh would keep it stuck over the next section. */
.pin { position: relative; z-index: 1; }
.pin .stick { position: sticky; top: 0; z-index: 1; height: 100svh; }
.stick-in {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: 'copy stage';
  column-gap: clamp(24px, 4vw, 56px); align-items: center; height: 100%; padding-top: var(--head);
}
.pin-copy { grid-area: copy; }
/* capped so the ~1,800 particles stay dense enough to read */
.pin-stage { grid-area: stage; justify-self: center; width: min(100%, 520px); height: min(60svh, 470px); }
.pstep { height: 70svh; }
.pin .progress { display: flex; gap: 8px; margin: 4px 0 26px; }
.pin .progress i { position: relative; width: 3.2rem; height: 3px; overflow: hidden; background: rgba(239, 232, 218, 0.18); }
.pin .progress b { position: absolute; inset: 0; background: var(--stamp); transform-origin: left; transform: scaleX(0); }
.steps-ui { position: relative; list-style: none; margin: 0; padding: 0; min-height: 12.5rem; }
.steps-ui li { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(16px); transition: opacity 0.45s, transform 0.45s var(--ease); }
.steps-ui li.on { opacity: 1; transform: none; }
.steps-ui .n { display: block; font-weight: 900; font-variation-settings: 'wdth' 62; font-size: 3.4rem; line-height: 0.9; color: var(--stamp); }
.steps-ui b { display: block; margin: 10px 0 6px; font-weight: 800; font-variation-settings: 'wdth' 80; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.1; }
.steps-ui p { margin: 0; max-width: 40ch; color: var(--chalk-2); font-size: 1.05rem; }

/* ── the line that lights up as you read it ───────────── */
.manifesto { position: relative; z-index: 1; padding: clamp(90px, 20vh, 200px) 0; }
.words { margin: 0; max-width: 17ch; font-weight: 800; font-variation-settings: 'wdth' 72; font-size: clamp(2.1rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.01em; }
.words span { opacity: 0.16; transition: opacity 0.2s; }
.words span.on { opacity: 1; }

/* ── home bands and page heads: copy on one side, the shape on the other ── */
.band { position: relative; z-index: 1; padding: clamp(56px, 9vw, 120px) 0; }
.band-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'copy stage' 'body body';
  column-gap: clamp(24px, 4vw, 56px); row-gap: clamp(22px, 3vw, 40px); align-items: center;
}
.band-copy { grid-area: copy; }
.band-copy .sub { margin-bottom: 20px; }
.band-grid > .stage { grid-area: stage; height: clamp(220px, 26vw, 330px); }
.band-body { grid-area: body; min-width: 0; }
.phead { position: relative; z-index: 1; padding: clamp(18px, 3.5vw, 44px) 0 clamp(8px, 2vw, 20px); }
.phead-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'copy stage'; column-gap: clamp(24px, 4vw, 56px); align-items: center; }
.phead-copy { grid-area: copy; min-width: 0; }
.phead-copy .sub { margin-bottom: 0; }
.phead-copy form { margin-top: 18px; }
.phead .stage { grid-area: stage; height: clamp(190px, 22vw, 300px); }
.page { position: relative; z-index: 1; padding: clamp(14px, 2.4vw, 28px) 0 90px; }

/* hang tags (the shelf) */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px 20px; }
.tag { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 14px 14px; clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px); }
.tag::before { content: ''; position: absolute; top: 10px; left: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--depot); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); }
.tag .ph { aspect-ratio: 1; background: #fff; border-radius: 6px; display: grid; place-items: center; overflow: hidden; margin-bottom: 12px; }
.tag .ph img { width: 82%; height: 82%; object-fit: contain; }
.tag .t { font-weight: 600; line-height: 1.3; font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.tag .blurb { color: var(--ink-3); font-size: 0.85rem; margin: 4px 0 10px; }
.tag .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tag .price { font-family: var(--mono); font-weight: 700; font-size: 1rem; }
.tag:nth-child(3n + 2) { transform: rotate(0.8deg); }
.tag:nth-child(3n) { transform: rotate(-0.6deg); }

.slip { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: grid; gap: 12px; }
.slip h3 { margin: 0; font-size: 1.15rem; }
#modeFields { display: grid; gap: 12px; }
.page .slip.paste { margin-bottom: 30px; }

/* gift wall */
.wall { columns: 4 230px; column-gap: 18px; }
.mini { display: block; break-inside: avoid; margin: 0 0 18px; position: relative; text-decoration: none; }
.mini .label { font-size: 0.78rem; }
.mini .label .cell { padding: 10px 12px; }
.mini .label .cell:last-child { padding-right: 132px; }
.mini .to { font-size: 1.5rem; }
.mini .stamp { position: absolute; right: 10px; bottom: 12px; font-size: 0.78rem; background: rgba(250, 249, 245, 0.75); }
.mini .item span { font-family: var(--font); font-size: 0.86rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini .item { display: flex; gap: 10px; align-items: center; }
.mini .item img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 4px; }
.mini:focus-visible { outline-offset: 4px; }
.stats { display: flex; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; margin: 4px 0 30px; }
.stat .num { display: block; font-weight: 900; font-variation-settings: 'wdth' 62; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--chalk-2); font-size: 0.92rem; }

/* daily gift: postage meter imprint */
.daily { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.daily h3 { margin: 0 0 12px; }
.meter { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: center; padding: 20px 22px; border: 3px solid var(--stamp); border-radius: 12px; color: var(--stamp); background: var(--paper); box-shadow: var(--shadow); }
.meter .amt { font-family: var(--mono); font-weight: 800; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1; letter-spacing: -0.02em; }
.meter .eagle { width: 74px; height: 74px; }
.meter .meta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; font: 600 0.78rem var(--mono); color: var(--stamp-dark); border-top: 2px solid var(--stamp); padding-top: 10px; }
.wavy { height: 34px; width: 100%; color: var(--stamp); margin-top: 6px; }
.noms { display: grid; gap: 12px; }
.nom { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.nom img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 6px; }
.nom .h { font-family: var(--font); font-variation-settings: 'wdth' 70; font-weight: 800; font-size: 1.25rem; line-height: 1.1; }
.nom .w { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-2); }
.bar { height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--stamp); }
.trust { font: 500 0.82rem/1.5 var(--mono); background: var(--paper); border-radius: var(--radius); padding: 14px 16px; border: 2px dashed var(--ink-3); }

/* bots: a packing slip printed for machines */
.receipt { background: var(--paper); border-radius: var(--radius) var(--radius) 0 0; padding: 22px 22px 30px; font: 500 0.82rem/1.65 var(--mono); position: relative; box-shadow: var(--shadow); overflow-x: auto; }
.receipt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(-45deg, transparent 8px, var(--paper) 0) 0 0 / 16px 12px, linear-gradient(45deg, transparent 8px, var(--paper) 0) 0 0 / 16px 12px; }
.receipt pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
.receipt .c { color: var(--ink-3); }
.botgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }

/* order page */
.ordergrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: start; }
.due { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.due .bigamt { font-family: var(--mono); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.1; word-break: break-all; }
.due .cell { padding: 16px 18px; border-top: 2px solid var(--ink); }
.due .cell:first-child { border-top: 0; background: var(--ink); color: var(--paper); }
.copy { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper-2); color: var(--ink); font: 600 0.82rem var(--mono); cursor: pointer; text-align: left; word-break: break-all; text-decoration: none; }
.copy:hover { background: #e5e1d6; }
.copy .what { flex: none; font: 700 0.68rem var(--font); background: var(--ink); color: var(--paper); padding: 3px 7px; border-radius: 4px; }
.scanh { margin: 30px 0 12px; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 3px solid rgba(239, 232, 218, 0.32); }
.timeline li { position: relative; padding: 0 0 16px 18px; }
.timeline li::before { content: ''; position: absolute; left: -8px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--depot); border: 3px solid var(--chalk-2); }
.timeline li:first-child::before { background: var(--stamp); border-color: var(--stamp); }
.timeline b { display: block; }
.timeline small { color: var(--chalk-2); font-family: var(--mono); font-size: 0.75rem; }
.timeline .hint { overflow-wrap: anywhere; }
.steps { display: grid; gap: 14px; }
.step { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.step.off { background: var(--paper-2); }
.step.off h3, .step.off p { color: var(--ink-2); }
.step h3 { margin: 0 0 6px; font-size: 1.08rem; }
.code-big { font: 800 clamp(1.4rem, 3.4vw, 2rem) var(--mono); letter-spacing: 0.04em; overflow-wrap: anywhere; }

/* find */
.find-wrap { max-width: 720px; }
.mine h2 { margin: 28px 0 10px; font-size: 1.15rem; }
.mine .list { display: grid; gap: 8px; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 70; max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: var(--radius); border-left: 6px solid var(--stamp); background: var(--paper); font-weight: 600; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.95); }

footer { background: #0f0c0a; border-top: 1px solid var(--line-d); padding: 28px 0 calc(40px + env(safe-area-inset-bottom, 0px)); font: 500 0.8rem/1.7 var(--mono); color: var(--chalk-2); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; }
footer a { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }

/* ── chrome: cursor ring (fine pointers only) and the iris between pages ── */
.cursor { position: fixed; z-index: 100; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1.5px solid #f4eee2; border-radius: 50%; pointer-events: none; mix-blend-mode: difference; transition: width 0.25s, height 0.25s, margin 0.25s, background-color 0.25s, opacity 0.25s; }
/* over controls it only grows: a filled disc would invert the red buttons to cyan */
.cursor.big { width: 54px; height: 54px; margin: -27px 0 0 -27px; border-width: 2px; }
.cursor.gone, body:has(.iris.on) .cursor { opacity: 0; }
.iris { position: fixed; inset: 0; z-index: 80; pointer-events: none; background: var(--stamp); clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); transition: clip-path 0.5s cubic-bezier(0.7, 0, 0.25, 1); }
.iris.on { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); pointer-events: auto; }
.iris b {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0 16px; text-align: center;
  color: var(--on-stamp); font-weight: 900; font-variation-settings: 'wdth' 62; font-size: clamp(3.2rem, 13vw, 10rem);
  line-height: 0.9; letter-spacing: 0.02em; text-transform: uppercase;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  /* minmax(0, ...) so one long unbreakable string can't push the column past the screen */
  .daily, .ordergrid, .botgrid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'title' 'stage' 'label' 'more'; grid-template-rows: auto; row-gap: 14px; min-height: 0; }
  .hero-h { align-self: start; font-size: clamp(2.3rem, 9.6vw, 3.6rem); }
  .hero-stage { height: clamp(150px, 24svh, 240px); }
  .printslot { margin-top: 6px; }
  .band-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'stage' 'body'; }
  .band-grid > .stage { height: 170px; }
  .phead-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'stage' 'copy'; row-gap: 10px; }
  .phead .stage { height: 150px; }
  .stick-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'stage' 'copy'; grid-template-rows: auto 1fr; align-items: start; row-gap: 12px; padding-top: calc(var(--head) + 8px); }
  .pin-stage { height: 34svh; }
  .pin h2 { font-size: 2rem; }
  .pin .sub { margin-bottom: 14px; font-size: 0.98rem; }
  .pin .progress { margin-bottom: 18px; }
  .steps-ui { min-height: 11rem; }
  .steps-ui .n { font-size: 2.6rem; }
}
@media (max-width: 560px) {
  :root { --head: 56px; }
  .top .wrap { gap: 10px; }
  .mark span { display: none; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .label .svc { font-size: 1.8rem; }
  .nom { grid-template-columns: 44px 1fr; }
  .nom > :last-child { grid-column: 1 / -1; }
  .shelf { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 12px; }
  .tag { padding: 26px 10px 10px; }
  .tag .foot { flex-direction: column; align-items: stretch; }
  .stats { gap: 16px 28px; }
}
@media (pointer: coarse) { .cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .iris { display: none; }
  .words span { opacity: 1; }
  .steps-ui li { transform: none; }
}