/* =====================================================================================================
   S MARKETING — Market Intelligence · design system
   A premium international commodity research report, brought to life as an interactive experience.
   Premium comes from restraint: full-bleed section grounds in a measured rhythm (charcoal · ivory · navy · stone ·
   deep blue · warm grey · champagne · obsidian), hierarchy from type, 1px rules and whitespace — not boxes, badges,
   gradients or shadows. Champagne is the S Marketing accent (fine rules, small labels, selected states); navy = data
   and logistics; muted teal = positive trade flow; olive = stable / established; burgundy = risk and caution.
   Type: Cormorant Garamond (editorial headlines, key figures) · Manrope (interface and data, tabular figures).
   Colour is token-driven: a dark section re-declares the ink/line tokens, so every component stays legible on it.
   ===================================================================================================== */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Italic-latin.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Italic-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0; }
/* Manrope (variable 200–800, SIL OFL 1.1 — assets/fonts/Manrope-OFL.txt), self-hosted: Google Fonts is unreliable from Iran */
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* palette (owner's brief) */
  --ivory: #F5F1E8; --obsidian: #0B0B0A; --navy: #142433; --gold: #B59A68; --stone: #B8B0A4; --ink: #1A1A18; --white: #FFFFFF;
  --sand: #DED3C3; --sand-2: #EDE6D9; --paper: #FAF7F0;
  /* accents — muted, never saturated (part 25) */
  --teal: #3E6B65; --olive: #5C5C2C; --burgundy: #7A2F37; --champagne-2: #D4BD8C;
  /* derived for legibility (all ≥ 4.5:1 on every light section ground): stone and champagne are too light for text */
  --ink-2: #45413B; --ink-3: #5F5950; --gold-ink: #6F5B33; --steel: #4A5F74; --data: var(--navy);
  --line: rgba(26, 26, 24, .12); --line-2: rgba(26, 26, 24, .24); --rule: var(--ink);
  --line-d: rgba(245, 241, 232, .12); --line-d2: rgba(245, 241, 232, .26);
  --bad: var(--burgundy); --bad-bg: #F1E3DF; --ok: var(--teal);
  --hover-bg: var(--white); --btn-bg: var(--obsidian); --btn-ink: var(--ivory); --btn-hover: var(--navy); --focus: var(--steel);
  /* section rhythm (part 24): full-bleed grounds, one per section family */
  --sec-hero: #131312; --sec-product: var(--ivory); --sec-route: #142433; --sec-market: var(--ivory); --sec-price: #ECE6DB;
  --sec-logistics: #172D44; --sec-risk: #E4DED4; --sec-sources: var(--paper); --sec-ai: #F4ECDD; --sec-final: var(--obsidian);
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: var(--sans); /* codes and figures: Manrope with tabular lining numerals */
  /* type scale (brief): hero 56–80 / 38–48 · section 36–48 / 28–34 · product 42–56 · metric 30–42 · body 16–18 ·
     supporting 13–14 · metadata 11–12 (never smaller) */
  --fs-hero: clamp(2.375rem, 1.25rem + 3.9vw, 4.75rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  --fs-h3: clamp(1.5rem, 1.25rem + .9vw, 2rem);
  --fs-product: clamp(2.625rem, 2rem + 1.6vw, 3.5rem);
  --fs-metric: clamp(1.875rem, 1.45rem + .9vw, 2.625rem);
  --fs-body: clamp(1rem, .95rem + .2vw, 1.125rem);
  --fs-support: .875rem; --fs-support-s: .8125rem; --fs-meta: .75rem; --fs-micro: .6875rem;
  /* spacing (part 32): 80–140 px between sections on desktop, 48–72 px on a phone */
  --sec-pad: clamp(3.25rem, 1.4rem + 6.2vw, 8.25rem);
  --maxw: 1240px; --gut: clamp(20px, 5vw, 64px); --head: 68px; --ease: cubic-bezier(.22, 1, .36, 1);
  /* the pinned chrome: the site header (68 px, 56 px once the page scrolls) and the report's analysis bar under it */
  --hd-now: var(--head); --abar-h: 58px;
  /* flags: one frame everywhere — 4:3, a hairline edge, a hint of radius, a stone ground until the image paints */
  --flag-edge: rgba(26, 26, 24, .16); --flag-ground: linear-gradient(135deg, #ECE6DB, #DDD5C8);
  /* aliases used by components */
  --black: var(--obsidian); --gray: var(--ink-3); --gold-2: #D4BD8C; --blue-2: #9FB0C2;
}
/* dark grounds (hero, header, logistics, final CTA, request, footer): the same tokens, re-declared for light-on-dark */
.hd, .intro, #logistics, #next, .req, .foot, .selbar, .loading, .tip {
  --ink: #F5F1E8; --ink-2: #D7D0C3; --ink-3: #ABA396; --gold-ink: #D4BD8C; --steel: #B3C5D6; --data: #C3D2E0;
  --line: rgba(245, 241, 232, .13); --line-2: rgba(245, 241, 232, .26); --rule: rgba(245, 241, 232, .55);
  --paper: rgba(245, 241, 232, .035); --sand-2: rgba(245, 241, 232, .08); --hover-bg: rgba(245, 241, 232, .06);
  --bad: #E4A79E; --bad-bg: rgba(228, 167, 158, .1); --teal: #93C2B7; --olive: #CAC89B; --ok: #93C2B7;
  --btn-bg: var(--ivory); --btn-ink: var(--obsidian); --btn-hover: var(--gold); --focus: var(--gold-2);
  --flag-edge: rgba(245, 241, 232, .22); --flag-ground: linear-gradient(135deg, #2A2925, #1E1D1A);
  color: var(--ink); color-scheme: dark;
}
/* muted warm grey and soft stone grounds: text tones deepened a step to keep 4.5:1 */
#terms, #risk { --ink-3: #57514A; --gold-ink: #63512D; --steel: #3F5367; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + var(--abar-h) + 14px); background: var(--obsidian); }
/* Manrope's standard ligatures turn "(c)" into © and "->" into an arrow: they are off for the interface face.
   font-feature-settings is inherited and, unlike font-variant, is not reset by the `font` shorthand, so this holds
   everywhere; figures that set their own features repeat "liga" 0. Cormorant keeps its fi/fl ligatures (below). */
body { margin: 0; min-height: 100vh; background: var(--ivory); color: var(--ink); font: 400 var(--fs-body)/1.62 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; font-feature-settings: "liga" 0; font-kerning: normal; }
h1, h2, h3, .intro__t, .intro__sub, .rh__t, .rh__lane, .rail__t, .sec__t, .mi__t, .sub__t, .ks__t, .callout__t, .ai__t, .lede, .chapters__t, .chapters__g b, .req__t, .doc__t, .pc__n, .mkt__n, .st__txt b, .sig__n { font-feature-settings: "liga" 1; }
h1, h2, h3, .rail__t, .chapters__t, .req__t, .doc__t, .pc__n, .mkt__n { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
b, strong { font-weight: 650; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
table.sr-only { display: block; } /* overflow does not clip a table box: a hidden data table would otherwise widen the page */
.skip { position: fixed; left: -9999px; top: 10px; z-index: 900; background: var(--obsidian); color: var(--ivory); padding: .6rem 1rem; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: rgba(181, 154, 104, .32); }

/* ---------- type primitives ---------- */
.micro, .kicker { display: inline-flex; align-items: center; gap: .7rem; font: 700 var(--fs-micro)/1.35 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.kicker::before { content: ""; width: 24px; height: 1px; background: var(--gold); flex: none; }
em { font-style: italic; }
.sec__t, .title { font: 500 var(--fs-h2)/1.06 var(--serif); letter-spacing: -.012em; margin: 0; color: var(--ink); text-wrap: balance; }
.sec__t em, .title em { color: var(--gold-ink); font-weight: 400; }
.lead { font-size: var(--fs-body); color: var(--ink-2); max-width: 64ch; margin: 1rem 0 0; text-wrap: pretty; }
.lede { font: 400 clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.5 var(--serif); color: var(--ink); max-width: 60ch; margin: 2.4rem 0 0; text-wrap: pretty; }
.fine { font-size: var(--fs-support-s); line-height: 1.65; color: var(--ink-3); max-width: 84ch; margin: 1.2rem 0 0; }
.empty { font: 400 italic clamp(1.2rem, 1.1rem + .5vw, 1.45rem)/1.5 var(--serif); color: var(--ink-2); max-width: 58ch; margin: 0; }
.note { font-size: var(--fs-support); color: var(--ink-2); border-left: 1px solid var(--steel); padding: .1rem 0 .1rem 1rem; margin: 1.6rem 0 0; max-width: 84ch; }
/* the line under a chart or block of figures: Source · Period · Updated */
.srcline { display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; align-items: baseline; margin: 1.4rem 0 0; padding-top: .85rem; border-top: 1px solid var(--line); font-size: var(--fs-meta); line-height: 1.55; color: var(--ink-3); }
.srcline b { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-right: .5em; }
/* CITATIONS are set apart from every figure (QA 11 #30): always raised — also where the line is a flex row, in which
   vertical-align does not apply — and bracketed, the numbers spaced: "IRIB News [48, 148, 149]", never "48,148,149" read as
   one large number beside a figure. */
.cite { font: 600 var(--fs-micro)/1 var(--sans); font-feature-settings: "liga" 0, "tnum" 1, "lnum" 1; vertical-align: super; margin-left: .2em; white-space: nowrap; align-self: flex-start; }
sup.cite::before { content: "["; color: var(--ink-3); opacity: .8; margin-right: .04em; }
sup.cite::after { content: "]"; color: var(--ink-3); opacity: .8; margin-left: .04em; }
/* each number is its own box, set tight to its digits ("[1]", "[11, 66, 69]"); the click target reaches a little beyond it
   and far above and below, never into the neighbouring number — what is under the pointer is the number drawn there. */
.cite a { position: relative; display: inline-block; padding: 0 .12em; text-align: center; color: var(--steel); text-decoration: none; border-radius: 2px; transition: color .2s, background-color .2s; }
.cite a::after { content: ""; position: absolute; left: -.14em; right: -.14em; top: -.6em; bottom: -.6em; }
/* 1, 4–22: separators drawn by CSS in the gap before the later number's box (a comma and a space, an en dash in a range) */
.cite a + a { margin-left: .5em; }
.cite a + a::before { content: ","; position: absolute; left: -.46em; opacity: .7; pointer-events: none; }
.cite a.cite__to { margin-left: .42em; }
.cite a.cite__to::before { content: "–"; left: -.46em; }
.cite a:hover, .cite a:focus-visible { color: var(--ink); background: rgba(181, 154, 104, .16); }
.cite a:focus-visible { outline-offset: 1px; }
/* touch (QA 11 #52): every number is a box at least 24 px wide, its target 24 px or more tall; the boxes are spaced so two
   targets never touch */
@media (pointer: coarse) { .cite a { min-width: 24px; } .cite a::after { left: 0; right: 0; top: -7px; bottom: -7px; } }
/* codes and figures: Manrope tabular lining numerals (features repeat "liga" 0: a feature list replaces the inherited one) */
.srcs td.n, .srcs td a, .bars__v, .bars__x, .ch .ax, .an__list b, .an__list i, .an__list li::before, .st__code, .st__id i, .st__alts button b, .pt__hs, .mc__p, .prod__sw button, .prod__ill span, .fresh em, .foot__c, .kv__s, .fig5__s, .srcline, .rh__id dd, .abar__sum span, .srci__n, .srci__p, .srci__u, .mkt__pp code, .pc__m { font-feature-settings: "liga" 0, "tnum" 1, "lnum" 1; }
.tag { display: inline-flex; align-items: center; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: .32rem .5rem .3rem; border: 1px solid var(--line-2); color: var(--ink-3); white-space: nowrap; vertical-align: middle; max-width: 100%; }
@media (max-width: 480px) { .tag { white-space: normal; line-height: 1.25; letter-spacing: .08em; } }
.tag--official, .tag--standard, .tag--verified_industry, .tag--company_specification { border-color: color-mix(in srgb, var(--data) 45%, transparent); color: var(--data); }
.tag--calculated { border-color: color-mix(in srgb, var(--steel) 55%, transparent); color: var(--steel); }
.tag--market_reference, .tag--quotation, .tag--benchmark, .tag--representative { border-color: var(--gold); color: var(--gold-ink); }
.tag--indicative { border-color: var(--sand); color: var(--ink-3); }
.tag--analytical { border-style: dashed; color: var(--ink-3); }
.tag--live { border-color: var(--ok); color: var(--ok); }
.tag--demo { background: var(--bad); border-color: var(--bad); color: #fff; }
/* beside a key figure the data type is a quiet label, not a box (part 26) */
.fig5__t .tag, .kv__t .tag, .facts__t .tag, .an__m .tag, .sug__conf .tag { border: 0; padding: 0; gap: .5rem; letter-spacing: .14em; white-space: normal; line-height: 1.35; }
.fig5__t .tag::before, .kv__t .tag::before, .facts__t .tag::before, .an__m .tag::before, .sug__conf .tag::before, .comp .tag::before { content: ""; width: 10px; height: 1px; background: currentColor; flex: none; }
/* the label and its citation read as one line of type, wrapping together (never a citation stranded on its own line) */
.fig5__t .tag, .facts__t .tag, .kv__t .tag { display: inline; }
.fig5__t .tag::before, .facts__t .tag::before, .kv__t .tag::before { display: inline-block; vertical-align: .32em; margin-right: .5rem; }
.comp .tag, .orefs .tag { border: 0; padding: 0; gap: .5rem; letter-spacing: .14em; margin-top: .15rem; }
.orefs .tag::before { content: ""; width: 10px; height: 1px; background: currentColor; flex: none; }
.more { margin-top: 1.4rem; }
.more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .6rem; min-height: 40px; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); padding: .5rem 0; border-bottom: 1px solid var(--gold); }
.more summary:hover { color: var(--ink); }
.more summary::-webkit-details-marker { display: none; } .more summary::after { content: "+"; color: var(--gold-ink); font-size: .9rem; } .more[open] summary::after { content: "−"; }
.more > ul, .more > table { margin-top: 1rem; }
[data-tone="up"] { color: var(--teal); } [data-tone="down"] { color: var(--bad); } [data-tone="stable"] { color: var(--olive); }

/* KEY INSIGHT CALLOUT (part 27) — an editorial pull-quote: champagne rule, small kicker, serif statement */
.callout { margin: clamp(2rem, 4vw, 3rem) 0 0; padding: .1rem 0 .15rem clamp(1.15rem, 2.4vw, 1.9rem); border-left: 2px solid var(--gold); max-width: 64ch; }
.callout__k { display: flex; align-items: center; gap: .7rem; margin: 0; font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.callout__t { margin: .8rem 0 0; font: 400 clamp(1.2rem, 1.06rem + .55vw, 1.5rem)/1.48 var(--serif); color: var(--ink); text-wrap: pretty; }
.callout__t .cite { font-size: .6875rem; }
.callout__f { margin: 1rem 0 0; font-size: var(--fs-meta); color: var(--ink-3); }

/* ---------- buttons ---------- */
/* a label that wraps (a long "Analyze Steel Billet in Türkiye" on a phone) keeps its line spacing and stays centred */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 48px; padding: .9rem 1.55rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 700 var(--fs-micro)/1.45 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-align: center; text-wrap: balance; text-decoration: none; cursor: pointer; transition: background .35s, color .35s, border-color .35s, box-shadow .35s; }
.btn > span[aria-hidden] { flex: none; }
.btn:active { transform: translateY(1px); }
.btn--dark { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
.btn--dark:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink); }
.btn--line { border-color: var(--line-2); }
.btn--line:hover { border-color: var(--ink); background: var(--btn-bg); color: var(--btn-ink); }
.btn--text { border-color: transparent; padding-inline: .1rem; border-bottom: 1px solid var(--gold); min-height: 40px; padding-block: .6rem; }
.btn--text:hover { color: var(--gold-ink); background: none; }
.btn span[aria-hidden] { transition: transform .45s var(--ease); } .btn:hover span[aria-hidden] { transform: translateX(4px); }

/* ---------- header: an obsidian masthead ---------- */
/* the brand: the uploaded S mark with "Marketing" set beside it — one lockup, used in the header and the footer only */
.slogo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; min-height: 44px; }
.slogo img { height: 34px; width: auto; transition: height .45s var(--ease); }
.slogo__w { font: 500 1.5rem/1 var(--serif); letter-spacing: .01em; white-space: nowrap; color: var(--ink); transform: translateY(.06em); transition: font-size .45s var(--ease); }
.hd .slogo { animation: slogo-in .9s var(--ease) both; }
@keyframes slogo-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.hd { position: sticky; top: 0; z-index: 300; background: rgba(19, 19, 18, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid transparent; transition: border-color .45s, background .45s; padding-top: env(safe-area-inset-top); }
.hd.is-solid { border-bottom-color: var(--line); background: rgba(11, 11, 10, .97); }
.hd__in { max-width: var(--maxw); margin-inline: auto; height: var(--head); padding-inline: var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 2rem; transition: height .45s var(--ease); }
.hd.is-solid .hd__in { height: 56px; }
/* the header's height once solid is passed to what is pinned under it (the analysis bar, the section rail): no strip of
   scrolled content between them */
.hd.is-solid ~ main { --hd-now: 56px; }
.hd.is-solid .slogo img { height: 28px; }
.hd.is-solid .slogo__w { font-size: 1.3rem; }
.hd__nav { display: flex; align-items: center; gap: 2.1rem; }
.hd__nav a { position: relative; font: 600 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); padding: .6rem 0; transition: color .3s; }
.hd__nav a:not(.hd__cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.hd__nav a:not(.hd__cta):hover::after, .hd__nav a:not(.hd__cta):focus-visible::after { transform: scaleX(1); }
.hd__nav a:hover { color: var(--ink); }
.hd__nav a + a:not(.hd__cta)::before { content: ""; position: absolute; left: -1.05rem; top: 50%; width: 1px; height: .8rem; margin-top: -.4rem; background: var(--line-2); }
.hd__nav .hd__cta { margin-left: .6rem; padding: .85rem 1.15rem; border: 1px solid var(--gold); color: var(--ink); }
.hd__nav .hd__cta:hover { background: var(--gold); color: var(--obsidian); border-bottom-color: var(--gold); }
.hd__menu { display: none; background: none; border: 0; width: 44px; height: 44px; position: relative; cursor: pointer; }
.hd__menu span { position: absolute; left: 11px; right: 11px; height: 1px; background: var(--ink); transition: transform .4s var(--ease); }
.hd__menu span:first-child { top: 18px; } .hd__menu span:last-child { top: 25px; }
@media (max-width: 920px) {
  .hd__menu { display: block; }
  .hd__nav { position: fixed; left: 0; right: 0; top: calc(var(--head) + env(safe-area-inset-top)); bottom: 0; background: var(--obsidian); flex-direction: column; align-items: flex-start; gap: 0; padding: 1.4rem var(--gut); visibility: hidden; opacity: 0; transition: opacity .35s var(--ease), visibility 0s linear .35s; overflow-y: auto; }
  .hd.is-open .hd__nav { visibility: visible; opacity: 1; transition: opacity .35s var(--ease); }
  .hd__nav a { width: 100%; font: 500 1.9rem/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .hd__nav a::before { content: none !important; } /* the desktop separators do not belong in the stacked menu */
  .hd__nav a:not(.hd__cta)::after { bottom: -1px; }
  .hd__nav .hd__cta { margin: 1.6rem 0 0; font: 700 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-align: center; padding: 1.1rem; background: var(--gold); color: var(--obsidian); border-color: var(--gold); }
  .hd.is-open .hd__menu span:first-child { transform: translateY(3.5px) rotate(45deg); } .hd.is-open .hd__menu span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}

/* =====================================================================================================
   LANDING
   ===================================================================================================== */
/* HERO — deep charcoal, ivory type, the Gulf line map inverted to light strokes */
/* the hero does not clip its content — the starter's suggestion list opens over the sections below it; only the
   photograph layer is clipped to the hero (z-index 5 keeps the open list above the rails' cards) */
.intro { background: var(--sec-hero); padding-block: clamp(3.4rem, 1.5rem + 7vw, 8rem) clamp(3.25rem, 1.5rem + 5.5vw, 6.5rem); position: relative; z-index: 5; isolation: isolate; }
.intro > .wrap { position: relative; z-index: 1; }
.intro__media { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.intro__media > picture { position: absolute; inset: 0 0 0 38%; display: block; }
.intro__vid { width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: saturate(.85) contrast(1.02);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 55%, transparent 100%); mask-composite: intersect; }
.intro__sub { margin: 1.1rem 0 0; font: 400 italic clamp(1.35rem, 1.1rem + .9vw, 1.9rem)/1.3 var(--serif); color: var(--ink-2); }
.intro__credit { margin: 1.6rem 0 0; font-size: var(--fs-micro); letter-spacing: .04em; color: var(--ink-3); }
/* examples: one tap fills the product */
.intro__ex { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .55rem; margin-top: 1.25rem; }
.intro__exk { font: 600 var(--fs-micro)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-right: .45rem; }
.intro__ex button { min-height: 36px; padding: .45rem .8rem; background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); font: 500 var(--fs-support-s)/1 var(--sans); cursor: pointer; transition: border-color .35s, color .35s, background .35s; }
.intro__ex button:hover, .intro__ex button:focus-visible { border-color: var(--gold); color: var(--ink); }
.intro__ex button[aria-pressed="true"] { border-color: var(--gold); color: var(--ink); background: rgba(181, 154, 104, .12); }
/* the selection preview: what will be analysed, with the product's photograph. It never moves the form the visitor is
   using and never covers the vessel, the hero's subject: on a wide screen it is a strip under the examples (the chips
   the visitor may be using stay put); on a tablet or phone it follows the form (the starter stays where the visitor's
   thumb is). */
.intro__pick { margin: 0; border-top: 1px solid var(--gold); background: rgba(11, 11, 10, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); animation: pick-in .6s var(--ease) both; }
@keyframes pick-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.intro__pick img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; background: #1C1B18; }
.intro__pick dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.intro__pick dl div { padding: .6rem .9rem .65rem; border-bottom: 1px solid var(--line); min-width: 0; }
.intro__pick dl div:nth-child(odd) { border-right: 1px solid var(--line); }
.intro__pick dl div:nth-last-child(-n + 2) { border-bottom: 0; }
.intro__pick dt { font: 600 .625rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.intro__pick dd { margin: .35rem 0 0; font: 500 1.02rem/1.25 var(--serif); font-feature-settings: "liga" 1, "lnum" 1; color: var(--ink); overflow-wrap: anywhere; }
.intro__pick dd.is-empty { color: var(--ink-3); font-style: italic; }
/* the product and the HS code take a whole row of the two-column card: "7207.11 · 7207.19 · 7207.20" is never broken with
   a separator at the start of a line (the cells follow heroPick's order: product, HS code, grade, origin, destination,
   quantity) */
.intro__pick dl div:nth-child(-n + 2) { grid-column: 1 / -1; border-right: 0; }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
@media (min-width: 901px) {
  .intro > .wrap { display: flex; flex-direction: column; }
  .intro__grid { display: contents; }
  .intro__head { order: 0; } #starter { order: 1; } #starterMsg { order: 2; } .intro__ex { order: 3; } .intro__pick { order: 4; } .continue { order: 5; } .intro__credit { order: 6; }
  /* the strip: the photograph at the left, as tall as the answers; the six answers in one row (two when it is short) */
  .intro__pick { position: relative; margin-top: 1.6rem; }
  .intro__pick:has(> img) { padding-left: clamp(150px, 16vw, 230px); }
  .intro__pick img { position: absolute; left: 0; top: 0; width: clamp(150px, 16vw, 230px); height: 100%; aspect-ratio: auto; }
  .intro__pick dl { display: flex; flex-wrap: wrap; overflow: hidden; }
  .intro__pick dl div:nth-child(n) { flex: 1 1 auto; min-width: 8.5rem; padding: .85rem 1.1rem .9rem; border: 0; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
  .intro__pick dd { overflow-wrap: break-word; }
}
@media (max-width: 900px) {
  /* the head and the preview join the hero's column; the preview is ordered after the form */
  .intro > .wrap { display: flex; flex-direction: column; }
  .intro__grid { display: contents; }
  .intro__head { order: 0; } #starter { order: 1; } #starterMsg { order: 2; } .intro__pick { order: 3; margin-top: 1.4rem; max-width: none; }
  .intro__ex { order: 4; } .continue { order: 5; } .intro__credit { order: 6; }
  .intro__pick img { aspect-ratio: 16 / 7; }
}
.intro .kicker { color: var(--gold-ink); }
.intro__t { font: 500 var(--fs-hero)/.98 var(--serif); letter-spacing: -.018em; margin: 1.4rem 0 0; color: var(--ink); text-wrap: balance; }
.intro__t em { color: var(--champagne-2); font-weight: 400; }
.intro__l { max-width: 54ch; margin: 1.7rem 0 0; font-size: var(--fs-body); line-height: 1.7; color: var(--ink-2); }
.intro__map { margin: 0; align-self: end; }
/* gulf-lines-dark.svg: the same Natural Earth geometry as gulf-lines.svg, light strokes for the dark ground; the edges of
   the plate dissolve into the ground so it reads as a drawing, not a box */
.intro__map img { width: 100%; height: auto; opacity: .95;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 18%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 18%); mask-composite: intersect; }
.intro__map figcaption { margin-top: .7rem; font-size: var(--fs-meta); color: var(--ink-3); display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-top: .6rem; }
@media (max-width: 900px) { .intro__grid { grid-template-columns: minmax(0, 1fr); } .intro__map { display: none; } .intro__vid { opacity: .32; } .intro__pick { max-width: 30rem; } }
@media (prefers-reduced-motion: reduce) { .hd .slogo, .intro__pick { animation: none; } }

/* the starter — the three questions and ANALYZE MARKET as one instrument row. The row wraps by width (a phone asks one
   question per line); ANALYZE MARKET is never disabled: while a question is open it is quiet, and pressing it says which */
/* the starter is its own layer: its open suggestion list is drawn above everything that follows it (the preview, the rails) */
.st { position: relative; z-index: 3; margin-top: clamp(2.6rem, 6vh, 4rem); }
.st__row { display: flex; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); }
.st__row > .st__f { flex: 1 1 0; }
.st__row > .st__f--prod { flex-grow: 1.8; }
.st__row > .st__f--qty { flex-grow: .75; }
.st__row > .st__go { flex: 0 0 auto; }
.st__f[hidden] { display: none !important; }
.st__f { position: relative; padding: 1.05rem 1.2rem 1.1rem; border-right: 1px solid var(--line); min-width: 0; transition: background .25s, box-shadow .25s; }
.st__f:focus-within { background: var(--hover-bg); box-shadow: inset 0 -2px 0 var(--gold); }
.st__f label { display: block; font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st__f label small { font-weight: 600; letter-spacing: .12em; color: var(--ink-3); opacity: .8; margin-left: .35rem; text-transform: none; }
.st__n { font-feature-settings: "liga" 0, "tnum" 1, "lnum" 1; color: var(--gold-ink); margin-right: .75em; }
.st__f input, .st__f select { display: block; width: 100%; margin-top: .55rem; border: 0; background: transparent; padding: 0; min-height: 40px; font: 500 1.32rem/1.3 var(--serif); font-feature-settings: "liga" 1, "lnum" 1; color: var(--ink); text-overflow: ellipsis; border-radius: 0; }
.st__f input::placeholder { color: var(--ink-3); font-style: italic; font-weight: 400; opacity: 1; }
.st__f input:focus, .st__f select:focus { outline: none; }
.st__f select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 1.2rem; background: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%) right .35rem top 55% / 5px 5px no-repeat, linear-gradient(-45deg, transparent 50%, var(--ink-3) 50%) right 0 top 55% / 5px 5px no-repeat; }
.st__f select option { color: #1A1A18; background: #FFFFFF; font: 400 1rem var(--sans); }
.st__f select:disabled { cursor: default; color: var(--ink-3); font-style: italic; background: none; }
.st__f--qty input::-webkit-outer-spin-button, .st__f--qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st__f--qty input { -moz-appearance: textfield; }
/* a chosen country carries its flag inside the field */
.st__ctl { display: flex; align-items: center; gap: .65rem; margin-top: .55rem; min-width: 0; }
.st__ctl input { margin-top: 0; min-width: 0; }
.st__fl { display: none; flex: none; }
.has-flag .st__fl { display: inline-flex; }
.st__fl .st__flag { width: 26px; height: 19.5px; }
/* × clears the product field (a 44 px touch target around a quiet mark) */
.st__clr { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-right: -.35rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); font: 400 1.35rem/1 var(--sans); cursor: pointer; transition: color .2s, background .2s; }
.st__clr::before { content: ""; position: absolute; inset: -7px; }
.st__clr:hover, .st__clr:focus-visible { color: var(--ink); background: var(--hover-bg); }
.st__clr[hidden] { display: none; }
/* a question left unanswered after ANALYZE MARKET */
.st__f.is-invalid { box-shadow: inset 0 -2px 0 var(--bad); }
.st__f.is-invalid label { color: var(--bad); }
.st__f.is-invalid input::placeholder { color: var(--bad); opacity: .8; }
/* ANALYZE MARKET: quiet until the three answers are in, then the one gold action on the row */
.st__go { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink-2); padding: 0 1.9rem; min-height: 56px; font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .35s, color .35s, box-shadow .35s; }
.st__go span[aria-hidden] { color: var(--gold-ink); transition: transform .45s var(--ease), color .35s; }
.st__go:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
.st__go:hover span[aria-hidden] { transform: translateX(4px); }
.st__go.is-ready { background: var(--gold); color: var(--obsidian); box-shadow: none; }
.st__go.is-ready span[aria-hidden] { color: var(--obsidian); }
.st__go.is-ready:hover { background: var(--champagne-2); color: var(--obsidian); }
.st__go:focus-visible { outline-offset: -4px; }
.st__go:active { transform: translateY(1px); }
@media (prefers-reduced-motion: no-preference) { .st__go.is-ready { animation: go-ready .9s var(--ease) 1; } }
@keyframes go-ready { 0% { box-shadow: 0 0 0 0 rgba(212, 189, 140, .55); } 100% { box-shadow: 0 0 0 14px rgba(212, 189, 140, 0); } }

/* the suggestion list: a light card, legible over any ground, never clipped (its height is set to the room below the
   field by Starter.js) */
.st__list { --ink: #1A1A18; --ink-2: #45413B; --ink-3: #5F5950; --gold-ink: #6F5B33; --line: rgba(26, 26, 24, .1); --line-2: rgba(26, 26, 24, .22); --bad: #7A2F37; --flag-edge: rgba(26, 26, 24, .16); --flag-ground: linear-gradient(135deg, #ECE6DB, #DDD5C8);
  position: absolute; z-index: 60; left: -1px; top: 100%; min-width: calc(100% + 2px); width: max-content; max-width: min(680px, calc(100vw - 2 * var(--gut))); margin: 0; padding: .3rem 0; list-style: none; background: var(--white); color: var(--ink); border: 1px solid var(--line-2); border-top: 2px solid var(--gold); box-shadow: 0 28px 64px -12px rgba(11, 11, 10, .38), 0 2px 6px rgba(11, 11, 10, .08); max-height: min(460px, 60vh); overflow: auto; overscroll-behavior: contain; color-scheme: light; scrollbar-width: thin; scrollbar-color: #D6CEC0 transparent; animation: list-in .22s var(--ease) both; }
@keyframes list-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.st__o { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: .95rem; align-items: center; padding: .55rem 1rem; min-height: 58px; cursor: pointer; border-bottom: 1px solid var(--line); transition: background .15s; }
.st__o:last-child { border-bottom: 0; }
.st__o:hover, .st__o[aria-selected="true"] { background: #F7F3EA; }
.st__o[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--gold); }
.st__o.is-feat .st__txt small { color: var(--gold-ink); }
.st__th { width: 44px; height: 44px; overflow: hidden; border-radius: 2px; background: var(--sand-2); }
.st__th img { width: 100%; height: 100%; object-fit: cover; }
.st__th--hs { display: grid; place-content: center; text-align: center; background: #F4EFE6; outline: 1px solid var(--line); outline-offset: -1px; font: 500 1.15rem/1 var(--serif); font-feature-settings: "lnum" 1; color: var(--gold-ink); }
.st__th--hs small { display: block; margin-bottom: .15rem; font: 700 .5rem/1 var(--sans); letter-spacing: .16em; color: var(--ink-3); }
.st__txt { min-width: 0; }
.st__txt b { display: block; font: 500 1.12rem/1.22 var(--serif); color: var(--ink); }
.st__txt small { display: block; font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.4; margin-top: .12rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st__code { justify-self: end; text-align: right; font: 600 .75rem/1.3 var(--sans); letter-spacing: .02em; color: var(--gold-ink); max-width: 13rem; }
.st__code b { font-weight: 650; }
.st__rev { display: block; margin-top: .25rem; font: 700 .5625rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.st__rev.is-legacy { color: var(--bad); }
.st__o--c { grid-template-columns: 28px minmax(0, 1fr); min-height: 50px; }
.st__o--c .st__txt b { font-size: 1.08rem; }
.st__o--c .st__txt small { letter-spacing: .02em; }
.st__flag { width: 24px; height: 18px; flex: 0 0 auto; }
.st__flag--none { display: block; background: var(--flag-ground); outline: 1px solid var(--flag-edge); outline-offset: -1px; border-radius: 2px; }
.st__note { padding: .7rem 1rem; font-size: var(--fs-support-s); line-height: 1.5; color: var(--ink-2); border-bottom: 1px solid var(--line); background: #FBF9F4; }
.st__note b { color: var(--ink); }
.st__note.is-bad { color: var(--bad); }
.st__note.is-ask { color: var(--gold-ink); }
.st__note--wait { display: flex; align-items: center; gap: .6rem; color: var(--ink-3); }
.st__spin { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-2); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .st__list { left: -1px; right: -1px; width: auto; max-width: none; }
  .st__o { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "th txt" "th code"; row-gap: .15rem; padding: .6rem .85rem; }
  .st__o > .st__th { grid-area: th; width: 40px; height: 40px; align-self: start; }
  .st__o > .st__txt { grid-area: txt; }
  .st__o > .st__code { grid-area: code; justify-self: start; text-align: left; max-width: none; }
  .st__o > .st__code .st__rev { display: inline; margin: 0 0 0 .45rem; }
  .st__o--c { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: none; }
  .st__o.st__o--c > * { grid-area: auto; }
}

/* what was identified, and the classifications to choose from */
.st__class:empty { display: none; }
.st__id { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .85rem; margin: 1.1rem 0 0; font-size: var(--fs-support-s); color: var(--ink-3); }
.st__id span { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.st__id b { font: 500 1.18rem/1.1 var(--serif); font-feature-settings: "liga" 1; color: var(--ink); }
.st__id i { font: 600 var(--fs-meta)/1 var(--mono); font-style: normal; color: var(--ink-2); }
.st__id .st__rev { display: inline-block; margin: 0; padding: .28rem .4rem .24rem; border: 1px solid var(--line-2); color: var(--ink-3); }
.st__id em { font-style: normal; }
.st__id em + em::before { content: "·"; margin-right: .85rem; color: var(--gold); }
.st__alts { margin-top: 1rem; }
.st__alts > p { margin: 0 0 .6rem; font-size: var(--fs-support-s); color: var(--ink-2); }
.st__alts > p b { color: var(--ink); font-weight: 650; }
.st__alts > p.is-ask, .st__alts > p.is-ask b { color: var(--gold-ink); }
.st__alts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.st__alts button { background: var(--paper); border: 1px solid var(--line-2); padding: .6rem .8rem; min-height: 48px; text-align: left; cursor: pointer; max-width: 420px; color: var(--ink); transition: border-color .25s, background .25s; }
.st__alts button b { font: 650 var(--fs-meta)/1.3 var(--mono); color: var(--ink); }
.st__alts button small { display: block; font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.4; margin-top: .15rem; }
.st__alts button:hover { border-color: var(--gold); background: var(--hover-bg); }
.st__alts button[aria-pressed="true"] { border-color: var(--gold); background: var(--hover-bg); box-shadow: inset 2px 0 0 var(--gold); }
.st__msg { display: flex; align-items: baseline; gap: .6rem; margin: .9rem 0 0; font: 600 var(--fs-support)/1.5 var(--sans); color: var(--bad); }
.st__msg::before { content: ""; flex: none; width: 14px; height: 1px; background: currentColor; transform: translateY(-.3em); }
.continue { margin: 1.4rem 0 0; }
.continue a { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; font: 600 var(--fs-support-s)/1.4 var(--sans); color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--gold); }
.continue a:hover { color: var(--ink); }
/* with the grade question shown, a laptop-width row puts the product on its own line (labels never truncate) */
@media (max-width: 1180px) {
  .st__row:has(> .st__f--grade:not([hidden])) { flex-wrap: wrap; }
  .st__row:has(> .st__f--grade:not([hidden])) > .st__f--prod { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .st__row { flex-wrap: wrap; }
  .st__row > .st__f { flex: 1 1 40%; border-bottom: 1px solid var(--line); }
  .st__row > .st__f--prod { flex-basis: 100%; border-right: 0; }
  .st__row > .st__go { flex-basis: 100%; min-height: 58px; padding: 1.1rem; border-left: 0; }
}
@media (max-width: 560px) { .st__row > .st__f { flex-basis: 100%; border-right: 0; } .st__f { padding: .95rem 1.05rem 1rem; } }

/* the bottom starter (EXPLORE ANOTHER MARKET) carries the whole selection: product and grade on the first line, origin,
   destination and quantity on the second, ANALYZE MARKET beside both — labels never wrap, values never collide */
.st--qty .st__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(11.5rem, auto); gap: 1px; background: var(--line); }
.st--qty .st__row > .st__f { border: 0; background: var(--sec-final); }
.st--qty .st__row > .st__f--prod { grid-column: span 2; }
.st--qty .st__row:has(> .st__f--grade[hidden]) > .st__f--prod { grid-column: span 3; }
.st--qty .st__row > .st__go { grid-column: 4; grid-row: 1 / span 2; border: 0; }
.st--qty .st__row > .st__go:not(.is-ready) { background: var(--sec-final); }
@media (max-width: 900px) {
  .st--qty .st__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st--qty .st__row > .st__f--prod, .st--qty .st__row:has(> .st__f--grade[hidden]) > .st__f--prod { grid-column: 1 / -1; }
  .st--qty .st__row > .st__go { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) { .st--qty .st__row { grid-template-columns: minmax(0, 1fr); } .st--qty .st__row > * { grid-column: 1 / -1 !important; } }

/* ---------- rails: an editorial catalogue, not a shop ---------- */
.rail { padding-block: clamp(3.25rem, 1.4rem + 6.2vw, 7.5rem) clamp(2.2rem, 1rem + 4vw, 5rem); background: var(--sec-product); }
.rail--markets { background: var(--sec-price); }
.rail__h { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; }
.rail__t { font: 500 var(--fs-h2)/1.05 var(--serif); margin: .9rem 0 0; letter-spacing: -.01em; }
.rail__t em { color: var(--gold-ink); font-weight: 400; }
.rail__l { margin: .9rem 0 0; font-size: var(--fs-support); color: var(--ink-3); max-width: 60ch; }
.rail__nav { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.rail__pos { margin-right: .9rem; font: 600 var(--fs-meta)/1 var(--sans); letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; font-feature-settings: "liga" 0, "tnum" 1, "lnum" 1; }
.rail__pos b { font-weight: 700; color: var(--ink); }
.rail__swipe { display: none; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.rail__b { width: 44px; height: 44px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; font-size: 1rem; color: var(--ink); transition: border-color .3s, background .3s, color .3s; }
.rail__b:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: var(--ivory); }
.rail__b:disabled { opacity: .3; cursor: default; }
.rail__track { list-style: none; margin: clamp(2rem, 4vw, 2.8rem) 0 0; padding: 0 var(--gut) 1.2rem max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut))); display: flex; gap: clamp(1.25rem, 2.2vw, 2rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut))); scrollbar-width: thin; scrollbar-color: var(--sand) transparent; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.rail__track li { flex: 0 0 auto; scroll-snap-align: start; display: flex; }
/* PRODUCT CARD (part 29): large photograph, the name in letter-spaced serif capitals, HS code, grade, champagne rule, ANALYZE → */
.pt { width: clamp(236px, 21vw, 290px); display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; }
.pt__img { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand-2); outline: 1px solid transparent; outline-offset: 5px; transition: outline-color .4s; }
.pt__img picture, .pt__img img { display: block; width: 100%; height: 100%; }
.pt__img img { object-fit: cover; transition: transform 1.6s var(--ease), filter 1s var(--ease); filter: saturate(.94); }
.pt:hover .pt__img img, .pt:focus-visible .pt__img img { transform: scale(1.04); filter: saturate(1); }
.pt__n { margin-top: 1.15rem; font: 500 1.3rem/1.15 var(--serif); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); transition: color .45s; }
.pt:hover .pt__n, .pt:focus-visible .pt__n, .pt[aria-pressed="true"] .pt__n { color: var(--ink); }
.pt__hs { margin-top: .5rem; font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.pt__g { margin-top: .3rem; font: 500 var(--fs-meta)/1.45 var(--sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.pt__r { display: block; width: 28px; height: 1px; background: var(--gold); margin: 1rem 0 .85rem; transition: width .7s var(--ease); }
.pt:hover .pt__r, .pt:focus-visible .pt__r, .pt[aria-pressed="true"] .pt__r { width: 64px; }
.pt__go { display: inline-flex; align-items: center; gap: .55em; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.pt__go i, .mc__go i { font-style: normal; display: inline-block; opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .5s var(--ease); }
.pt:hover .pt__go i, .pt:focus-visible .pt__go i, .pt[aria-pressed="true"] .pt__go i { opacity: 1; transform: none; }
.pt[aria-pressed="true"] .pt__img { outline-color: var(--gold); }
.pt[aria-pressed="true"] .pt__go::before { content: "Selected · "; color: var(--ink-3); }
/* MARKET CARD (part 30): the country in serif capitals, port codes and roles, the origin-dependent note, EXPLORE MARKET → */
.mc { display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.05rem; min-height: 44px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; white-space: nowrap; color: inherit; transition: border-color .3s, background .3s; }
.mc:hover { border-color: var(--ink); background: var(--hover-bg); }
.mc__f { width: 20px; height: 15px; flex: 0 0 auto; }
.mc__n { font: 500 1.1rem/1 var(--serif); }
.mc__i { font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.mc__i--warn { color: var(--bad); } .mc__i--ok { color: var(--teal); }
.mc[aria-pressed="true"], .mc.is-cur { border-color: var(--obsidian); background: var(--obsidian); color: var(--ivory); }
.mc[aria-pressed="true"] .mc__i, .mc.is-cur .mc__i { color: var(--gold-2); }
.rail--markets .mc { width: clamp(224px, 19vw, 262px); flex-direction: column; align-items: flex-start; gap: 0; padding: 1.3rem 0 .2rem; border: 0; border-top: 1px solid var(--rule); background: none; text-align: left; white-space: normal; color: var(--ink); transition: border-color .4s; }
.rail--markets .mc:hover { background: none; border-top-color: var(--gold); }
.rail--markets .mc__n { order: 1; margin-top: 1.05rem; font: 500 1.55rem/1.08 var(--serif); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); transition: color .45s; }
.rail--markets .mc:hover .mc__n, .rail--markets .mc[aria-pressed="true"] .mc__n { color: var(--ink); }
.mc__p { order: 2; margin-top: .75rem; font: 700 var(--fs-meta)/1.4 var(--sans); letter-spacing: .12em; color: var(--ink-2); overflow-wrap: anywhere; }
.mc__pl { order: 3; margin-top: .2rem; font: 500 var(--fs-meta)/1.45 var(--sans); color: var(--ink-3); }
.rail--markets .mc__i { order: 4; display: inline-flex; align-items: center; gap: .5rem; margin-top: .85rem; }
.rail--markets .mc__i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mc__go { order: 5; margin-top: auto; padding-top: 1.2rem; display: inline-flex; align-items: center; gap: .55em; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.mc:hover .mc__go i, .mc:focus-visible .mc__go i, .mc[aria-pressed="true"] .mc__go i { opacity: 1; transform: none; }
.rail--markets .mc[aria-pressed="true"] { background: none; color: var(--ink); border-top: 2px solid var(--gold); padding-top: calc(1.3rem - 1px); }
.rail--markets .mc[aria-pressed="true"] .mc__i { color: var(--gold-ink); } .rail--markets .mc[aria-pressed="true"] .mc__i--warn { color: var(--bad); } .rail--markets .mc[aria-pressed="true"] .mc__i--ok { color: var(--teal); }
.rail--markets .mc[aria-pressed="true"] .mc__go::before { content: "Selected · "; color: var(--ink-3); }
@media (max-width: 700px) { .rail__h { flex-direction: column; align-items: flex-start; gap: .9rem; } .rail__nav { width: 100%; justify-content: space-between; padding-top: .7rem; border-top: 1px solid var(--line); } .rail__b { display: none; } .rail__swipe { display: inline; } .pt { width: 68vw; max-width: 290px; } .rail--markets .mc { width: 62vw; max-width: 262px; } }
@media (hover: none) { .pt__go i, .mc__go i { opacity: 1; transform: none; } }

/* ---------- the journey (part 33): ten steps, one uninterrupted path ---------- */
.how, .journey { background: var(--sec-product); padding-block: var(--sec-pad); border-top: 1px solid var(--line); }
.journey__h { max-width: 62ch; }
.journey__t { font: 500 var(--fs-h2)/1.06 var(--serif); letter-spacing: -.01em; margin: .9rem 0 0; }
.journey__t em { color: var(--gold-ink); font-weight: 400; }
.journey__l { margin: 1rem 0 0; font-size: var(--fs-body); color: var(--ink-2); }
.journey__g { margin-top: clamp(2.6rem, 5vw, 4rem); }
.journey__k { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; margin: 0 0 1.1rem; font: 600 var(--fs-meta)/1.4 var(--sans); color: var(--ink-3); }
.journey__k span { font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.journey__s { list-style: none; margin: 0 0 clamp(2.4rem, 5vw, 3.6rem); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.journey__s:last-of-type { border-top-color: var(--gold); }
.journey__s li { position: relative; padding: 1.6rem clamp(.8rem, 2vw, 1.8rem) 0 0; }
.journey__s li::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--sec-product); border: 1px solid var(--ink); }
.journey__s:last-of-type li::before { border-color: var(--gold); background: var(--gold); }
.journey__s span { display: block; font: 400 2.2rem/1 var(--serif); color: var(--gold-ink); font-variant-numeric: lining-nums; }
.journey__s b { display: block; margin-top: .85rem; font: 500 1.34rem/1.2 var(--serif); color: var(--ink); text-wrap: balance; }
.journey__s p { margin: .55rem 0 0; font-size: var(--fs-support); line-height: 1.55; color: var(--ink-2); max-width: 28ch; }
.journey__a { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin: 0; }
@media (max-width: 900px) {
  .journey__s { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--rule); margin-left: 4px; }
  .journey__s:last-of-type { border-left-color: var(--gold); }
  .journey__s li { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); column-gap: .4rem; padding: 0 0 1.5rem 1.35rem; }
  .journey__s li:last-child { padding-bottom: .2rem; }
  .journey__s li::before { left: -4px; top: .55rem; }
  .journey__s span { grid-row: 1 / span 2; font-size: 1.55rem; padding-top: .2rem; }
  .journey__s b { margin-top: 0; font-size: 1.25rem; }
  .journey__s p { max-width: none; }
}
.how__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 4vw, 3rem); border-top: 1px solid var(--line); padding-top: 2.2rem; }

/* ---------- selection bar (landing) ---------- */
.selbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 250; background: var(--obsidian); transform: translateY(110%); transition: transform .45s var(--ease); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); }
.selbar.is-on { transform: none; }
body[data-view="report"] .selbar { display: none; }
.selbar__in { max-width: var(--maxw); margin-inline: auto; padding: .8rem var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.selbar__sum { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .9rem; min-width: 0; }
.selbar__sum b { font: 500 1.2rem/1.2 var(--serif); }
.selbar__sum span { font-size: var(--fs-support-s); color: var(--ink-2); }
.selbar__go { flex: 0 0 auto; min-height: 44px; border: 1px solid var(--gold); background: var(--gold); color: var(--obsidian); padding: .85rem 1.2rem; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.selbar__go:disabled { background: transparent; color: var(--ink-3); border-color: var(--line-2); cursor: not-allowed; }

/* ---------- analysis bar + compare ---------- */
/* pinned directly under the site header at the header's current height (68 px, 56 px once scrolled) — nothing scrolls
   through a gap between them. One row on a wide screen (the summary truncates, the actions never do); on a phone two
   short lines: what is analysed, then New · Change product · Another market. */
.abar { position: sticky; top: calc(var(--hd-now) + env(safe-area-inset-top)); z-index: 200; background: rgba(250, 247, 240, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px -22px rgba(11, 11, 10, .5); transition: top .45s var(--ease); }
.abar__in { position: relative; max-width: var(--maxw); margin-inline: auto; padding: .35rem var(--gut); display: flex; align-items: center; gap: 1.2rem; min-height: var(--abar-h); }
.abar button { background: none; border: 0; cursor: pointer; min-height: 40px; font: 700 var(--fs-micro)/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); padding: .7rem 0; white-space: nowrap; transition: color .25s, border-color .25s; }
.abar button:hover { color: var(--ink); }
.abar__new { flex: none; padding-right: 1.2rem !important; border-right: 1px solid var(--line) !important; color: var(--ink) !important; }
.abar__new span[aria-hidden] { color: var(--gold-ink); display: inline-block; transition: transform .35s var(--ease); }
.abar__new:hover span[aria-hidden] { transform: translateX(-3px); }
/* the summary: the product name gives way first (with an ellipsis); the classification is never cut inside a code — when
   the summary is too narrow for it, it is not shown here (it is the header's first line below); the lane keeps both
   countries and shortens only as a last resort. The status (report.css .abar__st) takes no width from it. */
.abar__sum { flex: 1 1 auto; margin: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: .9rem; min-width: 0; overflow: hidden; white-space: nowrap; container-type: inline-size; }
.abar__sum b { flex: 0 1 auto; min-width: min(4.5em, 40%); overflow: hidden; text-overflow: ellipsis; font: 600 1.2rem/1.2 var(--serif); font-feature-settings: "liga" 1; }
.abar__sum span { flex: none; min-width: 0; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-support-s); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.abar__sum span:nth-of-type(2) { display: block; max-width: 100%; }
.abar__sum span:nth-of-type(2) img { vertical-align: -2px; margin-inline: .12rem .18rem; }
.abar__sum span:nth-of-type(2)::before { display: inline-block; vertical-align: -1px; }
.abar__sum span:nth-of-type(3) { flex: 0 4 auto; }
@media (min-width: 821px) { @container (max-width: 30rem) { .abar__sum span:nth-of-type(1) { display: none; } } }
.abar__sum span + span::before { content: ""; flex: none; width: 1px; height: .8rem; margin-right: .5rem; background: var(--line-2); }
.abar__sum img { flex: none; width: 20px; height: 15px; }
.abar__acts { display: flex; gap: 1.4rem; flex: none; }
.abar__acts button { border-bottom: 1px solid var(--gold); padding: .45rem 0 !important; }
.abar__acts button:hover, .abar__acts button[aria-expanded="true"] { border-bottom-color: var(--ink); }
/* ANOTHER MARKET: a panel under the bar on a wide screen (its list scrolls inside, capped), a bottom sheet over a
   backdrop on a phone; × (and the backdrop) close it — app.js also closes it on Escape, a tap outside and a scroll */
.cmp { border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 18px 30px -24px rgba(11, 11, 10, .45); }
.cmp__bd { display: none; }
.cmp__in { position: relative; max-width: var(--maxw); margin-inline: auto; padding: 1rem var(--gut) 1.2rem; }
.abar .cmp__x { position: absolute; top: .55rem; right: calc(var(--gut) - .6rem); z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0 !important; border-radius: 50%; font: 400 1.6rem/1 var(--sans); letter-spacing: 0; color: var(--ink-2); }
.abar .cmp__x:hover, .abar .cmp__x:focus-visible { color: var(--ink); background: var(--hover-bg); }
.cmp__s { display: block; padding-right: 3rem; }
.cmp__s span { display: block; font: 700 var(--fs-micro)/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.cmp__s input { width: min(420px, 100%); margin-top: .5rem; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; padding: .45rem 0; min-height: 40px; font: 500 1.15rem/1.2 var(--serif); border-radius: 0; }
.cmp__s input:focus { outline: none; border-bottom-color: var(--gold); }
.cmp__list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .45rem; max-height: min(44vh, 420px); overflow: auto; overscroll-behavior: contain; }
/* a country cell: the name in sentence case (not the bar's letter-spaced capitals), wrapping to a second line when long —
   never running into the next cell or cut mid-word */
.cmp__list .mc { width: 100%; min-width: 0; height: 100%; padding: .6rem .8rem !important; white-space: normal; text-align: left; text-transform: none; letter-spacing: normal; font: inherit; color: var(--ink); }
.cmp__list .mc__n { min-width: 0; font: 500 1.08rem/1.18 var(--serif); letter-spacing: .005em; overflow-wrap: break-word; hyphens: manual; }
.cmp__list .mc.is-cur { color: var(--ivory); }
@media (max-width: 1200px) { .abar__x { display: none; } }
@media (max-width: 1100px) { .abar__sum span:nth-of-type(3) { display: none; } } /* the grade stays in the header below */
@media (max-width: 820px) {
  :root { --abar-h: 62px; }
  .abar__in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 .8rem; padding-block: .3rem .1rem; min-height: 0; }
  .abar__sum { grid-column: 1 / -1; grid-row: 1; gap: .6rem; padding-top: .1rem; }
  /* a long product name gives way first ("Copper Cathode & Gr…"); the lane keeps both countries, then ends in an ellipsis */
  .abar__sum b { font-size: 1.02rem; flex: 0 1 auto; min-width: 0; }
  .abar__sum span { font-size: var(--fs-meta); display: block; flex: none; max-width: 68%; }
  .abar__sum span img { vertical-align: -2px; }
  .abar__sum span:nth-of-type(1) { display: none; } /* the classification stays in the header below */
  .abar__sum span + span::before { display: none; }
  .abar__sum img { width: 18px; height: 13.5px; }
  .abar__new { grid-row: 2; padding-right: 0 !important; border-right: 0 !important; }
  .abar__acts { grid-row: 2; justify-self: end; gap: 1.1rem; min-width: 0; }
  .abar button { font-size: var(--fs-micro); letter-spacing: .1em; min-height: 36px; padding-block: .55rem !important; }
  .abar__acts button { border-bottom: 0; }
  .abar__acts button[aria-expanded="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
  .cmp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a phone: ANOTHER MARKET is a bottom sheet over a backdrop — at most three quarters of the screen, its list scrolling
   inside; the report behind it is dimmed and a tap on it closes the sheet. (The bar's blur is dropped here: a filter on an
   ancestor would anchor the fixed sheet to the bar instead of the screen; the bar's ground is opaque enough without it.) */
@media (max-width: 700px) {
  .abar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(250, 247, 240); }
  .cmp { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; border: 0; background: none; box-shadow: none; }
  .cmp[hidden] { display: none; }
  .cmp__bd { display: block; position: absolute; inset: 0; background: rgba(11, 11, 10, .46); animation: cmpFade .25s ease both; }
  .cmp__in { width: 100%; max-width: none; margin: 0; max-height: min(75vh, 620px); display: flex; flex-direction: column; padding: 1rem var(--gut) calc(1rem + env(safe-area-inset-bottom)); background: var(--paper); border-top: 2px solid var(--gold); box-shadow: 0 -24px 48px -26px rgba(11, 11, 10, .6); animation: cmpUp .34s var(--ease) both; }
  .cmp__s input { width: 100%; }
  .cmp__list { flex: 1 1 auto; min-height: 0; max-height: none; margin-top: .8rem; }
}
@keyframes cmpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmpUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cmp__bd, .cmp__in { animation: none; } }
@media (max-width: 420px) {
  .abar__x2 { display: none; } /* "← New": the three actions fit a 360 px screen */
  .abar__acts { gap: .9rem; }
  .abar button { letter-spacing: .08em; }
}

/* ---------- loading / error ---------- */
.load { padding-block: clamp(4rem, 12vh, 7rem); max-width: 760px; }
.load__sel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.6rem 0 0; border-top: 1px solid var(--rule); }
.load__sel div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line); }
.load__sel dt { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.load__sel dd { margin: .5rem 0 0; font: 500 1.4rem/1.2 var(--serif); }
.load__sel s { color: var(--ink-3); text-decoration-thickness: 1px; }
.load__steps { list-style: none; margin: 2.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.load__steps li { display: inline-flex; align-items: center; gap: 1.1rem; }
.load__steps li + li::before { content: "→"; color: var(--sand); letter-spacing: 0; }
.load__steps li.is-done { color: var(--ink-2); }
.load__steps li.is-on { color: var(--ink); }
.load__steps li.is-on::after { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--gold) 0 40%, transparent 40%); background-size: 200% 100%; animation: ld 1.1s linear infinite; }
@keyframes ld { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.load__t { font: 500 var(--fs-h2)/1.1 var(--serif); margin: .9rem 0 0; }
.load__m { font-size: var(--fs-body); color: var(--ink-2); margin: .8rem 0 0; max-width: 60ch; }
.load--err .kicker::before { background: var(--bad); }
@media (max-width: 640px) { .load__sel { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================================================
   REPORT — an analyst's document: a left rail (number · label) beside the content, each section on its own
   full-bleed ground (part 24). The ground is painted with a clipped box-shadow, so it spans the viewport
   without widening the page.
   ===================================================================================================== */
#reportRoot { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.sec { --sec-bg: var(--sec-market); display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding-block: var(--sec-pad); scroll-margin-top: calc(56px + var(--abar-h) + 8px); }
#reportRoot > .sec:not(.sec--route) { background: var(--sec-bg); box-shadow: 0 0 0 100vmax var(--sec-bg); clip-path: inset(0 -100vmax); }
#product { --sec-bg: var(--sec-product); }
#snapshot, #demand, #supply { --sec-bg: var(--sec-market); }
#price { --sec-bg: var(--sec-price); }
#logistics { --sec-bg: var(--sec-logistics); }
#terms, #risk { --sec-bg: var(--sec-risk); }
#sources { --sec-bg: var(--sec-sources); }
#suggestion, #author { --sec-bg: var(--sec-ai); }
#next { --sec-bg: var(--sec-final); }
/* a hairline only where two sections share a ground */
#demand, #risk, #author { border-top: 1px solid var(--line); }
.sec > * { grid-column: 2; min-width: 0; }
.sec > .sec__h { display: contents; }
/* the rail sits above an opened area's full-bleed ground (a clipped box-shadow paints late): its number is never cut */
.sec__rail { grid-column: 1; grid-row: 1 / span 60; align-self: start; position: sticky; z-index: 3; top: calc(var(--hd-now) + var(--abar-h) + 28px); display: flex; flex-direction: column; gap: .6rem; padding-top: .7rem; border-top: 1px solid var(--rule); }
.sec__n { font: 400 2rem/1 var(--serif); color: var(--gold-ink); font-variant-numeric: lining-nums; }
.sec__n:empty { display: none; }
.sec__k { font: 700 var(--fs-micro)/1.45 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.sec__main { grid-column: 2; margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); max-width: 72ch; }
.sec__main:empty { display: none; }
.sec__main .lead { margin-top: 1rem; }
@media (max-width: 900px) {
  .sec { grid-template-columns: minmax(0, 1fr); }
  .sec > *, .sec__main { grid-column: 1; }
  .sec__rail { grid-row: auto; position: static; flex-direction: row; align-items: baseline; gap: .9rem; border-top: 0; padding-top: 0; margin-bottom: 1rem; }
  .sec__n { font-size: 1.4rem; }
}
.sub { margin-top: clamp(2.8rem, 6vw, 4.4rem); padding-top: clamp(1.8rem, 3.4vw, 2.6rem); border-top: 1px solid var(--line); }
.sub:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.sub__h { margin-bottom: 1.8rem; max-width: 68ch; }
.sub__t { font: 500 var(--fs-h3)/1.15 var(--serif); margin: .6rem 0 0; }
.spec .sub__t, .prod__id dd, .an__m dd, .facts dd, .kv__v, .chd__v, .fig5__v, .bars__v, .sug__m { font-variant-numeric: lining-nums; } /* codes and figures: lining numerals, prose keeps old-style */
.sub__t em { color: var(--gold-ink); font-weight: 400; }
/* FLAGS — one frame everywhere a country is named: 4:3, a hairline edge drawn over the image, a 2 px radius, a stone
   ground while it loads (never an empty box), true colour */
img.flag, .st__flag, .mkt__f, .mc__f, .xm__f, .abar__sum img, .bars__n img, .sl__c img, .sug__m img, .sug__also img, .st5__t tbody th img { display: inline-block; object-fit: cover; border-radius: 2px; outline: 1px solid var(--flag-edge); outline-offset: -1px; background: var(--flag-ground); box-shadow: none; filter: none; opacity: 1; }
/* …except the two flags of the lane (analysis bar, report header): there a stone frame beside the country's name reads as a
   grey box, so until the image has loaded (ui.js flag(): data-fl) its place is kept and nothing is drawn (QA 11 #72) */
.abar__sum img[data-fl], .rh__lane img.rh__f[data-fl] { background: none; outline-color: transparent; box-shadow: none; }
img.flag { width: 20px; height: 15px; vertical-align: -.1em; }
img.flag--h { width: 26px; height: 19.5px; vertical-align: .02em; margin-right: .15em; }

/* 01 PRODUCT */
.sec--product { padding-top: clamp(2.6rem, 1.2rem + 4vw, 5rem); }
.prod { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.6rem, 4vw, 3.6rem); align-items: start; }
.prod__t { font: 500 var(--fs-product)/1 var(--serif); letter-spacing: -.012em; margin: 1rem 0 0; }
.prod__dest { margin: .45rem 0 0; font: 400 clamp(1.3rem, 1.1rem + .8vw, 1.75rem)/1.2 var(--serif); color: var(--ink-2); }
.prod__dest em { color: var(--gold-ink); }
.prod__id { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 2rem 0 0; border-top: 1px solid var(--rule); }
.prod__id > div { padding: .9rem 1rem .85rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.prod__id > div:nth-child(2n) { padding-left: 1.1rem; border-left: 1px solid var(--line); }
.prod__id dt { font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.prod__id dd { margin: .45rem 0 0; font: 500 1.18rem/1.3 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.prod__id dd small { display: block; font: 500 var(--fs-meta)/1.45 var(--sans); color: var(--ink-3); margin-top: .15rem; }
.prod__hs { margin: 1.2rem 0 0; font-size: var(--fs-support-s); color: var(--ink-2); max-width: 70ch; }
.prod__sw { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-top: .6rem; }
.prod__sw .micro { margin-right: .3rem; }
.prod__sw button { background: none; border: 1px solid var(--line-2); padding: .5rem .8rem; min-height: 40px; font: 600 var(--fs-meta)/1 var(--mono); color: var(--ink); cursor: pointer; transition: border-color .3s, background .3s; }
.prod__sw button:hover { border-color: var(--ink); background: var(--hover-bg); }
.prod__fig { margin: 0; }
.prod__fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.prod__fig figcaption { margin-top: .7rem; font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.45; }
.prod__fig--ill .prod__ill { aspect-ratio: 4 / 3; display: grid; align-content: center; justify-items: center; gap: .6rem; border: 1px solid var(--sand); background: var(--paper); text-align: center; padding: 2rem; }
.prod__ill span { font: 600 var(--fs-meta)/1 var(--mono); color: var(--gold-ink); }
.prod__ill b { font: 500 clamp(1.8rem, 3vw, 2.6rem)/1.05 var(--serif); }
.prod__up { color: var(--ink); border-bottom: 1px solid var(--gold); cursor: pointer; }
.prod__up input { position: absolute; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 900px) { .prod { grid-template-columns: minmax(0, 1fr); } .prod__fig { order: -1; max-width: 560px; } .prod__fig img { aspect-ratio: 16 / 10; } }
@media (max-width: 460px) { .prod__id { grid-template-columns: minmax(0, 1fr); } .prod__id > div:nth-child(2n) { padding-left: 0; border-left: 0; } }
.spec { margin-top: clamp(2.4rem, 5vw, 3.6rem); padding-top: 1.8rem; border-top: 1px solid var(--line); }
.spec__head .lead { font-size: var(--fs-support); }
.spec__grades { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.1rem 0 0; }
.spec__grades button { background: none; border: 1px solid var(--line-2); padding: .55rem .8rem; min-height: 40px; font: 700 var(--fs-micro)/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: var(--ink-2); text-align: left; transition: border-color .3s; }
.spec__grades button:hover { border-color: var(--ink); }
.spec__grades button[aria-pressed="true"] { background: var(--obsidian); color: var(--ivory); border-color: var(--obsidian); }
.spec table { width: 100%; border-collapse: collapse; max-width: 880px; }
.spec th { text-align: left; font: 700 var(--fs-micro)/1.35 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--line); width: 38%; vertical-align: top; }
.spec td { padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-support); vertical-align: top; }
.spec tr.grp th { padding-top: 1.5rem; color: var(--gold-ink); border-bottom: 1px solid var(--rule); }
.spec td .tag { margin-left: .4rem; }
.spec a.cite { font: 500 var(--fs-support-s)/1 var(--sans); color: var(--steel); text-decoration: none; margin-left: .2rem; vertical-align: baseline; }

/* 02 TRADE ROUTE — base rules kept for the route module (assets/css/route.css styles this section; not restyled here) */
/* 02 TRADE ROUTE */
.rte { display: grid; grid-template-columns: minmax(15rem, 17.5rem) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; }
@media (max-width: 1180px) { .rte { grid-template-columns: minmax(0, 1fr); } }
.rstat { padding: 0 0 1.1rem; border-bottom: 1px solid var(--line); }
.rstat__v { margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.rstat__t { margin: .6rem 0 0; font-size: var(--fs-support-s); color: var(--ink-2); line-height: 1.5; }
.rchip { display: inline-flex; align-items: center; gap: .45rem; font: 600 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: .5rem .7rem .46rem; border: 1px solid currentColor; }
.rchip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rchip--verified { color: var(--navy); }
.rchip--supported { color: var(--gold-ink); }
.rchip--inferred { color: var(--ink-3); border-style: dashed; }
.rchip--inferred::before { background: none; border: 1px solid currentColor; }
.rchip--unknown { color: var(--bad); }
.rchip--sub { font-size: var(--fs-micro); letter-spacing: .1em; padding: .42rem .55rem .38rem; }
.rst { font: 600 var(--fs-micro)/1 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .38rem .2rem; border: 1px solid currentColor; margin-right: .3rem; vertical-align: .05em; white-space: nowrap; }
.rst--verified { color: var(--navy); } .rst--supported { color: var(--gold-ink); } .rst--inferred { color: var(--ink-3); border-style: dashed; } .rst--unknown, .rst--unavailable { color: var(--ink-3); border-style: dotted; } .rst--selected { color: var(--steel); }
.rseq { list-style: none; margin: 0; padding: 0; }
.rseq__i { position: relative; padding: .95rem 0 .95rem 1.5rem; border-left: 1px solid var(--line-2); margin-left: .35rem; }
.rseq__i::before { content: ""; position: absolute; left: -5px; top: 1.2rem; width: 9px; height: 9px; border-radius: 50%; background: var(--ivory); border: 1px solid var(--navy); }
.rseq__i--origin::before, .rseq__i--destination::before { background: var(--navy); }
.rseq__i.is-inferred::before { border-style: dashed; border-color: var(--ink-3); }
.rseq__i--transport { padding-block: .6rem; }
.rseq__i--transport::before { left: -4px; width: 7px; height: 7px; border-radius: 0; transform: rotate(45deg); background: var(--gold); border-color: var(--gold); top: 1rem; }
.rseq__i:last-child { border-left-color: transparent; }
.rseq__k { display: block; font: 600 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.rseq__i b { display: block; margin-top: .3rem; font: 500 1.3rem/1.2 var(--serif); }
.rseq__i--transport b { font: 500 var(--fs-support)/1.3 var(--sans); letter-spacing: .02em; color: var(--ink-2); }
.rseq__i small { display: block; margin-top: .3rem; font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.45; }
.rseq__s { max-width: 34ch; }
.rev { margin-top: clamp(1.6rem, 3vw, 2.2rem); max-width: 92ch; }
.rev__lead { margin: 0; font: 400 clamp(1.2rem, 1.1rem + .5vw, 1.45rem)/1.45 var(--serif); color: var(--ink); }
.rev__meta { display: grid; grid-template-columns: repeat(5, minmax(0, auto)); justify-content: start; gap: 0; margin: 1.1rem 0 0; border-top: 1px solid var(--obsidian); }
.rev__meta > div { padding: .8rem 1.4rem .8rem 0; border-bottom: 1px solid var(--line); }
.rev__meta > div + div { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.rev__meta dt { font: 600 var(--fs-micro)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.rev__meta dd { margin: .35rem 0 0; font-size: var(--fs-support); }
@media (max-width: 900px) { .rev__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rev__meta > div + div { padding-left: 0; border-left: 0; } .rev__meta > div:nth-child(2n) { padding-left: 1rem; border-left: 1px solid var(--line); } }
.ralt { margin-top: 1.4rem; }
.ralt ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: var(--fs-support); }
.rqty { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem 1.2rem; margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.rqty label { display: flex; flex-direction: column; gap: .4rem; }
.rqty input { width: 11rem; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; padding: .35rem 0; font: 500 1.2rem/1.2 var(--serif); border-radius: 0; }
.rqty input:focus { outline: none; border-bottom-color: var(--gold); }
.rqty__u { position: absolute; margin: 2.05rem 0 0 11.3rem; font-size: var(--fs-meta); color: var(--ink-3); }
.rqty label { position: relative; }
.rqty .fine { flex-basis: 100%; margin: 0; }

/* the map — deep navy ocean, warm ivory land (drawn on canvas), champagne route */
.film { position: relative; height: clamp(360px, 60vh, 600px); background: #142433; overflow: hidden; isolation: isolate; }
.film--none { display: grid; place-items: center; background: var(--paper); border: 1px dashed var(--line-2); height: 220px; padding: 1.5rem; text-align: center; }
.film--none p { margin: 0; font: 400 italic 1.25rem/1.4 var(--serif); color: var(--ink-2); max-width: 40ch; }
.film canvas.map-base { position: absolute; inset: 0; width: 100%; height: 100%; }
.film svg.map-over { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; touch-action: none; cursor: grab; }
.film svg.map-over.is-drag { cursor: grabbing; }
.film__tag { position: absolute; left: 1rem; top: .9rem; margin: 0; z-index: 4; font: 600 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ivory); background: rgba(20, 36, 51, .82); padding: .45rem .6rem; pointer-events: none; }
.film__stage { position: absolute; left: 1rem; bottom: 1rem; margin: 0; z-index: 4; font: 600 var(--fs-micro)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: rgba(245, 241, 232, .9); padding: .45rem .6rem; pointer-events: none; max-width: calc(100% - 19rem); }
.film__stage:empty { display: none; }
.film__ctrl { position: absolute; z-index: 5; right: 1rem; bottom: 1rem; display: flex; gap: .35rem; }
.film__ctrl button { width: 38px; height: 38px; background: rgba(245, 241, 232, .92); border: 1px solid rgba(20, 36, 51, .25); color: var(--ink); cursor: pointer; font: 400 1rem/1 var(--sans); }
.film__ctrl button:hover { background: var(--white); }
.film__ctrl .wide { width: auto; padding: 0 .8rem; font: 600 var(--fs-micro)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.rt-case { fill: none; stroke: rgba(20, 36, 51, .55); stroke-width: 5; stroke-linecap: round; }
.rt-glow { fill: none; stroke: rgba(212, 189, 140, .16); stroke-width: 9; stroke-linecap: round; }
.rt-line { fill: none; stroke: #C9AE78; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rt-future { fill: none; stroke: rgba(201, 174, 120, .45); stroke-width: 1.1; stroke-dasharray: 3 5; }
.rt--road .rt-line, .rt--rail .rt-line { stroke: #B08F55; stroke-width: 2.4; }
.rt--air .rt-line { stroke: #D4BD8C; stroke-width: 1.6; }
.rt--inferred .rt-line { stroke: #D9CFBD; stroke-width: 1.6; }
.rt--inferred .rt-case { stroke-dasharray: 2 5; }
.mk { cursor: pointer; opacity: 0; transition: opacity .7s var(--ease); }
.mk.is-on { opacity: 1; }
.mk circle.dot { fill: #C9AE78; stroke: #142433; stroke-width: 1.6; }
.mk--x circle.dot { fill: var(--ivory); }
.mk--inf circle.dot { fill: #142433; stroke: #C9AE78; stroke-dasharray: 2 2; }
.mk circle.pulse { fill: none; stroke: #C9AE78; stroke-width: 1; opacity: .6; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .mk circle.pulse { animation: pulse 2.6s ease-out infinite; } }
@keyframes pulse { from { transform: scale(.6); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }
.mk text { fill: #1A1A18; font: 500 12px var(--sans); paint-order: stroke; stroke: rgba(245, 241, 232, .94); stroke-width: 3.5px; stroke-linejoin: round; }
.mk text.k { fill: #6E5B33; font: 600 9.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.mk:focus:not(:focus-visible) { outline: none; } .mk:focus-visible .dot { stroke: var(--ivory); stroke-width: 2.4; }
.routecard { position: absolute; z-index: 6; right: 1rem; top: 3.4rem; width: min(360px, calc(100% - 2rem)); max-height: calc(100% - 7.6rem); overflow: auto; background: rgba(250, 247, 240, .97); border: 1px solid rgba(20, 36, 51, .25); padding: 1.2rem 1.3rem; color: var(--ink); }
.routecard h3 { margin: .5rem 0 .9rem; font: 500 1.5rem/1.1 var(--serif); }
.routecard dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; }
.routecard dt { font: 600 var(--fs-micro)/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.routecard dd { margin: 0; font-size: var(--fs-support-s); }
.routecard small, .routecard em { color: var(--ink-3); }
.routecard__x { position: absolute; right: .6rem; top: .6rem; background: none; border: 0; color: var(--ink); font-size: 1rem; cursor: pointer; width: 32px; height: 32px; }
@media (max-width: 700px) { .film { height: clamp(360px, 68vh, 540px); } .routecard { top: auto; bottom: 3.6rem; left: .6rem; right: .6rem; width: auto; max-height: 62%; } .film__stage { bottom: calc(1rem + 46px); max-width: calc(100% - 2rem); } }

/* 03 MARKET SNAPSHOT — key figures set large (part 26): label small, number large, period and data type tiny beneath */
.five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem clamp(1.2rem, 2.6vw, 2.6rem); margin: 0; padding: 1.7rem 0 1.6rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line); }
.fig5 { min-width: 0; }
.fig5 dt { font: 700 var(--fs-micro)/1.35 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.fig5 dd { margin: .85rem 0 0; display: flex; flex-direction: column; gap: .45rem; }
.fig5__v { font: 500 var(--fs-metric)/1 var(--serif); letter-spacing: -.012em; font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.fig5__s { font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.45; }
.fig5__t { margin-top: .15rem; display: block; line-height: 1.35; }
.u { font: 700 .34em/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-left: .3em; color: var(--ink-3); vertical-align: .38em; }
@media (max-width: 1100px) { .five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .five { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; } .fig5:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.snap__read { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.8rem, 5vw, 4.5rem); align-items: start; margin-top: clamp(2.4rem, 5vw, 3.8rem); }
.snap__read .lede, .snap__read .callout { margin: 0; }
@media (max-width: 1000px) { .snap__read { grid-template-columns: minmax(0, 1fr); } }
.block { margin: 0 0 2rem; padding: 1.15rem 1.35rem; background: var(--bad-bg); border-left: 2px solid var(--bad); }
.block .micro { color: var(--bad); }
.block p { margin: .5rem 0 0; font: 500 1.12rem/1.45 var(--serif); }
.block .fine { font: 400 var(--fs-meta)/1.5 var(--sans); color: var(--ink-2); }
.qty { margin: 1.4rem 0 0; font-size: var(--fs-support); color: var(--ink-2); }
.qty b { font: 500 1.12rem/1 var(--serif); color: var(--ink); }
.cond summary { color: var(--bad); border-bottom-color: var(--bad); }
.cond .cond__t { font: 500 1.15rem/1.4 var(--serif); margin: .9rem 0 0; max-width: 60ch; }
.cond ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.cond li { font-size: var(--fs-support); color: var(--ink-2); padding-left: 1rem; border-left: 1px solid var(--bad); }

/* CHARTS (part 28) — thin marks, a restrained grid, no frame; the latest period set large above the chart and a subtle
   highlight on the latest point; each chart is drawn per layout width and the layout that fits is shown */
.fig { margin: 0; min-width: 0; container-type: inline-size; }
.fig figcaption { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .9rem; font-size: var(--fs-meta); color: var(--ink-3); }
.lg::before { content: ""; display: inline-block; width: 16px; height: 1.5px; margin-right: .5rem; vertical-align: middle; background: currentColor; }
.lg--bar { color: var(--navy); } .lg--bar::before { width: 9px; height: 9px; }
.lg--gold { color: var(--gold); } .lg--blue { color: var(--steel); }
.ch { width: 100%; height: auto; overflow: visible; }
.ch--r { display: block; aspect-ratio: var(--ar-x); }
.ch--r > .ch__l { display: none; }
.ch--r > .ch__l--x { display: inline; }
@container (max-width: 779.98px) { .ch--r { aspect-ratio: var(--ar-l); } .ch--r > .ch__l--x { display: none; } .ch--r > .ch__l--l { display: inline; } }
@container (max-width: 619.98px) { .ch--r { aspect-ratio: var(--ar-m); } .ch--r > .ch__l--l { display: none; } .ch--r > .ch__l--m { display: inline; } }
@container (max-width: 479.98px) { .ch--r { aspect-ratio: var(--ar-s); } .ch--r > .ch__l--m { display: none; } .ch--r > .ch__l--s { display: inline; } }
.ch .grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.ch .grid--base { stroke: var(--line-2); }
.ch .ax { fill: var(--ink-3); font: 500 11.5px var(--sans); }
.ch .ax-u { font: 700 11px var(--sans); letter-spacing: .14em; }
.ch .xl { fill: var(--ink-2); } .ch .xl.is-last { fill: var(--ink); font-weight: 800; }
.ch .bar { fill: var(--navy); opacity: .78; transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.2s var(--ease), opacity .3s; transition-delay: calc(var(--i, 0) * 60ms); }
.ch .bar.is-last { opacity: 1; }
.ch .bar.flag { fill: var(--blue-2); } .ch .bar:hover, .ch .bar:focus { opacity: 1; outline: none; }
.ch .line { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ch .line.s-trade { stroke-width: 1.6; } .ch .line.s-blue { stroke: var(--steel); stroke-width: 1.2; stroke-dasharray: 5 4; }
.ch .line.s-bench { stroke: #97804F; stroke-width: 1.2; stroke-dasharray: 5 4; } .ch .line.s-quote { stroke: var(--gold); stroke-width: 1.2; }
.ch .dot { fill: var(--sec-bg, var(--ivory)); stroke: var(--gold); stroke-width: 1.4; } .ch .dot.s-blue { stroke: var(--steel); } .ch .dot.s-bench { stroke: #97804F; }
.ch .dot.is-last { fill: var(--gold); }
.ch .halo { fill: none; stroke: var(--gold); stroke-width: 1; stroke-opacity: .5; }
.ch .dl { fill: var(--ink); font: 800 13px var(--sans); letter-spacing: .01em; paint-order: stroke; stroke: var(--sec-bg, var(--ivory)); stroke-width: 4px; stroke-linejoin: round; }
.ch .qdot { fill: var(--gold); stroke: var(--sec-bg, var(--ivory)); stroke-width: 1.2; }
.ch .qbar { stroke: var(--gold); stroke-width: 5; opacity: .3; stroke-linecap: round; }
.ch .ref { stroke: var(--gold); stroke-dasharray: 3 4; } .ch .refdot { fill: var(--gold); }
.ch [data-tip] { cursor: help; }
@media (prefers-reduced-motion: no-preference) {
  .fig:not(.in) .ch .bar { transform: scaleY(0); }
  .ch .draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2s var(--ease) .25s; }
  .fig:not(.in) .ch .draw { stroke-dashoffset: 1; }
  .ch .halo, .ch .dot.is-last, .ch .dl { transition: opacity .8s ease 1.5s; }
  .fig:not(.in) .ch .halo, .fig:not(.in) .ch .dot.is-last, .fig:not(.in) .ch .dl { opacity: 0; }
}
/* the latest values, set large above the chart */
.chd { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem clamp(1.8rem, 5vw, 4rem); margin: 0 0 1.6rem; }
.chd__n { order: -1; flex-basis: 100%; margin: 0; font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.chd__i { margin: 0; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.chd__k { display: inline-flex; align-items: center; font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.chd__v { font: 500 var(--fs-metric)/1 var(--serif); letter-spacing: -.012em; font-variant-numeric: lining-nums; }
/* time-view tabs: understated, underlined */
.seg { display: inline-flex; flex-wrap: wrap; justify-self: start; width: max-content; max-width: 100%; gap: 0 1.1rem; margin: 0 0 1.8rem; border-bottom: 1px solid var(--line); }
.seg button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .7rem .2rem .6rem; min-width: 2rem; min-height: 40px; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; transition: color .3s, border-color .3s; }
.seg button:hover:not([disabled]) { color: var(--ink); }
.seg button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.seg button[disabled] { opacity: .38; cursor: not-allowed; }
/* grid children may shrink below their content (charts scale inside their own box instead of widening the page) */
.split > *, .sup > *, .an > *, .terms > *, .rte > *, .prod > *, .sug__pair > *, .sug__cols > *, .req__in > *, .snap__read > * { min-width: 0; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr); } }
.facts { margin: clamp(2rem, 4vw, 2.8rem) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1.4rem clamp(1.2rem, 3vw, 2.6rem); padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.facts dt { font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: .55rem 0 0; font: 500 1.2rem/1.4 var(--serif); }
.facts dd.facts__t { margin-top: .45rem; font: 400 var(--fs-micro)/1.35 var(--sans); display: block; }
.kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1.6rem clamp(1.2rem, 2.6vw, 2.6rem); padding: 1.7rem 0 1.6rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line); margin-bottom: clamp(2.2rem, 4vw, 3rem); }
.kv { min-width: 0; }
.nw { white-space: nowrap; }
.kv__k { font: 700 var(--fs-micro)/1.35 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.kv__v { font: 500 var(--fs-metric)/1.02 var(--serif); margin-top: .8rem; letter-spacing: -.012em; font-variant-numeric: lining-nums; }
.kv__v--range { font-size: clamp(1.5rem, 1.25rem + .7vw, 2.1rem); }
.kv__s { font-size: var(--fs-meta); color: var(--ink-3); margin-top: .45rem; line-height: 1.45; }
.kv__t { margin-top: .5rem; display: block; line-height: 1.35; }
.plg { display: grid; gap: .9rem; margin-top: 1.4rem; }
.fig figcaption.plg { display: grid; }
.plg__g { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .4rem 1rem; align-items: start; }
.plg__g > .tag { justify-self: start; border: 0; padding: .1rem 0 0; }
.plg__l { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; }
.plg__i { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.35; }
.plg__k { flex: none; width: 16px; height: 10px; position: relative; }
.plg__k::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: var(--c); }
.plg__k--quotation::before, .plg__k--benchmark::before { left: 3px; right: 3px; top: 0; height: 10px; border-radius: 50%; }
.plg__k--world::before { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
.plg__k--s::before { border-radius: 0 !important; } .plg__k--t::before { border-radius: 0 !important; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.plg__shapes { font-size: var(--fs-meta); color: var(--ink-3); margin: .2rem 0 0; }
@media (max-width: 600px) { .plg__g { grid-template-columns: minmax(0, 1fr); } }
.orefs { margin-top: 1.8rem; } .orefs ul { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: var(--fs-support); }
.orefs b { font: 500 1.05rem/1.3 var(--serif); } .orefs span { color: var(--ink-3); }

/* calendar (within 04 DEMAND) */
.cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .45rem; }
.cal li { border-top: 1px solid var(--line-2); padding: .9rem .2rem; text-align: center; display: flex; flex-direction: column; gap: .5rem; }
.cal b { font: 500 1.05rem/1 var(--serif); }
.cal i { display: block; height: 84px; position: relative; } .cal i::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: calc(var(--h) * 100%); background: var(--sand); }
.cal span { font: 700 var(--fs-micro)/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cal .is-higher { border-top-color: var(--navy); } .cal .is-higher i::after { background: var(--navy); } .cal .is-higher span { color: var(--navy); }
.cal .is-lower i::after { background: rgba(105, 99, 90, .3); }
@media (max-width: 760px) { .cal { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 1.1rem; } .cal i { height: 56px; } .cal span { letter-spacing: .02em; } }

/* 06 COMPETING ORIGINS */
.sup { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.6rem, 4.5vw, 3.6rem); align-items: start; }
@media (max-width: 1000px) { .sup { grid-template-columns: minmax(0, 1fr); } }
.cmap svg { width: 100%; height: auto; }
.cmap path { fill: #E3DBCB; stroke: var(--sec-bg, var(--ivory)); stroke-width: .5; transition: opacity .3s; }
.cmap path.is-dest { fill: var(--gold) !important; } .cmap path.is-origin { stroke: var(--gold-ink); stroke-width: 1.4; }
.cmap path[data-tip] { cursor: help; } .cmap path[data-tip]:hover { opacity: .8; }
.bars__h { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .75rem; font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.bars { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.bars li { display: grid; grid-template-columns: minmax(118px, 200px) minmax(0, 1fr) 76px; gap: .35rem 1.2rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.bars__n { display: flex; align-items: center; gap: .65rem; font: 500 1.14rem/1.2 var(--serif); min-width: 0; }
.bars__n img { width: 20px; height: 15px; flex: none; }
.bars__t { height: 3px; background: var(--line); position: relative; }
.bars__t i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--navy); transform-origin: 0 50%; }
.bars li.is-origin .bars__t i { background: var(--gold); }
.bars li.is-origin .bars__n { font-weight: 600; }
.bars__v { font: 500 1.32rem/1 var(--serif); font-variant-numeric: lining-nums; text-align: right; }
.bars__x { grid-column: 2 / -1; font: 500 var(--fs-meta)/1.2 var(--mono); color: var(--ink-3); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bars__t i { animation: barin linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@keyframes barin { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 600px) { .bars li { grid-template-columns: minmax(0, 1fr) 70px; } .bars__t { grid-column: 1 / -1; order: 3; } .bars__x { grid-column: 1 / -1; order: 4; } }

/* 07 MARKET CONDITIONS */
.an { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4.5vw, 3.6rem); }
@media (max-width: 1000px) { .an { grid-template-columns: minmax(0, 1fr); } }
.an .micro { margin-top: 1.6rem; }
.an__m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; margin: 0 0 1.2rem; border-top: 1px solid var(--rule); }
.an__m > div { padding: 1.1rem 0 1rem; border-bottom: 1px solid var(--line); min-width: 0; }
.an__m dt { font: 700 var(--fs-micro)/1.35 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.an__m dd { margin: .6rem 0 .35rem; font: 500 var(--fs-metric)/1.05 var(--serif); font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.an__m dd.an__s { font-size: 1.1rem; line-height: 1.4; }
.an__m > div > small { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; font-size: var(--fs-meta); color: var(--ink-3); }
.an p { font-size: var(--fs-support); color: var(--ink-2); }
.an__list { list-style: none; counter-reset: an; margin: .9rem 0 0; padding: 0; }
.an__list li { counter-increment: an; display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto 3rem; gap: .6rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.an__list li::before { content: counter(an, decimal-leading-zero); font: 600 var(--fs-meta)/1 var(--mono); color: var(--gold-ink); }
.an__list span { font: 500 1.08rem/1.2 var(--serif); } .an__list b { font: 600 var(--fs-support-s)/1 var(--mono); } .an__list i { font: 500 var(--fs-meta)/1 var(--mono); font-style: normal; color: var(--ink-3); text-align: right; }
.an__p { list-style: none; margin: .8rem 0 1.5rem; padding: 0; display: grid; gap: .85rem; }
.an__p li { font-size: var(--fs-support); color: var(--ink-2); } .an__p b { display: block; font: 500 1.1rem/1.3 var(--serif); color: var(--ink); }
.an__img { margin: 0 0 1rem; } .an__img img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.an__img figcaption { font-size: var(--fs-meta); color: var(--ink-3); margin-top: .5rem; }

/* 08 LOGISTICS — deep blue ground */
.lgx { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 clamp(1.2rem, 2.6vw, 2.4rem); margin: 0; border-top: 1px solid var(--rule); }
.lgx > div { padding: 1.2rem 0 1.15rem; border-bottom: 1px solid var(--line); min-width: 0; }
.lgx dt { font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.lgx dd { margin: .6rem 0 0; }
.lgx dd b { display: block; font: 500 1.3rem/1.25 var(--serif); }
.lgx dd b .rst { font-family: var(--sans); }
.lgx dd b small { font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--ink-3); }
.lgx dd > span { display: block; font-size: var(--fs-support-s); color: var(--ink-2); margin-top: .4rem; line-height: 1.55; }
#logistics .rst--verified { color: var(--ink); } #logistics .rst--supported { color: var(--gold-ink); } #logistics .rst--inferred { color: var(--ink-2); border-style: dashed; } #logistics .rst--unknown, #logistics .rst--unavailable { color: var(--bad); }
.lgc { margin-top: 2.4rem; }
.conds { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; }
.conds li { font-size: var(--fs-support); color: var(--ink-2); padding-left: 1rem; border-left: 1px solid var(--bad); max-width: 90ch; }
.conds li b { color: var(--ink); }
.lgm { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.2rem; margin-top: 2.8rem; }
.lgm__i { margin: 0; }
.lgm__i img, .lgm__i video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--obsidian); }
.lgm__i figcaption { font-size: var(--fs-meta); color: var(--ink-2); margin-top: .6rem; line-height: 1.45; }
.lgm__i figcaption span { display: block; color: var(--ink-3); margin-top: .15rem; }
.lgm[data-n="1"] .lgm__i img, .lgm[data-n="1"] .lgm__i video { aspect-ratio: 21 / 9; }

/* 09 PAYMENT & TERMS — warm grey ground (with 10 RISK) */
.terms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4.5vw, 3.6rem); }
@media (max-width: 900px) { .terms { grid-template-columns: minmax(0, 1fr); } }
.terms ul { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.term { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); gap: .4rem 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line-2); }
.term__c { font: 500 1.32rem/1 var(--serif); }
.term__l { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: .34rem .5rem .3rem; border: 1px solid var(--line-2); white-space: nowrap; }
.term__x { grid-column: 2 / -1; font-size: var(--fs-support-s); color: var(--ink-2); }
.lab--commonly-observed, .lab--common { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.lab--possible { border-color: var(--steel); color: var(--steel); }
.lab--counterparty-dependent, .lab--bank-dependent, .lab--subject-to-counterparty, .lab--subject-to-buyer-bank { background: rgba(255, 255, 255, .45); border-color: rgba(26, 26, 24, .2); }
.lab--not-generally-available { border-color: var(--bad); color: var(--bad); }
.lab--not-commonly-observed { color: var(--ink-3); }
.term__s { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.term__q { font: 700 var(--fs-micro)/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--bad); }
.terms__key { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 1.6rem 0 0; font-size: var(--fs-support-s); color: var(--ink-3); }
.terms__key dt { display: inline; font-weight: 700; color: var(--ink-2); } .terms__key dd { display: inline; margin: 0 0 0 .35rem; }
.lab--insufficient-reliable-data { border-style: dashed; color: var(--ink-3); }
@media (max-width: 420px) { .term { grid-template-columns: 56px minmax(0, 1fr); } .term__l { justify-self: start; white-space: normal; line-height: 1.25; } }

/* 10 RISK & COMPLIANCE */
.an__r { margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; }
.an__r .micro { flex-basis: 100%; }
.an__r a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.an__r b { font-weight: 600; }
.risks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border-top: 1px solid var(--rule); }
.risk { background: var(--sec-bg, var(--bg)); padding: 1.5rem 1.4rem 1.6rem 0; display: flex; flex-direction: column; gap: 1rem; }
.risk:not(:nth-child(3n + 1)) { padding-left: 1.4rem; }
.risk__h { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.risk__c { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.risk__l { font: 500 1.5rem/1 var(--serif); color: var(--ink-2); }
.risk.is-high .risk__l { color: var(--bad); }
.risk.is-high { box-shadow: inset 0 2px 0 var(--bad); }
.risk.is-na .risk__l { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: .3rem .45rem; border: 1px dashed var(--line-2); }
.risk__d { margin: 0; display: grid; gap: .8rem; font-size: var(--fs-support); color: var(--ink-2); }
.risk__d dt { font: 700 var(--fs-micro)/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .3rem; }
.risk__d dd { margin: 0; line-height: 1.55; }
.risk .srcline { margin: auto 0 0; }
.srcline__more { white-space: nowrap; color: var(--ink-3); }
@media (max-width: 1000px) { .risks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .risk:not(:nth-child(3n + 1)) { padding-left: 0; } .risk:nth-child(2n) { padding-left: 1.4rem; } }
@media (max-width: 640px) { .risks { grid-template-columns: minmax(0, 1fr); } .risk, .risk:nth-child(2n) { padding: 1.4rem 0; } }
.comp-note { margin-top: 2.8rem; font: 500 italic clamp(1.15rem, 1.05rem + .45vw, 1.4rem)/1.55 var(--serif); border-left: 2px solid var(--gold); padding-left: 1.3rem; max-width: 72ch; }
.comp-note .kicker, .comp-note .micro { font-style: normal; }
.comp { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: 90ch; }
.comp li { padding-top: 1rem; border-top: 1px solid var(--line-2); }
.comp small { display: block; font: 700 var(--fs-micro)/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.comp b { display: block; font: 500 1.14rem/1.3 var(--serif); margin-top: .35rem; }
.comp p { margin: .35rem 0 .5rem; font-size: var(--fs-support); color: var(--ink-2); }

/* 11 SOURCES */
.srcs { width: 100%; border-collapse: collapse; min-width: 640px; }
.srcs th { text-align: left; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--rule); }
.srcs td { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-support-s); color: var(--ink-2); vertical-align: top; }
.srcs td.n { font: 600 var(--fs-meta)/1.6 var(--mono); color: var(--gold-ink); }
.srcs td b { display: block; font-weight: 600; color: var(--ink); }
.srcs td a { font: 500 var(--fs-meta)/1.5 var(--mono); color: var(--steel); word-break: break-all; }
.srcs tr:target td { background: rgba(181, 154, 104, .16); }
.tblwrap { overflow-x: auto; }
.tblwrap.is-clamped tbody tr:nth-child(n+11) { display: none; }
.showall { margin-top: 1rem; min-height: 40px; background: none; border: 0; border-bottom: 1px solid var(--gold); padding: .55rem 0; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; }
.fresh { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); column-gap: 1.6rem; border-top: 1px solid var(--rule); }
.fresh li { padding: .95rem 0; border-bottom: 1px solid var(--line); }
.fresh span { display: block; font-size: var(--fs-support-s); } .fresh b { display: block; font: 700 var(--fs-micro)/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--data); margin-top: .2rem; }
.fresh em { display: block; font: 500 var(--fs-meta)/1.45 var(--mono); color: var(--ink-3); font-style: normal; margin-top: .2rem; }
.fresh.credits { grid-template-columns: minmax(0, 1fr); }
.credits li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .2rem 1rem; font-size: var(--fs-support-s); }
.credits li > span { font: 700 var(--fs-micro)/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 600px) { .credits li { grid-template-columns: minmax(0, 1fr); } }
.method { font-size: var(--fs-support); color: var(--ink-2); display: grid; gap: .55rem; padding-left: 1.1rem; }

/* 12 AI MARKETING SUGGESTION — very light champagne ground */
.sug .sec__main .lead { font: 400 italic clamp(1.15rem, 1.05rem + .45vw, 1.4rem)/1.5 var(--serif); color: var(--ink-2); }
.sug__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line-2); }
.sug__pair > div { padding: 1.3rem 1.2rem 1.35rem 0; }
.sug__pair > div + div { padding-left: clamp(1.2rem, 3vw, 2.4rem); border-left: 1px solid var(--line-2); }
.sug__k { display: block; font: 700 var(--fs-micro)/1.35 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.sug__m { display: flex; align-items: center; gap: .65rem; margin: .65rem 0 0; font: 500 clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem)/1.05 var(--serif); }
.sug__m img { width: 28px; height: 21px; flex: none; }
.sug__m.is-alt { color: var(--gold-ink); }
.sug__txt { margin: clamp(2rem, 4vw, 2.8rem) 0 0; max-width: 72ch; }
.sug__txt .callout { margin: 0; max-width: none; }
.sug__txt .callout__t { font-size: clamp(1.25rem, 1.08rem + .7vw, 1.62rem); line-height: 1.5; }
.sug__conf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0; font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--ink-3); }
.sug__notes { margin-top: 1.4rem; max-width: 72ch; }
.sug__why { margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.sug__why h3 { margin: 0; font: 500 var(--fs-h3)/1.2 var(--serif); }
.sug__why ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.sug__why li { padding-left: 1.4rem; position: relative; font-size: var(--fs-body); }
.sug__why li::before { content: ""; position: absolute; left: 0; top: .78em; width: 11px; height: 1px; background: var(--gold); }
.sug__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.2rem); margin-top: clamp(2.2rem, 4vw, 3rem); }
.sug__f { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: var(--fs-support-s); color: var(--ink-2); }
.sug__f li { padding-left: .95rem; border-left: 1px solid var(--line-2); }
.sug__f small { color: var(--ink-3); }
.sug__also { margin: 2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; font: 500 1.15rem/1.3 var(--serif); }
.sug__also img { width: 20px; height: 15px; vertical-align: -.1em; }
@media (max-width: 760px) { .sug__pair, .sug__cols { grid-template-columns: minmax(0, 1fr); } .sug__pair > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-2); } }

/* 13 AMIR MOHAMMAD MOUSAPOUR — a report signature, not a team card */
.sig { display: flex; justify-content: flex-start; }
.sig__a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "k k" "img n" "img r" "img o"; column-gap: 1.25rem; row-gap: .2rem; align-items: center; text-decoration: none; color: inherit; padding: 1.5rem 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); min-width: min(100%, 470px); cursor: pointer; }
.sig__k { grid-area: k; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.1rem; }
.sig__img { grid-area: img; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 1px solid var(--gold); padding: 2px; background: var(--ivory); transition: transform .5s var(--ease); }
.sig__img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sig__n { grid-area: n; display: inline-flex; align-items: center; gap: .45rem; font: 500 1.65rem/1.15 var(--serif); transition: color .3s; }
.sig__li { color: var(--steel); opacity: 0; transform: translateX(-3px); transition: opacity .3s, transform .3s; }
.sig__r { grid-area: r; font: 700 var(--fs-micro)/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.sig__o { grid-area: o; font: 700 var(--fs-micro)/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); }
.sig__a:hover .sig__img, .sig__a:focus-visible .sig__img { transform: scale(1.05); }
.sig__a:hover .sig__n, .sig__a:focus-visible .sig__n { color: var(--navy); }
.sig__a:hover .sig__li, .sig__a:focus-visible .sig__li { opacity: 1; transform: none; }
@media (max-width: 560px) { .sig__img { width: 56px; height: 56px; } .sig__n { font-size: 1.4rem; } .sig__a { min-width: 0; width: 100%; } }

/* 14 FROM DATA TO TRADE — obsidian final call to action */
#next .sec__main { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.fin__a { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.3rem; }
/* the final call to action carries the whole selection: product, grade, origin, destination, quantity */
#next .fin__st { margin: 0 0 1.8rem; }
#next .btn--dark { background: var(--gold); border-color: var(--gold); color: var(--obsidian); }
#next .btn--dark:hover { background: var(--ivory); border-color: var(--ivory); }

/* request form — obsidian, continues the final call to action */
.req { background: var(--sec-final); padding-block: var(--sec-pad); }
body[data-view="report"] .req { padding-top: 0; position: relative; box-shadow: 0 -2px 0 var(--sec-final); } /* covers the sub-pixel seam where two obsidian grounds meet */
/* the hairline between the final call to action and the form spans the content column only, not the gutters */
body[data-view="report"] .req__in { padding-top: var(--sec-pad); background: linear-gradient(var(--line), var(--line)) no-repeat var(--gut) 0 / calc(100% - 2 * var(--gut)) 1px; }
.req .kicker { color: var(--ink-3); }
.req__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 900px) { .req__in { grid-template-columns: minmax(0, 1fr); } }
.req__t { font: 500 var(--fs-h2)/1.05 var(--serif); margin: .9rem 0 0; letter-spacing: -.01em; }
.req__t em { color: var(--gold-2); font-weight: 400; }
.req__l { color: var(--ink-2); max-width: 48ch; font-size: var(--fs-body); margin: 1rem 0 0; }
.req form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem 1.6rem; }
.req label span { display: block; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .55rem; }
.req input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: .55rem 0; min-height: 40px; color: var(--ink); font: 500 1.18rem/1.3 var(--serif); border-radius: 0; }
.req input::placeholder { color: var(--ink-3); font-style: italic; opacity: 1; }
.req input:focus { outline: none; border-bottom-color: var(--gold); }
.req__a { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .9rem 1.3rem; align-items: center; margin-top: .5rem; }
.req .btn--dark { background: var(--ivory); color: var(--obsidian); border-color: var(--ivory); }
.req .btn--dark:hover { background: var(--gold); border-color: var(--gold); }
.req__n { font-size: var(--fs-support); color: var(--ink-2); margin: 0; flex-basis: 100%; }
.req__n:empty { display: none; }
@media (max-width: 600px) { .req form { grid-template-columns: minmax(0, 1fr); } }

/* footer — obsidian, grounded */
.foot { background: var(--obsidian); border-top: 1px solid var(--line); padding-block: 2.2rem calc(2.2rem + env(safe-area-inset-bottom)); }
body[data-view="landing"] .foot { padding-bottom: calc(5.6rem + env(safe-area-inset-bottom)); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(2rem, 4vw, 3.4rem) clamp(1.8rem, 3vw, 2.6rem); }
.foot__brand p { margin-top: 1.1rem !important; max-width: 34ch; line-height: 1.6; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2rem; }
.foot__cols h2 { margin: 0 0 1rem; font: 600 var(--fs-micro)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.foot__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.foot__cols a { display: inline-block; padding: .4rem 0; min-height: 36px; font-size: var(--fs-support); color: var(--ink-2); text-decoration: none; transition: color .3s; }
.foot__cols a:hover, .foot__cols a:focus-visible { color: var(--ink); }
.foot__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.foot__bot p { font: 600 var(--fs-micro)/1.4 var(--sans) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3) !important; }
.foot__bot .foot__c { letter-spacing: .06em; text-transform: none; }
@media (max-width: 760px) { .foot__top { grid-template-columns: minmax(0, 1fr); } .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot p { margin: 0; font-size: var(--fs-support-s); color: var(--ink-2); }
.foot p a { text-decoration: none; border-bottom: 1px solid var(--gold); color: var(--ink); }
.foot p a:hover { color: var(--gold-2); }
.foot__c { margin-left: auto !important; font: 500 var(--fs-meta)/1 var(--mono) !important; color: var(--ink-3) !important; }
@media (max-width: 600px) { .foot__c { margin-left: 0 !important; } }

/* page states */
.loading { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; background: var(--obsidian); transition: opacity .6s var(--ease), visibility .6s; }
.loading.is-done { opacity: 0; visibility: hidden; }
.loading__in { display: grid; justify-items: center; gap: 1.3rem; }
.loading__in img { height: 64px; width: auto; }
.loading__bar { width: 110px; height: 1px; background: var(--line-2); overflow: hidden; position: relative; }
.loading__bar::after { content: ""; position: absolute; inset: 0; background: var(--gold); animation: load 1.2s var(--ease) infinite; transform: translateX(-100%); }
@keyframes load { to { transform: translateX(100%); } }
.tip { position: fixed; z-index: 700; max-width: 300px; background: var(--obsidian); color: var(--ivory); font: 500 var(--fs-meta)/1.45 var(--sans); padding: .6rem .8rem; pointer-events: none; border-left: 2px solid var(--gold); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .hd, .abar, .cmp, .film, .rmap, .selbar, .req, .tip, .loading, .fin, .rail, .how, .rqty, .foot { display: none !important; }
  #reportRoot > .sec:not(.sec--route) { box-shadow: none !important; clip-path: none !important; background: #fff !important; }
  .sec { padding-block: 1.4rem; } .sec__rail { position: static; }
  #logistics, #next { --ink: #1A1A18; --ink-2: #45413B; --ink-3: #5F5950; --gold-ink: #6F5B33; --line: rgba(26, 26, 24, .12); --line-2: rgba(26, 26, 24, .24); --rule: #1A1A18; color: #1A1A18; }
}

/* static pages (methodology, data disclaimer): an editorial document on the ivory ground */
.doc { background: var(--ivory); padding-block: var(--sec-pad); }
.doc__h { max-width: 46rem; padding-bottom: clamp(1.6rem, 3vw, 2.4rem); border-bottom: 1px solid var(--rule); }
.doc__t { margin: 1.1rem 0 0; font: 500 var(--fs-h2)/1.05 var(--serif); letter-spacing: -.01em; }
.doc__t em { color: var(--gold-ink); font-weight: 400; }
.doc__l { margin: 1.2rem 0 0; font-size: var(--fs-body); color: var(--ink-2); line-height: 1.7; }
.doc__b { max-width: 46rem; }
.doc__s { padding-block: clamp(1.8rem, 3.5vw, 2.8rem); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--head) + 24px); }
.doc__s h2 { margin: 0; font: 500 var(--fs-h3)/1.15 var(--serif); }
.doc__s p { margin: 1rem 0 0; line-height: 1.75; color: var(--ink-2); }
.doc__s a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.doc__cr ul { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: var(--fs-support-s); line-height: 1.55; color: var(--ink-3); }
.doc__cr li b { font-weight: 600; color: var(--ink-2); margin-right: .35rem; }
.doc__dl { display: grid; gap: 0; margin: 1.2rem 0 0; border-top: 1px solid var(--line); }
.doc__dl div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.doc__dl dt { font: 600 var(--fs-micro)/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.doc__dl dd { margin: 0; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 560px) { .doc__dl div { grid-template-columns: minmax(0, 1fr); gap: .35rem; } }

/* =====================================================================================================================
   Owner's brief 9 — the report as an intelligence document: 16 sections in six chapters, the cover, the product card and
   datasheet, six-figure snapshot with provenance, origin / destination, sources & methodology, explore.
   ===================================================================================================================== */
/* chapters (part 13) and grounds (part 52): hero obsidian · product ivory · route navy · market ivory · price stone ·
   supply ivory · origin & destination muted warm grey · logistics navy · terms & risk warm grey · AI champagne · CTA obsidian */
:root { --sec-understand: #EAE5DC; }
#cover { --sec-bg: var(--obsidian); }
#origin, #destination { --sec-bg: var(--sec-understand); --ink-3: #57514A; --gold-ink: #63512D; --steel: #3F5367; }
#destination { border-top: 1px solid var(--line); }
#cover { --ink: #F5F1E8; --ink-2: #D7D0C3; --ink-3: #ABA396; --gold-ink: #D4BD8C; --steel: #B3C5D6; --line: rgba(245, 241, 232, .13); --line-2: rgba(245, 241, 232, .26); --rule: rgba(245, 241, 232, .55); --focus: var(--gold-2); color: var(--ink); color-scheme: dark; }
.sec__ch { order: -1; font: 700 var(--fs-micro)/1.35 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); padding-bottom: .55rem; margin-bottom: .2rem; border-bottom: 1px solid var(--line-2); }
@media (max-width: 900px) { .sec__ch { flex-basis: 100%; border-bottom: 0; padding-bottom: 0; margin-bottom: -.2rem; } .sec__rail { flex-wrap: wrap; } }

/* 01 MARKET INTELLIGENCE — the cover */
.sec--cover { padding-block: clamp(3rem, 1.6rem + 5vw, 6.5rem) clamp(3rem, 1.4rem + 5vw, 6rem); }
.cov { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr); gap: clamp(2.2rem, 5vw, 5.2rem); align-items: start; }
.cov__brand { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.3rem; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.cov__brand .slogo { min-height: 0; }
.cov__doc { font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); padding-left: 1.3rem; border-left: 1px solid var(--line-2); }
.cov__t { font: 500 clamp(3rem, 1.9rem + 4.4vw, 5.75rem)/.96 var(--serif); letter-spacing: -.018em; margin: 0; text-wrap: balance; }
.cov__lane { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: 1rem 0 0; font: 400 clamp(1.35rem, 1.1rem + 1vw, 2.1rem)/1.2 var(--serif); color: var(--ink-2); }
.cov__lane img.flag { width: 22px; height: 16px; }
.cov__arr { color: var(--gold); font-family: var(--sans); font-size: .8em; }
.cov__id { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(2.2rem, 4vw, 3.2rem) 0 0; border-top: 1px solid var(--rule); }
.cov__id > div { padding: .95rem 1rem .9rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.cov__id dt { font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.cov__id dd { margin: .45rem 0 0; font: 500 var(--fs-support)/1.4 var(--sans); color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: lining-nums tabular-nums; }
.cov__id dd small { display: block; font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--gold-ink); margin-top: .15rem; }
.cov__id code { font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--ink-2); letter-spacing: .02em; word-break: break-all; }
.cov__sum { border-left: 2px solid var(--gold); padding: .1rem 0 .1rem clamp(1.1rem, 2.2vw, 1.8rem); }
.cov__sum p:not(.fine) { margin: .9rem 0 0; font: 400 clamp(1.2rem, 1.05rem + .55vw, 1.5rem)/1.5 var(--serif); color: var(--ink); text-wrap: pretty; }
.cov__toc { margin-top: clamp(2rem, 4vw, 2.8rem); }
.toc { list-style: none; margin: .9rem 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.toc > li { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: .3rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.toc__c { font: 700 var(--fs-micro)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.toc__c b { color: var(--gold-ink); font-weight: 700; margin-right: .35rem; font-variant-numeric: tabular-nums; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem 1rem; }
.toc a { font-size: var(--fs-support-s); color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.toc a:hover { color: var(--ink); border-bottom-color: var(--gold); }
@media (max-width: 1100px) { .cov { grid-template-columns: minmax(0, 1fr); } .cov__id { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .toc > li { grid-template-columns: minmax(0, 1fr); } .cov__doc { padding-left: 0; border-left: 0; flex-basis: 100%; } }

/* 02 PRODUCT — the card (part 12) and the technical datasheet (part 38) */
.prod { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); align-items: stretch; }
.prod__fig img { aspect-ratio: 5 / 4; }
.pcd { display: flex; flex-direction: column; align-items: flex-start; padding-top: .2rem; }
.pcd__k { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.pcd__n { margin: .9rem 0 0; font: 500 clamp(2.4rem, 1.7rem + 2.2vw, 3.6rem)/1 var(--serif); letter-spacing: .04em; text-transform: uppercase; }
.pcd__m { margin: 1.5rem 0 0; display: grid; gap: .55rem; }
.pcd__m div { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); align-items: baseline; gap: .8rem; }
.pcd__m dt { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.pcd__m dd { margin: 0; font: 600 1.05rem/1.35 var(--sans); letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; }
.pcd__m dd small { display: block; font: 500 var(--fs-meta)/1.45 var(--sans); color: var(--ink-3); letter-spacing: 0; margin-top: .1rem; }
.pcd__r { display: block; width: 72px; height: 1px; background: var(--gold); margin: 1.6rem 0 0; }
.pcd__s { margin: 1.3rem 0 0; font: 400 1.15rem/1.5 var(--serif); color: var(--ink-2); max-width: 44ch; }
.pcd .prod__hs { margin-top: 1.2rem; }
.pcd__go { margin-top: auto; padding-top: 1.6rem; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.pcd__go span { color: var(--gold-ink); margin-left: .4rem; }
.spec__std { margin: .6rem 0 0; font-size: var(--fs-support-s); color: var(--ink-3); }
.ds__wrap { overflow-x: auto; margin-top: 1.4rem; }
.ds { width: 100%; max-width: none; border-collapse: collapse; }
.ds thead th { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 0 1rem .8rem 0; border-bottom: 1px solid var(--rule); width: auto; }
.ds tbody th[scope="row"] { font: 500 var(--fs-support-s)/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2); width: auto; padding: .7rem 1.2rem .7rem 0; }
.ds td { padding: .75rem 1rem .75rem 0; }
.ds .ds__v { font: 600 var(--fs-support)/1.45 var(--sans); font-variant-numeric: lining-nums tabular-nums; width: 38%; }
.ds { table-layout: fixed; }
.ds thead th:nth-child(1) { width: 28%; } .ds thead th:nth-child(2) { width: 42%; } .ds thead th:nth-child(3) { width: 30%; }
.ds tbody th[scope="row"], .ds td { vertical-align: top; border-bottom: 1px solid var(--line); }
.ds__wrap.is-clamped .ds__more { display: none; }
.ds__wrap .showall { margin-top: 1.2rem; }
.ds .ds__v small { font-weight: 500; color: var(--ink-3); white-space: normal; }
.ds .ds__s { font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.45; }
.ds .ds__s a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.ds .ds__s a:hover { border-bottom-color: var(--gold); }
.ds .ds__s small { display: block; margin-top: .15rem; font: 700 .625rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ds tr.grp th { padding-top: 1.4rem; font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); border-bottom: 1px solid var(--line-2); }
.ds__x { margin: 1.4rem 0 0; display: grid; gap: .6rem; max-width: 880px; }
.ds__x div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; font-size: var(--fs-support-s); }
.ds__x dt { font: 700 var(--fs-micro)/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.ds__x dd { margin: 0; color: var(--ink-2); }
@media (max-width: 900px) { .prod { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ds thead { display: none; } .ds, .ds tbody, .ds tr, .ds th, .ds td { display: block; width: auto; }
  .ds tbody tr:not(.grp) { padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .ds tbody th[scope="row"], .ds td { padding: 0; border: 0; width: auto; } .ds .ds__v { white-space: normal; margin-top: .2rem; } .ds .ds__s { margin-top: .3rem; }
  .ds__x div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* 04 MARKET SNAPSHOT — six figures, each with its provenance (parts 33, 45, 56) */
.five--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; padding: 0; border-bottom: 0; }
.five--6 .fig5 { padding: 1.5rem 1.6rem 1.5rem 0; border-bottom: 1px solid var(--line); }
.five--6 .fig5:not(:nth-child(3n + 1)) { padding-left: 1.6rem; border-left: 1px solid var(--line); }
.five--6 .fig5__t { display: block; }
.five--6 .fig5__p { flex-direction: row; flex-wrap: wrap; gap: .1rem .9rem; }
.fig5__p { display: flex; flex-direction: column; gap: .12rem; margin-top: .35rem; padding-top: .45rem; border-top: 1px solid var(--line); font-size: .6875rem; line-height: 1.4; color: var(--ink-3); }

@media (max-width: 760px) { .five--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .five--6 .fig5:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; } .five--6 .fig5:nth-child(2n) { padding-left: 1.1rem; border-left: 1px solid var(--line); } .five--6 .fig5 { padding-right: 1.1rem; } }

/* data typography (part 56): large figures in Manrope, medium weight, tight tracking; labels small uppercase */
.fig5__v, .an__m dd, .chd__v, .kv__v, .bars__v, .prod__id dd { font-family: var(--sans); font-weight: 500; letter-spacing: -.028em; }
.fig5__v, .chd__v, .kv__v { font-size: clamp(1.75rem, 1.35rem + .9vw, 2.45rem); }
.an__m dd { font-size: clamp(1.55rem, 1.25rem + .7vw, 2.1rem); }
.an__m dd.an__s { font: 500 1rem/1.4 var(--sans); letter-spacing: 0; }
.an__m dd.an__w { font: 500 clamp(1.2rem, 1.05rem + .4vw, 1.45rem)/1.2 var(--sans); letter-spacing: -.01em; }
.bars__v { font-size: 1.12rem; letter-spacing: -.01em; }
.fig5__v .u, .an__m dd .u, .chd__v .u, .kv__v .u { font: 700 .6875rem/1 var(--sans); letter-spacing: .14em; margin-left: .3rem; color: var(--ink-3); }

/* 08 ORIGIN · 09 DESTINATION */
.an__k { margin: .8rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.an__k > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.an__k dt { font: 700 var(--fs-micro)/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.an__k dd { margin: 0; font-size: var(--fs-support); color: var(--ink-2); line-height: 1.55; }
.an__k dd small { color: var(--ink-3); }
.an__port { padding: 1.2rem 1.3rem .4rem; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .35); margin-bottom: 1.6rem; }
.an__port .micro:first-child { margin-top: 0; }
.an__list li.is-dest span { font-weight: 600; } .an__list li.is-dest span::after { content: " · selected"; font: 600 var(--fs-micro)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.an__c { list-style: none; margin: .8rem 0 1.2rem; padding: 0; display: grid; gap: .7rem; }
.an__c li { font-size: var(--fs-support-s); color: var(--ink-2); padding-left: 1rem; border-left: 1px solid var(--line-2); }
.sec--an .callout { margin-top: 1.6rem; }
.an .callout__t { font: 400 clamp(1.15rem, 1.02rem + .5vw, 1.4rem)/1.5 var(--serif); color: var(--ink); }
.an3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.8rem); margin-top: clamp(2.2rem, 4vw, 3.2rem); padding-top: 1.4rem; border-top: 1px solid var(--line-2); }
.an3 .micro { margin-top: 0; }
.an3 .an__p li, .an3 .an__c li { font-size: var(--fs-support-s); }
.an3 .an__p b { font-size: 1.02rem; }
@media (max-width: 1000px) { .an3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .an { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .an__k > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; } }

/* 13 AI MARKETING SUGGESTION — limitations */
.sug__lim { margin-top: 2rem; padding: 1.2rem 1.4rem .3rem; border: 1px solid var(--line-2); }
.sug__lim .sug__f { margin-top: .6rem; }
.sug__k--data { display: block; margin-top: 2.2rem; }

/* 15 SOURCES & METHODOLOGY — every source expandable (part 46) */
.srcsum { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 0 0 1.6rem; font: 700 var(--fs-micro)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.srcsum b { color: var(--ink); margin-left: .35rem; font-variant-numeric: tabular-nums; }
.srcl__h, .srci summary { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 12.5rem 9rem 9.5rem 1rem; gap: 1rem; align-items: baseline; }
.srcl__h { margin: 0; padding: 0 0 .75rem; border-bottom: 1px solid var(--rule); font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.srcl__h::after { content: ""; }
.srcl__list { list-style: none; margin: 0; padding: 0; }
.srcl.is-clamped .srcl__list > li:nth-child(n+11) { display: none; }
/* a citation opens its row below the pinned header and analysis bar, highlighted */
.srci { border-bottom: 1px solid var(--line); scroll-margin-top: calc(56px + var(--abar-h) + 20px); transition: background-color .4s; }
.srci:target { background: rgba(181, 154, 104, .16); box-shadow: inset 2px 0 0 var(--gold); }
.srci summary { list-style: none; cursor: pointer; padding: .85rem 0; min-height: 44px; }
.srci summary::-webkit-details-marker { display: none; }
.srci summary::after { content: "+"; color: var(--gold-ink); justify-self: end; }
.srci[open] summary::after { content: "−"; }
.srci summary:hover .srci__t b { color: var(--gold-ink); }
.srci[open]:not(:target) { background: rgba(181, 154, 104, .06); }
.srci__n { font: 600 var(--fs-meta)/1.6 var(--sans); color: var(--gold-ink); font-variant-numeric: tabular-nums; padding-left: .3rem; }
.srci__t b { display: block; font-weight: 600; color: var(--ink); font-size: var(--fs-support); transition: color .25s; }
.srci__t small { display: block; margin-top: .15rem; font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srci[open] .srci__t small { white-space: normal; }
/* the type as a quiet label (no box): it reads on one or two lines without crowding the row */
.srci__ty .tag { display: inline; border: 0; padding: 0; white-space: normal; line-height: 1.4; letter-spacing: .12em; font-size: .625rem; }
.srci__p, .srci__u { font-size: var(--fs-meta); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.srci__d { margin: 0 0 1rem 3.4rem; padding: .2rem 0 .4rem; display: grid; gap: .5rem; max-width: 900px; }
.srci__d div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; font-size: var(--fs-support-s); }
.srci__d dt { font: 700 var(--fs-micro)/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.srci__d dd { margin: 0; color: var(--ink-2); line-height: 1.55; overflow-wrap: anywhere; }
.srci__d a { color: var(--steel); }
.srcx { margin-top: 1.6rem; }
@media (max-width: 900px) {
  .srcl__h { display: none; }
  .srci summary { grid-template-columns: 2rem minmax(0, 1fr) 1rem; grid-template-areas: "n t x" ". ty ty" ". p p"; row-gap: .35rem; }
  .srci__n { grid-area: n; } .srci__t { grid-area: t; } .srci__ty { grid-area: ty; } .srci__p { grid-area: p; } .srci__u { display: none; } .srci summary::after { grid-area: x; }
  .srci__d { margin-left: 2rem; } .srci__d div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}

/* 16 EXPLORE ANOTHER MARKET — discovery (parts 48, 49) */
.fin__k { margin: 0 0 1rem; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); }
.xs { margin-top: clamp(3rem, 6vw, 4.6rem); padding-top: 1.6rem; border-top: 1px solid var(--line-2); }
.xs__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.6rem; margin-bottom: 1.4rem; }
.xs__h p { margin: 0; font-size: var(--fs-support-s); color: var(--ink-3); }
.xs__g { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.xs__g--p { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xs__g--m { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xs__g > li { background: var(--sec-final); min-width: 0; }
.xc, .xm { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0 0 1.3rem; font: inherit; transition: background .35s var(--ease); }
.xc:hover, .xm:hover { background: rgba(245, 241, 232, .045); }
.xc__img { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #1a1a18; }
.xc__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform .9s var(--ease), filter .6s; filter: saturate(.92); }
.xc:hover .xc__img img { transform: scale(1.045); filter: saturate(1); }
.xc__k { margin: 1.2rem 1.2rem 0; font: 700 .625rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.xc__n { margin: .55rem 1.2rem 0; font: 500 clamp(1.35rem, 1.1rem + .6vw, 1.7rem)/1.05 var(--serif); letter-spacing: .05em; text-transform: uppercase; }
.xc__hs { margin: .5rem 1.2rem 0; font: 600 var(--fs-meta)/1 var(--sans); letter-spacing: .08em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.xc__d { margin: .7rem 1.2rem 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--ink-3); }
.xc__r { display: block; width: 48px; height: 1px; background: var(--gold); margin: 1rem 1.2rem 0; transition: width .5s var(--ease); }
.xc:hover .xc__r, .xm:hover .xc__r { width: 88px; }
.xc__go, .xm__go { margin: auto 1.2rem 0; padding-top: 1rem; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.xc__go > span[aria-hidden], .xm__go > span[aria-hidden] { color: var(--gold); display: inline-block; margin-left: .35rem; transition: transform .4s var(--ease); }
.xc:hover .xc__go > span[aria-hidden], .xm:hover .xm__go > span[aria-hidden] { transform: translateX(4px); }
.xm { padding: 1.3rem 1.2rem; min-height: 11rem; }
.xm__f { width: 28px; height: 21px; }
.xm__n { margin-top: 1rem; font: 500 clamp(1.3rem, 1.1rem + .5vw, 1.6rem)/1.1 var(--serif); }
.xm__p { margin-top: .45rem; font: 600 var(--fs-meta)/1.3 var(--sans); letter-spacing: .06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.xm__go { margin: auto 0 0; }
.xm__i { margin-top: .6rem; font: 700 .625rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.xm__i--warn { color: var(--bad); }
.xc:focus-visible, .xm:focus-visible { outline-offset: -3px; }
@media (max-width: 1100px) { .xs__g--p, .xs__g--m { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  /* mobile: the commodity cards swipe horizontally (part 58), inside their own container */
  .xs__g--p, .xs__g--m { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .xs__g--p > li { flex: 0 0 78%; scroll-snap-align: start; }
  .xs__g--m > li { flex: 0 0 74%; scroll-snap-align: start; }
  .xm { min-height: 9.5rem; padding: 1rem; }
}

/* buttons (part 55): primary — obsidian, ivory text, a champagne accent; secondary — ivory, obsidian border; no pills */
.btn { border-radius: 0; }
.btn--dark { box-shadow: inset 0 -2px 0 var(--gold); }
.btn--dark span[aria-hidden] { color: var(--gold); }
.btn--dark:hover span[aria-hidden] { color: var(--ivory); }
.btn--line { background: var(--ivory); border-color: var(--obsidian); color: var(--obsidian); }
.btn--line:hover { background: var(--obsidian); border-color: var(--obsidian); color: var(--ivory); }
.hd .btn--line, .intro .btn--line, #logistics .btn--line, #next .btn--line, .req .btn--line, .foot .btn--line, #cover .btn--line { background: transparent; border-color: var(--line-2); color: var(--ink); }
.hd .btn--line:hover, .intro .btn--line:hover, #next .btn--line:hover, .req .btn--line:hover, #cover .btn--line:hover { background: var(--ivory); border-color: var(--ivory); color: var(--obsidian); }

/* ---------- brief 9 · landing: the cargo-vessel hero, micro-data, chapters, minimal footer, lockup everywhere ---------- */
/* hero (parts 03–06): one licensed still — the full frame on desktop and tablet, a portrait crop on phones — set into the
   right of the hero and dissolving into the obsidian ground, so the headline keeps its open water on the left */
.intro__media > picture { inset: 0 0 0 36%; }
.intro__img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; opacity: .92; filter: saturate(.95);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 38%), linear-gradient(180deg, #000 62%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 38%), linear-gradient(180deg, #000 62%, transparent 100%); mask-composite: intersect; }
.intro__credit a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.intro__credit a:hover { color: var(--ink-2); border-bottom-color: var(--gold); }
@media (max-width: 900px) {
  .intro__img { opacity: .58; object-position: 50% 45%; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); }
}
@media (max-width: 700px) { .intro__img { opacity: .62; } }
/* micro-data (part 08): editorial metadata, never numbers */
.intro__meta { display: flex; flex-wrap: wrap; gap: .5rem 0; margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font: 600 var(--fs-micro)/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.intro__meta span + span::before { content: "·"; margin: 0 .9rem; color: var(--gold); }
/* the report's six chapters, on the landing page */
.chapters { background: var(--sec-product); padding-block: var(--sec-pad); border-top: 1px solid var(--line); }
.chapters__h { max-width: 62ch; }
.chapters__t { font: 500 var(--fs-h2)/1.06 var(--serif); letter-spacing: -.01em; margin: .9rem 0 0; }
.chapters__t em { color: var(--gold-ink); font-weight: 400; }
.chapters__l { margin: 1rem 0 0; font-size: var(--fs-body); color: var(--ink-2); }
.chapters__g { list-style: none; margin: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(2.2rem, 4vw, 3rem); padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.chapters__g li { padding: 1.4rem clamp(.8rem, 1.6vw, 1.4rem) 0 0; }
.chapters__g li + li { padding-left: clamp(.8rem, 1.6vw, 1.4rem); border-left: 1px solid var(--line); }
.chapters__g span { display: block; font: 600 var(--fs-meta)/1 var(--sans); letter-spacing: .12em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.chapters__g b { display: block; margin-top: .8rem; font: 500 1.5rem/1.1 var(--serif); color: var(--ink); }
.chapters__g p { margin: .6rem 0 0; font-size: var(--fs-support-s); line-height: 1.55; color: var(--ink-2); }
/* what a part is made of, said beside its name where it matters (05: rule-based, no language model — QA 11 #45) */
.chapters__tag { display: block; margin-top: .55rem; font: 700 var(--fs-micro)/1.4 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.chapters__a { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin: 0; }
@media (max-width: 1000px) { .chapters__g { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.6rem; } .chapters__g li:nth-child(3n + 1) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .chapters__g { grid-template-columns: minmax(0, 1fr); } .chapters__g li, .chapters__g li + li { padding: 1rem 0 0; border-left: 0; } .chapters__g li + li { border-top: 1px solid var(--line); } }
/* the minimal footer (part 64) */
.foot { padding-block: 2rem calc(2rem + env(safe-area-inset-bottom)); }
.foot__in { justify-content: space-between; gap: 1.2rem 2.4rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; }
.foot__nav a { position: relative; display: inline-flex; align-items: center; min-height: 40px; font: 600 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; transition: color .3s; }
.foot__nav a:hover, .foot__nav a:focus-visible { color: var(--ink); }
.foot__nav a + a::before { content: ""; position: absolute; left: -.8rem; top: 50%; width: 1px; height: .7rem; margin-top: -.35rem; background: var(--line-2); }
.foot .foot__c { margin-left: 0 !important; font: 500 var(--fs-meta)/1.4 var(--sans) !important; letter-spacing: .04em; }
.foot .foot__c a { color: var(--ink-3); border-bottom-color: var(--line-2); }
/* a phone: the links as a two-column list with full tap targets — no separator can start a wrapped line */
@media (max-width: 760px) { .foot__in { flex-direction: column; align-items: flex-start; gap: .9rem; } .foot__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.4rem; width: 100%; } .foot__nav a { min-height: 44px; border-bottom: 1px solid var(--line); } .foot__nav a + a::before { content: none; } }
/* the lockup on the loading screen */
.loading .slogo--load { min-height: 0; gap: .8rem; }
.loading .slogo--load img { height: 52px; }
.loading .slogo--load .slogo__w { font-size: 2.2rem; color: var(--ink); }
/* one S per viewport: while the report cover's lockup is on screen, the header shows its links only (part 75 BRAND) */
body.cover-in .hd .slogo { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.hd .slogo { transition: opacity .3s; }

/* buttons (part 55): primary — obsidian, ivory text, champagne accent (a hairline border on dark grounds, a 2 px champagne
   underline, a champagne arrow); secondary — ivory, obsidian border. No pills, 0.3 s transitions. */
.btn--primary, .selbar__go:not(:disabled), .hd__nav .hd__cta { background: var(--obsidian); color: var(--ivory); border: 1px solid rgba(212, 189, 140, .55); box-shadow: inset 0 -2px 0 var(--gold); transition: background .3s, color .3s, border-color .3s; }
.btn--primary:hover, .selbar__go:hover:not(:disabled), .hd__nav .hd__cta:hover { background: var(--navy); color: var(--ivory); border-color: var(--gold); }
.btn--primary span[aria-hidden], .selbar__go:not(:disabled) span[aria-hidden] { color: var(--gold); }
.sec:not(#next):not(#cover):not(#logistics) .btn--primary { border-color: var(--obsidian); }
.btn--secondary { background: var(--ivory); color: var(--obsidian); border: 1px solid var(--obsidian); }
.btn--secondary:hover { background: var(--obsidian); color: var(--ivory); }
#next .btn--dark { background: var(--obsidian); border-color: rgba(212, 189, 140, .55); color: var(--ivory); box-shadow: inset 0 -2px 0 var(--gold); }
@media (max-width: 920px) { .hd__nav .hd__cta { background: var(--obsidian); color: var(--ivory); border: 1px solid var(--gold); } }

/* the mobile menu: a backdrop-filter on the header made it the containing block of the fixed panel (the panel was clipped
   to 45 px); the blur now sits on a pseudo-element and the panel fills the screen below the header */
.hd { -webkit-backdrop-filter: none; backdrop-filter: none; }
.hd::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
@media (max-width: 920px) {
  .hd__nav { height: calc(100dvh - var(--head) - env(safe-area-inset-top)); overflow-y: auto; }
  body.menu-open { overflow: hidden; }
}


/* ANALYZING MARKET (brief 9, part 32): the lockup, the selection, five numbered steps with a champagne progress rule */
.load__brand { margin: 0 0 2.2rem; }
.load__brand .slogo { min-height: 0; }
.load__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1rem; margin-top: 2.4rem; }
.load__steps li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding-top: 1rem; border-top: 1px solid var(--line-2); transition: color .3s var(--ease); }
.load__steps li + li::before { content: none; }
.load__steps li::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--gold); transition: width .45s var(--ease); animation: none; }
.load__steps li.is-done::after { width: 100%; }
.load__steps li.is-on::after { width: 55%; animation: ldfill 1.1s var(--ease) infinite alternate; }
@keyframes ldfill { from { width: 18%; } to { width: 78%; } }
.load__steps li span { font: 600 var(--fs-meta)/1 var(--sans); letter-spacing: .1em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .load__steps { grid-template-columns: minmax(0, 1fr); gap: .2rem; } .load__steps li { flex-direction: row; gap: .9rem; padding: .7rem 0; } }
@media (prefers-reduced-motion: reduce) { .load__steps li.is-on::after { animation: none; width: 55%; } }

/* the product card (brief 9, part 12): PRODUCT · the name large · HS · GRADE · champagne rule · VIEW PRODUCT INTELLIGENCE */
.pt__k { margin-top: 1.15rem; font: 700 .625rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); }
.pt__n { margin-top: .55rem; font: 500 clamp(1.45rem, 1.2rem + .6vw, 1.8rem)/1.05 var(--serif); letter-spacing: .06em; color: var(--ink); }
.pt__hs { font: 600 var(--fs-meta)/1.3 var(--sans); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.pt__g b { font: 700 .625rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin-right: .45rem; }
.pt__img img { transition: transform .9s var(--ease), filter .5s var(--ease); }
.pt__r { transition: width .45s var(--ease); }
.pt__go { color: var(--ink); }
.pt__go i { color: var(--gold-ink); }
/* the ship sits in the upper right, clear of the starter row; the row itself reads on a solid, softly blurred ground */
.intro .st__row { background: rgba(14, 14, 13, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* 07 SUPPLY LANDSCAPE — the origins table (part 37): country · volume · share (thin bar) · change (pp) · period */
.sup { grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); }
.sl { min-width: 0; }
.sl__h, .sl__r { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, .75fr) 3.8rem; gap: .5rem .9rem; align-items: center; }
.sl__h { padding: 0 0 .7rem; border-bottom: 1px solid var(--rule); font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sl__r { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.sl__c { display: flex; align-items: center; gap: .55rem; min-width: 0; font: 500 1.05rem/1.2 var(--serif); }
.sl__c img { width: 20px; height: 15px; flex: none; }
.sl__r.is-origin .sl__c { font-weight: 600; }
.sl__vol, .sl__p, .sl__ch { font: 500 var(--fs-meta)/1.3 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sl__p { color: var(--ink-3); text-align: right; }
.sl__ch[data-tone="up"] { color: var(--ok); } .sl__ch[data-tone="down"] { color: var(--ink-3); }
.sl__sh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .6rem; align-items: baseline; }
.sl__bar { grid-column: 1 / -1; display: block; height: 3px; background: var(--line); position: relative; }
.sl__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--navy); }
.sl__r.is-origin .sl__bar::after { background: var(--gold); }
.sl__sh b { font: 600 1.02rem/1 var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sl__sh small { font: 500 var(--fs-meta)/1 var(--sans); color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .sup { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .sl__h { display: none; }
  .sl__r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "c ch" "sh sh" "vol p"; row-gap: .45rem; }
  .sl__c { grid-area: c; } .sl__ch { grid-area: ch; text-align: right; } .sl__sh { grid-area: sh; } .sl__vol { grid-area: vol; } .sl__p { grid-area: p; }
}

/* 06 PRICE INTELLIGENCE — five concepts in a 3 + 2 grid, each tile ruled; "Not available" set as words, not a figure */
.kvs--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; border-bottom: 0; }
.kvs--5 .kv { padding: 1.4rem 1.4rem 1.4rem 0; border-bottom: 1px solid var(--line); }
.kvs--5 .kv:not(:nth-child(3n + 1)) { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.kv__v--na { font: 500 1.1rem/1.3 var(--sans) !important; letter-spacing: 0 !important; color: var(--ink-3); }
.kvs--5 .kv__v { font-size: clamp(1.55rem, 1.25rem + .8vw, 2.2rem); }
@media (max-width: 900px) { .kvs--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kvs--5 .kv:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; } .kvs--5 .kv:nth-child(2n) { padding-left: 1.1rem; border-left: 1px solid var(--line); } }
@media (max-width: 560px) { .kvs--5 { grid-template-columns: minmax(0, 1fr); } .kvs--5 .kv, .kvs--5 .kv:nth-child(2n) { padding: 1.1rem 0; border-left: 0; } }
.empty__r { display: block; margin-top: .4rem; font-size: var(--fs-support-s); color: var(--ink-3); }
.chd__y { margin: .8rem 0 0; font-size: var(--fs-meta); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.chd__y > span { font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.chd__y b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.chd__y .tag { border: 0; padding: 0; }

/* 10 LOGISTICS — the route in brief (part 41): six steps on one ruled line, each with its evidence status */
.lgr { list-style: none; margin: 0 0 clamp(1.8rem, 3.4vw, 2.6rem); padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.lgr li { position: relative; padding: 1.1rem .9rem 1rem 0; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; }
.lgr li + li { padding-left: .9rem; border-left: 1px solid var(--line); }
.lgr li + li::before { content: "→"; position: absolute; left: -.42rem; top: -.72rem; font-size: .8rem; color: var(--gold); background: var(--sec-bg); padding: 0 .1rem; }
.lgr__n { font: 600 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.lgr__k { font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.lgr b { font: 500 1.05rem/1.25 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.lgr .rst { margin-top: .15rem; }
@media (max-width: 1000px) { .lgr { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lgr li:nth-child(3n + 1) { padding-left: 0; border-left: 0; } .lgr li:nth-child(n + 4) { border-top: 1px solid var(--line); } .lgr li:nth-child(3n + 1)::before { content: none; } }
@media (max-width: 560px) { .lgr { grid-template-columns: minmax(0, 1fr); } .lgr li, .lgr li + li { padding: .8rem 0; border-left: 0; border-top: 1px solid var(--line); } .lgr li::before { content: none !important; } }

.sl__h span:last-child { text-align: right; }
#price .seg { margin-top: 2rem; }

.cov__mode { margin: 1.1rem 0 0; font-size: var(--fs-meta); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
.cov__mode span { font: 700 var(--fs-micro)/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }

/* section reveal (part 57): a short fade and rise as each report section enters; print and reduced motion show all */
@media (prefers-reduced-motion: no-preference) {
  .sec--rv > * { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .sec--rv.is-in > * { opacity: 1; transform: none; }
}
@media print { .sec--rv > * { opacity: 1 !important; transform: none !important; } }
/* the cards anchor their screen-reader labels (absolutely positioned) inside the scroller, so nothing escapes its clip */
.xs__g, .xc, .xm { position: relative; }