/* Shared shell rules for site.html (dev) and site-prod.html (production). One file so the two
   shells cannot drift apart again — they had already diverged on the iOS focus-zoom guard
   (mobile review, 2026-08-17). */
img,svg,canvas,video{max-width:100%}
img{height:auto}
#root{overflow-x:clip}
a{-webkit-tap-highlight-color:rgba(156,27,46,0.16)}
/* !important so component inline font sizes cannot re-arm iOS focus-zoom: author !important
   beats inline styles, and every real input on the site was shipping 13-15px inline (mobile
   review, 2026-08-16). Scoped by pointer as well as width: landscape phones report 844-932
   CSS px and sailed straight past a width-only 720px cutoff (2026-08-17). */
@media (max-width:720px),(pointer:coarse){input,select,textarea{font-size:16px !important}}
/* Touch targets: fields matched the buttons' 44px floor everywhere except height, they resolved
   to ~43px from padding alone. Pin the minimum on coarse pointers so every control clears 44px
   (mobile review, 2026-08-19). Checkable inputs are excluded, their box is not the target. */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]),select{min-height:44px}}
button{font-size:16px}
@media (min-width:721px){button{font-size:inherit}}
.ar-skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;background:var(--ink-900);color:var(--rack-cream-100);font-family:var(--font-display);font-size:14px;border-radius:0 0 var(--radius-m) 0;text-decoration:none}
.ar-skip:focus{left:0;color:var(--rack-cream-100)}
@keyframes ar-skeleton{from{background-position:140% 0}to{background-position:-40% 0}}
[data-arglyph]{display:inline-block;transition:transform 260ms var(--ease-glide)}
a:hover [data-arglyph],button:hover [data-arglyph]{transform:translateX(4px)}
/* download glyphs point down, so their hover nudge does too */
a:hover [data-arglyph="down"],button:hover [data-arglyph="down"]{transform:translateY(3px)}