/* Mobile / responsive overrides. Linked into every page's . Inline styles win over normal external rules, so these use !important where they must override an inline value. */ /* Home hero: stack image above text on narrow screens */ @media (max-width:860px){ [data-rhero]{ grid-template-columns:1fr !important; gap:30px !important; } [data-rheroimg]{ max-width:300px !important; } [data-rrow]{ grid-template-columns:1fr !important; gap:6px !important; } [data-rrow] [data-rrowtag]{ justify-self:start; } } /* Blog list card: stack the thumbnail under the text on narrow screens */ @media (max-width:640px){ [data-rcard]{ flex-direction:column !important; gap:18px !important; } [data-rcardimg]{ width:100% !important; height:180px !important; order:-1 !important; } } /* Home recent-list category pill should hug its content, not stretch full width */ @media (max-width:860px){ [data-rrow] [data-rrowtag]{ justify-self:start !important; } } /* Album masonry: fewer columns as the viewport narrows */ @media (max-width:1000px){ [data-rmasonry]{ columns:3 !important; } } @media (max-width:700px){ [data-rmasonry]{ columns:2 !important; } } @media (max-width:460px){ [data-rmasonry]{ columns:1 !important; } } /* Lightbox controls sit closer on small screens */ @media (max-width:600px){ [data-rlbbtn]{ width:40px !important; height:40px !important; } } /* Home recent posts: reduce bottom gap on mobile */ @media (max-width:640px){ [data-rrecent]{ padding-bottom:48px !important; } } /* Tools grid: collapse to 1 column on narrow screens */ @media (max-width:700px){ [data-rtoolsgrid]{ grid-template-columns:1fr !important; } } /* Nav: collapse the inline primary links + palette dots into the More menu */ @media (max-width:820px){ [data-rprimary]{ display:none !important; } [data-rdots]{ display:none !important; } [data-rmenuprimary]{ display:flex !important; } [data-rmenudiv]{ display:block !important; } } @media (min-width:821px){ [data-rmenuprimary]{ display:none !important; } [data-rmenudiv]{ display:none !important; } }