/* Site-wide utility classes and fluid type scale, carried over verbatim from the "Global Styles" embed Webflow injected into every page's . The compiled webflow.css / genuine-article-magazine.webflow.css files (linked in layout.js) don't include this — it lived in the page HTML itself. The original port had this as five separate max-width media queries, each with its own independent calc() formula (one per Webflow responsive breakpoint). They didn't agree with each other at the breakpoints where control passes from one to the next, so the root font-size (and every rem-based size sitewide — headings, spacing, the navbar's logo/button) jumped abruptly at exactly 1440/1441px, 991/992px, 767/768px, and 478/479px — as much as +96% for a single pixel of viewport width at the 478/479 seam. That produced real, visible bugs: a mobile menu-button navbar-height dip around 480-580px (worked around separately below) and a "too small, especially at iPad" look across 768-991px, where the root size troughed at little over half its neighboring values (~7.4-12.4px vs ~16px on either side). Replaced with a single clamp(), continuous by construction — there's no seam left to jump at. Anchored at (375px, 15.383px) and (1440px, 16px): both are widths whose current rendering was already implicitly tested and never flagged as wrong throughout this project (375px is squarely inside the old scale's least-broken tier; 1440px+ was already a flat 16px). Interpolating between only those two trusted points means common phone widths and desktop are close to unchanged, while the previously undersized iPad range now lands smoothly between them (768px: 12.4px -> 15.6px) instead of in a trough. */ html { font-size: clamp(15px, calc(15.165746px + 0.057934vw), 16px); scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } img, svg { display: block; } /* Ensure all elements inherit the color from its parent */ a, .w-input, .w-select, .w-tab-link, .w-nav-link, .w-nav-brand, .w-dropdown-btn, .w-dropdown-toggle, .w-slider-arrow-left, .w-slider-arrow-right, .w-dropdown-link { color: inherit; text-decoration: inherit; font-size: inherit; } /* Focus state style for keyboard navigation for the focusable elements */ *[tabindex]:focus-visible, input[type='file']:focus-visible { outline: 0.125rem solid #4d65ff; outline-offset: 0.125rem; } /* Get rid of top margin on first element in any rich text element */ .w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child { margin-top: 0 !important; } /* Get rid of bottom margin on last element in any rich text element */ .w-richtext > :last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child { margin-bottom: 0 !important; } /* Prevent all click and hover interaction with an element */ .pointer-events-off { pointer-events: none; } /* Enables all click and hover interaction with an element */ .pointer-events-on { pointer-events: auto; } /* Create a class of .div-square which maintains a 1:1 dimension of a div */ .div-square::after { content: ''; display: block; padding-bottom: 100%; } /* Make sure containers never lose their center alignment */ .container-medium, .container-small, .container-large { margin-right: auto !important; margin-left: auto !important; } /* Apply "..." after 3 lines of text */ .text-style-3lines { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* Apply "..." after 2 lines of text */ .text-style-2lines { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Adds inline flex display */ .display-inlineflex { display: inline-flex; } /* These classes are never overwritten */ .hide { display: none !important; } /* Remove default Webflow chevron from form select */ select { -webkit-appearance: none; } @media screen and (max-width: 991px) { .hide, .hide-tablet { display: none !important; } } @media screen and (max-width: 767px) { .hide-mobile-landscape { display: none !important; } } @media screen and (max-width: 479px) { .hide-mobile { display: none !important; } } .margin-0 { margin: 0rem !important; } .padding-0 { padding: 0rem !important; } .spacing-clean { padding: 0rem !important; margin: 0rem !important; } .margin-top { margin-right: 0rem !important; margin-bottom: 0rem !important; margin-left: 0rem !important; } .padding-top { padding-right: 0rem !important; padding-bottom: 0rem !important; padding-left: 0rem !important; } .margin-right { margin-top: 0rem !important; margin-bottom: 0rem !important; margin-left: 0rem !important; } .padding-right { padding-top: 0rem !important; padding-bottom: 0rem !important; padding-left: 0rem !important; } .margin-bottom { margin-top: 0rem !important; margin-right: 0rem !important; margin-left: 0rem !important; } .padding-bottom { padding-top: 0rem !important; padding-right: 0rem !important; padding-left: 0rem !important; } .margin-left { margin-top: 0rem !important; margin-right: 0rem !important; margin-bottom: 0rem !important; } .padding-left { padding-top: 0rem !important; padding-right: 0rem !important; padding-bottom: 0rem !important; } .margin-horizontal { margin-top: 0rem !important; margin-bottom: 0rem !important; } .padding-horizontal { padding-top: 0rem !important; padding-bottom: 0rem !important; } .margin-vertical { margin-right: 0rem !important; margin-left: 0rem !important; } .padding-vertical { padding-right: 0rem !important; padding-left: 0rem !important; } /* Apply "..." at 100% width */ .truncate-width { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Removes native scrollbar */ .no-scrollbar { -ms-overflow-style: none; overflow: -moz-scrollbars-none; } .no-scrollbar::-webkit-scrollbar { display: none; } .is-list-loading { opacity: 0; transition: all 0.3s ease; } /* The mobile menu toggle was a

in the original Webflow markup, ported to a real