/*
 * responsive.css — the one stylesheet in this repo that is NOT recovered from
 * live (DECISIONS D-14, Josh 2026-10-29). Live is a fixed 960px desktop page
 * with no viewport meta; this makes it usable on tablets and phones.
 *
 * Every rule sits under max-width: 959px, so at 960px and wider NOTHING here
 * applies and the page stays pixel-identical to the original design
 * (scripts/probe-parity.mjs at 1024/1440/1920). layout.css stays verbatim.
 * No font sizes are changed: the largest text is the 26px header name.
 */

/* ---- Tablet: the 960px frame becomes fluid; columns keep their sides ---- */
@media (max-width: 959px) {
  div.wrapper {
    width: auto;
    padding: 0 16px;
  }

  /* layout.css fixes these at 960 / 900 / 940px wide. */
  #header, #topbar, #intro, #copyright {
    width: auto;
  }

  #header .fl_left  { width: 48%; }
  #header .fl_right { width: 48%; }

  #intro > .fl_left  { width: 36%; }
  #intro > .fl_right { width: 58%; }

  /* The photo wrapper is a 360px float that fills the desktop column (layout.css
     matches it with `#intro .fl_left`). As a plain block it lays out the same —
     the link list still starts below it — without a fixed width. */
  #intro .fl_left .fl_left {
    float: none;
    width: auto;
  }

  #header img, #intro img {
    max-width: 100%;
    height: auto;
  }
}

/* ---- Phone: one column, the page's own copy before the sister-site links ---- */
@media (max-width: 767px) {
  #header .fl_left, #header .fl_right {
    float: none;
    width: auto;
  }
  #header .fl_right { margin-top: 20px; }

  #intro {
    display: flex;
    flex-direction: column;
    padding: 20px;
  }
  #intro > .fl_left, #intro > .fl_right {
    float: none;
    width: auto;
  }
  #intro > .fl_right { order: -1; }

  /* Only clears the floats, and there are none in a flex column. */
  #intro > br.clear { display: none; }
}