/* ALLIN MAKI · the private label and OEM page
   Loaded only by private-label.html. The page is built almost entirely out of
   objects that already exist: .switch__head and .usp (sections.css), the folding
   card stack .fold-stack / .fold / .fold__grid (sections.css, driven by
   js/main.js), .mock, .callout, .buildnote and .btn (components.css),
   .rule-dotted and the .t-* roles (base.css), and the .cta band (sections.css).

   What is here, and why:

   1. measure       one token, --pl-measure, so every paragraph on the page
                    lands inside the 75 character ceiling. See section 1.
   2. page head     .plhead lives here because .pagehead is in css/ordering.css,
                    which this page does not load. Two columns from 1024 up:
                    copy left, the four standing figures right.
   3. carried over  .tiers and .specs are copied from css/ordering.css so the two
                    wholesale pages render the same object. When someone
                    reconciles the pages, lift them into components.css and
                    delete both copies. (.callout was already lifted.)
   4. new here      .pl-swatches  the colour-match rows inside a .mock
                    two sizing rules so a .mock sits in .fold__media the way a
                    photograph does, plus one mono size per block.

   Round 2 note. Four of the six fixes below are one-line caps on objects that
   live in sections.css and components.css. They are scoped here because those
   files belong to other pages too and are not this page's to edit; each one is
   marked with where it really belongs.
*/

/* ---- 0. Let the sections shrink ------------------------------------------

/* ---- 1. One measure for running text -------------------------------------
   Rule 7 fails a paragraph over 75 characters. `ch` is the width of a zero, not
   of a character: in DM Sans one `ch` renders about 1.43 characters, so the
   58ch this page shipped with measured 83, and the 62ch on .callout measured
   90. 44ch lands at about 63, which is where a lede wants to be. One token,
   used by every object on the page that carries running text. */
:root { --pl-measure: 44ch; }

/* .switch__lede (sections.css, 60ch) and .callout > * (components.css, 62ch)
   both measure past the ceiling. The same two lines belong upstream. */
.switch__lede { max-width: var(--pl-measure); }
/* Pulling the callout's paragraph back to the measure left a third of a
   1050px card empty, so the ground comes in with the text rather than holding
   the stack width around nothing. */
/* The footer terms run the full 709px single column below 1024, at 96
   characters. Belongs on .footer__terms in sections.css. */
.footer__terms p { max-width: var(--pl-measure); }

/* ---- 2. Page head: copy left, the standing figures right ------------------
   The right half was empty, with nothing holding it. The reference balances the
   same left-aligned block with photography and this page has none it can
   honestly show, so the counterweight is the four figures a buyer checks first,
   in the page's own card object: pale fleece ground, 20px radius, no border and
   no shadow, exactly like a .usp. It spends no accent and adds no new size:
   label, term and figure are all the mono eyebrow role, 18px / 16px. */
.plhead { padding-block: var(--s-56) var(--s-48); }
@media (min-width: 768px) { .plhead { padding-block: var(--s-80) var(--s-64); } }

.plhead__in { display: grid; gap: var(--s-20); max-width: var(--stack-w); }
.plhead__title { max-width: 18ch; }
.plhead__lede { color: rgba(0, 0, 0, .70); max-width: var(--pl-measure); }
.plhead__facts { margin-block-start: var(--s-20); }

/* From 1024 up the head takes the whole container, so the panel finishes on the
   same right edge as the masthead button instead of leaving a third of the
   screen unaccounted for. Two arrangements, because one does not hold across
   the whole range: between 1024 and 1200 the headline runs across both columns
   and the panel sits beside the lede, since a 1.6fr copy column at 1024 is only
   522px, which breaks "We manufacture" and leaves "We" alone on the first line
   of the largest type on the page. From 1200 the copy column clears 620px, so
   the headline moves into it and the panel runs the full height beside it. */
@media (min-width: 1024px) {
  .plhead__in {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    grid-template-areas: "eyebrow eyebrow" "title title" "lede facts";
    column-gap: var(--s-64); align-items: start;
  }
  .plhead__eyebrow { grid-area: eyebrow; }
  .plhead__title { grid-area: title; }
  .plhead__lede { grid-area: lede; }
  .plhead__facts { grid-area: facts; justify-self: end; width: 100%; margin-block-start: 0; }
}
@media (min-width: 1200px) {
  .plhead__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    grid-template-areas: "eyebrow facts" "title facts" "lede facts";
  }
  .plhead__title { max-width: none; }        /* the column caps it from here */
  .plhead__facts { align-self: end; }
}

.plhead__facts {
  display: grid; gap: var(--s-12); align-content: start;
  max-width: 460px; padding: var(--s-24) var(--s-28);
  background: var(--tint-card); border-radius: var(--r-20);
}
.plhead__facts-h,
.plhead__facts dt,
.plhead__facts dd {
  font-family: var(--font-mono); font-weight: 400;
  font-size: 16px; line-height: normal; letter-spacing: 0.16px;
}
@media (min-width: 768px) {
  .plhead__facts-h,
  .plhead__facts dt,
  .plhead__facts dd { font-size: 18px; letter-spacing: 0.18px; }
}
.plhead__facts-h,
.plhead__facts dt { text-transform: uppercase; color: rgba(0, 0, 0, .60); }
.plhead__facts .rule-dotted { color: var(--ink-a30); }
.plhead__facts-list { display: grid; gap: var(--s-16); margin: 0; }
.plhead__facts-list > div { display: grid; gap: var(--s-2); }
.plhead__facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- 3. A .mock inside a folding card ------------------------------------ */
/* .fold__media centres its content, so a block with width:100% resolves against
   its own max-content: too narrow on a wide card, and wider than the card on a
   phone. Photographs carry explicit width and height attributes; the mocks get a
   definite track instead. This page has no photographs in a fold, so the rule
   can sit on .fold__media itself. */
.fold__media { grid-template-columns: min(460px, 100%); justify-content: center; }
/* Two of the five slots now hold a clip rather than a panel, and a clip is
   sized by sections.css against the card. The 460px track above is for the
   mocks; releasing it here rather than deleting it keeps the other three. */
.fold__media--shot { grid-template-columns: minmax(0, 1fr); }
.fold__media--shot > video {
  width: 100%; height: 100%; object-fit: cover;
  /* 452x380 out of a 1280x720 frame takes a third off the sides, and centred
     it took it off the person in both clips. */
  object-position: var(--shot-pos, 50% 50%);
}
/* the reference fills this column with one object larger than any type on the
   page; a 290px panel in a 460px slot reads as a gap where a picture should be */
.fold__media .mock { max-width: none; width: 100%; }
.fold__media .mock { width: 100%; max-width: 100%; }

/* One mono size in the card, and one body size under the title. The mocks came
   in carrying an 11px label, a 15px value and a 12px swatch value on top of the
   18px eyebrow the section head already spends: five sizes in one block. Title
   and rows share 18px and separate on weight, every mono is 12px. */
.fold__media .mock__title { font-size: 18px; line-height: 24px; }
.fold__media .mock__row,
.fold__media .pl-swatches li { font-size: 18px; line-height: 24px; }
.fold__media .mock__label,
.fold__media .mock__row .mono,
.fold__media .pl-swatches .mono { font-size: 12px; }

/* On a phone the card is 500px tall and the mock has to live inside what the
   title and the text leave over. Same values the ordering page uses for its own
   in-card lists, one step down. The mono size does not move. */
@media (max-width: 767px) {
  .fold__media .mock { padding: var(--s-16); }
  .fold__media .mock__title { font-size: 16px; line-height: 22px; }
  .fold__media .mock__rows { gap: var(--s-10); padding-block: var(--s-12); }
  .fold__media .mock__row,
  .fold__media .pl-swatches li { font-size: 14px; line-height: 20px; }
  .fold__media .mock__total { font-size: 28px; padding-block: var(--s-10) var(--s-12); }
}

/* Colour match rows: chip, what it is, what it is called. The chips are fleece
   tokens, the same shades the range is sold in. Sizes come from the block
   above, so the rows here only carry geometry. */
.pl-swatches { display: grid; gap: var(--s-10); padding-block: var(--s-16); list-style: none; margin: 0; }
.pl-swatches li { display: grid; grid-template-columns: 22px 1fr auto; gap: var(--s-12); align-items: center; }
.pl-swatches i { display: block; width: 22px; height: 22px; border-radius: var(--r-pill); }
.pl-swatches .mono { font-family: var(--font-mono); color: rgba(0, 0, 0, .60); white-space: nowrap; }
@media (max-width: 767px) {
  .pl-swatches { gap: var(--s-8); padding-block: var(--s-12); }
  .pl-swatches li { grid-template-columns: 18px 1fr auto; gap: var(--s-10); }
  .pl-swatches i { width: 18px; height: 18px; }
}

/* ---- 4. Terms: the options table (from ordering.css) ---------------------
   One mono size, 13px, for the column heads and the figures both. One body
   size, 16px, for the row heads and the cells, separating on weight. */

/* The caption a buyer reads. It used to be the build note, set in 10px uppercase
   mono across the full 1050px stack at 144 characters. Plain body copy on the
   page measure now; what was internal about it moved to the .buildnote. */

/* ---- 5. Terms: the standing figures (from ordering.css) ------------------
   Two mono sizes on this page and no more: 12 for a label and 14 for a value.
   DM Mono was appearing at 18, 16, 15, 14, 12, 11 and 10, and the same
   label-and-figure construction was set three different ways within one
   scroll: 12 against 12 in the fold cards, 10 against 14 in the standing
   terms, 18 against 18 in the hero card. The first is now 12 against 14 in
   components.css, and the hero card comes down to meet it. */
.plhead__facts-h,
.plhead__facts dt { font-size: 12px; letter-spacing: .12em; }
.plhead__facts dd { font-size: 14px; }
@media (min-width: 768px) {
  .plhead__facts-h,
  .plhead__facts dt { font-size: 12px; letter-spacing: .12em; }
  .plhead__facts dd { font-size: 14px; }
}
.tiers__table thead th { font-size: 12px; }

/* The pricing table and the standing figures are one terms block: the comment
   above #standing in the markup says it was split out so a head is in frame.
   Every other boundary on this page is 184 to 248px, which said the opposite. */
.switch--continues { padding-block-start: var(--s-56); }

/* Below 620 the term and the figure no longer fit on one line, so they stack
   instead of the figure wrapping against a right edge. */
@media (max-width: 619px) {
  .specs__list > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .specs__list dd { text-align: left; }
}

/* ---- 6. The build note ---------------------------------------------------
   .buildnote is the shared component and it needs nothing from this file. The
   .plnote rule that used to be here styled an element the markup no longer
   has. */