/* Orza on a phone (Louis, 4 Nov 2026: "it just obviously hasn't been thought about from a mobile
   perspective"). Every page loads this last, after its own styles, so a phone rule here wins over the
   page's and is made once instead of 46 times. Desktop is untouched: everything is inside the media
   query below. Keep it to how things look; words stay in the pages. */

@media (max-width:600px){

  /* ── the header: slimmer, so more of each screen is the page ── */
  .sticky-nav{padding-top:.4rem; padding-bottom:.4rem}

  /* ── a page's opening: starts near the top, a heading that fits in two or three lines ── */
  .page-hero{padding:1.6rem 0 .25rem}
  .page-hero h1{font-size:2.05rem; line-height:1.08; letter-spacing:-.018em}
  .page-hero .lead{margin-top:.75rem; font-size:1rem; line-height:1.55}
  .page-hero + section{padding-top:1.75rem}
  section{padding:2.5rem 0}

  /* ── a drawing or icon sits beside its heading, not on a line of its own ── */
  .cols4{border-top:0; gap:0}
  .cols4 > div,
  .cols4 > div + div{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.95rem; align-items:start;
    padding:1rem 0 0; border-left:0}
  .cols4 > div > svg,
  .cols4 > div > img.ic{grid-row:span 2; margin:0}
  .cols4 > div > svg{margin-top:.15rem}
  .cols4 img.ic{width:60px; height:60px}
  .cols4 h3{margin-top:0}
  .cols4 p{margin-top:.25rem}
  #setup .cols4{grid-template-columns:1fr; gap:0}
  #setup .cols4 > div{padding-top:.9rem}
  #setup .cols4 h3{margin-top:0; font-size:1rem}
  #setup .cols4 p{font-size:.875rem}

  .fq-topics{grid-template-columns:1fr; gap:.5rem}
  .fq-topics a{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.9rem; row-gap:.1rem;
    align-items:center; padding:.7rem .9rem}
  .fq-topics a > img.ic,
  .fq-topics a > svg{grid-row:span 2; width:52px; height:52px; margin:0}
  .fq-topics a > svg{width:1.4rem; height:1.4rem}

  /* ── makes and suppliers: three to a row, at a size that reads ── */
  .wy-tiles,.wy-tiles.sup{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.3rem; margin-top:.45rem}
  .wy-tile{min-height:2.3rem; padding:.3rem .3rem; border-radius:7px}
  .wy-tile svg{height:1rem; max-width:100%}
  .wy-wall{gap:1rem}
  .wy-wall > .p-title{font-size:.9375rem}
  .wy-n{display:none}

  /* ── Why Orza's points: the figure or icon beside the words, a light rule between ── */
  .wy-points li{display:grid; grid-template-columns:4.4rem minmax(0,1fr); column-gap:.9rem; align-content:start;
    padding-top:.85rem; border-top:1px solid var(--rule)}
  .wy-points.four li{grid-template-columns:2.2rem minmax(0,1fr)}
  .wy-points .wy-fig,.wy-points .wy-ic{grid-row:span 3; margin:0}
  .wy-points .wy-fig{font-size:1.75rem; padding-top:.1rem; white-space:nowrap}
  .wy-points .wy-fig small{display:block; margin-top:.15rem; font-size:.875rem}
  .wy-points .wy-ic{width:1.9rem; height:1.9rem}
  .wy-points b{font-size:1rem}
  .wy-points span{margin-top:.25rem; font-size:.9rem}

  /* ── the drawn diagrams (assets/phone-diagrams.js): the drawing fits the screen, a numbered dot on
        each part, and the key under it ── */
  svg.ph-key text:not(.ph-dn),
  svg.ph-key .lead-line,
  svg.ph-key .ph-hide{display:none}
  .ph-keys{list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:.55rem; line-height:1.45}
  .ph-keys li{display:grid; grid-template-columns:1.35rem minmax(0,1fr); column-gap:.6rem; align-items:baseline;
    font-size:.875rem; color:var(--ink-2)}
  .ph-keys b{color:var(--ink); font-weight:600}
  .ph-n{display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:99px;
    background:var(--plum); color:#fff; font-size:.75rem; font-weight:600; align-self:start}
}
@media (min-width:601px){
  .ph-keys,.ph-dot{display:none}
}