/* ============================================================================
   PRBE DESKTOP LAYER  —  2026-08-11
   These pages were built phone-first and had ZERO desktop media queries, so on a
   1640px screen the whole site rendered as a ~500px strip stranded in the middle
   with dead margins either side, and the wave bands were trapped inside that
   narrow column. Everything here is gated at min-width:900px except the wave
   full-bleed, so the phone layout the Commander approved is untouched.
   ============================================================================ */

/* ---- the wave bands break out of the reading column at EVERY size ---------
   A wave that stops at the text margin reads as a decoration; a wave that runs
   edge to edge reads as the page itself moving. */
.prb-wave{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

@media (min-width:900px){
  /* ---- the reading column stops being a phone ---- */
  :root{ --maxw:820px; }
  body{ font-size:17px; line-height:1.55; }
  .wrap{ padding-left:30px; padding-right:30px; }

  /* the dead cream either side gets depth instead of nothing */
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(1100px 620px at 50% -8%, rgba(26,201,201,.10), transparent 62%),
      radial-gradient(900px 560px at 108% 42%, rgba(255,122,26,.09), transparent 60%),
      radial-gradient(760px 520px at -8% 78%, rgba(13,27,62,.07), transparent 62%);
  }

  /* ---- type scales with the wider measure ---- */
  h1,.name{ font-size:clamp(38px,3.6vw,56px); line-height:1.04; }
  h2,.story h2,.sort h4{ font-size:clamp(26px,2.3vw,34px); line-height:1.2; }
  h3.sec{ font-size:12.5px; }
  p,li{ font-size:17px; }

  /* ---- cards get room to breathe, two-up where it reads better ---- */
  .wrap a.card{ padding:20px 22px; }
  a.card .t{ font-size:18px; }
  a.card .d{ font-size:14.5px; }

  /* ---- the wave band is taller on a big screen ---- */
  .prb-wave{ height:150px; }
  .prb-wave.tall{ height:200px; }

  /* ---- the story video and media blocks fill the wider column ---- */
  .yt,.paper,.optin{ max-width:100%; }
  .optin{ max-width:560px; }
}

@media (min-width:1300px){
  :root{ --maxw:900px; }
  .prb-wave{ height:172px; }
}

@media (prefers-reduced-motion:reduce){
  body::before{ display:none; }
}

/* ---- BUG (from the Commander's own screen recording 2026-08-11) ------------
   Short label chips were collapsing to ~35-48px wide and 119-153px TALL, i.e.
   one character per line - "Español · Português" and "lleno de tiburones" came
   out as a vertical letter stack overlapping the copy beside it.
   CAUSE: the global `span{overflow-wrap:anywhere}` safety rule lets a span's
   min-content width fall to a single glyph, and inside a flex row the browser
   then shrinks it all the way down. Those rules exist to stop long URLs blowing
   the page open - they must NOT apply to short pill labels. */
.tag,.chip,.cnt,a.card .tag,a.card .chip,a.card .cnt,
.eyebrow,.role,.crole,.badge,.pill{
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:keep-all;
  flex:0 0 auto;
  width:auto;
  max-width:100%;
}

/* the card BODY text was collapsing the same way (42px wide x 587px tall).
   A card is a block; its text must own the full width and never shrink-to-fit. */
a.card{display:block}
a.card .t,a.card .d,a.card p,a.card span.cnt{
  width:100%;min-width:0;flex:1 1 auto;
  white-space:normal;overflow-wrap:break-word;word-break:normal;
}
a.card .t{display:flex;align-items:center;justify-content:space-between;gap:10px}
a.card .t .arw{flex:0 0 auto;white-space:nowrap}