| … | … | @@ -744,7 +744,15 @@ body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-se |
| 744 | 744 | line-height:1.55;-webkit-font-smoothing:antialiased;font-size:var(--f2)} |
| 745 | 745 | h1{display:flex;align-items:center;gap:var(--s2);font-size:var(--f4);letter-spacing:-.01em;margin:0 0 var(--s3)} |
| 746 | 746 | h1 small{font-size:var(--f1)} |
| 747 | | nav{gap:var(--s4);margin:0 0 var(--s5);padding-bottom:var(--s2);border-bottom:1px solid var(--line);font-size:var(--f1)} |
| 747 | /* The search form is a fixed 8rem and a flex item defaults to min-width:auto, so on a nowrap row it |
| 748 | cannot shrink and cannot drop — it just pushes the page wider than the viewport. Measured: at 360px |
| 749 | (a mainstream Android portrait width) the document was 377px, overflowing by exactly the amount |
| 750 | .navsearch could not give up. 390px was already fine, so this is narrow-phone only. Wrapping lets the |
| 751 | form take its own line instead of widening the document; min-width:0 lets it shrink first and stay on |
| 752 | line one where there is room. */ |
| 753 | nav{gap:var(--s4);margin:0 0 var(--s5);padding-bottom:var(--s2);border-bottom:1px solid var(--line);font-size:var(--f1);flex-wrap:wrap} |
| 754 | .navsearch{min-width:0} |
| 755 | .navsearch input{max-width:100%} |
| 748 | 756 | nav a{color:var(--fg-dim);text-decoration:none;padding:var(--s1) 0;border-bottom:2px solid transparent} |
| 749 | 757 | nav a:hover{color:var(--fg)} |
| 750 | 758 | nav a[aria-current=page]{color:var(--fg);font-weight:600;border-bottom-color:var(--fg)} |