/* Sudan Rail Group design tokens. Generated from the design system. */
:root {
  --logo-green: #02693e;
  --logo-yellow: #feb71d;
  --logo-blue: #014dab;
  --logo-navy: #002b74;
  --paper: #ffffff;
  --paper-alt: #f4f6f8;
  --ink: #0d1b28;
  --body: #41505f;
  --muted: #56677a;
  --line: #dde3e9;
  --rail-line: #dde3e9;
  --accent: #c9922b;
  /* amber reads at 2.7:1 as text on paper, so text uses a darker one */
  --accent-text: #8f6514;
  --accent-on-dark: #c9922b;
  --accent-text-on-dark: #d8c193;
  --rail: #0f7d78;
  --pane: #0b2239;
  --pane-raised: #102e4a;
  --pane-deep: #07192a;
  --masthead-bg: #0b2239;
  --on-pane: #ffffff;
  --on-pane-lede: #a9bccd;
  --on-pane-body: #a9bccd;
  --on-pane-link: #a9bccd;
  --on-pane-nav: #cfdae4;
  --on-pane-meta: #8296a8;
  --line-on-pane: rgba(255,255,255,0.16);
  --footer-text: #7b91a5;
  --footer-legal: #8a9db0;
  --note-bg: #fff6e0;
  --note-ink: #6b5720;
  --note-head: #4a3c14;
  --chart-pending: #e7ecf1;
  --chart-pending-label: #56677a;
}
:root {
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --gutter: 1.5rem;
  --wrap: 1280px;
  --section-y: 5.5rem;
  --chainage-col: 150px;
  --term-col: 190px;
  --masthead-h: 70px;
  --hero-photo-min: 440px;
  --radius-none: 0;
  --hairline: 1px;
  --rule: 2px;
  --ledger-rule: 3px;
  --step-tick: 18px;
  --bp-wide: 1000px;
  --bp-mid: 900px;
  --bp-narrow: 620px;
}

/* ══════════════════════════════════════════════════════════════
   Sudan Rail Group: the site's components.
   One design, the direction the team chose: navy and amber,
   IBM Plex Sans and Plex Mono, hairline rules, sourced tables.
   Colours come from tokens.css. The custom properties below are
   the sizes and faces each component uses; change one here and it
   changes everywhere. Every corner is square and nothing casts a
   shadow. Layout uses logical properties, so the same sheet
   serves the Arabic site with dir="rtl".
   ══════════════════════════════════════════════════════════════ */

:root, [data-theme="srg"] {
  --srg-wrap: 1280px;
  --srg-body: 400 16.5px/1.6 var(--font-sans);
  --srg-section-y: 5.5rem;
  --srg-display: var(--font-sans);
  --srg-display-w: 600;
  --srg-h1-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.6rem);
  --srg-h1-lh: 1.14;
  --srg-h1-track: -.028em;
  --srg-h2-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.25rem);
  --srg-h2-lg: clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem);
  --srg-h2-lh: 1.14;
  --srg-h2-track: -.018em;
  /* the voice: small labels, kickers, dates, document kinds, roles */
  --srg-voice-family: var(--font-sans);
  --srg-voice-style: normal;
  --srg-voice-w: 500;
  /* hero */
  --srg-kicker-gap: .9rem;
  --srg-kicker-rule: 52px;
  --srg-kicker-size: 1rem;
  --srg-kicker-mb: 1.3rem;
  --srg-lede-size: 1.08rem;
  --srg-dateline-size: .93rem;
  --srg-actions-gap: 2.2rem;
  --srg-go: 600 1.1rem var(--font-sans);
  --srg-also-size: 1.02rem;
  /* section head */
  --srg-head-cols: minmax(0, .95fr) minmax(0, 1.05fr);
  --srg-head-gap: 4rem;
  --srg-head-align: baseline;
  --srg-head-mb: 3rem;
  --srg-head-p: .98rem;
  /* term schedule */
  --srg-terms-col: 190px;
  --srg-terms-gap: 1.9rem;
  --srg-terms-pad: 1.35rem;
  --srg-term: 600 1rem/1.4 var(--font-sans);
  --srg-terms-p-color: var(--body);
  --srg-terms-p-lh: 1.6;
  /* programme chainage */
  --srg-ch-col: 150px;
  --srg-ch-inset: 1.05rem;
  --srg-ch-gap: 2.2rem;
  --srg-ch-pad: 1.4rem;
  --srg-ch-year-pe: 1.1rem;
  --srg-ch-year: 400 1.02rem/1.5 var(--font-mono);
  --srg-ch-year-num: tabular-nums;
  --srg-ch-year-on-w: 600;
  --srg-ch-span: .875rem;
  --srg-ch-span-mt: .25rem;
  --srg-ch-tick-top: .62rem;
  --srg-ch-tick: 9px;
  --srg-ch-tick-on: 15px;
  --srg-ch-tick-on-h: 3px;
  --srg-ch-h3: 600 1.1rem/1.14 var(--font-sans);
  --srg-ch-h3-mb: .4rem;
  --srg-ch-p: .93rem;
  --srg-ch-p-max: 62ch;
  /* sourced table */
  --srg-table-size: .95rem;
  --srg-th: 500 .92rem/1 var(--font-sans);
  --srg-th-pad: 0 1rem 1rem 0;
  --srg-th-rule: 1px;
  --srg-td-pad: 1.15rem 1rem 1.15rem 0;
  --srg-td-valign: top;
  --srg-td-lbl-w: 600;
  --srg-td-value: 600 1.05rem/1.3 var(--font-mono);
  --srg-td-value-num: tabular-nums;
  --srg-td-src: .875rem;
  --srg-tnote: .95rem;
  /* anchor photograph */
  --srg-anchor-h: clamp(300px, 34vw, 440px);
  --srg-anchor-pad: 1.6rem 2.2rem;
  --srg-anchor-max: min(560px, 86%);
  --srg-anchor-p: 400 1.05rem/1.5 var(--font-sans);
  --srg-anchor-k: .98rem;
  --srg-anchor-rule: 34px;
  /* split section: text beside a captioned photograph */
  --srg-split-cols: minmax(0, 1.02fr) minmax(0, .98fr);
  --srg-split-gap: 4rem;
  --srg-split-align: start;
  --srg-split-lead: 400 1.12rem/1.6 var(--font-sans);
  --srg-cap: 400 .875rem/1.6 var(--font-sans);
  --srg-cap-rule: 2px;
  --srg-cap-pad: 1rem;
  /* working note */
  --srg-note-rule: 3px;
  --srg-note-pad: 1rem 1.2rem;
  --srg-note-size: .88rem;
  /* leadership */
  --srg-name: 600 1.3rem/1.14 var(--font-sans);
  --srg-name-track: -.018em;
  --srg-role-size: 1rem;
  --srg-shot-w: 104px;
  /* document rail */
  --srg-docs-top: 2px solid var(--ink);
  --srg-docs-thumb: 62px;
  --srg-docs-gap: 1.2rem;
  --srg-docs-pad: 1.8rem;
  --srg-docs-h3: 600 1rem/1.3 var(--font-sans);
  --srg-docs-k: .92rem;
  /* story grid */
  --srg-news-pb: 1.2rem;
  --srg-news-link: 600 .9rem var(--font-sans);
  --srg-story-d: .93rem;
  --srg-story-h3: 600 1.12rem/1.35 var(--font-sans);
  --srg-story-hover: var(--rail);
  /* closing call */
  --srg-close-h: clamp(340px, 38vw, 460px);
  --srg-close-img-o: .4;
  --srg-close-scrim: linear-gradient(90deg, rgba(11, 34, 57, .94) 0%, rgba(11, 34, 57, .74) 42%, rgba(11, 34, 57, .28) 100%);
  --srg-close-h2: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem);
  /* masthead */
  --srg-mast-h: 70px;
  --srg-mast-gap: 2rem;
  --srg-mast-logo: 38px;
  --srg-nav-gap: .1rem;
  --srg-nav-pad: .55rem .8rem;
  --srg-nav-size: .9rem;
  --srg-lang: 500 .875rem var(--font-mono);
  --srg-lang-pad: .4rem .75rem;
  /* footer */
  --srg-foot-pad: 4rem 0 2rem;
  --srg-foot-size: .9rem;
  --srg-foot-first: 1.5fr;
  --srg-foot-logo: 44px;
  --srg-foot-legal: .875rem;
  /* inner pages */
  --srg-prose-cols: minmax(0, .95fr) minmax(0, 1.05fr);
  --srg-stat-value: 600 1.85rem/1 var(--font-mono);
  --srg-cols-rule: 1px solid var(--ink);
  --srg-cols-title: 600 1.05rem/1.35 var(--font-sans);
  --srg-step-n: 600 .95rem/1 var(--font-mono);
  --srg-period: 500 .95rem/1.4 var(--font-sans);
  --srg-press-h3: 600 1.1rem/1.35 var(--font-sans);
}

/* ══ foundation ═══════════════════════════════════════════════ */
.srg {
  --srg-heading: var(--ink);
  --srg-text: var(--body);
  --srg-sub: var(--muted);
  --srg-rule: var(--line);
  --srg-accent: var(--accent);
  --srg-accent-text: var(--accent-text);
  --srg-label: var(--muted);
  --srg-kick: var(--muted);
  --srg-link2: var(--muted);
  --srg-nav: var(--muted);
  margin: 0;
  background: var(--paper);
  color: var(--srg-text);
  font: var(--srg-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.srg *, .srg *::before, .srg *::after { box-sizing: border-box; }
.srg img { display: block; max-width: 100%; height: auto; }
.srg a { color: inherit; }
.srg p { margin: 0 0 1.1em; }
.srg h1, .srg h2, .srg h3, .srg h4 { margin: 0; }

/* a dark pane: every role flips to its on-pane value */
.srg-dark {
  --srg-heading: var(--on-pane);
  --srg-text: var(--on-pane-body);
  --srg-sub: var(--on-pane-body);
  --srg-rule: var(--line-on-pane);
  --srg-accent: var(--accent-on-dark);
  --srg-accent-text: var(--accent-on-dark);
  --srg-label: var(--accent-text-on-dark);
  --srg-kick: var(--on-pane-lede);
  --srg-link2: var(--on-pane-link);
  --srg-nav: var(--on-pane-nav);
  background: var(--pane);
  color: var(--srg-text);
}
.srg-alt { background: var(--paper-alt); border-block: 1px solid var(--line); }

.srg-wrap { width: min(100% - 3rem, var(--srg-wrap)); margin-inline: auto; }
.srg-section { padding: var(--srg-section-y) 0; }

.srg-h1 {
  font-family: var(--srg-display); font-weight: var(--srg-display-w);
  font-size: var(--srg-h1-size); line-height: var(--srg-h1-lh);
  letter-spacing: var(--srg-h1-track); color: var(--srg-heading);
}
.srg-h2 {
  font-family: var(--srg-display); font-weight: var(--srg-display-w);
  font-size: var(--srg-h2-size); line-height: var(--srg-h2-lh);
  letter-spacing: var(--srg-h2-track); color: var(--srg-heading);
}
.srg-h2--lg { font-size: var(--srg-h2-lg); }
.srg .srg-intro { color: var(--srg-sub); max-width: 56ch; margin: 1rem 0 0; }
.srg .srg-lede { font-size: var(--srg-lede-size); color: var(--srg-kick); max-width: 46ch; margin: 1.4rem 0 2.2rem; }

/* ══ Kicker: a lead rule with the label set inside it ═════════ */
.srg .srg-kicker { display: flex; align-items: center; gap: var(--srg-kicker-gap); margin: 0 0 var(--srg-kicker-mb); }
.srg-kicker i { width: var(--srg-kicker-rule); height: 1px; background: var(--srg-accent); flex: none; }
.srg-kicker span {
  font-family: var(--srg-voice-family); font-style: var(--srg-voice-style);
  font-weight: var(--srg-voice-w); font-size: var(--srg-kicker-size); line-height: 1; color: var(--srg-kick);
}

/* ══ ActionLinks: two text links on a rule ═══════════════════ */
.srg-actions {
  display: flex; gap: var(--srg-actions-gap); flex-wrap: wrap; align-items: baseline;
  max-width: 52ch; border-top: 2px solid var(--ink); padding-top: 1rem;
}
.srg-dark .srg-actions { border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 1.05rem; }
.srg-actions a { text-decoration: none; }
.srg-actions .srg-go { font: var(--srg-go); color: var(--srg-heading); border-bottom: 2px solid var(--srg-accent); padding-bottom: .25rem; }
.srg-actions .srg-go:hover { color: var(--srg-accent); }
.srg-actions .srg-also { font: 400 var(--srg-also-size) var(--font-sans); color: var(--srg-link2); }
.srg-actions .srg-also:hover { color: var(--srg-heading); }

/* ══ Dateline ════════════════════════════════════════════════ */
.srg .srg-dateline { font: 400 var(--srg-dateline-size)/1.6 var(--font-sans); color: var(--srg-sub); max-width: 54ch; margin: 0 0 2.4rem; }

/* ══ SiteHeader ══════════════════════════════════════════════ */
.srg-masthead { position: sticky; top: 0; z-index: 50; background: var(--masthead-bg); border-bottom: 1px solid var(--line-on-pane); }
.srg-masthead .srg-wrap { display: flex; align-items: center; gap: var(--srg-mast-gap); min-height: var(--srg-mast-h); }
.srg-masthead .srg-brand { flex: 0 0 auto; }
.srg-masthead .srg-brand img { height: var(--srg-mast-logo); width: auto; }
.srg-nav { margin-inline-start: auto; display: flex; align-items: center; gap: var(--srg-nav-gap); }
.srg-nav a { padding: var(--srg-nav-pad); color: var(--srg-nav); text-decoration: none; font-size: var(--srg-nav-size); font-weight: 500; border-bottom: 2px solid transparent; }
.srg-nav a:hover { color: var(--srg-heading); border-bottom-color: var(--line-on-pane); }
.srg-nav a.is-on { color: var(--srg-heading); border-bottom-color: var(--srg-accent); }
.srg-nav__group { position: relative; }
.srg-nav__group > a::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-inline-start: .45rem; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.srg-nav__menu { position: absolute; inset-inline-start: 0; top: 100%; min-width: 15rem; padding: .5rem 0; background: var(--pane); border: 1px solid var(--line-on-pane); display: none; z-index: 60; }
.srg-nav__group:hover .srg-nav__menu, .srg-nav__group:focus-within .srg-nav__menu { display: block; }
.srg-nav .srg-nav__menu a { display: block; padding: .55rem 1.1rem; border: 0; color: var(--srg-nav); font-weight: 400; }
.srg-nav .srg-nav__menu a:hover { color: var(--srg-heading); }
.srg-lang { font: var(--srg-lang); padding: var(--srg-lang-pad); border: 1px solid var(--line-on-pane); color: var(--srg-nav); text-decoration: none; margin-inline-start: .8rem; }
.srg-lang:hover { border-color: var(--srg-accent); color: var(--srg-accent); }

/* ══ Hero: the prospectus split ══════════════════════════════ */
.srg-hero { border-bottom: 1px solid var(--line-on-pane); }
.srg-hero > .srg-wrap { display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; }
.srg-hero__text { padding: 4.5rem 3.5rem 0 0; display: flex; flex-direction: column; }
.srg-hero .srg-h1 { max-width: 15ch; }
.srg-hero .srg-actions { margin-bottom: 1.8rem; }
.srg-hero__photo { position: relative; min-height: 440px; margin-inline-end: calc(-1 * max(1.5rem, (100vw - var(--srg-wrap)) / 2)); }
.srg-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05); }
/* PageHero: the same hero, shorter, for inner pages */
.srg-hero--short .srg-hero__text { padding-bottom: 4rem; }
.srg-hero--short .srg-hero__photo { min-height: 380px; }
.srg-hero--plain > .srg-wrap { grid-template-columns: 1fr; }
.srg-hero--plain .srg-hero__text { padding: 4.5rem 0 4.2rem; display: grid; grid-template-columns: 1.05fr .95fr; column-gap: 3.5rem; align-content: start; }
.srg-hero--plain .srg-kicker { grid-column: 1; grid-row: 1; }
.srg-hero--plain .srg-h1 { grid-column: 1; grid-row: 2; max-width: 15ch; margin-bottom: 0; }
.srg-hero--plain .srg-lede { grid-column: 2; grid-row: 2; align-self: end; max-width: 54ch; }
.srg-hero--plain .srg-actions { grid-column: 2; grid-row: 3; margin-bottom: 0; }
.srg-hero--plain .srg-dateline { grid-column: 2; grid-row: 4; }

/* ══ KeyFigures: the four published figures, ruled ═══════════ */
.srg-figs { margin-top: auto; border-top: 1px solid var(--line-on-pane); }
.srg-figs__grid { display: grid; grid-template-columns: 1fr 1fr; }
.srg-figs__grid > div { padding: 1.5rem 1.5rem 1.6rem 0; border-inline-end: 1px solid var(--line-on-pane); border-bottom: 1px solid var(--line-on-pane); }
.srg-figs__grid > div:nth-child(2n) { border-inline-end: 0; padding-inline-start: 1.5rem; }
.srg-figs b { display: block; font: 600 1.85rem/1 var(--font-mono); color: var(--on-pane); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.srg-figs > div > div > span { display: block; font-size: .875rem; margin-top: .5rem; color: var(--on-pane-meta); }
.srg-figs b span { font: inherit; color: inherit; }

/* ══ SectionTitle: the ledger head ═══════════════════════════ */
.srg-plate { margin-bottom: 1.9rem; }
.srg-plate::before { content: ""; display: block; height: 3px; background: var(--srg-heading); }
.srg-dark .srg-plate::before { opacity: .88; }
.srg-plate__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: .62rem 0 .58rem; border-bottom: 1px solid color-mix(in srgb, var(--srg-heading) 30%, transparent); }
.srg-plate__n { font: 600 .95rem/1 var(--font-mono); color: var(--srg-accent-text); font-variant-numeric: tabular-nums; flex: none; }
.srg-plate__l { font: 500 1.02rem/1 var(--font-sans); color: var(--srg-heading); }

/* ══ SectionHead: headline left, intro right ═════════════════ */
.srg-head { display: grid; grid-template-columns: var(--srg-head-cols); gap: var(--srg-head-gap); align-items: var(--srg-head-align); margin-bottom: var(--srg-head-mb); }
.srg .srg-head p { margin: .3rem 0 0; color: var(--srg-sub); font-size: var(--srg-head-p); }

/* ══ CorridorMap ═════════════════════════════════════════════
   The line diagram from the first direction, in this palette:
   a thin track with the live section drawn over it in the accent,
   stations as rings and the end points filled. */
.srg-map { display: block; width: 100%; height: auto; overflow: visible; margin-top: 1rem; }
.srg-map .track { stroke: var(--line); stroke-width: 2; }
.srg-map .live { stroke: var(--accent); stroke-width: 3; }
.srg-map .stop { fill: var(--paper); stroke: var(--accent); stroke-width: 2.5; }
.srg-map .stop-end { fill: var(--accent); }
.srg-map text { font: 600 15px var(--font-sans); fill: var(--ink); }
.srg-map text.s { font: 400 12.5px var(--font-sans); fill: var(--muted); }
.srg-map text.km { font: 500 14px var(--font-mono); fill: var(--srg-accent-text); letter-spacing: .08em; }
.srg-dark .srg-map .track { stroke: rgba(255, 255, 255, .28); }
.srg-dark .srg-map .live { stroke: var(--accent-on-dark); }
.srg-map-list { display: none; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.srg-map-list li { position: relative; padding-inline-start: 2rem; padding-bottom: 1.5rem; }
.srg-map-list li::before { content: ""; position: absolute; inset-inline-start: 5px; top: .5rem; bottom: -.5rem; width: 3px; background: var(--accent); }
.srg-map-list li:last-child::before { display: none; }
.srg-map-list li::after { content: ""; position: absolute; inset-inline-start: 0; top: .3rem; width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; background: var(--paper); border: 2.5px solid var(--accent); }
.srg-map-list li.is-end::after { background: var(--accent); }
.srg-map-list b { display: block; font: 600 1.02rem/1.35 var(--font-sans); color: var(--ink); }
.srg-map-list span { display: block; font-size: .9rem; color: var(--muted); margin-top: .15rem; }
.srg-map-list i { display: block; font: 500 .875rem var(--font-mono); font-style: normal; letter-spacing: .08em; color: var(--srg-accent-text); margin-top: .2rem; }
.srg-dark .srg-map .stop { fill: var(--pane); stroke: var(--accent-on-dark); }
.srg-dark .srg-map .stop-end { fill: var(--accent-on-dark); }
.srg-dark .srg-map text { fill: var(--on-pane); }
.srg-dark .srg-map text.s { fill: var(--on-pane-meta); }
.srg-dark .srg-map text.km { fill: var(--accent-on-dark); }
.srg .srg-map-legend { color: var(--srg-sub); font-size: .95rem; line-height: 1.6; margin: 1.5rem 0 0; max-width: 62ch; }

/* ══ TermSchedule: "What this means in practice" ═════════════ */
.srg-terms { border-top: 2px solid var(--ink); }
.srg-terms--flat { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--srg-terms-gap); border-top: 2px solid var(--ink); }
.srg-terms--flat > div { padding: var(--srg-terms-pad) 0 1.5rem; border-bottom: 1px solid var(--line); }
.srg .srg-terms--flat p { margin: .5rem 0 0; }
.srg-terms > div { display: grid; grid-template-columns: var(--srg-terms-col) minmax(0, 1fr); gap: var(--srg-terms-gap); padding: var(--srg-terms-pad) 0; border-bottom: 1px solid var(--line); }
.srg-terms .srg-term { font: var(--srg-term); color: var(--ink); }
.srg .srg-terms p { margin: 0; color: var(--srg-terms-p-color); font-size: 1.02rem; line-height: var(--srg-terms-p-lh); max-width: 74ch; }
.srg .srg-terms__body p + p, .srg .srg-terms__body > * + * { margin-top: .8rem; }

/* ══ Programme: the chainage ═════════════════════════════════ */
.srg-chainage { position: relative; }
.srg-chainage::before { content: ""; position: absolute; inset-block: var(--srg-ch-inset); inset-inline-start: var(--srg-ch-col); width: 1px; background: var(--rail-line); }
.srg-stage { display: grid; grid-template-columns: var(--srg-ch-col) minmax(0, 1fr); gap: 0 var(--srg-ch-gap); padding: var(--srg-ch-pad) 0; position: relative; }
.srg-stage__y { text-align: end; padding-inline-end: var(--srg-ch-year-pe); font: var(--srg-ch-year); font-variant-numeric: var(--srg-ch-year-num); color: var(--muted); }
.srg-stage__y span { display: block; font: 400 var(--srg-ch-span)/1.3 var(--font-sans); color: var(--muted); margin-top: var(--srg-ch-span-mt); }
.srg-stage.is-now .srg-stage__y { color: var(--ink); font-weight: var(--srg-ch-year-on-w); }
.srg-stage__t { position: relative; }
.srg-stage__t::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--srg-ch-gap)); inset-block-start: var(--srg-ch-tick-top); width: var(--srg-ch-tick); height: 1px; background: var(--accent); }
.srg-stage.is-now .srg-stage__t::before { width: var(--srg-ch-tick-on); height: var(--srg-ch-tick-on-h); }
.srg-stage h3 { font: var(--srg-ch-h3); color: var(--ink); margin: 0 0 var(--srg-ch-h3-mb); letter-spacing: -.01em; }
.srg .srg-stage p { margin: 0; font-size: var(--srg-ch-p); color: var(--muted); max-width: var(--srg-ch-p-max); }
/* periods: eras and plan stages instead of years */
.srg-chainage--periods { --srg-ch-col: 230px; }
.srg-chainage--periods .srg-stage__y { font: var(--srg-period); color: var(--muted); }
.srg-chainage--periods .srg-stage.is-now .srg-stage__y { color: var(--ink); }

/* ══ FiguresTable: Measure, Value, Basis ═════════════════════ */
.srg-table { width: 100%; border-collapse: collapse; font-size: var(--srg-table-size); }
.srg-table th { text-align: start; font: var(--srg-th); color: var(--muted); padding: var(--srg-th-pad); border-bottom: var(--srg-th-rule) solid var(--ink); }
.srg-table td { padding: var(--srg-td-pad); border-bottom: 1px solid var(--line); vertical-align: var(--srg-td-valign); }
.srg-table tr:hover td { background: rgba(11, 34, 57, .025); }
.srg-table .lbl { color: var(--ink); font-weight: var(--srg-td-lbl-w); }
.srg-table .val { font: var(--srg-td-value); font-variant-numeric: var(--srg-td-value-num); color: var(--ink); white-space: nowrap; }
.srg-table .txt { color: var(--body); }
.srg-table .src { color: var(--muted); font-size: var(--srg-td-src); }
.srg .srg-tnote { margin: 1.4rem 0 0; color: var(--muted); font-size: var(--srg-tnote); line-height: 1.6; max-width: 76ch; }

/* ══ AnchorPhoto: a photograph with a caption plate ══════════ */
.srg-anchor { position: relative; }
.srg-anchor > img { width: 100%; height: var(--srg-anchor-h); object-fit: cover; }
.srg-anchor__cap { position: absolute; inset-block-end: 0; inset-inline-start: 0; max-width: var(--srg-anchor-max); padding: var(--srg-anchor-pad); background: var(--pane); color: var(--on-pane); }
.srg-anchor__k { display: flex; align-items: center; gap: .85rem; margin: 0 0 .9rem; font-family: var(--srg-voice-family); font-style: var(--srg-voice-style); font-weight: var(--srg-voice-w); font-size: var(--srg-anchor-k); line-height: 1; color: var(--accent-text-on-dark); }
.srg-anchor__k::before { content: ""; width: var(--srg-anchor-rule); height: 1px; background: var(--accent-on-dark); flex: none; }
.srg .srg-anchor__cap p:last-child { margin: 0; font: var(--srg-anchor-p); }

/* ══ Split: text beside a captioned photograph ═══════════════ */
.srg-split { display: grid; grid-template-columns: var(--srg-split-cols); gap: var(--srg-split-gap); align-items: var(--srg-split-align); }
.srg-split .srg-h2 { margin-bottom: 1.2rem; }
.srg .srg-split__lead { font: var(--srg-split-lead); color: var(--ink); margin-bottom: 1.2rem; }
.srg .srg-split p:not([class]) { color: var(--body); }
.srg-split figure { margin: 0; }
.srg-split figcaption, .srg-gallery figcaption { font: var(--srg-cap); color: var(--muted); margin-top: 1rem; padding-inline-start: var(--srg-cap-pad); border-inline-start: var(--srg-cap-rule) solid var(--accent); }

/* ══ WorkingNote: addressed to the team, never shipped ═══════ */
.srg-note { background: var(--note-bg); border-inline-start: var(--srg-note-rule) solid var(--accent); padding: var(--srg-note-pad); font-size: var(--srg-note-size); line-height: 1.6; color: var(--note-ink); margin-top: 1.5rem; }
.srg-note b { color: var(--note-head); font-weight: 600; }

/* ══ Leadership: the pair set as two cells of a table ════════ */
.srg-people { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-on-pane); }
.srg-person { padding: 2.5rem 3rem 2.5rem 0; border-inline-end: 1px solid var(--line-on-pane); }
.srg-person:last-child { border-inline-end: 0; padding-inline-start: 3rem; }
.srg-person__top { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.6rem; }
.srg-person__shot { width: var(--srg-shot-w); aspect-ratio: 4 / 5; flex: none; object-fit: cover; object-position: 50% 16%; border: 1px solid var(--line-on-pane); }
.srg-person h3 { font: var(--srg-name); letter-spacing: var(--srg-name-track); color: var(--srg-heading); }
.srg .srg-person__role { font-family: var(--srg-voice-family); font-style: var(--srg-voice-style); font-weight: 400; font-size: var(--srg-role-size); line-height: 1.4; color: var(--srg-label); margin: .3rem 0 0; }
.srg .srg-person p:not([class]) { color: var(--srg-sub); font-size: .95rem; margin-bottom: 1em; }

/* ══ DocumentRail ════════════════════════════════════════════ */
.srg-docs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--srg-docs-top); }
.srg-docs a { display: grid; grid-template-columns: var(--srg-docs-thumb) minmax(0, 1fr); gap: var(--srg-docs-gap); align-items: start; padding: var(--srg-docs-pad) var(--srg-docs-pad) var(--srg-docs-pad) 0; border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); text-decoration: none; color: inherit; }
.srg-docs a:last-child { border-inline-end: 0; }
.srg-docs a:hover { background: var(--paper-alt); }
.srg-docs img { width: var(--srg-docs-thumb); aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line); }
.srg-docs__k { display: block; margin-bottom: .6rem; font-family: var(--srg-voice-family); font-style: var(--srg-voice-style); font-weight: 400; font-size: var(--srg-docs-k); line-height: 1; color: var(--muted); }
.srg-docs h3 { font: var(--srg-docs-h3); color: var(--ink); margin-bottom: .4rem; }
/* detailed: covers with summaries and downloads */
.srg-docs--detailed { grid-template-columns: repeat(2, 1fr); }
.srg-doc { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.6rem; align-items: start; padding: 2rem 2rem 2rem 0; border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); }
.srg-doc + .srg-doc { padding-inline-start: 2rem; border-inline-end: 0; }
.srg-doc img { width: 120px; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line); }
.srg-doc h3 { font: var(--srg-docs-h3); color: var(--ink); margin: 0 0 .6rem; }
.srg .srg-doc p { font-size: .95rem; color: var(--muted); margin: 0 0 1rem; }
.srg-doc__files { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.srg-doc__files a { font: 600 .92rem var(--font-sans); color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

/* ══ StoryGrid: project updates ══════════════════════════════ */
.srg-news-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; border-bottom: 2px solid var(--ink); padding-bottom: var(--srg-news-pb); }
.srg-news-head a { font: var(--srg-news-link); color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; white-space: nowrap; }
.srg-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.srg-story { display: block; text-decoration: none; color: inherit; }
.srg-story img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(.9); }
.srg .srg-story__d { font-family: var(--srg-voice-family); font-style: var(--srg-voice-style); font-weight: var(--srg-voice-w); font-size: var(--srg-story-d); line-height: 1; color: var(--muted); margin: 1.2rem 0 .6rem; }
.srg-story h3 { font: var(--srg-story-h3); color: var(--ink); letter-spacing: -.005em; margin-bottom: .5rem; }
.srg-story:hover h3 { color: var(--srg-story-hover); }
.srg .srg-story p:not([class]) { font-size: .92rem; color: var(--muted); margin: .55rem 0 0; }

/* ══ ClosingCall: a last word over photography, or plain ═════ */
.srg-close { position: relative; isolation: isolate; display: flex; align-items: center; min-height: var(--srg-close-h); background: var(--pane); }
.srg-close > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--srg-close-img-o); z-index: -2; }
.srg-close::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--srg-close-scrim); }
.srg-close > .srg-wrap { position: relative; }
.srg-close .srg-h2 { font-size: var(--srg-close-h2); max-width: 18ch; margin-bottom: 2rem; }
.srg .srg-close .srg-lede { font-size: var(--srg-lede-size); line-height: 1.65; color: var(--on-pane-lede); max-width: 48ch; margin: 0 0 2rem; }
.srg-close--plain { background: var(--paper-alt); min-height: 0; padding: var(--srg-section-y) 0; border-top: 1px solid var(--line); }
.srg-close--plain::after { display: none; }
.srg .srg-close--plain .srg-lede { color: var(--muted); }
.srg-close.srg-close--plain .srg-h2 { font-size: var(--srg-h2-size); margin-bottom: 1rem; }

/* ══ SiteFooter ══════════════════════════════════════════════ */
.srg-footer { background: var(--pane-deep); color: var(--footer-text); padding: var(--srg-foot-pad); font-size: var(--srg-foot-size); }
.srg-footer__cols { display: grid; grid-template-columns: var(--srg-foot-first) repeat(3, 1fr); gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-on-pane); }
.srg-footer img { height: var(--srg-foot-logo); width: auto; margin-bottom: 1.1rem; }
.srg-footer h4 { color: var(--on-pane); font-family: var(--srg-voice-family); font-style: var(--srg-voice-style); font-weight: var(--srg-voice-w); font-size: 1rem; line-height: 1; margin: 0 0 1.2rem; }
.srg-footer ul { list-style: none; padding: 0; margin: 0; }
.srg-footer li { margin-bottom: .62rem; }
.srg-footer a { color: var(--footer-text); text-decoration: none; }
.srg-footer a:hover { color: var(--accent-on-dark); }
.srg-footer__legal { padding-top: 1.8rem; display: flex; gap: 2rem; flex-wrap: wrap; font-size: var(--srg-foot-legal); color: var(--footer-legal); }
.srg-footer__legal a { color: var(--footer-legal); }
.srg .srg-footer__fnote { margin: 1.4rem 0 0; font-size: var(--srg-foot-legal); color: var(--footer-legal); max-width: 78ch; }

/* ══ CapacityChart: bars labelled where they stand ═══════════ */
.srg-chart { display: block; width: 100%; height: auto; max-width: 780px; }
.srg-chart .base { stroke: var(--ink); stroke-width: 1; }
.srg-chart .b1 { fill: var(--pane); }
.srg-chart .b2 { fill: var(--accent); }
.srg-chart .bp { fill: var(--chart-pending); }
.srg-chart .v { font: 500 26px var(--font-mono); font-variant-numeric: tabular-nums; fill: var(--ink); }
.srg-chart .vp { font: 400 16px var(--font-sans); fill: var(--chart-pending-label); }
.srg-chart .lb { font: 600 15px var(--font-sans); fill: var(--ink); }
.srg-chart .lbq { font: 400 15px var(--font-sans); fill: var(--muted); }
.srg-chart .lu { font: 400 14px var(--font-sans); fill: var(--muted); }
.srg .srg-chart-note { margin: 1.2rem 0 0; color: var(--muted); font-size: .95rem; max-width: 66ch; }

/* ══ Prose: a heading and a reading column ═══════════════════ */
.srg-prose { display: grid; grid-template-columns: var(--srg-prose-cols); column-gap: var(--srg-head-gap); row-gap: 1.4rem; align-items: start; }
.srg-prose > .srg-h2 { grid-column: 1; position: sticky; top: calc(var(--masthead-h) + 1.4rem); }
.srg-prose__body { grid-column: 2; max-width: 68ch; }
.srg .srg-prose__body p { color: var(--srg-text); }
.srg .srg-prose__lead { font: var(--srg-split-lead); color: var(--srg-heading); }
.srg-prose__body .srg-actions { margin-top: 1.8rem; }
.srg .srg-prose__body h3 { font: var(--srg-cols-title); color: var(--ink); margin: 2.4rem 0 .7rem; letter-spacing: -.005em; }
.srg .srg-prose__body h3:first-child { margin-top: 0; }
.srg .srg-prose__body ul { list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.srg .srg-prose__body li { padding: .75rem 0; border-bottom: 1px solid var(--line); color: var(--srg-text); }
.srg .srg-prose__body p a, .srg .srg-prose__body li a { color: var(--ink); border-bottom: 1px solid var(--srg-accent); }
.srg .srg-prose__body p a:hover, .srg .srg-prose__body li a:hover { color: var(--srg-accent); }
.srg .srg-prose__body .note { color: var(--muted); font-size: .95rem; }
.srg-prose--opening { grid-template-columns: 1fr; }
.srg-prose--opening .srg-prose__body { grid-column: 1; max-width: 78ch; }

/* ══ FigureRow: published figures as a ruled row ═════════════ */
.srg-stats { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.srg-stats > div { padding: 1.6rem 1.6rem 1.7rem; border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); }
.srg-stats b { display: block; font: var(--srg-stat-value); font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -.01em; }
.srg-stats span { display: block; margin-top: .7rem; font-size: .92rem; line-height: 1.45; color: var(--muted); }
.srg-stats--4 { --cols: 4; }
.srg-stats--3 > div:nth-child(3n), .srg-stats--4 > div:nth-child(4n) { border-inline-end: 0; }
.srg-stats--3 > div:nth-child(3n + 1), .srg-stats--4 > div:nth-child(4n + 1) { padding-inline-start: 0; }

/* ══ RuledColumns: text in columns under a rule, no boxes ════ */
.srg-cols { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 2.6rem 3rem; }
.srg-cols > div { border-top: var(--srg-cols-rule); padding-top: 1.4rem; }
.srg-cols h3 { font: var(--srg-cols-title); color: var(--ink); margin: 0 0 .7rem; letter-spacing: -.005em; }
.srg .srg-cols p { font-size: .98rem; color: var(--body); margin: 0 0 .9em; }
.srg .srg-cols p:last-child { margin-bottom: 0; }
.srg-cols--compact { gap: 1.8rem 2rem; }
.srg-cols--compact h3 { font-size: 1rem; margin-bottom: .45rem; }
.srg .srg-cols--compact p { font-size: .9rem; color: var(--muted); }

/* ══ LinkIndex: where to go next ═════════════════════════════ */
.srg-index { border-top: 2px solid var(--ink); }
.srg-index a { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) auto; gap: 2rem; align-items: baseline; padding: 1.2rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.srg-index b { font: var(--srg-cols-title); color: var(--ink); }
.srg-index span { color: var(--muted); font-size: .98rem; }
.srg-index i { font-style: normal; color: var(--srg-accent-text); font-weight: 600; }
.srg-index a:hover b { color: var(--srg-story-hover); }

/* ══ Steps: a numbered sequence along a rule ═════════════════ */
.srg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0 2.4rem; border-top: 1px solid var(--rail-line); }
.srg-steps li { position: relative; padding-top: 1.6rem; margin: 0; }
.srg-steps li::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0; width: 2px; height: 18px; background: var(--accent); }
.srg-steps__n { display: block; font: var(--srg-step-n); font-variant-numeric: tabular-nums; color: var(--srg-accent-text); margin-bottom: 1rem; }
.srg-steps h3 { font: var(--srg-cols-title); color: var(--ink); margin: 0 0 .55rem; }
.srg .srg-steps p { margin: 0; font-size: .96rem; color: var(--muted); max-width: 40ch; }

/* ══ Gallery: captioned photographs ══════════════════════════ */
.srg-gallery { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 2.4rem 1.6rem; }
.srg-gallery figure { margin: 0; }
.srg-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.srg-gallery__credit { display: block; margin-top: .3rem; font: 400 .875rem/1.5 var(--font-sans); color: var(--muted); }
.srg-gallery--lead { --cols: 4; gap: 1.6rem; }
.srg-gallery--lead figure:first-child { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.srg-gallery--lead figure:first-child img { flex: 1; aspect-ratio: auto; min-height: 0; height: 100%; }
.srg-gallery--lead img { aspect-ratio: 4 / 3; }
.srg-dark .srg-gallery figcaption { color: var(--on-pane-meta); border-color: var(--accent-on-dark); }

/* ══ Notice: a plain statement the reader must not miss ══════ */
.srg-notice { display: grid; grid-template-columns: var(--srg-terms-col) minmax(0, 1fr); gap: var(--srg-terms-gap); padding: var(--srg-terms-pad) 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.srg-notice__k { font-family: var(--srg-voice-family); font-style: var(--srg-voice-style); font-weight: var(--srg-voice-w); font-size: 1.02rem; line-height: 1.5; color: var(--muted); }
.srg .srg-notice p { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.62; max-width: 74ch; }
.srg-notice a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ══ FAQ: topics and questions ═══════════════════════════════ */
.srg-faq__topics { display: flex; flex-wrap: wrap; gap: .4rem 2rem; padding: 0 0 1.4rem; margin-bottom: 2.6rem; border-bottom: 1px solid var(--line); }
.srg-faq__topics a { text-decoration: none; color: var(--muted); font-size: .95rem; border-bottom: 2px solid transparent; padding-bottom: .2rem; }
.srg-faq__topics a:hover, .srg-faq__topics a.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.srg-faq__topic + .srg-faq__topic { margin-top: 3.4rem; }
.srg-faq__topic > h3 { font: var(--srg-term); color: var(--ink); margin: 0 0 1rem; }
.srg-faq__list { border-top: 2px solid var(--ink); }
.srg-faq details { border-bottom: 1px solid var(--line); }
.srg-faq summary { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; gap: 1rem; align-items: baseline; padding: 1.15rem 0; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
.srg-faq summary::-webkit-details-marker { display: none; }
.srg-faq summary .n { font: 400 .95rem var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.srg-faq summary::after { content: "+"; font: 400 1.3rem/1 var(--font-sans); color: var(--srg-accent-text); text-align: end; }
.srg-faq details[open] summary::after { content: "\2212"; }
.srg-faq__a { padding: 0 2.5rem 1.4rem 4rem; }
.srg .srg-faq__a p { margin: 0 0 .8em; color: var(--body); max-width: 70ch; }

/* ══ PressList: published statements, linked out ═════════════ */
.srg-press { border-top: 2px solid var(--ink); }
.srg-press__item { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2.4rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.srg-press__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.srg-press__meta { display: block; font-family: var(--srg-voice-family); font-style: var(--srg-voice-style); font-weight: var(--srg-voice-w); font-size: .95rem; color: var(--muted); margin-bottom: .6rem; }
.srg-press__item h3 { font: var(--srg-press-h3); color: var(--ink); margin: 0 0 .7rem; }
.srg .srg-press__item p { font-size: .98rem; color: var(--body); max-width: 70ch; }
.srg-press__link { font: 600 .95rem var(--font-sans); color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

/* ══ Socials: accounts, inert until they exist ═══════════════ */
.srg-socials { display: flex; flex-wrap: wrap; gap: .8rem 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.srg-socials span { font-size: .95rem; color: var(--muted); }
.srg-footer__cols a, .srg-faq__topics a, .srg-socials a, .srg-actions a,
.srg-masthead .lang-switch, .srg-index a { display: inline-flex; align-items: center; min-height: 44px; }
.srg-docs a, .srg-press__link { display: inline-flex; align-items: center; min-height: 44px; }
.srg-table a { display: inline-flex; align-items: center; min-height: 44px; }

/* ══ Arabic: right to left, one sheet ═════════════════════════
   Set lang="ar" dir="rtl" on the element that carries class="srg".
   Every face becomes IBM Plex Sans Arabic; Arabic has no italic
   and no letterspacing, and it wants more leading. */
[lang="ar"] {
  --font-sans: var(--font-arabic);
  --font-mono: var(--font-arabic);
  --srg-body: 400 18px/1.9 var(--font-arabic);
  --srg-h1-lh: 1.35;
  --srg-h2-lh: 1.4;
  --srg-h1-track: 0;
  --srg-h2-track: 0;
}
.srg:lang(ar) *, .srg:lang(ar) { font-style: normal !important; letter-spacing: 0 !important; }
.srg:lang(ar) .srg-lede, .srg:lang(ar) p { line-height: 1.85; }
[dir="rtl"] .srg-close::after { transform: scaleX(-1); }
[dir="rtl"] .srg-nav__group > a::after { transform: translateY(-3px) rotate(-45deg); }

/* ══ responsive ══════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .srg-nav { display: none; }
  .srg-lang { margin-inline-start: auto; }
  .srg-head, .srg-split, .srg-people { grid-template-columns: 1fr; gap: 2.5rem; }
  .srg-head { gap: 1.5rem; }
  .srg-prose { grid-template-columns: 1fr; }
  .srg-prose > .srg-h2, .srg-prose__body { grid-column: 1; }
  .srg-hero--plain .srg-hero__text { grid-template-columns: 1fr; }
  .srg-hero--plain .srg-kicker, .srg-hero--plain .srg-h1, .srg-hero--plain .srg-lede,
  .srg-hero--plain .srg-actions, .srg-hero--plain .srg-dateline { grid-column: 1; grid-row: auto; max-width: none; }
  .srg-hero--plain .srg-h1 { margin-bottom: 1.4rem; }
  .srg-cols, .srg-steps, .srg-stats { grid-template-columns: 1fr 1fr; }
  .srg-terms--flat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .srg-stories, .srg-docs { grid-template-columns: 1fr; }
  .srg-docs a { border-inline-end: 0; padding-inline-start: 0; }
  .srg-gallery--lead { --cols: 2; }
  .srg-press__item, .srg-docs--detailed { grid-template-columns: 1fr; }
  .srg-doc, .srg-doc + .srg-doc { padding-inline: 0; border-inline-end: 0; }
  .srg-index a { grid-template-columns: 1fr auto; }
  .srg-index span { grid-column: 1; }
  .srg-hero > .srg-wrap { grid-template-columns: 1fr; }
  .srg-hero__text { padding: 3.5rem 0 0; }
  .srg-hero__photo { min-height: 300px; margin-inline: calc(-1 * max(1.5rem, (100vw - var(--srg-wrap)) / 2)); }
  .srg-person, .srg-person:last-child { padding: 2.5rem 0; border-inline-end: 0; border-bottom: 1px solid var(--line-on-pane); }
  .srg-anchor__cap { position: static; max-width: 100%; margin: 0; padding: 2rem 1.5rem; }
  .srg-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .srg-terms > div { grid-template-columns: 1fr; gap: .45rem; }
}
@media (max-width: 620px) {
  .srg-cols, .srg-steps, .srg-stats, .srg-gallery { grid-template-columns: 1fr; }
  .srg-terms--flat { grid-template-columns: 1fr 1fr; }
  .srg-steps li + li { margin-top: 1.4rem; }
  .srg-notice { grid-template-columns: 1fr; gap: .4rem; }
  .srg-faq__a { padding-inline: 0; }
  .srg-figs b { font-size: 1.5rem; }
  .srg-map { display: none; }
  .srg-map-list { display: block; }
  .srg-chainage::before, .srg-stage__t::before { display: none; }
  .srg-stage { grid-template-columns: 1fr; gap: .3rem; }
  .srg-stage__y { text-align: start; padding: 0; }
  .srg-table, .srg-table tbody, .srg-table tr, .srg-table td { display: block; width: auto; }
  .srg-table thead { display: none; }
  .srg-table tr { border-bottom: 1px solid var(--line); padding: .95rem 0; }
  .srg-table tr:hover td { background: none; }
  .srg-table td { border: 0; padding: 0; }
  .srg-table .val { display: block; margin: .35rem 0; white-space: normal; }
  .srg-table .src { display: block; }
  .srg-footer__cols { grid-template-columns: 1fr; }
}

/* No motion ships in this design. The live section of the corridor
   line may be drawn in over about 2.4s on first view; it must stop
   under prefers-reduced-motion, and nothing else moves. */

/* ══════════════════════════════════════════════════════════════
   Site chrome: the parts of the running site that sit outside the
   component set — the skip link, the folded navigation sheet and
   the print helpers. Everything here uses the same tokens.
   ══════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.srg { min-height: 100vh; }

.skip {
  position: absolute; inset-block-start: -3rem; inset-inline-start: 0; z-index: 100;
  background: var(--accent); color: var(--ink); padding: .7rem 1.2rem;
  font: 600 .95rem var(--font-sans); text-decoration: none;
}
.srg a.skip { color: var(--ink); }
.skip:focus { inset-block-start: 0; }
.srg a:focus-visible, .srg button:focus-visible, .srg summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.srg-dark a:focus-visible, .srg-dark button:focus-visible { outline-color: var(--accent-on-dark); }

/* the masthead's navigation, which carries three grouped menus */
.srg-nav .nav-group { position: relative; }
.srg-nav .nav-group-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: var(--srg-nav-pad); border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--srg-nav); font: 500 var(--srg-nav-size) var(--font-sans);
  cursor: pointer;
}
.srg-nav .nav-group-btn svg { width: 14px; height: 14px; }
.srg-nav .nav-group-btn:hover { color: var(--on-pane); border-bottom-color: var(--line-on-pane); }
.srg-nav .nav-group.is-active .nav-group-btn { color: var(--on-pane); border-bottom-color: var(--accent-on-dark); }
.srg-nav .nav-menu {
  position: absolute; inset-inline-start: 0; top: 100%; min-width: 15rem; padding: .5rem 0;
  background: var(--pane); border: 1px solid var(--line-on-pane); display: none; z-index: 60;
}
.srg-nav .nav-group:hover .nav-menu, .srg-nav .nav-group:focus-within .nav-menu, .srg-nav .nav-menu.open { display: block; }
.srg-nav .nav-menu a { display: block; padding: .55rem 1.1rem; border: 0; font-weight: 400; }
.srg-nav .nav-menu a:hover { color: var(--on-pane); }

.nav-toggle {
  display: none; margin-inline-start: auto; background: none; border: 1px solid var(--line-on-pane);
  color: var(--on-pane-nav); padding: .45rem .55rem; cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; display: block; }
.srg-masthead .lang-switch {
  display: inline-flex; align-items: center; gap: .45rem;
  font: var(--srg-lang); padding: var(--srg-lang-pad); border: 1px solid var(--line-on-pane);
  color: var(--on-pane-nav); text-decoration: none; margin-inline-start: .8rem;
}
.srg-masthead .lang-switch svg { width: 15px; height: 15px; }
.srg-masthead .lang-switch:hover { border-color: var(--accent-on-dark); color: var(--accent-on-dark); }

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .srg-masthead .srg-wrap { flex-wrap: wrap; }
  .srg-nav {
    display: none; width: 100%; margin-inline-start: 0; flex-direction: column; align-items: stretch;
    padding-bottom: 1rem; border-top: 1px solid var(--line-on-pane); margin-top: .2rem;
  }
  .srg-nav.open { display: flex; }
  .srg-nav a, .srg-nav .nav-group-btn { padding: .75rem 0; width: 100%; text-align: start; }
  .srg-nav .nav-menu { position: static; border: 0; padding: 0 0 .4rem 1rem; background: none; }
  .srg-masthead .lang-switch { margin: .8rem 0 0; align-self: flex-start; }
}

/* a table that has to scroll on a phone keeps its own scroller */
.table-wrap { overflow-x: auto; }

@media print {
  .srg-masthead, .srg-footer, .srg-close, .skip { display: none !important; }
  .srg { background: #fff; }
}