/* 345 Strategies — brand tokens + fonts.
   Palette values inferred from _ds_bundle.js hints (#f6f4ef / #f0eee9);
   replace with the design system's real tokens when they export. */

@font-face {
  font-family: 'EB Garamond';
  src: url('_ds/345-strategies-design-system-1c4e624e-1fc9-4f43-8e56-62e9da41c3fd/fonts/EBGaramond-VariableFont_wght.woff2') format('woff2'), url('_ds/345-strategies-design-system-1c4e624e-1fc9-4f43-8e56-62e9da41c3fd/fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('_ds/345-strategies-design-system-1c4e624e-1fc9-4f43-8e56-62e9da41c3fd/fonts/EBGaramond-Italic-VariableFont_wght.woff2') format('woff2'), url('_ds/345-strategies-design-system-1c4e624e-1fc9-4f43-8e56-62e9da41c3fd/fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('_ds/345-strategies-design-system-1c4e624e-1fc9-4f43-8e56-62e9da41c3fd/fonts/IBMPlexMono-Regular.woff2') format('woff2'), url('_ds/345-strategies-design-system-1c4e624e-1fc9-4f43-8e56-62e9da41c3fd/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('_ds/345-strategies-design-system-1c4e624e-1fc9-4f43-8e56-62e9da41c3fd/fonts/IBMPlexMono-Medium.woff2') format('woff2'), url('_ds/345-strategies-design-system-1c4e624e-1fc9-4f43-8e56-62e9da41c3fd/fonts/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('_ds/345-strategies-design-system-1c4e624e-1fc9-4f43-8e56-62e9da41c3fd/fonts/IBMPlexMono-SemiBold.woff2') format('woff2'), url('_ds/345-strategies-design-system-1c4e624e-1fc9-4f43-8e56-62e9da41c3fd/fonts/IBMPlexMono-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}

:root {
  --bone: #f6f4ef;
  --bone-deep: #f0eee9;
  --ink: #171512;
  --ink-soft: #57534b;
  --ink-mute: #8a857b;
  --ink-faint: #d9d5cb;
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Manifesto body runs in two print-ad columns; single column when narrow. */
.manifesto-cols { columns: 2; column-gap: 56px; }
.manifesto-cols p { break-inside: avoid-column; }
@media (max-width: 820px) {
  .manifesto-cols { columns: 1; }
}

/* Hero runs shorter than the design tool's 420px min-height at every width. */
[data-screen-label="Hero"] > div > div { min-height: 340px !important; padding: 40px 0 !important; }

/* Below ~1080px the fixed 64px headline starts crossing the hero photo's
   opaque zone (both are inline-styled by the design tool, hence !important). */
@media (max-width: 1080px) {
  [data-screen-label="Hero"] h1 { font-size: 52px !important; }
}
@media (max-width: 960px) {
  [data-screen-label="Hero"] > div > div { min-height: 340px !important; padding: 32px 0 !important; }
}
@media (max-width: 900px) {
  [data-screen-label="Hero"] h1 { font-size: 42px !important; }
  [data-screen-label="Hero"] > img {
    -webkit-mask-image: linear-gradient(to left, black 28%, transparent 85%) !important;
    mask-image: linear-gradient(to left, black 28%, transparent 85%) !important;
  }
}
@media (max-width: 640px) {
  [data-screen-label="Hero"] h1 { font-size: 34px !important; }
  [data-screen-label="Hero"] > img {
    width: 90% !important;
    opacity: .5;
    -webkit-mask-image: linear-gradient(to left, black 15%, transparent 75%) !important;
    mask-image: linear-gradient(to left, black 15%, transparent 75%) !important;
  }
  [data-screen-label="Hero"] > div > div { min-height: 240px !important; padding: 24px 0 !important; }
}

/* About: below ~900px the overlay fights the photo — the right-edge fade
   lands exactly on the pointing guy. Stack instead: photo full-width and
   unfaded, text below it. Above 900px the designed overlay works as-is. */
@media (max-width: 900px) {
  [data-screen-label="About"] > img {
    position: static !important;
    display: block;
    width: 100% !important;
    height: 300px !important;
    object-position: 72% 30% !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  [data-screen-label="About"] > div > div { min-height: 0 !important; padding: 36px 0 48px !important; }
  [data-screen-label="About"] > div > div > div { width: 100% !important; min-width: 0 !important; }
}

/* Tool rows are a fixed 260px | text | 180px grid; below ~960px the text
   column collapses to a word per line and the link runs off-screen. Stack. */
@media (max-width: 960px) {
  [data-screen-label="Tools"] > div > div {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  [data-screen-label="Tools"] > div > div > div:first-child { max-width: 360px; width: 100%; }
  [data-screen-label="Tools"] > div > div > a { justify-self: start !important; }
}

/* Mobile: 64px side padding leaves too little room in the 1200px wraps. */
@media (max-width: 700px) {
  div[style*="max-width: 1200px"] { padding-left: 28px !important; padding-right: 28px !important; }
}