/* ALLIN MAKI · the ordering page
   Loaded only by ordering.html. Reuses the landing page's folding-card stack
   (.fold-stack / .fold in sections.css, driven by js/main.js) and its "why
   buyers switch" head, and adds:

   1. page head        eyebrow, h1, lede
   2. track            the week ruler that floats above the cards and fills
   3. step cards       number, eyebrow, title, text, and a white media slot
   4. slot contents    the little tables that stand in for an animation
   5. callout          the two ways an order reaches the buyer
   6. terms            tier table and the two spec lists
*/

/* ---- 1. Page head --------------------------------------------------------
   The first screen of the page that has to earn a purchase order was an
   eyebrow, three lines of display and three lines of lede on bare paper, with
   684px of the container empty beside them at 1440 and 990px at 1920, and not
   even the watermark in it, because the script holds that at zero over the
   first screen and a half. So it carries the dates instead: the five figures
   the next ten screens go on to prove, in the same panel the private label
   head uses, and deliberately not the MOQ or the 24 hours, which the banner
   above and the order bar below are both already saying on the same screen.

   The bottom padding comes down because .feature adds 80 of its own directly
   under it and the two were doing one job. */
.pagehead { padding-block: var(--s-56) var(--s-32); }
@media (min-width: 768px) { .pagehead { padding-block: var(--s-80) var(--s-24); } }
.pagehead__in { display: grid; gap: var(--s-20); max-width: var(--stack-w); }
.pagehead__in .t-h1 { max-width: 16ch; }
.pagehead__lede { color: rgba(0, 0, 0, .70); max-width: 46ch; }

.pagehead__facts { margin-block-start: var(--s-20); }
@media (min-width: 1024px) {
  .pagehead__in {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    grid-template-areas: "eyebrow facts" "title facts" "lede facts";
    column-gap: var(--s-64); align-items: start;
  }
  .pagehead__in > .t-eyebrow { grid-area: eyebrow; }
  .pagehead__in > .t-h1 { grid-area: title; }
  .pagehead__lede { grid-area: lede; }
  .pagehead__facts { grid-area: facts; justify-self: end; width: 100%; margin-block-start: 0; align-self: end; }
}
.pagehead__facts {
  display: grid; gap: 0; align-content: start;
  max-width: 460px; padding: var(--s-8) var(--s-24) var(--s-16);
  background: var(--tint-card); border-radius: var(--r-20);
}
.pagehead__facts > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-16);
  align-items: baseline; padding-block: var(--s-12);
}
.pagehead__facts > div + div {
  background-image: radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px);
  background-size: 8px 2px; background-repeat: repeat-x; background-position: left top;
}
.pagehead__facts dt {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(0, 0, 0, .60);
}
.pagehead__facts dd {
  margin: 0; font-family: var(--font-mono); font-size: 14px;
  color: var(--ink); font-variant-numeric: tabular-nums; text-align: right;
}
@media (min-width: 620px) {
  .pagehead__facts dt {
    display: grid; grid-template-columns: max-content minmax(16px, 1fr);
    align-items: center; gap: var(--s-12);
  }
  .pagehead__facts dt::after {
    content: ""; height: 2px;
    background-image: radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px);
    background-size: 8px 2px; background-repeat: repeat-x;
  }
}

/* ---- 2. The week track --------------------------------------------------- */
/* Sits in flow just above the stack and sticks under the collapsed header, so
   the cards pass beneath it. The cards start lower down: see --fold-top below. */
.track {
  position: sticky; top: 76px; z-index: 15;
  margin-bottom: var(--s-32);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.track.is-in { opacity: 1; transform: none; }
.track__in {
  position: relative;
  max-width: var(--stack-w); margin-inline: auto;   /* == .fold-stack and .cap */
  padding: var(--s-12) var(--s-20) var(--s-10);
  border-radius: var(--r-20);
  background: rgba(36, 30, 26, .94);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 30px rgba(36, 30, 26, .22);
}
.track__rail {
  position: absolute; left: 44px; right: 44px; top: 26px; height: 2px;
  background: rgba(255, 255, 255, .22); border-radius: 2px; overflow: hidden;
}
.track__fill {
  display: block; height: 100%; width: 0;
  background: var(--paper); border-radius: 2px;
  transition: width .35s cubic-bezier(.2, .8, .2, 1);
}
.track__marks {
  position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.track__marks li { display: grid; justify-items: center; gap: 4px; }
.track__marks i {
  width: 11px; height: 11px; border-radius: var(--r-pill);
  background: transparent; border: 2px solid rgba(255, 255, 255, .32);
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.track__marks b {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .08em; color: rgba(255, 255, 255, .45);
  transition: color .3s ease;
}
.track__marks span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255, 255, 255, .45); white-space: nowrap;
  transition: color .3s ease;
}
.track__marks li.is-done i { background: var(--paper); border-color: var(--paper); }
.track__marks li.is-done b { color: rgba(255, 255, 255, .78); }
.track__marks li.is-now i { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
.track__marks li.is-now b,
.track__marks li.is-now span { color: var(--paper); }
@media (max-width: 720px) {
  .track__in { padding-inline: var(--s-12); }
  .track__rail { left: 26px; right: 26px; }
  .track__marks span { display: none; }
  .track__marks b { font-size: 10px; }
}

/* Seven cards stepping 10px cannot lean the 1.5 and -1 degrees a five-card
   pile leans: across a 1050px card that is 27px and 18px of drift, so every
   card's top edge crossed its neighbours' and the pile read as four converging
   wedges rather than a stack of edges. At 0.4 and -0.25 the drift is about
   7px, comfortably inside the step. And the words start going at 0.45 rather
   than 0.75, because .fold clips and the incoming card's rounded edge reaches
   a 38px heading long before three quarters. */
.fold-stack--steps { --fold-tilt-a: 0.4; --fold-tilt-b: -0.25; --fold-text-fade: 0.45; }

/* ---- 3. The step cards --------------------------------------------------- */
/* Room for the track above the pinned cards. js/main.js reads --fold-top. */
.fold-stack--steps { --fold-top: 152px; }
@media (min-width: 768px) { .fold-stack--steps { --fold-top: 168px; } }

.step__grid {
  /* A floor, never a ceiling: the same fault as .fold__grid had. At 390 the
     step text needs more than 520px, the rows do not grow, and the white
     panel painted over the last line and a half of the sentence. */
  display: grid; gap: var(--s-20); min-height: 520px;
  grid-template: ". .    ." 24px ". head ." auto ". media ." 1fr ". .    ." 20px / 22px 1fr 22px;
}
@media (min-width: 900px) {
  .step__grid {
    gap: var(--s-32); min-height: 440px;
    grid-template: ". .    . media" 36px ". head . media" auto ". .    . media" 36px / 40px minmax(0, 1fr) 24px minmax(0, 44%);
  }
}
.step__head { grid-area: head; display: grid; gap: var(--s-10); align-content: center; opacity: var(--fold-text-opacity, 1); }
.step__n {
  font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1;
  letter-spacing: -.02em; color: rgba(0, 0, 0, .20);
}
@media (min-width: 900px) { .step__n { font-size: 48px; } }
.step__eyebrow {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}
.step__eyebrow em {
  font-style: normal; color: rgba(0, 0, 0, .60);
  padding-left: 10px; border-left: 1px solid var(--ink-a20);
}
.step__title { max-width: 20ch; }
.step__text { max-width: 46ch; color: rgba(0, 0, 0, .80); }

.step__media {
  grid-area: media; display: grid; place-content: center; min-height: 0;
  opacity: var(--fold-media-opacity, 1);
}
.step__media .mock { max-width: 400px; width: 100%; }
@media (max-width: 899px) { .step__media { padding-inline: 0; } .step__media .mock { max-width: 100%; } }

/* ---- 4. What sits in the white slot -------------------------------------- */
/* Placeholders with real content, sized so an animation or GIF can replace
   them without the card changing height. */
.ways3 { display: grid; gap: var(--s-12); padding-block: var(--s-16); list-style: none; margin: 0; }
.ways3 li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-12); align-items: start; }
.ways3__n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-pill);
  background: var(--tint); font-family: var(--font-mono); font-size: 11px;
}
.ways3 b { display: block; font-size: 15px; font-weight: 700; }
.ways3 small { display: block; font-size: 13px; color: rgba(0, 0, 0, .6); line-height: 1.4; }

.split { display: flex; gap: 4px; padding-block: var(--s-16) var(--s-8); }
.split span {
  flex: 1; display: grid; place-items: center; height: 40px; border-radius: var(--r-8);
  font-family: var(--font-mono); font-size: 13px;
}
.split__a { background: var(--accent); color: var(--ink); }
.split__b { background: var(--tint); color: rgba(0, 0, 0, .60); }

.gantt { display: grid; gap: var(--s-10); padding-block: var(--s-16); list-style: none; margin: 0; }
.gantt li { display: grid; grid-template-columns: 116px 1fr; gap: var(--s-12); align-items: center; }
.gantt span { font-size: 13px; color: rgba(0, 0, 0, .7); }
.gantt i {
  position: relative; display: block; height: 8px; border-radius: var(--r-pill);
  background: var(--tint);
}
.gantt i::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: var(--a); right: calc(100% - var(--b));
  background: var(--accent); border-radius: var(--r-pill);
}

.docs { display: grid; gap: var(--s-8); padding-block: var(--s-16); list-style: none; margin: 0; }
.docs li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-10); align-items: center; font-size: 14px; }
.docs svg { width: 14px; height: 14px; color: var(--ink); }

/* ---- 5. The two ways an order reaches the buyer --------------------------
   Collected by their forwarder, or posted to their door. Two numbered lines
   between the claim and the documents, in the page's reading size (.t-p), the
   numeral on a white disc because the callout's own ground is the tint. */
.callout--ways { display: grid; gap: var(--s-16); text-wrap: pretty; }   /* no last word alone on a line */
.callout__ways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-12); counter-reset: way; }
.callout__ways li { counter-increment: way; position: relative; padding-left: 44px; }
/* On the first line of its way: the disc is 28px and a .t-p line is 24px
   below 768 and 30px above it. Placed rather than gridded, because the bold
   title and the words after it would each become a grid item of their own
   and the words would drop under the numeral. */
.callout__ways li::before {
  content: counter(way);
  position: absolute; left: 0; top: -2px;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-pill);
  background: #fff; font-family: var(--font-mono); font-size: 13px; line-height: 1;
}
@media (min-width: 768px) { .callout__ways li::before { top: 1px; } }
.callout__ways b { display: block; }

/* ---- 6. Terms ------------------------------------------------------------ */


@media (prefers-reduced-motion: reduce) {
  .track, .track__fill, .track__marks i, .track__marks b, .track__marks span { transition: none; }
}

/* ---- 9. What each step does with its moment -------------------------------
   The driver and the landings are shared with the landing page. These are the
   four gestures that belong to this page's own furniture, one per card. */

/* 03: the numeral arrives before the way it belongs to is read. */
[data-seq].is-seq .ways3 li.is-on .ways3__n {
  animation: seq-numeral .42s cubic-bezier(.2, .9, .3, 1) .08s both;
}
@keyframes seq-numeral {
  0%   { transform: scale(.35); background: var(--accent); }
  100% { transform: scale(1); }
}

/* 05: the production bars draw themselves, which is the one card whose
   subject is literally the passage of time. */
[data-seq].is-seq .gantt li i::after { transform: scaleX(0); transform-origin: left center; }
[data-seq].is-seq .gantt li.is-on i::after {
  transform: scaleX(1);
  transition: transform .54s cubic-bezier(.2, .8, .2, 1) .08s;
}

/* 06: the same green the landing page's report uses, so a pass looks like a
   pass wherever it turns up. */

/* 07: the pack ticks itself off. Short steps, because six of anything at a
   comfortable pace is no longer a gesture. */
[data-seq].is-seq .docs li.is-on svg {
  animation: seq-tick .34s cubic-bezier(.2, .9, .3, 1) .06s both;
}
@keyframes seq-tick {
  0%   { transform: scale(.2) rotate(-14deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* ---- 10. The document pack, in the documents section's language ----------
   Same green disc with a cream tick and the same soft halo the compliance
   page uses for a document that is in the pack, and the same pill on the
   head of the list. Smaller, because this one lives inside a card. */
.pack__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); }
.pack__pill {
  flex: none; display: flex; align-items: center; gap: 7px;
  background: var(--ink); color: var(--paper); border-radius: var(--r-pill);
  padding: 6px 11px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.pack__pill i { width: 5px; height: 5px; border-radius: var(--r-pill); background: #22B18F; }

.docs--marks li { grid-template-columns: 20px 1fr; gap: var(--s-12); }
.pack__mark {
  width: 20px; height: 20px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--pass-fill); color: var(--paper);
  box-shadow: 0 0 0 3px rgba(15, 140, 115, .16);
}
.pack__mark svg { width: 11px; height: 11px; }

/* the disc lands rather than the tick inside it */
[data-seq].is-seq .docs li.is-on .pack__mark {
  animation: seq-tick .36s cubic-bezier(.2, .9, .3, 1) .05s both;
}

/* ---- 11. The production calendar ------------------------------------------
   Same obsidian ground as the week track above the steps, because it is the
   same idea seen from further away: that one a reader walks through, this one
   the workshop walks through. Ten cells will not fit on a phone, so the strip
   scrolls inside itself rather than pushing the page.
   --------------------------------------------------------------------------- */
/* The week ruler above the steps and this calendar are the same object in the
   same obsidian, one directly above the other in the reading order, and they
   were built at two different widths. They read the same variable now. */
.cap {
  max-width: var(--stack-w); margin-inline: auto;
  margin-bottom: var(--s-40);
  padding: var(--s-24) var(--s-20) var(--s-20);
  border-radius: var(--r-20);
  background: var(--fleece-obsidian);
  box-shadow: 0 10px 30px rgba(36, 30, 26, .18);
}
.cap__weeks {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(72px, 1fr);
  gap: var(--s-8); list-style: none; margin: 0; padding: 0 0 var(--s-4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cap__weeks::-webkit-scrollbar { display: none; }

.cap__w {
  display: grid; gap: 7px; justify-items: center;
  padding: var(--s-10) 4px var(--s-8);
  border-radius: var(--r-16);
  border: 1px solid transparent;
}
/* Legible against the obsidian. Three of the calendar's four label roles were
   under the contrast floor on a panel a buyer reads to decide when they can
   have the goods, and the only one that read at a glance was FILLING, because
   it is in the accent: the state the page least wants anyone to act on. A
   booked week still goes quiet, but it does it in the state rule below rather
   than by being unreadable to begin with. */
.cap__wk {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: rgba(255, 255, 255, .60);
}
.cap__bar {
  display: block; width: 100%; height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, .12); overflow: hidden;
}
.cap__bar i { display: block; height: 100%; width: 0; border-radius: 3px; }
.cap__dt {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: rgba(255, 255, 255, .74); white-space: nowrap;
}
.cap__st {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .62); white-space: nowrap;
}

/* booked reads as spent: the rail is full and the label goes quiet */
.cap__w[data-state="full"] .cap__bar i { width: 100%; background: rgba(255, 255, 255, .28); }
.cap__w[data-state="full"] .cap__dt { color: rgba(255, 255, 255, .38); }
.cap__w[data-state="full"] .cap__st,
.cap__w[data-state="full"] .cap__wk { color: rgba(255, 255, 255, .40); }

/* filling is the only place the accent appears twice, and it earns it */
.cap__w[data-state="filling"] .cap__bar i { width: 55%; background: var(--accent); }
.cap__w[data-state="filling"] .cap__st { color: var(--accent); }

.cap__w[data-state="open"] .cap__dt { color: #FFF; }

/* the week a buyer reading this could actually have */
.cap__w[data-first="true"] {
  border-color: rgba(228, 180, 111, .55);
  background: rgba(228, 180, 111, .09);
}
.cap__w[data-first="true"] .cap__st { color: var(--accent); }
.cap__w[data-first="true"] .cap__wk { color: rgba(255, 255, 255, .7); }

.cap__key {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-16);
  margin-top: var(--s-16); padding-top: var(--s-12);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.cap__k {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255, 255, 255, .68);
}
.cap__k i { width: 16px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.cap__k[data-state="full"] i { background: rgba(255, 255, 255, .28); }
.cap__k[data-state="filling"] i { background: linear-gradient(to right, var(--accent) 55%, rgba(255, 255, 255, .12) 0); }
.cap__note {
  flex: 1 1 260px;
  font-family: var(--font-body); font-size: 14px; line-height: 1.45;
  color: rgba(255, 255, 255, .78);
}

@media (max-width: 620px) {
  .cap { padding: var(--s-20) var(--s-16) var(--s-16); }
  .cap__weeks { grid-auto-columns: 68px; }
  .cap__note { flex-basis: 100%; }
}