/* Inditex DCF — design tokens and base styles.
   Mirrors the application website (moritzsturm.pages.dev): dark-only, white type,
   signal-yellow accent, Barlow for display text, Inter for body text. */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../assets/fonts/barlow-latin-200-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/barlow-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/barlow-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/barlow-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  color-scheme: dark;

  --color-ground: #05070f;
  --color-ground-raised: #0a0e1a;
  --color-ink: #0b0d14;
  --color-text: #f4f5f7;
  --color-soft: #c4c8d2;
  --color-muted: #8b90a0;
  --color-accent: #ffe600;
  --color-secondary: #4f8cff;
  --color-up: #3ddc97;
  --color-down: #ff7a6b;
  --color-nav: #101a33;
  --color-hairline: rgb(255 255 255 / 0.06);
  --color-hairline-strong: rgb(255 255 255 / 0.14);

  --font-display: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter Variable', 'Inter', system-ui, sans-serif;

  --gutter: clamp(16px, 3.5vw, 56px);
  --chapter-pad: clamp(32px, 4vw, 56px);
  --hud-height: 80px; /* header height plus a little air, for sticky inputs; js/main.js keeps it exact */
  --hatch: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 7px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-ground);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100svh;
  overflow-x: hidden;
  margin: 0;
  background: var(--color-ground);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

a {
  color: inherit;
}

::selection {
  background: var(--color-accent);
  color: var(--color-ink);
}

:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 4px;
}
/* Headings focused by script (tab switch, closing the intro) are not controls: no focus frame. */
[tabindex='-1']:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

[hidden] {
  display: none !important;
}

/* A sideways swipe (touch screen or touchpad) switches chapters (js/tabs.js), not the browser's history. */
html,
body {
  overscroll-behavior-x: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Shared components ---------- */

/* Small, widely tracked uppercase label (HUD text). */
.micro {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* "01 —— 07" index with hatched background. */
.section-index {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--hatch);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.section-index b {
  color: var(--color-secondary);
  font-weight: 400;
}
.section-index i {
  width: 30px;
  height: 1px;
  background: var(--color-text);
}

.display-title {
  font-family: var(--font-display);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  line-height: 1.05;
  text-wrap: balance;
}

.btn {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 34px 0 30px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.btn-primary {
  background: #fff;
  color: var(--color-ink);
  border-left: 8px solid var(--color-accent);
}
.btn-primary:hover {
  background: var(--color-accent);
}
.btn-ghost {
  color: var(--color-text);
  border: 1px solid var(--color-hairline-strong);
}
.btn-ghost:hover {
  border-color: var(--color-text);
}

/* ---------- Page frame ---------- */

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 50;
  padding: 10px 14px;
  background: var(--color-accent);
  color: var(--color-ink);
}
.skip:focus {
  top: 16px;
}

/* Four vertical hairlines behind the page — the report's column grid. */
.grid-lines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-inline: var(--gutter);
}
.grid-lines span {
  border-left: 1px solid var(--color-hairline);
}
.grid-lines span:last-child {
  border-right: 1px solid var(--color-hairline);
}

main {
  position: relative;
  z-index: 1;
}

/* Header ("HUD"): one slim bar that stays on top; its links switch between chapters. Where they do not all fit
   next to the word mark, they scroll sideways (js/tabs.js keeps the open chapter in view). */
.hud {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: calc(11px + env(safe-area-inset-top, 0px)) var(--gutter) 11px;
  background: var(--color-nav);
  border-bottom: 2px solid var(--color-secondary);
}
/* Word mark: the project name, also the link back to the overview (header) and the intro's label. */
.wordmark {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 5px 14px;
  margin: 0;
  flex: none;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark::before {
  content: '';
  grid-row: 1 / span 2;
  align-self: stretch;
  width: 4px;
  background: var(--color-accent);
}
.wordmark b {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: color 0.2s;
}
.wordmark small {
  font-family: var(--font-display);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent);
}
a.wordmark:hover b {
  color: var(--color-accent);
}
.nav {
  --nav-gap: clamp(14px, 1.5vw, 28px);
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin-inline: -3px;
  padding: 4px 3px;
  overflow-x: auto;
  scrollbar-width: none;
  letter-spacing: 0.22em;
}
.nav::-webkit-scrollbar {
  display: none;
}
.nav ul {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  white-space: nowrap;
}
.nav a:focus-visible {
  outline-offset: 2px;
}
.nav a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.nav a:hover {
  color: var(--color-text);
}
.nav a[aria-current='page'] {
  color: var(--color-accent);
}
/* Language switch (EN · DE · ES) at the right end of the header, as on the website. */
.langs {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding-left: 18px;
  border-left: 1px solid var(--color-hairline-strong);
  letter-spacing: 0.22em;
}
.langs a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.langs a:hover {
  color: var(--color-text);
}
.langs a[aria-current] {
  color: var(--color-accent);
}

/* Overview stands apart from the chapters: framed, with an icon and a divider. */
.nav-home {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}
.nav-home::after {
  content: '';
  width: 1px;
  height: 22px;
  background: var(--color-hairline-strong);
}
.nav .nav-home a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--color-hairline-strong);
  color: var(--color-text);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.nav .nav-home a:hover {
  border-color: var(--color-text);
}
.nav .nav-home a[aria-current='page'] {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.nav-home svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

/* ---------- Hero ---------- */

/* Four-column grid aligned with the background hairlines. */
.hero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: center;
  padding: 56px var(--gutter) 48px;
}
.hero-head,
.hero-meta {
  grid-column: 1 / -1;
}
.hero-head {
  display: grid;
  justify-items: start;
}
.hero .section-index {
  margin-bottom: 36px;
}
.eyebrow {
  color: var(--color-secondary);
  margin-bottom: 22px;
}
.hero-title {
  font-size: clamp(56px, 11vw, 176px);
  letter-spacing: 0.22em;
  margin-right: -0.22em;
}
.hero-copy {
  grid-column: 1 / span 2;
  align-self: start;
  padding-right: 28px;
}
.hero-sub {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.hero-lede {
  margin-top: 40px;
  max-width: 34ch;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  color: var(--color-text);
  text-wrap: balance;
}
.hero-figure {
  grid-column: 3 / span 2;
  margin: 22px 0 0;
  padding-left: 28px;
}
.hero-meta {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-hairline-strong);
}
.hero-meta div {
  display: grid;
  gap: 10px;
  padding: 20px 24px 0 0;
}
.hero-meta div + div {
  padding-left: 24px;
  border-left: 1px solid var(--color-hairline);
}
.hero-meta dd {
  font-size: 15px;
  font-weight: 300;
  color: var(--color-soft);
}

/* ---------- KPI band ---------- */

.kpis {
  padding: 0 var(--gutter) var(--chapter-pad);
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-hairline-strong);
}
.tile {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: 26px 28px 8px 0;
  min-width: 0;
}
.tile + .tile {
  padding-left: 28px;
  border-left: 1px solid var(--color-hairline);
}
.tile dt {
  color: var(--color-secondary);
}
.value {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 1;
  letter-spacing: 0.02em;
}
.value.pending {
  color: var(--color-muted);
}
.note {
  max-width: 28ch;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--color-muted);
}

/* ---------- Report sections ---------- */

.chapter {
  padding: var(--chapter-pad) var(--gutter);
  scroll-margin-top: var(--hud-height);
}
.chapter-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px 24px;
  margin-bottom: 32px;
  padding-left: 18px;
  border-left: 3px solid var(--color-secondary);
}
.chapter-title {
  hyphens: auto; /* long German and Spanish words on phones */
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 300;
  color: var(--color-secondary);
}
.chapter-intro {
  grid-column: 1 / -1;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--color-muted);
}

/* Placeholder panel for chapters that are not built yet. */
.pending-panel {
  display: grid;
  gap: 14px;
  max-width: 760px;
  padding: 28px 32px;
  border: 1px solid var(--color-hairline-strong);
  background: var(--hatch), var(--color-ground-raised);
}
.pending-panel .micro {
  color: var(--color-accent);
}
.pending-panel p:not(.micro) {
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--color-soft);
}

/* ---------- Figures & charts ---------- */

:root {
  --chart-neutral: #7d8293;
  --chart-reported: var(--color-secondary);
  --chart-strong: var(--color-secondary);
  --chart-accent: var(--color-accent);
}

.figure {
  margin: 0;
  min-width: 0;
}
.figure-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 18px;
}
.figure-head .micro {
  color: var(--color-soft);
}
.figure-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--color-muted);
}
.legend {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 300;
  color: var(--color-soft);
}
.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.mark-neutral {
  fill: var(--chart-neutral);
  background: var(--chart-neutral);
}
.mark-strong {
  fill: var(--chart-strong);
  background: var(--chart-strong);
}
.mark-reported {
  fill: var(--chart-reported);
  background: var(--chart-reported);
}
.mark-accent {
  fill: var(--chart-accent);
  background: var(--chart-accent);
}
/* Model values that are not the final result (e.g. present values in the equity bridge): yellow outline. */
.mark-model {
  fill: rgb(255 230 0 / 0.14);
  stroke: var(--chart-accent);
  stroke-width: 1.5px;
  background: rgb(255 230 0 / 0.14);
  box-shadow: inset 0 0 0 1.5px var(--chart-accent);
}
.mark {
  transition: filter 0.15s;
}
.mark.is-active {
  filter: brightness(1.25);
}

.chart-plot {
  position: relative;
  min-width: 0;
}
/* Charts are drawn at the container's pixel width; max-width lets the container shrink first
   (window made narrower), after which the chart is redrawn at the new width. */
.chart-svg {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
}
.chart-grid {
  stroke: var(--color-hairline);
  stroke-width: 1;
}
.chart-axis,
.chart-connector {
  stroke: var(--color-hairline-strong);
  stroke-width: 1;
}
.chart-tick {
  fill: var(--color-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.chart-label {
  fill: var(--color-soft);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.chart-hit {
  fill: transparent;
  outline: none;
}
.chart-hit:focus-visible {
  stroke: var(--color-accent);
  stroke-width: 1;
}
.chart-tip {
  position: absolute;
  z-index: 5;
  min-width: 160px;
  padding: 10px 12px;
  background: var(--color-ground-raised);
  border: 1px solid var(--color-hairline-strong);
  pointer-events: none;
}
.chart-tip-title {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.chart-tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.7;
}
.chart-tip-row b {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.chart-tip-row span {
  font-weight: 300;
  color: var(--color-muted);
}
.chart-tip-key {
  width: 12px;
  height: 2px;
  flex: none;
}

/* Horizontal bar list (HTML). Single series: one neutral colour, value at the tip column. */
.bar-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bar-list li {
  display: grid;
  grid-template-columns: minmax(110px, 34%) minmax(0, 1fr) 64px;
  align-items: center;
  gap: 16px;
}
.bar-name {
  font-size: 14px;
  font-weight: 300;
  color: var(--color-soft);
  line-height: 1.3;
}
.bar-name small {
  display: block;
  font-size: 12px;
  color: var(--color-muted);
}
.bar-track {
  display: block;
  height: 12px;
}
.bar-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 0 4px 4px 0;
  background: var(--chart-reported);
}
.bar-value {
  justify-self: end;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* ---------- Chapter content ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-hairline-strong);
}
.fact {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 24px 28px 0 0;
  min-width: 0;
}
.fact + .fact {
  padding-left: 28px;
  border-left: 1px solid var(--color-hairline);
}
.fact dt {
  color: var(--color-secondary);
}
.fact-value {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(38px, 4.2vw, 64px);
  line-height: 1;
  letter-spacing: 0.02em;
}

.source-line {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 300;
  color: var(--color-muted);
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 40px;
}
.split > :first-child {
  padding-right: 28px;
}
.split > :last-child {
  padding-left: 28px;
}

.sub-title {
  color: var(--color-secondary);
  margin: 44px 0 20px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.explain .sub-title {
  margin-top: 0;
}
.explain p {
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--color-soft);
}
.explain p + p {
  margin-top: 16px;
}
.explain b {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.explain .aside {
  padding-left: 16px;
  border-left: 1px solid var(--color-hairline-strong);
  font-size: 14px;
  color: var(--color-muted);
}

/* Numbered points, as on the website's project cards. */
.points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 56px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pt;
}
.points li {
  position: relative;
  max-width: 60ch;
  padding-left: 36px;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--color-soft);
  counter-increment: pt;
}
.points li::before {
  content: counter(pt, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
}
.points strong {
  font-weight: 500;
  color: var(--color-text);
}

/* Statement tabs. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
  margin-bottom: 4px;
}
.tab {
  position: relative;
  padding: 12px 0;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.2s;
}
.tab:hover,
.tab[aria-selected='true'] {
  color: var(--color-text);
}
.tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0.24em;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
}

/* Financial table. */
.table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--color-hairline-strong);
}
.fin-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}
.fin-table th,
.fin-table td {
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid var(--color-hairline);
  text-align: right;
  white-space: nowrap;
}
.fin-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  padding-left: 0;
  text-align: left;
  font-weight: 300;
  color: var(--color-soft);
  background: var(--color-ground);
  white-space: normal;
}
.fin-table thead th {
  padding-top: 16px;
  padding-bottom: 12px;
  font-size: 11px;
  color: var(--color-muted);
}
.fin-table thead th:first-child {
  color: var(--color-muted);
}
.fin-table thead th:last-child {
  color: var(--color-text);
}
.fin-table th small {
  display: block;
  font-size: 12px;
  color: var(--color-muted);
}
.fin-table td {
  color: var(--color-soft);
  cursor: default;
}
.fin-table .row-sub th,
.fin-table .row-sub td {
  font-weight: 500;
  color: var(--color-text);
}
.fin-table .row-total th,
.fin-table .row-total td {
  font-weight: 600;
  color: var(--color-text);
  border-top: 1px solid var(--color-hairline-strong);
}
.fin-table .row-ratio th,
.fin-table .row-ratio td {
  padding-top: 4px;
  font-size: 13px;
  color: var(--color-muted);
}
.fin-table tbody tr:hover td {
  background: rgb(255 255 255 / 0.03);
}

/* Year chips. */
.chips {
  display: flex;
  gap: 6px;
}
.chip {
  padding: 6px 10px;
  background: none;
  border: 1px solid var(--color-hairline-strong);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.chip:hover {
  color: var(--color-text);
}
.chip[aria-pressed='true'] {
  border-color: var(--color-text);
  color: var(--color-text);
}

.bridge {
  align-items: start;
}

.sources {
  display: grid;
  align-content: start;
  gap: 12px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--color-hairline);
}
.sources ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 300;
  color: var(--color-muted);
}
.sources a {
  color: var(--color-soft);
  text-decoration-color: var(--color-hairline-strong);
  text-underline-offset: 3px;
}
.sources a:hover {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
}

/* ---------- Forecast ---------- */

.workbench {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  margin-bottom: 32px;
}
.assumptions {
  grid-column: 1;
  display: grid;
  gap: 22px;
  padding-right: 28px;
}
.assumptions-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-hairline-strong);
}
.assumptions-head .micro {
  color: var(--color-secondary);
}
.link-button {
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-hairline-strong);
  text-underline-offset: 4px;
  cursor: pointer;
}
.link-button:hover {
  color: var(--color-text);
}
[data-sliders],
[data-capital-sliders] {
  display: grid;
  gap: 22px;
}
.slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.slider-head label {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-soft);
}
.slider-head output {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.slider.is-changed output {
  color: var(--color-accent);
}
.slider-note,
.assumptions-note {
  font-size: 12px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--color-muted);
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  margin: 2px 0 4px;
  background: transparent;
  cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--color-hairline-strong);
}
input[type='range']::-moz-range-track {
  height: 2px;
  background: var(--color-hairline-strong);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -7px;
  border: 0;
  border-radius: 50%;
  background: var(--color-text);
  box-shadow: 0 0 0 4px var(--color-ground);
}
input[type='range']::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--color-text);
  box-shadow: 0 0 0 4px var(--color-ground);
}
.slider.is-changed input[type='range']::-webkit-slider-thumb {
  background: var(--color-accent);
}
.slider.is-changed input[type='range']::-moz-range-thumb {
  background: var(--color-accent);
}
input[type='range']:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 4px;
}

.workbench-output {
  grid-column: 2 / span 3;
  display: grid;
  gap: 40px;
  min-width: 0;
  padding-left: 28px;
}
/* Grid children must be allowed to shrink, or a wide table inside pushes the page wider than the screen. */
.workbench-output > * {
  min-width: 0;
}
.mini-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--color-hairline-strong);
}
.mini-facts div {
  display: grid;
  gap: 12px;
  padding: 18px 20px 0 0;
}
.mini-facts div + div {
  padding-left: 20px;
  border-left: 1px solid var(--color-hairline);
}
.mini-facts dt {
  color: var(--color-soft);
}
.mini-facts dd {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
}
.chart-phase {
  fill: var(--color-muted);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.fin-table td.is-estimate {
  background: rgb(255 255 255 / 0.02);
}
.fin-table thead th.is-estimate {
  color: var(--color-soft);
}
.source-line a {
  color: var(--color-soft);
  text-underline-offset: 3px;
  text-decoration-color: var(--color-hairline-strong);
}

.formula {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}
.explain p.formula {
  max-width: none;
}
.formula [data-out] {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 26px);
  color: var(--color-text);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.split-tight {
  margin-top: 0;
}

@media (min-width: 901px) and (min-height: 820px) {
  .assumptions {
    position: sticky;
    top: var(--hud-height);
  }
}

.input-list {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--color-hairline-strong);
}
.input-list div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-hairline);
}
.input-list dt {
  font-size: 14px;
  font-weight: 300;
  color: var(--color-soft);
}
.input-list dt small {
  display: block;
  font-size: 12px;
  color: var(--color-muted);
}
.input-list dd {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Chapter 05: the final value per share is the big line; the steps before and after it are small. */
.formula .formula-step {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--color-muted);
}
.warning {
  padding: 14px 16px;
  border-left: 2px solid var(--color-accent);
  background: var(--color-ground-raised);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-soft);
}

.fin-table-compact {
  min-width: 0;
}
.fin-table-compact thead th {
  white-space: normal;
}

/* ---------- Sensitivity & method ---------- */

.scenario-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-bottom: 28px;
}
.scenario-bar .micro {
  color: var(--color-secondary);
}
.scenario-note {
  font-size: 13px;
  font-weight: 300;
  color: var(--color-muted);
}
.mini-note {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-muted);
}
.mini-facts .mini-note {
  font-size: 13px;
}
.fin-table th.is-active,
.fin-table td.is-active {
  color: var(--color-text);
}
.fin-table thead th.is-active {
  color: var(--color-accent);
}
.fin-table td.is-active {
  background: rgb(255 255 255 / 0.03);
}
.sens-table td {
  text-align: center;
}
.sens-table thead th:not(:first-child) {
  text-align: center;
}
.sens-table td.is-above {
  background: rgb(255 230 0 / 0.1);
  color: var(--color-text);
  font-weight: 500;
}
.sens-table td.is-current {
  outline: 1px solid var(--color-text);
  outline-offset: -1px;
  font-weight: 600;
  color: var(--color-text);
}
.sens-table th.is-current-row,
.sens-table thead th.is-current-col {
  color: var(--color-text);
}
/* Only statement tables highlight their last column (the latest year); here the last column is not special. */
.scenario-table thead th:last-child:not(.is-active),
.sens-table thead th:last-child:not(.is-current-col) {
  color: var(--color-muted);
}
.scenario-stories {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--color-muted);
}
.scenario-stories b {
  font-weight: 500;
  color: var(--color-soft);
}
.sub-intro {
  max-width: 64ch;
  margin: -12px 0 28px;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--color-muted);
}
.sub-title-first {
  margin-top: 0;
}
.plain-list {
  display: grid;
  gap: 10px;
  max-width: 80ch;
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--color-soft);
}
.plain-list li::marker {
  color: var(--color-secondary);
}
.sources-plain {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* Three source groups side by side: company reports, market data, peer reports. */
.sources-split {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
}
.split.sources-split > * {
  padding: 0;
}
/* About: portrait next to the text, framed like the website's foreword (yellow corners, colour on hover). */
.about-layout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
}
.about-text {
  grid-column: 2 / span 3;
  display: grid;
  gap: 26px;
  padding-left: clamp(28px, 4vw, 64px);
}
.about-text h3 {
  margin: 0 0 10px;
  color: var(--color-secondary);
}
.about-text p {
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--color-soft);
}
.about-text .about-note {
  padding-top: 18px;
  border-top: 1px solid var(--color-hairline);
  font-size: 13px;
  color: var(--color-muted);
}
.portrait {
  position: relative;
  width: min(100%, 300px);
  margin: 10px;
}
.portrait .frame {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.92);
  transition: filter 0.8s ease;
}
.portrait:hover img {
  filter: none;
}
.portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgb(5 7 15 / 0.85));
  pointer-events: none;
}
.corner {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 22px;
  border: 0 solid var(--color-accent);
}
.c1 {
  top: -10px;
  left: -10px;
  border-width: 1px 0 0 1px;
}
.c2 {
  top: -10px;
  right: -10px;
  border-width: 1px 1px 0 0;
}
.c3 {
  bottom: -10px;
  left: -10px;
  border-width: 0 0 1px 1px;
}
.c4 {
  bottom: -10px;
  right: -10px;
  border-width: 0 1px 1px 0;
}
.portrait figcaption {
  position: absolute;
  z-index: 3;
  left: 18px;
  bottom: 16px;
  color: var(--color-text);
}
@media (prefers-reduced-motion: reduce) {
  .portrait img {
    transition: none;
  }
}
@media (max-width: 760px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-text {
    grid-column: 1;
    padding-left: 0;
  }
  .portrait {
    width: min(70vw, 260px);
  }
}

/* ---------- Key figures ---------- */

/* The one headline result per chapter in yellow; deviations from the share price green (above) or
   red (below). The sign stays in the text, so the meaning never depends on colour alone. */
.is-result {
  color: var(--color-accent);
}
.is-up {
  color: var(--color-up);
}
.is-down {
  color: var(--color-down);
}
.fin-table td.is-up {
  color: var(--color-up);
}
.fin-table td.is-down {
  color: var(--color-down);
}

/* ---------- Peers ---------- */

.bar-fill.is-price {
  background: var(--color-soft);
}
.bar-fill.is-dcf {
  background: var(--color-accent);
}
.fin-table tr.is-excluded th,
.fin-table tr.is-excluded td {
  color: var(--color-muted);
  text-decoration: line-through;
  text-decoration-color: var(--color-hairline-strong);
}
.peers-table {
  margin-top: 8px;
}
.peers thead th:last-child {
  color: var(--color-muted);
}

/* ---------- Key findings (overview) ---------- */

.findings {
  padding: 0 var(--gutter) var(--chapter-pad);
}
.findings > .sub-title {
  margin-top: 0;
}
.findings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  padding-top: 28px;
  border-top: 1px solid var(--color-hairline-strong);
}
.findings-points {
  grid-column: 1 / span 2;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-right: 28px;
}
.findings-points li {
  max-width: 56ch;
}
.findings-grid .figure {
  grid-column: 3 / span 2;
  padding-left: 28px;
}
.key-line {
  width: 14px;
  height: 0;
  border-top: 1.5px dashed var(--color-soft);
  border-radius: 0;
}
.ff-label {
  fill: var(--color-text);
  font-family: var(--font-body);
  font-size: 13px;
}
.ff-note {
  fill: var(--color-muted);
  font-family: var(--font-body);
  font-size: 11px;
}
.ff-mid {
  stroke: var(--color-text);
  stroke-width: 2;
}
.ff-price {
  stroke: var(--color-soft);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.ff-price-label {
  fill: var(--color-soft);
  font-family: var(--font-body);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .findings-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .findings-points,
  .findings-grid .figure {
    grid-column: 1;
    padding: 0;
  }
}

/* ---------- Chapter tabs ---------- */

.panel-next {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}
/* Source of a table figure on touch screens, where title tooltips do not exist (js/main.js). */
.source-tip {
  position: absolute;
  z-index: 30;
  padding: 10px 12px;
  background: var(--color-ground-raised);
  border: 1px solid var(--color-hairline-strong);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-soft);
}

.panel-overview .panel-next {
  margin-top: 0;
  padding: 0 var(--gutter) var(--chapter-pad);
}

/* Previous / next arrows at the screen edges (js/tabs.js); on touch screens a swipe does the same. */
.pager {
  position: fixed;
  top: 50%;
  z-index: 15;
  display: grid;
  place-items: center;
  width: 26px;
  height: 40px;
  margin-top: -20px;
  border: 1px solid var(--color-hairline-strong);
  background: rgb(5 7 15 / 0.85);
  color: var(--color-muted);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.pager:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.pager svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.pager-prev {
  left: max(4px, calc((var(--gutter) - 26px) / 2));
}
.pager-next {
  right: max(4px, calc((var(--gutter) - 26px) / 2));
}

/* ---------- Intro ---------- */

/* Full-screen intro on a direct visit (js/intro.js), like the website's. Until it is in place the page stays
   hidden, so it never flashes up first; js/boot.js lifts this after loading if the scripts fail. */
.intro-pending body > *,
.i18n-pending body > * {
  visibility: hidden;
}
.intro-active {
  overflow: hidden;
}
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 32px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) var(--gutter) calc(36px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: var(--color-ground);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.7, 0, 0.3, 1);
}
.intro.is-leaving {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}
.intro-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-inline: var(--gutter);
  pointer-events: none;
}
.intro-grid span {
  border-left: 1px solid var(--color-hairline);
}
.intro-grid span:last-child {
  border-right: 1px solid var(--color-hairline);
}
.intro-top {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.intro-body {
  position: relative;
  align-self: center;
  display: grid;
  justify-items: center;
  text-align: center;
}
.intro-body .eyebrow {
  margin-bottom: 30px;
}
.intro-title {
  margin-right: -0.2em;
  font-size: clamp(30px, 6.4vw, 104px);
  letter-spacing: 0.2em;
  line-height: 1.12;
}
.intro-answer {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px 36px;
  margin-top: clamp(32px, 5vh, 54px);
  padding-top: clamp(24px, 4vh, 36px);
  border-top: 1px solid var(--color-hairline-strong);
  text-align: left;
}
.intro-answer .value {
  grid-row: 1 / span 2;
  font-size: clamp(56px, 7vw, 112px);
}
.intro-answer p:not(.value) {
  font-size: 15px;
  font-weight: 300;
  color: var(--color-soft);
}
.intro-answer b {
  font-weight: 500;
}
.intro-bottom {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 20px;
}
.intro-loading b {
  margin-left: 8px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
.intro-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 22px;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.intro.is-loading .intro-actions {
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
}
/* Entrance: label, question, answer and counter rise one after another. */
@keyframes intro-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
.intro-top,
.intro-body > *,
.intro-loading {
  animation: intro-rise 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.intro-body .eyebrow {
  animation-delay: 0.15s;
}
.intro-title {
  animation-delay: 0.3s;
}
.intro-answer {
  animation-delay: 0.55s;
}
.intro-loading {
  animation-delay: 0.75s;
}
@media (max-width: 560px) {
  .intro-top .micro {
    display: none;
  }
  .intro-title {
    letter-spacing: 0.14em;
    margin-right: -0.14em;
  }
  .intro-answer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .intro-answer .value {
    grid-row: auto;
  }
}
/* "or press Enter" only where there is a keyboard. */
@media (hover: none) {
  .intro-actions .micro {
    display: none;
  }
}
@media print {
  .intro {
    display: none;
  }
}

/* ---------- Motion ---------- */

/* Played by js/motion.js, as on the website: blocks fade and rise into view, groups follow one after another,
   chart bars grow from their base, table rows build up line by line and figures decode. Without html.motion
   (no JavaScript, or reduced motion requested) everything is simply there; print always shows everything. */

/* Equal-width digits, so figures keep their width while they decode. */
.value,
.fact-value,
.mini-facts dd {
  font-variant-numeric: tabular-nums;
}

/* A figure and its unit (39,9 Mrd. €, 39.864 M€) always stay on one line. */
.value,
.fact-value,
.mini-facts dd:not(.mini-note) {
  white-space: nowrap;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .motion {
    --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
    --stagger: 0.12s;
  }
  .motion [data-reveal] {
    --delay: calc(var(--d, 0) * var(--stagger));
  }
  .motion [data-reveal-group] > * {
    --delay: calc((var(--d, 0) + var(--g, 0)) * var(--stagger));
  }
  .motion [data-reveal],
  .motion [data-reveal-group] > * {
    transition:
      opacity 0.9s var(--ease-out) var(--delay),
      transform 0.9s var(--ease-out) var(--delay);
  }
  /* Blocks rise into place; after an arrow or a swipe (--slide ±1, --rise 0) they come in from that side. */
  .motion [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translate(calc(var(--slide, 0) * 40px), calc(var(--rise, 1) * 32px));
  }
  .motion [data-reveal-group]:not(.is-in) > * {
    opacity: 0;
    transform: translate(calc(var(--slide, 0) * 40px), calc(var(--rise, 1) * 24px));
  }

  /* Chart columns grow from the axis (falling waterfall steps from the level above), one after another. */
  .motion .mark {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition:
      filter 0.15s,
      transform 0.9s var(--ease-out) calc(var(--d, 0) * var(--stagger) + 0.2s + var(--b, 0) * 0.07s);
  }
  .motion .mark.grows-down {
    transform-origin: 50% 0;
  }
  .motion .mark.grows-x {
    transform-origin: 0 50%;
  }
  .motion :is([data-reveal], [data-reveal-group]):not(.is-in) .mark.grows-x {
    transform: scaleX(0);
  }
  .motion :is([data-reveal], [data-reveal-group]):not(.is-in) .mark {
    transform: scaleY(0);
  }
  .motion :is(.chart-label, .chart-connector, .ff-mid, .ff-price, .ff-price-label) {
    transition: opacity 0.6s ease calc(var(--d, 0) * var(--stagger) + 0.8s);
  }
  .motion :is([data-reveal], [data-reveal-group]):not(.is-in) :is(.chart-label, .chart-connector, .ff-mid, .ff-price, .ff-price-label) {
    opacity: 0;
  }

  /* Horizontal bars grow from the left. */
  .motion .bar-fill {
    transform-origin: 0 50%;
    transition: transform 0.9s var(--ease-out) calc(var(--d, 0) * var(--stagger) + 0.2s + var(--b, 0) * 0.1s);
  }
  .motion :is([data-reveal], [data-reveal-group]):not(.is-in) .bar-fill {
    transform: scaleX(0);
  }

  /* Table rows appear top to bottom. */
  .motion tr {
    transition:
      opacity 0.6s var(--ease-out) calc(var(--d, 0) * var(--stagger) + 0.15s + var(--r, 0) * 0.035s),
      transform 0.6s var(--ease-out) calc(var(--d, 0) * var(--stagger) + 0.15s + var(--r, 0) * 0.035s);
  }
  .motion :is([data-reveal], [data-reveal-group]):not(.is-in) tr {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---------- Footer ---------- */

.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 40px;
  padding: 40px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-hairline-strong);
}
.footer p {
  max-width: 70ch;
  line-height: 1.9;
}

/* ---------- Responsive ---------- */

/* Tighter header so all links fit next to the word mark on smaller laptops. */
@media (max-width: 1180px) {
  .nav {
    --nav-gap: 12px;
    letter-spacing: 0.16em;
  }
  .langs {
    gap: 9px;
    padding-left: 12px;
    letter-spacing: 0.16em;
  }
  .hud {
    column-gap: 18px;
  }
}
/* Where the links scroll sideways, a fade marks the side with more links (classes set by js/tabs.js). */
.nav.has-more-end {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}
.nav.has-more-start {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px);
  mask-image: linear-gradient(90deg, transparent, #000 32px);
}
.nav.has-more-start.has-more-end {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

@media (max-width: 1240px) {
  .assumptions {
    grid-column: 1 / span 2;
  }
  .workbench-output {
    grid-column: 3 / span 2;
  }
  .workbench-output .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .workbench-output .split > * {
    padding: 0;
  }
}

/* Nine chapter links need about 1,330 px next to the brand; below that they move to a second row. */

@media (max-width: 900px) {
  .hero-copy,
  .hero-figure {
    grid-column: 1 / -1;
    padding-right: 0;
  }
  .hero-figure {
    margin-top: 48px;
    padding-left: 0;
  }
  .hero-meta,
  .kpi-grid,
  .facts {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-meta div:nth-child(3),
  .tile:nth-child(3),
  .fact:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .hero-meta div:nth-child(n + 3),
  .tile:nth-child(n + 3),
  .fact:nth-child(n + 3) {
    border-top: 1px solid var(--color-hairline);
    margin-top: 24px;
  }
  .split,
  .points,
  .workbench,
  .sources-split {
    grid-template-columns: 1fr;
  }
  .assumptions,
  .workbench-output {
    grid-column: 1;
    padding: 0;
  }
  .workbench-output {
    margin-top: 56px;
  }
  .split > :first-child {
    padding-right: 0;
  }
  .split > :last-child {
    padding-left: 0;
    margin-top: 56px;
  }
}

@media (max-width: 760px) {
  .grid-lines {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-lines span:nth-child(n + 3) {
    display: none;
  }
  .grid-lines span:nth-child(2) {
    border-right: 1px solid var(--color-hairline);
  }
  .hero {
    padding-top: 120px;
  }
  .pending-panel {
    padding: 22px 20px;
  }
}

@media (max-width: 560px) {
  .chapter-head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .mini-facts {
    grid-template-columns: 1fr;
  }
  .mini-facts div,
  .mini-facts div + div {
    grid-template-columns: 1fr auto;
    align-items: baseline;
    padding: 14px 0;
    border-left: 0;
    border-bottom: 1px solid var(--color-hairline);
  }
}

/* Phones: slim tabs flush with the screen edge, so they barely cover the text. */
@media (max-width: 760px) {
  .pager {
    width: 16px;
    height: 48px;
    margin-top: -24px;
    border: 0;
    background: rgb(16 26 51 / 0.92);
  }
  .pager-prev {
    left: 0;
    border-radius: 0 4px 4px 0;
  }
  .pager-next {
    right: 0;
    border-radius: 4px 0 0 4px;
  }
  .pager svg {
    width: 9px;
    height: 9px;
  }
}

@media print {
  .pager {
    display: none;
  }
}

@media (max-width: 420px) {
  .wordmark b {
    font-size: 19px;
    letter-spacing: 0.3em;
  }
  .wordmark small {
    font-size: 9px;
    letter-spacing: 0.28em;
  }
  .hero-meta div,
  .tile,
  .fact {
    padding-right: 12px;
  }
  .hero-meta div + div,
  .tile + .tile,
  .fact + .fact {
    padding-left: 16px;
  }
  .hero-meta div:nth-child(3),
  .tile:nth-child(3),
  .fact:nth-child(3) {
    padding-left: 0;
  }
  .bar-list li {
    grid-template-columns: 96px minmax(0, 1fr) 56px;
    gap: 12px;
  }
}

.nowrap {
  white-space: nowrap;
}