/* ==========================================================================
   Deploy-time fixes. Loaded last, so it wins over the per-page styles.
   Keep this file small — anything here is a patch, not a design decision.
   ========================================================================== */

/* The nav overflowed the viewport by a few pixels on a narrow phone, which
   gave every page a horizontal scrollbar. Shrink the wordmark and the button
   just below 430px so the row fits. */
@media (max-width:430px){
  .nav-in{gap:10px;padding:11px 5vw}
  .brand svg{height:19px}
  .nav-flag{margin-left:8px;padding-left:8px}
  .nav-flag svg{width:15px;height:15px}
  .nav-cta{padding:9px 12px;font-size:12px!important}
}

/* Belt and braces: nothing should ever cause sideways scroll. */
html,body{overflow-x:clip}

/* The width/height attributes added at build time (to reserve space and stop
   layout shift) also act as a used height, which beats the design's
   `aspect-ratio` rules and made every image render at full natural height with
   object-fit:cover chopping the sides off. height:auto hands sizing back to the
   CSS while keeping the attributes doing their anti-shift job. */
img[width][height]{height:auto}

/* The site had no author :focus styles at all, so keyboard focus fell back to
   the browser default — a near-black ring on a near-black page. Chrome draws a
   two-tone ring that survives that; Firefox and Safari do not reliably. Make it
   explicit, on-brand, and visible on every surface. */
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:2px}
/* An ember ring on an ember button is invisible — flip to the light text colour. */
.btn:focus-visible,.nav-cta:focus-visible,.cta:focus-visible{
  outline:3px solid #FFF6F0;outline-offset:3px}
/* Form fields already show an ember glow on focus; keep the ring off them so the
   two treatments do not fight. */
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:none}

/* Skip link: hidden until focused, then the first thing a keyboard user sees. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;
  font-family:Karla,sans-serif;font-size:0.9375rem;font-weight:600;
  background:var(--ember-d,#BA522A);color:#FFF6F0;padding:12px 18px;
  border-radius:0 0 6px 0;text-decoration:none}
.skip-link:focus{left:0}
main:focus{outline:none}