/* ALLIN MAKI · the compliance dossier
   Loaded only by compliance.html. Almost everything on the page is an object
   that already exists: .switch__head for every section head, .usp for every
   card. Nothing in main draws a line: sections are separated by padding, and
   the only .rule-dotted left on the page is the footer's.

   1. page head        the one H1, in the standard centred head
   2. standard cards   .usp plus a mono code and a status chip
   3. guarantee        the one full-bleed accent band on the site
   4. trio / pair      three-up and two-up versions of the .usp grid
   5. measure          one reading column for every paragraph on the page
   6. borrowed         .specs, .tiers, .docs, lifted from ordering.css
   7. close            the last line before the CTA

   .callout and .buildnote are shared components now and live in
   components.css. Nothing here redefines them; section 5 only caps their
   measure, because the cap is a property of this page's column, not of the
   component, and the other pages that use them are owned elsewhere.

   Section 6 is a straight copy, not a rewrite: those three objects live in
   css/ordering.css, which this page does not load. Same rules, same numbers.
   Hoist them into components.css when the two pages are next merged.

   Section 4 has now made that move: .trio and .pair are in components.css,
   because a third page was using .pair without loading this file.
*/

/* One measure for every piece of running text on the page. See section 5 for
   the number and why it is what it is. */
.switch__lede { max-width: var(--read); }

/* ---- 1. Page head: three reports on the collage's geometry ----------------
   The landing page's "Made by hand, held to a standard" section with one
   object swapped. .time, .time__grid, .time__title, .time__desc and the
   marquee are that section's rules and are not touched; what is new is the
   thing in the frames cell, because on this page the object worth looking at
   is the paper rather than the toy.

   The sheets take the collage's overlap and its bleed off the right edge,
   but not its scatter: the EU standard leans one way, the US standard leans
   the other by the same angle, and the flammability sheet stands square and
   larger between them, high enough and low enough to be the shape the group
   is read from.

   Every size inside a sheet is an em of the sheet's own font-size, and that
   font-size is a fifteenth of its width. One number per breakpoint sets the
   whole group, and the middle sheet takes a multiple of the same number. */

/* The eyebrow sits centred here the way it does in every other section on
   the page, which needs a row of its own across the top of the grid. */
.pagetop__eyebrow { grid-area: eyebrow; text-align: center; margin: 0; }
.pagetop .time__grid {
  grid-template: "eyebrow" "title" "description" "frames" "footer" / minmax(0, 1fr);
}
/* minmax(0, 1fr): a bare 1fr adopts the widest item's min-content as the
   track minimum, and the sheets are wider than half the page. At 1024 they
   took 516 of the 928 going and left the headline 373, where it broke into
   six lines. The sheets are built to bleed; the columns should stay equal.
   The same on the frames cell, or the group's width becomes the cell's. */
.pagetop .time__frames { align-content: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .pagetop .time__grid {
    grid-template: "eyebrow eyebrow" "title frames" "description frames" "footer footer"
                   / minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* 72px against this band's column breaks the headline into five lines. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .pagetop .t-h1 { font-size: 56px; line-height: 1.04; }
}

.fan {
  --w: 230px;          /* the outer sheets. A4, so height follows. */
  --mid: 1.2;          /* the middle one, which has to carry the small print */
  display: flex; justify-content: center; align-items: center;
  /* The sheets are translated out of the line and a transform does not move
     the box it came from. Without this the group sits on the marquee. */
  padding-block: calc(var(--w) * .18) calc(var(--w) * .2);
}
/* A phone gets the same sheets as a desktop and shows less of the outer two.
   Shrinking them to fit instead put the small print at six pixels, which is
   a picture of a document rather than a document. */
@media (min-width: 1024px) { .fan { --w: 205px; justify-content: flex-start; } }
@media (min-width: 1280px) { .fan { --w: 250px; } }
/* The sheets are built to bleed off the right edge, and they stop bleeding as
   soon as the container stops touching it: at 1920 the group ends 237px short
   of the screen and the deliberate crop reads as an accident of centring.
   Push it back out by whatever the container is giving away. Not calc(50% -
   50vw), which resolves against the grid area rather than the container and
   flings the group most of the way off screen. */
@media (min-width: 1600px) {
  .fan { margin-right: min(0px, calc((var(--container) + var(--gutter) * 2 - 100vw) / 2)); }
}

.doc {
  --doc-w: var(--w);
  width: var(--doc-w); aspect-ratio: 1 / 1.414; flex: none;
  font-size: calc(var(--doc-w) / 15);
  display: flex; flex-direction: column; gap: .5em;
  padding: 1.15em 1.1em 1.1em;
  background: var(--white); border-radius: .3em;
  /* A hairline as well as the shadow: three white sheets overlapping need an
     edge where one crosses another, and the shadow alone is too soft for it.
     The shadow is the collage's, so a sheet and a photograph sit at the same
     distance off the page. */
  border: 1px solid var(--ink-a05);
  filter: drop-shadow(var(--shadow-frame));
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px)) translateY(var(--lift, 0px));
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), filter .35s ease;
}
/* The overlap is the collage's 19%, taken off the outer width so the two
   gaps stay equal either side of the larger middle sheet. */
.doc + .doc { margin-left: calc(var(--w) * -.2); }
/* The drop of the outer pair stays under the middle sheet's overhang, or the
   middle stops being the lowest edge as well as the highest. */
.fan > :nth-child(1) { --rot: -7.5deg; --dy: calc(var(--w) * .05);  z-index: 1; }
.fan > :nth-child(2) { --doc-w: calc(var(--w) * var(--mid)); z-index: 4; }
.fan > :nth-child(3) { --rot:  7.5deg; --dy: calc(var(--w) * .065); z-index: 3; }
/* Lift on hover: the sheet keeps its angle and comes off the pile, and keeps
   its place in the pile while it does. Only the middle sheet takes the top of
   the stack, because it is the one that is already there: an outer sheet
   raised over it clipped through the sheet the whole group is read from. */
.doc:hover {
  --lift: -18px;
  filter: drop-shadow(0 26px 42px rgba(93, 56, 0, .18));
}
.fan > :nth-child(2):hover { z-index: 6; }

.doc__head { display: grid; gap: .3em; }
.doc__kicker {
  display: flex; justify-content: space-between; gap: 1em; margin: 0;
  font-family: var(--font-mono); font-size: .52em; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-a60);
}
/* Specimen, because that is what this is. A printer's word for a document
   shown as an example, and the honest label for a report nobody has been
   issued: on this page the buyer commissions the test. */
.doc__kicker span { color: var(--ink-a60); }
.doc__code {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: 1.6em; line-height: 1; letter-spacing: -.01em;
}
.doc__scope {
  margin: 0; font-family: var(--font-body); font-size: .56em; line-height: 1.35;
  color: var(--ink-a60);
}
.doc .rule-dotted { color: var(--ink-a30); }
/* The rows take the slack: space-between over a flexible block keeps the
   sheet looking like a full page at every size rather than a header with a
   gap under it. */
.doc__rows {
  flex: 1; margin: 0; display: flex; flex-direction: column;
  justify-content: space-between; gap: .5em; padding-block: .15em;
}
.doc__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: .8em; }
.doc__rows dt {
  font-family: var(--font-body); font-size: .58em; line-height: 1.3;
  color: var(--ink-a80);
}
.doc__rows dd {
  margin: 0; font-family: var(--font-mono); font-size: .5em; line-height: 1.3;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-a60);
  white-space: nowrap;
}
.doc__foot { display: flex; align-items: center; gap: .7em; padding-top: .15em; }
.doc__verdict {
  margin: 0; flex: none;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.45em; line-height: 1; letter-spacing: .02em;
  color: var(--pass-fill);
  border: .1em solid var(--pass-fill); border-radius: .2em;
  padding: .14em .26em .18em; transform: rotate(-5deg);
}
.doc__lab {
  margin: 0; font-family: var(--font-mono); font-size: .46em; line-height: 1.4;
  color: var(--ink-a60);
}

/* ---- 2. The eight standards, as a register --------------------------------
   They were eight identical tinted tiles in a four by two grid, which is the
   same shape as the two-up grid two sections later and the document grid after
   that, so the section that carries the page's subject looked like the two
   that carry its footnotes. Each card was about 250px wide, so a sentence and
   a half set in five lines, and .std pinned every chip to the card floor,
   which left between 37 and 133px of empty tint above the four chips in the
   second row.

   A standard, its scope and its status is a row, not a tile. Eight rows, the
   code in mono on the left, the name and what it actually tests in the middle,
   the status on the right, separated by the site's own dotted rule. The three
   parts of EN 71 share a left rule in a fleece shade so they read as one
   standard in three parts without a word being added to say so. */
#standards .switch__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.std {
  background: none; border-radius: 0; padding: var(--s-24) 0 var(--s-24) var(--s-20);
  border-left: 2px solid transparent;
  gap: var(--s-4) var(--s-24);
  grid-template-columns: minmax(0, 1fr);
}
/* --ink-a30 rather than the usual a20: these rows are on open paper, which is
   where the watermark shows, and at a20 the rule faded into the grain over the
   last two hundred pixels, exactly where the eye is travelling to the status
   column. */
.std + .std {
  background-image: radial-gradient(circle, var(--ink-a30) 1px, transparent 1.1px);
  background-size: 8px 2px; background-repeat: repeat-x; background-position: left top;
}
/* EN 71 is one standard in three parts. Consecutive rows with no gap between
   them draw one unbroken line. */
.std:nth-child(-n+3) { border-left-color: var(--fleece-sandstone); }
@media (min-width: 900px) {
  .std {
    grid-template-columns: 160px minmax(0, 1fr) max-content;
    grid-template-areas: "code title chip" "code body chip";
    align-items: start;
  }
  .std .std__code { grid-area: code; padding-top: 3px; }
  .std .usp__t { grid-area: title; }
  .std .usp__b { grid-area: body; max-width: var(--read); }
  .std .chip { grid-area: chip; align-self: start; margin-top: 2px; }
}
/* A row is not a card, so it does not answer a pointer like one. */
@media (hover: hover) and (pointer: fine) { .std:hover { background-color: transparent; } }
.std__code {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.3;
  letter-spacing: .04em; color: var(--ink);
}
/* the card title keeps the system's own 21px; it only needs a measure */
.std .usp__t { max-width: 26ch; }

/* Status chips. Three states, but only two treatments, because a third pill
   treatment in one slot reads as three different objects rather than one
   object in three states. Inked means we stand behind a laboratory result.
   Ringed means paperwork: prepared per order, on request, or in preparation.
   The words carry that difference; the chip only has to say which side of the
   line it is on. The earlier dashed ring is gone: the system's only broken
   line is the dotted rule, 2px dots every 8px, and it is not a border.
   The transparent border keeps both treatments the same height. */
/* A ground under the ringed states. The standards rows sit on open paper now,
   which is where the watermark shows, and a 1px ring in low ink over a stipple
   at nearly the same value stopped being legible. The inked chips carry their
   own ground already. */
.chip--doc, .chip--soon { background: var(--paper); }
.chip {
  justify-self: start; display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.2;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.chip--pass { background: var(--pass-fill); color: var(--paper); }
.chip--doc, .chip--soon { border-color: var(--ink-a20); color: var(--ink-a70); }

/* ---- 3. The guarantee band ----------------------------------------------- */
/* The one full-bleed accent surface on the site, and the loudest thing this
   page is allowed to do. No button stands inside it. */
.guarantee {
  display: grid; background: var(--accent); color: var(--ink);
  padding: var(--s-80) var(--gutter);
}
@media (min-width: 768px) { .guarantee { padding-block: var(--s-120); } }
.guarantee__in {
  display: grid; justify-items: center; text-align: center; gap: var(--s-20);
  max-width: 843px; margin-inline: auto;
}
.guarantee__in .t-h2 { max-width: 18ch; }
.guarantee__in .t-p { max-width: var(--read); }
/* Both paragraphs are full ink. Black at 72% over fawn mixes to a dark brown
   that is in no token, and this is the operative sentence of the whole page:
   it does not get to be the quiet one. The gap between them is the hierarchy. */
.guarantee__note { color: var(--ink); }

/* While the band fills the screen it is the only fawn object allowed on it,
   so the two pieces of accent chrome stand down: the sticky order bar drops
   the way it already does at the CTA, and the header's primary button inks
   over, which also keeps it legible against a ground of its own colour.
   js/compliance.js sets the class; the timing is the buttons' own 0.3s. */
body.is-quiet .orderbar { transform: translateY(110%); }
body.is-quiet .masthead__actions .btn--primary { background-color: var(--ink); color: var(--paper); }

/* ---- 4. Three-up and two-up card grids ----------------------------------- */
/* Hoisted to css/components.css, which every page loads. They were here, and
   ordering.html used .pair without loading this file, so its two closing notes
   under the calendar rendered as two full-width slabs running about a hundred
   and sixty characters a line. The measure cap below is the part that really
   belongs to this page. */
.trio .usp__b, .pair .usp__b, .pair .docs { max-width: 46ch; }

/* A counter in the card tint rather than .usp__n in the accent: three or four
   of those on one screen would spend the accent budget on decoration. */
/* The disc is filled --tint and the card's hover wash is --tint, so under the
   pointer the number ceased to exist. sections.css inks .usp__n over on hover
   for exactly this reason; .markn was written later, in another file, and had
   no equivalent. */
@media (hover: hover) and (pointer: fine) {
  .usp:hover .markn { background: var(--fleece-ivory); }
}
.markn {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--r-pill); background: var(--tint); color: var(--ink);
  font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums;
  margin-block-end: var(--s-4);
}

/* ---- 5. The reading measure ------------------------------------------------
   The bar caps running text at 75 rendered characters. `ch` is the width of a
   zero, not of an average letter, so in DM Sans one ch buys about 1.55
   characters of ordinary prose: 56ch was rendering at 87. 46ch lands near 71
   and leaves room for a line of unusually narrow words.

   Two of these cap a shared component from a page file, on purpose. The cap
   belongs to this page's column, not to .callout or .buildnote, and the other
   pages that use them are being edited in other sessions. */
:root { --read: 46ch; }

.buildnote p { max-width: 72ch; }         /* mono: 1ch really is 1 character */

/* ---- 6. Borrowed from css/ordering.css ------------------------------------ */
/* 6b. The wide table. It scrolls inside its own box, the page never does. */

/* 6c. The fact lists */

/* 6d. The ticked document list, plus the crossed one it needs here.
   The list carries .t-small in the markup and the items inherit it, so the
   checklist sits on the ladder (14 / 16) instead of on a hand-set 14. */
.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: start; }
.docs svg { width: 14px; height: 14px; margin-top: 5px; color: var(--ink); }
.docs--no li { color: var(--ink-a60); }
.docs--no svg { color: rgba(0, 0, 0, .40); }

/* ---- 7. Fur section footnote and the closing line ------------------------- */
.fur__foot {
  max-width: var(--read); margin-inline: auto; margin-block-start: var(--s-40);
  text-align: center; color: rgba(0, 0, 0, .70);   /* == .switch__lede */
}

/* The last section on the page is a section like any other: eyebrow, headline,
   lede, separated from the one above it by padding. It used to open on a
   dotted rule, which is the one line the system owns and it does not belong
   on open parchment between two sections. */
.close { padding-block: var(--s-64) var(--s-80); }
@media (min-width: 768px) { .close { padding-block: var(--s-80) var(--s-120); } }
/* Left, not centred, and the sentence beside the line rather than under it.
   Two centred Champ statements on the same axis 130px apart read as the page
   ending twice; the CTA is the finale and this is the last thing said before
   it. Nothing about the words changes. */
.close__in { display: grid; gap: var(--s-20); max-width: var(--stack-w); margin-inline: auto; }
@media (min-width: 1024px) {
  .close__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40ch);
    column-gap: var(--s-64); align-items: end;
  }
  .close__in > .t-eyebrow { grid-column: 1; }
  .close__lead { grid-column: 1; }
  .close__body { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}
.close__lead { max-width: 19ch; text-wrap: balance; }
.close__body { max-width: var(--read); color: rgba(0, 0, 0, .80); }

/* ---- 9. The documents section --------------------------------------------
   Dropped in whole from a handoff, with its own dp- namespace so nothing here
   collides with the page. Four values are wired to site tokens rather than the
   hexes the handoff shipped: the two font families, because block 1 of the
   handoff (a Google Fonts link for Figtree and IBM Plex Mono) is skipped on a
   site that already has Champ, DM Sans and DM Mono; and the green, which is the
   same value the standards chips now use and should stay that way. The cream
   and the tan are left as authored.

   The handoff's ground is gone rather than remapped. It was #FBF9F5, which
   showed as a seam against the page's #FDFBF6, so it was pointed at --paper and
   became invisible. Invisible but not free: it is fourteen hundred pixels of
   opaque block, and the chakana behind the page sits at z-index -1, so the
   accent went missing for the whole section. The section now lets the paper
   through like every other block on the page. */
.dp-sec {
  --dp-font: var(--font-body);
  --dp-mono: var(--font-mono);
  --dp-cream: var(--tint-card);
  --dp-ink: var(--ink);
  --dp-muted: #5C574F;
  --dp-muted-2: #6B6459;
  --dp-green: var(--pass-fill);
  --dp-tan: var(--accent);
  color: var(--dp-ink);
  font-family: var(--dp-font);
  /* The page gutter and the page measure, not the 40px and 1240px the
     handoff shipped. Every other block on this page sits 1050 wide
     starting 188px in at 1440; this one was 1240 wide starting at 93,
     which is why it was the only section pressed against the edges. */
  /* On the scale, so the section boundaries land on the page's rhythm. In raw
     pixels this block could not, and the four gaps around it came out 160,
     240, 184 and 144, with the 240 falling between the document pack and the
     testing schedule, the two blocks a buyer most needs to read as one
     argument about when paperwork arrives. */
  padding-block: var(--s-120) var(--s-64); padding-inline: var(--gutter);
}
.dp-wrap { max-width: var(--stack-w); margin: 0 auto; }

.dp-head { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; margin-bottom: 64px; }
/* On the page's own ladder. The handoff set this head at 74/15/21 against a
   page whose headings are 54, whose eyebrows are 18 and whose ledes are 20, so
   the one section dropped in from outside was also the loudest on the page. */
.dp-eyebrow { display: flex; gap: 18px; font-family: var(--dp-mono); font-size: 18px; letter-spacing: 0.18em; }
.dp-h2 { margin: 0; font-size: 54px; line-height: 1.16; font-weight: 900; letter-spacing: 0.54px; max-width: 20ch; text-wrap: balance; }
.dp-lede { margin: 0; font-size: 20px; line-height: 1.5; color: var(--dp-muted); max-width: 46ch; text-wrap: pretty; }

/* The handoff sets one family and leans on weight 900 for the headings, which
   works with Figtree. Champ is the display face here and stops at 800, so the
   two headings ask for it by name and the running text stays DM Sans. */
.dp-h2, .dp-h3 { font-family: var(--font-display); font-weight: 800; }

/* start, not stretch: one card holds seven ticked rows and the other holds
   two and a paragraph, and stretching the short one to the tall one's floor
   opened about 265px of nothing in the middle of it, which at 1440 spanned the
   join between two viewports. A short card should read as short. */
.dp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 28px; align-items: start; }

.dp-card { border-radius: 28px; padding: 40px; display: flex; flex-direction: column; }
.dp-card--in { background: var(--dp-cream); }
/* The dashed outline was the loudest single edge on the page and it was drawn
   around the negative card, so the treatment read as a warning rather than as
   a category. The system's only broken line is the dotted rule, 2px dots every
   8px, and it is not a border: section 2 of this file says so. The difference
   between the two cards is now that one is filled and one is on open paper. */
.dp-card--out { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink-a10); }

.dp-cardhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; padding-bottom: 22px; border-bottom: 1px solid rgba(18,16,14,0.12); }
.dp-cardhead--out { display: block; padding-bottom: 22px; border-bottom: 1px solid rgba(18,16,14,0.1); }
.dp-h3 { margin: 0; font-size: 34px; letter-spacing: -0.02em; }
.dp-h3 + .dp-sub { margin-top: 8px; }
.dp-sub { margin: 0; font-size: 15px; color: var(--dp-muted-2); }
.dp-pill { flex: none; display: flex; align-items: center; gap: 8px; background: var(--dp-ink); color: var(--dp-cream); border-radius: 999px; padding: 8px 14px; font-family: var(--dp-mono); font-size: 12px; letter-spacing: 0.08em; white-space: nowrap; }
.dp-pill i { width: 6px; height: 6px; border-radius: 999px; background: #22B18F; }

.dp-list { display: flex; flex-direction: column; padding: 6px 0; }
.dp-row { display: grid; grid-template-columns: 30px 1fr 20px; gap: 16px; align-items: center; padding: 14px; margin: 0 -14px; border-radius: 14px; cursor: help; outline: none; transition: background 140ms ease; }
.dp-card--in .dp-row:hover, .dp-card--in .dp-row:focus-visible { background: rgba(255,255,255,0.62); }
.dp-card--out .dp-row:hover, .dp-card--out .dp-row:focus-visible { background: rgba(18,16,14,0.04); }
.dp-label { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.dp-row--out .dp-label { color: var(--dp-muted-2); }
.dp-i { font-family: var(--dp-mono); font-size: 13px; color: #8E8579; text-align: right; }

.dp-mark { flex: none; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; }
.dp-mark--yes { background: var(--dp-green); box-shadow: 0 0 0 4px rgba(15,140,115,0.18); }
.dp-mark--no { border: 1px solid rgba(18,16,14,0.18); }

.dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; margin-top: auto; border-top: 1px solid rgba(18,16,14,0.12); }
.dp-foot p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--dp-muted); max-width: 46ch; }
.dp-cta { flex: none; background: var(--dp-tan); color: var(--dp-ink); font-size: 16px; font-weight: 800; text-decoration: none; padding: 15px 26px; border-radius: 999px; transition: transform 160ms ease, background 160ms ease; }
.dp-cta:hover { background: var(--accent-hover); color: var(--dp-ink); transform: translateY(-1px); }

.dp-para { margin: 24px 0 0; font-size: 17px; line-height: 1.55; color: var(--dp-muted); text-wrap: pretty; }
.dp-callout { padding: 18px 20px; background: var(--dp-cream); border-radius: 16px; display: flex; gap: 14px; align-items: flex-start; }
.dp-callout span:last-child { font-size: 15px; line-height: 1.5; color: #4A453E; }
.dp-callout .dp-mark { width: 22px; height: 22px; box-shadow: none; margin-top: 1px; }

.dp-tip { position: fixed; z-index: 60; pointer-events: none; max-width: 320px; background: var(--dp-ink); color: var(--dp-cream); border-radius: 16px; padding: 16px 18px; box-shadow: 0 18px 40px rgba(18,16,14,0.28); font-family: var(--dp-font); opacity: 0; transition: opacity 120ms ease; }
.dp-tip[data-show="1"] { opacity: 1; }
.dp-tip-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dp-tip-badge { flex: none; width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; background: var(--dp-green); }
.dp-tip[data-kind="no"] .dp-tip-badge { background: none; border: 1px solid var(--dp-muted-2); }
.dp-tip-tag { font-family: var(--dp-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--dp-tan); }
.dp-tip[data-kind="no"] .dp-tip-tag { color: #B5AC9E; }
.dp-tip-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.dp-tip-note { font-size: 14px; line-height: 1.5; color: #D8D0C2; text-wrap: pretty; }

@media (max-width: 760px) {
  .dp-sec { padding-block: var(--s-64) var(--s-48); }   /* the gutter comes from the token */
  .dp-h2 { font-size: 36px; }
  .dp-lede { font-size: 18px; }
  .dp-card { padding: 28px 22px; }
  .dp-h3 { font-size: 26px; }
  .dp-label { font-size: 17px; }
}

/* ---- 10. The testing sequence, as a folding stack -------------------------
   Same mechanism as the range on the landing page. js/main.js drives every
   .fold-stack it finds and this page already loads it, so these cards need no
   script: they inherit the pin, the colour blend, the rotation and the two
   fade variables for nothing.

   What differs is what a card holds. The landing page fills its second column
   with a photograph, and there is no photograph of a sequence, so that column
   takes the row of the table this section used to be: one stage per card,
   three facts each, the same words as before.

   Heights are a floor, never a ceiling. The reference pins its cards at a
   fixed height because a photograph does not reflow; a table does, and at 390
   this content wanted 545px against a 470px ceiling, which .fold's own
   overflow: hidden quietly cut off. A min-height fills the card at every width
   without ever being able to clip it.

   The two fades are wired the way the reference wires them, so the fold still
   reads as a fold: the panel is the "media" and goes first, the heading is the
   "text" and goes last. */
.fold--seq .fold__grid {
  min-height: 470px;
  /* the base .fold__grid caps its height so a photograph cannot stretch the
     card. A table can be taller than a photograph, and that cap was
     silently cutting 42px off card 1 at 320 and 85px off card 4 at 768,
     behind .fold overflow: hidden. Released here; the floor above does
     the shaping instead. */
  max-height: none;
  row-gap: var(--s-20); column-gap: 0;
  grid-template:
    ".  .     ." 26px
    ".  head  ." auto
    ".  panel ." 1fr
    ".  .     ." 26px
    / 22px minmax(0, 1fr) 22px;
}
/* 900, not the usual 768: between the two the second column exists but is
   too narrow to pay for itself, and the four cards came out 434 to 525 tall,
   which a pinned stack shows. Stacked until there is room. */
@media (min-width: 900px) {
  .fold--seq .fold__grid {
    min-height: 360px;
    /* the base .fold__grid caps its height so a photograph cannot stretch the
       card. A table can be taller than a photograph, and that cap was
       silently cutting 42px off card 1 at 320 and 85px off card 4 at 768,
       behind .fold overflow: hidden. Released here; the floor above does
       the shaping instead. */
    max-height: none;
    /* No row gap: the two padding rows already hold the card open, and a gap
       between them and the content was spending another 80px of a 400px card
       on nothing, which is what made the first pass feel empty. */
    row-gap: 0; column-gap: var(--s-40);
    grid-template:
      ".  .    .     ." 44px
      ".  head panel ." 1fr
      ".  .    .     ." 44px
      / 40px minmax(0, 1fr) minmax(0, 1.2fr) 40px;
  }
}

/* The left column: the numeral, the stage, and the count on the floor, so the
   column is read top to bottom rather than clustering at the top. */
.seq__head {
  grid-area: head; display: flex; flex-direction: column; gap: var(--s-16);
  justify-content: start;
  opacity: var(--fold-text-opacity);
}
.seq__top { display: grid; gap: var(--s-10); }

/* Four segments, the current one long and inked. It says what the line under
   it says, so it is decoration and hidden from the accessibility tree. */
.seq__bar { display: flex; align-items: center; gap: 6px; }
.seq__bar i {
  width: 26px; height: 4px; border-radius: var(--r-pill);
  background: var(--ink-a20); transition: none;
}
.seq__bar i[data-on="true"] { width: 46px; background: var(--ink); }
@media (min-width: 768px) { .seq__bar i { width: 34px; } .seq__bar i[data-on="true"] { width: 56px; } }
.seq__n {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: 60px; line-height: .84; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .seq__n { font-size: 88px; } }
/* Two of the four stage names wrap to a second line and two do not, which
   in the stacked layout put that difference straight into the card height:
   568 against 495. A two-line floor makes every head the same box. */
.seq__t { margin: 0; max-width: 15ch; min-height: 2lh; }
.seq__of {
  margin: 0; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .55);
}


/* The right column. A pale panel rather than the card tint, because the card
   itself blends to fawn as it folds and a tinted panel would disappear into
   it halfway through. White at 60% holds on all three grounds. */
.seq__panel {
  grid-area: panel; align-self: stretch;
  background: var(--white-a60); border-radius: var(--r-20);
  padding: var(--s-20) var(--s-24);
  opacity: var(--fold-media-opacity);
}
@media (min-width: 768px) { .seq__panel { padding: var(--s-28) var(--s-32); } }

/* height: 100% so the three rows spread over whatever the card gives them
   instead of bunching at the top of a stretched panel. */
.seq__tbl { width: 100%; height: 100%; border-collapse: collapse; text-align: left; }
.seq__tbl th {
  width: 92px; padding: var(--s-12) var(--s-12) var(--s-12) 0; vertical-align: top;
  font-family: var(--font-mono); font-weight: 400; font-size: 11px; line-height: 1.5;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .55);
}
.seq__tbl td {
  padding: var(--s-12) 0; vertical-align: top;
  font-family: var(--font-body); font-size: 16px; line-height: 1.45;
}
/* One separator language on this page: 2px dots on an 8px pitch in --ink-a20,
   the same rule the tier tables draw. Not on the first row, which has a panel
   edge above it rather than a row. */
.seq__tbl tbody tr + tr {
  background-image: radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px);
  background-size: 8px 2px; background-repeat: repeat-x; background-position: left top;
}
/* The payoff row is the reason the buyer is reading the card, so it is the one
   line in the panel set at the page's body size rather than under it. */
.seq__pay td { font-size: 18px; font-weight: 500; line-height: 1.35; }
@media (min-width: 768px) { .seq__pay td { font-size: 20px; } }

/* Below 620 the label column cannot pay for itself: at 390 it left the value
   95px to wrap into, which is eight lines for one sentence. The label goes
   above its value instead. The elements carry their table roles explicitly in
   the markup, because changing display on a table strips those roles out of
   the accessibility tree. */
@media (max-width: 619px) {
  .seq__tbl, .seq__tbl tbody, .seq__tbl tr, .seq__tbl th, .seq__tbl td {
    display: block; width: auto; height: auto;
  }
  .seq__tbl th { padding: 0 0 var(--s-4); }
  .seq__tbl td { padding: 0; }
  .seq__tbl tbody tr + tr { margin-top: var(--s-16); padding-top: var(--s-16); }
}


/* ---- 11. The herd photograph in the fur answer ---------------------------
   .callout is shared by four pages and is not touched here. The variant only
   turns it into two columns once there is room, which is where the answer's
   47ch measure was already leaving half the box empty. The measure moves from
   the child to the column, so the paragraph still sets the same line length.

   The frame is the landing page's card media: the card's own radius, the
   photograph inset and cropped to fill rather than letterboxed. It stretches
   to the paragraph's height, so the box has one floor instead of two. */
.fur__media { margin: 0; border-radius: var(--r-16); overflow: hidden; }
.fur__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  border-radius: var(--r-16);
}
/* Stacked, the paragraph decides nothing about the height, so the frame needs
   a shape of its own. It also has to opt out of the shared 47ch cap that
   .callout puts on every child: that measure is for reading, and it was
   holding the photograph to 521px in a 1050px box. The paragraph keeps it. */
.fur__media { aspect-ratio: 16 / 9; margin-top: var(--s-24); max-width: none; }

/* 1060, not 900: the answer holds its 47ch measure whatever the viewport
   does, so below this the second column is what is left over rather than a
   size of its own, and at 900 that was a 148px sliver of a photograph. */
@media (min-width: 1060px) {
  .callout--fur {
    display: grid; align-items: stretch; gap: var(--s-40);
    grid-template-columns: minmax(0, 47ch) minmax(0, 1fr);
  }
  .callout--fur > * { max-width: none; }
  .fur__media { aspect-ratio: auto; margin-top: 0; min-height: 100%; }
}

/* ---- 12. The liability line ----------------------------------------------
   The last block on the page, and an aside rather than a claim: it exists to
   say the honest thing about who carries the risk. It was reading as the
   loudest box in the section instead, because .callout holds every child to
   a 47ch measure and this paragraph is 590 characters, which is eight lines
   down the left of a 1050px box with 400px of tint beside them.

   Two columns rather than a wider measure. Releasing the cap would have set
   the line at 95 characters, which is a worse read than the empty space was;
   columns keep the same measure, use the width the box already has, and
   halve the height without a word changing. The paragraph stays one
   paragraph: multicol balances it, so the split lands wherever the text
   actually divides in two rather than at a sentence I picked in advance.

   The padding comes down a step with it. */
.callout--liability { padding: var(--s-24); }
@media (min-width: 768px) { .callout--liability { padding: var(--s-28) var(--s-32); } }

/* 1000: below this the two columns are under 400px, which is 39 characters
   and the point where the measure stops being a measure and starts being a
   newspaper. One column and the shared 47ch cap until then. */
@media (min-width: 1000px) {
  .callout--liability { columns: 2; column-gap: var(--s-40); }
  .callout--liability > * { max-width: none; }
}