/* ============================================================================
   SWORT responsive layer
   ---------------------------------------------------------------------------
   Loaded after tokens.css and after page-level styles, so it can correct
   layouts that were authored with fixed values.

   Two rules govern everything here:
     1. Nothing may cause horizontal scrolling at 320 CSS pixels.
     2. Components respond to the space they are GIVEN (container queries),
        not only to the viewport, so the same card behaves correctly in a
        sidebar, a two-column grid, and a full-bleed row.
   ========================================================================= */

/* ── Global overflow safety ─────────────────────────────────────────────── */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body { max-width: 100%; overflow-x: clip; }

/* Media and embeds can never exceed their box. */
img, svg, video, canvas, iframe, model-viewer {
  max-width: 100%;
  height: auto;
}

/* Tables and pre are the classic 320px overflow sources. */
pre, table { max-width: 100%; overflow-x: auto; }

/* ── Fluid container ────────────────────────────────────────────────────── */

.container,
.l-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Body copy must not stretch across ultrawide displays. */
.s-lede, .p-hero-body, .c-hero-body, .net-copy, .part-lede,
.affil-lede, .lab-lede, .found-note, .t-founder-bio p, .p-cell-body {
  max-inline-size: var(--measure-prose);
}

/* ── Container queries ──────────────────────────────────────────────────── */

.p-grid, .c-theme-grid, .c-work-grid, .c-signal-list,
.capabilities-grid, .standards-grid, .engage-grid,
.found-grid, .affil-grid, .part-grid, .t-affil-list,
.p-form-grid, .form-grid, .c-opp-list {
  container-type: inline-size;
}

/* Cards reflow on the width they actually receive. */
@container (max-width: 560px) {
  .p-cell, .c-theme, .c-work, .found-item, .affil-item, .part-card, .t-affil {
    padding-inline: var(--space-md);
    padding-block: var(--space-md);
  }
}

@container (max-width: 420px) {
  .p-cell-title, .c-theme-title, .affil-mark-text, .found-v {
    font-size: var(--type-body-large);
    line-height: var(--leading-snug);
  }
}

/* Forms collapse to one column on the space they are given, not the viewport. */
@container (max-width: 620px) {
  .p-form-grid, .form-grid { grid-template-columns: 1fr !important; }
  .p-field.full, .form-field.full { grid-column: 1 !important; }
}

/* Definition rows stack when narrow. */
.p-rows, .g-entity { container-type: inline-size; }
@container (max-width: 600px) {
  .p-row, .g-row { grid-template-columns: 1fr !important; gap: var(--space-2xs) !important; }
}

/* ── Grid fallbacks. Applied where container queries are unsupported and as
      an outer bound regardless. ─────────────────────────────────────────── */

@media (max-width: 1000px) {
  .p-grid-3, .c-work-grid, .c-signal-list, .affil-grid, .t-affil-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .found-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .p-grid-2, .p-grid-3,
  .c-theme-grid, .c-work-grid, .c-signal-list,
  .capabilities-grid, .standards-grid, .engage-grid,
  .found-grid, .affil-grid, .part-grid, .t-affil-list,
  .net-row, .p-form-grid, .form-grid {
    grid-template-columns: 1fr;
  }
  .p-field.full, .form-field.full { grid-column: 1; }
}

/* ── Typography scale binding ───────────────────────────────────────────── */

body { font-size: var(--type-body); line-height: var(--leading-body); }

.p-title, .c-hero-title { font-size: var(--type-section); line-height: var(--leading-tight); }
.s-head, .affil-title, .part-title, .lab-title,
.section-title, .ssil-intro-head, .net-head {
  font-size: var(--type-subhead);
  line-height: var(--leading-snug);
}
.p-eyebrow, .s-label, .section-kicker, .c-label,
.found-k, .affil-mark-full, .t-founder-role {
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-mega);
}

/* ── Section rhythm ─────────────────────────────────────────────────────── */

.s-paper, .s-black, .s-charcoal,
#capabilities, #process, #standards, #ssil, #ssil-sim,
#pricing, #intake, #foundation, #partnerships, #affiliations,
#network, #careers, #mission, #how-we-work, #opportunities,
#signal, #application, #entity, #procurement, #requirement,
#thesis, #evidence, #milestones, #capital, #investor-access,
#paths, #areas, #sponsor, #proposal, #also, #founder, #structure, #join {
  padding-block: var(--section-pad-block);
}

/* ── Touch targets ──────────────────────────────────────────────────────── */

.p-btn, .c-btn, .p-btn-full, .btn-primary, .btn-secondary, .btn-full,
.net-btn, .found-cta, .part-cta, .c-opp-cta, .t-link, .swc-btn, .swl-btn,
.nav-cta, .p-nav-cta, .mobile-nav-link, button[type="submit"] {
  min-height: var(--control-min-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Buttons must never exceed the viewport. */
.p-btn, .c-btn, .btn-primary, .btn-secondary {
  max-width: 100%;
  overflow-wrap: break-word;
}

.p-field input, .p-field select, .p-field textarea,
.form-field input, .form-field select, .form-field textarea,
.net-input {
  min-height: var(--control-min-height);
  font-size: max(1rem, var(--type-data));  /* >=16px stops iOS zoom-on-focus */
}
.p-field textarea, .form-field textarea { min-height: calc(var(--control-min-height) * 2.5); }

/* Coarse pointers get more generous hit areas. */
@media (pointer: coarse) {
  .p-nav-links a, .nav-links a, .footer-legal-link, .p-foot-col a, .l-nav-links a {
    padding-block: var(--space-xs);
    display: inline-block;
  }
}

/* ── Sticky nav must not hide anchor targets or focused controls ─────────── */

:root { --nav-h: 68px; }

[id] { scroll-margin-top: calc(var(--nav-h) + var(--space-sm)); }

/* WCAG 2.2 focus-not-obscured: give focused elements room under sticky nav. */
main :focus-visible { scroll-margin-top: calc(var(--nav-h) + var(--space-md)); }

/* At short viewports and high zoom a sticky bar eats the screen. Release it. */
@media (max-height: 520px), (max-width: 380px) {
  nav, .p-nav, .l-nav { position: static; }
}

/* ── Hero sizing that survives 320px and landscape phones ───────────────── */

#hero, .p-hero, .c-hero {
  min-height: auto;
  padding-block: var(--space-2xl) var(--space-xl);
}
@media (orientation: landscape) and (max-height: 520px) {
  #hero, .p-hero, .c-hero { padding-block: var(--space-lg); }
  .p-title, .c-hero-title { font-size: var(--type-subhead); }
}

/* ── Canvas: aspect-ratio boxes, never full-screen on phones ─────────────── */

#sim-canvas, #proc-rocket, #sensor-canvas, .nav-backdrop {
  max-width: 100%;
  display: block;
}

@media (max-width: 720px) {
  /* Cap decorative canvas height so it never dominates a phone screen. */
  #sensor-canvas { height: clamp(180px, 42vw, 240px) !important; }
  #sim-canvas    { max-height: 52vh; }
  /* The GNSS backdrop is decoration; drop it where it costs more than it adds. */
  .nav-backdrop  { display: none; }
}

/* Reduced motion: keep the visuals, remove the animation. */
@media (prefers-reduced-motion: reduce) {
  .nav-backdrop { display: none; }
}

/* ── Zoom and reflow ────────────────────────────────────────────────────── */

/* At 320 CSS px (equivalent to 400% zoom on a 1280 viewport) every multi-column
   layout must be single column and nothing may overflow. */
@media (max-width: 400px) {
  [class*="grid"] { grid-template-columns: 1fr !important; }
  .p-hero-cta, .c-hero-cta, .pricing-cta-wrap, .p-rows { flex-direction: column; }
  .p-btn, .c-btn, .btn-primary, .btn-secondary { width: 100%; }
  .p-identity { flex-direction: column; align-items: flex-start; }
  .p-identity-rule { display: none; }
  .container, .l-container { padding-inline: var(--space-sm); }
}

/* ── Ultrawide: cap, do not stretch ─────────────────────────────────────── */

@media (min-width: 2000px) {
  .container, .l-container { max-width: var(--content-max-wide); }
  body { font-size: clamp(1.05rem, 0.6vw, 1.25rem); }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  nav, .p-nav, .l-nav, footer, .p-foot, .l-foot,
  .nav-backdrop, canvas, .swc-banner, .swl-backdrop, .skip-link { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .container { max-width: none; padding-inline: 0; }
}

/* ── Scrolling on touch devices ───────────────────────────────────────────
   Measured at 390x844 across seven routes before writing this.

   ANCHOR LANDINGS WERE WRONG ON PHONES. Every section carries scroll-margin-top
   sized for the DESKTOP bar: 80px on the homepage, 90px on the paper pages,
   100px on careers. The mobile bar is shorter, so a jump from the menu or a
   dropdown left a band of dead space above the heading, and on careers it was
   20px of overshoot on a 77px bar. scroll-padding-top on the scroll container
   is the right control for this, because it applies to every anchor landing at
   once instead of being restated per section, and it is expressed against the
   bar's real height.

   OVERSCROLL CHAINING. Nothing stopped a scroll gesture that reached the end of
   the page from chaining to the browser's own pull-to-refresh, which on a long
   editorial page is easy to trigger by accident while reading. */
@media (max-width: 900px) {
  html {
    /* The bar is 73 to 77px on the routes measured; 84 clears the tallest with
       a little air, so a heading never lands flush against it. */
    scroll-padding-top: 84px;
  }
  /* The per-section desktop values now double up with the padding above and
     push headings too far down. One rule, one source of truth. */
  section[id] { scroll-margin-top: 0; }

  body {
    /* Contain the gesture: reaching the end of the page stops there rather
       than pulling the browser chrome. `contain` and not `none`, so the
       platform's own scroll-to-top and address-bar behaviour still work. */
    overscroll-behavior-y: contain;
  }
}

/* Smooth scrolling is a desktop nicety. On a phone the platform's momentum
   scrolling already handles it, and the two together read as sluggish on an
   anchor jump. Honouring reduced motion here as well, which the existing rules
   already do site-wide. */
@media (max-width: 900px) {
  html { scroll-behavior: auto; }
}