/* ==========================================================================
   THE NEW JEWELLER UAE — RESPONSIVE ENTRY POINT
   The one file a page links for its media queries. It pulls in the two device
   stylesheets and carries the handful of media rules that are not about
   screen width at all.

     responsive.css  ->  tablet.css   @media (max-width: 1024px)
                     ->  mobile.css   @media (max-width:  640px)

   THE SITE SUPPORTS THREE WIDTHS AND NO OTHERS

     desktop   > 1024px   the base rules — home.css, style.css, common.css
     tablet   <= 1024px   tablet.css
     mobile   <=  640px   mobile.css

   Desktop is the base: home.css and style.css are written for the wide layout
   with no media query around them, and the two files below take it apart.
   There are no min-width queries anywhere in the site — a rule that used to
   sit in one (the home page's 320px rail, the masthead leaderboard) is now
   plain desktop CSS that tablet.css undoes.

   LINK IT LAST
   Order is the whole point. tablet.css and mobile.css override base rules with
   the same selector and the same specificity, so they only win by coming
   later. Put this <link> after every other stylesheet on the page:

     index.html            home.css, then responsive.css
     Top_Stories/*.html    style.css, sm.css, then responsive.css
     issues page           style.css, issues.css, then responsive.css
     editor's note page    style.css, editorial.css, then responsive.css

   And within this file, tablet before mobile, for the same reason: both use
   max-width, both match a phone, and the narrower one has to win.

   ADDING A RESPONSIVE RULE
   It goes in tablet.css or mobile.css — not back into the sheet it belongs to.
   The page stylesheets have no @media blocks left, and keeping it that way is
   what makes "where does this width change come from?" a one-file answer. If
   a section needs to bend somewhere between the two breakpoints, make it
   fluid — auto-fill, minmax(), clamp() — rather than adding a third tier.
   ========================================================================== */

@import url("tablet.css");
@import url("mobile.css");

/* ==========================================================================
   NOT ABOUT WIDTH
   These two are media queries but not breakpoints, so they stay here rather
   than being filed under a device.
   ========================================================================== */

/* The LIVE dot in the utility strip pulses on every page, so the opt-out has
   to ship on every page as well. */
@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}

/* Print: drop the chrome, the ads and the rails, and let the story have the
   paper. Shared by every page — an article prints the same as the home page. */
@media print {
  .utility-bar, .primary-nav, .ad-strip, .rail, .read-next, .newsletter-band,
  .site-footer, .totop, .ad, .share, .article-share, .nav-toggle {
    display: none !important;
  }
  body { background: var(--color-white); font-size: 12pt; }
  .article { border: 0; }
}