/* Shared ground: reset, type voices, running head, buttons, plates, stamp,
   ledger rules, footer. Everything downstream assumes a white sheet and one
   green identity mass per page. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--runhead-h) + 12px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
p,
figure,
blockquote,
ul,
ol,
dl,
dd,
dt {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--green);
  color: var(--on-green);
}

:focus-visible {
  outline: 2px solid var(--green-lit);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--green);
  color: var(--on-green);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

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

.eyebrow {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}

.eyebrow--green {
  color: var(--green-lit);
}

.mono {
  font-family: var(--mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.lede {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.prose p {
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: 1.68;
  text-wrap: pretty;
}

.prose p + p {
  margin-top: 1em;
}

.prose strong,
.prose b {
  color: var(--ink);
  font-weight: 600;
}

.prose a {
  color: var(--ink);
  border-bottom: 1px solid var(--green-line);
}

/* ---------------- identity band ---------------- */

.band {
  background: var(--green);
  color: var(--on-green);
}

.band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(1rem, 2.4vw, 2.6rem);
  align-items: end;
  padding-block: clamp(1.1rem, 2.2vw, 1.7rem) clamp(1.2rem, 2.4vw, 1.9rem);
}

.band__id {
  min-width: 0;
}

.band__kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-green-dim);
}

.band__kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--on-green);
  flex: 0 0 auto;
}

.band__no {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 0.84;
  letter-spacing: 0.005em;
  margin-top: 0.4rem;
}

.band__line {
  margin-top: 0.6rem;
  max-width: 58ch;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #dcefe3;
}

.band__data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(243, 248, 244, 0.42);
  border-left: 1px solid rgba(243, 248, 244, 0.42);
}

.band__cell {
  padding: 0.5rem 0.6rem 0.55rem;
  border-right: 1px solid rgba(243, 248, 244, 0.42);
  border-bottom: 1px solid rgba(243, 248, 244, 0.42);
}

.band__cell dt {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-green-dim);
}

.band__cell dd {
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

@media (max-width: 780px) {
  .band__inner {
    grid-template-columns: 1fr;
  }
  .band__data {
    max-width: 320px;
  }
}

/* ---------------- running head ---------------- */

.runhead {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.6vw, 1.6rem);
  min-height: var(--runhead-h);
  padding-inline: var(--pad-x);
  background: color-mix(in srgb, var(--sheet) 94%, transparent);
  border-bottom: 1px solid var(--rule-mid);
  backdrop-filter: blur(10px);
}

@supports not (backdrop-filter: blur(1px)) {
  .runhead {
    background: var(--sheet);
  }
}

.runhead__brand {
  display: block;
  flex: 0 0 auto;
  padding-block: 10px;
  line-height: 0;
}

/* The logotype is one line of Big Shoulders set solid: 581 x 100 units, so the
   image height is the cap height of the word. It steps with the viewport from
   26 px (phone) to 44 px (wide desktop), which keeps the bar's own 80 px
   rhythm at the top end and still clears the mono meta at 390 px. */
.runhead__brand img {
  height: 26px;
  width: auto;
}

@media (min-width: 421px) {
  .runhead__brand img {
    height: 30px;
  }
}

@media (min-width: 641px) {
  .runhead__brand img {
    height: 34px;
  }
}

@media (min-width: 901px) {
  .runhead__brand img {
    height: 40px;
  }
}

@media (min-width: 1101px) {
  .runhead__brand img {
    height: 44px;
  }
}

.runhead__doc {
  padding-left: clamp(0.7rem, 1.6vw, 1.6rem);
  border-left: 1px solid var(--rule-mid);
  font-family: var(--mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}

.runhead__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.6vw, 1.5rem);
  font-family: var(--mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}

.runhead__meta b {
  color: var(--ink);
  font-weight: 500;
}

.runhead__meta span + span {
  padding-left: clamp(0.7rem, 1.6vw, 1.5rem);
  border-left: 1px solid var(--rule);
}

.runhead__prog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}

.runhead__prog i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--green);
  transition: width 120ms linear;
}

@media (max-width: 780px) {
  .runhead__doc {
    display: none;
  }
  /* Keep the first cell: it carries the identity (order code, or the count of
     closed orders). Drop the supporting cells behind it instead. */
  .runhead__meta span:nth-child(n + 3) {
    display: none;
  }
}

@media (max-width: 560px) {
  .runhead__meta span:nth-child(n + 2) {
    display: none;
  }
  .runhead__meta {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }
}

/* ---------------- layout helpers ---------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  position: relative;
  padding-block: var(--section-y);
  border-top: 1px solid var(--rule-mid);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}

.section__head h2 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-h2);
  line-height: 0.88;
}

.section__head p {
  font-family: var(--mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---------------- controls ---------------- */

.btn {
  min-height: 44px;
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--rule-strong);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.78rem 1.05rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 180ms var(--ease), border-color 180ms var(--ease),
    color 180ms var(--ease);
}

.btn:hover {
  --btn-bd: var(--ink);
}

.btn:active {
  transform: translateY(1px);
}

.btn--green {
  --btn-bg: var(--green);
  --btn-fg: var(--on-green);
  --btn-bd: var(--green);
  font-weight: 500;
}

.btn--green:hover {
  --btn-bg: var(--green-deep);
  --btn-bd: var(--green-deep);
}

.btn__arrow {
  width: 14px;
  height: 10px;
  flex: 0 0 auto;
}

/* ---------------- plates ---------------- */

.figure {
  position: relative;
  margin: 0;
}

.plate {
  position: relative;
  overflow: hidden;
  /* The illustrations are drawn on white, so the plate ground is white too;
     a warmer ground would show as a seam at the hairline. */
  background: #fff;
  border: 1px solid var(--rule-mid);
}

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Registration marks inside the plate. White with a soft shadow, so they hold
   on both the white illustration grounds and the night plate. */
.plate::before,
.plate::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.plate::before {
  left: 7px;
  top: 7px;
  border-right: 0;
  border-bottom: 0;
}

.plate::after {
  right: 7px;
  bottom: 7px;
  border-left: 0;
  border-top: 0;
}

/* A small flag pinned inside a plate, e.g. "PLATE 04A". */
.order__tag {
  position: absolute;
  left: 7px;
  bottom: 7px;
  z-index: 2;
  padding: 0.2rem 0.36rem;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

.st-cap {
  display: flex;
  align-items: baseline;
  gap: 0.55rem 0.7rem;
  flex-wrap: wrap;
  padding-top: 0.55rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
}

.st-cap .caption {
  flex: 1 1 20ch;
}

.st-cap .credit,
.st-cap .flag {
  font-family: var(--mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}

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

.stamp {
  --stamp-ink: var(--green);
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--stamp-ink);
  box-shadow: inset 0 0 0 1px var(--stamp-ink), inset 0 0 0 4px var(--sheet);
  color: var(--stamp-ink);
  font-family: var(--mono);
  font-size: 0.42rem;
  letter-spacing: 0.09em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-9deg);
  /* Decoration only: never intercept a click on the copy underneath. */
  pointer-events: none;
}

.stamp::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--stamp-ink) 55%, transparent);
}

/* Stamps in like a hand press when an order closes. */
.stamp--strike {
  opacity: 0;
  transform: rotate(-9deg) scale(1.35);
  transition: opacity 180ms var(--ease-out), transform 260ms var(--ease-out);
}

.stamp--strike.is-struck {
  opacity: 1;
  transform: rotate(-9deg) scale(1);
}

/* ---------------- reveal ---------------- */

.js .rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}

.js .rise.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .rise {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

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

.foot {
  border-top: 2px solid var(--ink);
  padding-block: clamp(2rem, 4vw, 3.2rem) 1.6rem;
  background: var(--sheet);
}

.foot__grid {
  display: grid;
  gap: 2rem 2.4rem;
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .foot__grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

.foot__mark {
  display: block;
  margin-bottom: 0.9rem;
}

.foot__mark img {
  height: 40px;
  width: auto;
}

.foot p {
  color: var(--mute);
  font-size: var(--fs-small);
  line-height: 1.6;
  max-width: 46ch;
}

.foot p.foot__credit {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
}

.foot__credit a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 160ms var(--ease);
}

.foot__credit a:hover {
  color: var(--green-lit);
}

.foot__base a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 0.18em;
}

.foot h3 {
  font-family: var(--mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--rule);
}

.foot li + li {
  margin-top: 0.35rem;
}

.foot li a {
  display: flex;
  gap: 0.5rem;
  color: var(--ink-2);
  font-size: 0.84rem;
  line-height: 1.4;
  transition: color 160ms var(--ease);
}

.foot li a:hover {
  color: var(--green-lit);
}

@media (max-width: 640px) {
  .foot {
    padding-top: 1.6rem;
  }
  .foot__grid {
    gap: 1.4rem;
  }
  .foot__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }
}

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}

.foot__base span:last-child {
  margin-left: auto;
}

@media print {
  .runhead,
  .foot {
    display: none;
  }
  body {
    background: #fff;
  }
}