/* MessyNet — breakpoints
   The prototype was drawn at desktop width only; everything below is added.
   Type and section gutters are already fluid (clamp/vw) in the design, so
   these rules deal with the things that cannot flow: multi-column grids,
   minimum widths, the nav, and a few oversized fixed dimensions. */

/* ── Tablet and below ─────────────────────────────────────────────────── */
@media (max-width:1024px){
  /* Two-column grids collapse to one. */
  .mn-cols{grid-template-columns:1fr!important}
  /* Mirrored chapter sections put the card in the left cell so it sits
     opposite the headline. Stacked, that order reads backwards — the
     explanation arrives before the chapter it belongs to — so swap them.
     The prototype sets order:1/order:2 inline to mirror the columns, and an
     inline declaration outranks a stylesheet, so these need !important —
     the same reason .mn-cols above does. */
  .mn-cols-flip>*:first-child{order:2!important}
  .mn-cols-flip>*:nth-child(2){order:1!important}
  /* Three-column grids step down to two before going single-file, so the
     card rows keep some horizontal rhythm on a tablet. */
  .mn-cols-3{grid-template-columns:repeat(2,1fr)!important}
  /* A rail with a large min-width (the listen → surface architecture row) cannot
     wrap without reading as broken, so it scrolls inside itself instead of
     pushing the document sideways. */
  .mn-minw{min-width:0!important;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;scrollbar-width:thin}
  /* Side-by-side visualisation + copy pairs stack. */
  /* Column-flow grids (header above its own three cells) become one column,
     which keeps each header with its group because the DOM order is already
     column-major. */
  .mn-colflow{grid-template-columns:1fr!important;grid-template-rows:auto!important;
    grid-auto-flow:row!important}
}

/* ── Mobile nav ───────────────────────────────────────────────────────── */
@media (max-width:860px){
  .mn-nav{gap:14px}
  /* Visually hidden but focusable: the keyboard route into the menu. */
  .mn-nav__toggle{display:block;position:absolute;width:1px;height:1px;opacity:0;margin:0}
  .mn-nav__burger{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;margin-left:auto;width:42px;height:42px;cursor:pointer;
    border:1px solid var(--mn-wire);border-radius:var(--mn-radius-sm)}
  .mn-nav__burger i{display:block;width:19px;height:2px;background:var(--mn-ice);
    transition:transform .22s ease,opacity .18s ease}
  .mn-nav__toggle:checked~.mn-nav__burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mn-nav__toggle:checked~.mn-nav__burger i:nth-child(2){opacity:0}
  .mn-nav__toggle:checked~.mn-nav__burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mn-nav__toggle:focus-visible~.mn-nav__burger{outline:2px solid var(--mn-teal);outline-offset:2px}
  .mn-nav__links{display:none;position:absolute;top:64px;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;padding:6px 0;
    background:var(--mn-night);border-bottom:1px solid var(--mn-wire-subtle);
    box-shadow:0 12px 24px rgba(0,0,0,.35)}
  .mn-nav__toggle:checked~.mn-nav__links{display:flex}
  .mn-nav__links a{padding:14px clamp(18px,4vw,40px);font-size:15px}
  .mn-nav__links a.mn-nav__cta,
  .mn-nav__links a.mn-nav__cta[aria-current="page"]{background:none;color:var(--mn-teal);
    border-radius:0;font-size:15px;padding:14px clamp(18px,4vw,40px);
    border-top:1px solid var(--mn-wire-subtle);margin-top:4px}
  .mn-nav__links a.mn-nav__cta:hover{background:none;color:var(--mn-teal-hover)}
}

/* ── Phone ────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  /* The hero sets its words as inline-blocks with em-based stagger indents,
     so they cannot wrap out of an overflow. Lowering only the floor of the
     existing clamp keeps the design's own fluid curve and leaves every width
     above this breakpoint untouched. */
  .mn-display-xl{font-size:clamp(34px,11vw,64px)!important}
  /* Rows of pills, tabs and button pairs wrap instead of clipping. */
  .mn-wrap{flex-wrap:wrap!important}
  /* Wide gaps between stacked blocks read as dead space on a phone. */
  /* Tables and rails that genuinely need width scroll inside themselves
     rather than pushing the document sideways. */
  /* Three-column grids finish collapsing on a phone. */
  .mn-cols-3{grid-template-columns:1fr!important}
  /* A scrolling rail takes the full width rather than sharing a line. */
  .mn-minw{flex-basis:100%!important}
  /* Tap targets: the design's smallest pills are below 44px. */
  .mn-nav__links a{min-height:44px;display:flex;align-items:center}
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print{
  .mn-nav,.mn-skip{display:none!important}
  body{background:#fff}
  /* Reveals are driven by scroll position, so anything the reader had not
     reached yet would otherwise print blank. */
  [data-anim]{opacity:1!important;transform:none!important;stroke-dashoffset:0!important;
    transition:none!important}
  .mn-lang{position:static!important;opacity:1!important;animation:none!important}
  .mn-lang:not(.mn-lang-0){display:none!important}
  a[href^="http"]::after,a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:.85em}
}