/* LCG Foods Design System, version 2. Components.
Link foundations.css first. Every component is styled only with role tokens, so the same
markup is correct on a slide, a printed page, a social frame and a web page.
Class names start with lcg- so they never collide with a template's own classes.
Each component's purpose, its use and its fallback when content is missing are in guide.html. */
/* ─────────────────────────────── BASE ─────────────────────────────── */
.lcg {
font-family: var(--font-text);
font-weight: var(--weight-text);
font-size: var(--size-text);
line-height: var(--leading-text);
color: var(--ink);
background: var(--paper);
font-feature-settings: "kern", "liga";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-variant-numeric: lining-nums;
}
.lcg, .lcg *, .lcg *::before, .lcg *::after { box-sizing: border-box; }
.lcg img { display: block; max-width: 100%; }
.lcg p { margin: 0; max-width: var(--measure); }
/* No orphans, ever. Paragraphs and list items are set "pretty", which keeps at least two words on the
last line; headings are balanced. no-orphans.js backs this up with a non-breaking space between the
last two words, for renderers and inboxes that ignore text-wrap. Ruled 2026-10-09. */
.lcg p, .lcg li, .lcg dd, .lcg td, .lcg th, .lcg figcaption, .lcg blockquote, .lcg span, .lcg div { text-wrap: pretty; }
.lcg h1, .lcg h2, .lcg h3, .lcg h4 { text-wrap: balance; }
.lcg q, .lcg blockquote { hanging-punctuation: first last; }
.lcg h1, .lcg h2, .lcg h3, .lcg h4 { margin: 0; }
.lcg--ink { background: var(--ink); color: var(--on-ink); }
.lcg--white { background: var(--white); }
.lcg--partner { background: var(--partner); color: var(--on-partner); }
/* Lime ground: allowed for one frame or block at a time. The logo on lime is always the mono ink
version (assets/lcg-logo-mono-ink.svg), never the full-colour logo: its lime leaf disappears.
Green text is replaced by ink. Ruled 2026-10-09. */
.lcg--lime { background: var(--lime); color: var(--ink); }
.lcg--lime .lcg-em, .lcg--lime .lcg-kicker__index, .lcg--lime .lcg-reason::before { color: var(--ink); }
.lcg--lime .lcg-kicker, .lcg--lime .lcg-folio { border-top-color: rgba(10,10,10,0.28); color: var(--ink); }
.lcg--lime .lcg-small, .lcg--lime .lcg-stat__label, .lcg--lime .lcg-kicker__end { color: rgba(10,10,10,0.72); }
.lcg--stone { background: var(--stone-50); }
/* ──────────────────────────────── TYPE ──────────────────────────────── */
.lcg-display {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--size-display);
line-height: var(--leading-display);
letter-spacing: var(--tracking-display);
text-wrap: balance;
}
.lcg-title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--size-title);
line-height: var(--leading-title);
letter-spacing: var(--tracking-title);
text-wrap: balance;
}
.lcg-heading {
font-family: var(--font-heading);
font-weight: var(--weight-title);
font-size: var(--size-heading);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-heading);
}
.lcg-lead {
font-size: var(--size-lead);
line-height: 1.38;
font-weight: var(--weight-text);
max-width: var(--measure-short);
text-wrap: pretty;
}
.lcg-text { font-size: var(--size-text); line-height: var(--leading-text); text-wrap: pretty; }
.lcg-small { font-size: var(--size-small); line-height: 1.45; color: var(--stone-600); }
.lcg--ink .lcg-small { color: var(--on-ink-muted); }
/* The label: kickers, tags, column heads. Always capitals, always tracked, always 800. */
.lcg-label {
font-family: var(--font-text);
font-weight: var(--weight-label);
font-size: var(--size-label);
line-height: var(--leading-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
/* One emphasis word per headline. Italic, deep green on light, lime on ink. */
.lcg-em { font-style: italic; color: var(--green); }
.lcg--ink .lcg-em { color: var(--lime); }
/* Numbers that line up: prices, stats, tables. */
.lcg-figures { font-variant-numeric: tabular-nums lining-nums; }
/* ─────────────────────────────── LAYOUT ─────────────────────────────── */
.lcg-grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
column-gap: var(--grid-gutter);
}
.lcg-margins { padding-inline: var(--grid-margin); }
.lcg-stack > * + * { margin-top: var(--stack-gap); }
.lcg-blocks > * + * { margin-top: var(--block-gap); }
/* ─────────────────────────────── RULES ─────────────────────────────── */
.lcg-rule { border: 0; border-top: var(--rule); margin: 0; }
.lcg-rule--ink { border-top: var(--rule-strong); }
.lcg-rule--heavy { border-top: var(--rule-heavy); }
.lcg--ink .lcg-rule { border-top: var(--rule-on-ink); }
/* ──────────────────────────── KICKER ────────────────────────────
An index number and a label, sitting on a rule. Every section starts with one.
02Proof
*/
.lcg-kicker {
display: flex;
align-items: baseline;
gap: var(--space-4);
padding-top: var(--space-2);
border-top: var(--rule-strong);
font-weight: var(--weight-label);
font-size: var(--size-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.lcg-kicker__index { font-variant-numeric: tabular-nums; color: var(--green); }
.lcg-kicker__end { margin-left: auto; color: var(--stone-600); }
.lcg--ink .lcg-kicker { border-top: var(--rule-on-ink); }
.lcg--ink .lcg-kicker__index { color: var(--lime); }
.lcg--ink .lcg-kicker__end { color: var(--on-ink-muted); }
/* Section head: kicker, then title, then an optional lead. */
.lcg-section-head { display: grid; gap: var(--space-5); }
/* ──────────────────────────── FOLIO ────────────────────────────
The foot of every page and slide: the LCG Foods mark, what this is, the page number. */
.lcg-folio {
display: flex;
align-items: center;
gap: var(--space-5);
padding-top: var(--space-3);
border-top: var(--rule);
font-size: var(--size-label);
font-weight: var(--weight-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--stone-600);
}
.lcg-folio__mark { height: calc(var(--size-label) * 1.9); width: auto; }
.lcg-folio__page { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); }
.lcg--ink .lcg-folio { border-top: var(--rule-on-ink); color: var(--on-ink-muted); }
.lcg--ink .lcg-folio__page { color: var(--on-ink); }
/* ──────────────────────────── TAGS ──────────────────────────── */
.lcg-tag {
display: inline-flex; width: fit-content;
align-items: center;
gap: 0.5em;
padding: 0.42em 0.9em 0.38em;
border-radius: var(--corner-round);
border: 1px solid currentColor;
font-weight: var(--weight-label);
font-size: var(--size-label);
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
}
.lcg-tag--fill { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.lcg-tag--lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.lcg-tag--quiet { border-color: var(--stone-200); color: var(--stone-600); }
.lcg-tag--new { background: var(--gold); color: var(--ink); border-color: var(--gold); }
/* Trend chip: a CHFA trend the product rides. Prints only with its proving fact. */
.lcg-trend {
display: inline-flex; align-items: center; gap: 0.6em;
font-weight: var(--weight-heading);
font-size: var(--size-small);
}
.lcg-trend::before {
content: ""; width: 0.6em; height: 0.6em; border-radius: 50%;
background: var(--lime); box-shadow: inset 0 0 0 1px rgba(10,10,10,0.18);
}
/* ─────────────────────────── BUTTON / CALL TO ACTION ─────────────────────────── */
.lcg-button {
display: inline-flex; align-items: center; gap: 0.6em;
padding: 0.85em 1.4em;
border-radius: var(--corner-round);
background: var(--ink); color: var(--on-ink);
font-weight: var(--weight-label);
font-size: var(--size-small);
letter-spacing: 0.02em;
text-decoration: none; border: 0; cursor: pointer;
transition: background var(--duration-quick) var(--ease);
}
.lcg-button:hover { background: var(--stone-800); }
.lcg-button--lime { background: var(--lime); color: var(--ink); }
.lcg-button--lime:hover { background: #A3C22B; }
.lcg-button--line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.lcg-button__arrow { transition: transform var(--duration) var(--ease); }
.lcg-button:hover .lcg-button__arrow { transform: translateX(3px); }
/* ─────────────────────────────── PACK SHOT ─────────────────────────────── */
.lcg-pack { filter: var(--pack-shadow); display: block; }
.lcg-pack--small { filter: var(--pack-shadow-small); }
/* A pack with no clean cutout prints as a card on purpose: the photograph on its own white, rounded,
lifted by the pack shadow as a box shadow so the card, not the white square, casts it. Maintainer,
2026-10-15, on Glutenull's clear clamshells: "make it look purposeful ... the card on a drop shadow". */
.lcg-pack.lcg-pack--card { filter: none; background: #fff; border-radius: 8px; padding: 6%; box-sizing: border-box;
box-shadow: 0 14px 22px rgba(0,0,0,0.16), 0 4px 7px rgba(0,0,0,0.10); }
.lcg--ink .lcg-pack.lcg-pack--card { box-shadow: none; }
.lcg--ink .lcg-pack { filter: none; }
/* A drawn stand-in while the real pack shot is not on file. Shape only, never a fake label. */
.lcg-pack-stand-in {
position: relative;
aspect-ratio: 3 / 4;
border-radius: 6px 6px 3px 3px;
background: linear-gradient(100deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.38) 18%, rgba(255,255,255,0) 34%), var(--stand-in, var(--stone-200));
filter: var(--pack-shadow-small);
}
.lcg-pack-stand-in::after {
content: ""; position: absolute; left: 14%; right: 14%; top: 34%; height: 22%;
background: rgba(255,255,255,0.55); border-radius: 2px;
}
.lcg-pack-stand-in--pouch { aspect-ratio: 5 / 7; border-radius: 4px 4px 10px 10px; }
.lcg-pack-stand-in--jar { aspect-ratio: 4 / 5; border-radius: 12px 12px 8px 8px; }
.lcg-pack-stand-in--jar::before {
content: ""; position: absolute; left: 8%; right: 8%; top: -7%; height: 11%;
background: var(--stone-800); border-radius: 3px;
}
/* Product tile: one product, upright, on a quiet ground, name and facts beneath. */
.lcg-product {
display: grid; grid-template-rows: auto auto; gap: var(--space-4); align-content: start;
}
.lcg-product__stage {
display: grid; place-items: end center; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
aspect-ratio: 4 / 5;
padding: 14% 18% 12%;
background: var(--white);
border-radius: var(--corner);
}
.lcg-product--wide .lcg-product__stage { aspect-ratio: 5 / 4; padding: 10% 26% 9%; }
.lcg-product__stage > * { width: 100%; max-height: 100%; object-fit: contain; }
.lcg-product__stage > img { height: 100%; min-height: 0; object-position: 50% 100%; } /* every pack shot fills the same stage, so the names beneath line up */
.lcg-product__name { font-family: var(--font-heading); font-weight: var(--weight-title); font-size: var(--size-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.lcg-product__meta { display: flex; gap: var(--space-3); flex-wrap: wrap; color: var(--stone-600); font-size: var(--size-small); }
.lcg-product__code { font-variant-numeric: tabular-nums; color: var(--stone-400); }
/* Pack row: the line-up. Packs misbehave on purpose: each tilts a little its own way, sits at its own
height and overlaps its neighbour, so the row has depth and life. The middle pack comes forward.
Every pack keeps the drop shadow, which is what makes the overlap read as depth.
--overlap sets how far each pack tucks behind the next (default 14% of a pack's width).
.lcg-pack-row--apart keeps them separate when the packs must be read side by side. */
.lcg-pack-row { --overlap: 14%; display: flex; align-items: flex-end; justify-content: center; isolation: isolate; }
.lcg-pack-row > * { position: relative; flex: 0 1 auto; filter: var(--pack-shadow); }
.lcg-pack-row > * + * { margin-left: calc(var(--overlap) * -1); }
.lcg-pack-row > :nth-child(5n+1) { transform: rotate(-4.5deg) translateY(5%); z-index: 2; }
.lcg-pack-row > :nth-child(5n+2) { transform: rotate(2deg) translateY(-9%) scale(1.06); z-index: 4; }
.lcg-pack-row > :nth-child(5n+3) { transform: rotate(-1deg) translateY(1%) scale(0.97); z-index: 3; }
.lcg-pack-row > :nth-child(5n+4) { transform: rotate(4deg) translateY(7%); z-index: 1; }
.lcg-pack-row > :nth-child(5n+5) { transform: rotate(-2.5deg) translateY(-2%) scale(1.02); z-index: 2; }
.lcg-pack-row--apart { --overlap: calc(var(--space-4) * -1); }
.lcg--ink .lcg-pack-row > * { filter: drop-shadow(0 18px 26px rgba(0,0,0,0.6)); }
/* ─────────────────────────────── FLAGS AND MARKS ─────────────────────────────── */
/* Dietary and claim flags: a row of short words between hairlines. No icons needed. */
.lcg-flags {
display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
font-size: var(--size-label); font-weight: var(--weight-label);
letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.lcg-flags > * { display: inline-flex; align-items: center; gap: 0.55em; }
.lcg-flags > *::before { content: ""; width: 0.55em; height: 0.55em; background: var(--green); border-radius: 50%; }
.lcg--ink .lcg-flags > *::before { background: var(--lime); }
/* A certification the brand states. Its mark if on file, its name if not. */
.lcg-cert { /* a lime pill, as Design System 1 marked a certification. Not a circle. Barron, 2026-10-10 */
display: inline-flex; align-items: center; gap: 0.5em; padding: 0.6em 1.1em; border-radius: var(--corner-round);
background: var(--lime); color: var(--ink); font-size: var(--size-label); font-weight: var(--weight-label);
letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.lcg-cert img { max-width: 80%; max-height: 80%; }
/* ─────────────────────────────── FOUNDER ─────────────────────────────── */
.lcg-founder { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: end; }
.lcg-founder__portrait {
width: calc(var(--size-heading) * 4.6); aspect-ratio: 4 / 5; object-fit: cover;
border-radius: var(--corner); background: var(--stone-100); filter: grayscale(0.12) contrast(1.02);
}
.lcg-founder__name { font-family: var(--font-heading); font-weight: var(--weight-title); font-size: var(--size-heading); letter-spacing: var(--tracking-heading); line-height: 1.1; }
.lcg-founder__role { font-size: var(--size-small); color: var(--stone-600); margin-top: var(--space-1); }
.lcg-founder__line { margin-top: var(--space-4); font-size: var(--size-lead); line-height: 1.35; max-width: var(--measure-short); }
/* ─────────────────────────────── REASONS TO LIST ───────────────────────────────
Exactly three. Each is a number, one short line, and the fact it stands on. */
.lcg-reasons { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--grid-gutter); counter-reset: reason; } /* three, two or one: the columns share the width */
.lcg-reason { display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--rule-heavy); counter-increment: reason; }
.lcg-reason::before {
content: counter(reason, decimal-leading-zero);
font-weight: var(--weight-label); font-size: var(--size-label); letter-spacing: var(--tracking-label);
color: var(--green); font-variant-numeric: tabular-nums;
}
.lcg-reason__line { font-family: var(--font-heading); font-weight: var(--weight-title); font-size: var(--size-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.lcg-reason__fact { font-size: var(--size-small); color: var(--stone-600); }
.lcg--ink .lcg-reason { border-top-color: var(--lime); }
.lcg--ink .lcg-reason::before { color: var(--lime); }
.lcg--ink .lcg-reason__fact { color: var(--on-ink-muted); }
/* The kind of proof, in the buyer's words, where the number was (decision 120): chosen by the
reason's rung from shared/reason-labels.yml. A reason with a label drops its number. */
.lcg-reason__label { color: var(--green); }
.lcg-reason:has(> .lcg-reason__label)::before { content: none; display: none; }
.lcg--ink .lcg-reason__label { color: var(--lime); }
.lcg--lime .lcg-reason__label { color: var(--ink); }
/* ─────────────────────────────── STAT ─────────────────────────────── */
.lcg-stat { display: grid; gap: var(--space-2); align-content: start; }
.lcg-stat__number {
font-family: var(--font-display); font-weight: var(--weight-display);
font-size: var(--size-number); line-height: 0.9; letter-spacing: -0.04em;
font-variant-numeric: proportional-nums lining-nums; /* display figures set proportional; tables set tabular */
}
.lcg-stat__unit { font-size: 0.42em; letter-spacing: -0.01em; margin-left: 0.06em; }
.lcg-stat__label { font-size: var(--size-small); color: var(--stone-600); max-width: 28ch; line-height: 1.35; }
.lcg--ink .lcg-stat__label { color: var(--on-ink-muted); }
.lcg-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--grid-gutter); }
.lcg-stats > .lcg-stat { padding-top: var(--space-3); border-top: var(--rule-strong); }
.lcg--ink .lcg-stats > .lcg-stat { border-top: var(--rule-on-ink); }
/* ─────────────────────────────── QUOTE ─────────────────────────────── */
.lcg-quote { display: grid; gap: var(--space-4); }
.lcg-quote__text {
font-family: var(--font-heading); font-weight: var(--weight-title);
font-size: var(--size-heading); line-height: 1.18; letter-spacing: var(--tracking-heading);
text-indent: -0.42em; text-wrap: balance;
}
.lcg-quote__who { font-size: var(--size-small); color: var(--stone-600); }
.lcg-quote__who::before { content: ""; display: inline-block; width: 1.6em; height: 1px; background: currentColor; vertical-align: middle; margin-right: 0.6em; }
.lcg--ink .lcg-quote__who { color: var(--on-ink-muted); }
/* ─────────────────────────────── STARS ───────────────────────────────
A review score always shows its stars. Set --fill to the score as a share of five (4.0 is 80%).
Size follows font-size. Ruled 2026-10-09. */
.lcg-stars {
--fill: 80%;
display: inline-block; vertical-align: -0.12em;
width: 5.4em; height: 1em; flex: none;
background: linear-gradient(90deg, var(--gold) var(--fill), var(--stone-200) var(--fill));
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 20'%3E%3Cg%3E%3Cpath id='s' d='M10 0l2.9 6.3 6.6.7-5 4.6 1.4 6.6L10 14.8 4.1 18.2l1.4-6.6-5-4.6 6.6-.7z'/%3E%3Cuse href='%23s' x='22'/%3E%3Cuse href='%23s' x='44'/%3E%3Cuse href='%23s' x='66'/%3E%3Cuse href='%23s' x='88'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 20'%3E%3Cg%3E%3Cpath id='s' d='M10 0l2.9 6.3 6.6.7-5 4.6 1.4 6.6L10 14.8 4.1 18.2l1.4-6.6-5-4.6 6.6-.7z'/%3E%3Cuse href='%23s' x='22'/%3E%3Cuse href='%23s' x='44'/%3E%3Cuse href='%23s' x='66'/%3E%3Cuse href='%23s' x='88'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.lcg--ink .lcg-stars { background: linear-gradient(90deg, var(--gold) var(--fill), rgba(255,255,255,0.22) var(--fill)); }
/* ─────────────────────────────── RATING ───────────────────────────────
A score, its scale, how many reviews and the one named site. Never combined across sites. */
.lcg-rating { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-4); align-items: center; }
.lcg-rating__score { grid-row: span 2; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-number); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: proportional-nums lining-nums; }
.lcg-rating__stars { font-size: calc(var(--size-number) * 0.24); }
.lcg-rating__source { font-size: var(--size-small); color: var(--stone-600); }
/* ─────────────────────────────── PRICE ─────────────────────────────── */
.lcg-price { display: grid; gap: var(--space-1); }
.lcg-price__amount { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-heading); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.lcg-price__per { font-size: var(--size-small); color: var(--stone-600); font-variant-numeric: tabular-nums; }
/* Price check: per 100 g, ours against one named comparison. Each side stands alone. */
.lcg-compare { display: grid; gap: var(--space-3); }
.lcg-compare__row { display: grid; grid-template-columns: 9em 1fr 5em; gap: var(--space-3); align-items: center; font-size: var(--size-small); }
.lcg-compare__bar { height: 0.7em; background: var(--stone-100); position: relative; }
.lcg-compare__bar > i { position: absolute; inset: 0 auto 0 0; width: var(--share, 50%); background: var(--stone-400); }
.lcg-compare__row--ours .lcg-compare__bar > i { background: var(--green); }
.lcg-compare__row--ours { font-weight: var(--weight-strong); }
.lcg-compare__value { text-align: right; font-variant-numeric: tabular-nums; }
/* ─────────────────────────────── TABLE ─────────────────────────────── */
.lcg-table { width: 100%; border-collapse: collapse; font-size: var(--size-small); font-variant-numeric: tabular-nums lining-nums; }
.lcg-table th {
text-align: left; font-weight: var(--weight-label); font-size: var(--size-label);
letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--stone-600);
padding: 0 var(--space-3) var(--space-2) 0; border-bottom: var(--rule-strong); vertical-align: bottom;
}
.lcg-table td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: var(--rule); vertical-align: top; }
.lcg-table .is-number { text-align: right; padding-right: 0; }
.lcg-table tr:last-child td { border-bottom: var(--rule-strong); }
.lcg-table--app tbody tr:hover td { background: var(--stone-50); }
/* Nutrition: the short form, four lines, from the panel on file. */
.lcg-nutrition { display: grid; grid-template-columns: repeat(4, auto); gap: 0 var(--space-5); justify-content: start; }
.lcg-nutrition > div { display: grid; align-content: start; gap: 2px; }
.lcg-nutrition b { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-heading); letter-spacing: -0.02em; }
.lcg-nutrition span { font-size: var(--size-label); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--stone-600); }
/* ─────────────────────────────── CALLOUT ─────────────────────────────── */
/* A callout is a ruled row, not a tinted box with a side stripe (decision 103): a strong rule on top, the line beneath. */
.lcg-callout { padding: var(--space-3) 0 var(--space-4); border-top: 2px solid var(--green); box-shadow: inset 0 calc(var(--hairline) * -1) 0 var(--stone-200); }
.lcg-callout--gold { border-top-color: var(--gold); }
.lcg-callout--ink { padding: var(--space-4) var(--space-5); background: var(--ink); color: var(--on-ink); border-top-color: var(--lime); box-shadow: none; }
/* ─────────────────────────────── CANADIAN BRAND BADGE ─────────────────────────────── */
.lcg-canada {
display: inline-flex; align-items: center; gap: 0.55em;
font-weight: var(--weight-label); font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.lcg-canada__leaf { width: 1.7em; height: 1.7em; color: var(--canada-red); }
/* ─────────────────────────────── MATCH CARD (selling, app) ─────────────────────────────── */
.lcg-match { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-bottom: var(--rule); }
.lcg-match__rank { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-title); line-height: 1; color: var(--stone-200); }
.lcg-match__why { font-size: var(--size-small); color: var(--stone-600); }
/* ─────────────────────────────── SOURCES (internal only) ─────────────────────────────── */
.lcg-sources { font-size: var(--size-small); color: var(--stone-600); counter-reset: source; display: grid; gap: var(--space-2); }
.lcg-sources > li { list-style: none; display: grid; grid-template-columns: 2.4em 1fr; counter-increment: source; }
.lcg-sources > li::before { content: counter(source); font-variant-numeric: tabular-nums; color: var(--stone-400); }
/* ─────────────────────────────── APP PIECES ─────────────────────────────── */
.lcg-internal {
display: inline-flex; align-items: center; gap: 0.5em;
padding: 0.3em 0.7em; border-radius: var(--corner-small);
background: var(--ink); color: var(--lime);
font-size: var(--size-label); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
/* Status: the word and a small square, no tinted pill (decision 102). The word carries the meaning,
the colour backs it up, as the banners do. */
.lcg-status {
display: inline-flex; width: fit-content; justify-self: start; align-items: center; gap: 0.6em;
font-size: var(--size-small); font-weight: var(--weight-heading); line-height: 1.2;
color: var(--stone-800); white-space: nowrap;
}
.lcg-status::before { content: ""; width: 0.45em; height: 0.45em; background: currentColor; flex: none; }
.lcg-status--good { color: var(--status-good); }
.lcg-status--wait { color: var(--status-wait); }
.lcg-status--stop { color: var(--status-stop); }
.lcg-status--info { color: var(--status-info); }
/* Not on file. Shown inside the wiki and the app only. A buyer never sees a gap. */
.lcg-missing {
display: inline-flex; align-items: center; gap: 0.45em;
color: var(--stone-400); font-style: italic; font-size: var(--size-small);
}
.lcg-meter { display: grid; gap: var(--space-2); }
.lcg-meter__track { height: 6px; background: var(--stone-100); border-radius: var(--corner-round); overflow: hidden; }
.lcg-meter__fill { height: 100%; width: var(--value, 0%); background: var(--green); border-radius: inherit; }
.lcg-meter__label { display: flex; justify-content: space-between; font-size: var(--size-small); color: var(--stone-600); font-variant-numeric: tabular-nums; }
.lcg-card { background: var(--white); border: var(--rule); border-radius: var(--corner); padding: var(--space-5); }
.lcg-card--lift { border-color: transparent; box-shadow: var(--lift); }
.lcg-nav { display: flex; align-items: center; gap: var(--space-5); height: 56px; padding-inline: var(--grid-margin); background: var(--white); color: var(--ink); box-shadow: inset 0 calc(var(--hairline) * -1) 0 var(--stone-200); font-size: var(--size-small); font-weight: var(--weight-heading); } /* light: the top of a screen is never a black bar (decision 100) */
.lcg-nav a { color: var(--stone-600); text-decoration: none; }
.lcg-nav a:hover { color: var(--ink); }
.lcg-nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); padding-bottom: 17px; margin-bottom: -19px; }
.lcg-search {
display: flex; align-items: center; gap: var(--space-2);
height: 36px; padding: 0 var(--space-3); min-width: 280px;
background: var(--white); border: 1px solid var(--stone-200); border-radius: var(--corner);
color: var(--stone-400); font-size: var(--size-small);
}
.lcg-filter { display: inline-flex; align-items: center; gap: 0.4em; height: 30px; padding: 0 var(--space-3); border: 1px solid var(--stone-200); border-radius: var(--corner-round); font-size: var(--size-small); font-weight: var(--weight-heading); background: var(--white); }
.lcg-filter[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.lcg-empty { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-7) var(--space-6); border: 1.5px dashed var(--stone-200); border-radius: var(--corner); color: var(--stone-600); }
.lcg-alert { padding: var(--space-3) 0; border-top: 2px solid var(--status-wait); box-shadow: inset 0 calc(var(--hairline) * -1) 0 var(--stone-200); color: var(--ink); font-size: var(--size-small); } /* a ruled row, like the banner (decision 101) */
/* ─────────────────────────────── SOCIAL ─────────────────────────────── */
.lcg-frame { position: relative; overflow: hidden; }
.lcg-frame__count {
position: absolute; top: var(--grid-margin); right: var(--grid-margin);
font-size: var(--size-label); font-weight: var(--weight-label); letter-spacing: var(--tracking-label);
font-variant-numeric: tabular-nums;
}
.lcg-frame__next {
position: absolute; right: var(--grid-margin); bottom: var(--grid-margin);
display: inline-flex; align-items: center; gap: 0.5em;
font-size: var(--size-label); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
/* ───────────────────────────── BANDS AND BARS, 2026-10-10 ─────────────────────────────
Design System 1's bold spots, kept in version 2 by Barron's call of 2026-10-10: the ink pill
header with the white logo, the lime footer with "The Next Big Thing. Starts here.", and the
ink band for the reasons to list. One ink band and one lime band per page at most. */
.lcg-band { background: var(--ink); color: var(--on-ink); border-radius: var(--corner-band); padding: var(--space-5); display: grid; gap: var(--space-3); }
.lcg-band .lcg-small, .lcg-band .lcg-text { color: var(--on-ink-muted); }
.lcg-band .lcg-kicker { color: var(--lime); }
.lcg-band .lcg-em { color: var(--lime); }
.lcg-band--lime { background: var(--lime); color: var(--ink); }
.lcg-band--charcoal { background: var(--stone-800); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.08); }
.lcg-band--square { border-radius: 0; } /* square, to sit on the ruled grid like everything around it */ /* black's quieter sibling: a second dark element that keeps the one ink bar true */
.lcg-band--lime .lcg-kicker, .lcg-band--lime .lcg-small { color: var(--ink); }
.lcg-band--bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.lcg-band--pill { border-radius: var(--corner-round); }
.lcg-band--foot { border-radius: 0; } /* square, on the page's bottom edge (decision 104) */
.lcg-band--bar img { display: block; height: calc(var(--size-label) * 2.4); }
/* Ranked rows inside a band: the rank in lime, the line in white. Numbering is for a ranked list only. */
.lcg-band__rows { display: grid; }
.lcg-band__row { display: grid; grid-template-columns: 2.4em 1fr; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--rule-on-ink); }
.lcg-band__row:first-child { padding-top: 0; }
.lcg-band__row:last-child { border-bottom: 0; padding-bottom: 0; }
.lcg-band__rank { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-heading); color: var(--lime); letter-spacing: -0.02em; }
.lcg-band__line { font-family: var(--font-heading); font-weight: var(--weight-display); font-size: var(--size-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; }
/* The pill: Design System 1's tag in capitals. Lime, ink or gold. */
.lcg-pill { display: inline-flex; align-items: center; border-radius: var(--corner-round); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: var(--size-label); line-height: 1; padding: 0.6em 1.2em; background: var(--lime); color: var(--ink); white-space: nowrap; }
.lcg-pill--ink { background: var(--ink); color: var(--on-ink); }
.lcg-pill--gold { background: var(--gold-tint); color: var(--gold-text); box-shadow: inset 0 0 0 1px var(--gold); }
/* A check row: the lime disc, the line, a hairline beneath. Trends on a sheet. */
.lcg-check { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--rule); font-size: var(--size-text); font-weight: var(--weight-strong); }
.lcg-check:last-child { border-bottom: 0; }
.lcg-check > span { font-weight: var(--weight-text); color: var(--stone-600); }
.lcg-check::before { content: ""; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.5L5 9.5L10 3' stroke='%230A0A0A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 60%; background-position: center; background-repeat: no-repeat; }
/* A barcode: drawn by barcode.js from the code that joins from the record. Never typed. */
.lcg-barcode { display: grid; grid-template-columns: auto auto; align-items: center; gap: var(--space-2); justify-content: start; }
.lcg-barcode svg { display: block; height: 2.4em; width: 10em; }
.lcg-barcode__digits { font-size: calc(var(--size-small) * 0.9); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: var(--stone-600); }
/* A stage: a white card the packs misbehave on. The packs are never cropped: the row sits inside the padding. */
.lcg-stage { background: var(--white); border: var(--rule); border-radius: var(--corner-band); padding: var(--space-6) var(--space-5) var(--space-5); display: grid; align-items: end; overflow: visible; }
/* ───────────────────────────── THE SELL SHEET SURFACE, 2026-10-10 ─────────────────────────────
The parts special to the sell sheet, on the print ruler. Everything else on the sheet is a
shared part above: kicker, display, title, lead, flags, pack-row, stats, reasons, table, cert,
button, rating, stars, quote, trend, founder, folio, band, barcode. expressions/sell-sheet.html
shows each at print size with its rule for growing and compressing. */
/* The hero band: the brand partner's own ground (--partner, from its pack) under the running
kicker, the headline and the line, with the packs breaking out of the band's bottom edge. One
bold spot per sheet, and this is it. */
.lcg-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); padding: 36px var(--grid-margin) 0; background: var(--partner, var(--mint)); } /* no pack colour on file: the mint ground */
.lcg-hero > .lcg-kicker { grid-column: 1 / -1; }
.lcg-hero__copy { grid-column: 1 / span 7; padding: 6px 0 32px; display: grid; gap: var(--space-4); align-content: start; } /* 6px on top, not 22: the 16 px went to the hero pack (Barron, 2026-10-16) */
.lcg-hero__copy .lcg-display { font-size: 92px; letter-spacing: -0.045em; }
.lcg-hero__copy .lcg-title { font-size: 28px; }
.lcg-hero__packs { grid-column: 8 / -1; align-self: end; margin-bottom: -34px; } /* the breakout */
.lcg-hero__packs .lcg-pack-row > * { max-width: 30%; height: auto; }
.lcg-hero--tall .lcg-hero__copy { padding-bottom: 72px; } /* when the sheet has room to breathe */
.lcg-hero + * { padding-top: 48px; } /* room under the breakout */
/* One hero pack, the top seller, large, with its name under it the way the catalogue labels a pack. */
.lcg-hero__packs--one { position: relative; display: grid; justify-items: center; gap: var(--space-2); margin-bottom: -40px; }
.lcg-hero__packs--one .lcg-pack { width: 76%; height: auto; transform: rotate(-3deg); }
.lcg-hero__packs--one .lcg-pack-label { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: max-content; }
.lcg-pack-wrap { position: relative; display: grid; justify-items: center; gap: var(--space-2); } /* the tape and the label sit on the wrap, wherever it is */
.lcg-hero__packs--one .lcg-pack-wrap { width: 76%; }
.lcg-hero__packs--one .lcg-pack-wrap .lcg-pack { width: 100%; }
.lcg-pack-label { display: inline-block; padding: 0.55em 1.1em; background: var(--white); border-radius: var(--corner-round); box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 6px 16px -6px rgba(0,0,0,0.25); font-size: var(--size-label); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; }
.lcg-kicker__logo { margin-left: auto; height: calc(var(--size-label) * 2.6); align-self: center; }
.lcg-rank { font-family: var(--font-display); font-weight: var(--weight-display); color: var(--green); font-variant-numeric: tabular-nums; }
/* The top-seller tape: lime, capitals, tilted on the pack's corner, as the catalogue concepts mark it. A
highlight of its own, never part of a name. */
.lcg-tape { position: absolute; top: -8px; left: -10px; z-index: 2; padding: 0.5em 0.9em; background: var(--lime); color: var(--ink); font-size: var(--size-label); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; transform: rotate(-4deg); filter: var(--pack-shadow-small); } /* the tape sits on the pack, so it casts the pack's small shadow */
/* The tape as a heading (decision 121, 2026-10-15): an offer's section is named on the tape, stuck on
the section's rule and tilted like the top-seller tape. Ink on lime. One per view beside the hero
pack, so the page keeps to two misbehaving things. In the flow, so the page checks measure it. */
.lcg-group__head--tape { position: relative; z-index: 1; margin-bottom: calc(var(--space-2) * -1); }
.lcg-tape--heading { position: relative; top: auto; left: auto; display: inline-block; font-size: var(--size-lead); padding: 0.5em 1em; transform: rotate(var(--tilt-left)); }
/* The offer's figures (decision 121): bigger than a stat, in the system's green (text on light), on
a heavy ink rule; the terms read at lead size in ink, the dates quiet under them. */
.lcg-stats--offer.lcg-ruled { border-top: 2px solid var(--ink); }
.lcg-stats--offer .lcg-stat__number { font-size: calc(var(--size-number) * 1.18); color: var(--green); }
.lcg-stats--offer .lcg-stat__label { font-size: var(--size-lead); line-height: 1.3; color: var(--ink); max-width: none; }
.lcg-stats--offer .lcg-stat__label + .lcg-stat__label { font-size: var(--size-text); color: var(--stone-600); }
/* The ask line: a thin mint band with how to list the brand. No button. */
.lcg-ask-line { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: var(--space-3) 0; border-top: 2px solid var(--green); box-shadow: inset 0 calc(var(--hairline) * -1) 0 var(--stone-200); font-size: var(--size-text); } /* a ruled row (decision 103) */
.lcg-ask-line b { color: var(--ink); }
/* The folio's contact: four pieces, not one sentence. */
.lcg-folio__contact { display: flex; gap: var(--space-5); font-variant-numeric: tabular-nums; }
.lcg-folio__contact > span { white-space: nowrap; }
/* What it is, prominent: the line above the brand name a buyer reads first. */
.lcg-what { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--size-heading); letter-spacing: var(--tracking-heading); color: var(--green); }
/* A group rule: the fine line and air between the front's groups. */
.lcg-group { padding-top: var(--space-4); border-top: var(--rule); }
/* Shows and markets worked: date, show, what happened. Dense; the result reads in green. */
.lcg-shows { display: grid; }
.lcg-shows > div { display: flex; gap: 0 var(--space-2); padding: 3px 0; border-bottom: var(--rule); font-size: var(--size-small); line-height: 1.3; align-items: baseline; }
.lcg-shows > div:last-child { border-bottom: 0; }
.lcg-shows__date { flex: none; width: 7.5em; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--stone-400); }
.lcg-shows__name { flex: 1; }
.lcg-shows__result { flex: none; max-width: 46%; text-align: right; color: var(--green); font-weight: var(--weight-strong); }
/* Brand support: one mint block per programme that is on. A programme that is off prints nothing. */
.lcg-support { display: grid; gap: var(--space-2); }
.lcg-support > div { padding: var(--space-3) 0; border-top: 2px solid var(--green); font-size: var(--size-small); line-height: 1.45; } /* a ruled row, not a mint box with a stripe (decision 103) */
.lcg-support > div > b { color: var(--ink); }
/* The proof strip: short labelled lines on a strong rule, three across. A line with nothing drops. */
.lcg-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); }
.lcg-proof > div { display: grid; gap: var(--space-1); padding-top: var(--space-2); border-top: var(--rule-strong); font-size: var(--size-small); }
.lcg-page .lcg-proof { margin-top: var(--space-3); }
.lcg-proof > div { align-content: start; } /* each value starts under its label, whatever the tallest cell (Barron, 2026-10-13) */
.lcg-page .lcg-proof .lcg-label { font-family: var(--font-heading); font-weight: var(--weight-title); font-size: var(--size-text); letter-spacing: var(--tracking-heading); text-transform: none; color: var(--ink); } /* its own section, not the ingredients' (decision 111) */
/* The codes table: The Product Line and both barcodes as one table, for the buyer's team. The digits
sit under the bars; the rank and item columns are fixed so the product column takes the rest. */
.lcg-codes { font-size: var(--size-small); }
.lcg-codes td { padding-top: 4px; padding-bottom: 4px; vertical-align: middle; }
.lcg-codes .is-rank { width: 4em; }
.lcg-codes .is-item { width: 7.5em; white-space: nowrap; }
.lcg-codes .lcg-barcode svg { height: 18px; width: 84px; }
.lcg-codes .lcg-barcode { grid-template-columns: auto; gap: 2px; }
.lcg-codes .lcg-barcode__digits { white-space: nowrap; }
.lcg-codes .is-number { padding-right: var(--space-3); }
.lcg-codes .is-barcode { width: 100px; padding-left: var(--space-3); }
/* A product's own rating in the Product Line, when three or more on the line clear the gate: real
stars, the score, the count; the heading names the site (the maintainer, 2026-10-19). */
.lcg-codes .is-rating { white-space: nowrap; padding-right: var(--space-4); }
.lcg-rating-cell { display: inline-flex; align-items: center; gap: 0.4em; }
.lcg-rating-cell__count, .lcg-rating-cell__site { color: var(--stone-600); }
/* The quote block on ink, beside the rating: the one dark spot on the back. */
.lcg-quote-block { background: var(--stone-800); color: var(--on-ink); padding: var(--space-5) var(--space-6); } /* charcoal, not pure black; Barron 2026-10-10 */
.lcg-quote-block .lcg-quote__text { font-size: calc(var(--size-heading) * 0.95); max-width: 46ch; }
/* ───────────────────────────── THE PAGE AND ITS GROUPS, 2026-10-10 ─────────────────────────────
Added when the sell sheet's assembled pages were found carrying sixty typed sizes. A surface or a
template types no size: every one of these is a part with its rule, checked by
build/check_design_system.py. Barron, 2026-10-10: "you are also supposed to design the design
system: spacing, characters, elements". */
/* The page: the box a print template is measured against. Band, body, foot. Nothing may pass its
edges; the folio sits --page-foot above the bottom. */
.lcg-page { box-sizing: border-box; width: var(--page-width); height: var(--page-height); position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; background: var(--white); page: lcg-page; }
/* A page is a sheet of US Letter, edge to edge (decision 122, 2026-10-17, replacing 112's scaling).
--page-width by --page-height is 816 by 1056, which is 8.5 by 11 in at the browser's 96 per inch,
so the page fit-packs.js measures on screen is the paper itself and prints at 100%: no zoom, no
scale, no "fit to page". Without margin 0, Chrome adds margins and each foot spills onto a page
of its own. build/check_design_system.py refuses a print page that is not Letter or is scaled. */
@page lcg-page { size: letter; margin: 0; }
@media print {
/* Colour and grounds print whatever the dialog's "Background graphics" box says: off by default
in Chrome, which would drop the lime foot, the ink bar and the hero band from a saved PDF. */
.lcg-page, .lcg-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.lcg-page__inner { padding-left: var(--grid-margin); padding-right: var(--grid-margin); }
.lcg-page__head { padding-top: calc(var(--grid-margin) * 0.75); }
.lcg-page__body { display: grid; align-content: start; gap: var(--block-gap); padding-top: var(--block-gap); padding-bottom: var(--foot-room); } /* the foot room: a last group never sits on the foot band (decision 116, Signé Caméline's front, 2026-10-15) */
.lcg-page__body--tight { gap: calc(var(--block-gap) * 0.75); padding-top: calc(var(--block-gap) * 1.4); }
/* A crowded front closes up before its trends move to the back (sell sheet register T83): the gap
between groups, the room above each group's head, and the room under the hero, a step each. */
.lcg-page__body--crowded { gap: calc(var(--block-gap) * 0.75); }
.lcg-page__body--crowded > .lcg-group { padding-top: var(--space-3); }
.lcg-page__foot { padding-bottom: var(--page-foot); }
.lcg-page > .lcg-hero + .lcg-page__body { padding-top: calc(var(--block-gap) * 1.4); } /* room under the breakout */
.lcg-page > .lcg-hero + .lcg-page__body--crowded { padding-top: calc(var(--block-gap) * 1.1); }
/* A row: things side by side. Between puts the first at the left and the rest at the right;
end aligns baselines of unequal things (a rating beside a price). */
.lcg-row { display: flex; align-items: center; gap: var(--space-2); }
.lcg-row--between { justify-content: space-between; align-items: baseline; gap: var(--space-5); }
.lcg-row--end { display: grid; grid-auto-flow: column; gap: var(--space-6); align-items: end; }
.lcg-row--split { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); align-items: center; }
.lcg-row--halves { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
/* The grid's halves and thirds, for the sheet's two-column and three-column groups. */
.lcg-grid--stretch { align-items: stretch; }
.lcg-grid__half { grid-column: span 6; display: grid; gap: var(--space-3); align-content: start; }
.lcg-grid__third { grid-column: span 4; }
.lcg-grid__half--fill { grid-template-rows: auto 1fr; }
/* A group's head: the label at the left, the descriptor at the right in small, no wider than a
long line. The descriptor is agreed copy (docs/RTL-WRITING.md for the reasons), never written here. */
.lcg-group__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); margin-bottom: var(--space-3); }
.lcg-group__head .lcg-small { max-width: 62ch; text-align: right; }
.lcg-label + .lcg-table, .lcg-label + .lcg-certs, .lcg-label + .lcg-reasons { margin-top: var(--space-2); }
/* Trends on a sheet: three across on a strong rule, the trend chip then its proving fact. */
.lcg-trends { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); }
.lcg-trends__item { grid-column: span 4; border-top: var(--rule-strong); padding-top: var(--space-2); }
.lcg-trends__fact { margin-top: var(--space-1); }
/* Certifications, as the brand states them: a row of marks under their label. */
.lcg-certs { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
/* Compact figures beside each other: the rating and the price at the foot of the front. */
.lcg-rating--compact .lcg-rating__score { font-size: calc(var(--size-number) * 0.73); }
.lcg-stat--compact .lcg-stat__number { font-size: calc(var(--size-number) * 0.64); }
/* The reasons at lead size on a sheet: three lines across must stay short enough to read. */
.lcg-reasons--lead .lcg-reason__line { font-size: var(--size-lead); }
/* Strong text: the taste line. */
.lcg-text--strong { font-weight: var(--weight-strong); }
/* The founder on a sheet: centred on the portrait, the words at lead size with no measure. */
.lcg-founder--sheet { align-items: center; }
.lcg-founder--sheet .lcg-founder__portrait { width: calc(var(--size-heading) * 6.7); }
.lcg-founder--sheet .lcg-founder__name { font-size: calc(var(--size-heading) * 1.33); }
.lcg-founder--sheet .lcg-founder__line { margin-top: var(--space-3); font-size: calc(var(--size-lead) * 0.93); max-width: none; }
/* Founder drive: the label, the action photo as a band, then the shows. The photo is cut to a band
and centred a little above the middle, where a person at a booth is. */
.lcg-drive { display: grid; gap: var(--space-3); align-content: start; }
.lcg-drive__photo { width: 100%; height: calc(var(--size-heading) * 7.2); object-fit: cover; object-position: 50% 40%; display: block; }
/* Brand support, even: the blocks share the height and centre their lines. */
.lcg-support--even { gap: var(--space-3); grid-auto-rows: 1fr; }
.lcg-support--even > div { padding: calc(var(--space-3) + 2px) calc(var(--space-4) + 2px); display: grid; align-content: center; }
/* ───────────────────────────── A LINE OF ANY SIZE, AND A RECORD OF ANY DEPTH, 2026-10-10 ─────────────────────────────
Barron: "not every brand's going to have the same amount of stuff ... the design has to move with
it, in a fluid way." Two things follow. A pack strip that takes one pack or eighteen, and a page
body that spreads when groups have dropped. Both are parts with rules; the engine only decides
which parts are present. */
/* The pack strip: every pack of the line that is not the hero, each upright with its label. One row
to eight; nine to twelve wrap to two rows and shrink; thirteen and up wrap on and shrink to a floor.
The widths are tiers, counted from the end, so no one types a count. */
.lcg-pack-strip { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-3); align-items: flex-end; justify-content: flex-start; }
.lcg-pack-strip > * { display: grid; justify-items: center; gap: var(--space-2); width: 18%; }
.lcg-pack-strip > * > .lcg-pack, .lcg-pack-strip > * > .lcg-pack-stand-in { width: 100%; height: auto; }
.lcg-pack-strip > *:nth-last-child(n+5), .lcg-pack-strip > *:nth-last-child(n+5) ~ * { width: 11%; } /* five to eight: one row */
.lcg-pack-strip > *:nth-last-child(n+9), .lcg-pack-strip > *:nth-last-child(n+9) ~ * { width: 10.4%; } /* nine to twelve: two rows */
.lcg-pack-strip > *:nth-last-child(n+13), .lcg-pack-strip > *:nth-last-child(n+13) ~ * { width: 9%; } /* thirteen and up: the floor */
.lcg-pack-strip .lcg-tape { top: -6px; left: -6px; font-size: calc(var(--size-label) * 0.85); }
.lcg-pack-strip .lcg-pack-label { font-size: calc(var(--size-label) * 0.9); padding: 0.4em 0.8em; white-space: normal; text-align: center; max-width: none; min-width: min-content; overflow-wrap: normal; word-break: normal; hyphens: manual; box-sizing: border-box; }
/* One label on every back (the designer, 2026-10-19: "some of the labels of the packs on page 2 are not
consistent"): the same pill whatever the count, never a word broken ("DARK CHOCOLAT", "CHICKE"), its slot
as wide as its longest word, and every label in a row as tall as the tallest (fit-packs.js, bunch).
The plain labels a dense strip and a three-page back had used are gone. */
.lcg-pack-strip--hero { justify-content: center; } /* under the hero pack on the front, for a short line */
.lcg-page__body--roomy .lcg-pack-strip > * { width: 22%; } /* a short line on a roomy back: the packs take the room */
/* The page body when groups have dropped: the groups spread down the page instead of leaving the
foot empty. The engine picks it when the body is under two thirds full; the system defines it. */
.lcg-page__body--roomy { align-content: space-between; padding-bottom: var(--section-gap); } /* never down to the folio */
.lcg-page__body--roomy > .lcg-group { padding-top: var(--space-6); }
/* A continued page: the line's table runs on with its head repeated, under a kicker that says so. */
.lcg-page--continued .lcg-page__body { padding-top: var(--block-gap); }
.lcg-codes--continued thead th { padding-top: var(--space-2); }
/* The table's density tiers: to eight rows at small; nine and up at the floor. Counted from the end. */
.lcg-codes tbody tr:nth-last-child(n+9) td, .lcg-codes tbody tr:nth-last-child(n+9) ~ tr td { padding-top: 2px; padding-bottom: 2px; }
.lcg-codes tbody tr:nth-last-child(n+9) .lcg-barcode svg, .lcg-codes tbody tr:nth-last-child(n+9) ~ tr .lcg-barcode svg { height: 14px; }
/* One reason, or two: the row widens, the line grows. None: the group drops, the page closes up. */
.lcg-reasons > .lcg-reason:only-child .lcg-reason__line { font-size: var(--size-heading); max-width: 40ch; }
/* ───────────────────────────── GRIDS AND LINES, 2026-10-10 ─────────────────────────────
Barron: "I want to use grids and lines for every element and have it all really structured."
Ruled: a hairline between every column of a row, and the row on a strong rule. Applied to the
numbers, the reasons, the trends, the panels and the support blocks. */
.lcg-ruled { border-top: var(--rule-strong); padding-top: var(--space-3); }
.lcg-ruled > * + * { border-left: var(--rule); padding-left: var(--grid-gutter); }
.lcg-ruled > * { min-width: 0; }
.lcg-stats.lcg-ruled .lcg-stat { border-top: 0; padding-top: 0; }
.lcg-reasons.lcg-ruled .lcg-reason { border-top: 0; padding-top: 0; }
.lcg-trends.lcg-ruled { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 0; }
.lcg-trends.lcg-ruled .lcg-trends__item { border-top: 0; padding-top: 0; grid-column: auto; }
.lcg-support.lcg-ruled { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.lcg-support.lcg-ruled > div { background: none; border-left: var(--rule); padding: 0 0 0 var(--grid-gutter); }
.lcg-support.lcg-ruled > div:first-child { border-left: 0; padding-left: 0; }
/* A group's title: the heading role, for the group a buyer must not miss (Reasons to list). */
.lcg-group__title { font-family: var(--font-heading); font-weight: var(--weight-title); font-size: var(--size-heading); letter-spacing: var(--tracking-heading); line-height: 1.1; }
.lcg-group__head--title { align-items: baseline; }
.lcg-group__head--under { flex-direction: column; align-items: flex-start; gap: var(--space-1); } /* a line under the title says what the group lists (T86) */
.lcg-group__head--under .lcg-small { text-align: left; }
/* Cells: unlike things side by side, each in its own ruled cell (certifications | rating | price). */
.lcg-cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.lcg-cells > * { display: grid; gap: var(--space-2); align-content: start; }
.lcg-cells--end > * { align-content: end; }
.lcg-cells .lcg-certs { gap: var(--space-1) var(--space-2); }
.lcg-cells .lcg-cert { white-space: normal; text-align: left; line-height: 1.15; padding: 0.45em 0.9em; } /* a long name wraps inside its pill rather than stacking the row */
/* The panels: ingredients and the Nutrition Facts short form, one cell per product, three across on
a ruled grid. Ingredients in pack order from the record; the nutrition lines from the panel once one
is on file; either drops alone. To six products on the back; more go to the continued page. */
.lcg-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--grid-gutter); }
.lcg-panels:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* four: one row, never three and one left alone (no orphans; PB2, 2026-10-13) */
.lcg-panels > div { display: grid; gap: var(--space-1); align-content: start; border-top: var(--rule); padding-top: var(--space-2); font-size: var(--size-small); line-height: 1.4; }
.lcg-panels--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--grid-gutter); } /* a continued page with room: two across at text size */
.lcg-panels--two > div { font-size: var(--size-text); gap: var(--space-2); padding-top: var(--space-3); }
.lcg-panels--two:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* three: one row, never two and one left alone (no orphans; Aralea's continued page, 2026-10-18) */
.lcg-panels--packs > div { grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: start; }
.lcg-panels--packs > div:not(:has(> .lcg-panels__pack)) { grid-template-columns: minmax(0, 1fr); } /* no image (the print edition, or none on file): the text takes the panel */
.lcg-panels--packs .lcg-panels__pack { grid-row: span 3; width: calc(var(--size-text) * 4.2); height: auto; max-height: calc(var(--size-text) * 5.4); object-fit: contain; }
.lcg-panels--two .lcg-panels__pack { width: calc(var(--size-text) * 5.5); max-height: calc(var(--size-text) * 7); }
.lcg-panels__name { font-weight: var(--weight-strong); }
/* The print edition is set dense before anything leaves it (sell sheet T93, 2026-10-18). Print fits two
pages; a long line's back closes up first: rows at their tightest, barcodes shorter, the ingredient
panels (no pictures in print) four across where that leaves none alone, the groups closer. What
still does not fit is the person's to switch off; the engine never drops a section for them. */
[data-edition="print"] .lcg-codes td { padding-top: 2px; padding-bottom: 2px; }
[data-edition="print"] .lcg-codes .lcg-barcode svg { height: 14px; }
[data-edition="print"] .lcg-panels--packs:has(> :nth-child(5)):not(:has(> :nth-child(4n+1):last-child)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-edition="print"] .lcg-page:not(:has(.lcg-hero)) .lcg-page__body { gap: calc(var(--block-gap) * 0.75); }
.lcg-panels__ingredients { color: var(--stone-600); }
.lcg-panels__ingredients b { color: var(--ink); font-weight: var(--weight-strong); }
/* The allergen warning is its own line under the ingredients, never run on after them (the
designer, 2026-10-15, on Otelia's Soy & Chickpea panel; sell sheet register T74). */
.lcg-panels__allergens { color: var(--ink); }
.lcg-panels__allergens b { font-weight: var(--weight-strong); }
.lcg-panels__nutrition { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-3); font-variant-numeric: tabular-nums; }
/* The pack strip on the back misbehaves: a little tilt each way, a slight overlap, the labels under in
a row, always bunched tight as one group: when fit-packs.js sizes the packs, bunch() closes each slot
to its pack so they still overlap, never spaced apart (the designer, 2026-10-13, PB2; register T35).
Groups: pouches with pouches, tins with tins, each group its own ruled row with its label. */
.lcg-pack-strip--misbehave > * { margin-right: calc(var(--space-3) * -1.4); }
.lcg-pack-strip--misbehave > *:nth-child(odd) .lcg-pack { transform: rotate(-2.5deg); }
.lcg-pack-strip--misbehave > *:nth-child(even) .lcg-pack { transform: rotate(2deg) translateY(2%); }
.lcg-pack-strip--misbehave > *:nth-child(3n) .lcg-pack { transform: rotate(-1deg) translateY(-3%); }
.lcg-pack-strip--misbehave > * .lcg-pack { position: relative; z-index: 1; }
.lcg-pack-strip--misbehave > *:hover .lcg-pack { z-index: 2; }
.lcg-pack-strip--misbehave .lcg-pack-label { position: relative; z-index: 3; }
.lcg-pack-groups { display: grid; gap: var(--space-4); }
.lcg-pack-groups__group { border-top: var(--rule-strong); padding-top: var(--space-3); display: grid; gap: var(--space-3); }
.lcg-pack-groups__group > .lcg-label { color: var(--stone-600); }
.lcg-page__body--roomy .lcg-pack-strip { justify-content: center; } /* few products: bigger and centred */
.lcg-page__body--roomy .lcg-pack-strip--misbehave > * { margin-right: calc(var(--space-4) * -1); }
.lcg-hero__packs--one .lcg-pack-label { display: none; } /* the front hero carries no label; the back labels every pack */
/* The Canadian Brand badge in a running line. */
.lcg-kicker .lcg-canada { margin-left: auto; }
.lcg-kicker .lcg-canada + .lcg-kicker__end { margin-left: var(--space-4); }
/* ───────────────────────────── THE STANDARD FOOTER AND THE LOGO'S PLACE, 2026-10-10 ─────────────────────────────
Barron, sixth review: no ask box; one standard footer on every sell sheet, the lime band with the
tagline, as Design System 1 had it; the LCG Foods logo top left, always. */
.lcg-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-2) var(--space-4); background: var(--lime); color: var(--ink); border-radius: 0; min-height: calc(var(--size-lead) * 2.6); } /* one line, always */
.lcg-foot__tagline { font-family: var(--font-heading); font-weight: var(--weight-display); font-size: var(--size-lead); letter-spacing: var(--tracking-heading); white-space: nowrap; flex: none; text-wrap: nowrap; }
.lcg-foot__contact { display: flex; gap: 2px var(--space-4); flex-wrap: wrap; justify-content: flex-end; max-width: 64%; line-height: 1.3; font-size: var(--size-label); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.lcg-foot__contact > span { white-space: nowrap; }
.lcg-foot a { color: inherit; text-decoration: none; } /* a live link in the PDF, the same look on paper */
.lcg-foot__contact { min-width: 0; }
.lcg-page__foot { padding-bottom: 0; } /* the band sits on the bottom edge */
.lcg-page__foot .lcg-foot { margin-left: calc(var(--grid-margin) * -1); margin-right: calc(var(--grid-margin) * -1); padding-left: var(--grid-margin); padding-right: var(--grid-margin); border-radius: 0; }
.lcg-kicker__logo--lead { margin-left: 0; margin-right: var(--space-4); order: -1; } /* the logo leads the running line, top left */
/* The key messages: the three consumer messages, what the shopper hears, under the hook. A short
ruled list in lead size; replaces the rail paragraph when all three are on file (decision 63). */
.lcg-messages { list-style: none; margin: 0; padding: 0; display: grid; }
.lcg-messages > li { padding: var(--space-2) 0; border-top: var(--rule); font-size: var(--size-lead); line-height: 1.3; max-width: var(--measure-short); }
.lcg-messages > li:last-child { border-bottom: var(--rule); }
/* ───────────────────────────── SEVENTH REVIEW, 2026-10-11 ─────────────────────────────
The running line as a signature, the ink footer, reviews, the three programmes, the badge. */
/* The running line as a signature: the logo alone at the left, the line's words at the right in
the second voice. One baseline, nothing above or below the logo. */
.lcg-kicker--signature { justify-content: space-between; }
.lcg-kicker--signature .lcg-kicker__logo--lead { margin-right: auto; }
.lcg-kicker--signature > span { color: var(--stone-600); }
.lcg-kicker--signature > .lcg-kicker__index { color: var(--green); }
.lcg-kicker .lcg-canada__badge { height: calc(var(--size-label) * 2.4); width: auto; margin-left: auto; }
.lcg-kicker .lcg-canada__badge + .lcg-kicker__end { margin-left: var(--space-4); }
/* The ink footer: the one black bar on the sheet (decision 61). The tagline in lime, the company's
pieces in two short lines at the right, a lime rule across the top. */
.lcg-foot--ink { background: var(--ink); color: var(--on-ink); border-top: 3px solid var(--lime); }
.lcg-foot--ink .lcg-foot__tagline { color: var(--lime); }
.lcg-foot--ink .lcg-foot__tagline-end { color: var(--on-ink); } /* "Starts Here." in white on ink: the line in two beats (decision 104) */
.lcg-foot--ink .lcg-foot__contact { color: var(--on-ink-muted); }
/* Reviews: every review site past the gate, up to two, each a compact rating in a row. */
.lcg-reviews { display: grid; gap: var(--space-2); }
.lcg-reviews .lcg-rating { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: center; }
.lcg-reviews .lcg-rating__score { grid-row: span 2; font-size: calc(var(--size-number) * 0.6); }
.lcg-reviews .lcg-rating__source { white-space: normal; }
/* Strong reviews read strong (sell sheet register T13, 2026-10-13): the cell takes the row the SRP left,
the ratings side by side at number size, the total beside the label. */
.lcg-reviews--wide { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); column-gap: var(--grid-gutter); }
.lcg-reviews--wide .lcg-rating__score { font-size: var(--size-number); }
/* Logo-led reviews (sell sheet register T88, Barron 2026-10-16): the site's mark leads where the
score was, the first thing a buyer sees; the score, smaller but bold, sits beside the stars; the
count and the product under them, each on its own line. A site with no mark keeps the score-led cell. */
.lcg-reviews .lcg-rating:has(> .lcg-rating__mark) { grid-template-columns: auto auto 1fr; column-gap: calc(var(--space-3) * 0.85); row-gap: 1px; }
.lcg-reviews .lcg-rating > .lcg-rating__mark { grid-column: 1; grid-row: 1 / span 2; height: calc(var(--size-label) * 3.75); width: auto; max-width: calc(var(--size-label) * 12.5); object-fit: contain; object-position: left center; align-self: center; margin: 0 4px 0 0; }
.lcg-reviews .lcg-rating:has(> .lcg-rating__mark) > .lcg-rating__score { grid-column: 2; grid-row: 1; font-size: calc(var(--size-number) * 0.43); line-height: 1; letter-spacing: -0.02em; align-self: end; }
.lcg-reviews .lcg-rating:has(> .lcg-rating__mark) > .lcg-rating__stars { grid-column: 3; grid-row: 1; align-self: end; margin-bottom: 2px; }
.lcg-reviews .lcg-rating:has(> .lcg-rating__mark) > .lcg-rating__source { grid-column: 2 / -1; grid-row: 2; align-self: start; line-height: 1.25; }
.lcg-rating:has(> .lcg-rating__mark) .lcg-rating__where { display: block; } /* the product on its own line, under the count */
.lcg-rating:has(> .lcg-rating__mark) .lcg-rating__comma { display: none; }
.lcg-cells:has(> :nth-child(2) > .lcg-reviews--wide .lcg-rating__mark) { grid-template-columns: 35fr 65fr; } /* beside the certifications, the reviews take the wider share, so their marks print large on one row (T87) */
/* Brand support: always the three programmes, each in its own ruled cell with its head, LCG Foods'
line, and the brand's own line under it when the brand is on the programme. */
.lcg-support--three { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.lcg-support--three > div { background: none; border-left: var(--rule); padding: 0 0 0 var(--grid-gutter); display: grid; gap: var(--space-1); align-content: start; font-size: var(--size-small); line-height: 1.45; }
.lcg-support--three > div:first-child { border-left: 0; padding-left: 0; }
.lcg-support__head { font-family: var(--font-heading); font-weight: var(--weight-title); font-size: var(--size-text); letter-spacing: var(--tracking-heading); color: var(--ink); }
.lcg-support__this { color: var(--green); font-weight: var(--weight-strong); }
.lcg-support__this:empty, .lcg-support__shows:empty { display: none; }
.lcg-support__shows { display: block; color: var(--green); font-weight: var(--weight-strong); white-space: pre-line; columns: 2; column-gap: var(--space-4); } /* the shows a brand was at, one to a line, two columns (T89) */
.lcg-support:has(> :nth-child(3)) .lcg-support__shows { columns: 1; } /* three programmes leave a cell too narrow for two columns: a show would split across them (T89) */
.lcg-page .lcg-support--three > div { font-size: var(--size-text); gap: var(--space-2); padding-top: var(--space-2); } /* print: brand support reads at text size (decision 109) */
.lcg-page .lcg-support__head { font-size: var(--size-lead); }
/* print: the trends and How it is made read at a printed size, not small (decision 118). A trend's
name prints at the reasons' size, its proving fact and the How it is made row at text size, in ink. */
.lcg-page .lcg-trend { font-size: var(--size-lead); }
.lcg-page .lcg-trends__fact { font-size: var(--size-text); line-height: var(--leading-text); color: var(--ink); margin-top: var(--space-2); }
.lcg-page .lcg-proof > div { font-size: var(--size-text); line-height: var(--leading-text); }
/* The back's strip: centred, and bigger when the line is short. */
.lcg-page__body .lcg-pack-strip { justify-content: center; }
.lcg-page__body > .lcg-pack-strip > *:nth-last-child(-n+4):first-child, .lcg-page__body > .lcg-pack-strip > *:nth-last-child(-n+4):first-child ~ * { width: 23%; } /* a short line, ungrouped */
.lcg-page__body--roomy > .lcg-pack-strip > *:nth-last-child(-n+4):first-child, .lcg-page__body--roomy > .lcg-pack-strip > *:nth-last-child(-n+4):first-child ~ * { width: 27%; }
/* One page: a thin record prints the line under the front's groups on the same page, on a strong
rule, and the packs take the room that is left (decision 75). */
.lcg-page__one { border-top: var(--rule-heavy); }
.lcg-page__one > .lcg-page__body > .lcg-pack-strip > * { width: 20%; }
/* A few packs in the hero: a thin, short line on one page shows every pack in the band, labelled. */
.lcg-hero__packs--few { align-self: end; margin-bottom: -24px; }
.lcg-hero__packs--few .lcg-pack-row { --overlap: 8%; align-items: flex-end; justify-content: flex-end; }
.lcg-hero__packs--few .lcg-pack-row > * { max-width: 40%; width: 40%; }
.lcg-hero__packs--few .lcg-pack-row > *:first-child:nth-last-child(3), .lcg-hero__packs--few .lcg-pack-row > *:first-child:nth-last-child(3) ~ * { max-width: 30%; width: 30%; }
/* One pack alone is the hero, not one of a few: it takes the band's width. The MCT oil, a one-product
line, printed at 40% of the column beside empty band (2026-10-14: "could be way bigger"). */
.lcg-hero__packs--few .lcg-pack-row > :only-child { max-width: 80%; width: auto; }
.lcg-hero__packs--few .lcg-pack-row > :only-child .lcg-pack { width: auto; max-width: 100%; max-height: 360px; } /* inside the band, under the running line */
.lcg-hero__packs--few .lcg-pack-row > :nth-child(n) { transform: none; } /* never above the running line */
.lcg-hero__packs--few .lcg-pack-row > :nth-child(odd) .lcg-pack { transform: rotate(-3deg); }
.lcg-hero__packs--few .lcg-pack-row > :nth-child(even) .lcg-pack { transform: rotate(2.5deg); }
.lcg-hero__packs--few .lcg-pack-wrap .lcg-pack { width: 100%; }
.lcg-hero__packs--few .lcg-pack-label { position: relative; white-space: normal; text-align: center; max-width: 100%; box-sizing: border-box; font-size: calc(var(--size-label) * 0.9); padding: 0.4em 0.8em; }
.lcg-hero__packs--few .lcg-pack-row { --overlap: 0%; gap: var(--space-2); }
.lcg-hero__packs--few .lcg-pack-wrap { display: grid; justify-items: center; gap: var(--space-1); }
.lcg-page__one { margin-top: 0; }
.lcg-page__one > .lcg-page__body { padding-top: var(--space-2); padding-bottom: 0; } /* the page's own body keeps the foot room; the one-page block's inner body keeps none (decision 116) */
.lcg-page--one > .lcg-hero + .lcg-page__body { padding-top: var(--block-gap); } /* the one-page sheet: one block gap under the breakout, not 1.4; the pack is pinned above the next head by fitHero (decision 116) */
/* The one-page sheet: the band gives back a little air so the line fits under it. */
.lcg-page--one { --foot-room: 22px; } /* a plain length, never a calc(): fit-packs.js and measure.js read the token with parseFloat */ /* the one-page sheet keeps its room in its own rhythm: a gap and a half of its tighter body (0.6 of a block gap), decision 116 */
.lcg-page--one .lcg-hero { padding-top: calc(var(--grid-margin) * 0.5); }
.lcg-page--one .lcg-hero__copy { padding-bottom: var(--space-3); }
.lcg-page--one .lcg-hero__packs--few { margin-bottom: -16px; }
.lcg-page--one .lcg-page__body--tight { gap: calc(var(--block-gap) * 0.6); }
.lcg-page--one .lcg-page__body--tight > .lcg-group { padding-top: var(--space-3); }
/* ───────────────────────────── NINTH REVIEW, 2026-10-12 ─────────────────────────────
The band holds one height per rung, so sheets line up side by side; copy that would overflow it
is the writer's to cut (shared/print-limits.yml), never the layout's. Allergens on the front. */
.lcg-hero { min-height: 400px; box-sizing: border-box; }
.lcg-page--one .lcg-hero { min-height: 300px; }
.lcg-hero__allergens { font-size: var(--size-small); color: var(--stone-600); }
.lcg-hero__allergens b { color: var(--ink); font-weight: var(--weight-strong); }
.lcg-hero__copy .lcg-canada__badge { height: calc(var(--size-label) * 3.2); width: auto; justify-self: start; } /* the front, bottom left, with the credentials (decision 107) */
/* A long line's back (rung three) holds only the strip and the table, so the packs take the room:
six to a row, two rows, before any gap opens (decision 76). */
.lcg-page--three .lcg-page__body > .lcg-pack-strip > *, .lcg-page--three .lcg-page__body > .lcg-pack-strip > *:nth-last-child(n+9), .lcg-page--three .lcg-page__body > .lcg-pack-strip > *:nth-last-child(n+9) ~ *, .lcg-page--three .lcg-page__body > .lcg-pack-strip > *:nth-last-child(n+13), .lcg-page--three .lcg-page__body > .lcg-pack-strip > *:nth-last-child(n+13) ~ * { width: 18%; } /* five to a row, for an ungrouped strip; a grouped strip keeps its count tiers */
/* ───────────────────────────── THE DECK SURFACE, 2026-10-12 ─────────────────────────────
The Brand University deck on Design System 2: the same eight slides, slots, switches and
ladder as design/templates/brand-university-deck; only the parts under them change. The slide
is the page of the deck: 1920 by 1080 on the slide ruler, head, body, foot. */
.lcg-slide { box-sizing: border-box; width: 1920px; height: 1080px; position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; background: var(--white); padding: calc(var(--grid-margin) * 0.55) var(--grid-margin) 0; }
.lcg-slide.lcg--ink { background: var(--ink); color: var(--on-ink); }
.lcg-slide__body { display: grid; align-content: start; gap: var(--block-gap); padding-top: var(--block-gap); min-height: 0; }
.lcg-slide__body--centre { align-content: center; }
.lcg-slide__foot { margin-left: calc(var(--grid-margin) * -1); margin-right: calc(var(--grid-margin) * -1); }
.lcg-slide .lcg-foot { border-radius: 0; padding-left: var(--grid-margin); padding-right: var(--grid-margin); min-height: calc(var(--size-lead) * 2.2); }
.lcg-slide .lcg-foot__tagline { font-size: var(--size-small); }
.lcg-slide .lcg-foot__contact { max-width: none; }
.lcg-slide__cols { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; min-height: 0; }
.lcg-slide__span-5 { grid-column: span 5; } .lcg-slide__span-6 { grid-column: span 6; } .lcg-slide__span-7 { grid-column: span 7; } .lcg-slide__span-8 { grid-column: span 8; } .lcg-slide__span-4 { grid-column: span 4; } .lcg-slide__span-12 { grid-column: 1 / -1; }
.lcg-slide__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-title); letter-spacing: var(--tracking-title); line-height: 1; margin: 0; }
.lcg-slide__lead { font-size: var(--size-lead); line-height: 1.35; color: var(--stone-600); max-width: 44ch; margin: 0; }
.lcg--ink .lcg-slide__lead { color: var(--on-ink-muted); }
.lcg-slide__head { display: grid; gap: var(--space-3); }
.lcg-slide .lcg-kicker__logo { height: calc(var(--size-label) * 2.6); }
.lcg-slide .lcg-what { font-size: var(--size-heading); }
.lcg-slide .lcg-display { font-size: var(--size-display); letter-spacing: var(--tracking-display); line-height: 0.92; }
.lcg--ink .lcg-display { color: var(--lime); }
.lcg--ink .lcg-display--white { color: var(--on-ink); } /* white, so the emphasis word's lime turn shows */
.lcg-slide .lcg-title { font-size: calc(var(--size-title) * 0.8); line-height: 1.05; }
.lcg-slide .lcg-flags { font-size: var(--size-label); }
.lcg-slide .lcg-pill { font-size: var(--size-label); padding: 0.7em 1.3em; }
.lcg-slide .lcg-certs { gap: var(--space-3); }
.lcg-slide .lcg-cert { font-size: var(--size-label); padding: 0.7em 1.3em; }
/* The cover's right side: the lifestyle photo as a frame with the packs misbehaving over its foot. */
.lcg-slide__photo { width: 100%; aspect-ratio: 820 / 520; object-fit: cover; border-radius: var(--corner-large); display: block; }
.lcg-slide__cover-packs { margin-top: calc(var(--space-9) * -1); padding: 0 var(--space-6); }
.lcg-slide__cover-packs .lcg-pack-row > * { max-width: 26%; }
/* The reasons as the ink band: Design System 1's device kept, the rank in lime, the line in white. */
.lcg-slide .lcg-band { padding: var(--space-4) var(--space-7); }
.lcg-slide .lcg-band__row { grid-template-columns: 2.4em 1fr; padding: var(--space-3) 0; }
.lcg-slide .lcg-band__rank, .lcg-slide .lcg-band__line { font-size: calc(var(--size-heading) * 0.9); }
/* Reviews on a slide: the score cell and the quote block side by side. */
.lcg-slide .lcg-quote-block { padding: var(--space-5) var(--space-6); }
.lcg-slide .lcg-quote__text { font-size: calc(var(--size-heading) * 0.75); }
.lcg-slide .lcg-rating--compact .lcg-rating__score { font-size: calc(var(--size-number) * 0.45); }
/* The product line slide: the hero pack large at the left, the rest of the line under it. */
.lcg-slide__hero-pack { display: grid; justify-items: center; }
.lcg-slide__hero-pack .lcg-pack { width: 46%; height: auto; transform: rotate(-3deg); }
.lcg-slide .lcg-pack-strip > * { width: 14%; }
.lcg-slide .lcg-pack-strip .lcg-pack-label { font-size: calc(var(--size-label) * 0.8); white-space: normal; text-align: center; box-shadow: none; background: none; padding: 0; }
/* A checked list on a slide: the lime disc, the trend or message, the fact under it. */
.lcg-checklist { display: grid; }
.lcg-checklist > div { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--rule); align-items: start; }
.lcg-checklist > div:first-child { border-top: 0; padding-top: 0; }
.lcg-checklist__mark { width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--lime); color: var(--ink); display: grid; place-items: center; font-size: var(--size-small); font-weight: var(--weight-label); margin-top: 0.15em; }
.lcg-checklist__mark--index { background: none; color: var(--green); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-text); }
.lcg-checklist__head { font-size: var(--size-text); font-weight: var(--weight-strong); }
.lcg-checklist__fact { font-size: var(--size-small); color: var(--stone-600); line-height: 1.4; }
.lcg-checklist__over { font-size: var(--size-label); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--green); }
/* The matrix: our column on a lime rule and a mint ground, the competitors beside it. */
.lcg-matrix { width: 100%; border-collapse: collapse; font-size: var(--size-small); }
.lcg-matrix th { padding: 0 var(--space-4) var(--space-3); vertical-align: bottom; text-align: center; font-weight: var(--weight-strong); font-size: var(--size-small); color: var(--stone-600); border-bottom: var(--rule-strong); }
.lcg-matrix th:first-child { text-align: left; }
.lcg-matrix th.is-ours { border-bottom: 6px solid var(--lime); color: var(--green); }
.lcg-matrix td { padding: var(--space-2) var(--space-4); border-bottom: var(--rule); text-align: center; vertical-align: middle; }
.lcg-matrix td:first-child { text-align: left; font-weight: var(--weight-strong); font-size: var(--size-text); }
.lcg-matrix td.is-ours { background: var(--mint); font-weight: var(--weight-strong); }
.lcg-matrix tr:last-child td { border-bottom: var(--rule-strong); }
.lcg-matrix .lcg-pack { max-height: calc(var(--size-heading) * 3.2); width: auto; margin: 0 auto var(--space-2); }
.lcg-matrix__price { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-heading); color: var(--stone-400); }
.lcg-matrix td.is-ours .lcg-matrix__price { color: var(--green); }
.lcg-mark { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; font-size: var(--size-text); }
.lcg-mark--yes { background: var(--lime); color: var(--ink); }
.lcg-mark--no { color: var(--stone-400); }
/* The matrix on the web (the brand profile's How it compares, amendment 2026-10-17): a table in the
page's words, so search engines and AI tools read it. The line under the title says what is
compared and labels the table; each attribute is its row's head; every mark has its word, Yes or
No, beside it, seen. On a phone the
columns share the screen and the words wrap; the page never runs wider than the screen. */
.lcg-matrix__frame { overflow-x: auto; }
.lcg-matrix__frame .lcg-matrix { --cols: 3; width: 100%; border-collapse: collapse; table-layout: fixed; } /* --cols: the products' count, set by the page for a phone's grid */
.lcg-matrix__frame th, .lcg-matrix__frame td { text-wrap: balance; } /* two even lines, never one word left on the second */
.lcg-matrix__frame thead th { width: auto; padding: var(--space-4); vertical-align: bottom; text-align: center; font-size: var(--size-small); font-weight: var(--weight-strong); line-height: 1.3; color: var(--ink); border-top: var(--rule-strong); border-bottom: var(--rule-strong); }
.lcg-matrix__frame thead th:first-child { width: 30%; padding-left: 0; }
.lcg-matrix__frame thead th.is-ours { background: var(--lime); color: var(--ink); border-bottom: var(--rule-strong); } /* the brand's cap: square, lime, as the edge's square band */
.lcg-matrix__frame tbody th { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: var(--rule); text-align: left; vertical-align: middle; font-size: var(--size-text); font-weight: var(--weight-strong); line-height: 1.3; color: var(--ink); }
.lcg-matrix__frame tr:last-child th, .lcg-matrix__frame tr:last-child td { border-bottom: var(--rule-strong); }
.lcg-matrix__frame td { padding: var(--space-4); border-bottom: var(--rule); text-align: center; vertical-align: middle; font-size: var(--size-small); line-height: 1.4; color: var(--stone-800); }
.lcg-matrix__frame td.is-ours { background: var(--lime-tint); color: var(--ink); font-weight: var(--weight-strong); }
.lcg-matrix__frame .lcg-mark { width: 1.75em; height: 1.75em; font-size: var(--size-small); font-weight: var(--weight-strong); } /* every mark one size: a disc, so a tick and a cross weigh the same */
.lcg-matrix__frame td:not(.is-ours) .lcg-mark--yes { background: var(--stone-100); }
.lcg-matrix__frame .lcg-mark--no { background: transparent; box-shadow: inset 0 0 0 1px var(--stone-200); color: var(--stone-400); }
@media (max-width: 640px) { /* a phone: each attribute on its own line, its marks in a row beneath it, the products sharing the full width; nothing scrolls sideways */
.lcg-matrix__frame .lcg-matrix, .lcg-matrix__frame thead, .lcg-matrix__frame tbody { display: block; }
.lcg-matrix__frame tr { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.lcg-matrix__frame thead th:first-child { display: none; }
.lcg-matrix__frame thead th { padding: var(--space-3) var(--space-2); font-size: var(--size-label); }
.lcg-matrix__frame tbody th { grid-column: 1 / -1; padding: var(--space-4) 0 var(--space-2); border-bottom: 0; font-size: var(--size-small); }
.lcg-matrix__frame td { padding: var(--space-2) var(--space-2) var(--space-3); font-size: var(--size-label); }
.lcg-matrix__frame tr:last-child th { border-bottom: 0; }
}
}
.lcg-matrix__answer { display: inline-flex; align-items: center; gap: var(--space-2); } /* the mark and its word, both seen: Yes or No is text a reader and a search engine read alike */
.lcg-mark__word { font-size: var(--size-small); font-weight: var(--weight-strong); color: var(--stone-600); }
.lcg-matrix__frame td.is-ours .lcg-mark__word { color: var(--ink); }
/* The founder slide: the portrait beside the words; name at title size, role and since as pills. */
.lcg-slide .lcg-founder--sheet .lcg-founder__portrait { width: 100%; aspect-ratio: 820 / 600; border-radius: var(--corner-large); }
.lcg-slide .lcg-founder__name { font-size: var(--size-title); }
.lcg-slide .lcg-founder__line { font-size: var(--size-lead); max-width: none; }
.lcg-founder__band { font-family: var(--font-heading); font-weight: var(--weight-title); font-size: var(--size-heading); line-height: 1.2; letter-spacing: var(--tracking-heading); }
/* Founder drive on a slide: three ruled cells, the result on ink. */
.lcg-slide .lcg-cells > * > .lcg-stat__number { font-size: calc(var(--size-number) * 0.5); }
.lcg-slide .lcg-cells .lcg-small { font-size: var(--size-small); }
.lcg-slide .lcg-support--three > div { font-size: var(--size-small); gap: var(--space-2); }
.lcg-slide .lcg-support__head { font-size: var(--size-text); }
/* The order table on a slide. */
.lcg-slide .lcg-table { font-size: var(--size-text); }
.lcg-slide .lcg-table th { font-size: var(--size-label); }
.lcg-slide .lcg-table td { padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.lcg-slide .lcg-rank { font-size: var(--size-text); }
/* The sources slide: internal, on ink; the warning pill. */
.lcg-pill--warn { background: var(--canada-red); color: var(--white); }
.lcg-slide__sources { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: var(--space-7); font-size: var(--size-label); line-height: 1.35; }
.lcg-slide__sources table { width: 100%; border-collapse: collapse; }
.lcg-slide__sources th { text-align: left; font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-ink-muted); padding: 0 var(--space-3) var(--space-2) 0; border-bottom: var(--rule-on-ink); }
.lcg-slide__sources td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: var(--rule-on-ink); vertical-align: top; }
.lcg-slide__sources td:first-child { color: var(--lime); font-weight: var(--weight-strong); }
.lcg-slide__sources td:nth-child(3) { color: var(--on-ink-muted); }
.lcg-slide__sources .lcg-label { color: var(--canada-red); }
.lcg-slide__held { display: grid; gap: var(--space-3); }
.lcg-slide__held > p { margin: 0; padding-bottom: var(--space-3); border-bottom: var(--rule-on-ink); color: var(--on-ink-muted); line-height: 1.4; }
.lcg-slide__held b { color: var(--on-ink); }
.lcg-slide__body--roomy { gap: var(--section-gap); }
.lcg-slide__body--roomy .lcg-table td { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.lcg-slide__body--roomy .lcg-band--bar { padding: var(--space-5) var(--space-7); }
.lcg-slide .lcg-founder__portrait { width: 100%; }
.lcg-slide .lcg-support > div { display: grid; align-content: start; gap: var(--space-2); font-size: var(--size-small); }
.lcg-slide .lcg-table th, .lcg-slide .lcg-table td { padding-right: var(--space-5); }
.lcg-slide .lcg-table .is-number { padding-right: var(--space-5); }
/* The product line's left column: the hero pack large, the rest of the line in a column beside it. */
.lcg-slide__line { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-5); align-items: end; }
.lcg-slide__line .lcg-slide__hero-pack .lcg-pack { width: 100%; }
.lcg-slide__line .lcg-pack-strip { display: grid; gap: var(--space-2); justify-items: center; }
.lcg-slide__line .lcg-pack-strip > * { width: calc(var(--size-heading) * 2.4); }
.lcg-slide__line { max-height: 100%; }
/* A picture on a slide never passes the body: the hero pack and the portrait take the width they
can and stop at the body's height. */
.lcg-slide__line .lcg-slide__hero-pack .lcg-pack { width: 100%; max-height: calc(var(--size-heading) * 12); object-fit: contain; }
.lcg-slide .lcg-founder__portrait { max-height: calc(var(--size-heading) * 13); object-fit: cover; object-position: 50% 30%; }
/* The deck on the grid: a slide's columns sit on the same ruled grid as a sheet's cells, a
strong rule above the row and a hairline between every column. Groups carry the label-and-
descriptor head. Nothing on a slide is a floating card. 2026-10-12, Barron's review of the
first deck specimen: "the type, the grid, the fine lines, the information organisation". */
.lcg-slide__cols--ruled { border-top: var(--rule-strong); padding-top: var(--space-5); column-gap: 0; }
.lcg-slide__cols--ruled > * { padding-right: var(--space-6); min-width: 0; }
.lcg-slide__cols--ruled > * + * { border-left: var(--rule); padding-left: var(--space-6); }
.lcg-slide__cols--ruled > *:last-child { padding-right: 0; }
.lcg-slide .lcg-group__head { margin-bottom: var(--space-4); }
.lcg-slide .lcg-group__head .lcg-small { max-width: 48ch; }
.lcg-slide .lcg-group__title { font-size: var(--size-heading); }
.lcg-slide .lcg-cells.lcg-ruled { padding-top: var(--space-4); }
.lcg-slide .lcg-cells > * { gap: var(--space-3); }
.lcg-slide .lcg-cells > * + * { padding-left: var(--space-6); }
.lcg-slide .lcg-cells > * { padding-right: var(--space-6); }
.lcg-slide .lcg-stats.lcg-ruled { padding-top: var(--space-4); }
.lcg-slide .lcg-stat__number { font-size: calc(var(--size-number) * 0.55); }
.lcg-slide .lcg-stat__label { font-size: var(--size-small); }
.lcg-slide .lcg-trends { column-gap: 0; }
.lcg-slide .lcg-trends__item { padding-right: var(--space-5); }
.lcg-slide .lcg-trends__fact { font-size: var(--size-small); }
.lcg-slide .lcg-trend { font-size: var(--size-text); }
.lcg-slide .lcg-messages > li { font-size: var(--size-text); padding: var(--space-3) 0; max-width: none; }
/* The product line as the original laid it out: the hero pack on top, the rest of the line in a
row beneath, under their own label. */
.lcg-slide__line { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; max-height: none; }
.lcg-slide__line .lcg-slide__hero-pack .lcg-pack { width: 46%; max-height: calc(var(--size-heading) * 7.6); object-fit: contain; }
.lcg-slide__line .lcg-pack-strip { display: flex; justify-content: center; gap: var(--space-4); }
.lcg-slide__line .lcg-pack-strip > * { width: 15%; }
.lcg-slide__line .lcg-pack-strip .lcg-pack-label { font-size: calc(var(--size-label) * 0.8); }
/* The founder's words as ruled rows: name, role, the one line, the story. */
.lcg-slide__rows > * { padding: var(--space-4) 0; border-top: var(--rule); margin: 0; }
.lcg-slide__rows > *:first-child { border-top: 0; padding-top: 0; }
.lcg-slide .lcg-band--bar .lcg-band__line { font-size: var(--size-heading); }
/* Selected text in the lime tint, never the browser's blue (decision 98). */
.lcg ::selection, .lcg::selection { background: var(--lime-tint); color: var(--ink); }
/* Misbehaving, on purpose (decision 99): one thing off the grid, so the grid reads as a choice.
On packs, the tape, a sticker, a photo, a card; never on text, tables, forms, buttons or navigation. */
.lcg-misbehave { transform: rotate(var(--tilt-left)); }
.lcg-misbehave--right { transform: rotate(var(--tilt-right)); }
.lcg-misbehave--slight { transform: rotate(var(--tilt-slight)); }
.lcg-break { position: relative; z-index: 2; margin-bottom: calc(var(--break) * -1); } /* out past the bottom edge of its band */
/* One line, never two (decision 111, Barron 2026-10-13: "We shouldn't have grid lines for no reason
ever"). A rule is drawn once: a ruled row draws the line and its cells never add their own above
it; a group that opens on a ruled row lets the row's rule stand for its own; the group after the
product table lets the table's closing rule stand for its own. fit-packs.js counts any two rules
closer than 15 px and build/render.py --pdf refuses the sheet when it finds one. */
.lcg-support.lcg-ruled > div, .lcg-support--three > div { border-top: 0; }
.lcg-group:has(> .lcg-ruled:first-child) { border-top: 0; }
.lcg-group:has(> .lcg-table:last-child) + .lcg-group { border-top: 0; }
.lcg-page__one > .lcg-page__body > .lcg-group:first-child { border-top: 0; } /* the one-page block's heavy rule is its rule (2026-10-14, Aralea and Nonny: two lines 11 px apart) */
/* The sheet's switches (sheet-controls.js, 2026-10-13). On screen only, beside a built sheet: the
person switches sections off, picks and orders the reasons, then saves the PDF. Never printed. */
.lcg-controls { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 10; width: min(23rem, calc(100vw - 2 * var(--space-4))); max-height: calc(100vh - 2 * var(--space-4)); overflow: auto; box-sizing: border-box; background: var(--white); color: var(--ink); border: var(--rule); border-radius: var(--corner-small); box-shadow: var(--lift); font-family: var(--font-text); font-size: var(--size-small); line-height: 1.4; }
.lcg-controls__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--rule); position: sticky; top: 0; background: var(--white); }
.lcg-controls__title { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--size-text); }
.lcg-controls__group { padding: var(--space-3) var(--space-4); border-bottom: var(--rule); display: grid; gap: var(--space-2); }
.lcg-controls__label { font-size: var(--size-label); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--stone-600); }
.lcg-controls__row { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--space-2); }
.lcg-controls__row input { margin: 0.2em 0 0; }
.lcg-controls__row--off { color: var(--stone-400); }
.lcg-controls__hint { color: var(--stone-600); }
.lcg-controls__tag { display: inline-block; margin-top: var(--space-1); padding: 0 var(--space-2); border-radius: var(--corner-round); background: var(--gold-tint); color: var(--gold-text); font-size: var(--size-label); }
.lcg-controls__move { display: flex; gap: var(--space-1); }
.lcg-controls button { font: inherit; cursor: pointer; border: var(--rule); border-radius: var(--corner-small); background: var(--white); color: var(--ink); padding: var(--space-1) var(--space-3); }
.lcg-controls button:disabled { opacity: 0.35; cursor: default; }
.lcg-controls__move button { padding: 0 var(--space-2); }
.lcg-controls__save { background: var(--ink) !important; color: var(--white) !important; font-weight: var(--weight-strong); }
.lcg-controls__actions { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.lcg-controls__edition { display: block; padding: 0 var(--space-4) var(--space-3); color: var(--green); font-weight: var(--weight-strong); } /* the sheet's other edition, same choices (sell sheet T93) */
.lcg-controls__check { padding: var(--space-2) var(--space-3); border-radius: var(--corner-small); }
.lcg-controls__check--stop { background: var(--status-stop-tint); color: var(--status-stop); }
.lcg-controls__check--wait { background: var(--status-wait-tint); }
.lcg-controls__check--good { background: var(--status-good-tint); }
.lcg-controls--closed .lcg-controls__body { display: none; }
@media screen and (min-width: 1200px) { body[data-controls] .pages { padding-right: calc(23rem + 2 * var(--space-4)); } }
@media print { .lcg-controls { display: none !important; } }
/* 2026-10-14, Barron on the Wild Tusker sheets: "random grid lines that don't need to be there".
Every rule sits inside the margins; only the band and the foot run to the page edge. A group or
the one-page break that pads itself out to the margins drew its rule across the padding, edge to
edge on the front and inside the margins on the back. The rule is now drawn at the margins. */
.lcg-page__inner.lcg-group, .lcg-page__inner.lcg-page__one { border-top: 0; position: relative; }
.lcg-page__inner.lcg-group::before, .lcg-page__inner.lcg-page__one::before { content: ""; position: absolute; top: 0; left: var(--grid-margin); right: var(--grid-margin); border-top: var(--rule); }
.lcg-page__inner.lcg-page__one::before { border-top: var(--rule-heavy); }
/* A ruled row never stops partway across the page: two or one cells share the row's width. */
.lcg-proof:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lcg-proof:has(> :only-child), .lcg-panels:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.lcg-panels:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A lone hero pack breaks over the band's edge like the large hero (Barron, on the MCT oil: "should
still be lower and break over the line"), with its name label directly under it, as every pack
on every sheet carries it ("the label ... should sit directly under the product"). */
.lcg-hero__packs--few:has(.lcg-pack-row > :only-child) { margin-bottom: -56px; }
.lcg-hero__packs--few .lcg-pack-row > :only-child .lcg-pack-label { width: max-content; max-width: none; align-self: center; }
/* 2026-10-14, Barron again: "there's like extra lines" and the MCT bottle "too far to the right".
A group whose heading carries its own rule underneath (Reasons to list, Trends, Brand support)
loses the grey rule above it: two lines for one heading. And a lone hero pack sits centred in
the hero column, where the large hero sits, not pushed to the right margin. */
.lcg-group:has(> .lcg-group__head) { border-top: 0; }
.lcg-page__inner.lcg-group:has(> .lcg-group__head)::before { content: none; }
.lcg-hero__packs--few .lcg-pack-row:has(> :only-child) { justify-content: center; }
/* 2026-10-14, Barron: "coconut oil image is missing its label too". Replaces "the front hero carries
no label" above: every pack on every sheet carries its name directly under it, the large hero
included. */
.lcg-hero__packs--one .lcg-pack-label { display: inline-block; position: static; transform: none; justify-self: center; }
.lcg-hero__packs--one .lcg-pack-wrap { display: grid; justify-items: center; gap: var(--space-2); }
/* ───────────────────────────── THE BRAND PROFILE PAGE, 2026-10-15 ─────────────────────────────
The web surface's brand profile expression (decision 94, amended 2026-10-14: the fullest story
Gibson knows about a brand, read by retail buyers). Everything here sits on the web ruler and
types no size a template could not get from a class. The page is one page of the LCG Foods
network and still the brand's own: LCG Foods' grid, type, labels, lime and the ink footer never
change; the brand brings its ground, its logo, its packs and its photographs. */
/* Sections: a vertical stack at the ruler's section gap. The hero's breakout needs its room. */
.lcg-sections > * + * { margin-top: var(--section-gap); }
.lcg-sections > .lcg-hero + * { margin-top: calc(var(--section-gap) + var(--break)); padding-top: 0; }
.lcg-sections .lcg-section-head { margin-bottom: var(--space-7); } /* air between a section's head and its first block */
.lcg-sections .lcg-pack-strip { padding-top: var(--space-6); } /* the misbehaving packs rise; nothing above them is touched */
/* The contents bar: pinned while the page scrolls. The brand's logo small and its name, a link to
each section, the one primary action. White with a hairline under it, never a black bar
(decision 100); the current section underlined in ink as the navigation does. On a phone the
links scroll sideways. Never printed. */
.lcg-contents { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--grid-margin); background: var(--white); box-shadow: inset 0 calc(var(--hairline) * -1) 0 var(--stone-200); font-size: var(--size-small); font-weight: var(--weight-heading); }
.lcg-contents__brand { display: flex; align-items: center; gap: var(--space-3); flex: none; color: var(--ink); text-decoration: none; font-family: var(--font-heading); font-weight: var(--weight-title); font-size: var(--size-text); letter-spacing: var(--tracking-heading); }
.lcg-contents__logo { height: calc(var(--size-label) * 2.6); width: auto; }
.lcg-contents__links { display: flex; gap: var(--space-5); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.lcg-contents__links::-webkit-scrollbar { display: none; }
.lcg-contents__links a { color: var(--stone-600); text-decoration: none; white-space: nowrap; padding: var(--space-2) 0; }
.lcg-contents__links a:hover { color: var(--ink); }
.lcg-contents__links a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.lcg-contents__action { margin-left: auto; flex: none; }
@media (max-width: 640px) { .lcg-contents { flex-wrap: wrap; gap: var(--space-3) var(--space-4); padding-bottom: 0; } .lcg-contents__links { order: 3; flex-basis: 100%; gap: var(--space-4); } .lcg-contents__links a { padding-bottom: var(--space-3); } } /* a phone: the brand and the action on one row, the links scrolling on their own row beneath */
@media print { .lcg-contents { display: none; } }
/* The hero on the web: the sheet's band on a screen, on the web ruler. The brand's own ground,
its logo above the name (no logo, the name alone), what it is, the name at display size, the
hook, the actions. The top seller at the right breaks the band's bottom edge, tilted by
lcg-misbehave and lcg-break on its wrap, exactly as decision 94 chose it and no further. */
.lcg-hero--web { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); padding: var(--space-8) var(--grid-margin) 0; min-height: 0; align-items: end; }
.lcg-hero--web .lcg-hero__copy { grid-column: 1 / span 7; padding: 0 0 var(--space-8); gap: var(--space-5); align-content: end; }
.lcg-hero--web .lcg-hero__copy .lcg-display { font-size: var(--size-display); letter-spacing: var(--tracking-display); }
.lcg-hero--web .lcg-hero__copy .lcg-title { font-size: var(--size-title); }
.lcg-hero--web .lcg-hero__copy .lcg-what { font-size: var(--size-heading); }
.lcg-hero__logo { height: calc(var(--size-label) * 7); width: auto; justify-self: start; }
.lcg-hero--web .lcg-hero__packs { grid-column: 8 / -1; margin-bottom: 0; align-self: end; display: grid; justify-items: center; }
.lcg-hero--web .lcg-hero__packs--one .lcg-pack-wrap { width: 70%; }
.lcg-hero--web .lcg-hero__packs--one .lcg-pack { transform: none; } /* the tilt is the wrap's lcg-misbehave */
.lcg-hero--web .lcg-hero__packs--one .lcg-pack-label { display: none; } /* the line below labels every pack; the hero's name is the headline beside it */
.lcg-hero--web + * { padding-top: 0; }
@media (max-width: 760px) {
.lcg-hero--web { padding-top: var(--space-7); }
.lcg-hero--web .lcg-hero__copy, .lcg-hero--web .lcg-hero__packs { grid-column: 1 / -1; }
.lcg-hero--web .lcg-hero__copy { padding-bottom: var(--space-6); }
.lcg-hero--web .lcg-hero__packs--one .lcg-pack-wrap { width: 52%; }
}
/* At a glance: the facts a buyer scans first, each a label and a value in its own ruled cell on
one grid. Founded, hometown, category, products, retailers, and the certifications as lime
pills in a cell that runs the width. A cell with nothing on file drops and the grid closes. */
.lcg-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-strong); }
.lcg-glance > * { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4) var(--grid-gutter) var(--space-4) 0; border-bottom: var(--rule); min-width: 0; }
.lcg-glance > * + * { border-left: var(--rule); padding-left: var(--grid-gutter); }
.lcg-glance > :nth-child(3n+1) { border-left: 0; padding-left: 0; }
.lcg-glance > .lcg-glance__wide { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
.lcg-glance__value { font-family: var(--font-heading); font-weight: var(--weight-title); font-size: var(--size-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-variant-numeric: lining-nums; }
.lcg-glance .lcg-certs { gap: var(--space-2); }
@media (max-width: 640px) {
.lcg-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lcg-glance > :nth-child(3n+1) { border-left: var(--rule); padding-left: var(--grid-gutter); }
.lcg-glance > :nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
/* The product card: one product in full for the buyer's team. The pack on a quiet stage beside
its name, the facts as label and value rows (size, UPC, suggested retail price, shelf life,
storage), the claims as flags, then ingredients, allergens and the nutrition short form. Two
across; one on a phone. A fact not on file drops its row; a card never shows a gap. */
.lcg-product-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--grid-gutter); }
.lcg-product-card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-5); align-items: start; border-top: var(--rule-strong); padding-top: var(--space-4); }
.lcg-product-card__stage { display: grid; place-items: end center; aspect-ratio: 4 / 5; padding: 10% 14% 8%; background: var(--paper); border-radius: var(--corner); }
.lcg-product-card__stage > .lcg-pack { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: var(--pack-shadow-small); }
.lcg-product-card__body { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.lcg-product-card__name { font-family: var(--font-heading); font-weight: var(--weight-title); font-size: var(--size-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.lcg-product-card__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--size-small); }
.lcg-product-card__facts dt { font-size: var(--size-label); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--stone-600); line-height: calc(var(--size-small) * 1.45); }
.lcg-product-card__facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.lcg-product-card__text { font-size: var(--size-small); color: var(--stone-600); line-height: 1.45; }
.lcg-product-card__text b { color: var(--ink); font-weight: var(--weight-strong); }
.lcg-product-card .lcg-flags { font-size: calc(var(--size-label) * 0.92); }
@media (max-width: 900px) { .lcg-product-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .lcg-product-card { grid-template-columns: minmax(0, 1fr); } .lcg-product-card__stage { aspect-ratio: 5 / 4; padding: 6% 24% 5%; } }
/* The photo and video grid: three across, each a frame with one line under it saying what and
when. Two photos, two across; one, it stands alone at half the width. A frame never crops a
person out: the photographer's frame is kept at 4 by 3, a portrait at 4 by 5 (--tall). A video
sits in the same frame with its controls. */
.lcg-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--grid-gutter); align-items: start; }
.lcg-gallery:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lcg-gallery:has(> :only-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lcg-gallery__item { display: grid; gap: var(--space-2); margin: 0; min-width: 0; }
.lcg-gallery__item > img, .lcg-gallery__item > video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--corner); background: var(--stone-100); display: block; }
.lcg-gallery--tall .lcg-gallery__item > img, .lcg-gallery--tall .lcg-gallery__item > video { aspect-ratio: 4 / 5; } /* one frame per grid, never mixed in a row */
.lcg-gallery__caption { font-size: var(--size-small); color: var(--stone-600); line-height: 1.4; }
.lcg-gallery__caption b { color: var(--ink); font-weight: var(--weight-strong); }
@media (max-width: 700px) { .lcg-gallery, .lcg-gallery:has(> :only-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The founder on the web: the portrait at the left, and at the right the name, the role, the
story at lead size, then ruled rows for the obstacle, the team's experience, the shows and
markets worked, the founder's own accounts. No portrait, the words take the width; no story
and no portrait, the section drops. */
.lcg-founder--web { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6) var(--grid-gutter); align-items: start; }
.lcg-founder--web:not(:has(> .lcg-founder__portrait)) { grid-template-columns: minmax(0, 1fr); }
.lcg-founder--web .lcg-founder__portrait { width: 100%; aspect-ratio: 1; object-position: 50% 30%; } /* a headshot is square; a 4 by 5 crop would cut it */
.lcg-founder__body { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.lcg-founder--web .lcg-founder__name { font-size: var(--size-title); font-weight: var(--weight-display); letter-spacing: var(--tracking-title); line-height: var(--leading-title); }
.lcg-founder--web .lcg-founder__role { font-size: var(--size-text); margin-top: var(--space-2); }
.lcg-founder--web .lcg-founder__line { margin-top: 0; max-width: var(--measure); }
.lcg-founder__rows { display: grid; }
.lcg-founder__rows > * { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-top: var(--rule); }
.lcg-founder__rows > *:last-child { border-bottom: var(--rule); }
.lcg-founder__rows .lcg-shows > div { padding: var(--space-2) 0; }
@media (max-width: 760px) { .lcg-founder--web { grid-template-columns: minmax(0, 1fr); } .lcg-founder--web .lcg-founder__portrait { width: 60%; } }
/* The footer on the web: the page's one ink block. The lime rule on top as the sheet's ink foot,
the mono white logo, the tagline in two beats (decision 104), the company's pieces in ruled
cells at the right, and "Facts as of " in a last line (ruling of 2026-10-12). */
.lcg-footer { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-6); padding: var(--space-8) var(--grid-margin) var(--space-7); border-top: 3px solid var(--lime); }
.lcg-footer__brand { grid-column: 1 / span 5; display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
.lcg-footer__logo { height: calc(var(--size-label) * 2.6); width: auto; }
.lcg-footer__tagline { font-family: var(--font-heading); font-weight: var(--weight-display); font-size: var(--size-heading); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); color: var(--lime); }
.lcg-footer__tagline-end { color: var(--on-ink); }
.lcg-footer__cells { grid-column: 6 / -1; }
.lcg-footer__note { grid-column: 1 / -1; padding-top: var(--space-3); border-top: var(--rule-on-ink); font-size: var(--size-small); color: var(--on-ink-muted); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.lcg-footer a { color: inherit; text-decoration: none; }
.lcg-footer a:hover { text-decoration: underline; }
.lcg--ink .lcg-ruled { border-top-color: var(--on-ink-rule); }
.lcg--ink .lcg-ruled > * + * { border-left-color: var(--on-ink-rule); }
.lcg--ink .lcg-label { color: var(--on-ink-muted); }
.lcg-footer .lcg-cells > * .lcg-small { color: var(--on-ink); overflow-wrap: anywhere; }
@media (max-width: 760px) {
.lcg-footer__brand, .lcg-footer__cells { grid-column: 1 / -1; }
.lcg-footer .lcg-cells { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); }
.lcg-footer .lcg-cells > :nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
/* The shows on the web: the result reads in green as on print; a row that is upcoming says so. */
.lcg-shows--web > div { padding: var(--space-3) 0; font-size: var(--size-text); gap: 0 var(--space-4); }
.lcg-shows--web .lcg-shows__date { width: 9em; }
.lcg-shows--web .lcg-shows__result { max-width: 40%; }
@media (max-width: 640px) { .lcg-shows--web > div { flex-wrap: wrap; } .lcg-shows--web .lcg-shows__date { width: 100%; } .lcg-shows--web .lcg-shows__result { max-width: none; text-align: left; flex: 1 0 100%; } }
/* Saved as a PDF: every section on US Letter, the contents bar off, nothing cut mid-card. */
@page { size: letter; margin: 14mm 12mm; }
@media print {
.lcg-sections > * + * { margin-top: var(--space-8); }
.lcg-section-head, .lcg-product-card, .lcg-gallery__item, .lcg-glance, .lcg-founder--web, .lcg-footer { break-inside: avoid; }
.lcg-section-head { break-after: avoid; }
.lcg-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
.lcg-hero--web, .lcg-footer, .lcg-cert, .lcg-pack-label, .lcg-product-card__stage { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* The brand profile page on a phone: one column. A ruled row of three (the reasons, the trends,
the cells, the support) stacks, and the hairline between columns becomes a hairline between
rows; the numbers go two across. Nothing is ever wider than the screen. */
@media (max-width: 640px) {
.lcg-sections .lcg-reasons, .lcg-sections .lcg-trends.lcg-ruled, .lcg-sections .lcg-cells, .lcg-sections .lcg-support--three { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
.lcg-sections .lcg-ruled > * + * { border-left: 0; padding-left: 0; border-top: var(--rule); padding-top: var(--space-3); margin-top: var(--space-3); }
.lcg-sections .lcg-stats.lcg-ruled { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
.lcg-sections .lcg-stats.lcg-ruled > * + * { border-top: 0; padding-top: 0; margin-top: 0; }
.lcg-sections .lcg-stats.lcg-ruled > :nth-child(2n) { border-left: var(--rule); padding-left: var(--grid-gutter); }
.lcg-sections .lcg-stats--offer.lcg-ruled { grid-template-columns: minmax(0, 1fr); } /* an offer's terms are a sentence: one a row on a phone */
.lcg-sections .lcg-stats--offer.lcg-ruled > :nth-child(2n) { border-left: 0; padding-left: 0; }
.lcg-sections .lcg-stats--offer.lcg-ruled > * + * { border-top: var(--rule); padding-top: var(--space-4); }
.lcg-sections .lcg-reasons > .lcg-reason:only-child .lcg-reason__line { max-width: none; }
.lcg-sections .lcg-reason__line { font-size: var(--size-lead); }
.lcg-sections .lcg-shows__result { max-width: none; }
.lcg-sections .lcg-support--three > div { border-left: 0; padding-left: 0; }
.lcg-sections .lcg-pack-strip > * { width: 40%; } /* the line wraps to two rows, so every label has its room */
.lcg-sections .lcg-pack-strip { justify-content: center; }
}
/* Printed (Save as PDF, US Letter): the hero stays on one page with its pack inside the band, the
product cards sit two across, and the page's own ruler holds. */
@media print {
/* the printable width is under the phone breakpoint, so the band keeps its two columns here */
.lcg-hero--web { break-inside: avoid; padding-top: var(--space-7); }
.lcg-hero--web .lcg-hero__copy { grid-column: 1 / span 7; padding-bottom: var(--space-7); }
.lcg-hero--web .lcg-hero__packs { grid-column: 8 / -1; }
.lcg-hero--web .lcg-hero__packs--one .lcg-pack-wrap { width: 62%; margin-bottom: 0; }
.lcg-sections > .lcg-hero + * { margin-top: var(--space-8); }
.lcg-product-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lcg-sections .lcg-pack-strip { break-inside: avoid; }
}
/* ───────────────────────────── THE BRAND PROFILE PAGE, SECOND PASS, 2026-10-15 ─────────────────────────────
Barron, on the first pass: a website should have web elements and look like one, not a sheet
stacked on a screen. What a web page has that a sheet does not, drawn from the materials layer:
a change of ground between sections, cards that float a little and answer the pointer,
photographs that answer it too, a bar that shows how far down the page you are, and a scroll
that glides. Nothing new is invented: the paper ground, lcg-surface, lcg-reveal and the motion
tokens were in the system already. */
/* An emphasis phrase never breaks across lines ("al dente" split in two; Barron, 2026-10-15). */
.lcg .lcg-em { white-space: nowrap; text-wrap: nowrap; } /* outweighs .lcg span's text-wrap: pretty, which sets the wrap mode back */
/* Paper: the change of ground. One section at a time, full width, and the stack's gap becomes
the section's own padding so the band reads as a band. */
.lcg--paper { background: var(--paper); }
.lcg-sections > .lcg--paper { padding-block: var(--section-gap); }
.lcg-sections > .lcg--paper + * { margin-top: var(--section-gap); }
/* The scroll glides to a section and stops under the pinned bar. */
@media (prefers-reduced-motion: no-preference) { html:has(.lcg-contents) { scroll-behavior: smooth; } }
html:has(.lcg-contents) { scroll-padding-top: calc(var(--control-large) + var(--space-5)); }
/* The contents bar shows how far down the page the reader is: a lime line along its foot,
its length set by the page (--progress, 0 to 1). */
.lcg-contents { position: sticky; --progress: 0; } /* the page sets it as the reader scrolls */
.lcg-contents::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--lime); transform: scaleX(var(--progress, 0)); transform-origin: 0 50%; }
/* The hero's numbers: the pack claims that lead with a figure, on a card that breaks out of the
band's bottom edge at the left while the pack breaks it at the right. The card is straight;
the pack is the thing that misbehaves. */
.lcg-hero--web { grid-template-rows: auto auto; }
.lcg-hero--web .lcg-hero__copy { grid-row: 1; }
.lcg-hero--web .lcg-hero__packs { grid-row: 1 / span 2; }
.lcg-hero__stats { grid-column: 1 / span 6; grid-row: 2; align-self: end; }
.lcg-hero__stats .lcg-stats { padding: var(--space-5) var(--space-6); }
.lcg-hero__stats .lcg-stats > .lcg-stat { border-top: 0; padding-top: 0; }
.lcg-hero__stats .lcg-stats > .lcg-stat + .lcg-stat { border-left: var(--rule); padding-left: var(--grid-gutter); }
.lcg-hero--web:has(.lcg-hero__stats) .lcg-hero__copy { padding-bottom: var(--space-7); }
.lcg-sections > .lcg-hero:has(.lcg-hero__stats) + * { margin-top: calc(var(--section-gap) + var(--break) + var(--space-5)); }
@media (max-width: 760px) {
.lcg-hero--web .lcg-hero__packs { grid-row: 2; }
.lcg-hero__stats { grid-column: 1 / -1; grid-row: 3; }
.lcg-hero--web .lcg-hero__packs--one .lcg-pack-wrap.lcg-break { margin-bottom: 0; }
.lcg-hero__stats .lcg-stats { padding: var(--space-4) var(--space-5); }
}
/* Cards on the web answer the pointer: a product card or a review card lifts a little, and a
photograph in a frame comes forward. Flat otherwise (decision 102). */
.lcg-product-card.lcg-surface { border-top: 0; padding: var(--space-5); transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.lcg-product-card.lcg-surface .lcg-product-card__stage { background: var(--paper); }
.lcg-gallery__item > img { transition: transform var(--duration-slow) var(--ease); }
.lcg-gallery__item { overflow: hidden; border-radius: var(--corner); }
.lcg-gallery__item figcaption { padding: 0 var(--space-1); }
.lcg-reviews--cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--grid-gutter); border-top: 0; padding-top: 0; }
.lcg-reviews--cards > * { padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; border-left: 0; }
.lcg-reviews--cards .lcg-rating__score { font-size: calc(var(--size-number) * 0.8); }
.lcg-reviews--cards .lcg-rating__source { font-size: var(--size-small); }
@media (hover: hover) {
.lcg-product-card.lcg-surface:hover, .lcg-reviews--cards > .lcg-surface:hover { transform: translateY(-3px); box-shadow: var(--lift); }
.lcg-gallery__item:hover > img { transform: scale(1.03); }
}
@media (max-width: 640px) { .lcg-reviews--cards { grid-template-columns: minmax(0, 1fr); } }
/* The founder's portrait on the web: a photograph may misbehave (decision 99), so it sits a
touch off the grid, as a print pinned to a board. */
.lcg-founder--web .lcg-founder__portrait.lcg-misbehave--slight { box-shadow: var(--lift); }
.lcg-product-card__name { text-wrap: pretty; }
/* An arrow in the one primary button, drawn inline; it steps forward on hover. */
.lcg-btn svg { transition: transform var(--duration-quick) var(--ease); }
.lcg-btn:hover svg { transform: translateX(3px); }
@media print { .lcg-contents::after { display: none; } .lcg--paper { background: var(--white); } .lcg-hero__stats { grid-column: 1 / span 6; } }
/* ───────────────────────────── THE BRAND PROFILE PAGE, THIRD PASS, 2026-10-15 ─────────────────────────────
Barron, on the second pass: "this still looks like our print stuff... what happened to all our
web elements, styles". The web's grammar is the chosen homepage direction (directions/
d-platform.html, decision 90): a page column with two fine rails, every section one inset
inside them; titles in two tones, ink then grey; raised surfaces with real data and the packs
in front; a strip of where the brand sells; tiles for a change of ground; airy spacing. These
are the direction's devices as parts, on the core's tokens, so the brand profile and the
homepage are one site. */
/* The page column: the direction's 1200 column with a hairline rail each side, and each
section's content one inset inside the rails. A ground (paper, partner) runs full width
behind it; the rails run through. */
.lcg-column { max-width: calc(var(--size-text) * 72); margin: 0 auto; padding-inline: var(--grid-margin); }
.lcg-column__in { border-left: var(--rule); border-right: var(--rule); padding-inline: var(--space-7); }
.lcg-sections > * > .lcg-column > .lcg-column__in { padding-block: var(--space-9); }
.lcg-sections > * + * { margin-top: 0; } /* the rails are continuous: sections butt */
.lcg-sections > .lcg--paper { padding-block: 0; }
.lcg-sections > .lcg--paper + * { margin-top: 0; }
@media (max-width: 760px) { .lcg-column__in { border-left: 0; border-right: 0; padding-inline: 0; } .lcg-sections > * > .lcg-column > .lcg-column__in { padding-block: var(--space-8); } }
/* The web title: two tones, the point in ink and the rest in grey, at the direction's medium
weight. The brand's name keeps the display line at 900 (B2): the brand is the loud thing. */
.lcg-title--web { font-weight: 600; letter-spacing: -0.026em; line-height: 1.08; max-width: 24ch; }
.lcg-title__tone { color: var(--stone-600); }
.lcg-sections .lcg-section-head { gap: var(--space-4); margin-bottom: var(--space-8); }
.lcg-sections .lcg-section-head > .lcg-label { color: var(--stone-600); font-weight: var(--weight-heading); text-transform: none; letter-spacing: 0; font-size: var(--size-small); }
.lcg-sections .lcg-section-head > .lcg-lead { color: var(--stone-600); }
/* The hero's stage: raised surfaces with the brand's own numbers behind, the top seller in
front, as the homepage stages Gibson's screens with packs before them. The pack keeps its
tilt and breaks the band's edge (decision 94). */
.lcg-hero--web .lcg-hero__stage { grid-column: 7 / -1; grid-row: 1 / span 2; position: relative; align-self: end; display: grid; }
.lcg-hero__stage > .lcg-surface { position: absolute; display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); min-width: calc(var(--size-text) * 11); }
.lcg-hero__stage > .lcg-hero__stage-card--one { left: 0; top: 8%; }
.lcg-hero__stage > .lcg-hero__stage-card--two { right: 0; top: 36%; }
.lcg-hero__stage > .lcg-hero__packs { grid-column: auto; grid-row: auto; margin-inline: auto; width: 62%; position: relative; z-index: 2; }
.lcg-hero--web .lcg-hero__stage .lcg-hero__packs--one .lcg-pack-wrap { width: 100%; }
.lcg-hero__stage .lcg-stat__number { font-size: calc(var(--size-number) * 0.62); }
.lcg-hero__stage .lcg-rating__score { font-size: calc(var(--size-number) * 0.62); }
.lcg-hero--web:has(.lcg-hero__stage) .lcg-hero__copy { grid-column: 1 / span 6; grid-row: 1 / span 2; padding-bottom: var(--space-8); }
.lcg-hero--web .lcg-hero__copy .lcg-lead { color: var(--stone-600); }
@media (max-width: 760px) {
.lcg-hero--web .lcg-hero__stage { grid-column: 1 / -1; grid-row: 3; margin-top: var(--space-6); }
.lcg-hero__stage > .lcg-surface { position: static; min-width: 0; }
.lcg-hero__stage { gap: var(--space-3); }
.lcg-hero__stage > .lcg-hero__packs { width: 56%; order: -1; margin-bottom: var(--space-4); }
.lcg-hero--web:has(.lcg-hero__stage) .lcg-hero__copy { grid-column: 1 / -1; grid-row: 1; padding-bottom: 0; }
}
/* The strip: where the brand sells, as the homepage's "where our brand partners sell". A label
at the left, the names in grey at heading size, on a hairline above and below, full width. */
.lcg-strip { display: flex; align-items: baseline; gap: var(--space-6); flex-wrap: wrap; padding: var(--space-5) 0; border-top: var(--rule); border-bottom: var(--rule); }
.lcg-strip > .lcg-label { color: var(--stone-600); text-transform: none; letter-spacing: 0; font-size: var(--size-small); font-weight: var(--weight-heading); }
.lcg-strip__names { display: flex; gap: var(--space-6); flex-wrap: wrap; font-family: var(--font-heading); font-weight: 600; font-size: var(--size-heading); letter-spacing: var(--tracking-heading); color: var(--stone-400); }
/* Tiles: a lime tile for the one figure that matters and a paper tile beside it, the direction's
pair. Corners at the band radius (8, decision 102). */
.lcg-tiles { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--grid-gutter); }
.lcg-tiles > * { border-radius: var(--corner-band); padding: var(--space-6); display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.lcg-tiles > .lcg--lime .lcg-stat__number { font-size: var(--size-number); }
.lcg-tiles > .lcg--lime .lcg-stat__label { color: rgba(10,10,10,0.72); }
.lcg-tiles .lcg-heading { font-weight: 600; }
.lcg-tiles__pills { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: auto; }
.lcg-tiles__pills > * { background: var(--white); border-radius: var(--corner-round); padding: 0.6em 1em; font-size: var(--size-small); font-weight: var(--weight-heading); box-shadow: inset 0 0 0 1px var(--stone-100); white-space: nowrap; }
@media (max-width: 760px) { .lcg-tiles { grid-template-columns: minmax(0, 1fr); } }
/* Ruled rows on the web take the direction's quieter head: a grey one-line label. */
.lcg-sections .lcg-group__head .lcg-label { color: var(--stone-600); text-transform: none; letter-spacing: 0; font-size: var(--size-small); font-weight: var(--weight-heading); }
.lcg-sections .lcg-glance > * > .lcg-label, .lcg-sections .lcg-founder__rows .lcg-label, .lcg-sections .lcg-cells .lcg-label, .lcg-sections .lcg-reviews--cards .lcg-label { color: var(--stone-600); text-transform: none; letter-spacing: 0; font-size: var(--size-small); font-weight: var(--weight-heading); }
.lcg-sections .lcg-reasons .lcg-reason__line { font-weight: 600; }
.lcg-sections .lcg-stat__number { font-weight: 600; letter-spacing: -0.04em; }
.lcg-sections .lcg-glance__value { font-weight: 600; }
.lcg-sections .lcg-product-card__name { font-weight: 600; }
.lcg-sections .lcg-quote__text { font-weight: 600; }
.lcg-footer .lcg-cells .lcg-label { text-transform: none; letter-spacing: 0; font-size: var(--size-small); font-weight: var(--weight-heading); }
/* The column inside the bar, the band and the footer, so the rails line up top to bottom. */
.lcg-contents { display: block; padding-inline: 0; }
.lcg-contents > .lcg-column { display: flex; align-items: center; gap: var(--space-5); }
.lcg-hero--web { display: block; padding: 0; }
.lcg-hero__grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: end; }
.lcg-sections > .lcg-hero > .lcg-column > .lcg-column__in { padding-top: var(--space-8); padding-bottom: 0; }
.lcg-sections > .lcg-hero + * > .lcg-column > .lcg-column__in { padding-top: calc(var(--space-9) + var(--break)); } /* room under the pack that breaks the band */
.lcg--ink:has(> .lcg-column > .lcg-footer) { border-top: 3px solid var(--lime); }
.lcg--ink > .lcg-column > .lcg-footer { border-top: 0; padding-inline: 0; }
@media (max-width: 640px) { .lcg-contents > .lcg-column { flex-wrap: wrap; gap: var(--space-3) var(--space-4); } .lcg-contents { padding-bottom: 0; } }
@media (max-width: 760px) { .lcg-sections > .lcg-hero > .lcg-column > .lcg-column__in { padding-top: var(--space-7); } }
/* Third pass, after the first look (2026-10-15): the stage's cards sit around the pack, not
behind it; the sales figures carry their unit in the label; the strip's names at lead size;
the lime tile's figure sits at its foot; the footer's cells keep an address on its lines. */
.lcg-hero__stage > .lcg-hero__packs { width: 54%; margin-inline: 30% 0; }
.lcg-hero__stage > .lcg-hero__stage-card--one { left: 0; top: 0; z-index: 1; }
.lcg-hero__stage > .lcg-hero__stage-card--two { right: 0; top: auto; bottom: 22%; z-index: 3; }
.lcg-sections .lcg-stats.lcg-ruled .lcg-stat__number { font-size: calc(var(--size-number) * 0.8); }
.lcg-sections .lcg-stats--offer.lcg-ruled .lcg-stat__number { font-size: calc(var(--size-number) * 1.18); font-weight: var(--weight-display); } /* an offer keeps decision 121's figures on the web page */
/* An offer straight under the hero belongs to the top of the page: it clears the pack that breaks
the band and no more, and the next section follows at a section's own head room (Barron,
2026-10-16: too much white space above and below the promotions). */
.lcg-sections > .lcg-hero + .lcg-section--offer { margin-top: 0; }
.lcg-sections > .lcg-hero + .lcg-section--offer > .lcg-column > .lcg-column__in { padding-top: calc(var(--break) + var(--space-7)); padding-bottom: 0; }
.lcg-sections .lcg-section--offer .lcg-group { padding-top: 0; }
.lcg-sections > .lcg-section--offer + * { margin-top: 0; }
.lcg-sections > .lcg-section--offer + * > .lcg-column > .lcg-column__in { padding-top: var(--space-8); }
.lcg-strip__names { font-size: var(--size-lead); gap: var(--space-5); }
.lcg-tiles > .lcg--lime { align-content: end; }
.lcg-tiles > .lcg--lime .lcg-stat__number { font-size: calc(var(--size-number) * 1.25); }
.lcg-sections .lcg-product-card__name { font-size: calc(var(--size-heading) * 0.9); }
.lcg-footer__brand { grid-column: 1 / span 4; }
.lcg-footer__cells { grid-column: 5 / -1; }
.lcg-footer .lcg-cells > * .lcg-small { overflow-wrap: normal; white-space: nowrap; }
.lcg-footer .lcg-cells > * .lcg-small br + * { white-space: nowrap; }
@media (max-width: 760px) { .lcg-hero__stage > .lcg-hero__packs { margin-inline: auto; } .lcg-footer__brand, .lcg-footer__cells { grid-column: 1 / -1; } .lcg-footer .lcg-cells > * .lcg-small { white-space: normal; } }
/* The stage's first card clear of the pack; the pack starts further right. */
.lcg-hero__stage > .lcg-hero__packs { width: 50%; margin-inline: 42% 0; }
.lcg-hero__stage > .lcg-hero__stage-card--one { max-width: 38%; }
@media (max-width: 760px) { .lcg-hero__stage > .lcg-hero__packs { margin-inline: auto; } .lcg-hero__stage > .lcg-hero__stage-card--one { max-width: none; } }
/* Printed, the third pass: the bar never prints, the rails and the web's air go, the band keeps
its two columns at the printable width, and a ruled row never splits across pages. */
@media print {
.lcg-contents { display: none !important; }
.lcg-column__in { border: 0; padding-inline: 0; }
.lcg-sections > * > .lcg-column > .lcg-column__in { padding-block: var(--space-7); }
.lcg-sections > .lcg-hero + * > .lcg-column > .lcg-column__in { padding-top: var(--space-8); }
.lcg-sections .lcg-section-head { margin-bottom: var(--space-6); }
.lcg-hero--web:has(.lcg-hero__stage) .lcg-hero__copy { grid-column: 1 / span 6; grid-row: 1 / span 2; padding-bottom: var(--space-7); }
.lcg-hero--web .lcg-hero__stage { grid-column: 7 / -1; grid-row: 1 / span 2; margin-top: 0; }
.lcg-hero__stage > .lcg-surface { position: absolute; }
.lcg-hero__stage > .lcg-hero__stage-card--one { max-width: 38%; }
.lcg-hero__stage > .lcg-hero__packs { width: 50%; margin-inline: 42% 0; order: 0; margin-bottom: 0; }
.lcg-reasons, .lcg-trends, .lcg-glance, .lcg-stats, .lcg-tiles, .lcg-strip, .lcg-quote, .lcg-support { break-inside: avoid; }
.lcg-title--web { max-width: none; }
}
/* The hero's stage, as Barron ruled it (2026-10-15): the product alone, as large as the column
allows, tilted, crossing the band's bottom edge; nothing over it. The numbers go back to At a
glance. The key messages sit under the hook (decision 63); the rail paragraph is The line's. */
.lcg-hero__stage--pack > .lcg-hero__packs { width: 92%; margin-inline: auto 0; }
.lcg-hero__stage--pack .lcg-pack-wrap.lcg-break { margin-bottom: calc(var(--break) * -2.4); }
.lcg-hero--web .lcg-messages > li { font-size: var(--size-text); color: var(--stone-600); max-width: var(--measure-short); }
.lcg-sections > .lcg-hero + * > .lcg-column > .lcg-column__in { padding-top: calc(var(--space-9) + var(--break) * 2); }
@media (max-width: 760px) { .lcg-hero__stage--pack > .lcg-hero__packs { width: 70%; margin-inline: auto; } .lcg-hero__stage--pack .lcg-pack-wrap.lcg-break { margin-bottom: calc(var(--break) * -1.4); } }
/* The section after the top sits close under the pack (Barron, 2026-10-15: "too much space"). */
.lcg-sections > .lcg-hero + * > .lcg-column > .lcg-column__in { padding-top: calc(var(--space-7) + var(--break) * 1.6); }
/* Closer still under the pack (Barron, 2026-10-15, second time). */
.lcg-sections > .lcg-hero + * > .lcg-column > .lcg-column__in { padding-top: calc(var(--space-6) + var(--break)); }
.lcg-shows__name .lcg-small { margin-left: var(--space-2); }
/* The glance grid closes its last row with blank cells, so the rule above the certifications runs
the width and the column line comes down to it (Barron, 2026-10-15: "that bottom right-hand
corner of at a glance is weird"). A blank cell is layout, not a fact: it holds nothing. */
.lcg-glance__blank { min-height: 0; }
@media (max-width: 640px) { .lcg-glance__blank:nth-child(3n) { display: none; } }
/* The kind of show in its own column, so the events log reads as a table (Barron, 2026-10-15). */
.lcg-shows__kind { flex: none; width: 9em; color: var(--stone-600); }
.lcg-shows--web .lcg-shows__name { flex: 1 1 auto; }
@media (max-width: 640px) { .lcg-shows--web .lcg-shows__kind { width: auto; } }
/* ───────────────────────────── THE EDGE, ON THE BRAND PROFILE, 2026-10-15 ─────────────────────────────
The 2026-10-12 trial (expressions/brand-profile.html, "The edge") brought onto the page itself
at Barron's ask ("maybe the edge is what we need"): the tape on the top seller, the reasons on
the charcoal square band with lime numerals, the lime footer with the mono ink logo, and the
contents bar in charcoal. Each is a part the system already had; two take a variant here. */
.lcg-contents--charcoal { background: var(--stone-800); color: var(--on-ink); box-shadow: inset 0 calc(var(--hairline) * -1) 0 rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.08); }
.lcg-contents--charcoal .lcg-contents__brand { color: var(--on-ink); }
.lcg-contents--charcoal .lcg-contents__links a { color: var(--on-ink-muted); }
.lcg-contents--charcoal .lcg-contents__links a:hover { color: var(--on-ink); }
.lcg-contents--charcoal .lcg-contents__links a[aria-current] { color: var(--on-ink); box-shadow: inset 0 -2px 0 var(--lime); }
.lcg-sections .lcg-band--charcoal { padding: var(--space-6) var(--space-7); gap: var(--space-4); }
.lcg-sections .lcg-band__row { grid-template-columns: 2.6em 1fr; padding: var(--space-4) 0; }
.lcg-sections .lcg-band__rank { font-weight: 600; }
.lcg-sections .lcg-band__line { font-weight: 600; font-size: var(--size-heading); }
.lcg-hero--web .lcg-tape { top: 4%; left: 6%; font-size: var(--size-label); padding: 0.6em 1.1em; }
.lcg-footer--lime { border-top: 0; }
.lcg--lime:has(> .lcg-column > .lcg-footer) { border-top: 0; }
.lcg--lime > .lcg-column > .lcg-footer { border-top: 0; padding-inline: 0; }
.lcg--lime .lcg-footer__tagline, .lcg--lime .lcg-footer__tagline-end { color: var(--ink); }
.lcg--lime .lcg-footer__note { color: rgba(10,10,10,0.72); border-top-color: rgba(10,10,10,0.28); }
.lcg--lime .lcg-ruled { border-top-color: var(--ink); }
.lcg--lime .lcg-ruled > * + * { border-left-color: rgba(10,10,10,0.28); }
.lcg--lime .lcg-footer .lcg-cells > * .lcg-small { color: var(--ink); }
.lcg--lime .lcg-footer .lcg-cells .lcg-label { color: rgba(10,10,10,0.72); }
/* The review site's mark beside its score (the brief: "real stars, the site's mark"). A file,
never drawn: shared/review-sites.yml names the mark for each site; no file, the site's name
prints as the label instead (Barron, 2026-10-15: "the Amazon and Well.ca logos... to get impact"). */
.lcg-rating__mark { height: calc(var(--size-label) * 2); width: auto; max-width: calc(var(--size-text) * 8); display: block; }
.lcg-reviews--cards > * > .lcg-rating__mark { margin-bottom: var(--space-1); }
/* The top fits the first screen (Barron, 2026-10-16: "when I first hit the page, it seems cut
off"). The copy tightens on wide screens: a smaller logo, the hook a step under title size,
the stack at the stack gap, and the band's padding at the block gap. */
.lcg-sections > .lcg-hero > .lcg-column > .lcg-column__in { padding-top: var(--space-6); }
.lcg-hero--web .lcg-hero__copy { gap: var(--space-4); padding-bottom: var(--space-6); }
.lcg-hero--web .lcg-hero__copy .lcg-title { font-size: calc(var(--size-title) * 0.82); }
.lcg-hero--web .lcg-hero__copy .lcg-display { font-size: calc(var(--size-display) * 0.9); }
.lcg-hero__logo { height: calc(var(--size-label) * 5); }
.lcg-hero--web .lcg-messages > li { padding: var(--space-1) 0; }
.lcg-hero--web:has(.lcg-hero__stage) .lcg-hero__copy { grid-column: 1 / span 7; }
.lcg-hero--web .lcg-hero__stage { grid-column: 8 / -1; }
.lcg-hero__stage--pack > .lcg-hero__packs { width: 100%; margin-inline: 0; }
/* Every screen, not one monitor (Barron, 2026-10-16). build/check_screens.py measures the page at
six sizes; these two came from its first run: the footer's four cells on a tablet, and the hero
pack on a laptop screen. */
@media (max-width: 1000px) {
.lcg-footer__brand, .lcg-footer__cells { grid-column: 1 / -1; }
.lcg-footer .lcg-cells { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); }
.lcg-footer .lcg-cells > :nth-child(2n+1) { border-left: 0; padding-left: 0; }
.lcg-footer .lcg-cells > * .lcg-small { white-space: normal; overflow-wrap: anywhere; }
}
.lcg-hero__stage--pack .lcg-pack-wrap.lcg-break { margin-bottom: calc(var(--break) * -2); }
/* A short laptop screen (800 high): the top's copy closes up a step, so a brand whose key messages
wrap a line still has its pack inside the first screen (Otelia's new messages, 2026-10-16, took
the pack 8 px under the fold). */
@media (min-width: 1001px) and (max-height: 860px) { .lcg-hero--web .lcg-hero__copy { gap: var(--space-3); } }