/* stickers.supplies
   Visual system: carbonless multi-part shipping form.
   Palette taken from NCR form stock, not from a web palette.
   Committed to a single paper look. No dark variant by design. */

:root {
  color-scheme: light;

  --stock:    #f7f5ef;  /* label stock, warm paper white */
  --stock-2:  #efece2;  /* liner, recessed panels */
  --stock-3:  #e4e0d3;  /* deepest paper tone */
  --carbon:   #191713;  /* thermal print, warm near-black */
  --carbon-2: #57524a;  /* faded thermal, secondary text */
  --carbon-3: #8d8779;  /* rule lines, tertiary */
  --canary:   #f2dc52;  /* the yellow copy */
  --rose:     #e7afba;  /* the pink copy */
  --stamp:    #1b3f8f;  /* rubber stamp, ballpoint */
  --alert:    #c1341e;  /* the red priority stamp */

  --display: "Helvetica Neue", "Arial Narrow", "Liberation Sans Narrow", "Roboto Condensed", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --max: 74rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--stock);
  color: var(--carbon);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* faint liner grid, the backing paper a label peels off */
  background-image:
    repeating-linear-gradient(to right, rgba(25,23,19,.028) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, rgba(25,23,19,.028) 0 1px, transparent 1px 44px);
}

/* logical properties on purpose: .wrap owns the inline axis, section owns the
   block axis, so the two never overwrite each other through a shorthand */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; }

h1 {
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  line-height: .94;
  letter-spacing: -.028em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

h3 {
  font-size: 1.06rem;
  line-height: 1.25;
  letter-spacing: .006em;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--stamp); text-underline-offset: 3px; }

/* the vernacular of the form: every label, code and figure is monospace */
.meta {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--carbon-2);
}

.lede { font-size: clamp(1.06rem, 1.8vw, 1.25rem); color: var(--carbon-2); max-width: 46ch; }

/* ---------- structural devices ---------- */

/* tear line between parts of the form */
.perf {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--carbon-3);
  margin: 0;
  opacity: .55;
}
.perf::before, .perf::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--stock);
  border: 2px solid var(--carbon-3);
}
.perf::before { left: -6px; }
.perf::after { right: -6px; }

/* barcode rules used as section dividers */
.barcode { display: block; fill: var(--carbon); }
.barcode--rule { width: 100%; height: 12px; opacity: .3; }

section { padding-block: clamp(3rem, 6vw, 4.75rem); }

/* ---------- top rail ---------- */

.rail {
  border-bottom: 2px solid var(--carbon);
  background: var(--stock);
  position: sticky; top: 0; z-index: 20;
}
.rail__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: .7rem; padding-bottom: .7rem;
}
.brand {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.02em;
  color: var(--carbon);
  text-decoration: none;
  white-space: nowrap;
}
.brand b { background: var(--canary); padding: .1em .18em; box-decoration-break: clone; }
.rail nav { display: flex; gap: 1.4rem; align-items: center; }
/* the three nav items plus the wordmark do not fit one line on a phone */
@media (max-width: 30rem) {
  .rail__in { flex-wrap: wrap; gap: .35rem 1rem; }
  .rail nav { width: 100%; gap: 1.1rem; }
}
.rail nav a { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--carbon-2); text-decoration: none; }
.rail nav a:hover, .rail nav a:focus-visible { color: var(--carbon); text-decoration: underline; }

/* ---------- the label, the signature element ---------- */

.hero { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 62rem) { .hero { grid-template-columns: 1fr 1fr; } }

.label {
  background: #fff;
  border: 2px solid var(--carbon);
  box-shadow: 6px 6px 0 var(--stock-3), 6px 6px 0 2px var(--carbon);
  padding: 0;
  max-width: 27rem;
  width: 100%;
  position: relative;
  animation: feed 1.05s cubic-bezier(.2,.7,.3,1) both;
}
/* the print head travelling down the stock */
.label::after {
  content: "";
  position: absolute; left: -2px; right: -2px; top: 0; height: 3px;
  background: var(--carbon);
  animation: head 1.05s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes feed { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes head { from { top: 0; opacity: 1; } 92% { opacity: 1; } to { top: 100%; opacity: 0; } }

.label__row { padding: .8rem 1rem; border-bottom: 1px solid var(--carbon-3); }
.label__row:last-child { border-bottom: 0; }
.label__row--rule { border-bottom: 2px solid var(--carbon); }
.label__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  background: var(--carbon); color: var(--stock);
  padding: .55rem 1rem;
}
.label__head .meta { color: var(--stock); opacity: .78; }
.label__svc { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; }

.addr { font-family: var(--mono); font-size: .84rem; line-height: 1.5; text-transform: uppercase; }
.addr strong { font-size: 1rem; font-weight: 700; display: block; }
.addr--to strong { font-size: 1.28rem; letter-spacing: -.01em; }
.addr--from { color: var(--carbon-2); }

.label__code { text-align: center; padding: .9rem 1rem .7rem; }
.label__code svg { width: 100%; height: 54px; }
.label__num { font-family: var(--mono); font-size: .82rem; letter-spacing: .18em; margin-top: .45rem; }

.label__foot { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }

/* the point the label is making, called out under it */
.label__note {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--carbon-2); margin-top: .9rem; max-width: 27rem;
}
.label__note b { color: var(--carbon); background: var(--canary); padding: 0 .2em; font-weight: 600; }

/* ---------- fill in the blank ---------- */
/* Any figure that has not been supplied yet prints as an unfilled field.
   Never invent a number on an investor page. */
.blank {
  display: inline-block;
  min-width: 3.5ch;
  padding: 0 .45ch;
  background: var(--canary);
  border-bottom: 2px solid var(--carbon);
  font-family: var(--mono);
  font-weight: 700;
  color: var(--carbon);
  text-align: center;
}
.blank::before { content: attr(data-hint); opacity: .5; font-weight: 400; font-size: .8em; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .85rem 1.35rem;
  border: 2px solid var(--carbon);
  background: var(--carbon); color: var(--stock);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover, .btn:focus-visible { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--carbon); }
.btn--ghost { background: transparent; color: var(--carbon); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--canary); }
.btns { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.9rem; }

/* ---------- form parts, the three-stage flow ---------- */

.parts { display: grid; gap: 0; border: 2px solid var(--carbon); background: #fff; }
@media (min-width: 54rem) { .parts { grid-template-columns: repeat(3, 1fr); } }

.part { padding: clamp(1.4rem, 3vw, 2.1rem); border-bottom: 2px solid var(--carbon); }
.part:last-child { border-bottom: 0; }
@media (min-width: 54rem) {
  .part { border-bottom: 0; border-right: 2px solid var(--carbon); }
  .part:last-child { border-right: 0; }
}
/* the second copy of a carbonless form is canary, the third is pink */
.part:nth-child(2) { background: color-mix(in srgb, var(--canary) 16%, #fff); }
.part:nth-child(3) { background: color-mix(in srgb, var(--rose) 20%, #fff); }
.part__code {
  font-family: var(--display); font-weight: 700; font-size: 2.1rem;
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1;
  margin-bottom: .5rem;
}
.part p { font-size: .95rem; color: var(--carbon-2); margin-top: .55rem; }

/* ---------- manifest table ---------- */

.manifest { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .84rem; background: #fff; border: 2px solid var(--carbon); }
.manifest caption { text-align: left; padding-bottom: .7rem; }
.manifest th, .manifest td { padding: .72rem .9rem; text-align: left; border-bottom: 1px solid var(--stock-3); }
.manifest thead th { background: var(--carbon); color: var(--stock); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; }
.manifest tbody tr:last-child td { border-bottom: 0; }
.manifest tbody tr:nth-child(even) { background: var(--stock); }
.manifest td:last-child, .manifest th:last-child { text-align: right; }
/* four column variant: both figure columns are numeric, align them alike */
.manifest--wide td:nth-child(3), .manifest--wide th:nth-child(3) { text-align: right; }
.scroll { overflow-x: auto; }

.stamps { display: flex; gap: 1rem 1.4rem; flex-wrap: wrap; align-items: center; margin-top: 1.7rem; }

/* ---------- allocation bar, percentages only ---------- */

.alloc { display: flex; height: 3.4rem; border: 2px solid var(--carbon); background: #fff; overflow: hidden; }
.alloc span { display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .74rem; font-weight: 700; border-right: 2px solid var(--carbon); }
.alloc span:last-child { border-right: 0; }
.alloc__key { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin-top: .9rem; }
.alloc__key div { font-family: var(--mono); font-size: .74rem; color: var(--carbon-2); display: flex; align-items: center; gap: .5rem; }
.alloc__key i { width: .8rem; height: .8rem; border: 1px solid var(--carbon); display: inline-block; }

/* ---------- stamp ---------- */

.stamp {
  display: inline-block;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: .82rem;
  color: var(--alert);
  border: 3px solid var(--alert);
  padding: .3rem .7rem;
  transform: rotate(-3.5deg);
  opacity: .82;
}
.stamp--blue { color: var(--stamp); border-color: var(--stamp); }

/* ---------- panels ---------- */

.panel { background: #fff; border: 2px solid var(--carbon); padding: clamp(1.5rem, 3.4vw, 2.4rem); }
.panel--canary { background: color-mix(in srgb, var(--canary) 22%, #fff); }

.cols { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 54rem) { .cols--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .cols--side { grid-template-columns: 20rem 1fr; } }

.head { margin-bottom: clamp(1.6rem, 3.4vw, 2.4rem); }
.head .meta { display: block; margin-bottom: .55rem; }

.people { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .people { grid-template-columns: 1fr 1fr; } }
.person { border: 2px solid var(--carbon); background: #fff; padding: 1.3rem; }
.person h3 { margin-bottom: .1rem; }
.person .meta { display: block; margin-bottom: .8rem; }
.person p { font-size: .93rem; color: var(--carbon-2); }

/* ---------- footer ---------- */

footer { border-top: 2px solid var(--carbon); background: var(--carbon); color: var(--stock); }
footer .wrap { padding-block: 2.4rem; }
footer .meta { color: var(--stock); opacity: .62; }
footer a { color: var(--canary); }
.foot__grid { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: flex-end; }

/* ---------- a11y floor ---------- */

:focus-visible { outline: 3px solid var(--stamp); outline-offset: 3px; }

/* an investor will print this to PDF. never let the hero print blank. */
@media print {
  body { background-image: none; }
  .rail { position: static; }
  .label { animation: none; clip-path: none; box-shadow: none; }
  .label::after { display: none; }
  .btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .label::after { display: none; }
}