:root{
/* Mobile-first breakpoints. Written as tokens for JS/container queries;
   media queries use the literal values. 480 / 768 / 1024 / 1280 / 1536 */
--bp-sm:480px; /* @kind other */
--bp-md:768px; /* @kind other */
--bp-lg:1024px; /* @kind other */
--bp-xl:1280px; /* @kind other */
--bp-2xl:1536px; /* @kind other */

--container-max:1440px; /* @kind spacing */
--container-text:72ch; /* @kind spacing */
--container-wide:1680px; /* @kind spacing */
--grid-columns:12; /* @kind other */
--grid-gap:clamp(1rem,.5rem + 1.5vw,2rem); /* @kind spacing */

--header-height:72px; /* @kind spacing */
--header-height-compact:60px; /* @kind spacing */
--utility-bar-height:36px; /* @kind spacing */

/* asymmetric editorial splits — the house layout signature.
   Mobile-first: every split is ONE column until 1024px, so any grid that
   uses these tokens stacks on phones and tablets automatically. */
--split-editorial:minmax(0,1fr); /* @kind other */
--split-editorial-reverse:minmax(0,1fr); /* @kind other */
--split-feature:minmax(0,1fr); /* @kind other */
--offset-overlap:clamp(1.5rem,4vw,5rem); /* @kind spacing */
--tap-min:44px; /* @kind spacing */
}
@media (min-width:1024px){:root{
--split-editorial:minmax(0,7fr) minmax(0,5fr); /* @kind other */
--split-editorial-reverse:minmax(0,5fr) minmax(0,7fr); /* @kind other */
--split-feature:minmax(0,8fr) minmax(0,4fr); /* @kind other */
}}
@media (max-width:767.98px){:root{
--header-height:60px; /* @kind spacing */
}}