/* v70_light3: fixes from the review of 3 Nov 2026 (desktop, mobile, text, functions, design system). Loaded last. */

/* ---------- header on phones and tablets ---------- */
@media (max-width: 1199px) {
  /* Menu comes back as soon as the page moves up (the hide rule was stronger than the show rule) */
  .hdr.is-min.is-up:not(:focus-within):not(.is-menu):not(.is-peek) .tools > .menu-b { opacity: 1; translate: none; pointer-events: auto; }
}
/* only what is visible can be tapped: the tools box and the hidden wordmark stop catching taps */
.hdr .tools { pointer-events: none; }
.hdr .tools > * { pointer-events: auto; }
/* only the bird: the clip ends between the bird (35.7 % of the logo) and the wordmark (41.1 %), at every logo size
   (v70_light32: was a fixed 48 px, which cut the wing tip of the 156 px logo on tablets and desktop) */
.hdr.is-min:not(:focus-within):not(.is-menu):not(.is-peek) .logo { clip-path: inset(-4px 61.5% -4px -4px); }

/* ---------- back to top: centred in the page margin where the margin is wide enough; narrower screens show it
   only on the way up, so it never rests on text, figures or drawings ---------- */
@media (min-width: 1424px) { .totop { right: max(8px, calc((var(--inset) - 48px) / 2)); } }
@media (min-width: 1200px) and (max-width: 1423px) { .totop { right: 8px; } }
@media (max-width: 1423px) {
  html.tt-rest .totop { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ---------- Platform scroll film: the label and lines read on every frame ---------- */
.scrub-t .t-label { color: inherit; }
.scrub-s::before { background: linear-gradient(to top, color-mix(in srgb, var(--limestone) 88%, transparent) 0%, color-mix(in srgb, var(--limestone) 62%, transparent) 36%, transparent 72%); }
.scrub-s::after { background: linear-gradient(to top, color-mix(in srgb, var(--night) 90%, transparent) 0%, color-mix(in srgb, var(--night) 64%, transparent) 36%, transparent 72%); }
@media (max-width: 809px) { .scrub-s::before, .scrub-s::after { height: 82%; } }

/* ---------- Home: model band and statement band, darker foot so the lines hold over the pale model ---------- */
.wb--model .wb-f::after {
  background: linear-gradient(to top, color-mix(in srgb, var(--night) 88%, transparent) 0%, color-mix(in srgb, var(--night) 62%, transparent) 38%, color-mix(in srgb, var(--night) 20%, transparent) 58%, transparent 74%);
}
@media (max-width: 809px) {
  .wb--st .wb-f::after, .wb--model .wb-f::after {
    background: linear-gradient(to top, color-mix(in srgb, var(--night) 92%, transparent) 0%, color-mix(in srgb, var(--night) 74%, transparent) 46%, color-mix(in srgb, var(--night) 30%, transparent) 70%, transparent 88%);
  }
}

/* ---------- Who it serves on phones: the shade reaches the label ---------- */
@media (max-width: 809px) {
  .wb.rb .wb-f::after { background: linear-gradient(to top, color-mix(in srgb, var(--night) 92%, transparent) 0%, color-mix(in srgb, var(--night) 78%, transparent) 50%, color-mix(in srgb, var(--night) 48%, transparent) 78%, color-mix(in srgb, var(--night) 22%, transparent) 100%) !important; }
}
/* section numbers on Who it serves and the crumb slash: no Lantern outside the logo and the primary button.
   (.wb.rb: the role page's own style block comes later and would win at equal weight) */
.wb.rb .rb-k { color: var(--limestone); }
.wb.rb .rb-k b { color: inherit; }
.crumb i { color: inherit; opacity: 0.6; }
/* Who it serves on desktop: a little more shade where the label and title sit */
@media (min-width: 810px) {
  .wb.rb .wb-f::after { background: linear-gradient(to top, color-mix(in srgb, var(--night) 92%, transparent) 0%, color-mix(in srgb, var(--night) 80%, transparent) 40%, color-mix(in srgb, var(--night) 64%, transparent) 58%, color-mix(in srgb, var(--night) 28%, transparent) 72%, transparent 86%) !important; }
}

/* ---------- spacing: rule to text 24 px everywhere, as in the established components ---------- */
.pg-t, .paper-t, .ct-a > div { padding-top: var(--s5); }
.paper-t { margin-top: var(--s5); }
.pg--5 { column-gap: var(--gut); }
/* Journal papers: the links line up */
.papers > li { display: flex; min-width: 0; }
.papers > li > .paper { flex: 1; }
/* About, Seat and structure: label sits right on the title, the drawing takes the extra height */
.intro:has(> .ol-aside) { grid-template-rows: 1fr auto; }
/* Atlas, the 35 materials: room between the source note and the chart */
#materials .t-note + .rd { margin-top: var(--s7); }
/* Atlas list: the value uses the subhead token */
.rd-strip .rs-v { font: 400 var(--fs-subhead)/var(--lh-subhead) var(--serif); font-variant-numeric: lining-nums tabular-nums; }
/* Atlas list: imported and not imported are told apart by a hairline as well as by colour */
.rd-strip .rs-bar rect.o { stroke: var(--bg); stroke-width: 3px; paint-order: stroke; }
@media (min-width: 600px) and (max-width: 1199px) { .rd-strip > .rs { grid-template-columns: 200px minmax(0, 1fr) 56px; } }
/* Careers, open application list: one strong rule, not two */
.roles-s .list > li:first-child { --rule-c: var(--line); }

/* ---------- forms: the same 2 px focus ring as everything else ---------- */
.fld :is(input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* ---------- source notes and long lines ---------- */
.t-note, .card-s, .lanes-n { max-width: 75ch; }
.pr-find li { max-width: 68ch; }

/* ---------- phones ---------- */
@media (max-width: 809px) {
  /* text pages: the title starts near the top instead of under an empty screen */
  .hero--plain:not(:has(.ol-hero)) { height: auto; min-height: 0; }
  .hero--plain:not(:has(.ol-hero)) .hero-g { position: relative; inset: auto; padding-top: calc(var(--hero-pb) + 104px); }
  /* 404: the lighthouse stands just above the text */
  .hero-g:has(> .ol-hero) { grid-template-rows: minmax(0, 1fr) auto auto; }
  .hero-g > .ol-hero { grid-row: 1; align-self: end; margin: 0 0 var(--s7); }
  .hero-g:has(> .ol-hero) > .hero-t { grid-row: 2; }
  .hero-g:has(> .ol-hero) > .hero-f { grid-row: 3; }
  /* charts keep readable labels: they scroll sideways instead of shrinking */
  .pr-plot { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .pr-plot svg { min-width: 560px; max-width: none; }
  .pr-tbl { margin-inline: calc(var(--m) * -1); padding-inline: var(--m); -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
  /* figures in a row of three start on the same line */
  .stats.n3 .stat > .t-label { min-height: 2lh; }
}
@media (max-width: 599px) {
  .pg-i, .paper { grid-template-columns: 112px minmax(0, 1fr); }
}
/* small tablets: tiles and partner cards in more columns instead of stretched phone cards */
@media (min-width: 600px) and (max-width: 809px) {
  .mat-l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .who-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- touch: tap targets of at least 44 px ---------- */
@media (pointer: coarse) {
  .chip, .seg button, .sh-b, .icon-btn, .ck .btn, .dlg .btn { min-height: 44px; }
  .crumb a { padding-block: 13px; margin-block: -13px; }
  .sh-b { min-width: 44px; }
  .ftr a { display: inline-block; padding-block: 6px; }
  .sector-m a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}

/* ==================== desktop review, 3 Nov 2026 ==================== */
/* Responsibility: the sticky picture fills its frame (its picture element had no height, so a Lichen band showed under it at 1920) */
.swap-m > [data-frame] > picture, .swap-sm > [data-frame] > picture { display: block; width: 100%; height: 100%; }

/* primary button hover: the 1 px edge takes the fill colour instead of staying Lantern or Night */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { border-color: var(--btn-hover); }
  .hero .btn-primary:hover, .mm .btn-primary:hover,
  [data-s="night"] .btn-primary.is-lantern:hover, [data-s="spruce"] .btn-primary.is-lantern:hover { border-color: var(--limestone); }
}

/* figures in one row stand on one line when only some carry an "About" or "Over" above the number */
@media (min-width: 810px) {
  .stats:has(.stat-q) > .stat:not(:has(.stat-q)) > .num { margin-top: calc(var(--lh-small) + var(--s1)); }
}

/* the closing Contact block on the same colour as the section before it: one gap, not two */
.sec[data-s="limestone"]:has(+ .end[data-s="limestone"]), .sec[data-s="lichen"]:has(+ .end[data-s="lichen"]) { padding-bottom: var(--s8); }
@media (max-width: 809px) {
  .sec[data-s="limestone"]:has(+ .end[data-s="limestone"]), .sec[data-s="lichen"]:has(+ .end[data-s="lichen"]) { padding-bottom: 0; }
}

/* text pages (press, legal, privacy, cookies, sources, links): a shorter opening, the content starts on the first screen */
@media (min-width: 810px) {
  .hero--plain:not(:has(.ol-hero)) { --hero-h: clamp(440px, 60vh, 600px); }
}

/* footer bottom line on the column grid: Pause motion under Research, the copyright on the right edge */
@media (min-width: 1200px) {
  .ftr-l { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); align-items: baseline; padding-right: 0; }
  .ftr-l > p:first-child { grid-column: 1 / span 5; }
  .ftr-l > .ftr-m { grid-column: 8 / span 2; justify-self: start; }
  .ftr-l > p:last-child { grid-column: 10 / -1; justify-self: end; margin-left: 0; }
}

/* Journal, New posts by email: the title starts level with the form */
@media (min-width: 810px) { .sub { align-items: start; } }

/* article: room between the publication line and the lede */
.t-small + .art-lede { margin-top: var(--s4); }

/* Atlas: source lines keep the same distance from what they describe */
.rd + .rd-src, .rd .rd-src { margin-top: var(--s5); }
#dates .wrap > .card-s { margin-top: var(--s5); }

/* About, benchmarks: the title on one line where there is room */
@media (min-width: 1200px) { #benchmarks .intro h2 { max-width: 26ch; } }

/* ==================== films without controls (Rea, 3 Nov 2026): no buttons, no sound, always muted and looping ====================
   iPhone draws its own player (play, skip, timeline, AirPlay) when a film is tapped or when it held autoplay back;
   the film takes no taps and the browser's controls are switched off. */
video { pointer-events: none; }
video::-webkit-media-controls, video::-webkit-media-controls-enclosure, video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-play-button, video::-webkit-media-controls-timeline, video::-webkit-media-controls-fullscreen-button {
  display: none !important; -webkit-appearance: none; opacity: 0 !important;
}

/* Responsibility, Host regions without its picture (Rea, 3 Nov 2026): title left, the five points right, both ending on one line */
@media (min-width: 1200px) {
  .hr-g { align-items: end; }
  .hr-g .intro { margin-bottom: 0; }
}

/* ==================== check of 4 Nov 2026 ==================== */
/* the header veil stops at the end of the ground under the bird (tone.js sets --veil-cut) */
.hdr::after { clip-path: inset(0 0 max(0px, calc(100% - var(--veil-cut, 100%))) 0); }
/* phones: charts that scroll sideways show that they continue */
@media (max-width: 809px) {
  .pr-plot { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .pr-plot svg { margin-right: 56px; }
}
/* Responsibility, Host regions: both columns start on the section's first line */
@media (min-width: 1200px) { .hr-g { align-items: start; } }

/* Platform scroll film: one title over both phases; with reduced motion it shows once */
html.still .scrub-t h2 > .sc-l + .sc-l { display: none; }

/* phones, paper and article heroes: room between the text, the share buttons and the bottom edge (Rea, 4 Nov 2026) */
@media (max-width: 809px) {
  .hero-f:has(.hero-x) { height: auto; padding-block: var(--s6) var(--s7); }
  .hero-f:has(.hero-x) > .cue { display: none; }   /* the arrow would sit on the share buttons */
  /* the paper meta line: "Data as of" on its own line, no dot left at a line end */
  .hero-meta:has(> span:nth-child(7)) > span:nth-child(6) { display: none; }
  .hero-meta:has(> span:nth-child(7)) > span:nth-child(7) { flex-basis: 100%; }
}
/* running text uses the full measure (Rea, 4 Nov 2026: "warum nicht der ganze Satzspiegel?"). Safari's "pretty" and
   "balance" evened the lines by breaking them early, so paragraphs stopped well short of the column edge.
   Titles keep their balanced breaks. */
.t-body, .t-lead, .t-small, .t-note, .t-reading, .card-d, .mg-links span, .mm-s a span { text-wrap: wrap; }
@media (max-width: 809px) {
  .stat .cap, .stat .src, dd.t-body, .t-lead, .t-body { max-width: none; }
}

/* questions and answers */
.faq .faq-q { margin-top: var(--s6); }
.faq h2 + .faq-q { margin-top: var(--s5); }
.faq .faq-a { margin-top: var(--s2); }
.faq h2:not(:first-child) { margin-top: var(--s8); }
.faq h2 { scroll-margin-top: calc(var(--hdr) + var(--s5)); }

/* ==================== language switcher (Rea, 4 Nov 2026): in place of the word Menu on phones, beside Contact on desktop ==================== */
.lng { position: relative; display: flex; align-items: center; color: var(--fg); }
.tools:has(> .btn[data-t="l"]) > .lng, .tools:has(> .menu-b[data-t="l"]) > .lng { color: var(--night); }
.tools:has(> .btn[data-t="d"]) > .lng, .tools:has(> .menu-b[data-t="d"]) > .lng { color: var(--limestone); }
.hdr.is-menu .lng, .hdr.is-peek .lng { color: var(--limestone); }
.lng-b { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 6px; border: 0; background: none; color: inherit; cursor: pointer;
  font: 500 var(--fs-ui)/var(--lh-ui) var(--sans); letter-spacing: 0.04em; }
.lng-b svg { width: 8px; height: 8px; translate: 0 1px; transition: rotate 300ms var(--e-out); }
.lng-b[aria-expanded="true"] svg { rotate: 180deg; }
.lng-b:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.lng-l { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; min-width: 176px; margin: 0; padding: 8px 0; list-style: none;
  background: var(--night); color: var(--limestone); box-shadow: 0 16px 40px rgb(0 0 0 / 0.28); }
.lng-l[hidden] { display: none; }
.lng-l a, .lng-l .lng-x { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 11px 18px;
  font: 500 var(--fs-ui-s)/var(--lh-ui-s) var(--sans); color: inherit; text-decoration: none; }
.lng-l b { font-weight: 500; letter-spacing: 0.06em; opacity: 0.55; }
.lng-l a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lng-l a:focus-visible { outline: 2px solid var(--limestone); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .lng-l a:hover { background: color-mix(in srgb, var(--limestone) 10%, transparent); } }
.lng-l .lng-x { color: color-mix(in srgb, var(--limestone) 40%, transparent); cursor: default; }
/* the menu button is the three lines only */
.menu-b { gap: 0; width: 44px; padding: 0; justify-content: center; }
.tools { gap: 12px; }
@media (max-width: 1199px) {
  .tools { gap: 2px; }
  .hdr.is-min.is-up:not(:focus-within):not(.is-menu):not(.is-peek) .tools > .lng { opacity: 1; translate: none; pointer-events: auto; }
}

/* ==================== detail check of 4 Nov 2026, 01:31 ==================== */
/* paper tables on phones: the first column wraps so the figures get room; the wide table scrolls with whole lines */
@media (max-width: 600px) {
  .pr-tbl:not(.wide) td:first-child, .pr-tbl:not(.wide) th:first-child { white-space: normal; width: 30%; }
}
.pr-tbl.wide td, .pr-tbl.wide th { white-space: nowrap; }
/* cite and reuse: link pills look like the button pills */
a.pr-b { text-decoration: none; }
/* material groups on phones: one- and two-line labels, lists start on one line */
@media (max-width: 809px) { .group > .t-label { min-height: 2lh; } }
/* atlas: the count starts on the column when it wraps; segment labels centred */
@media (max-width: 809px) { .chips .rd-count { margin-left: 0; } }
.rd-bar .seg button { text-align: center; justify-content: center; }
/* paper findings: rules end at one x, numbers sit on the first line */
.pr-find li { max-width: none; align-items: baseline; }

/* ==================== language versions (Rea, 4 Nov 2026) ==================== */
html:not([lang|="en"]) :is(h1, h2, h3, .t-statement, .t-display, .t-title, .t-heading, .t-subhead, .card-t) { hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 809px) { html:not([lang|="en"]) .stats.n4 .stat > .t-label { min-height: 2lh; } }
@media (max-width: 809px) { html:not([lang|="en"]) :is(p, li, dd, figcaption):not(.t-statement, .t-display, .t-title, .t-heading, .t-subhead, .card-t, .t-figure, .t-figure-s) { hyphens: auto; overflow-wrap: break-word; } }
html:not([lang|="en"]) :is(.btn, .lnk, .t-label, .lng-b, nav a) { hyphens: manual; }
/* only long words break: at least 10 letters, 5 before and 4 after the hyphen (so "Hercinia" never splits) */
html:not([lang|="en"]) * { hyphenate-limit-chars: 10 5 4; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 4; }

/* lean menus (Rea, 4 Nov 2026): Responsibility is a plain link */
.hdr .nav-i:not(:has(> .nav-t)) { margin-right: 18px; }

/* partners on Platform (Rea, 4 Nov 2026): five cards in one row on desktop, number and group in the label */
@media (min-width: 1200px) { .who-boxes:has(> li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.who-t .k b { font-weight: inherit; margin-right: 0.9em; }
.who-t .who-src { color: var(--fg-2); opacity: 0.8; }
.who-t .lnk { white-space: normal; max-width: 100%; }

/* partner cards: the words carry the underline (Safari drew the positioned line through them) */
.who-t .lnk::after { display: none; }
.who-t .lnk-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
/* a closing section with only the Next card (Platform): the card starts on the left */
@media (min-width: 1200px) { .end-g:not(:has(> .end-t)) > .end-r { grid-column: 1 / span 4; } }

/* rail guide: a line under the row shows how much is in view and that it goes on; arrows beside it on phones */
.rail-bar { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s5); }
.rail-track { position: relative; flex: 1; height: 1px; background: var(--line-strong); opacity: 1; }
.rail-thumb { position: absolute; top: -1px; left: 0; height: 3px; width: 30%; background: var(--fg); border-radius: 2px; transition: left 160ms var(--e-out), width 160ms var(--e-out); }
.rail-bar .rail-nav { display: none; }
@media (max-width: 809px) { .rail-bar .rail-nav { display: flex; } }
html.still .rail-thumb { transition: none; }

/* ==================== final check 4 Nov 2026: design ==================== */

/* ==================== design check of 4 Nov 2026, 12:15 ==================== */

/* Partner cards (Home: four, Platform: five in a row): titles run to 1 to 4 lines, so the text under them started at
   up to four different heights. On desktop the cards share one set of rows (subgrid): label, title, text, source and link
   each start on one line across the row. Checked at 1200, 1440, 1920 (Home and Platform); phones and tablets unchanged. */
@media (min-width: 1200px) {
  .who-boxes { row-gap: 0; }
  .who-boxes > li { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .who-boxes .who-box { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; }
  .who-boxes .who-m { grid-row: 1; }
  .who-boxes .who-t { display: contents; }
  .who-boxes .who-t > * { margin-inline: var(--s5); min-width: 0; }
  .who-boxes .who-t > .k { grid-row: 2; padding-top: var(--s5); }
  .who-boxes .who-t > h3 { grid-row: 3; margin-top: var(--s3); }
  .who-boxes .who-t > .t-body { grid-row: 4; margin-top: var(--s3); }
  .who-boxes .who-t > .who-src { grid-row: 5; margin-top: var(--s3); }
  .who-boxes .who-t > .lnk { grid-row: 6; justify-self: start; align-self: end; margin-top: var(--s3); margin-bottom: var(--s5); }
}

/* Touch: tap areas of at least 44 px where they were smaller. Checked at 390 and 430 (and 768 with touch). */
@media (pointer: coarse) {
  /* header logo: the link was 26 px high */
  .hdr .logo { padding-block: 9px; margin-block: -9px; }
  /* footer links and Cookie settings: 28 to 32 px high, now 44 px on a 44 px rhythm */
  .ftr-c a, .ftr-c button { padding-block: 13px; }
  /* About, Material focus: the twelve material links were 26 px high */
  .group-l > li > a { display: block; width: fit-content; padding-block: 9px; margin-block: -2px; }
  /* breadcrumb link above the hero title and the material links under each sector on About: 42 px, now 44 */
  .crumb a { padding-block: 14px; margin-block: -14px; }
  .sector-m a { padding-block: 13px; margin-block: -13px; }
  /* footer e-mail address: 28 px; it is the last line of the address, so the larger area only lies over plain text */
  .ftr-b address a { padding-block: 12px; margin-block: -12px; }
}

/* About, Europe's 2030 benchmarks, phones: the "Benchmark 10%" label hung 9 px past the left page margin
   (centred on a tick that sits close to the start of the bar). It now starts inside the margin. Checked at 390, 430 (EN, DE). */
@media (max-width: 809px) {
  .bar-t > b[style*="--t:10%"] > em { translate: -22% 0; }
}


/* ==================== final check 4 Nov 2026: type-desk ==================== */
/* ---------- review5 type-desk: text measure on desktop and large tablet (checked at 1024, 1280, 1440, 1920) ---------- */

/* Section titles in an intro were held at 22ch (about 490px) inside an 8-column area of 780 to 960px, so
   five-word titles broke onto two short lines beside empty space ("For partners who / plan in decades").
   They now use the width of their grid area; balance still evens out the titles that do need two lines.
   Checked: index, about, platform, responsibility, lithium, press at 1024/1280/1440/1920. */
.intro > :is(h2, h3).t-title, .ov-t > h2.t-title { max-width: none; }

/* Leads: one measure for the hero lead and the intro lead. Before: hero 46ch (498px) under a title up to
   894px wide, intro 48ch (520px) in a 6-column area of 580 to 715px. 58ch at 18px is about 630px, roughly
   75 characters a line; at 1280 the 6-column area (580px) is the limit.
   Checked: index, about, platform, careers, contact, atlas, lithium at 1024/1280/1440/1920. */
.hero .t-lead, .intro > .t-lead { max-width: 58ch; }

/* Figure captions and source lines under the key figures stopped at 32ch and 40ch (289px) in a 380 to 416px
   column, so "of EU consumption, against a / 2030 benchmark of 40%" read as a narrow block under a wide rule.
   They now run the full width of their column. Checked: index, atlas, lithium, article at all four widths. */
.stat .cap, .stat .src { max-width: none; }

/* About, sectors: the figure note (40ch, 313px) and the short line (44ch) sat narrower than the picture and
   the rule above them. Full column. Checked: about at 1280/1440/1920 (and 1024). */
.pg-t > .sector-f, .pg-t > .t-body { max-width: none; }

/* Card titles were capped at 24ch (349px) in cards up to 470px wide (1024), so titles broke early.
   Checked: index, journal, atlas at all four widths. */
.card-t { max-width: none; }

/* Home, model band: "Every site, / planned as / a whole." broke into three lines at 15ch.
   Same 18ch as the other picture bands. Checked: index at all four widths. */
.wb--model .wb-t > .t-display { max-width: 18ch; }

/* Home, model band: the lead sat 16px under the title; every other title-to-lead step on the site is 24px
   (hero, intros, Platform film band). Checked: index at 1024/1280/1440/1920. */
.wb--model .wb-t > .t-display + .t-lead { margin-top: var(--s5); }


/* ==================== final check 4 Nov 2026: type-phone ==================== */

/* ==================== type and measure on phones and small tablets (review of 4 Nov 2026, 12:15) ==================== */

/* Definition lists (.rows: About seat and structure, material pages, Journal press kit, Sources, Press):
   on phones every value stopped 32 px short of the right margin. The label kept "1 / span 3" from the desktop grid
   (its :first-child selector outweighs the phone reset), which added two empty 16 px gaps beside the one phone column.
   Checked at 360, 390, 430, 768: dd now ends on the margin line. */
@media (max-width: 809px) {
  .rows > div > :first-child, .rows > div > dt { grid-column: 1 / -1; }
}

/* Small tablets (600 to 809 px use the phone layout in one column): text blocks were held to desktop measures
   (lead 46ch, title 22ch, notes 75ch, figure heads, sector facts), so each block ended at a different point in the
   left half or two thirds, while body text ran the full 728 px at 14 px. Now running text, leads and notes use the
   full column, at the tablet text sizes so the lines stay readable. Headings keep their own measure.
   Checked at 768 (and 600, 809 edges); no effect at 360 to 430. */
@media (min-width: 600px) and (max-width: 809px) {
  :root { --fs-body: 15px; --lh-body: 24px; --fs-lead: 17px; --lh-lead: 27px; --fs-reading: 17px; --lh-reading: 28px; }
  .hero .t-lead, .wb--model .wb-t > .t-lead, .scrub-t h2 + .t-lead, .sc-b > .t-lead,
  .t-note, .card-s, .lanes-n, .t-small,
  .pr-fig-h > p, .pr-fig-f > p, figcaption > p, .bar-n, .bar--txt > .t-body, .map-src, .ftr-l > p { max-width: none; }
}

/* Sector rows (About) and function rows (Platform): the fact line and the description were capped at 40ch and 44ch
   inside a text column that is narrower anyway; at 768 "rock." stood alone on the last line and the facts ended
   at three quarters of the rule above them. Checked at 360, 390, 430, 768. */
@media (max-width: 809px) {
  .sector-f, .pg-t > .t-body { max-width: none; }
}

/* Home, "Every site, planned as a whole.": the 15ch cap broke it into three short lines ("Every site, / planned as /
   a whole.") with the right 48 px of the column unused; titles still balance. Checked at 360, 390, 430, 768. */
@media (max-width: 809px) {
  .wb--model .wb-t > .t-display { max-width: 20ch; }
}

/* Three figures in one row (Atlas "Imported entirely / Median / No net imports", material pages): at 360 to 430 each
   caption had 96 to 120 px and broke after every word or two ("reliance / of 100%", "across / all 35 materials").
   Below 600 px they stand one under the other, each caption on the full column. Checked at 360, 390, 430;
   768 keeps three in a row. */
@media (max-width: 599px) {
  .stats.n3 { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
  .stats.n3 .stat > .t-label { min-height: 0; }
}


/* ==================== final check 4 Nov 2026: de ==================== */
/* de: no German-specific layout rule needed. Checked 390, 430, 768, 1024, 1440 px: no split words in headings, buttons or menus, no horizontal scroll. Partner CTAs on Platform wrap to two lines at 1024 to 1440 px but stay inside the card with the arrow aligned. */


/* ==================== final check 4 Nov 2026: es ==================== */
/* es: no Spanish-specific layout rule needed. Checked index, about, platform, responsibility, careers, contact and the twelve material pages at 390 and 1440 (platform partner block also at 768, 1024, 1280, 1920); the long headings in the five partner cards are fixed by text in fixes.json. */


/* ==================== final check 4 Nov 2026: no ==================== */
/* No Norwegian-only layout fixes needed. Checked at 390 and 1440 px (menus, Platform partner cards, About Karriere row, material stat labels, About benchmark bars, map panels). The issues found were text issues and are in fixes.json and fixes2.json. */


/* ==================== final check 4 Nov 2026: lead ==================== */
/* Platform, five partner cards. In one row of five (1200 px and up; the page column stops at about 1300 px) each card
   was about 240 px wide: headings ran to four lines, words broke and card 02 stood far taller than the rest.
   Desktop: three over two on a six-column grid, so no slot stays empty; every picture keeps the height of the top row.
   Tablet (810 to 1199 px): two columns; the fifth card spans both, picture on the left, text on the right.
   Checked at 1024, 1200, 1280, 1440, 1920 (EN, DE, FR); phones unchanged. */
@media (min-width: 1200px) {
  .who-boxes:has(> li:nth-child(5)) { container-type: inline-size; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--gut); }
  .who-boxes:has(> li:nth-child(5)) > li { grid-column: span 2; }
  .who-boxes:has(> li:nth-child(5)) > li:nth-child(n+4) { grid-column: span 3; }
  .who-boxes:has(> li:nth-child(5)) .who-m { aspect-ratio: auto; height: calc((100cqw - 2 * var(--gut)) / 3 * 0.75); }
}
@media (min-width: 810px) and (max-width: 1199px) {
  .who-boxes:has(> li:nth-child(5)) > li:nth-child(5) { grid-column: 1 / -1; }
  .who-boxes:has(> li:nth-child(5)) > li:nth-child(5) .who-box { flex-direction: row; }
  .who-boxes:has(> li:nth-child(5)) > li:nth-child(5) .who-m { flex: 0 0 calc((100% - var(--gut)) / 2); align-self: flex-start; }
  .who-boxes:has(> li:nth-child(5)) > li:nth-child(5) .who-t { padding-left: calc(var(--gut) + var(--s5)); }
}

/* Footer and legal pages: the address no longer breaks at its own hyphens on phones ("L- / 1661"). Checked at 360, 390. */
.nw { white-space: nowrap; }


/* ==================== v70_light27 (Rea, 4 Nov 2026, 13:17) ==================== */
/* Home, "Between the deposit and the factory": with the material list gone, title left and text right on desktop,
   so the section uses the width. Checked at 1200, 1440, 1920; tablet and phone stack as before. */
@media (min-width: 1200px) {
  #overview .ov > .ov-t { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
  #overview .ov-t > .t-label, #overview .ov-t > h2 { grid-column: 1 / span 5; }
  #overview .ov-t > .t-body { grid-column: 7 / -1; grid-row: 2; margin-top: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); }
  #overview .ov-t > .lnk { grid-column: 7 / -1; grid-row: 3; justify-self: start; }
}
/* Careers, "No roles are open right now": with the short step list gone, text left and drawing right on desktop.
   Checked at 1200, 1440, 1920; tablet and phone stack as before. */
@media (min-width: 1200px) {
  #roles .roles-g > .empty { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--s3); align-items: start; }
  #roles .roles-g > .empty > :not(.ol-spot) { grid-column: 1 / span 5; }
  #roles .roles-g > .empty > .ol-spot { grid-column: 7 / -1; grid-row: 1 / span 4; margin-top: 0; align-self: end; }
}
/* Articles and papers on tablets (810 to 1199 px): the reading column was 715 px at 1024, about 88 characters a line.
   It now stops at 600 px (about 72 characters); tables and figures in it follow, so text and tables keep one edge. */
@media (min-width: 810px) and (max-width: 1199px) {
  .art-c.c-read { max-width: 600px; }
}

/* ==================== v70_light28 (Rea, 4 Nov 2026, 14:05) ==================== */
/* Legal pages: the relief from the Atlas moves very quietly behind the title, light lines on the dark ground. */
.hero-m > .topo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ==================== v70_light29 (Rea, 4 Nov 2026, 14:17) ==================== */
/* The relief behind plain text sections (Home overview, Responsibility host regions, Careers rules, material outlook):
   the canvas sits behind the content of its section; data-topo="night" draws light lines, "limestone" dark ones. */
section.sec[data-topo] { isolation: isolate; }
section.sec[data-topo] > .topo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }

/* ==================== motion check 4 Nov 2026: perf ==================== */
/* review6/perf: no style fixes. All perf fixes are script changes (see fixes.json). */


/* ==================== motion check 4 Nov 2026: motion-phone ==================== */

/* motion-phone (4 Nov 2026): on phones, pictures that open from the left ([data-open]: material tiles, journal
   cards, picture bands) took 1200 ms after they started, so a 2-column tile grid sat half closed while being read.
   900 ms keeps the same open and curve, finishes 300 ms sooner. Desktop unchanged.
   Checked: iPhone SE, iPhone 13, iPhone 15 Pro Max, Pixel 7, Galaxy S8 (Chromium emulation), 320 to 430 px. */
@media (max-width: 809px) {
  .js [data-open], .js [data-open] :is(img, video) { --t-pic: 900ms; }
}


/* ==================== motion check 4 Nov 2026: motion-desk ==================== */
/* motion-desk: no style fixes. Durations and easing checked at 1280x800, 1440x900, 1920x1080, 2560x1440 and touch 1194x834, 1280x800, 1366x1024 were consistent enough to leave as they are. */


/* ==================== motion check 4 Nov 2026: formats ==================== */

/* ==================== review6 formats (4 Nov 2026, 14:45): responsiveness across formats ==================== */

/* Phones held sideways (667x375, 844x390, 932x430): the hero kept its portrait floor (max(600px or 640px, 100svh)),
   so on a 375 to 430 px high screen the title started 400 to 600 px down and the first screen showed only picture
   and header (Material pages: only the crumb). The hero now takes the screen height or its content, whichever is
   taller, the text block starts under the header, and the title steps down one style as on short desktops.
   Checked: index, about, platform, careers, contact, lithium, potash, journal, atlas, press, article, paper-supply,
   de/fr/pt index and platform at 667x375, 844x390, 932x430.
   The same structure on short portrait phones (iPhone SE with Safari's bars, 375x548; 320x460): the 600 px floor made
   the hero 52 to 140 px taller than the visible screen, so the arrow (548) or the buttons and tags (460) sat under
   the fold. Checked at 375x548 and 320x460 (index, about, lithium, article, 404, de/index, fr/platform, pt/careers).
   Text pages (press, legal and the like) keep their own short opening; 390x844 and taller, tablets, desktops unchanged.
   Without :has (Safari before 15.4) the rule is dropped and the hero stays as it was. */
@media (orientation: landscape) and (max-height: 500px), (max-width: 809px) and (max-height: 599px) {
  .hero:is(:not(.hero--plain), :has(.ol-hero)) { --hero-h: 100svh; height: auto; min-height: 100svh; }
  .hero:is(:not(.hero--plain), :has(.ol-hero)) > :is(.wrap, .hero-g) { position: relative; inset: auto; min-height: 100svh; padding-top: calc(var(--hdr) + var(--s3)); }
}
/* Landscape phones only: the title one style smaller and a shade that reaches it. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.015em; max-width: 22ch; }
  .hero h1.is-long { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.01em; max-width: 28ch; }
  .hero .t-lead { margin-top: var(--s4); }
  .hero-acts, .hero-meta, .hero-tags { margin-top: var(--s5); }
  /* the text now reaches the upper half of the picture: the shade reaches it too (same colours, stops stretched) */
  .hero:not(.hero--plain) { --scrim: linear-gradient(to top, color-mix(in srgb, var(--night) var(--a0), transparent) 0%, color-mix(in srgb, var(--night) calc(var(--a0) * 0.5 + var(--a1) * 0.5), transparent) 22%, color-mix(in srgb, var(--night) var(--a1), transparent) 46%, color-mix(in srgb, var(--night) calc(var(--a1) * 0.8), transparent) 62%, color-mix(in srgb, var(--night) calc(var(--a1) * 0.5), transparent) 76%, color-mix(in srgb, var(--night) calc(var(--a1) * 0.2), transparent) 88%, transparent 100%), linear-gradient(to right, color-mix(in srgb, var(--night) var(--b0), transparent) 0%, transparent 60%); }
}

/* Journal paper list below 360 px: "Read the paper, with PDF" did not wrap (nowrap) and ran 23 px past the
   screen edge at 320, cut off by the page clip. It now wraps inside its 144 px column; the room under it keeps the
   link line under the last line instead of through it. Checked at 320; 360 and up unchanged (one line). */
@media (max-width: 359px) {
  .paper-t > .lnk { white-space: normal; max-width: 100%; padding-bottom: 12px; }
}

/* Press kit calculator table at 320 px: 318 px wide in a 280 px column, the "Share of it" column was cut off
   18 px past the screen edge. Narrower bar column and cell gap below 360 px. Checked at 320, 360. */
@media (max-width: 359px) {
  .pr-res td:last-child { min-width: 64px; }
  .pr-res th, .pr-res td { padding-right: var(--s2); }
}

/* Partner cards (Home and Platform, five cards) on small tablets, 600 to 809 px: two columns, so the fifth card stood
   alone in the left column beside an empty slot of 352 px (768). As from 810 px, the fifth card now runs across both
   columns, picture left, text right. Checked at 600, 768, 809 (Home, Platform, de/platform); phones below 600 keep one column. */
@media (min-width: 600px) and (max-width: 809px) {
  .who-boxes:has(> li:nth-child(5)) > li:nth-child(5) { grid-column: 1 / -1; }
  .who-boxes:has(> li:nth-child(5)) > li:nth-child(5) .who-box { flex-direction: row; }
  .who-boxes:has(> li:nth-child(5)) > li:nth-child(5) .who-m { flex: 0 0 calc((100% - var(--gut)) / 2); align-self: flex-start; }
  .who-boxes:has(> li:nth-child(5)) > li:nth-child(5) .who-t { padding-left: calc(var(--gut) + var(--s5)); }
}


/* ==================== motion check 4 Nov 2026: design-flow ==================== */

/* ==================== review6 design-flow (4 Nov 2026, 15:00) ==================== */

/* Atlas "Method and sources" and the twelve material pages "Sources for this page": the label sat 24 px above the
   title (the block spaces all its children with one 24 px gap); every other section on the site has 16 px between
   label and title. Now 16 px, the rest of the block keeps its 24 px. Checked at 390, 1024, 1440 (atlas, lithium, boron). */
.me-t > .t-label + * { margin-top: calc(var(--s4) - var(--s5)); }

/* Home, "Between the deposit and the factory" (title left, text right): the text started level with the bottom of
   the label, 16 px above the title, so its first line sat between label and title. It now starts on the title's line,
   as the list does beside the title in Responsibility "Plan with the people who live there".
   Checked at 1200, 1440, 1920; below 1200 the block stacks and is unchanged. */
@media (min-width: 1200px) {
  #overview .ov-t > .t-body { margin-top: var(--s4); }
}

/* Platform, "From resource to end market" on tablets (810 to 1199 px): each of the five steps was a row with a
   picture of 2/5 of the page (376 x 470 at 1024, 446 x 558 at 1199) beside one short line of text, so the section ran
   to 2790 px at 1024 and 3228 px at 1199, mostly picture. The picture now takes two of the eight columns and the text
   starts on the third column line, the same row pattern as on phones at a tablet scale.
   Checked at 810, 1024, 1199 (EN and DE); phones and desktop unchanged. */
@media (min-width: 810px) and (max-width: 1199px) {
  .pg--5 .pg-i { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); }
  .pg--5 .pg-m { grid-column: 1 / span 2; }
  .pg--5 .pg-t { grid-column: 3 / -1; }
}


/* ==================== motion check 4 Nov 2026: a11y-motion ==================== */
/* a11y-motion review (4 Nov 2026): no CSS fixes handed in. The phone tap-target extension for .rd-link was tested and left out: on iPhone SE a wrapped label (Magnesium) let its extension overlap the row above by a few px. See report. */


/* ==================== v70_light33 (4 Nov 2026) ==================== */
/* chemical formulas and m3 in the paper tables: small figures in the text face, not footnote marks */
.pr-tbl sub { font-size: 70%; line-height: 0; top: 0.22em; vertical-align: baseline; letter-spacing: 0; }
.pr-tbl sup.u { font-size: 68%; line-height: 0; top: -0.45em; vertical-align: baseline; margin-left: 0; letter-spacing: 0; color: inherit; }

/* ==================== v70_light38 (4 Nov 2026): Glossary page ==================== */
.gloss dfn { font-style: normal; }
.gloss .rows { margin-top: var(--s6); }
.gloss .rows > div { scroll-margin-top: calc(var(--hdr) + var(--s5)); }
.gloss .rows > div:target dt { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ==================== full check 4 Nov 2026 (v70_light39): design-desk ==================== */

/* review10 design-desk, 4 Nov 2026 */

/* Journal, Papers: four papers in a three-column grid left Paper 4 alone on a second row
   with two empty columns. With exactly four papers, show them in one row of four on wide screens.
   A fifth paper falls back to the three-column grid. Checked journal.html at 1280, 1440, 1920. */
@media (min-width: 1200px) {
  .papers:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Header: the focus ring of the Atlas and Journal chevron buttons (44px box, 3px offset)
   ran over the end of the "Atlas" / "Journal" link text. Pull the ring inside the button.
   Checked index.html and de/index.html at 1280 with keyboard focus (Tab), before and after. */
.nav-t:focus-visible { outline-offset: -6px; }


/* ==================== full check 4 Nov 2026 (v70_light39): design-mobile ==================== */

/* ==================== review10 design-mobile (4 Nov 2026, 22:30): phones and tablets ==================== */

/* Glossary, Questions and answers, Legal notice, Privacy, Cookies, Sources, Links below 1200 px: the side menu becomes a
   row of links at the top; each link was 38 px high (10 px padding), under the 44 px touch size, and the wrapped rows
   touched. 13 px padding gives 44 px; the row only grows by 6 px per line.
   Checked: iPhone SE (320), Pixel 7 (412), iPad Mini (768), iPad Pro 11 (834) on glossary, faq, legal, de/faq. */
@media (max-width: 1199px) {
  .legal-nav a { padding-block: 13px; }
}

/* Chart and citation pills (PNG, SVG, Data, Embed, Copy citation, Charts and data) on papers, articles and the
   Press kit were 32 px high on touch screens. 44 px on coarse pointers only; mouse users keep the 32 px pill.
   Checked: iPhone SE, Pixel 7, iPad Mini, iPad Pro 11 (article, paper-supply, press). */
@media (pointer: coarse) {
  .pr-b { height: 44px; }
}

/* Paper and article tables below 1200 px: the fade at the right edge (the hint that a table scrolls) was fixed, so it
   also faded the last column of tables that fit (article, 280 px table in a 280 px column on iPhone SE) and stayed
   on the last column after scrolling to the end; on tablets from 810 px wide tables scrolled with no hint at all.
   Where the browser has scroll-driven animations (Chromium 115+, Safari 26+) the fade now shows only while there is
   more to the right and goes at the end; tables that fit show no fade. Older browsers keep the phone fade as before.
   Checked: iPhone SE, Pixel 7, iPad Mini, iPad Pro 11 portrait and landscape (article, paper-supply, paper-2030,
   paper-disruptions, paper-words). */
@property --tbl-f { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes tbl-f { 0%, 94% { --tbl-f: 48px; } 100% { --tbl-f: 0px; } }
@supports (animation-timeline: scroll()) {
  @media (max-width: 1199px) {
    .pr-tbl {
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--tbl-f)), transparent);
      mask-image: linear-gradient(to right, #000 calc(100% - var(--tbl-f)), transparent);
      animation: tbl-f linear both; animation-timeline: scroll(self inline);
    }
  }
}


/* ==================== full check 4 Nov 2026 (v70_light39): motion ==================== */
/* review10 motion: no style fix handed in. The one CSS change tried (hide .hero-t children by visibility during
   html.hero-hold, to keep the font swap out of CLS) did not change the measured layout shift and was dropped.
   The motion fixes of this round are script changes, see fixes.json. */


/* ==================== full check 4 Nov 2026 (v70_light39): lead ==================== */
/* Hero titles and leads start their rise at opacity 0.01 instead of 0: Chrome does not count invisible text as the largest
   paint, so PageSpeed Insights reported no LCP on most pages. Visually identical. Checked with a PerformanceObserver at 1440
   and on Pixel 7 (about, platform, paper-supply, glossary now report the h1 or the lead). */
@keyframes heroRise { from { opacity: 0.01; translate: 0 var(--rise); } }

/* German About on small phones: "Landwirtschaft" ran 22 px out of its column in the six-sector list. The heading may now
   hyphenate below 600 px. Checked on iPhone SE (wraps to two lines, no overflow) and iPhone 13 (unchanged). */
@media (max-width: 599px) { .pg-t > h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; min-width: 0; max-width: 100%; } }

/* Statement band on Home on 320 px phones: the French "approvisionnement." was 337 px wide in a 280 px column and was cut.
   Below 375 px the display size follows the width (27.5 px at 320). Checked in all six languages on iPhone SE; iPhone 13 unchanged. */
@media (max-width: 374px) { .wb-t .st-l.t-display { font-size: min(36px, 8.6vw); } }


/* ==================== v70_light40 (5 Nov 2026): import reliance on the material pictures (Home) ==================== */
.mat-i { position: absolute; left: var(--s3); bottom: var(--s3); z-index: 1; max-width: calc(100% - 2 * var(--s3)); padding: 3px 7px 4px; border-radius: 2px;
  font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: 0.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
  color: var(--limestone); background: color-mix(in srgb, var(--night) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 419px) { .mat-i { left: var(--s2); bottom: var(--s2); max-width: calc(100% - 2 * var(--s2)); padding: 2px 6px 3px; letter-spacing: 0; } }