/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ad99a4c1cf58.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/4f12a1a0ae41.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/e3000ed81c87.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/a3b94a5a967d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/52ea38a7d8d6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ad99a4c1cf58.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/4f12a1a0ae41.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/e3000ed81c87.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/a3b94a5a967d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/52ea38a7d8d6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/c18dbd11ca5b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ac78c6c2ff98.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/8a92de9f3770.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/a9e49ee5f58f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/74db058fe06d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/c18dbd11ca5b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ac78c6c2ff98.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/8a92de9f3770.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/a9e49ee5f58f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/74db058fe06d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/c18dbd11ca5b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ac78c6c2ff98.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/8a92de9f3770.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/a9e49ee5f58f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/74db058fe06d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/c18dbd11ca5b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ac78c6c2ff98.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/8a92de9f3770.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/a9e49ee5f58f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/74db058fe06d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/dced7149525e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/7de3c5b4c5e7.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/7af61c95c207.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/6cd1f63be011.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/8462a12a7c78.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/a5a4517fcbf1.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/4f8405520dc8.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fe6ea7dc48cb.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/3f2b7e2b2ef8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/4f8405520dc8.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fe6ea7dc48cb.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/3f2b7e2b2ef8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/9b967522bc5a.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/d30ef885441c.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/e599ceb478c4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/9b967522bc5a.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/d30ef885441c.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/e599ceb478c4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/9b967522bc5a.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/d30ef885441c.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/e599ceb478c4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/9b967522bc5a.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/d30ef885441c.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/e599ceb478c4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/4e8fa4bb2d0f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/0309594de5e1.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/4e8fa4bb2d0f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/0309594de5e1.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/4e8fa4bb2d0f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/0309594de5e1.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


  @font-face { font-family: 'ET Book'; font-style: normal; font-weight: 400; src: url("fonts/a0e7e6f48348.woff") format('woff'); font-display: swap; }
  #wos-root { --bg:#FCFBF7; --fg:#060606; --faded:#5B5F66; --border:#E6E3DC; --tileborder:#CFCABD; --accent:#E34234; --hover:#F4F1EA; --imgline:var(--fg); }
  #wos-root [data-tile] { text-decoration:none; }
  #wos-root [data-tile] [data-dot] { opacity:0; transition:opacity 0.18s ease; }
  #wos-root [data-tile] [data-label] { transition:transform 0.18s ease; }
  #wos-root [data-tile]:hover { background:var(--hover); }
  #wos-root [data-tile]:hover [data-dot] { opacity:1; }
  #wos-root [data-tile]:hover [data-label] { transform:translateX(17px); }
  #wos-root[data-theme="alt"] { --bg:#000000; --fg:#FFFFFF; --faded:rgba(255,255,255,0.56); --border:rgba(255,255,255,0.14); --tileborder:rgba(255,255,255,0.24); --accent:#E34234; --hover:rgba(255,255,255,0.06); --imgline:rgba(255,255,255,0.32); }
  /* Safety net: a re-render can momentarily drop #wos-root's data-theme (it is
     restored in componentDidUpdate). Keying the dark tokens off the never-rebuilt
     <html data-theme="alt"> as well means the surface never flashes back to paper. */
  html[data-theme="alt"] #wos-root { --bg:#000000; --fg:#FFFFFF; --faded:rgba(255,255,255,0.56); --border:rgba(255,255,255,0.14); --tileborder:rgba(255,255,255,0.24); --accent:#E34234; --hover:rgba(255,255,255,0.06); --imgline:rgba(255,255,255,0.32); }
  /* DEFAULT: image frames = black in light, muted #41463F in dark; nav tiles = stronger both modes */
  /* tweak: 'prev' = faint hairline on BOTH nav tiles and image-card frames */
  #wos-root[data-tilestroke="prev"] { --tileborder:var(--border); --imgline:var(--border); }
  /* tweak: 'white' = original glaring-white dark image frames (reference) */
  #wos-root[data-theme="alt"][data-tilestroke="white"] { --imgline:var(--fg); }

  /* Kill only the mobile browser's tap-flash (the blue/grey sheen). Real links
     keep their native long-press menu — we no longer suppress touch-callout. */
  * { -webkit-tap-highlight-color: transparent; }

  /* ===== card links (semantic "stretched link") =====
     A card's title is a real <a class="cardlink">; its ::after overlay covers
     the whole .wos-card so a click/tap anywhere navigates to the article. The
     nested category chip (.catlink) sits above the overlay so it stays its own
     link (→ topic). Title reddens on hover (real pointers) and press/hold
     (touch, via :active, which clears on release) to nudge the tap. */
  .wos-card { position: relative; }
  .cardlink { color: inherit; text-decoration: none; transition: color 0.2s; }
  .cardlink::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .catlink { position: relative; z-index: 2; color: inherit; text-decoration: none; }
  @media (hover: hover) { .cardlink:hover { color: var(--accent); } }
  .cardlink:active { color: var(--accent); }

  /* Search result rows are whole-row real links (.wos-hit). Hover/press cue. */
  .wos-hit { transition: background 0.18s; }
  .wos-hit [data-title] { transition: color 0.18s; }
  @media (hover: hover) { .wos-hit:hover { background: var(--hover); } .wos-hit:hover [data-title] { color: var(--accent); } }
  .wos-hit:active [data-title] { color: var(--accent); }

  /* ===== menu button icon (CSS bars, morphs to X) =====
     A 4-bar hamburger: bars 1 & 4 are the full top/bottom lines; bars 2 & 3 are
     two overlapping SHORT bars stacked at the centre, so at rest they read as a
     single 70%-width middle line. On open, the top/bottom fade inward and the
     two middle bars scissor into an X — the X forms *inside* the hamburger
     footprint, where the middle line was (cf. worksinprogress.co). */
  .wos-ham { display:inline-block; position:relative; width:20px; height:14px; }
  .wos-ham i {
    position:absolute; height:2px; background:currentColor; border-radius:2px;
    transition:transform .32s cubic-bezier(.2,.72,.28,1), opacity .2s ease, width .28s ease;
  }
  .wos-ham i:nth-child(1) { top:1px; left:0; width:100%; }
  .wos-ham i:nth-child(4) { bottom:1px; left:0; width:100%; }
  .wos-ham i:nth-child(2),
  .wos-ham i:nth-child(3) { top:50%; left:50%; width:70%; transform:translate(-50%,-50%) rotate(0deg); }
  [data-menubtn][data-open] .wos-ham i:nth-child(1) { opacity:0; transform:translateY(4px); }
  [data-menubtn][data-open] .wos-ham i:nth-child(4) { opacity:0; transform:translateY(-4px); }
  [data-menubtn][data-open] .wos-ham i:nth-child(2) { width:100%; transform:translate(-50%,-50%) rotate(45deg); }
  [data-menubtn][data-open] .wos-ham i:nth-child(3) { width:100%; transform:translate(-50%,-50%) rotate(-45deg); }

  /* ===== device viewport preview ===== */
  [data-stage] { display: contents; }
  [data-stage][data-vp="phone"], [data-stage][data-vp="tablet"], [data-stage][data-vp="tablet-ls"] {
    display: block; min-height: 100vh; box-sizing: border-box;
    background: repeating-linear-gradient(45deg,#26282b,#26282b 2px,#222427 2px,#222427 14px);
    padding: 44px 16px; overflow-x: auto;
  }
  [data-stage][data-vp="phone"] [data-frame] {
    width: 393px; height: 852px; margin: 0 auto; background: #0a0a0a;
    border-radius: 56px; padding: 13px; box-sizing: border-box;
    box-shadow: 0 50px 90px -20px rgba(0,0,0,0.65), 0 0 0 2px #2c2c2e, inset 0 0 0 2px #000;
    position: relative;
  }
  [data-stage][data-vp="tablet"] [data-frame] {
    width: 834px; max-width: 100%; height: 1112px; margin: 0 auto; background: #0a0a0a;
    border-radius: 34px; padding: 16px; box-sizing: border-box;
    box-shadow: 0 50px 90px -20px rgba(0,0,0,0.65), 0 0 0 2px #2c2c2e, inset 0 0 0 2px #000;
    position: relative;
  }
  [data-stage][data-vp="tablet-ls"] [data-frame] {
    width: 1112px; max-width: 100%; height: 834px; margin: 0 auto; background: #0a0a0a;
    border-radius: 34px; padding: 16px; box-sizing: border-box;
    box-shadow: 0 50px 90px -20px rgba(0,0,0,0.65), 0 0 0 2px #2c2c2e, inset 0 0 0 2px #000;
    position: relative;
  }
  [data-stage][data-vp="phone"] [data-frame]::before {
    content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
    width: 124px; height: 33px; background: #000; border-radius: 0 0 20px 20px; z-index: 50;
  }
  [data-stage][data-vp="phone"] [data-scroll] { border-radius: 44px; }
  [data-stage][data-vp="tablet"] [data-scroll] { border-radius: 20px; }
  [data-stage][data-vp="tablet-ls"] [data-scroll] { border-radius: 20px; }
  [data-stage][data-vp="phone"] [data-scroll], [data-stage][data-vp="tablet"] [data-scroll], [data-stage][data-vp="tablet-ls"] [data-scroll] {
    width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; background: var(--bg); position: relative;
    /* establish containing block so [data-menu]'s position:fixed resolves to the
       device screen (and is clipped to its rounded corners), not the window */
    transform: translateZ(0);
  }
  [data-stage][data-vp="phone"] #wos-root, [data-stage][data-vp="tablet"] #wos-root, [data-stage][data-vp="tablet-ls"] #wos-root { min-height: 100%; }

  /* condensed (scrolled) masthead height: compact on phone/tablet, a taller
     ~83px bar on desktop so the sticky header matches the reader's. */
  header#masthead.mast-condensed { padding-top: 14px !important; padding-bottom: 14px !important; }
  [data-vp="desktop"] header#masthead.mast-condensed { padding-top: 24px !important; padding-bottom: 24px !important; }

  /* ---- PHONE: single-column architecture ---- */
  /* ---- PHONE masthead: static single-line lockup ----
     Globe on the left, wordmark centred to the viewport, menu button on the
     right — one fixed layout, no scroll morph (the .mast-condensed selectors
     carry identical values so scrolling changes nothing). Only the single-line
     lockup is used on phone (the stacked variant is hidden). Globe + wordmark stay
     inside the home link, so either navigates home. Everything is positioned
     within the sticky header (its positioning context); desktop/tablet and the
     reader keep the shared lockup untouched. */
  [data-vp="phone"] header#masthead [data-mast="stacked"] { display: none !important; }
  /* Globe policy: hidden by default (wordmark-only). Desktop/tablet keep it hidden
     — the wordmark is left-aligned and the right-side top-nav balances it, so a
     centred wordmark would fight the nav. Phone RE-SHOWS the globe in the left
     corner with the wordmark centred (see the phone globe rule below): centring
     reads well on phone precisely because there's no top-nav to balance against,
     and the corner globe anchors the otherwise-sparse left. */
  header#masthead #g-single { display: none !important; }
  /* phone lockup container: neutral block spanning the header so the globe and
     wordmark position absolutely against the sticky header (no transform here, or
     it would become the containing block and re-trap the absolute children). */
  [data-vp="phone"] header#masthead [data-mast="single"] {
    display: block !important; position: static !important; transform: none !important;
  }
  [data-vp="phone"] header#masthead,
  [data-vp="phone"] header#masthead.mast-condensed {
    padding: 0 !important;
    min-height: 66px;
    /* full-bleed: break out of the 8px body margin so the bottom divider runs
       edge to edge. */
    margin-left: -8px !important; margin-right: -8px !important;
  }

  /* globe: re-shown on phone, tucked into the left corner, vertically centred */
  [data-vp="phone"] header#masthead #g-single,
  [data-vp="phone"] header#masthead.mast-condensed #g-single {
    display: inline-flex !important;
    position: absolute !important; left: 14px !important; top: 50%;
    transform: translateY(-50%); margin: 0 !important; flex: none;
    width: 44px !important; height: 44px !important;
  }

  /* wordmark: centred across the full header width (globe sits under its left edge,
     menu under its right — the wordmark spans between them, centred). */
  [data-vp="phone"] header#masthead [data-mast="single"] > span:last-child,
  [data-vp="phone"] header#masthead.mast-condensed [data-mast="single"] > span:last-child {
    position: absolute !important; left: 50% !important; right: auto !important;
    top: 50%; transform: translate(-50%, -50%);
    font-size: 28px !important; line-height: 1.05 !important;
    text-align: center !important; white-space: nowrap;
  }

  /* menu button: right, dropped so the bottom line of the icon sits on the
     wordmark's baseline (bottom-aligned with the wordmark, measured). */
  [data-vp="phone"] header#masthead > span,
  [data-vp="phone"] header#masthead.mast-condensed > span {
    position: absolute !important; right: 20px;
    top: 50%; transform: translateY(calc(-50% + 4px));
  }

  /* ---- DESKTOP / TABLET masthead: single-line centred lockup (matches the phone
     header). The tall stacked hero is removed at every non-phone width; the header
     is one fixed centred bar — globe left, wordmark centred, menu right — with no
     scroll morph (the .mast-condensed selectors carry identical values). */
  [data-vp="desktop"] header#masthead [data-mast="stacked"],
  [data-vp="tablet"] header#masthead [data-mast="stacked"],
  [data-vp="tablet-ls"] header#masthead [data-mast="stacked"] { display: none !important; }
  /* container: neutral block spanning the header so the globe and wordmark position
     absolutely against the sticky header (no transform, or it becomes their
     containing block and re-traps them). */
  [data-vp="desktop"] header#masthead [data-mast="single"],
  [data-vp="tablet"] header#masthead [data-mast="single"],
  [data-vp="tablet-ls"] header#masthead [data-mast="single"] { display: block !important; position: static !important; transform: none !important; }
  /* stable, non-morphing bar height in both scroll states */
  [data-vp="desktop"] header#masthead,
  [data-vp="desktop"] header#masthead.mast-condensed,
  [data-vp="tablet"] header#masthead,
  [data-vp="tablet"] header#masthead.mast-condensed,
  [data-vp="tablet-ls"] header#masthead,
  [data-vp="tablet-ls"] header#masthead.mast-condensed {
    /* The globe (60px) and wordmark are position:absolute, so they don't give the
       header any height — without a floor the bar collapses to the little hamburger
       (~31px) and the 60px globe + wordmark overflow, the divider cutting through
       them (worst with the nav hidden while the menu is open). Floor it at 76px so it
       always contains the globe with breathing room. */
    box-sizing: border-box !important;
    padding-top: 8px !important; padding-bottom: 8px !important; min-height: 80px !important;
    /* adopt the phone header's edge treatment: full-bleed (break out of the body's
       8px margin so the divider runs edge to edge) with the globe hugging the left
       and the menu the right, instead of inset to the 1100px content column. */
    /* Globe + menu align to the CONTENT gutter. The header is full-bleed
       (margin:-8px breaks out of the body's 8px margin so the divider reaches the
       edge), so its padding must be the content gutter + 8px to land the globe and
       menu at the same x as the sections below. Keep this = (section gutter + 8). */
    padding-left: 58px !important; padding-right: 58px !important;
    margin-left: -8px !important; margin-right: -8px !important;
  }
  /* globe: re-shown, tucked into the left corner at the content gutter, vertically
     centred (overrides the wordmark-only display:none). */
  [data-vp="desktop"] header#masthead #g-single,
  [data-vp="tablet"] header#masthead #g-single,
  [data-vp="tablet-ls"] header#masthead #g-single {
    display: inline-flex !important;
    position: absolute !important; left: 58px !important; top: 50%;
    transform: translateY(-50%); margin: 0 !important;
    width: 70px !important; height: 70px !important;
  }
  /* iPad portrait (tablet) uses a 24px content gutter, not 50px, so the globe must
     sit at 24 + 8 (full-bleed compensation) = 32px to mirror the content — the
     shared 58px above is for the 50px-gutter desktop/tablet-ls widths. */
  [data-vp="tablet"] header#masthead #g-single { left: 32px !important; }
  /* wordmark: centred on the header. Shrink-wrapped (left:50% + translate) so its
     box is only as wide as the text — a full-width box (left:0;right:0) would sit on
     top of the top-nav and swallow its clicks. */
  [data-vp="desktop"] header#masthead [data-mast="single"] > span:last-child,
  [data-vp="tablet"] header#masthead [data-mast="single"] > span:last-child,
  [data-vp="tablet-ls"] header#masthead [data-mast="single"] > span:last-child {
    position: absolute !important; left: 50% !important; right: auto !important;
    /* Optical raise: cap centres already align with the nav, but the wordmark's
       lowercase mass sits low, so lift it ~2px to centre its VISUAL mass on the
       shared midline (else the nav reads as sitting high on the wordmark). */
    top: 50%; transform: translate(-50%, calc(-50% - 2px));
    padding: 0 !important;
    font-size: 45px !important; line-height: 1 !important; white-space: nowrap;
    text-align: center !important;
  }
  /* Keep the right-side cluster (nav, search bar, hamburger) above the absolutely-
     positioned centred wordmark so it always receives clicks — the wordmark's box,
     even shrink-wrapped, can still reach under the nav at narrower widths. */
  header#masthead .mast-right { position: relative; z-index: 3; }
  header#masthead [data-mast="single"] > span:last-child { z-index: 1; }
  /* menu button: bigger icon, still shorter than the globe so the bar height is
     unaffected (scale keeps it out of layout flow) */
  /* Enlarge the hamburger by real dimensions, NOT transform:scale — scaling also
     multiplies the 2px line thickness and pushes the bars onto fractional pixels, so
     they anti-alias unevenly (the bottom line looked thicker). Sizing the box keeps
     the lines a crisp, even 2px and gives the hamburger enough width to bookend the
     globe on the right. */
  [data-vp="desktop"] header#masthead .wos-ham,
  [data-vp="tablet"] header#masthead .wos-ham,
  [data-vp="tablet-ls"] header#masthead .wos-ham {
    width: 40px !important; height: 20px !important;
  }
  [data-vp="desktop"] header#masthead .wos-ham i,
  [data-vp="tablet"] header#masthead .wos-ham i,
  [data-vp="tablet-ls"] header#masthead .wos-ham i {
    height: 2px !important;
  }
  /* Middle line: the default centres it (top:50% + translateY), which lands a
     fractional-thickness line on a half-pixel so it renders soft and looks bigger
     than the crisp edge-pinned top/bottom lines. Pin it to a whole pixel (top:11px,
     no translateY) so it sits on the grid and renders identically crisp. */
  [data-vp="desktop"] header#masthead .wos-ham i:nth-child(2),
  [data-vp="desktop"] header#masthead .wos-ham i:nth-child(3),
  [data-vp="tablet"] header#masthead .wos-ham i:nth-child(2),
  [data-vp="tablet"] header#masthead .wos-ham i:nth-child(3),
  [data-vp="tablet-ls"] header#masthead .wos-ham i:nth-child(2),
  [data-vp="tablet-ls"] header#masthead .wos-ham i:nth-child(3) {
    top: 9px !important; transform: translateX(-50%) rotate(0deg) !important;
  }
  /* keep the X morph working with the new (translateY-free) centring */
  [data-vp="desktop"] header#masthead [data-menubtn][data-open] .wos-ham i:nth-child(2),
  [data-vp="tablet"] header#masthead [data-menubtn][data-open] .wos-ham i:nth-child(2),
  [data-vp="tablet-ls"] header#masthead [data-menubtn][data-open] .wos-ham i:nth-child(2) {
    transform: translateX(-50%) rotate(45deg) !important;
  }
  [data-vp="desktop"] header#masthead [data-menubtn][data-open] .wos-ham i:nth-child(3),
  [data-vp="tablet"] header#masthead [data-menubtn][data-open] .wos-ham i:nth-child(3),
  [data-vp="tablet-ls"] header#masthead [data-menubtn][data-open] .wos-ham i:nth-child(3) {
    transform: translateX(-50%) rotate(-45deg) !important;
  }

  /* ===== Desktop top-nav + unfolding header search =====
     Nav (Search/About/Archive/Newsletter) shows only on non-phone; the hamburger
     stays. Clicking Search adds .hdr-search-open to the header: the nav collapses
     (max-width -> 0) and the search bar unfolds (max-width 0 -> open) in its place.
     Both hidden on phone (mobile keeps the hamburger only). */
  [data-topnav], [data-hdr-searchbar] { display: none; }
  [data-vp="desktop"] header#masthead [data-topnav],
  [data-vp="tablet"] header#masthead [data-topnav],
  [data-vp="tablet-ls"] header#masthead [data-topnav] {
    display: flex; max-width: 600px; opacity: 1; overflow: hidden;
    transition: max-width .38s cubic-bezier(.16,1,.3,1), opacity .2s ease;
  }
  [data-vp="desktop"] header#masthead [data-hdr-searchbar],
  [data-vp="tablet"] header#masthead [data-hdr-searchbar],
  [data-vp="tablet-ls"] header#masthead [data-hdr-searchbar] {
    display: flex; max-width: 0; opacity: 0; overflow: hidden; pointer-events: none;
    transition: max-width .38s cubic-bezier(.16,1,.3,1), opacity .25s ease;
  }
  [data-vp="desktop"] header#masthead.hdr-search-open [data-topnav],
  [data-vp="tablet"] header#masthead.hdr-search-open [data-topnav],
  [data-vp="tablet-ls"] header#masthead.hdr-search-open [data-topnav] {
    max-width: 0; opacity: 0; pointer-events: none;
  }
  [data-vp="desktop"] header#masthead.hdr-search-open [data-hdr-searchbar],
  [data-vp="tablet"] header#masthead.hdr-search-open [data-hdr-searchbar],
  [data-vp="tablet-ls"] header#masthead.hdr-search-open [data-hdr-searchbar] {
    max-width: 400px; opacity: 1; pointer-events: auto;
  }
  @media (hover: hover) {
    /* Hover -> accent. The transition lives on :hover only (not the base), so the
       colour eases IN on hover but snaps back OUT instantly when the pointer leaves
       — no lingering fade. (The inline transition was removed from the markup for
       the same reason.) */
    [data-vp="desktop"] header#masthead .topnav-link:not(.topnav-off):hover,
    [data-vp="tablet"] header#masthead .topnav-link:not(.topnav-off):hover,
    [data-vp="tablet-ls"] header#masthead .topnav-link:not(.topnav-off):hover,
    header#masthead [data-hdr-search-close]:hover { color: var(--accent); transition: color 0.15s; }
  }
  /* When the hamburger menu is open, hide the top-nav + header search bar so the menu
     isn't duplicated in the header behind it — only the globe, wordmark and the X show. */
  header#masthead.menu-open [data-topnav],
  header#masthead.menu-open [data-hdr-searchbar] { display: none !important; }

  /* Below 1280px the header can't fit the top-nav + an unfolding search bar next to
     the centred wordmark — iPad portrait (~768) and narrow / 1024 desktop windows
     run out of room, and the search bar in particular has nowhere to go. So fall back
     to the mobile chrome there: hamburger only, with search living inside the menu.
     (>=1280 keeps the full top-nav; phone is already hamburger-only via its vp rules.) */
  @media (max-width: 1279px) {
    [data-vp="tablet"] header#masthead [data-topnav],
    [data-vp="tablet-ls"] header#masthead [data-topnav],
    [data-vp="desktop"] header#masthead [data-topnav],
    [data-vp="tablet"] header#masthead [data-hdr-searchbar],
    [data-vp="tablet-ls"] header#masthead [data-hdr-searchbar],
    [data-vp="desktop"] header#masthead [data-hdr-searchbar] { display: none !important; }
    /* re-show the in-menu search that the desktop/tablet rule otherwise hides
       (form[...] adds an element to out-specify that hide rule regardless of order),
       and let it span the full menu width (drop the 540px cap) so it reaches under
       the X, the way it does on mobile — instead of stopping in the corner. */
    [data-vp="tablet"] [data-menu] form[data-msearch],
    [data-vp="tablet-ls"] [data-menu] form[data-msearch],
    [data-vp="desktop"] [data-menu] form[data-msearch] { display: flex !important; max-width: none !important; }
  }

  /* ---- Full-width body: adopt the phone gutters (8px) for the rest of the page,
     not just the header. Drop the 1100px content column so sections and the footer
     run edge to edge like the masthead. Only the horizontal padding + max-width
     change; each section keeps its own vertical padding. Text blocks are already
     capped at their own max-width, so measures stay readable. */
  [data-vp="desktop"] section,
  [data-vp="tablet"] section,
  [data-vp="tablet-ls"] section {
    max-width: none !important;
    padding-left: 50px !important; padding-right: 50px !important;
  }
  [data-vp="desktop"] [data-fbar], [data-vp="desktop"] [data-fbot],
  [data-vp="tablet"] [data-fbar], [data-vp="tablet"] [data-fbot],
  [data-vp="tablet-ls"] [data-fbar], [data-vp="tablet-ls"] [data-fbot] {
    padding-left: 50px !important; padding-right: 50px !important;
  }
  /* Cap the whole body (masthead + content, all inside #wos-root) at 1600px and
     centre it. Below 1600 the app runs full-width with the 8px gutters above;
     past 1600 it becomes a centred column. The fixed menu overlay is position:fixed
     so it escapes this cap and still covers the viewport. */
  [data-vp="desktop"] #wos-root,
  [data-vp="tablet"] #wos-root,
  [data-vp="tablet-ls"] #wos-root {
    max-width: 1600px !important;
    margin-inline: auto !important;
  }

  [data-vp="phone"] main { grid-template-columns: 1fr !important; padding: 6px 8px !important; gap: 14px !important; }
  [data-vp="phone"] section { padding: 20px 8px 48px !important; }
  /* featured (structural: only featured uses article) -> stacked */
  [data-vp="phone"] main > article, [data-vp="phone"] section > article { grid-template-columns: 1fr !important; margin-bottom: 24px !important; }
  [data-vp="phone"] main > article > div:first-child, [data-vp="phone"] section > article > div:first-child { min-height: 208px !important; border-right: none !important; border-bottom: 1px solid var(--fg) !important; }
  [data-vp="phone"] main > article > div:last-child, [data-vp="phone"] section > article > div:last-child { padding: 24px 0 0 !important; }
  [data-vp="phone"] main > article > div:last-child > div:not([style*="border-top"]), [data-vp="phone"] main > article > div:last-child > h2, [data-vp="phone"] main > article > div:last-child > p, [data-vp="phone"] section > article > div:last-child > div:not([style*="border-top"]), [data-vp="phone"] section > article > div:last-child > h2, [data-vp="phone"] section > article > div:last-child > p { padding-left: 22px !important; padding-right: 22px !important; }
  [data-vp="phone"] main > article > div:last-child > div:last-child, [data-vp="phone"] section > article > div:last-child > div:last-child { padding-bottom: 28px !important; padding-top: 18px !important; }
  [data-vp="phone"] main > article h2, [data-vp="phone"] section > article h2 { font-size: 2rem !important; }
  [data-vp="phone"] main > article p, [data-vp="phone"] section > article p { font-size: 1.06rem !important; }
  /* drop the "Featured" eyebrow on phones so the headline+meta sit higher (meta visible without scrolling) */
  [data-vp="phone"] [data-feat-label] { display: none !important; }
  /* current-grid two-up cards: ease body padding + let meta wrap so it doesn't clip the corners */
  [data-vp="phone"] main > div > div:last-child { padding-left: 0 !important; padding-right: 0 !important; }
  [data-vp="phone"] main > div > div:last-child > div { padding-left: 16px !important; padding-right: 16px !important; }
  [data-vp="phone"] main > div > div:last-child > div:last-child { white-space: normal !important; }
  /* A + E rows -> stacked */
  [data-vp="phone"] [data-r="a"], [data-vp="phone"] [data-r="e"] { grid-template-columns: 1fr !important; gap: 14px !important; padding: 22px 2px !important; }
  [data-vp="phone"] [data-r="e"] h3 { font-size: 1.85rem !important; }
  /* B compact rows -> MOBILE: fully stacked column beside the image (topic, title, sub, meta) */
  [data-vp="phone"] [data-r="b"] { grid-template-columns: 80px 1fr !important; column-gap: 16px !important; row-gap: 0 !important; align-items: start !important; padding: 20px 2px !important; }
  [data-vp="phone"] [data-r="b"] > div:first-child { width: 80px !important; height: 80px !important; grid-column: 1 !important; grid-row: 1 / span 4 !important; }
  [data-vp="phone"] [data-r="b"] > div:nth-child(2), [data-vp="phone"] [data-r="b"] > div:nth-child(3) { display: contents !important; }
  [data-vp="phone"] [data-r="b"] > div:nth-child(2) > *, [data-vp="phone"] [data-r="b"] > div:nth-child(3) > * { grid-column: 2 !important; text-align: left !important; white-space: normal !important; min-width: 0 !important; }
  [data-vp="phone"] [data-r="b"] > div:nth-child(3) > div:first-child { order: 1 !important; margin: 0 0 6px !important; }
  [data-vp="phone"] [data-r="b"] h3 { order: 2 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; text-overflow: clip !important; max-height: calc(1.1em * 3) !important; height: auto !important; margin: 0 0 6px !important; }
  [data-vp="phone"] [data-r="b"] p { order: 3 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 5 !important; overflow: hidden !important; max-height: calc(1.35em * 5) !important; height: auto !important; margin: 0 0 8px !important; }
  [data-vp="phone"] [data-r="b"] > div:nth-child(3) > div:last-child { order: 4 !important; }
  /* B compact rows -> iPad: keep two-column desktop structure, top-align so title stays level with the image, wrap title (2-line slot) + 3-line subtitle slot */
  [data-vp="tablet"] [data-r="b"] { align-items: start !important; }
  [data-vp="tablet"] [data-r="b"] h3 { white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; text-overflow: clip !important; max-height: calc(1.1em * 2) !important; height: auto !important; }
  [data-vp="tablet"] [data-r="b"] p { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; height: calc(1.35em * 3) !important; white-space: normal !important; }
  /* C index list -> number + title, drop trailing meta, untruncate */
  [data-vp="phone"] [data-r="c"] { grid-template-columns: 26px 1fr !important; gap: 12px !important; align-items: start !important; }
  [data-vp="phone"] [data-r="c"] > span:last-child { display: none !important; }
  [data-vp="phone"] [data-r="c"] h3 { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  /* search results page rows */
  [data-vp="phone"] [data-r="srow"] { grid-template-columns: 64px 1fr !important; gap: 4px 14px !important; align-items: start !important; padding: 20px 2px !important; }
  [data-vp="phone"] [data-r="srow"] > div:first-child { width: 64px !important; height: 64px !important; grid-row: 1 / span 3 !important; }
  [data-vp="phone"] [data-r="srow"] > span:last-child { grid-column: 2 !important; margin-top: 8px !important; padding-top: 0 !important; }
  [data-vp="phone"] [data-r="srow"] h3 { font-size: 1.45rem !important; }
  [data-vp="phone"] [data-r="srow"] p { -webkit-line-clamp: 3 !important; }
  [data-vp="tablet"] [data-r="srow"] { gap: 22px !important; }
  /* D two-up cards -> single column */
  [data-vp="phone"] [data-rw="d"] { grid-template-columns: 1fr !important; }
  /* footer / subscribe */
  @keyframes footerRingSpin { to { transform: rotate(360deg); } }
  /* MCF stamp invert. Split by input type so touch doesn't leave it stuck
     inverted: :hover only for real pointers (clears normally), :active for
     touch (drops on release). The sigil snaps (no transition). */
  @media (hover: hover) {
    .mcf-mini:hover { background: var(--fg) !important; color: var(--bg) !important; }
    .mcf-mini:hover [data-sigil] { background: var(--bg) !important; }
  }
  .mcf-mini:active { background: var(--fg) !important; color: var(--bg) !important; }
  .mcf-mini:active [data-sigil] { background: var(--bg) !important; }
  [data-vp="phone"] [data-fbar] { padding: 30px 8px !important; gap: 22px !important; }
  [data-vp="phone"] [data-fring] { display: none !important; }
  [data-vp="phone"] [data-subrow] { flex-direction: column !important; }
  [data-vp="phone"] [data-subrow] button { width: 100% !important; justify-content: center !important; }
  /* New footer bar: globe left, credits right at every width; only the globe
     size (128 static -> 84 spinning) and padding change on phones. */
  /* Taller bar so the globe + credits drop to the bottom (back-to-top stays up
     top via space-between); globe bottom-aligns with the credits. */
  [data-vp="phone"] [data-fbot] { padding: 34px 24px 40px !important; flex-wrap: nowrap !important; gap: 16px !important; min-height: 150px !important; }
  [data-vp="phone"] #g-foot-d { display: none !important; }
  [data-vp="phone"] #g-foot-m { display: inline-flex !important; align-self: flex-end !important; margin-left: -12px !important; margin-bottom: 12px !important; }
  /* drop the back-to-top down so it sits just below the globe's top; translateY
     (not margin) so the globe + credits don't reflow — they stay put. */
  [data-vp="phone"] [data-fbotr] > span[role="button"] { width: 28px !important; height: 28px !important; margin-top: 0 !important; transform: translateY(48px) !important; }
  /* bottom-align the credits with the globe (match the globe's 12px margin-bottom;
     back-to-top stays put at the top of the column) */
  [data-vp="phone"] [data-fcopy] { margin-bottom: 12px !important; }
  [data-vp="phone"] [data-flogo] { font-size: 27px !important; }
  /* menu overlay: clamp big nav type to frame width, single-column topics */
  [data-vp="phone"] [data-menu] { padding-left: 22px !important; padding-right: 22px !important; padding-bottom: 30px !important; }
  [data-vp="phone"] [data-menu] nav button, [data-vp="phone"] [data-menu] nav > a { font-size: 2.5rem !important; }
  [data-vp="phone"] [data-menu] [data-panel] > div { grid-template-columns: 1fr !important; gap: 12px !important; }
  [data-vp="phone"] [data-menu] [data-panel] [data-label] { font-size: 1.15rem !important; }
  /* Desktop/tablet: the top-nav "Search" already unfolds a search bar, so the
     search field inside the hamburger menu is redundant — hide it. Phone keeps it
     (no top-nav, so the menu is the only place to search). */
  [data-vp="desktop"] [data-menu] [data-msearch],
  [data-vp="tablet"] [data-menu] [data-msearch],
  [data-vp="tablet-ls"] [data-menu] [data-msearch] { display: none !important; }

  /* ---- TABLET: trims for 834px ---- */
  /* content gutter is 24px; the masthead is full-bleed (margin:-8) so its padding is
     24 + 8 = 32 to land the globe/menu at the same x as the content below. */
  [data-vp="tablet"] header#masthead { padding-left: 32px !important; padding-right: 32px !important; }
  [data-vp="tablet"] main { padding: 24px !important; }
  [data-vp="tablet"] section { padding-left: 24px !important; padding-right: 24px !important; }
  [data-vp="tablet"] [data-r="e"] { grid-template-columns: 300px 1fr !important; gap: 32px !important; }
  [data-vp="tablet"] [data-fbar] { gap: 28px !important; padding-left: 24px !important; padding-right: 24px !important; }
  [data-vp="tablet"] [data-fbot] { padding-left: 24px !important; padding-right: 24px !important; }
  [data-vp="tablet"] [data-menu] nav button, [data-vp="tablet"] [data-menu] nav > a { font-size: 3.4rem !important; }
  /* tablet featured -> stacked, full-width landscape image */
  [data-vp="tablet"] main > article, [data-vp="tablet"] section > article { grid-template-columns: 1fr !important; }
  [data-vp="tablet"] main > article > div:first-child, [data-vp="tablet"] section > article > div:first-child { min-height: 0 !important; aspect-ratio: 16/9 !important; border-right: none !important; border-bottom: 1px solid var(--fg) !important; }
  [data-vp="tablet"] main > article > div:last-child, [data-vp="tablet"] section > article > div:last-child { padding: 40px 0 0 !important; }
  [data-vp="tablet"] main > article > div:last-child > div:not([style*="border-top"]), [data-vp="tablet"] main > article > div:last-child > h2, [data-vp="tablet"] main > article > div:last-child > p, [data-vp="tablet"] section > article > div:last-child > div:not([style*="border-top"]), [data-vp="tablet"] section > article > div:last-child > h2, [data-vp="tablet"] section > article > div:last-child > p { padding-left: 44px !important; padding-right: 44px !important; }
  [data-vp="tablet"] main > article > div:last-child > div:last-child, [data-vp="tablet"] section > article > div:last-child > div:last-child { padding-bottom: 40px !important; }
  /* tablet: keep orbit ring beside subscribe, just smaller */
  [data-vp="tablet"] [data-fring] { flex: 0 0 auto !important; min-width: 0 !important; align-self: flex-start !important; margin-top: 4px !important; }
  [data-vp="tablet"] [data-fring] #ring-art { width: 178px !important; height: 178px !important; }

  /* ---- current-grid card clamps per viewport (current grid = main > div; featured = article, excluded) ----
     narrower tablet/phone cards wrap more lines before the clamp, so raise the clamp AND the
     band's slot min-height to match (sized for the worst-case 2.5rem title so bands never overflow
     and the divider/meta lines stay aligned across a row). Desktop keeps its inline 2/3 clamps. */
  [data-vp="phone"]  main > div > div:last-child h2,
  [data-vp="tablet"] main > div > div:last-child h2 { -webkit-line-clamp: 3 !important; }
  [data-vp="phone"]  main > div > div:last-child > div:first-child,
  [data-vp="tablet"] main > div > div:last-child > div:first-child { min-height: 138px !important; }
  [data-vp="phone"]  main > div > div:last-child p,
  [data-vp="tablet"] main > div > div:last-child p { -webkit-line-clamp: 4 !important; }
  [data-vp="phone"]  main > div > div:last-child > div:nth-child(3),
  [data-vp="tablet"] main > div > div:last-child > div:nth-child(3) { min-height: 138px !important; padding-top: 16px !important; padding-bottom: 16px !important; }
  /* tablet meta: trim card body padding + nudge font down so the meta line always fits on one line */
  [data-vp="tablet"] main > div > div:last-child > div:last-child { padding-left: 22px !important; padding-right: 22px !important; font-size: 16px !important; white-space: normal !important; }
  /* ---- topic page header: stack name over description on smaller viewports ---- */
  [data-vp="phone"] [data-tophead], [data-vp="tablet"] [data-tophead] { flex-direction: column !important; gap: 16px !important; padding-bottom: 22px !important; }
  [data-vp="phone"] [data-tophead-rule], [data-vp="tablet"] [data-tophead-rule] { display: none !important; }
  [data-vp="phone"] [data-tophead] p, [data-vp="tablet"] [data-tophead] p { max-width: none !important; margin-top: 0 !important; }
  [data-vp="phone"] [data-tophead] h1 { font-size: 3rem !important; }
  [data-vp="phone"] [data-tophead] p { font-size: 1.18rem !important; }
  /* dark mode: keep the page root pure black behind #wos-root (overscroll, scrollbars) */
  html[data-theme="alt"], html[data-theme="alt"] body { background: #000000; }
  /* ===== live deploy: real-width responsive, no device bezel, no faux URL bar ===== */
  [data-stage], [data-frame], [data-scroll] { display: contents !important; }
  [data-stage] [data-frame]::before { display: none !important; }
  #wos-root > div[aria-hidden="true"]:first-child { display: none !important; }

/* Shrink the Built-by chip on phones so the "Built by" label never wraps. */
[data-vp="phone"] a[href*="marscodefactory"] { font-size: 8px !important; letter-spacing: 0.05em !important; padding: 4px 7px !important; gap: 5px !important; white-space: nowrap !important; }
[data-vp="phone"] a[href*="marscodefactory"] > span { width: 6px !important; height: 6px !important; }