/* ============================================================================
   SWORT media compositions: copy beside a single image
   ---------------------------------------------------------------------------
   WHY THIS FILE EXISTS, AND WHY IT IS NOT IN page.css
   ---------------------------------------------------
   These rules originally shipped inside page.css. page.css is loaded by exactly
   four routes (government-capabilities, investors, research-partnerships, team)
   and NOT by index.html. So on the homepage `.ssil-split` resolved to
   `display: block`, the SSIL electronics photograph lost its 45% column and
   rendered at the full 1065px container width and 710px tall, turning a
   two-column composition into a wall of photograph. Measured before the fix:

     .ssil-split   display   block          (expected grid)
                   columns   none           (expected 55fr 45fr)
     img           rendered  1065 x 710 px  (expected ~470 x 313)
     #ssil         height    1288 px        on a 900px viewport

   The image also looked soft, and that was the SAME bug rather than a second
   one: `sizes` promises 44vw, the browser picked the file for that promise, and
   the broken layout then stretched it across 1065 CSS px on a 2x display. Fix
   the column and the sharpness returns with it. No re-encoding was needed; the
   derivatives were verified correct on disk and correct when decoded.

   Splitting the rules out rather than adding page.css to index.html is
   deliberate. page.css redefines `.container` (max-width and horizontal
   padding, plus a breakpoint override). index.html has its own `.container`
   treatment, so linking page.css there to obtain four rules would have
   rewritten the grid every section on the homepage sits in. Of the 73 classes
   page.css defines, index.html uses 8, and 4 of those are the ones below.

   A shared component belongs in a shared file. That is what this is.

   Loaded by: index.html, research-partnerships.html, team.html.
   Guarded by scripts/verify-css-reachable.mjs, which fails the build if a page
   uses one of these classes without linking this stylesheet.
   ========================================================================= */

/* ── Two-column composition ───────────────────────────────────────────────
   Copy on the left, one image on the right, stacking to copy-then-image on
   narrow screens. Text leads on mobile in every case: the image illustrates
   something the copy has just said, so it should not arrive first.

   minmax(0, …) on both tracks because the default `auto` minimum refuses to
   shrink below content size, which is what makes a long unbroken string in the
   copy column push the image column off-grid. */
.p-hero-split, .ssil-split {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.p-hero-copy, .ssil-copy { min-width: 0; }

/* No card, no border, no radius, no shadow. The UAV source is already on black
   and sits directly on the section; framing it would reintroduce the boxed look
   the brief rules out. */
.p-hero-figure, .ssil-figure { margin: 0; min-width: 0; }
.p-hero-figure picture, .ssil-figure picture { display: block; }
.p-hero-figure img {
  display: block; width: 100%; height: auto;
  /* Matches the section's own black so the image edge is invisible. */
  background: var(--swort-black);
}

/* The electronics photo is a real photograph on a light section, so it gets a
   hairline rule rather than nothing: without an edge it floats.

   aspect-ratio is declared so the column reserves its height before the image
   decodes. The width/height attributes in the markup describe the SOURCE
   (1536x1024); this describes the SLOT, and without it the figure collapses to
   the caption height on first paint and the section reflows underneath the
   reader. Still no radius and no drop shadow. */
.ssil-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1536 / 1024;
  object-fit: cover;
  border: 1px solid var(--paper-rule);
}

.p-hero-figcap, .ssil-figcap {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: var(--type-caption);
  line-height: var(--leading-body);
  margin-top: 0.75rem;
  max-inline-size: var(--measure-note);
  text-wrap: pretty;
}
.p-hero-figcap { color: var(--swort-gray); }
.ssil-figcap  { color: var(--paper-muted); }

/* Below the stacking point the image is no longer a column, so it would run the
   full container width. On a phone that is fine; on a tablet a 700px-wide
   photograph of an avionics bay is louder than the heading above it, so it is
   capped and left-aligned with the copy rather than centred. */
@media (max-width: 900px) {
  .p-hero-split, .ssil-split { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2rem); }
  .p-hero-figure, .ssil-figure { max-inline-size: 560px; }
}

/* ── Hardware & Programs lede: editorial product composition ──────────────
   Copy column and board side by side, board weighted heavier, per the brief's
   35-40 / 60-65 split. The board is a transparent cut-out, so it needs no card,
   border, radius, shadow or glow: it sits directly on the section.

   Ratio is expressed in fr rather than percentages so the gap comes out of the
   grid rather than out of the columns, which is what keeps the measured split
   inside the requested band instead of drifting once the gap grows. */
.hw-lede { padding: calc(var(--section-pad) + 56px) 0 var(--section-pad); }
.hw-lede-grid {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.hw-lede-copy { min-width: 0; }
.hw-lede-title { margin-bottom: 0.5em; }
.hw-lede-cta { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }

/* Three capability statements. A hairline rule per row, no box: a bordered card
   here would rebuild the card grid the brief rules out. */
.hw-points {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--swort-border-dark);
}
.hw-point {
  padding: clamp(0.9rem, 1.4vw, 1.15rem) 0;
  border-bottom: 1px solid var(--swort-border-dark);
}
.hw-point-term {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--swort-white); margin: 0 0 0.45rem;
}
.hw-point-desc {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; line-height: 1.8;
  color: var(--swort-gray); margin: 0; max-inline-size: 52ch;
}

.hw-feature { margin: 0; min-width: 0; }
.hw-feature picture { display: block; }
.hw-feature img {
  display: block;
  width: 100%;
  height: auto;
  /* Capped because the transparent master is 996px wide; beyond this the fine
     silkscreen in the source stops resolving and the board only gets softer. */
  max-inline-size: 760px;
  aspect-ratio: 996 / 758;
  margin-inline: auto;
}
.hw-feature-cap {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: var(--type-caption);
  line-height: var(--leading-body);
  color: var(--swort-gray);
  margin: 1rem 0 0;
  max-inline-size: 72ch;
  text-wrap: pretty;
}

/* Stack below the split point, copy first: the board illustrates what the copy
   has just said, so it should not arrive ahead of it. */
@media (max-width: 900px) {
  .hw-lede-grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }
  .hw-feature img { max-inline-size: 620px; }
}

/* ── Program publication strip ────────────────────────────────────────────
   Replaces a full-height section that existed to say content was not ready. */
.s-programs { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.prog-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) 0;
  border-top: 1px solid var(--swort-border-dark);
  border-bottom: 1px solid var(--swort-border-dark);
}
.prog-strip-kicker {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--swort-gray); margin: 0 0 0.6rem;
}
.prog-strip-title {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--swort-white); margin: 0 0 0.6rem;
}
.prog-strip-body {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; line-height: 1.85;
  color: var(--swort-gray); margin: 0; max-inline-size: 72ch;
}
.prog-strip-cta { justify-self: end; white-space: nowrap; }
@media (max-width: 760px) {
  .prog-strip { grid-template-columns: 1fr; }
  .prog-strip-cta { justify-self: start; }
}

/* ── Founder portrait ─────────────────────────────────────────────────────
   Lives here rather than in page.css for the same reason as the rules above:
   one place for image compositions, so the next page that needs one links a
   single file instead of inheriting a page-scoped stylesheet. */
.t-founder-media {
  margin: 0;
  min-width: 0;
}
.t-founder-media picture { display: block; }
.t-founder-media img {
  display: block;
  width: 100%;
  height: auto;
  /* Natural portrait proportion, not a circle and not a forced square. */
  aspect-ratio: 1320 / 1661;
  object-fit: cover;
  /* Eyeline sits in the upper third; centring crops the forehead when the slot
     is short. */
  object-position: 50% 42%;
  border: 1px solid var(--paper-rule);
}
@media (max-width: 860px) {
  .t-founder-media { max-inline-size: 420px; }
}