/* Harvest outcome pages (outcomes/*.html): calm, written for the owner, about people.
   The morning as it really is, what it costs, what changes, what it is worth, what stays yours. */

.p-outcome .ho-sec { padding-top: var(--space-24); }
.p-outcome .ho-down { display: inline-block; transition: transform .2s ease; }
.p-outcome .mb-btn:hover .ho-down { transform: translateY(2px); }

/* Hero */
.p-outcome .ho-hero { padding: var(--space-16) 0 0; }
.p-outcome .ho-hero .phero__grid { margin-top: var(--space-4); }
.p-outcome .ho-hero__side { display: grid; gap: var(--space-8); padding-bottom: 10px; }
.p-outcome .ho-hero__photo { margin-top: var(--space-16); aspect-ratio: 21 / 9; border-radius: var(--radius-xl); }

/* The morning: told, not shown. Serif, like a letter */
.p-outcome .ho-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-8) var(--space-16); }
.p-outcome .ho-story__head .mb-eyebrow { margin-bottom: var(--space-6); }
.p-outcome .ho-story__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-8); }
.p-outcome .ho-story__list li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); }
.p-outcome .ho-story__list time { padding-top: 6px; font: 500 15px/1 var(--font-mono); color: var(--carmine); }
.p-outcome .ho-story__list p { font-family: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.p-outcome .ho-story__list--days li { grid-template-columns: 128px minmax(0, 1fr); }   /* day names, not times */
.p-outcome .ho-story__list--days time { font-size: 14px; letter-spacing: .02em; }
.p-outcome .ho-story__list--days + .ho-story__end { padding-left: calc(128px + var(--space-4)); }
.p-outcome .ho-story__end { grid-column: 2; padding-left: calc(72px + var(--space-4)); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }

/* What it costs: three plain numbers */
.p-outcome .ho-costs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.p-outcome .ho-cost { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-8) var(--space-8) 0 0; }
.p-outcome .ho-cost + .ho-cost { padding-left: var(--space-8); border-left: 1px solid var(--line); }
.p-outcome .ho-cost__n { font-size: clamp(34px, 3.6vw, 48px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; color: var(--ink); }
.p-outcome .ho-cost__k { font-size: 17px; font-weight: 500; color: var(--ink); }
.p-outcome .ho-cost p:last-child { margin-top: var(--space-2); max-width: 32ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* What changes: before and after, one line each */
.p-outcome .ho-changes { margin: 0; padding: 0; list-style: none; display: grid; }
.p-outcome .ho-changes li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: baseline; padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.p-outcome .ho-changes li:last-child { border-bottom: 1px solid var(--line); }
.p-outcome .ho-changes b { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.p-outcome .ho-changes span { font-size: 17px; line-height: 1.5; }
.p-outcome .ho-changes small { display: none; }
.p-outcome .ho-before { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); text-decoration-thickness: 1px; }
.p-outcome .ho-after { color: var(--ink); }
.p-outcome .ho-changes__h { padding: 0 0 var(--space-3) !important; border-top: 0 !important; }
.p-outcome .ho-changes__h span { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p-outcome .ho-changes__h span:last-child { color: var(--carmine); }

/* What it is worth: the calculator */
.p-outcome .ho-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.p-outcome .ho-calc__in { display: grid; gap: var(--space-8); align-content: start; padding: var(--space-12); }
.p-outcome .ho-in { display: grid; gap: 14px; }
.p-outcome .ho-in__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); font-size: 17px; color: var(--ink); }
.p-outcome .ho-in output { font: 500 22px/1 var(--font-mono); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.p-outcome .ho-in input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; --p: 50%; }
.p-outcome .ho-in input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink) var(--p), var(--surface-sunk) var(--p)); }
.p-outcome .ho-in input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--surface-sunk); }
.p-outcome .ho-in input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ink); }
.p-outcome .ho-in input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); box-shadow: 0 2px 6px rgba(18,18,17,.18); }
.p-outcome .ho-in input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); }
.p-outcome .ho-in input[type="range"]:focus-visible { outline: none; }
.p-outcome .ho-in input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--carmine-soft); }
.p-outcome .ho-calc__note { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.p-outcome .ho-calc__t { display: none !important; }
/* the currency menu under the sliders (added by js/harvest-outcome.js) */
.p-outcome .ho-cur { display: flex; align-items: center; gap: 12px; margin-top: calc(var(--space-8) * -0.5); font-size: 14.5px; color: var(--muted); }
.p-outcome .ho-cur select { -webkit-appearance: none; appearance: none; font: 500 14px/1 var(--font-mono); color: var(--ink); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23121211' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 7px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 32px 8px 14px; cursor: pointer; }
.p-outcome .ho-cur select:hover { border-color: var(--ink); }
.p-outcome .ho-cur select:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--carmine-soft); border-color: var(--ink); }
[dir="rtl"] .p-outcome .ho-cur select { background-position: left 12px center; padding: 8px 14px 8px 32px; }
.p-outcome .ho-calc__out { display: grid; align-content: center; gap: var(--space-12); padding: var(--space-12); background: var(--ink); color: var(--paper); }
.p-outcome .ho-calc__k { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 65%, transparent); }
.p-outcome .ho-calc__n { margin-top: 12px; font-size: 22px; color: color-mix(in srgb, var(--paper) 80%, transparent); }
.p-outcome .ho-calc__n b { font-size: calc(clamp(48px, 5.6vw, 76px) * var(--fit, 1)); line-height: 1; font-weight: 600; letter-spacing: -0.045em; color: var(--paper); font-variant-numeric: tabular-nums; }
.p-outcome .ho-calc__sub { margin-top: 10px; font-size: 16px; line-height: 1.45; color: color-mix(in srgb, var(--paper) 72%, transparent); }

/* What stays yours */
.p-outcome .ho-yours { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-12); align-items: start; }
.p-outcome .ho-yours .mb-eyebrow { margin-bottom: var(--space-6); }
.p-outcome .ho-yours__list { margin: 0; padding: 0; list-style: none; display: grid; }
.p-outcome .ho-yours__list li { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--line); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.35; color: var(--ink); }
.p-outcome .ho-yours__list li:last-child { border-bottom: 1px solid var(--line); }
.p-outcome .ho-yours__list img { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; }

/* Our own desk */
.p-outcome .ho-quote { margin: 0; padding: var(--space-16) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.p-outcome .ho-quote blockquote { margin: 0; max-width: 26ch; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.p-outcome .ho-quote figcaption { margin-top: var(--space-6); font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* How we start */
.p-outcome .ho-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.p-outcome .ho-steps li { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-8) var(--space-8) 0 0; }
.p-outcome .ho-steps li + li { padding-left: var(--space-8); border-left: 1px solid var(--line); }
.p-outcome .ho-steps__n { margin-bottom: var(--space-4); font: 500 12px/1 var(--font-mono); letter-spacing: .06em; color: var(--carmine); }
.p-outcome .ho-steps .title { font-size: 22px; }
.p-outcome .ho-steps p { max-width: 32ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* Behind it, and the other outcomes */
.p-outcome .ho-behind { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--line); }
.p-outcome .ho-behind .mb-eyebrow { margin-bottom: var(--space-4); }
.p-outcome .ho-behind .title { margin-bottom: var(--space-4); }
.p-outcome .ho-behind ul, .p-outcome .ho-behind ol { margin: 0; padding: 0; list-style: none; display: grid; }
.p-outcome .ho-behind a { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.p-outcome .ho-behind a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.p-outcome .ho-behind b { font-size: 17px; font-weight: 500; }
.p-outcome .ho-behind a span, .p-outcome .ho-behind small { font-size: 14.5px; color: var(--muted); }
.p-outcome .ho-behind__more a { grid-template-columns: 34px minmax(0, 1fr); }
.p-outcome .ho-behind__more a span { grid-row: span 2; padding-top: 4px; font: 500 12px/1 var(--font-mono); color: var(--carmine); }

/* Smaller screens */
@media (max-width: 960px) {
  .p-outcome .ho-sec { padding-top: var(--space-16); }
  .p-outcome .ho-hero__photo { margin-top: var(--space-12); aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
  .p-outcome .ho-story, .p-outcome .ho-yours, .p-outcome .ho-behind { grid-template-columns: minmax(0, 1fr); }
  .p-outcome .ho-story__end, .p-outcome .ho-story__list--days + .ho-story__end { grid-column: 1; padding-left: 0; }
  .p-outcome .ho-costs, .p-outcome .ho-steps { grid-template-columns: minmax(0, 1fr); }
  .p-outcome .ho-cost, .p-outcome .ho-cost + .ho-cost, .p-outcome .ho-steps li, .p-outcome .ho-steps li + li { padding: var(--space-6) 0; border-left: 0; }
  .p-outcome .ho-cost + .ho-cost, .p-outcome .ho-steps li + li { border-top: 1px solid var(--line); }
  .p-outcome .ho-changes li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .p-outcome .ho-changes__h { display: none !important; }
  .p-outcome .ho-changes small { display: block; font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
  .p-outcome .ho-after small { color: var(--carmine); }
  .p-outcome .ho-before { text-decoration: none; }
  .p-outcome .ho-calc { grid-template-columns: minmax(0, 1fr); }
  .p-outcome .ho-calc__in, .p-outcome .ho-calc__out { padding: var(--space-8) var(--space-6); }
  .p-outcome .ho-calc__out { gap: var(--space-8); }
}
@media (max-width: 560px) {
  .p-outcome .ho-story__list li, .p-outcome .ho-story__list--days li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ==========================================================================
   Trade pages (trades/*.html, body .p-trade): a full-bleed opening, the trade in big
   numbers, what weighs on it, the outcomes in the trade's own words, who we work with, the proof.
   ========================================================================== */
.p-trade .ht-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(560px, calc(100svh - 64px), 860px); overflow: hidden; background: var(--photo-shade); color: var(--on-photo); }
.p-trade .ht-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.p-trade .ht-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18,18,17,.78), rgba(18,18,17,.4) 45%, rgba(18,18,17,.05) 75%), linear-gradient(0deg, rgba(18,18,17,.6), rgba(18,18,17,0) 50%); }
.p-trade .ht-hero__in { display: grid; gap: var(--space-6); justify-items: start; padding-top: var(--space-24); padding-bottom: var(--space-16); }
.p-trade .ht-hero .mb-eyebrow { color: rgba(246,245,242,.8); }
.p-trade .ht-hero h1 { max-width: 12ch; color: var(--on-photo); }
.p-trade .ht-hero .lead { max-width: 46ch; color: rgba(246,245,242,.9); }
.p-trade .ht-ghost { color: var(--on-photo); border-color: rgba(246,245,242,.45); background: transparent; }
.p-trade .ht-ghost:hover { border-color: var(--on-photo); }

.p-trade .ht-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-6) var(--space-16); align-items: end; }
.p-trade .ht-story .mb-eyebrow { grid-column: 1 / -1; }
.p-trade .ht-story__p { font-family: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.p-trade .ht-facts { margin: var(--space-16) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.p-trade .ht-facts li { display: grid; gap: 8px; padding: var(--space-8) var(--space-6); }
.p-trade .ht-facts li + li { border-left: 1px solid var(--line); }
.p-trade .ht-facts b { font-size: clamp(48px, 6vw, 88px); line-height: .9; font-weight: 600; letter-spacing: -0.05em; color: var(--ink); }
.p-trade .ht-facts li:last-child b { color: var(--carmine); }
.p-trade .ht-facts span { font-size: 17px; color: var(--ink-2); }
.p-trade .ht-story__end { margin-top: var(--space-12); padding-left: 0 !important; max-width: 30ch; }

.p-trade .ht-weighs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.p-trade .ht-weighs li { display: grid; }
.p-trade .ht-weighs a { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: var(--space-3); height: 100%; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-sunk); color: inherit; text-decoration: none; border: 1px solid transparent; transition: border-color .2s ease, background .2s ease; }
.p-trade .ht-weighs a:hover { background: var(--surface); border-color: var(--line-strong); }
.p-trade .ht-weighs em { font-style: normal; font-size: 14px; font-weight: 500; color: var(--ink); }
.p-trade .ht-weighs__n { font: 500 12px/1 var(--font-mono); color: var(--carmine); }
.p-trade .ht-weighs b { font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.p-trade .ht-weighs p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

.p-trade .ht-outs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.p-trade .ht-outs li:first-child { grid-column: span 2; }
.p-trade .ht-outs a { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3); height: 100%; padding: var(--space-8); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.p-trade .ht-outs a:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.p-trade .ht-out__n { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--carmine); }
.p-trade .ht-outs b { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.p-trade .ht-outs li:first-child b { font-size: clamp(28px, 3vw, 40px); }
.p-trade .ht-outs p { max-width: 40ch; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.p-trade .ht-outs em { font-style: normal; font-size: 15px; font-weight: 500; }
.p-trade .ht-outs .mb-arrow { display: inline-block; transition: transform .2s ease; }
.p-trade .ht-outs a:hover .mb-arrow { transform: translateX(3px); }
[dir=rtl] .p-trade .ht-outs a:hover .mb-arrow { transform: translateX(-3px); }

.p-trade .ht-jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.p-trade .ht-jobs a { display: grid; gap: 2px; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; }
.p-trade .ht-jobs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.p-trade .ht-jobs small { font-size: 14px; font-weight: 400; color: var(--muted); }

.p-trade .ht-proof { margin-top: var(--space-12); display: grid; gap: var(--space-6); }
.p-trade .ht-proof ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.p-trade .ht-proof a { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-2); height: 100%; padding: var(--space-6) 0; border-top: 2px solid var(--ink); color: var(--ink); text-decoration: none; }
.p-trade .ht-proof b { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.p-trade .ht-proof span { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.p-trade .ht-proof em { font-style: normal; font-size: 15px; font-weight: 500; }
.p-trade .ht-proof a:hover b { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .p-trade .ht-weighs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-trade .ht-outs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .p-trade .ht-story { grid-template-columns: minmax(0, 1fr); }
  .p-trade .ht-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-trade .ht-facts li:nth-child(3) { border-left: 0; }
  .p-trade .ht-facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .p-trade .ht-jobs, .p-trade .ht-proof ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .p-trade .ht-weighs, .p-trade .ht-outs { grid-template-columns: minmax(0, 1fr); }
  .p-trade .ht-outs li:first-child { grid-column: auto; }
  .p-trade .ht-hero__shade { background: linear-gradient(0deg, rgba(18,18,17,.85), rgba(18,18,17,.35) 70%); }
}

/* ==========================================================================
   Each outcome built around its own situation (hc-*)
   ========================================================================== */
.p-outcome .hc-end { margin-top: var(--space-12); max-width: 32ch; padding-left: 0 !important; }

/* Before / after as cards (02) */
.p-outcome .ho-cards { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.p-outcome .ho-cards li { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.p-outcome .ho-cards b { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.p-outcome .ho-cards p { font-size: 16px; line-height: 1.5; }
.p-outcome .ho-cards small { display: block; margin-bottom: 2px; font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p-outcome .ho-card__b { color: var(--muted); }
.p-outcome .ho-card__a { color: var(--ink); }
.p-outcome .ho-card__a small { color: var(--carmine); }

/* 02 · the aisle: pallets from the front to the back */
.p-outcome .hc-aisle__head { margin-bottom: var(--space-12); }
.p-outcome .hc-aisle__head .mb-eyebrow { margin-bottom: var(--space-6); }
.p-outcome .hc-aisle { margin: 0; padding: var(--space-8); border-radius: var(--radius-xl); background: var(--surface-sunk); }
.p-outcome .hc-aisle__k { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-4); margin-bottom: var(--space-6); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p-outcome .hc-aisle__k span:nth-child(2)::after { content: " →"; }
.p-outcome .hc-aisle__row { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.p-outcome .hc-pal { display: grid; gap: 4px; padding: 12px 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.p-outcome .hc-pal__box { display: grid; gap: 3px; margin-bottom: 6px; }
.p-outcome .hc-pal__box i { height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--line-strong) 60%, var(--surface)); }
.p-outcome .hc-pal b { font-size: 15px; font-weight: 600; color: var(--ink); }
.p-outcome .hc-pal small { font: 500 11px/1.2 var(--font-mono); color: var(--muted); }
.p-outcome .hc-pal em { font-style: normal; font-size: 13px; color: var(--ink-2); }
.p-outcome .hc-pal.is-old { border-color: var(--carmine); background: var(--carmine-soft); }
.p-outcome .hc-pal.is-old .hc-pal__box i { background: color-mix(in srgb, var(--carmine) 35%, var(--surface)); }
.p-outcome .hc-pal.is-old em { color: var(--carmine); font-weight: 600; }
.p-outcome .hc-week { margin: var(--space-12) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.p-outcome .hc-week li { display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-4); border-top: 2px solid var(--ink); }
.p-outcome .hc-week li:nth-child(n+3) { border-top-color: var(--carmine); }
.p-outcome .hc-week time { font: 500 13px/1 var(--font-mono); letter-spacing: .04em; color: var(--carmine); }
.p-outcome .hc-week p, .p-outcome .hc-road p { font-family: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; font-size: 19px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* 03 · one truck's papers */
.p-outcome .hc-papers { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.p-outcome .hc-sheet { position: relative; display: grid; align-content: start; gap: 14px; min-height: 300px; padding: var(--space-6); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-float); }
.p-outcome .hc-sheet:nth-child(odd) { transform: rotate(-1deg); }
.p-outcome .hc-sheet:nth-child(even) { transform: rotate(.8deg); }
.p-outcome .hc-sheet > b { font-size: 16px; font-weight: 600; color: var(--ink); }
.p-outcome .hc-sheet__lines { display: grid; gap: 7px; }
.p-outcome .hc-sheet__lines i { height: 5px; border-radius: 3px; background: var(--surface-sunk); }
.p-outcome .hc-sheet__lines i:nth-child(2n) { width: 70%; }
.p-outcome .hc-sheet__row { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 6px; background: var(--surface-sunk); }
.p-outcome .hc-sheet__row small { font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.p-outcome .hc-sheet__row em { font: 500 17px/1 var(--font-mono); font-style: normal; color: var(--ink); }
.p-outcome .hc-sheet__row.is-wrong { background: var(--carmine-soft); outline: 2px solid var(--carmine); }
.p-outcome .hc-sheet__row.is-wrong em { color: var(--carmine); }
.p-outcome .hc-sheet__row.is-ok { background: var(--ok-soft); }
.p-outcome .hc-sheet__note { position: absolute; right: -6px; top: -26px; padding: 3px 8px; border-radius: 6px; background: var(--carmine); color: var(--on-carmine); font: 500 11px/1.2 var(--font-mono); white-space: nowrap; }
.p-outcome .hc-sheet__ok { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: #fff; }
.p-outcome .hc-sheet__ok svg { width: 15px; height: 15px; }
.p-outcome .hc-papers--after .hc-sheet { transform: none; min-height: 0; box-shadow: none; border: 1px solid var(--line); }
.p-outcome .hc-road { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.p-outcome .hc-road::before { content: ""; position: absolute; left: 7px; right: 0; top: 7px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 10px, transparent 10px 18px); }
.p-outcome .hc-road li { position: relative; display: grid; align-content: start; gap: 8px; padding-top: var(--space-8); }
.p-outcome .hc-road__dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.p-outcome .hc-road li:nth-child(n+3) .hc-road__dot { border-color: var(--carmine); background: var(--carmine); }
.p-outcome .hc-road time { font: 500 13px/1 var(--font-mono); color: var(--carmine); }
.p-outcome .hc-road b { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.p-outcome .hc-after { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.p-outcome .hc-after .hc-papers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-outcome .hc-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.p-outcome .hc-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; line-height: 1.4; color: var(--ink); }
.p-outcome .hc-checks svg { width: 18px; height: 18px; margin-top: 4px; flex: none; color: var(--ok); }

/* 04 · one buyer's year */
.p-outcome .hc-year { margin: 0; padding: 56px 0 0; list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: end; border-bottom: 1px solid var(--line-strong); }
.p-outcome .hc-year__m { position: relative; display: grid; justify-items: center; gap: 6px; }
.p-outcome .hc-year__bar { width: 100%; height: calc(4px + var(--v) * 6px); border-radius: 6px 6px 0 0; background: var(--line-strong); }
.p-outcome .hc-year__m.is-late .hc-year__bar { background: var(--warn); }
.p-outcome .hc-year__m.is-flag .hc-year__bar { background: var(--carmine); }
.p-outcome .hc-year__m.is-none .hc-year__bar { height: 4px; background: transparent; border: 1px dashed var(--line-strong); border-bottom: 0; }
.p-outcome .hc-year__v { font: 500 13px/1 var(--font-mono); color: var(--ink-2); }
.p-outcome .hc-year__m.is-told b { color: var(--carmine); font-weight: 600; }
.p-outcome .hc-year__m b { padding: 8px 0; font: 500 12px/1 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.p-outcome .hc-year__note { position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 1; width: max(220px, 260%); padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-family: "Iowan Old Style", "Charter", Cambria, Georgia, serif; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); box-shadow: 0 1px 2px rgba(18,18,17,.05); }
.p-outcome .hc-year__m:nth-child(n+9) .hc-year__note { left: auto; right: 0; }
.p-outcome .hc-year__m .hc-year__note { bottom: calc(4px + var(--v) * 6px + 60px); }
.p-outcome .hc-year__m.is-flag .hc-year__note { bottom: calc(4px + var(--v) * 6px + 96px); }
.p-outcome .hc-year__flag { position: absolute; z-index: 3; bottom: calc(4px + var(--v) * 6px + 40px); left: 50%; transform: translateX(-50%); padding: 5px 10px; border-radius: var(--radius-pill); background: var(--carmine); color: var(--on-carmine); font: 500 11px/1.2 var(--font-mono); white-space: nowrap; }
.p-outcome .hc-year-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); margin: 0 0 var(--space-8); padding: 0; list-style: none; }   /* the four moments, above the chart */
.p-outcome .hc-year-notes li { display: grid; align-content: start; gap: 10px; padding-top: var(--space-4); border-top: 2px solid var(--ink); }
.p-outcome .hc-year-notes li:nth-child(n+3) { border-top-color: var(--carmine); }
.p-outcome .hc-year-notes time { font: 500 13px/1.6 var(--font-mono); color: var(--carmine); }
.p-outcome .hc-year-notes p { font-family: "Iowan Old Style", "Charter", Cambria, Georgia, serif; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.p-outcome .hc-cash { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-16); align-items: end; padding: var(--space-16); border-radius: var(--radius-xl); background: var(--ink); color: var(--paper); }
.p-outcome .hc-cash .mb-eyebrow { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.p-outcome .hc-cash__n { margin-top: var(--space-4); font-size: clamp(64px, 9vw, 132px); line-height: .9; font-weight: 600; letter-spacing: -0.055em; color: var(--paper); }
.p-outcome .hc-cash__k { margin-top: var(--space-4); font-size: clamp(20px, 2vw, 26px); font-weight: 500; color: var(--paper); }
.p-outcome .hc-cash__p { margin-top: var(--space-4); max-width: 46ch; font-size: 16px; line-height: 1.55; color: color-mix(in srgb, var(--paper) 72%, transparent); }
.p-outcome .hc-cash__p a { color: var(--paper); }
.p-outcome .hc-cash__more { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-6); }
.p-outcome .hc-cash__more li { padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--paper) 25%, transparent); font-size: 16.5px; line-height: 1.5; color: color-mix(in srgb, var(--paper) 78%, transparent); }
.p-outcome .hc-cash__more b { display: block; margin-bottom: 4px; font-size: 19px; color: var(--paper); }

/* 05 · the claim as a thread, then six names to one spec */
.p-outcome .hc-claim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-16); align-items: start; }
.p-outcome .hc-claim__head { display: grid; gap: var(--space-6); justify-items: start; position: sticky; top: 100px; }
.p-outcome .hc-thread { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.p-outcome .hc-msg { display: grid; gap: 6px; max-width: 520px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.p-outcome .hc-msg--in { justify-self: start; border-top-left-radius: 4px; }
.p-outcome .hc-msg--out { justify-self: end; border-top-right-radius: 4px; background: var(--surface-sunk); border-color: transparent; }
.p-outcome .hc-msg:nth-child(3) { border-color: var(--carmine); }
.p-outcome .hc-msg__who { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 13.5px; color: var(--muted); }
.p-outcome .hc-msg__who b { font-weight: 600; color: var(--ink); }
.p-outcome .hc-msg__t { font-size: 17px; line-height: 1.5; color: var(--ink); }
.p-outcome .hc-msg__tr { font-size: 14.5px; font-style: italic; color: var(--muted); }
.p-outcome .hc-names { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: center; }
.p-outcome .hc-names__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.p-outcome .hc-names__list li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--surface-sunk); font-size: 17px; color: var(--ink); }
.p-outcome .hc-names__l { display: inline-grid; place-items: center; min-width: 32px; height: 24px; border-radius: 6px; background: var(--surface); font: 500 12px/1 var(--font-mono); color: var(--ink-2); }
.p-outcome .hc-names__join { width: 100%; height: 100%; min-height: 360px; }
.p-outcome .hc-names__join path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.p-outcome .hc-spec { display: grid; gap: var(--space-3); padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--shadow-float); }
.p-outcome .hc-spec__k { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--carmine); }
.p-outcome .hc-spec__t { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.p-outcome .hc-spec dl { margin: 0; display: grid; }
.p-outcome .hc-spec dl div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 16px; }
.p-outcome .hc-spec dt { color: var(--muted); }
.p-outcome .hc-spec dd { margin: 0; font-weight: 500; color: var(--ink); }
.p-outcome .hc-spec dl div:last-child { background: var(--carmine-soft); margin: 0 -12px; padding: 10px 12px; border-radius: 8px; border-top: 0; }
.p-outcome .hc-spec__ok { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ok); }
.p-outcome .hc-spec__ok svg { width: 16px; height: 16px; }

/* 06 · the numbers first: the calculator beside the team's week */
.p-outcome .hc-first { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: stretch; }
.p-outcome .ho-calc--stack { grid-template-columns: minmax(0, 1fr); }
.p-outcome .hc-team { margin: 0; display: grid; align-content: start; gap: var(--space-4); padding: var(--space-8); border-radius: var(--radius-xl); background: var(--surface-sunk); }
.p-outcome .hc-team__k { display: flex; justify-content: space-between; gap: var(--space-4); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* the rows share one set of columns (subgrid), so the hours column fits the longest unit ("12 h", "12 ชม.") and the bars stay aligned */
.p-outcome .hc-team ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 28px 120px minmax(0, 1fr) minmax(44px, max-content); gap: 8px 12px; }
.p-outcome .hc-team li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; font-size: 15px; color: var(--ink); }
.p-outcome .hc-team img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.p-outcome .hc-team__who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-outcome .hc-team__bar { position: relative; height: 12px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.p-outcome .hc-team__bar i { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 6px; background: var(--carmine); }
.p-outcome .hc-team li b { font: 500 14px/1 var(--font-mono); text-align: end; white-space: nowrap; }
.p-outcome .hc-team__sum { margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line-strong); font-size: 17px; color: var(--ink-2); }
.p-outcome .hc-team__sum b { color: var(--ink); }
.p-outcome .hc-flow { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); counter-reset: f; }
.p-outcome .hc-flow li { position: relative; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.p-outcome .hc-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; z-index: 1; transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); color: var(--muted); font-size: 14px; }
.p-outcome .hc-flow__n { font: 500 12px/1 var(--font-mono); color: var(--carmine); }
.p-outcome .hc-flow b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.p-outcome .hc-flow p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 1100px) {
  .p-outcome .hc-aisle__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-outcome .hc-papers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-outcome .hc-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-outcome .hc-flow li::after { display: none; }
  .p-outcome .hc-first { grid-template-columns: minmax(0, 1fr); }
  .p-outcome .ho-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .p-outcome .hc-week, .p-outcome .hc-road { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-outcome .hc-road::before { display: none; }
  .p-outcome .hc-after, .p-outcome .hc-claim, .p-outcome .hc-cash { grid-template-columns: minmax(0, 1fr); }
  .p-outcome .hc-claim__head { position: static; }
  .p-outcome .hc-cash { padding: var(--space-8) var(--space-6); gap: var(--space-8); }
  .p-outcome .hc-names { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .p-outcome .hc-names__join { display: none; }
  /* the year: a list of months, the four moments written under it */
  .p-outcome .hc-year { padding-top: 0; gap: 4px; }
  .p-outcome .hc-year__bar { height: calc(3px + var(--v) * 3px); }
  .p-outcome .hc-year__m b, .p-outcome .hc-year__v { font-size: 10px; }
  .p-outcome .hc-year__note, .p-outcome .hc-year__flag { position: static; transform: none; width: auto; }
  .p-outcome .hc-year { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .p-outcome .hc-year__note, .p-outcome .hc-year__flag { display: none; }
  .p-outcome .hc-year-notes { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
@media (max-width: 640px) {
  .p-outcome .hc-aisle { padding: var(--space-4); }
  .p-outcome .hc-aisle__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-outcome .hc-week, .p-outcome .hc-road, .p-outcome .hc-papers, .p-outcome .hc-after .hc-papers, .p-outcome .hc-flow, .p-outcome .ho-cards { grid-template-columns: minmax(0, 1fr); }
  .p-outcome .hc-sheet { min-height: 0; transform: none !important; }
  .p-outcome .hc-team { padding: var(--space-4); }
  .p-outcome .hc-team ol { grid-template-columns: 24px 88px minmax(0, 1fr) minmax(40px, max-content); column-gap: 8px; }
  .p-outcome .hc-team li { font-size: 14px; }
}

/* ---------- Trade pages: each trade's own picture ---------- */
.p-trade .ht-story + .ht-clock, .p-trade .ht-story + .ht-matrix, .p-trade .ht-story + .ht-ripe, .p-trade .ht-story + .ht-lab { margin-top: var(--space-16); }

/* Seafood · the clock, day 0 to day 8 */
.p-trade .ht-clock { position: relative; margin: 0; padding: 40px 0 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
.p-trade .ht-clock::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--ok) 0%, #c9b458 55%, var(--warn) 78%, var(--carmine) 100%); opacity: .85; }
.p-trade .ht-clock li { position: relative; display: grid; align-content: start; gap: 6px; }
.p-trade .ht-clock li::before { content: ""; position: absolute; left: 0; top: -36px; width: 2px; height: 20px; background: var(--ink); }
.p-trade .ht-clock time { font: 500 13px/1 var(--font-mono); color: var(--carmine); }
.p-trade .ht-clock b { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.p-trade .ht-clock span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.p-trade .ht-clock li:last-child b { color: var(--carmine); }

/* Dairy · one pallet, the papers for each destination */
.p-trade .ht-matrix { padding: var(--space-8); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); overflow-x: auto; }
.p-trade .ht-matrix__k { margin-bottom: var(--space-6); font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p-trade .ht-matrix ol { margin: 0; padding: 0; list-style: none; display: grid; min-width: 760px; }
.p-trade .ht-matrix li { display: grid; grid-template-columns: 170px repeat(7, minmax(0, 1fr)) 48px; gap: 8px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.p-trade .ht-matrix__h { border-top: 0 !important; align-items: end !important; }
.p-trade .ht-matrix__h span { font-size: 13px; line-height: 1.25; color: var(--muted); text-align: center; }
.p-trade .ht-matrix__to { display: grid; gap: 2px; }
.p-trade .ht-matrix__to b { font-size: 16px; font-weight: 600; color: var(--ink); }
.p-trade .ht-matrix__to small { font-size: 13.5px; color: var(--muted); }
.p-trade .ht-matrix__c { display: grid; place-items: center; height: 34px; border-radius: 8px; background: var(--surface-sunk); color: var(--line-strong); font-size: 18px; }
.p-trade .ht-matrix__c.is-on { background: var(--ok-soft); color: var(--ok); }
.p-trade .ht-matrix__c svg { width: 16px; height: 16px; }
.p-trade .ht-matrix__n { font: 600 22px/1 var(--font-mono); text-align: right; color: var(--ink); }

/* Fruit & veg · ripeness on the way */
.p-trade .ht-ripe__k { margin-bottom: var(--space-6); font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p-trade .ht-ripe ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
.p-trade .ht-ripe li { display: grid; align-content: start; gap: 6px; }
.p-trade .ht-ripe__dot { width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 40%), color-mix(in srgb, #5f8f3a calc(100% - var(--k) * 20%), #c2361f); box-shadow: inset 0 -6px 10px rgba(0,0,0,.12); }
.p-trade .ht-ripe li:last-child .ht-ripe__dot { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 40%), #7a2a17; }
.p-trade .ht-ripe small { font: 500 12px/1 var(--font-mono); color: var(--carmine); }
.p-trade .ht-ripe b { font-size: 18px; font-weight: 600; color: var(--ink); }
.p-trade .ht-ripe span:last-child { font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* Dry goods · the lab against the contract */
.p-trade .ht-lab { padding: var(--space-8); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); }
.p-trade .ht-lab__k { margin-bottom: var(--space-6); font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p-trade .ht-lab ol { margin: 0; padding: 0; list-style: none; display: grid; }
.p-trade .ht-lab li { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 16px; }
.p-trade .ht-lab__h { border-top: 0 !important; font: 500 12px/1 var(--font-mono) !important; color: var(--muted); }
.p-trade .ht-lab__t { font-weight: 500; color: var(--ink); }
.p-trade .ht-lab__max { font-family: var(--font-mono); color: var(--ink-2); }
.p-trade .ht-lab__c { justify-self: start; padding: 4px 10px; border-radius: 8px; font-family: var(--font-mono); }
.p-trade .ht-lab__c.is-ok { background: var(--ok-soft); color: var(--ok); }
.p-trade .ht-lab__c.is-bad { background: var(--carmine-soft); color: var(--carmine); font-weight: 600; outline: 2px solid var(--carmine); }
.p-trade .ht-lab__note { margin-top: var(--space-6); padding: 14px 16px; border-radius: 12px; background: var(--carmine-soft); font-size: 16px; line-height: 1.5; color: var(--ink); }

/* What carries over from meat, and what is new */
.p-trade .ht-carry { margin-top: var(--space-12); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.p-trade .ht-carry > div { padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface-sunk); }
.p-trade .ht-carry > div + div { background: var(--carmine-soft); }
.p-trade .ht-carry__k { margin-bottom: var(--space-4); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--carmine); }
.p-trade .ht-carry ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.p-trade .ht-carry li { position: relative; padding-left: 18px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.p-trade .ht-carry li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); }

@media (max-width: 960px) {
  .p-trade .ht-clock, .p-trade .ht-ripe ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-8); }
  .p-trade .ht-clock::before { display: none; }
  .p-trade .ht-clock li::before { display: none; }
  .p-trade .ht-clock { padding-top: 0; }
  .p-trade .ht-carry { grid-template-columns: minmax(0, 1fr); }
  .p-trade .ht-matrix, .p-trade .ht-lab { padding: var(--space-6) var(--space-4); }
}
@media (max-width: 640px) {
  .p-trade .ht-clock, .p-trade .ht-ripe ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-trade .ht-lab li { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr)); font-size: 14px; }
  .p-trade .ht-lab__max { display: none; }
  .p-trade .ht-lab__h span:nth-child(2) { display: none; }
}