@keyframes footerRingSpin { to { transform: rotate(360deg); } }
/* 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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/705d625066db.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/9f73b2f43ea3.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/04fe624f325e.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/c68aff863e18.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/9c1cad863a03.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cf3eb50fb210.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/f11d729bb0a4.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/705d625066db.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/9f73b2f43ea3.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/04fe624f325e.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/c68aff863e18.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/9c1cad863a03.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/cf3eb50fb210.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/f11d729bb0a4.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';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/010807d0fb4c.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';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/e66a5d83f468.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';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/010807d0fb4c.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';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/e66a5d83f468.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';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/010807d0fb4c.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';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/e66a5d83f468.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';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/010807d0fb4c.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';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/e66a5d83f468.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;
}


  :root{
    /* real WoS tokens, pulled from assets/css/site.css */
    --bg: #FCFBF7;
    --fg: #060606;
    --faded: #5B5F66;
    --border: #E6E3DC;
    --imgline: var(--fg);   /* image/input frame line — matches the homepage footer */
    --accent: #E34234;
    --hover: #F4F1EA;
    --serif: 'Newsreader', Georgia, serif;
    --display: 'Cormorant Garamond', Georgia, serif;
    --mono: 'Spline Sans Mono', 'Menlo', monospace;
    --wt-display: 700;
    --wt-body: 400;
    --art-w: 780px;         /* desktop article measure, driven by the Width control */
    --toc-w: 280px;         /* desktop side-TOC width (reserved in the article measure) */
    color-scheme: light;    /* force a light UA canvas even on dark-mode systems */
  }
  /* dark = pure black; warm greens neutralised to greys so nothing dulls the black */
  html[data-theme="dark"]{
    --bg: #000000;
    --fg: #FFFFFF;
    --faded: rgba(255,255,255,0.56);
    --border: rgba(255,255,255,0.14);
    --imgline: rgba(255,255,255,0.32);
    --hover: rgba(255,255,255,0.06);
    color-scheme: dark;
  }
  /* WoS paper — warm ivory/parchment, distinct from the personal site's
     brown-accent paper. Keeps the vermilion accent (brand stays recognizable),
     just shifts the surface and ink warmer. */
  html[data-theme="paper"]{
    --bg: #F2E8D3;
    --fg: #2A1F12;
    --faded: #3D2B18;
    --border: #DDD0B4;
    --imgline: var(--fg);
    --hover: #EBDDBC;
  }
  /* paint the root canvas with our own token so a dark-mode browser never
     shows its default dark backdrop behind/around the body */
  html{ background:var(--bg); --vw:100vw; }
  body{ transition:background .25s ease, color .25s ease; }

  /* ===== viewport stage (iPhone / iPad / Desktop preview) ===== */
  /* desktop: a real block that paints the theme background itself, so the
     surface stays themed even if the host forces html/body transparent */
  #stage[data-vp="desktop"]{ display:block; min-height:100vh; background:var(--bg); }
  #stage[data-vp="phone"],
  #stage[data-vp="tablet"]{
    display:block; min-height:100vh; box-sizing:border-box; overflow-x:auto;
    background:repeating-linear-gradient(45deg,#26282b,#26282b 2px,#222427 2px,#222427 14px);
    padding:40px 16px 104px;
  }
  #stage[data-vp="phone"] .device,
  #stage[data-vp="tablet"] .device{
    max-width:none; margin:0 auto; border:none;
    overflow-x:hidden;
    /* de-mockup: .device is now the full-height, window-scrolled document (not a
       fixed 780px scroll box), so it must NOT carry a transform — that would make
       it the containing block for the menu/settings/share panels' position:fixed,
       pinning them to the 16k-tall document instead of the viewport (blank menu /
       dimmed-empty settings once scrolled). Let fixed panels resolve to the window. */
    background:var(--bg);
  }
  #stage[data-vp="phone"] .device{
    width:393px; height:852px; border-radius:46px;
    box-shadow:0 40px 80px -20px rgba(0,0,0,.6), 0 0 0 12px #0b0b0c, 0 0 0 14px #303034;
  }
  #stage[data-vp="tablet"] .device{
    width:834px; max-width:100%; height:1112px; border-radius:26px;
    box-shadow:0 40px 80px -20px rgba(0,0,0,.6), 0 0 0 14px #0b0b0c, 0 0 0 16px #303034;
  }

  /* viewport switcher */
  .vpbar{
    position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
    z-index:200; display:flex; gap:0;
    background:var(--bg); border:1px solid var(--border);
    border-radius:999px; padding:3px; box-shadow:0 8px 26px rgba(0,0,0,.18);
  }
  .vpbar button{
    font-family:var(--mono); font-size:11px; letter-spacing:.03em;
    color:var(--faded); background:none; border:none; cursor:pointer;
    padding:6px 15px; border-radius:999px; transition:background .15s, color .15s;
  }
  .vpbar button.active{ background:var(--fg); color:var(--bg); }

  /* ===== live deploy: real-width responsive, no bezel, no faux chrome ===== */
  .urlbar, .vpbar { display:none !important; }
  #stage { background:var(--bg) !important; padding:0 !important; overflow:visible !important; min-height:100vh; }
  #stage .device { width:100% !important; max-width:none !important; height:auto !important; min-height:100vh !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important; overflow:visible !important; }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--fg);
    font-family:var(--serif);
    font-weight:var(--wt-body);
    -webkit-font-smoothing:antialiased;
  }

  .device{
    max-width:430px;
    margin:32px auto;
    border:1px solid #d8d5cb;
    height:780px;
    position:relative;
    overflow-y:scroll;
    overflow-x:hidden;
    background:var(--bg);
  }

  .note{
    max-width:430px;
    margin:0 auto 8px;
    font-family:var(--mono);
    font-size:11px;
    color:#777;
    letter-spacing:.02em;
    padding:0 4px;
  }

  /* ---- sticky stack: wordmark header + rail + TOC strip ---- */
  .stack{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--bg);
    /* Rest 8px below the viewport top so the header breathes like the homepage
       (whose body has an 8px margin). Sticky top:0 still pins it flush when scrolled. */
    margin-top:8px;
  }
  /* framed with the masthead's bottom line instead of a shadow */

  /* ---- fake browser chrome: traffic lights + centered address pill ---- */
  .urlbar{
    display:flex; align-items:center; gap:8px;
    padding:10px 16px;
    background:var(--hover);
    border-bottom:1px solid var(--border);
    position:relative; z-index:2;
  }
  .urlbar .tl{ width:11px; height:11px; border-radius:50%; flex:none; }
  .urlbar .addr{ flex:1; display:flex; justify-content:center; min-width:0; }
  .urlbar .addr > span{
    display:inline-flex; align-items:center; gap:6px;
    max-width:min(72%, 460px);
    background:var(--bg); border:1px solid var(--border); border-radius:7px;
    padding:5px 18px;
    font-family:var(--mono); font-size:11px; letter-spacing:.02em;
    color:var(--faded); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .urlbar .addr .lock{ flex:none; opacity:.6; }
  .urlbar .addr .path{ color:var(--fg); }

  .masthead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    /* match the home header: globe hugs the left, top/bottom condense via JS */
    padding:16px 24px 16px 16px;
    border-bottom:1px solid var(--fg);
    transition:padding 0.3s;
  }
  /* condensed (scrolled) masthead: compact on phone/tablet, a taller ~82px bar on
     desktop so the sticky header reads with more presence while reading. */
  .masthead.mast-condensed{ padding-top:14px; padding-bottom:14px; }
  [data-vp="desktop"] .masthead.mast-condensed,
  [data-vp="tablet-ls"] .masthead.mast-condensed{ padding-top:24px; padding-bottom:24px; }
  /* The globe + wordmark lockup sizing is shared with the homepage — see
     masthead-lockup.css. Only the page-specific masthead padding lives here. */

  /* ---- PHONE masthead: static single-line lockup (matches the homepage phone
     header exactly). 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, and only the
     single-line lockup shows (the stacked variant is hidden). Desktop/tablet keep
     the shared stacked→condense lockup untouched. */
  #stage[data-vp="phone"] .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. Phone
     RE-SHOWS the globe in the left corner with the wordmark centred (phone has no
     top-nav to fight, and the corner globe anchors the left). */
  .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. */
  #stage[data-vp="phone"] .masthead [data-mast="single"]{
    display:block !important; position:static !important; transform:none !important;
  }
  #stage[data-vp="phone"] .masthead,
  #stage[data-vp="phone"] .masthead.mast-condensed{
    padding:0 !important;
    min-height:66px;
    position:relative;
  }
  /* globe: re-shown on phone, tucked into the left corner, vertically centred */
  #stage[data-vp="phone"] .masthead #g-single,
  #stage[data-vp="phone"] .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 under its left edge, menu
     under its right; the wordmark spans between them, centred). */
  #stage[data-vp="phone"] .masthead [data-mast="single"] > span:last-child,
  #stage[data-vp="phone"] .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 icon's bottom line sits on the wordmark baseline */
  #stage[data-vp="phone"] .masthead .mast-right,
  #stage[data-vp="phone"] .masthead.mast-condensed .mast-right{
    position:absolute !important; right:20px;
    top:50%; transform:translateY(calc(-50% + 4px));
  }

  /* ---- DESKTOP / TABLET masthead: single-line centred lockup (matches the phone
     header). The stacked hero is removed at every non-phone width; one fixed centred
     bar — globe left, wordmark centred, menu right — with no scroll morph. */
  #stage[data-vp="desktop"] .masthead [data-mast="stacked"],
  #stage[data-vp="tablet"] .masthead [data-mast="stacked"],
  #stage[data-vp="tablet-ls"] .masthead [data-mast="stacked"]{ display:none !important; }
  /* container: neutral block spanning the header so globe + wordmark position
     absolutely against the sticky header (no transform, or it re-traps them). */
  #stage[data-vp="desktop"] .masthead [data-mast="single"],
  #stage[data-vp="tablet"] .masthead [data-mast="single"],
  #stage[data-vp="tablet-ls"] .masthead [data-mast="single"]{ display:block !important; position:static !important; transform:none !important; }
  #stage[data-vp="desktop"] .masthead,
  #stage[data-vp="desktop"] .masthead.mast-condensed,
  #stage[data-vp="tablet"] .masthead,
  #stage[data-vp="tablet"] .masthead.mast-condensed,
  #stage[data-vp="tablet-ls"] .masthead,
  #stage[data-vp="tablet-ls"] .masthead.mast-condensed{
    position:relative;
    /* globe (60px) + wordmark are position:absolute, so floor the bar height or it
       collapses to the hamburger (~31px) and the globe/wordmark overflow with the
       divider cutting through them (worst with the nav hidden while the menu is open). */
    box-sizing:border-box !important;
    padding-top:8px !important; padding-bottom:8px !important; min-height:80px !important;
    /* match the homepage gutter: the homepage masthead is full-bleed with 48px
       padding, which lands the globe/menu 48px from the viewport edge. The reader
       body has no margin and no full-bleed, so a plain 48px padding matches it. */
    padding-left:58px !important; padding-right:58px !important;
  }
  /* globe: re-shown, tucked into the left corner at the content gutter, vertically
     centred (overrides the wordmark-only display:none). */
  #stage[data-vp="desktop"] .masthead #g-single,
  #stage[data-vp="tablet"] .masthead #g-single,
  #stage[data-vp="tablet-ls"] .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: the reader article body is near full-width here with a 20px
     gutter, so drop the masthead's 58px gutter to 20 (globe on the left, menu on the
     right) to mirror the content — the 58px is for the desktop centred column. */
  #stage[data-vp="tablet"] .masthead{ padding-left:20px !important; padding-right:20px !important; }
  #stage[data-vp="tablet"] .masthead #g-single{ left:20px !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 would sit on top of the
     top-nav and swallow its clicks. */
  #stage[data-vp="desktop"] .masthead [data-mast="single"] > span:last-child,
  #stage[data-vp="tablet"] .masthead [data-mast="single"] > span:last-child,
  #stage[data-vp="tablet-ls"] .masthead [data-mast="single"] > span:last-child{
    position:absolute !important; left:50% !important; right:auto !important;
    /* optical raise ~2px so the wordmark's low-sitting lowercase mass centres on
       the shared midline with the nav/globe/hamburger (cap centres already match). */
    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 above the centred wordmark so it always gets clicks. */
  .masthead .mast-right{ position:relative; z-index:3; }
  .masthead [data-mast="single"] > span:last-child{ z-index:1; }
  /* size by real dimensions, not transform:scale (which thickens the lines and
     mis-aligns them on the pixel grid); keeps the 2px lines crisp and even. */
  #stage[data-vp="desktop"] .masthead .wos-ham,
  #stage[data-vp="tablet"] .masthead .wos-ham,
  #stage[data-vp="tablet-ls"] .masthead .wos-ham{
    width:40px !important; height:23px !important;
  }
  #stage[data-vp="desktop"] .masthead .wos-ham i,
  #stage[data-vp="tablet"] .masthead .wos-ham i,
  #stage[data-vp="tablet-ls"] .masthead .wos-ham i{
    height:2px !important;
  }
  /* Pin the middle line to a whole pixel (no translateY centring) so a fractional
     thickness doesn't land it on a half-pixel and render soft/bigger than the rest. */
  #stage[data-vp="desktop"] .masthead .wos-ham i:nth-child(2),
  #stage[data-vp="desktop"] .masthead .wos-ham i:nth-child(3),
  #stage[data-vp="tablet"] .masthead .wos-ham i:nth-child(2),
  #stage[data-vp="tablet"] .masthead .wos-ham i:nth-child(3),
  #stage[data-vp="tablet-ls"] .masthead .wos-ham i:nth-child(2),
  #stage[data-vp="tablet-ls"] .masthead .wos-ham i:nth-child(3){
    top:11px !important; transform:translateX(-50%) rotate(0deg) !important;
  }
  #stage[data-vp="desktop"] .masthead [data-menubtn][data-open] .wos-ham i:nth-child(2),
  #stage[data-vp="tablet"] .masthead [data-menubtn][data-open] .wos-ham i:nth-child(2),
  #stage[data-vp="tablet-ls"] .masthead [data-menubtn][data-open] .wos-ham i:nth-child(2){
    transform:translateX(-50%) rotate(45deg) !important;
  }
  #stage[data-vp="desktop"] .masthead [data-menubtn][data-open] .wos-ham i:nth-child(3),
  #stage[data-vp="tablet"] .masthead [data-menubtn][data-open] .wos-ham i:nth-child(3),
  #stage[data-vp="tablet-ls"] .masthead [data-menubtn][data-open] .wos-ham i:nth-child(3){
    transform:translateX(-50%) rotate(-45deg) !important;
  }

  /* Desktop top-nav + unfolding header search (mirrors the homepage). */
  .masthead [data-topnav], .masthead [data-hdr-searchbar]{ display:none; }
  #stage[data-vp="desktop"] .masthead [data-topnav],
  #stage[data-vp="tablet"] .masthead [data-topnav],
  #stage[data-vp="tablet-ls"] .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;
  }
  #stage[data-vp="desktop"] .masthead [data-hdr-searchbar],
  #stage[data-vp="tablet"] .masthead [data-hdr-searchbar],
  #stage[data-vp="tablet-ls"] .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;
  }
  #stage[data-vp="desktop"] .masthead.hdr-search-open [data-topnav],
  #stage[data-vp="tablet"] .masthead.hdr-search-open [data-topnav],
  #stage[data-vp="tablet-ls"] .masthead.hdr-search-open [data-topnav]{
    max-width:0; opacity:0; pointer-events:none;
  }
  #stage[data-vp="desktop"] .masthead.hdr-search-open [data-hdr-searchbar],
  #stage[data-vp="tablet"] .masthead.hdr-search-open [data-hdr-searchbar],
  #stage[data-vp="tablet-ls"] .masthead.hdr-search-open [data-hdr-searchbar]{
    max-width:400px; opacity:1; pointer-events:auto;
  }
  @media (hover:hover){
    /* transition on :hover only -> eases in, snaps out instantly (no lingering fade) */
    .masthead .topnav-link:not(.topnav-off):hover,
    .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. */
  .masthead.menu-open [data-topnav],
  .masthead.menu-open [data-hdr-searchbar]{ display:none !important; }

  /* Below 1280px (iPad portrait, narrow/1024 desktop) the header can't fit the
     top-nav + unfolding search bar, so fall back to the mobile chrome: hamburger
     only, search inside the menu. >=1280 keeps the full top-nav. */
  @media (max-width: 1279px){
    #stage[data-vp="tablet"] .masthead [data-topnav],
    #stage[data-vp="tablet-ls"] .masthead [data-topnav],
    #stage[data-vp="desktop"] .masthead [data-topnav],
    #stage[data-vp="tablet"] .masthead [data-hdr-searchbar],
    #stage[data-vp="tablet-ls"] .masthead [data-hdr-searchbar],
    #stage[data-vp="desktop"] .masthead [data-hdr-searchbar]{ display:none !important; }
    #stage[data-vp="tablet"] #wosMenu form#menuSearchForm,
    #stage[data-vp="tablet-ls"] #wosMenu form#menuSearchForm,
    #stage[data-vp="desktop"] #wosMenu form#menuSearchForm{ display:flex !important; max-width:none !important; }
  }
  /* Menu topic tiles: single-column list at the homepage's phone label size (the
     desktop 2-column grid would overflow the phone width). Matches index.css. */
  #stage[data-vp="phone"] #wosMenu #menuPanel > div{ grid-template-columns:1fr !important; gap:12px !important; }
  #stage[data-vp="phone"] #wosMenu #menuPanel [data-label]{ font-size:1.15rem !important; }
  /* Desktop/tablet: the top-nav "Search" already provides search, so hide the
     redundant search field inside the hamburger menu. Phone keeps it. */
  #stage[data-vp="desktop"] #wosMenu #menuSearchForm,
  #stage[data-vp="tablet"] #wosMenu #menuSearchForm,
  #stage[data-vp="tablet-ls"] #wosMenu #menuSearchForm{ display:none !important; }
  .wordmark{
    font-family:var(--display);
    font-weight:500;
    font-size:21px;
    letter-spacing:.01em;
  }
  .wordmark .of{
    font-style:italic;
    font-weight:500;
    color:var(--accent);
  }
  /* Hamburger, matching the homepage header: 4 bars where the two middle bars
     scissor into an X *inside* the hamburger footprint, where the middle line
     was (cf. worksinprogress.co). Morph is driven by [data-open] on the button. */
  .wos-ham { display:inline-block; position:relative; width:26px; height:18px; }
  .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); }

  /* ---- utility rail ---- */
  .rail{
    display:flex;
    align-items:center;
    gap:14px;
    padding:9px 16px;
    border-bottom:1px solid var(--border);
    background:var(--bg);
  }
  .rail-track{
    position:relative;
    flex:1;
    height:2px;
    background:var(--border);
    border-radius:2px;
    overflow:hidden;
  }
  .rail-fill{
    position:absolute; left:0; top:0; bottom:0;
    width:var(--pct, 0%);
    background:var(--accent);
  }
  .rail-pct{
    font-family:var(--mono);
    font-size:11px;
    color:var(--faded);
    min-width:28px;
    text-align:right;
  }
  .rail-icon{
    appearance:none; background:none; border:none; padding:0; font:inherit; cursor:pointer;
    width:17px; height:17px;
    color:var(--faded);
    display:flex; align-items:center; justify-content:center;
  }
  .rail-icon svg{width:100%; height:100%;}
  .rail-icon.active{ color:var(--accent); }

  /* ---- reading settings panel ---- */
  /* ---- panel backdrop ---- */
  .panel-backdrop{
    position:fixed; inset:0; z-index:70;
    background:rgba(0,0,0,0.3);
    display:none;
    cursor:default;
  }
  .panel-backdrop.open{ display:block; }

  .settings-panel{
    position:fixed;
    top:90px;
    right:16px;
    width:300px;
    max-width:calc(100vw - 32px);
    background:var(--bg);
    border:1px solid var(--border);
    box-shadow:0 16px 48px rgba(0,0,0,0.22);
    padding:18px;
    display:none;
    flex-direction:column;
    gap:14px;
    z-index:80;
  }
  .settings-panel.open{ display:flex; }

  .share-panel{
    position:fixed;
    top:90px;
    right:16px;
    width:230px;
    max-width:calc(100vw - 32px);
    background:var(--bg);
    border:1px solid var(--border);
    box-shadow:0 8px 30px rgba(0,0,0,0.16);
    padding:14px;
    display:none;
    flex-direction:column;
    gap:4px;
    z-index:80;
  }
  .share-panel.open{ display:flex; }

  /* desktop / landscape: rail, TOC, panels and backdrop all live inside the
     sticky .overlay-layer, so they pin to whichever scrollport is active
     (the window on desktop, the bezel in landscape) with no JS. */
  [data-vp="desktop"] .settings-panel, [data-vp="tablet-ls"] .settings-panel,
  [data-vp="desktop"] .share-panel, [data-vp="tablet-ls"] .share-panel{
    position:absolute;
    left:calc(clamp(90px, calc(var(--vw) * .08), 130px) - 18px);
    right:auto;
    top:50%;
    transform:translateY(-50%);
  }
  [data-vp="desktop"] .panel-backdrop, [data-vp="tablet-ls"] .panel-backdrop{
    position:absolute;
  }

  /* ---- share panel ---- */
  .share-panel.open{ display:flex; }
  .share-panel-title{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.04em;
    color:var(--faded);
    margin-bottom:6px;
  }
  .share-link{
    display:flex; align-items:center; gap:10px;
    font-family:var(--mono); font-size:12px;
    color:var(--faded);
    padding:7px 4px;
    border:none; background:none; cursor:pointer;
    text-decoration:none;
    border-bottom:1px solid var(--border);
    transition:color .12s;
    text-align:left; width:100%;
  }
  .share-link:last-child{ border-bottom:none; }
  .share-link:hover{ color:var(--fg); }
  .share-link svg{
    width:14px; height:14px; flex-shrink:0;
    stroke:currentColor; fill:none;
    stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  }
  .share-link svg.filled{ fill:currentColor; stroke:none; }
  .settings-panel-head{
    display:flex; align-items:center; justify-content:space-between;
  }
  .settings-panel-title{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.04em;
    color:var(--faded);
  }
  .settings-panel-close{
    appearance:none; background:none; border:none; cursor:pointer;
    color:var(--faded); padding:2px; display:flex; align-items:center; justify-content:center;
  }
  .settings-panel-close svg{ width:13px; height:13px; }
  .settings-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .settings-label{
    font-family:var(--mono);
    font-size:11px;
    color:var(--faded);
    flex-shrink:0;
  }
  .settings-select{
    flex:1;
    font-family:var(--serif);
    font-size:13px;
    color:var(--fg);
    background:var(--hover);
    border:1px solid var(--border);
    padding:5px 7px;
    cursor:pointer;
  }
  .settings-size-wrap{ flex:1; display:flex; flex-direction:column; gap:6px; }
  .settings-size-label{
    font-family:var(--mono);
    font-size:11px;
    color:var(--accent);
    text-align:center;
  }
  .settings-size-range{
    -webkit-appearance:none; appearance:none;
    width:100%; height:2px; border-radius:2px;
    background:var(--border); outline:none; cursor:pointer;
  }
  .settings-size-range::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:13px; height:13px; border-radius:50%;
    background:var(--accent); cursor:pointer; border:none;
  }
  .settings-size-range::-moz-range-thumb{
    width:13px; height:13px; border-radius:50%;
    background:var(--accent); cursor:pointer; border:none;
  }
  .settings-size-ticks{ display:flex; justify-content:space-between; padding:0 1px; }
  .settings-size-ticks span{ width:1px; height:4px; background:var(--border); }
  .settings-divider{ height:1px; background:var(--border); }
  .settings-btns{ display:flex; gap:5px; }
  .settings-btn{
    appearance:none; background:none; cursor:pointer;
    font-family:var(--mono); font-size:10px; color:var(--faded);
    border:1px solid var(--border); padding:4px 9px;
    transition:border-color .15s, color .15s;
  }
  .settings-btn.active{ border-color:var(--accent); color:var(--accent); }
  .settings-switch{
    appearance:none; width:36px; height:20px; border-radius:10px;
    border:1px solid var(--border); background:transparent;
    position:relative; cursor:pointer; flex-shrink:0;
    transition:background .15s, border-color .15s;
  }
  .settings-switch::after{
    content:''; position:absolute; top:1px; left:1px;
    width:16px; height:16px; border-radius:50%;
    background:var(--faded); transition:transform .15s, background .15s;
  }
  .settings-switch[aria-checked="true"]{ background:var(--accent); border-color:var(--accent); }
  .settings-switch[aria-checked="true"]::after{ transform:translateX(16px); background:var(--bg); }

  /* ---- TOC strip (docked under rail) ---- */
  .toc-strip{
    border-bottom:1px solid var(--border);
    background:var(--bg);
  }
  .toc-strip-head{
    appearance:none; background:none; border:none; font:inherit; color:inherit;
    width:100%; text-align:left;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:13px 20px;
    cursor:pointer;
  }
  .toc-strip-active{
    font-family:var(--serif);
    font-size:16px;
    font-weight:700;
    color:var(--fg);
    line-height:1.3;
  }
  .toc-chevron{
    width:14px; height:14px;
    color:var(--faded);
    flex-shrink:0;
    margin-left:12px;
    transition:transform .2s ease;
  }
  .toc-strip.open .toc-chevron{transform:rotate(180deg);}

  /* Mobile: the progress rail + section bar live in the sticky header but stay
     hidden while you're still on the intro (kicker / hero / title / summary).
     They slide + fade in only once the summary has scrolled up under the
     masthead — the same gate as desktop, and the IFP-style "the section bar
     appears as you begin reading" pattern. onScroll() toggles the -visible
     classes on every viewport now. */
  [data-vp="phone"] .rail,
  [data-vp="tablet"] .rail,
  [data-vp="phone"] .toc-strip,
  [data-vp="tablet"] .toc-strip{
    max-height:0;
    opacity:0;
    overflow:hidden;
    /* collapse the border width too, not just its colour: with box-sizing:border-box
       a 1px border keeps the element 1px tall even at max-height:0, and its
       background then paints a faint bg-coloured sliver under the masthead divider
       (only visible over the hero). Width 0 makes it truly collapse. */
    border-bottom-width:0;
    border-bottom-color:transparent;
    transform:translateY(-6px);
    pointer-events:none;
    transition:max-height .34s ease, opacity .24s ease, transform .34s ease,
               border-bottom-color .34s ease, padding .34s ease;
  }
  /* the rail carries its own vertical padding (content-box), so collapse that
     too or it leaves an ~18px sliver when "hidden". */
  [data-vp="phone"] .rail,
  [data-vp="tablet"] .rail{
    padding-top:0;
    padding-bottom:0;
  }
  [data-vp="phone"] .rail.rail-visible,
  [data-vp="tablet"] .rail.rail-visible{
    max-height:60px;
    opacity:1;
    transform:none;
    border-bottom-width:1px;
    border-bottom-color:var(--border);
    pointer-events:auto;
    padding-top:9px;
    padding-bottom:9px;
  }
  [data-vp="phone"] .toc-strip.toc-visible,
  [data-vp="tablet"] .toc-strip.toc-visible{
    max-height:66px;
    opacity:1;
    transform:none;
    border-bottom-width:1px;
    border-bottom-color:var(--border);
    pointer-events:auto;
  }
  [data-vp="phone"] .toc-strip.toc-visible.open,
  [data-vp="tablet"] .toc-strip.toc-visible.open{
    max-height:480px;
  }
  /* reading percentage reads as an editorial figure, not a mono readout */
  [data-vp="phone"] .rail-pct,
  [data-vp="tablet"] .rail-pct{
    font-family:var(--serif);
    font-size:13px;
    letter-spacing:0;
  }

  .toc-full{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    border-top:1px solid var(--border);
  }
  .toc-strip.open .toc-full{
    max-height:360px;
    overflow-y:auto;
  }
  .toc-rail-wrap{
    position:relative;
    padding:14px 20px 18px 18px;
  }
  .toc-rail-segments{
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .toc-rail-tick{
    position:absolute;
    width:2px;
    background:var(--border);
  }
  .toc-list{
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
  }
  .toc-list li{
    font-family:var(--serif);
    font-size:15px;
    color:var(--faded);
    padding:7px 0;
    display:flex;
    align-items:center;
    gap:7px;
    cursor:pointer;
    position:relative;
  }
  /* the TOC item is a real anchor for native/keyboard navigation; display:contents
     removes its own box so the dot/label/chevron keep participating in the li's
     flex layout exactly as before. */
  .toc-list li > a{
    display:contents;
    color:inherit;
    text-decoration:none;
  }
  .toc-list li.overview{
    font-weight:700;
    color:var(--fg);
    padding-bottom:13px;
    padding-left:0;
    margin-bottom:5px;
    border-bottom:1px solid var(--border);
  }
  .toc-list li.sub{
    align-items:center;
    padding-left:30px;
    font-size:14px;
    overflow:hidden;
    max-height:0;
    padding-top:0;
    padding-bottom:0;
    transition:max-height .22s ease, padding .22s ease, opacity .18s ease;
    opacity:0;
  }
  .toc-list li.sub.open{
    max-height:60px;
    padding-top:7px;
    padding-bottom:7px;
    opacity:1;
  }
  .toc-list li.active{
    color:var(--fg);
    font-weight:600;
  }
  .toc-dot{
    width:7px; height:7px;
    border-radius:50%;
    border:1.5px solid var(--faded);
    background:var(--bg);
    flex-shrink:0;
    align-self:center;
    transition:background .15s ease, border-color .15s ease;
    z-index:2;
  }
  .toc-list li.sub .toc-dot{
    position:static;
    width:5px; height:5px;
    border-width:1.2px;
  }
  .toc-list li.active .toc-dot{
    background:var(--accent);
    border-color:var(--accent);
  }
  .toc-mini-chevron{
    width:11px; height:11px;
    color:var(--faded);
    margin-left:auto;
    flex-shrink:0;
    transition:transform .2s ease;
  }
  .toc-list li.group.has-subs.expanded .toc-mini-chevron{
    transform:rotate(180deg);
  }

  .toc-desktop-label{
    display:none;
  }

  .overlay-layer{}

  [data-vp="desktop"] .device, [data-vp="tablet-ls"] .device{
    max-width:none;
    min-height:100vh;
    height:auto;
    border:none;
    overflow:visible;
    margin:0;
    background:var(--bg);
  }
  /* the sticky overlay layer: full-scrollport tall, but its height is cancelled
     by an equal negative margin so it takes no flow space. It pins to the top
     of the active scrollport; its absolutely-positioned children (rail, TOC,
     panels) ride along, pinned, with zero JS. */
  [data-vp="desktop"] .overlay-layer, [data-vp="tablet-ls"] .overlay-layer{
    position:sticky;
    top:0;
    height:var(--port-h);
    margin-bottom:calc(-1 * var(--port-h));
    z-index:60;
    pointer-events:none;
  }
  [data-vp="desktop"] .overlay-layer > *, [data-vp="tablet-ls"] .overlay-layer > *{
    pointer-events:auto;
  }
  [data-vp="desktop"] .overlay-layer{ --port-h:100vh; }
  [data-vp="desktop"] .note, [data-vp="tablet-ls"] .note{ max-width:none; }
  [data-vp="desktop"] .article, [data-vp="tablet-ls"] .article{
    max-width:min(var(--art-w), calc(var(--vw) - clamp(90px, calc(var(--vw) * .08), 130px) - var(--toc-w) - 40px - 28px));
    margin-left:clamp(90px, calc(var(--vw) * .08), 130px);
    margin-right:0;
    padding-top:56px;
  }
  /* On narrow desktop the reading column can't reach its full 780px once the
     280px side-TOC is reserved, so trim the reserved TOC width there to widen
     the reading measure (the two longest TOC headings then wrap to two lines,
     which is fine). Above ~1226px the column is already full width, so keep
     the roomier TOC. --toc-w feeds both the measure and the TOC itself, so
     this stays geometrically consistent. */
  @media (max-width: 1226px){
    [data-vp="desktop"]{ --toc-w: 240px; }
  }
  /* one logical block: the masthead globe and the footer content start at the
     same left edge as the reading column's text (article margin + its 20px
     inner padding). The footer keeps a comfortable full width on the right. */
  [data-vp="desktop"] .masthead, [data-vp="tablet-ls"] .masthead{
    padding-left:calc(clamp(90px, calc(var(--vw) * .08), 130px) + 20px) !important;
  }
  [data-vp="desktop"] .foot-bar, [data-vp="tablet-ls"] .foot-bar,
  [data-vp="desktop"] .foot-bot, [data-vp="tablet-ls"] .foot-bot{
    padding-left:58px !important;
  }
  [data-vp="desktop"] .rail, [data-vp="tablet-ls"] .rail{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    position:absolute;
    left:calc(clamp(90px, calc(var(--vw) * .08), 130px) - 50px);
    top:50%;
    transform:translateY(-50%);
    width:auto;
    padding:0;
    border:none;
    background:transparent;
    z-index:60;
    opacity:0;
    pointer-events:none;
  }
  [data-vp="desktop"] .rail.rail-visible, [data-vp="tablet-ls"] .rail.rail-visible{
    opacity:1;
    pointer-events:auto;
    transition:opacity .3s ease;
  }
  [data-vp="desktop"] .rail-track, [data-vp="tablet-ls"] .rail-track{
    width:2px;
    height:90px;
    flex:none;
  }
  [data-vp="desktop"] .rail-fill, [data-vp="tablet-ls"] .rail-fill{
    left:0; right:0; bottom:auto; top:0;
    width:auto;
    height:var(--pct, 0%);
  }
  [data-vp="desktop"] .rail-pct, [data-vp="tablet-ls"] .rail-pct{
    min-width:0;
    text-align:center;
    order:-1;
  }
  [data-vp="desktop"] .toc-strip, [data-vp="tablet-ls"] .toc-strip{
    position:absolute;
    left:min(calc(clamp(90px, calc(var(--vw) * .08), 130px) + var(--art-w) + 36px), calc(var(--vw) - var(--toc-w) - 28px));
    top:112px;
    transform:none;
    width:var(--toc-w);
    max-height:calc(var(--port-h, 100vh) - 150px);
    overflow-y:auto;
    overflow-x:hidden;
    border:none;
    background:transparent;
    z-index:60;
    opacity:0;
    pointer-events:none;
  }
  [data-vp="desktop"] .toc-strip.toc-visible, [data-vp="tablet-ls"] .toc-strip.toc-visible{
    opacity:1;
    pointer-events:auto;
    transition:opacity .3s ease;
  }
  [data-vp="desktop"] .toc-strip-head, [data-vp="tablet-ls"] .toc-strip-head{ display:none; }
  [data-vp="desktop"] .toc-desktop-label, [data-vp="tablet-ls"] .toc-desktop-label{
    display:block;
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.04em;
    color:var(--faded);
    margin-bottom:12px;
  }
  [data-vp="desktop"] .toc-list li.overview, [data-vp="tablet-ls"] .toc-list li.overview{ display:none; }
  [data-vp="desktop"] .toc-full, [data-vp="tablet-ls"] .toc-full{
    max-height:none !important;
    overflow:visible !important;
    border-top:none;
    transition:none;
  }
  [data-vp="desktop"] .toc-rail-wrap, [data-vp="tablet-ls"] .toc-rail-wrap{ padding:0 0 0 18px; }

  /* ---- iPad landscape: the desktop layout inside an 1112×834 bezel ---- */
  #stage[data-vp="tablet-ls"]{
    display:block; min-height:100vh; box-sizing:border-box; overflow-x:auto;
    background:repeating-linear-gradient(45deg,#26282b,#26282b 2px,#222427 2px,#222427 14px);
    padding:40px 16px 104px; --vw:1112px;
  }
  #stage[data-vp="tablet-ls"] .device{
    width:1112px; max-width:none; height:834px; min-height:0; margin:0 auto;
    /* the bezel is the scroll container, so the sticky .overlay-layer pins its
       rail/TOC/panels to the bezel automatically — no transform, no JS offset */
    --port-h:834px;
    border:none; border-radius:26px; overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    box-shadow:0 40px 80px -20px rgba(0,0,0,.6), 0 0 0 14px #0b0b0c, 0 0 0 16px #303034;
    background:var(--bg);
  }

  /* Not enough room for an 800px article + side TOC (e.g. the embedded
     preview frame). Hide the desktop TOC rather than let it overflow —
     mirrors the real WoS Article, which drops the rail below 920px. */
  @media (max-width:820px){
    [data-vp="desktop"] .toc-strip{ display:none !important; }
  }

  .preview-toggle{
    position:fixed;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    z-index:200;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.04em;
    color:var(--fg);
    background:var(--bg);
    border:1px solid var(--fg);
    padding:8px 14px;
    cursor:pointer;
  }

  /* ---- article body ---- */
  .article{
    padding:28px 20px 80px;
  }
  .kicker{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.08em;
    color:var(--accent);
    margin-bottom:10px;
  }
  h1.headline{
    font-family:var(--display);
    font-size:34px;
    font-weight:var(--wt-display);
    line-height:1.12;
    margin:0 0 18px;
  }
  /* larger title on desktop/landscape; give it the full content-block width
     (same breakout as the hero) so long titles stay on one line, left-aligned. */
  [data-vp="desktop"] h1.headline, [data-vp="tablet-ls"] h1.headline{
    font-size:48px;
    width:min(
      calc(var(--art-w) + var(--toc-w) + 16px),
      calc(var(--vw) - clamp(90px, calc(var(--vw) * .08), 130px) - 48px)
    );
    max-width:none;
  }
  /* subtitle/dek: larger on desktop and matched to the title's width */
  [data-vp="desktop"] #h-overview, [data-vp="tablet-ls"] #h-overview{
    font-size:28px !important;
    line-height:1.35 !important;
    width:min(
      calc(var(--art-w) + var(--toc-w) + 16px),
      calc(var(--vw) - clamp(90px, calc(var(--vw) * .08), 130px) - 48px)
    );
    max-width:none;
  }
  .byline{
    font-family:var(--serif);
    font-size:16px;
    letter-spacing:0.03em;
    color:var(--faded);
    margin-bottom:28px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 14px;
  }
  /* On wider screens give the byline the same breakout canvas as the hero and
     headline (it sits above the fold, before the TOC reveals) so the full
     facts + share row stays on one line even in a narrow reading column. */
  [data-vp="desktop"] .byline,
  [data-vp="tablet-ls"] .byline{
    width:min(
      calc(var(--art-w) + var(--toc-w) + 16px),
      calc(var(--vw) - clamp(90px, calc(var(--vw) * .08), 130px) - 48px)
    );
    max-width:none;
    flex-wrap:nowrap;
  }
  /* the fact line never breaks; each field holds one row */
  .byline-author, .byline-date, .byline-read{ min-width:0; white-space:nowrap; }
  /* tablet portrait has no breakout; tighten the inter-field gap so the extra
     date/read fields still hold one line at ~768px. */
  [data-vp="tablet"] .byline{ column-gap:8px; }
  /* the date/read group flows inline on desktop/tablet, and becomes its own
     row on phone (see below). */
  .byline-dt{ display:contents; }
  /* the author name links to the author's site; a red text-underline hugs it. */
  .author-link{
    color:inherit;
    text-decoration:underline;
    text-decoration-color:var(--accent);
    text-decoration-thickness:1.5px;
    text-underline-offset:2px;
  }
  .byline .sep{
    color:var(--accent);
    font-size:14px;
    line-height:1;
    vertical-align:middle;
    position:relative;
    top:-1px;
    margin:0 8px;
  }
  /* Mobile byline: three rows — "By {author}" (the name is a red-underlined
     link), then "{date} • {read}", then the share icon row, with a generous
     even rhythm. */
  [data-vp="phone"] .byline{
    flex-direction:column;
    align-items:flex-start;
    row-gap:14px;
    column-gap:0;
    margin-bottom:30px;
  }
  [data-vp="phone"] .byline .sep{ margin:0 9px; }
  [data-vp="phone"] .byline-author{ font-size:17px; line-height:1.2; }
  [data-vp="phone"] .byline-author::before{ content:"By "; }
  [data-vp="phone"] .author-link{ color:var(--fg); }
  [data-vp="phone"] .byline-lead-sep{ display:none; }
  [data-vp="phone"] .byline-dt{ display:flex; align-items:center; font-size:16px; }
  /* drop the "Share this article:" label on phone; the icon row stands alone */
  [data-vp="phone"] .byline-share-label{ display:none; }
  [data-vp="phone"] .byline-actions{ gap:8px; margin-left:-5px; }
  [data-vp="phone"] .ml-share{ width:24px; height:24px; }
  [data-vp="phone"] .ml-share svg{ width:14px; height:14px; }
  .byline-actions{
    display:inline-flex;
    align-items:center;
    gap:2px;
  }
  .byline-share-label{
    font-family:var(--serif);
    font-size:16px;
    letter-spacing:0.03em;
    color:var(--faded);
    margin-right:8px;
  }
  /* hairline divider separating facts from share actions (wide only) */
  [data-vp="desktop"] .byline-actions::before,
  [data-vp="tablet-ls"] .byline-actions::before{
    content:"";
    width:1px;
    height:15px;
    background:var(--border);
    margin-right:10px;
  }
  .ml-share{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    padding:0;
    border:none;
    background:none;
    color:var(--faded);
    cursor:pointer;
    border-radius:6px;
    transition:color .15s, background .15s;
    -webkit-tap-highlight-color:transparent;
  }
  .ml-share svg{ width:17px; height:17px; display:block; }
  .ml-share svg.filled{ fill:currentColor; stroke:none; }
  .ml-share svg:not(.filled){ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .ml-share:hover{ color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
  .ml-share::after{
    content:attr(data-tip);
    position:absolute;
    bottom:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%) translateY(3px);
    background:var(--fg);
    color:var(--bg);
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.02em;
    line-height:1;
    white-space:nowrap;
    padding:5px 7px;
    border-radius:5px;
    opacity:0;
    pointer-events:none;
    transition:opacity .14s, transform .14s;
    z-index:5;
  }
  .ml-share:hover::after,
  .ml-share:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); }
  .article p{
    font-size:17px;
    line-height:1.65;
    color:var(--fg);
    margin:0 0 20px;
  }
  /* red dropcap on the first body paragraph (desktop / landscape only) */
  [data-vp="desktop"] #articleBody > p:first-of-type::first-letter,
  [data-vp="tablet-ls"] #articleBody > p:first-of-type::first-letter{
    float:left;
    font-family:var(--display);
    font-weight:600;
    font-size:3.5em;
    line-height:0.72;
    padding:6px 12px 0 0;
    color:var(--accent);
  }
  .article h2{
    font-family:var(--display);
    font-size:24px;
    font-weight:var(--wt-display);
    margin:36px 0 14px;
  }
  .article h3{
    font-family:var(--display);
    font-size:19px;
    font-weight:var(--wt-display);
    margin:28px 0 10px;
  }
  /* keep native anchor jumps (TOC links, copied heading anchors) clear of the
     sticky masthead. Dynamically-loaded headings carry an inline scroll-margin-top;
     this covers the static "credit" headings, which do not. */
  .article h2[id], .article h3[id]{ scroll-margin-top:120px; }
  .overview-marker{
    font-style:italic;
    color:var(--faded);
    margin-bottom:28px;
  }

  .annot{
    margin:40px auto 0;
    max-width:430px;
    background:var(--hover);
    border:1px solid var(--border);
    padding:16px 18px;
    font-family:var(--mono);
    font-size:12px;
    line-height:1.6;
    color:var(--faded);
  }
  .annot b{color:var(--fg);}
  /* width control only meaningful on desktop */
  #settingsWidthRow{ display:none; }
  [data-vp="desktop"] #settingsWidthRow, [data-vp="tablet-ls"] #settingsWidthRow{ display:flex; }

  /* ---- reading mode ----
     deliberately does NOT hide .rail — the live personal-site version hides
     its left icon strip (article-sidebar) in reading mode, which also hides
     the only control that can exit it on desktop. keeping the rail visible
     here means there's always a way back out, plus the reading-mode switch
     inside the settings panel as a second path. */
  body.reading-mode .masthead{ display:none !important; }
  body.reading-mode .toc-strip{ display:none !important; }
  body.reading-mode .article{
    max-width:640px;
    margin:0 auto;
  }
  body.reading-mode .article p,
  body.reading-mode .article li{
    font-size:20px;
    line-height:1.85;
  }
  body.reading-mode .article blockquote p{
    font-size:19px;
  }
  .rail-icon#readingModeBtn.active{ color:var(--accent); }
  /* ---- heading anchors ---- */
  .heading-anchor{
    display:inline-flex; align-items:center; vertical-align:middle;
    background:none; border:none; cursor:pointer; padding:0;
    margin-left:.4em; color:var(--faded);
    opacity:0; transition:opacity .15s, color .15s;
    user-select:none; line-height:1; position:relative; top:-.04em;
  }
  .heading-anchor svg{
    width:.7em; height:.7em;
    stroke:currentColor; fill:none; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
  }
  @media(hover:hover){
    .article h2:hover .heading-anchor,
    .article h3:hover .heading-anchor,
    .article h4:hover .heading-anchor{ opacity:1; }
    .heading-anchor:hover{ color:var(--accent); opacity:1; }
  }
  @media(hover:none){ .heading-anchor{ opacity:.3; } }

  /* ---- copy toast ---- */
  .copy-toast{
    position:fixed;
    font-family:var(--mono); font-size:11px;
    pointer-events:none; opacity:0; transition:opacity .2s;
    z-index:9999; white-space:nowrap;
  }
  .copy-toast.show{ opacity:1; }
  /* desktop: bare text next to heading */
  [data-vp="desktop"] .copy-toast{ color:var(--faded); }
  /* phone / tablet: pill near bottom of the screen */
  [data-vp="phone"] .copy-toast,
  [data-vp="tablet"] .copy-toast,
  [data-vp="tablet-ls"] .copy-toast{
    background:var(--fg); color:var(--bg);
    padding:.32rem .65rem;
    bottom:1.75rem;
    left:50%;
    transform:translateX(-50%);
  }
  /* ---- summary block ---- */
  /* "The article starts here" rule — a thin ink line between the byline and the
     summary, so the summary is anchored rather than floating in open space. */
  .article-start-rule{
    border:none;
    border-top:1px solid var(--fg);
    margin:18px 0 16px;
    width:100%;
  }
  /* span the header-block width (matching the hero/title/byline breakout) so the
     rule reads as the bottom edge of the article header, closing the header
     block; a reading-column-width rule looks indented under the wider byline. */
  [data-vp="desktop"] .article-start-rule,
  [data-vp="tablet-ls"] .article-start-rule{
    width:min(
      calc(var(--art-w) + var(--toc-w) + 16px),
      calc(var(--vw) - clamp(90px, calc(var(--vw) * .08), 130px) - 48px)
    );
    margin:20px 0 18px;
  }

  /* Lightweight summary disclosure: a plain Newsreader "Summary" line with a
     filled triangle (ink when closed; accent-red and rotated down when open).
     No chrome in the default state — the summary reveals into a bordered box. */
  .summary-block{
    margin:1.3rem 0 1.6rem;
  }
  .summary-toggle{
    list-style:none;
    display:inline-flex;
    align-items:center;
    cursor:pointer;
    font-family:var(--serif);
    font-size:16px;
    letter-spacing:.01em;
    color:var(--faded);
    user-select:none;
  }
  .summary-toggle::-webkit-details-marker{ display:none; }
  .summary-toggle::marker{ display:none; }
  .summary-caret{
    width:0;
    height:0;
    border-left:6px solid var(--fg);
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    margin-left:9px;
    display:inline-block;
    transition:transform .2s ease, border-left-color .2s ease;
  }
  .summary-block[open] .summary-caret{
    transform:rotate(90deg);
    border-left-color:var(--accent);
  }
  .summary-body{
    margin-top:.7rem;
    padding:.85rem 1rem;
    border:1px solid var(--border);
    font-family:var(--serif);
    font-size:15px;
    line-height:1.7;
    color:var(--faded);
  }
  /* ---- lead gauge hero ---- */
  .lead-media{ width:100%; aspect-ratio:1600 / 1080; overflow:hidden; background:#FAB81F; border:1px solid var(--border); margin:6px 0 22px; position:relative; }
  .lead-media canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  /* desktop: 5:4 hero that breaks out of the reading column to the right so it
     spans the body column AND the TOC region (no landing whitespace). The TOC is
     hidden until you scroll past the summary, by which point the hero is gone, so
     they never overlap. Width = content-left -> TOC-right, clamped to the viewport. */
  [data-vp="desktop"] .lead-media, [data-vp="tablet-ls"] .lead-media{
    aspect-ratio:16 / 9;
    width:min(
      calc(var(--art-w) + var(--toc-w) + 16px),
      calc(var(--vw) - clamp(90px, calc(var(--vw) * .08), 130px) - 48px)
    );
    max-width:none;
  }
  .article ol{ font-size:17px; line-height:1.62; color:var(--fg); margin:0 0 20px; padding-left:22px; }
  .article ol li{ margin:0 0 10px; }

  /* Footer control hovers as CSS (:hover for desktop/tap, :active for touch &
     hold), matching the homepage footer. Replaces the old inline onmouseenter/
     onmouseleave so it works on touch; the MCF sigil snaps (no transition). */
  .foot-totop:hover, .foot-totop:active { background:var(--fg) !important; color:var(--bg) !important; }
  .foot-sub:hover, .foot-sub:active { background:var(--accent) !important; border-color:var(--accent) !important; color:#FCFBF7 !important; }
  .mcf-mini:hover, .mcf-mini:active { background:var(--fg) !important; color:var(--bg) !important; }
  .mcf-mini:hover [data-sigil], .mcf-mini:active [data-sigil] { background:var(--bg) !important; }

  /* ---- reader footer: match the homepage footer on phone ----
     hide the orbit ring, tighten padding, and stack the subscribe row + bottom
     bar so the reading footer reads the same as the home footer on mobile. */
  /* !important: the footer markup carries inline styles that would otherwise win.
     min-height 224 = the homepage bar's rendered height (its content-box
     min-height:150 + 74px vertical padding). The reader box is border-box, so we
     set the resolved height directly — this gives the same space above the
     bottom-anchored globe, so the back-to-top (translateY 48) lands identically. */
  #stage[data-vp="phone"] .foot-bar{ padding:30px 18px !important; gap:22px !important; }
  #stage[data-vp="phone"] .foot-ring{ display:none !important; }
  #stage[data-vp="phone"] .wos-foot form > div{ flex-direction:column !important; }
  #stage[data-vp="phone"] .wos-foot form button{ width:100% !important; justify-content:center !important; }
  #stage[data-vp="phone"] .foot-bot{ padding:34px 24px 40px !important; flex-wrap:nowrap !important; gap:16px !important; min-height:224px !important; }
  #stage[data-vp="phone"] #g-foot-m{ align-self:flex-end !important; margin-left:-12px !important; margin-bottom:12px !important; }
  #stage[data-vp="phone"] #g-foot-d{ display:none !important; }
  #stage[data-vp="phone"] #g-foot-m{ display:inline-flex !important; }
  /* drop the back-to-top below the globe's top; translateY so nothing reflows */
  #stage[data-vp="phone"] .foot-bot > div:last-child > 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) */
  #stage[data-vp="phone"] .foot-bot > div:last-child > div:last-child{ margin-bottom:12px !important; }

  /* Viewport-driven fallback for the footer parity, independent of the [data-vp]
     attribute: guarantees the reading footer matches the home footer on any real
     narrow screen even if the reader's vp bookkeeping is off. */
  @media (max-width: 759px){
    .foot-bar{ padding:30px 18px !important; gap:22px !important; }
    .foot-ring{ display:none !important; }
    .wos-foot form > div{ flex-direction:column !important; }
    .wos-foot form button{ width:100% !important; justify-content:center !important; }
    .foot-bot{ padding:34px 24px 40px !important; flex-wrap:nowrap !important; gap:16px !important; min-height:224px !important; }
    #g-foot-m{ align-self:flex-end !important; margin-left:-12px !important; margin-bottom:12px !important; }
    #g-foot-d{ display:none !important; }
    #g-foot-m{ display:inline-flex !important; }
    .foot-bot > div:last-child > span[role="button"]{ transform:translateY(48px) !important; }
    .foot-bot > div:last-child > div:last-child{ margin-bottom:12px !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; }

/* Print-only elements: hidden on screen, shown by the @media print block below. */
.print-masthead, .print-url { display: none; }

/* ==========================================================================
   PRINT  ·  Send-to-Kindle  ·  read-later capture
   Strip every piece of app chrome and lay the article out as a clean,
   black-on-white document. This is what browsers' Print / "Save as PDF" and
   Amazon's Send-to-Kindle capture use. Theme tokens are forced to a light,
   ink-friendly palette so printing from dark or paper mode still comes out on
   white paper.
   ========================================================================== */
@media print {
  /* Light, ink-friendly palette regardless of the on-screen theme. */
  :root,
  html[data-theme="dark"],
  html[data-theme="paper"] {
    --bg: #ffffff !important;  --fg: #111111 !important;  --faded: #555555 !important;
    --border: #cccccc !important; --imgline: #111111 !important; --hover: #ffffff !important;
    /* keep the vermilion accent so print still reads as the site */
    --accent: #E34234 !important; color-scheme: light !important;
  }
  html, body { background: #fff !important; color: #111 !important; }

  @page { margin: 18mm 16mm; }

  /* Hide app chrome: device frame, header, rails, TOC, menu, panels, footer,
     the byline share row, and the in-heading anchor buttons. */
  .vpbar, .urlbar, .overlay-layer, .masthead, .rail, .toc-strip, #tocStrip,
  #wosMenu, .copy-toast, .share-panel, .settings-panel, .wos-foot,
  .byline-actions, .byline-share-label, .heading-anchor, .article-start-rule {
    display: none !important;
  }

  /* Let the document flow on the page instead of inside the mock browser. */
  #stage, .device, .stack {
    display: block !important; position: static !important; overflow: visible !important;
    width: auto !important; max-width: none !important; height: auto !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    box-shadow: none !important; background: #fff !important; border-radius: 0 !important;
  }

  /* Article: full width, comfortable measure. */
  .article {
    max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
  }

  /* Use the full page width: the on-screen reading measure / side-TOC breakout
     constrains the title, subtitle and body narrower than the page, so reset them
     to auto — they then wrap only when they truly reach the page edge. */
  .headline, h1.headline, #h-overview, .byline, #articleBody, .summary-block {
    width: auto !important; max-width: none !important;
    margin-left: 0 !important; margin-right: 0 !important; left: auto !important; right: auto !important;
  }

  /* Masthead lockup so the print reads as the site: wordmark left, article URL
     right (opposite the wordmark, on the same line). */
  .print-masthead {
    display: flex !important; align-items: center; justify-content: space-between; gap: 16px;
    padding-bottom: 10pt; margin-bottom: 16pt; border-bottom: 1.5pt solid var(--accent);
  }
  .print-brand { display: flex !important; align-items: center; gap: 10px; }
  .print-globe { width: 26px; height: 26px; flex-shrink: 0; }
  .print-wordmark {
    font-family: var(--display); font-weight: 600; font-size: 15pt; letter-spacing: 0.01em; color: #111;
  }
  .print-wordmark .of { font-style: italic; font-weight: 500; color: var(--accent); }
  .print-url {
    display: inline-block !important; font-family: var(--mono); font-size: 9pt;
    letter-spacing: 0.01em; color: #777 !important; white-space: nowrap; text-align: right;
  }

  .kicker {
    font-family: var(--mono); font-size: 10pt; letter-spacing: 0.02em;
    text-transform: none !important; color: var(--accent) !important; margin: 0 0 6pt;
  }

  /* Hero: keep it — it's a big part of the site's feel. Print its colours
     (canvas pixels always print; force any CSS background through too). */
  .lead-media {
    display: block !important; position: relative !important;
    width: 100% !important; max-width: 100% !important; aspect-ratio: 16 / 9 !important;
    height: auto !important; overflow: hidden !important; margin: 0 0 16pt !important;
    break-inside: avoid; page-break-inside: avoid;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  /* Heroes sit in a fixed 16/9 field, contained so they never distort or crop —
     whether an image hero, or a canvas scene the reader script freezes to an <img>
     for print (freezing captures the exact on-screen composition and prints a plain
     PNG, which every PDF engine handles). */
  .lead-media img {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; object-fit: contain !important;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  /* A frozen canvas scene fills its frame more boldly than the sparse line-art
     image heroes; pad it in so it reads with the same airiness. The surrounding
     area shows the article colour (the hero background), so it stays seamless. */
  .lead-media img.wos-hero-frozen { padding: 10% 13% !important; box-sizing: border-box !important; }
  /* Fallback for a canvas that wasn't frozen (e.g. JS disabled): fill, no stretch. */
  .lead-media canvas {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .headline {
    font-family: var(--display); font-weight: 700; font-size: 26pt; line-height: 1.08;
    margin: 0 0 8pt; color: #111 !important; break-after: avoid;
  }
  #h-overview {
    font-size: 13pt !important; line-height: 1.4 !important; opacity: 1 !important;
    color: #333 !important; margin: 0 0 10pt !important;
  }
  .byline { font-family: var(--mono); font-size: 10pt; color: #555 !important; margin: 0 0 4pt; }
  .byline a { color: #555 !important; text-decoration: none !important; }
  /* Tighter interpuncts than the on-screen 8px. */
  .byline .sep { font-size: 9pt !important; margin: 0 5px !important; top: 0 !important; }

  /* Summary: the "Summary" label as a heading, then a padded text box. Keep the
     whole block on one page instead of splitting the box across a page break. */
  .summary-block { border: 0 !important; margin: 0 0 14pt; break-inside: avoid; page-break-inside: avoid; }
  .summary-caret { display: none !important; }
  .summary-toggle {
    display: block !important; cursor: default !important;
    font-family: var(--display); font-weight: 600; font-size: 13pt;
    color: #111 !important; margin: 0 0 6pt;
  }
  .summary-body {
    display: block !important; margin: 0 !important; padding: 10pt 12pt !important;
    border: 1px solid #bbb !important; font-family: var(--serif); font-size: 11pt;
    line-height: 1.5; color: #333 !important; break-inside: avoid; page-break-inside: avoid;
  }

  /* Body prose. */
  #articleBody { font-family: var(--serif); font-size: 11.5pt; line-height: 1.5; color: #111 !important; }
  #articleBody p, #articleBody li { font-size: 11.5pt !important; line-height: 1.5 !important; orphans: 3; widows: 3; }
  #articleBody h2 { font-family: var(--display); font-size: 17pt; margin: 16pt 0 6pt; break-after: avoid; page-break-after: avoid; }
  #articleBody h3 { font-family: var(--display); font-size: 13.5pt; margin: 12pt 0 5pt; break-after: avoid; page-break-after: avoid; }
  #articleBody figure, #articleBody img, #articleBody blockquote, #articleBody table {
    break-inside: avoid; page-break-inside: avoid; max-width: 100% !important;
  }
  #articleBody img { height: auto !important; }
  #articleBody a { color: #111 !important; text-decoration: underline; }
  /* Spell out external link targets so a printed copy is still useful. */
  #articleBody a[href^="http"]::after {
    content: " (" attr(href) ")"; font-size: 9pt; color: #666; word-break: break-all;
  }

  /* Brand line at the very end (the article URL sits under the byline instead). */
  .article::after {
    content: "World of Systems";
    display: block; margin-top: 18pt; padding-top: 8pt; border-top: 1px solid #ccc;
    font-family: var(--mono); font-size: 9pt; color: #777;
  }
}

/* ===== Accessibility: prefers-reduced-motion =====
   Same blanket rule as index.css: all animations and transitions on the reader
   are cosmetic, so snap everything to its final state under reduced motion.
   !important overrides inline styles too (menu overlay, TOC accordion, the
   JS-set footerRingSpin on the footer globe). The subscribe ring-art's SMIL
   animateTransform is guarded in the reader's inline script instead. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto !important; }
}