@charset "UTF-8";
/* ==========================================================================
   Logridge, institutional commodity procurement
   Single stylesheet. Mobile-first. No preprocessor, no framework.

   Brand palette is fixed at three values (logo + stationery source of truth):
     #D40101  red      #171A1E  ink      #FFFFFF  white
   Everything else in --ink-* is a desaturated tonal step of the brand ink,
   used for rules, muted copy and section banding. No new hues are introduced.

   Contrast note: red on ink measures 3.16:1, which fails AA for body text.
   Red is therefore a graphic accent on dark surfaces only (rules, marks,
   active indicators) and never carries small text there. On white, red
   measures 5.52:1 and is safe for text.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --red: #d40101;
  --red-deep: #a70101; /* hover only; tonal step of brand red */
  --ink: #171a1e;
  --ink-800: #22262c;
  --ink-700: #2c3138;
  --ink-500: #5a6069; /* 6.34:1 on white, AA for body */
  --ink-300: #c9cdd2;
  --ink-200: #dde0e3;
  --ink-100: #ebedef;
  --ink-050: #f6f7f8;
  --white: #fff;

  /* --white and --ink each carried two jobs: a page surface and a literal
     colour for text sitting on dark bands. Dark mode has to flip the first
     and leave the second alone, so they are split here. --surface is the page;
     --ink-solid is the deliberately dark band that stays dark in both schemes. */
  --surface: #fff;
  --ink-solid: #171a1e;

  --font-sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  /* Kept as a variable so every label rule stays a one-line change, but it now
     resolves to the text face. Grade codes rely on tabular figures rather than
     a monospace face to stay in column. */
  --font-mono: var(--font-sans);

  /* Fluid type, clamp() across 375px → 1440px */
  --fs-display: clamp(2.5rem, 1.35rem + 4.8vw, 5.5rem);
  --fs-h1: clamp(2.1rem, 1.45rem + 2.9vw, 3.75rem);
  --fs-h2: clamp(1.7rem, 1.25rem + 1.9vw, 2.75rem);
  --fs-h3: clamp(1.125rem, 1.03rem + 0.42vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.38vw, 1.25rem);
  --fs-body: clamp(1rem, 0.975rem + 0.11vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --lh-tight: 1.04;
  --lh-head: 1.18;
  --lh-body: 1.65;

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 5rem;
  --s-9: 8rem;

  --shell: 1280px;
  --gutter: 1.25rem;
  --radius: 2px;
  --rule: 1px solid var(--ink-200);
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --speed: 200ms;
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; }
}
@media (min-width: 1024px) {
  :root { --gutter: 2.5rem; }
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Overflow is clipped by the individual bleed sections (.hero) rather than on
   body: `overflow-x: hidden` here promotes body to a scroll container, which
   detaches the sticky header and drops paint on scroll in Chromium. */
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* `height: auto` must accompany `max-width: 100%`. Without it an image with
   width/height attributes keeps the attribute height while the width shrinks,
   which distorts the box. Components needing a fixed height override this. */
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 1px;
}
.dark :focus-visible { outline-color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Utilities ---------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink-solid);
  color: var(--white);
  padding: var(--s-3) var(--s-5);
  font-weight: 600;
}
.skip:focus { left: 0; }
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Section banding */
.band { padding-block: var(--s-8); }
@media (min-width: 768px) { .band { padding-block: var(--s-9); } }
.band--tight { padding-block: var(--s-7); }
.band--alt { background: var(--ink-050); }
.band--ink { background: var(--ink-solid); color: var(--white); }
.band--ink p { color: rgba(255, 255, 255, 0.78); }

/* --- Typography --------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
/* The red ridge, echoing the stroke that forms the L in the wordmark.
   This is the site's one repeated graphic device. */
.eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--red);
  flex: none;
}
.dark .eyebrow, .band--ink .eyebrow { color: rgba(255, 255, 255, 0.72); }

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-head);
  font-weight: 600;
  letter-spacing: -0.022em;
}
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 600;
  /* Large sizes need more negative tracking than small ones to look evenly
     spaced; this is set for the top of the clamp. */
  letter-spacing: -0.038em;
  text-wrap: balance;
}
h2, .h2, .post__title { text-wrap: balance; }
h2, .h2 {
  font-size: var(--fs-h2);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.025em;
}
h3, .h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.008em;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-500);
}
.dark .lead, .band--ink .lead { color: rgba(255, 255, 255, 0.8); }
.measure { max-width: 68ch; }
.measure-tight { max-width: 56ch; }
.muted { color: var(--ink-500); }
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums;
}

.prose p + p { margin-top: var(--s-4); }
.prose p { color: var(--ink-500); }
.prose strong { color: var(--ink); font-weight: 600; }

/* Section header block */
.sec-head { margin-bottom: var(--s-7); max-width: 46rem; }
.sec-head .lead { margin-top: var(--s-4); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: background-color var(--speed) var(--ease),
    color var(--speed) var(--ease), border-color var(--speed) var(--ease);
  text-align: center;
}
.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-deep); }
.btn--ghost { border-color: var(--ink-300); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.dark .btn--ghost, .band--ink .btn--ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
}
.dark .btn--ghost:hover, .band--ink .btn--ghost:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.btn-row .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .btn-row .btn { flex: 0 0 auto; } }

/* Inline text link with arrow */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--red);
  min-height: 44px;
  transition: gap var(--speed) var(--ease);
}
.tlink:hover { gap: 0.7rem; text-decoration: underline; text-underline-offset: 3px; }
.dark .tlink, .band--ink .tlink { color: var(--white); }

/* --- Header ------------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: var(--rule);
}
.hdr__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 68px;
}
@media (min-width: 1024px) { .hdr__bar { height: 80px; } }
.hdr__logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* tap target, the mark itself is only 26px tall */
}
.hdr__logo svg, .hdr__logo img { height: 26px; width: auto; }
@media (min-width: 1024px) { .hdr__logo svg, .hdr__logo img { height: 30px; } }

.hdr__nav { display: none; }
@media (min-width: 1024px) {
  .hdr__nav { display: block; flex: 1 1 auto; }
  .hdr__list { display: flex; justify-content: center; gap: 0.35rem; }
}
.hdr__item { position: relative; }
.hdr__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius);
  min-height: 44px;
  white-space: nowrap;
  transition: color var(--speed) var(--ease);
}
.hdr__link:hover { color: var(--red); }
.hdr__link[aria-current="page"],
.hdr__item--active > .hdr__link { color: var(--red); }
.hdr__link[aria-current="page"]::after,
.hdr__item--active > .hdr__link::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: -1px;
  height: 2px;
  background: var(--red);
}
.hdr__caret { width: 9px; height: 9px; flex: none; transition: transform var(--speed) var(--ease); }
.hdr__item:hover .hdr__caret, .hdr__item:focus-within .hdr__caret { transform: rotate(180deg); }
.hdr__cta { flex: none; display: none; }
@media (min-width: 768px) { .hdr__cta { display: inline-flex; } }

/* Mega menu */
.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 460px;
  background: var(--surface);
  border: var(--rule);
  border-top: 3px solid var(--red);
  box-shadow: 0 18px 40px -18px rgba(23, 26, 30, 0.35);
  padding: var(--s-5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease),
    visibility var(--speed);
}
.hdr__item:hover > .mega,
.hdr__item:focus-within > .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega__grid { display: grid; gap: var(--s-2); }
.mega__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem var(--s-3);
  padding: var(--s-3);
  border-radius: var(--radius);
  transition: background-color var(--speed) var(--ease);
}
.mega__link:hover { background: var(--ink-050); }
.mega__link .ico { grid-row: span 2; width: 24px; height: 24px; align-self: start; margin-top: 3px; }
.mega__name { font-weight: 600; font-size: 0.95rem; }
.mega__desc { font-size: var(--fs-small); color: var(--ink-500); line-height: 1.45; }
.mega__foot {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: var(--rule);
}

/* Mobile toggle + drawer */
.hdr__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-right: -0.5rem;
  flex: none;
}
@media (min-width: 1024px) { .hdr__toggle { display: none; } }
.hdr__toggle span {
  position: relative;
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  transition: background-color var(--speed) var(--ease);
}
.hdr__toggle span::before, .hdr__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  background: var(--ink);
  transition: transform var(--speed) var(--ease);
}
.hdr__toggle span::before { top: -7px; }
.hdr__toggle span::after { top: 7px; }
.hdr__toggle[aria-expanded="true"] span { background: transparent; }
.hdr__toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.hdr__toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  display: none;
  border-top: var(--rule);
  /* With JS unavailable the drawer stays expanded rather than trapping the
     navigation behind a button that cannot open. */
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--s-6);
}
.drawer[data-open="true"] { display: block; }
.no-js .drawer { display: block; }
.no-js .hdr__toggle { display: none; }
@media (min-width: 1024px) { .drawer, .no-js .drawer { display: none !important; } }
.drawer__row { border-bottom: var(--rule); }
.drawer__link, .drawer__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  min-height: 52px;
  font-size: 1.0625rem;
  font-weight: 500;
  text-align: left;
}
.drawer__btn svg { width: 12px; height: 12px; flex: none; transition: transform var(--speed) var(--ease); }
.drawer__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__panel { display: none; padding-bottom: var(--s-3); }
.drawer__panel[data-open="true"] { display: block; }
.drawer__sub {
  display: block;
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  min-height: 44px;
  font-size: var(--fs-small);
  color: var(--ink-500);
  border-left: 2px solid var(--ink-200);
}
.drawer__sub:hover { color: var(--red); border-left-color: var(--red); }
.drawer .btn { width: 100%; margin-top: var(--s-5); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding-block: var(--s-8) var(--s-8);
}
@media (min-width: 768px) { .hero { padding-block: var(--s-9); } }
.hero__inner { position: relative; z-index: 2; max-width: 60rem; }

/* --- Photographic hero -------------------------------------------------- */
/* Mobile heroes are already tall from stacked buttons and a wrapped eyebrow,
   so the vertical padding is tightened rather than inherited from .hero. */
.hero--photo { padding-block: var(--s-7) var(--s-7); }
@media (min-width: 768px) {
  .hero--photo {
    padding-block: 7rem 6rem;
    min-height: 34rem; /* gives the photograph room to register */
    display: flex;
    align-items: center;
  }
  .hero--photo > .shell { width: 100%; }
}
.hero--photo > .shell { position: relative; z-index: 2; }

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default only. Each backdrop overrides this inline with a focal point
     chosen for that photograph. */
  object-position: 50% 50%;
  z-index: 0;
}

/* Two stacked gradients. The horizontal alpha comes from --scrim-a / --scrim-b,
   set inline per photograph from a measurement of that image's brightness in
   the text zone (see components.scrim_vars). The vertical layer stays light
   through the middle so it does not fight the calculation. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(23, 26, 30, var(--scrim-a, 0.9)) 0%,
      rgba(23, 26, 30, var(--scrim-a, 0.9)) 58%,
      rgba(23, 26, 30, var(--scrim-b, 0.45)) 100%),
    linear-gradient(180deg,
      rgba(23, 26, 30, 0.32) 0%,
      rgba(23, 26, 30, 0.1) 45%,
      rgba(23, 26, 30, 0.55) 100%);
}
/* On narrow screens the text spans the full width, so the horizontal falloff
   is replaced by a flat wash at the stronger of the two values. */
@media (max-width: 767px) {
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(23, 26, 30, var(--scrim-a, 0.9)) 0%,
        rgba(23, 26, 30, var(--scrim-a, 0.9)) 60%,
        rgba(23, 26, 30, 0.95) 100%);
  }
}
.hero--photo .hero__ridge { display: none; }
.hero .display { margin-bottom: var(--s-5); }
.hero .lead { max-width: 46rem; }
/* Ridge motif: the logo's red stroke, enlarged as a watermark.
   Decorative only; hidden from assistive tech. */
.hero__ridge {
  position: absolute;
  right: -6%;
  bottom: -22%;
  width: min(58%, 620px);
  color: var(--red);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767px) { .hero__ridge { right: -22%; bottom: -12%; width: 78%; opacity: 0.11; } }

/* --- Full-bleed image band ----------------------------------------------
   The one place photography leads instead of supporting. Runs edge to edge
   regardless of the shell width. */
.bleed {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--white);
  padding-block: var(--s-8);
  min-height: 26rem;
}
@media (min-width: 768px) {
  .bleed { min-height: 34rem; padding-block: var(--s-9); }
}
.bleed__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bleed__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(23, 26, 30, var(--scrim-a, 0.9)) 0%,
      rgba(23, 26, 30, var(--scrim-a, 0.9)) 56%,
      rgba(23, 26, 30, var(--scrim-b, 0.45)) 100%),
    linear-gradient(180deg,
      rgba(23, 26, 30, 0.28) 0%,
      rgba(23, 26, 30, 0.1) 50%,
      rgba(23, 26, 30, 0.5) 100%);
}
@media (max-width: 767px) {
  .bleed__scrim {
    background: linear-gradient(180deg,
      rgba(23, 26, 30, var(--scrim-a, 0.9)) 0%,
      rgba(23, 26, 30, var(--scrim-a, 0.9)) 100%);
  }
}
.bleed__body { position: relative; z-index: 2; width: 100%; }
.bleed .eyebrow { color: rgba(255, 255, 255, 0.72); }
.bleed .lead { color: rgba(255, 255, 255, 0.82); }

/* --- Scroll cue ---------------------------------------------------------- */
.cue {
  position: absolute;
  left: var(--gutter);
  bottom: var(--s-5);
  z-index: 2;
  display: none;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
@media (min-width: 1024px) { .cue { display: flex; } }
.cue__line {
  display: block;
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
}
.cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: translateY(-100%);
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .cue__line::after { animation: none; transform: translateY(0); opacity: 0.6; }
}

/* --- Stats -------------------------------------------------------------- */
.stats { background: var(--ink-800); color: var(--white); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border-block: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 900px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--ink-800); padding: var(--s-5) var(--s-4); }
@media (min-width: 768px) { .stat { padding: var(--s-6) var(--s-5); } }
.stat__num {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.45;
}

/* --- Cards -------------------------------------------------------------- */
.grid { display: grid; gap: var(--s-4); }
/* Ordered smallest breakpoint first. A later rule at a lower min-width would
   override the wider one at every size above it. */
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color 260ms var(--ease), transform 260ms var(--ease),
    box-shadow 260ms var(--ease);
}
@media (min-width: 768px) { .card { padding: var(--s-6); } }
.card__icon { width: 32px; height: 32px; }
.card p { color: var(--ink-500); font-size: var(--fs-small); line-height: 1.6; }
.card--link:hover {
  border-color: var(--ink-300);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(23, 26, 30, 0.45);
}

/* Photo-led card: image bleeds to the border, content sits in its own pad. */
.card--photo { padding: 0; overflow: hidden; gap: 0; }
.card__shot {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--ink-050);
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  flex: 1;
}
@media (min-width: 768px) { .card__body { padding: var(--s-6); } }
.card__text { color: var(--ink-500); font-size: var(--fs-small); line-height: 1.6; }
.card--photo .tlink { margin-top: auto; padding-top: var(--s-2); }
.card--link { text-decoration: none; }
.card .tlink { margin-top: auto; padding-top: var(--s-2); }
.band--alt .card { background: var(--surface); }

/* Numbered process step: order is real information here, so it is shown. */
.step {
  border-top: 3px solid var(--red);
  padding-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.step__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--red);
  text-transform: uppercase;
}
.step p { color: var(--ink-500); font-size: var(--fs-small); line-height: 1.6; }

/* Feature list with rule separators */
.feat {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 700px) { .feat { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
@media (min-width: 1024px) { .feat { grid-template-columns: repeat(3, 1fr); } }
.feat__item { border-top: var(--rule); padding-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.feat__item .ico { width: 30px; height: 30px; }
.feat__item p { color: var(--ink-500); font-size: var(--fs-small); line-height: 1.6; }

/* Checklist */
.checks { display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .checks { grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-6); } }
.checks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  padding-block: var(--s-2);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.checks li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: 0.55em;
  background: var(--red);
  flex: none;
}

/* --- Compliance band ---------------------------------------------------- */
.frameworks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.chip {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  /* 0.42 alpha puts the border at 3.2:1 against --ink, clearing the 3:1
     WCAG 2.2 (1.4.11) floor for non-text boundaries. */
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--radius);
  color: var(--white);
}
.band--alt .chip, .chip--light {
  border-color: var(--ink-500);
  color: var(--ink);
}

/* --- Commodity tiles -----------------------------------------------------
   A modular block of goods rather than one scene-setting photograph. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--ink-200);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  overflow: hidden;
}
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-050);
  aspect-ratio: 4 / 3;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.tile:hover img { transform: scale(1.05); }
.tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-5) var(--s-4) var(--s-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  /* 0.88 at the baseline holds white at well over 4.5:1 whatever the
     photograph is doing underneath. */
  background: linear-gradient(180deg,
    rgba(23, 26, 30, 0) 0%,
    rgba(23, 26, 30, 0.72) 45%,
    rgba(23, 26, 30, 0.9) 100%);
}
.tile:hover .tile__label { color: var(--white); }

/* --- Split (image slot) ------------------------------------------------- */
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
/* Photography. width/height on the element reserve the box, so the image
   loading causes no shift. */
.shot {
  width: 100%;
  height: auto;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--ink-050);
}

.slot {
  position: relative;
  background: var(--ink-050);
  border: var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.slot::after {
  content: attr(data-slot);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: var(--s-4);
  text-align: center;
}
.slot--ink { background: var(--ink); border-color: var(--ink); }
.slot--ink::after { color: rgba(255, 255, 255, 0.55); }

/* --- Anchor jump nav ---------------------------------------------------- */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  border-top: var(--rule);
  border-bottom: var(--rule);
  padding-block: var(--s-3);
}
.jump a {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.6rem 0.85rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  color: var(--ink-500);
}
.jump a:hover { background: var(--ink-050); color: var(--red); }

/* --- Breadcrumbs -------------------------------------------------------- */
.crumbs {
  font-size: var(--fs-small);
  color: var(--ink-500);
  padding-block: var(--s-2);
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.crumbs li { display: flex; gap: 0.4rem; align-items: center; }
/* Links sized for touch; the row padding above is reduced to compensate so
   the visual height is unchanged. */
.crumbs a, .crumbs [aria-current] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.crumbs li + li::before { content: "/"; color: var(--ink-300); }
.crumbs a:hover { color: var(--red); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.dark .crumbs, .hero .crumbs { color: rgba(255, 255, 255, 0.62); }
.hero .crumbs [aria-current] { color: var(--white); }
.hero .crumbs li + li::before { color: rgba(255, 255, 255, 0.35); }

/* --- Footer ------------------------------------------------------------- */
.ftr { background: var(--ink-solid); color: var(--white); padding-block: var(--s-8) var(--s-6); }
.ftr__grid { display: grid; gap: var(--s-7); }
@media (min-width: 640px) { .ftr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ftr__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-6); } }
.ftr__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: var(--s-3);
}
.ftr__logo svg, .ftr__logo img { height: 28px; width: auto; }
.ftr__tag { color: rgba(255, 255, 255, 0.7); font-size: var(--fs-small); max-width: 34ch; line-height: 1.6; }
.ftr__meta {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
  font-style: normal; /* <address> defaults to italic */
}
.ftr__meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ftr__meta a:hover { color: var(--white); text-decoration: underline; }
.ftr__h {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--s-4);
}
.ftr__list li a {
  display: flex;
  align-items: center;
  padding-block: 0.35rem;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.82);
  min-height: 44px;
}
.ftr__list li a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.ftr__base {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
}

/* --- Forms -------------------------------------------------------------- */
.form { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .form { grid-template-columns: repeat(2, 1fr); } }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--speed) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-500); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); }
.field .hint { font-size: 0.8125rem; color: var(--ink-500); }
.form .btn { grid-column: 1 / -1; justify-self: start; }

/* --- FAQ accordion ------------------------------------------------------
   Built on native <details>/<summary>: keyboard-operable and fully readable
   with JavaScript disabled. */
.faq { border-top: var(--rule); }
.faq__item { border-bottom: var(--rule); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  min-height: 56px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: var(--red); }
.faq__q svg {
  width: 14px; height: 14px;
  flex: none;
  margin-top: 0.4rem;
  color: var(--red);
  transition: transform var(--speed) var(--ease);
}
.faq__item[open] > .faq__q svg { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--s-5); }
.faq__a p { color: var(--ink-500); max-width: 76ch; }
.faq__a p + p { margin-top: var(--s-4); }
.faq__search { position: relative; margin-bottom: var(--s-6); }
.faq__search input {
  font: inherit;
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 52px;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius);
}
.faq__search input:focus { border-color: var(--red); }
.faq__group { margin-bottom: var(--s-8); }
.faq__group[hidden] { display: none; }
.faq__item[hidden] { display: none; }
.faq__empty { color: var(--ink-500); padding: var(--s-5) 0; }

/* --- Blog ---------------------------------------------------------------- */
.posts { display: grid; gap: var(--s-7); }
/* Base first: a later equal-specificity rule would otherwise beat the
   .post--lead override inside the media query below. */
.post { display: flex; flex-direction: column; gap: var(--s-4); }
@media (min-width: 900px) {
  .posts { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-6); }
  /* The newest article runs full width and reads as the lead item. */
  .post--lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--s-7);
    align-items: center;
  }
}
.post__shot { display: block; overflow: hidden; border-radius: var(--radius); }
.post__shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink-050);
  transition: transform 400ms var(--ease);
}
.post__shot:hover img { transform: scale(1.03); }
.post__body { display: flex; flex-direction: column; gap: var(--s-3); }
.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.post__title {
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.post--lead .post__title { font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.6rem); }
.post__title a:hover { color: var(--red); }
.post__stand { color: var(--ink-500); font-size: var(--fs-body); line-height: 1.6; }
.post__lede { margin-bottom: var(--s-6); padding-bottom: var(--s-5); border-bottom: var(--rule); }

/* Article body: a narrower measure than the rest of the site, because this is
   the only place people read continuously. */
.prose--article { max-width: 64ch; font-size: var(--fs-lead); line-height: 1.72; }
.prose--article h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  color: var(--ink);
}
.prose--article p { margin-bottom: var(--s-4); }
.prose--article ul { margin: var(--s-4) 0; display: grid; gap: var(--s-3); }
.prose--article li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  color: var(--ink-500);
}
.prose--article li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: 0.62em;
  background: var(--red);
}
.prose--article strong { color: var(--ink); font-weight: 600; }

/* --- Commodity index ---------------------------------------------------- */
.cat { margin-bottom: var(--s-7); }
.cat__h {
  font-size: var(--fs-h3);
  font-weight: 600;
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--s-4);
}
.clist { display: grid; gap: 0; }
@media (min-width: 640px) { .clist { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-6); } }
@media (min-width: 1024px) { .clist { grid-template-columns: repeat(3, 1fr); } }
.clist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.7rem 0;
  min-height: 44px;
  font-size: var(--fs-small);
  border-bottom: var(--rule);
  transition: color var(--speed) var(--ease), padding-left var(--speed) var(--ease);
}
.clist a:hover { color: var(--red); padding-left: 0.35rem; }
.clist .n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  flex: none;
}

/* Spec table for commodity pages */
.spec { margin-top: var(--s-4); font-size: var(--fs-small); }
.spec th, .spec td {
  text-align: left;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: var(--rule);
  vertical-align: top;
}
.spec th {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 500;
  white-space: nowrap;
  width: 1%;
  padding-right: var(--s-6);
}
.spec td { color: var(--ink-500); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tags span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.6rem;
  border: var(--rule);
  border-radius: var(--radius);
  color: var(--ink-500);
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .hdr, .ftr, .hero__ridge, .btn-row { display: none; }
  body { color: #000; font-size: 11pt; }
  .band { padding-block: 1rem; }
}


/* --- Scroll reveal -------------------------------------------------------
   Gated behind .js so content is never hidden when scripting is unavailable,
   and disabled outright when the visitor prefers reduced motion. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Data table ----------------------------------------------------------
   Used by the image credits page. The scroll container is what keeps a wide
   table from pushing the whole page sideways on a narrow screen: the table
   keeps its natural width and the wrapper, not the body, does the scrolling.
   -webkit-overflow-scrolling gives it momentum on iOS. */
.tscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 2rem;
}
.tbl {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  text-align: left;
  font-size: var(--fs-small);
}
.tbl th, .tbl td {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: var(--rule);
  vertical-align: top;
}
.tbl thead th {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom-width: 2px;
  white-space: nowrap;
}
.tbl tbody th {
  font-weight: 600;
  padding-right: 1.5rem;
}
.tbl td:nth-child(3) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
  white-space: nowrap;
}

/* --- Map links -----------------------------------------------------------
   Wayfinding under the sourcing map. The map is a picture, not navigation, so
   the routes into the catalogue have to be real links beneath it. */
.maplinks {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: var(--rule);
}
.maplinks__lead {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.maplinks__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-3);
  list-style: none;
}
.maplinks__list a {
  display: inline-flex;
  align-items: center;
  /* 44px keeps every one of these a legal tap target on a phone, where they
     wrap to two or three rows. */
  min-height: 44px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.maplinks__list a:hover,
.maplinks__list a:focus-visible {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* --- Commodity backdrop grade --------------------------------------------
   One treatment across every commodity hero. The set is assembled from a
   hundred-odd photographers, a handful of client shots and a few generated
   frames; each arrived with its own white balance and contrast, and side by
   side they read as a scrapbook rather than a brand.

   The values are deliberately mild. Anything heavier starts eating the detail
   that makes a grade of material identifiable, which is the one thing these
   photographs exist to show. This unifies how the set looks; it does not
   change what any individual image is, and the generated ones stay declared
   in media/PROVENANCE.tsv and on /image-credits/. */
.hero__bg--com {
  filter: saturate(0.92) contrast(1.06) brightness(0.97);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__bg--com { transition: filter var(--speed) var(--ease); }
}


/* --- Dark scheme ---------------------------------------------------------
   Honours the visitor's system setting. Only the tonal scale flips: --white
   stays literal white and --ink-solid stays the dark band colour, so every
   rule that puts white text on a dark surface is untouched.

   Every value below was checked, not guessed, against the dark surface:
     body text  #e8eaed on #101316  15.5:1
     muted text #a4adb6 on #101316   8.2:1
     control border #5a646e          3.1:1  (1.4.11 floor is 3:1)

   Brand red is the one thing that cannot carry across. #d40101 on #101316 is
   3.4:1, which is fine for a button fill under white text but fails the 4.5:1
   floor for a red text link. Links therefore use a lighter tint of the same
   hue in dark mode only. */
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #101316;
    --ink: #e8eaed;          /* body text, no longer a background */
    --ink-050: #191d22;      /* alternating band */
    --ink-100: #1e2329;
    --ink-200: #333a41;      /* hairline rules */
    --ink-300: #5a646e;      /* control borders */
    --ink-500: #a4adb6;      /* muted text */
    --ink-800: #0a0c0e;      /* stats band, darker than the page */
    --rule: 1px solid var(--ink-200);
    --red-link: #f26060;     /* 5.8:1 on the dark surface */
  }

  /* Ghost buttons invert: the light-mode hover fills with ink, which in dark
     mode would be the text colour and would swallow its own label. */
  .btn--ghost:hover {
    background: var(--ink);
    color: var(--ink-solid);
    border-color: var(--ink);
  }

  /* Red text links step up to the lighter tint. Fills and rules keep the
     brand red, which is what carries the identity. */
  .tlink,
  .prose a,
  .ftr__list li a:hover,
  .maplinks__list a:hover { color: var(--red-link); }
  .maplinks__list a:hover { border-bottom-color: var(--red-link); }

  /* Photographs are mastered for a white page. A small knock-back stops them
     glaring against a dark one. */
  .shot img, .card__shot, .post__shot img { filter: brightness(0.92); }
}