/* tariqsp.com, responsive utilities only. All visual styling lives inline on the
   elements, taken from the Modernist tokens in _ds/.../styles.css */
body { margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
*,*::before,*::after { box-sizing:border-box; }
a { color:var(--color-accent-700); text-underline-offset:3px; }
a:hover { color:var(--color-accent); }
:focus { outline:none; }
:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
::selection { background:color-mix(in srgb, var(--color-accent) 30%, transparent); }
img { display:block; max-width:100%; }
[data-newsletter] input::placeholder { color:rgba(243,242,242,0.72); opacity:1; }
[data-ph] { background-image:repeating-linear-gradient(135deg,#e3e1e1 0 8px,#eeecec 8px 16px); }

@media (max-width: 1080px) {
  [data-grid="4"] { grid-template-columns:repeat(2,1fr) !important; }
  [data-grid="5"] { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width: 960px) {
  [data-nav="desktop"] { display:none !important; }
  [data-burger="1"] { display:flex !important; }
  [data-cta="header"] { display:none !important; }
  [data-search-label="1"] { display:none; }
  [data-hero="1"], [data-two="1"], [data-side="1"] { grid-template-columns:1fr !important; }
  /* The 40px stacking gap is for layout wrappers only. Grids that draw their rules
     with gap:2px over a divider background must keep their 2px. */
  [data-hero="1"]:not([style*="gap:2px"]):not([style*="gap: 2px"]),
  [data-two="1"]:not([style*="gap:2px"]):not([style*="gap: 2px"]),
  [data-side="1"]:not([style*="gap:2px"]):not([style*="gap: 2px"]) { gap:40px !important; }
  [data-grid="3"] { grid-template-columns:1fr !important; }
  [data-strip="1"] { grid-template-columns:1fr !important; }
  [data-strip="1"] > a { border-right:0 !important; padding:24px 0 !important;
    border-bottom:1px solid color-mix(in srgb, var(--color-text) 25%, transparent); }
  [data-footer="1"] { grid-template-columns:1fr 1fr !important; }
  [data-ebook-cover] { width:100% !important; max-width:340px; }
  [data-about-hero] { width:100% !important; max-width:420px; }
  [data-sticky-aside] { position:static !important; }
}
@media (max-width: 560px) {
  [data-grid="4"], [data-grid="5"] { grid-template-columns:1fr !important; }
  [data-footer="1"] { grid-template-columns:1fr !important; }
}

@media (max-width: 820px) {
  [data-grid="2"] { grid-template-columns:1fr !important; }
  [data-two="1"] { grid-template-columns:1fr !important; }
  [data-two="1"]:not([style*="gap:2px"]):not([style*="gap: 2px"]) { gap:36px !important; }
  [data-footer="1"] { grid-template-columns:1fr 1fr !important; }
  table, .table { display:block; overflow-x:auto; }
}
@media (max-width: 640px) {
  [data-hero="1"] { padding-top:44px !important; padding-bottom:44px !important; }
  [data-ebook-cover] { max-width:100%; }
  h1 { letter-spacing:-0.02em; }
  [data-grid="3"], [data-grid="4"], [data-grid="5"] { grid-template-columns:1fr !important; }
}
@media (max-width: 420px) {
  body { font-size:15px; }
}

/* Fillers that close the last row of odd-count grids drawn with the
   divider-background technique, so no bare grey cell shows. */
[data-fill="odd5"] { display:none; }
@media (min-width: 641px) and (max-width: 1080px) {
  [data-fill="odd5"] { display:block; }
}
[data-fill="odd2"] { display:block; }
[data-fill="odd3"] { display:block; }
@media (max-width: 960px) {
  [data-fill="odd2"] { display:none; }
  [data-fill="odd3"] { display:none; }
}

[data-back-to-top] { transition:background 140ms linear; }
@media (max-width: 640px) {
  [data-back-to-top] { right:14px; bottom:14px; width:48px; height:48px; }
}
@media print { [data-back-to-top] { display:none !important; } }