/* Subscribe form states */
.form-message.is-error{ color:#e2746b; }
.form-message.is-success{ color: var(--color-accent-light); }
.subscribe-form button[disabled]{ opacity:0.6; cursor:default; }

/* Skip link uses fixed position so it isn't affected by header sticky offset */
.skip-link{ position:fixed; }

/* --------------------------------------------------------------------
   Small-screen fixes
   ------------------------------------------------------------------ */

/* 1. Logo breathing room from the screen edge on phones.
   Root cause fixed directly in style.css: `.header-inner` used to set
   `padding: 1.1rem 0`, which zeroed out the left/right padding it was
   supposed to inherit from `.container` (same selector specificity, later
   in the file, so it won it at every screen width, not just small ones).
   That's now `padding-top`/`padding-bottom` only, so `.container`'s
   `--container-pad` (1rem at <=480px) applies normally. This adds a little
   extra breathing room specifically on very small phones on top of that. */
@media (max-width: 480px){
  .header-inner{ padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* 2. Horizontal scroll fix.
   `.article-breakout` / `.alignfull` use the `100vw` full-bleed technique,
   which on some browsers/devices is wider than the visible viewport by the
   scrollbar's own width, forcing a page-level horizontal scrollbar. Clipping
   on <body> alone doesn't always stop <html> from registering the overflow,
   so clip on both — this does not change how anything looks, it only removes
   the stray scrollbar. */
html{ overflow-x: hidden; }
body{ overflow-x: hidden; width: 100%; }

/* The homepage "More to Discover" grid is pinned to 2 columns via an inline
   style (kept from the original design for larger screens); on narrow phones
   that forces two cramped columns that can push content past the viewport
   edge. Let it drop to a single column below 560px. Scoped to the homepage
   latest-layout wrapper, since plain .worth-grid is reused elsewhere
   (Stories Worth Reading, More Stories) without the inline override. */
@media (max-width: 560px){
  .homepage-latest-layout .worth-grid{ grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------
   Homepage hero spacing
   ------------------------------------------------------------------ */

/* Give the "Featured Story" eyebrow in the homepage hero some breathing
   room above the hero grid. Scoped to .hero so it doesn't affect the many
   other .eyebrow labels used across the rest of the site. */
.hero .eyebrow{ margin-bottom: 10px; }