/* /foresight, ported from the reference build's page-foresight.css (atlas-website/site/css/page-foresight.css).
   Loaded after site.base.css and site.system.css, as in the reference; the ink theme itself is in
   site.system.css (_themes.css, keyed on the root's .atlas-foresight). Scoped to .atlas-page. Breakpoints: 900 px
   is 991 px, 901 px is 992 px; the reference's 480, 600, 1100 and 1101 px steps stay. Rules for classes the final
   markup no longer uses (.fig-ref, .case-grid, .ap-flow, .fs-engine, .fact) are kept as in the reference. */

/* /foresight — round 3 layout (2026-09-29). The page is the one dark page; everything here sits on ink. */

/* The problem, as one strip with a diagram per reason */
.atlas-page .fs-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; border-top: 1px solid var(--paper-22); }
.atlas-page .fs-strip .cell { padding: 30px 32px 8px 0; }
.atlas-page .fs-strip .cell + .cell { padding-left: 32px; border-left: 1px solid var(--paper-10); }
.atlas-page .fs-strip svg { width: 96px; height: 56px; color: var(--paper-55); display: block; margin-bottom: 18px; }
.atlas-page .fs-strip h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--paper); margin: 0 0 10px; }
.atlas-page .fs-strip p { font-size: 15px; line-height: 1.6; color: var(--paper-74); margin: 0; }
.atlas-page .fs-strip a { color: var(--paper); }

/* Four uses on the left, the impact figure on the right, tied to the fourth */
.atlas-page .fs-uses-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; margin-top: 36px; align-items: start; }
.atlas-page .fs-use-list { list-style: none; margin: 0; padding: 0; }
.atlas-page .fs-use-list li { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--paper-10); }
.atlas-page .fs-use-list li:first-child { border-top-color: var(--paper-22); }
.atlas-page .fs-use-list .ic svg { width: 72px; height: 44px; color: var(--paper-74); }
.atlas-page .fs-use-list h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--paper); margin: 0 0 6px; }
.atlas-page .fs-use-list p { font-size: 15px; line-height: 1.6; color: var(--paper-74); margin: 0; }
.atlas-page .fs-use-list li.is-linked { position: relative; }
.atlas-page .fs-use-list li.is-linked::before { content: ""; position: absolute; left: -18px; top: 22px; bottom: 22px; width: 2px; background: var(--ochre-light); }
.atlas-page .fs-use-list .fig-ref { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ochre-light); }
.atlas-page .fs-uses-fig { position: sticky; top: 96px; }
.atlas-page .fs-uses-fig .plate { margin: 0; }

/* Where it's been used: four cases on a hairline grid */
.atlas-page .case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--paper-22); border: 1px solid var(--paper-22); margin-top: 36px; }
.atlas-page .case { background: #211C17; padding: 34px 36px 30px; display: flex; flex-direction: column; }
.atlas-page .case .who { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ochre-light); margin: 0 0 14px; }
.atlas-page .case h3 { font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.2; color: var(--paper); margin: 0 0 14px; }
.atlas-page .case p { font-size: 15.5px; line-height: 1.6; color: var(--paper-74); margin: 0; }
.atlas-page .case .more { margin-top: auto; padding-top: 18px; font-size: 14px; }
.atlas-page .case .more a { color: var(--paper); }

/* Deployment: a three-stop timeline */
.atlas-page .fs-timeline { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
.atlas-page .fs-timeline::before { content: ""; position: absolute; left: 6px; right: 0; top: 6px; height: 1px; background: var(--paper-22); }
.atlas-page .fs-timeline li { position: relative; padding-top: 30px; }
.atlas-page .fs-timeline li::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); border: 1.5px solid var(--ochre-light); }
.atlas-page .fs-timeline li:nth-child(2)::before { background: var(--ochre-light); }
.atlas-page .fs-timeline .when { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-light); margin: 0 0 8px; }
.atlas-page .fs-timeline h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--paper); margin: 0 0 10px; }
.atlas-page .fs-timeline p { font-size: 15px; line-height: 1.6; color: var(--paper-74); margin: 0; }

/* Aperture: the platform as a four-step flow */
.atlas-page .ap-flow { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.atlas-page .ap-flow li { position: relative; border: 1px solid var(--paper-22); padding: 22px 22px 24px; }
.atlas-page .ap-flow li:not(:last-child)::after { content: "\2192"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--ochre-light); font-size: 16px; }
.atlas-page .ap-flow .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-light); margin: 0 0 12px; }
.atlas-page .ap-flow h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.25; color: var(--paper); margin: 0 0 8px; }
.atlas-page .ap-flow p { font-size: 14.5px; line-height: 1.55; color: var(--paper-74); margin: 0; }
.atlas-page .ap-flow li:last-child { border-color: var(--ochre-light); }
.atlas-page .ap-note { margin: 28px 0 0; max-width: 780px; font-size: 15px; line-height: 1.6; color: var(--paper-74); }
.atlas-page .ap-note a { color: var(--paper); }

@media (max-width: 1100px) {
  .atlas-page .ap-flow { grid-template-columns: 1fr 1fr; }
  .atlas-page .ap-flow li:nth-child(2)::after { display: none; }
}
@media (max-width: 991px) {
  .atlas-page .fs-strip { grid-template-columns: 1fr; }
  .atlas-page .fs-strip .cell, .atlas-page .fs-strip .cell + .cell { padding: 26px 0 22px; border-left: 0; border-top: 1px solid var(--paper-10); }
  .atlas-page .fs-uses-split { grid-template-columns: 1fr; gap: 28px; }
  .atlas-page .fs-uses-fig { position: static; }
  .atlas-page .fs-use-list li.is-linked::before { left: -12px; }
  .atlas-page .case-grid { grid-template-columns: 1fr; }
  .atlas-page .case { padding: 26px 22px; }
  .atlas-page .case h3 { font-size: 23px; }
  .atlas-page .fs-timeline { grid-template-columns: 1fr; gap: 26px; }
  .atlas-page .fs-timeline::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .atlas-page .fs-timeline li { padding: 0 0 0 30px; }
  .atlas-page .ap-flow { grid-template-columns: 1fr; gap: 14px; }
  .atlas-page .ap-flow li::after { display: none; }
}

/* ═══ Round 3 panel fixes ═══ */
/* The proof: its own raised ground, a lead case beside two more, logos and one fact each */
.atlas-page .fs-used { background: #221C17; }
.atlas-page .fs-used .cases { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 1px; background: var(--paper-22);
                  border: 1px solid var(--paper-22); margin-top: 36px; }
.atlas-page .fs-used .case { background: #2A231C; padding: 30px 32px 28px; display: flex; flex-direction: column; }
.atlas-page .fs-used .case.lead { grid-row: span 2; padding: 38px 40px; }
.atlas-page .fs-used .case.lead h3 { font-size: 32px; }
.atlas-page .fs-used .case-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.atlas-page .fs-used .logo-img { display: block; width: 110px; height: 30px; background-color: var(--paper); opacity: .9;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: left center; mask-position: left center; }
.atlas-page .fs-used .logo-img.is-heavy { height: 22px; }
.atlas-page .fs-used .logo-img.is-stacked { width: 140px; height: 40px; }
.atlas-page .fs-used .fact { margin: 0; font: 500 15px/1.2 var(--mono); color: var(--ochre-light); text-align: right; }
.atlas-page .fs-used .case .more { margin-top: auto; padding-top: 16px; font-size: 14px; }
.atlas-page .fs-used .case .more a { color: var(--paper); }

/* FIG. 2 sits at the foot of the uses, beside "Measuring impact", with the same ochre rule */
.atlas-page .fs-uses-fig { position: static; align-self: end; }
.atlas-page .fs-uses-fig .plate-frame { border-left: 2px solid var(--ochre-light); }
.atlas-page .fig-ref .arr-m { display: none; }

/* Aperture's last step reads as the destination, not as a focus ring */
.atlas-page .ap-flow li:last-child { border-color: var(--paper-22); background: rgba(217,185,138,.08); }
.atlas-page .fs-timeline h3 { line-height: 1.2; }

@media (max-width: 991px) {
  .atlas-page .fs-used .cases { grid-template-columns: 1fr; }
  .atlas-page .fs-used .case.lead { grid-row: auto; padding: 28px 22px; }
  .atlas-page .fs-used .case.lead h3 { font-size: 26px; }
  .atlas-page .fs-used .case { padding: 24px 22px; }
  .atlas-page .fig-ref .arr-d { display: none; }
  .atlas-page .fig-ref .arr-m { display: inline; }
}
@media (max-width: 600px) {
  .atlas-page .fs-used .case-top { flex-direction: column; align-items: flex-start; }
  .atlas-page .fs-used .fact { text-align: left; }
}
.atlas-page .fs-used .case.lead .big-fact { margin: auto 0 0; padding-top: 40px; font: 400 44px/1.05 var(--serif); color: var(--paper); }
.atlas-page .fs-used .case.lead .big-fact span { display: block; margin-top: 10px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-light); }
@media (max-width: 991px) { .atlas-page .fs-used .case.lead .big-fact { font-size: 34px; padding-top: 24px; } }

/* ═══ Round 4 (Abe's notes, 2026-09-29) ═══ */
/* Measuring impact: no connector line; the figure sits level with the top of the list */
.atlas-page .fs-use-list li.is-linked::before { display: none; }
.atlas-page .fs-uses-fig { align-self: start; }
.atlas-page .fs-uses-fig .plate-frame { border-left: 1px solid var(--paper-22); }
/* Proof: the Gavi lead case runs across the top (title left, detail right); Airbus and FCDO side by side below */
@media (min-width: 992px) {
  .atlas-page .fs-used .cases { grid-template-columns: 1fr 1fr; }
  .atlas-page .fs-used .case.lead { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                        column-gap: 56px; align-items: end; }
  .atlas-page .fs-used .case.lead > .case-top, .atlas-page .fs-used .case.lead > h3 { grid-column: 1; }
  .atlas-page .fs-used .case.lead > h3 { margin-bottom: 0; }
  .atlas-page .fs-used .case.lead > p { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; font-size: 17px; line-height: 1.6; }
}

/* ═══ Round 5 (Abe's notes, 2026-09-29) ═══ */
/* Deployment: the three stages carry the same marker */
.atlas-page .fs-timeline li:nth-child(2)::before { background: var(--ink); }
/* Proof: the Gavi lead across the top, three cases below */
@media (min-width: 992px) {
  .atlas-page .fs-used .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .atlas-page .fs-used .case.lead { grid-column: 1 / -1; }
}
/* Aperture: the homepage's engine diagram, annotated; five parallel parts below */
.atlas-page .fs-engine { margin: 36px 0 0; }
.atlas-page .fs-engine-svg { display: block; width: 100%; height: auto; }
@media (min-width: 1101px) {
  .atlas-page .ap-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .atlas-page .ap-flow li:not(:last-child)::after { right: -16px; }
  .atlas-page .ap-flow h3 { font-size: 18px; }
}
.atlas-page .ap-flow li:last-child { background: rgba(217,185,138,.08); }
@media (max-width: 1100px) and (min-width: 992px) { .atlas-page .ap-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .atlas-page .ap-flow li:nth-child(3)::after { display: none; } }

/* ═══ Round 6 launch review (visual QA) ═══ */
.atlas-page .fs-strip .cell p a, .atlas-page .ap-note a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.atlas-page .fs-used .case-top { height: 40px; }          /* the three lower headings start level */
/* Nutrition International's logo (stacked, with a tagline) reads at the others' weight */
.atlas-page .fs-used .logo-img[aria-label="Nutrition International"] { width: 120px; height: 44px; }

/* ═══ Final review (Abe, 2026-09-30): the Aperture section cut to its core ═══ */
/* Desktop shows the annotated diagram only; phones get the five parts as a short list */
.atlas-page .fs-aperture .ap-flow.fig-mob { grid-template-columns: 1fr; gap: 10px; }
.atlas-page .fs-aperture .ap-flow li { padding: 16px 18px; }
.atlas-page .fs-aperture .ap-flow li::after { display: none; }
.atlas-page .fs-aperture .ap-flow h3 { margin: 0; font-size: 18px; }
.atlas-page .fs-aperture .ap-flow .k { margin-bottom: 8px; }
.atlas-page .fs-aperture .ap-flow.fig-mob li + li { margin-top: 10px; }
@media (min-width: 601px) { .atlas-page .fs-aperture .ap-flow.fig-mob { display: none; } }

/* ═══ Final review, second pass (Abe: "still so busy"): one scheme, one row ═══ */
/* Four platform parts left to right, one team band under all four. Replaces the homepage's engine diagram here. */
.atlas-page .fs-get { margin-top: 40px; }
.atlas-page .fs-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.atlas-page .fs-parts li { position: relative; border: 1px solid var(--paper-22); padding: 24px 22px 22px; }
.atlas-page .fs-parts li:not(:last-child)::after { content: "\2192"; position: absolute; right: -21px; top: 50%; transform: translateY(-50%);
                                       color: var(--ochre-light); font-size: 16px; }
.atlas-page .fs-parts .gl { display: block; width: 90px; height: 60px; margin-bottom: 18px; }
.atlas-page .fs-parts .gl svg { display: block; width: 100%; height: 100%; }
.atlas-page .fs-get .k { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-light); margin: 0 0 8px; }
.atlas-page .fs-get .t { font: 400 20px/1.3 var(--serif); color: var(--paper); margin: 0; }
.atlas-page .fs-team { margin-top: 16px; padding: 18px 22px; border: 1px solid rgba(217,185,138,.5); background: rgba(217,185,138,.08);
           display: flex; align-items: baseline; gap: 18px; }
.atlas-page .fs-team .k { margin: 0; }
@media (max-width: 991px) {
  .atlas-page .fs-parts { grid-template-columns: 1fr 1fr; gap: 14px; }
  .atlas-page .fs-parts li::after { display: none; }
  .atlas-page .fs-team { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) { .atlas-page .fs-parts { grid-template-columns: 1fr; } .atlas-page .fs-parts .gl { margin-bottom: 12px; } }