/* Strategies · the photo showcase.
   01 themes: an editorial index. Each group's head sits in a left margin under a navy rule (Ink), its themes in a
      strict three-up grid of full-colour photo tiles (Studio frames). Phone: a compact media list.
   02 types: eight photo-topped cards, 4 x 2, on Ink's navy duotone plates (the notes' own photographs).
   03 inside a strategy: a full-bleed deep-navy band; the screenshots are framed, never altered.
   04 how you use them: a split, the lede beside the platform page's photograph.
   Closing call: the call page's photograph. */

body[data-page="strategies"] {
  --hero: url("../img/photos/hero-strategies.jpg"); --hero-pos: 50% 45%; --hero-blend: normal;
  --cta: url("../img/photos/hero-call.jpg"); --cta-pos: 50% 60%; --cta-blend: normal;
}

/* ── hero (the house proportions from v7.css) ── */
body[data-page="strategies"] .hero .lede { max-width: 38rem }

/* section heads: these sections are blocks, so give the lede the same air under the heading as the house grid gap */
body[data-page="strategies"] .poster > section:not(:has(> a.back)) > .sh + .section-lead { margin-top: 1.4rem }

/* ── 01 example themes ── */
body[data-page="strategies"] .theme-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 2.8rem }
body[data-page="strategies"] .theme-group {
  position: relative; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 4rem;
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1.7rem 0 3.2rem
}
body[data-page="strategies"] .theme-group::before { content: ""; position: absolute; top: -1px; left: 0; width: 15rem; height: 2px; background: var(--fg) }
body[data-page="strategies"] .theme-group:last-child { padding-bottom: 0 }
body[data-page="strategies"] .theme-group h3 { margin: 0; font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.08; align-self: start }
body[data-page="strategies"] .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem 1.6rem }
body[data-page="strategies"] .themes li { display: flex; flex-direction: column; gap: .35rem; min-width: 0 }
body[data-page="strategies"] .themes li::before {
  content: ""; display: block; aspect-ratio: 4 / 3; margin-bottom: .85rem; border-radius: 10px;
  background: var(--navy) var(--img, none) center / cover no-repeat; background-position: var(--img-pos, 50% 50%);
  box-shadow: inset 0 0 0 1px rgba(20, 33, 58, .08)
}
body[data-page="strategies"] .theme-name { font-family: var(--display); font-weight: 700; font-size: 1.14rem; letter-spacing: -.012em; line-height: 1.2 }
body[data-page="strategies"] .theme-desc { font-size: .95rem; line-height: 1.5; color: var(--muted) }

/* one photograph per theme */
body[data-page="strategies"] .theme-group:nth-child(1) li:nth-child(1) { --img: url("../img/photos/theme-crypto-sm.jpg"); --img-pos: 78% 50% }
body[data-page="strategies"] .theme-group:nth-child(1) li:nth-child(2) { --img: url("../img/photos/theme-tokenized-sm.jpg"); --img-pos: 50% 40% }
body[data-page="strategies"] .theme-group:nth-child(1) li:nth-child(3) { --img: url("../img/photos/dc-switches-sm.jpg"); --img-pos: 50% 45% }
body[data-page="strategies"] .theme-group:nth-child(2) li:nth-child(1) { --img: url("../img/photos/theme-us-equity-sm.jpg"); --img-pos: 40% 45% }
body[data-page="strategies"] .theme-group:nth-child(2) li:nth-child(2) { --img: url("../img/photos/theme-intl-equity-sm.jpg"); --img-pos: 50% 35% }
body[data-page="strategies"] .theme-group:nth-child(2) li:nth-child(3) { --img: url("../img/photos/theme-semis-sm.jpg"); --img-pos: 45% 50% }
body[data-page="strategies"] .theme-group:nth-child(2) li:nth-child(4) { --img: url("../img/photos/theme-infra-sm.jpg"); --img-pos: 50% 55% }
body[data-page="strategies"] .theme-group:nth-child(2) li:nth-child(5) { --img: url("../img/photos/theme-space-sm.jpg"); --img-pos: 60% 55% }
body[data-page="strategies"] .theme-group:nth-child(2) li:nth-child(6) { --img: url("../img/photos/theme-clean-sm.jpg"); --img-pos: 60% 45% }
body[data-page="strategies"] .theme-group:nth-child(3) li:nth-child(1) { --img: url("../img/photos/theme-gold-sm.jpg"); --img-pos: 45% 40% }
body[data-page="strategies"] .theme-group:nth-child(3) li:nth-child(2) { --img: url("../img/photos/theme-silver-sm.jpg"); --img-pos: 50% 50% }
body[data-page="strategies"] .theme-group:nth-child(3) li:nth-child(3) { --img: url("../img/photos/theme-metals-sm.jpg"); --img-pos: 50% 35% }
body[data-page="strategies"] .theme-group:nth-child(3) li:nth-child(4) { --img: url("../img/photos/theme-uranium-sm.jpg"); --img-pos: 55% 35% }
body[data-page="strategies"] .theme-group:nth-child(3) li:nth-child(5) { --img: url("../img/photos/theme-energy-sm.jpg"); --img-pos: 50% 60% }
body[data-page="strategies"] .theme-group:nth-child(3) li:nth-child(6) { --img: url("../img/photos/theme-agri-sm.jpg"); --img-pos: 50% 45% }
body[data-page="strategies"] .theme-group:nth-child(4) li:nth-child(1) { --img: url("../img/photos/theme-rates-sm.jpg"); --img-pos: 50% 65% }
body[data-page="strategies"] .theme-group:nth-child(4) li:nth-child(2) { --img: url("../img/photos/theme-ratesfx-sm.jpg"); --img-pos: 50% 50% }
body[data-page="strategies"] .theme-group:nth-child(4) li:nth-child(3) { --img: url("../img/photos/theme-fx-sm.jpg"); --img-pos: 50% 50% }

/* ── 02 strategy types: 4 x 2 duotone plates ── */
body[data-page="strategies"] .who-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.4rem }
body[data-page="strategies"] .who-card { --img-blend: luminosity; display: flex; flex-direction: column }
body[data-page="strategies"] .who-card::before {
  aspect-ratio: 4 / 3; margin-bottom: 1.4rem;
  background-image: linear-gradient(rgba(11, 19, 34, .2), rgba(11, 19, 34, .2)), var(--img, none);
  background-size: cover; background-position: center, var(--img-pos, 50% 50%); background-blend-mode: normal, luminosity
}
body[data-page="strategies"] .who-card h3 { font-size: 1.3rem }
body[data-page="strategies"] .who-card ul { padding-left: 2.55rem; margin: 0 }
body[data-page="strategies"] .who-card li { margin-bottom: .45rem; line-height: 1.5 }
body[data-page="strategies"] .who-card li::marker { color: var(--red) }
body[data-page="strategies"] .who-card:nth-child(1) { --img: url("../img/photos/note-statarb-sm.jpg"); --img-pos: 50% 50% }
body[data-page="strategies"] .who-card:nth-child(2) { --img: url("../img/photos/note-basis-sm.jpg"); --img-pos: 50% 42% }
body[data-page="strategies"] .who-card:nth-child(3) { --img: url("../img/photos/note-meanrev-sm.jpg"); --img-pos: 50% 82% }
body[data-page="strategies"] .who-card:nth-child(4) { --img: url("../img/photos/note-trend-sm.jpg"); --img-pos: 50% 60% }
body[data-page="strategies"] .who-card:nth-child(5) { --img: url("../img/photos/type-options-sm.jpg"); --img-pos: 50% 65% }
body[data-page="strategies"] .who-card:nth-child(6) { --img: url("../img/photos/note-vol-sm.jpg"); --img-pos: 50% 45% }
body[data-page="strategies"] .who-card:nth-child(7) { --img: url("../img/photos/london-night-sm.jpg"); --img-pos: 50% 55% }
body[data-page="strategies"] .who-card:nth-child(8) { --img: url("../img/photos/type-carry-sm.jpg"); --img-pos: 50% 50% }

/* ── 03 inside a strategy: a full-bleed night band (the house's deep navy, as on How it works and Infrastructure) ── */
body[data-page="strategies"] .poster > section:has(> .shots) {
  width: 100vw; margin-left: calc(50% - 50vw); padding-inline: var(--gutter);
  background: var(--navy-deep); color: #EEF0F3
}
body[data-page="strategies"] section:has(> .shots) .sh { border-top-color: rgba(255, 255, 255, .4); max-width: calc(var(--page) - 2.8rem) }
body[data-page="strategies"] section:has(> .shots) h2 { color: #fff }
body[data-page="strategies"] section:has(> .shots) .sh-num { color: var(--gold-light) }
body[data-page="strategies"] section:has(> .shots) .section-lead { color: #C3CAD6 }
body[data-page="strategies"] .shots { gap: 1.6rem; margin-top: 2.6rem; max-width: calc(var(--page) - 2.8rem) }
body[data-page="strategies"] .shot-img { border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); box-shadow: 0 30px 70px rgba(0, 0, 0, .45) }
body[data-page="strategies"] .shot-label { top: 12px; left: 12px; padding: 5px 10px; background: rgba(20, 33, 58, .9) }
body[data-page="strategies"] .shot figcaption { color: #AEB6C4; font-size: .93rem; line-height: 1.5; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .16) }

/* ── 04 how you use them: lede beside the platform photograph ── */
body[data-page="strategies"] .poster > section:has(> a.back) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(2rem, 5vw, 4.5rem); align-content: start
}
body[data-page="strategies"] section:has(> a.back) > .sh { grid-column: 1 / -1; margin-bottom: 1.6rem }
body[data-page="strategies"] section:has(> a.back) > .section-lead { grid-column: 1; grid-row: 2; align-self: start; font-size: clamp(1.25rem, 1.7vw, 1.45rem); line-height: 1.5; color: #283246; max-width: 34rem }
body[data-page="strategies"] section:has(> a.back) > .back { grid-column: 1; grid-row: 3; align-self: start; justify-self: start; margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1.1rem }
body[data-page="strategies"] section:has(> a.back)::after {
  content: ""; grid-column: 2; grid-row: 2 / span 2; min-height: 400px; border-radius: var(--radius);
  background: var(--navy) url("../img/photos/hero-platform.jpg") 50% 55% / cover no-repeat
}

/* ── wide screens: group heads stay in view beside their tiles ── */
@media (min-width: 1101px) {
  body[data-page="strategies"] .theme-group h3 { position: sticky; top: 6.6rem }
}

/* ── tablet ── */
@media (max-width: 1100px) {
  body[data-page="strategies"] .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  body[data-page="strategies"] .who-card::before { aspect-ratio: 16 / 9 }
  body[data-page="strategies"] .theme-group { grid-template-columns: minmax(0, 1fr); row-gap: 1.4rem }
  body[data-page="strategies"] .theme-group::before { width: 9rem }
  body[data-page="strategies"] .themes { gap: 2rem 1.2rem }
}
@media (max-width: 860px) {
  body[data-page="strategies"] .poster > section:has(> a.back) { grid-template-columns: minmax(0, 1fr) }
  body[data-page="strategies"] section:has(> a.back) > .section-lead,
  body[data-page="strategies"] section:has(> a.back) > .back { grid-column: 1; grid-row: auto }
  body[data-page="strategies"] section:has(> a.back)::after { grid-column: 1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 10; margin-top: 2rem }
  body[data-page="strategies"] .shots { gap: 1.1rem }
}

/* ── phone: themes become a media list, types a single column ── */
@media (max-width: 640px) {
  body[data-page="strategies"] .theme-grid { margin-top: 2rem }
  body[data-page="strategies"] .theme-group { padding: 1.3rem 0 2.2rem; row-gap: 1.2rem }
  body[data-page="strategies"] .theme-group h3 { font-size: 1.45rem }
  body[data-page="strategies"] .themes { grid-template-columns: minmax(0, 1fr); gap: 0 }
  body[data-page="strategies"] .themes li {
    display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1rem; row-gap: .2rem;
    padding: .9rem 0; border-top: 1px solid var(--line-soft)
  }
  body[data-page="strategies"] .themes li:first-child { border-top: 0; padding-top: 0 }
  body[data-page="strategies"] .themes li::before { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 1; margin: 0; border-radius: 8px; align-self: start }
  body[data-page="strategies"] .theme-name { grid-column: 2; font-size: 1.05rem; margin-top: .1rem }
  body[data-page="strategies"] .theme-desc { grid-column: 2; font-size: .92rem }
  body[data-page="strategies"] .who-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem }
  body[data-page="strategies"] .who-card::before { aspect-ratio: 2 / 1 }
  body[data-page="strategies"] .shot-img { border-radius: 12px }
}

/* ── the close: the house band, as on Home (the call stacked on the left); the core joins it to the footer ── */
body[data-page="strategies"] .cta-band {
  grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 2rem;
  min-height: clamp(440px, 60vh, 600px); align-content: center; margin-top: 0;
  background-image: linear-gradient(90deg, rgba(11, 19, 34, .94) 0%, rgba(11, 19, 34, .8) 40%, rgba(11, 19, 34, .3) 100%), var(--cta);
}
body[data-page="strategies"] .cta-band h2 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); margin-bottom: 1rem }
body[data-page="strategies"] .cta-band p { font-size: 1.28rem; color: rgba(255, 255, 255, .86) }
@media (max-width: 640px) {
  body[data-page="strategies"] .cta-band { min-height: 0; gap: 1.6rem; padding: 4.4rem 1rem; background-image: linear-gradient(180deg, rgba(11, 19, 34, .86), rgba(11, 19, 34, .74) 55%, rgba(11, 19, 34, .9)), var(--cta) }
  body[data-page="strategies"] .cta-band h2 { font-size: clamp(2rem, 9vw, 2.4rem); margin-bottom: .8rem }
  body[data-page="strategies"] .cta-band p { font-size: 1.12rem }
}