/* cyrillic-ext */
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/1d85132de2e7.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: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/7a2e3ae60297.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/7a821e38eee1.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/b4c43da24698.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* symbols2 */
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/c00d6f50ee52.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/607398848e24.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: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/f96771905c97.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: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ba87070dfc75.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: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/5dee5e8d3615.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/bc037cbafb2e.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fd7a5f7565fe.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* symbols2 */
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/967799e69dd9.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/8c796918f5f5.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: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/8cd93d86274f.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;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/16e8268fd11b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/62ad3b9a3046.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: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dc398705b052.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: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/682cdaa40af6.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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/16e8268fd11b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/62ad3b9a3046.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: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/dc398705b052.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: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/682cdaa40af6.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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/83c9b6204609.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/e510419bc627.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: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/99a7c18e5b3d.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: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/daeff530b773.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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/83c9b6204609.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/e510419bc627.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: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/99a7c18e5b3d.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: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/daeff530b773.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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/83c9b6204609.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/e510419bc627.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: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/99a7c18e5b3d.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: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/daeff530b773.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/0b64856909e0.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/abd60509d5b0.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/0b64856909e0.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/abd60509d5b0.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;
}


  * { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
  :root { --bg:#FFFFFF; --fg:#030303; --accent:#B0552E; --surface:#FFFFFF; --hair:#EAEAEA; --muted:#6B6B6B; --divider:#D6D6D6; }
  /* Pre-paint dark: html[data-theme="alt"] is set by an inline <head> script
     before first render, so dark readers never see a light flash. */
  :root[data-theme="alt"] { --bg:#000000; --fg:#FFFFFF; --accent:#D98A5E; --surface:#000000; --hair:rgba(255,255,255,0.14); --muted:rgba(255,255,255,0.56); --divider:rgba(255,255,255,0.20); background:#000000; }
  [data-site][data-theme="alt"] { --bg:#000000; --fg:#FFFFFF; --accent:#D98A5E; --surface:#000000; --hair:rgba(255,255,255,0.14); --muted:rgba(255,255,255,0.56); --divider:rgba(255,255,255,0.20); }
  [data-burger] { display:none; }
  [data-notch] { display:none; }
  @media (max-width: 759.98px) { [data-stage] {
    background: repeating-linear-gradient(45deg,#26282b,#26282b 2px,#222427 2px,#222427 14px) !important;
    padding: 44px 16px !important;
  } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-stage] {
    background: repeating-linear-gradient(45deg,#26282b,#26282b 2px,#222427 2px,#222427 14px) !important;
    padding: 44px 16px !important;
  } }
  @media (max-width: 759.98px) { [data-deskonly] { display:none !important; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-deskonly] { display:none !important; } }
  @media (max-width: 759.98px) { [data-chrome] { display:none !important; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-chrome] { display:none !important; } }
  @media (max-width: 759.98px) { [data-stage] [data-frame] {
    width:393px !important; max-width:393px !important; height:852px !important; margin:0 auto !important;
    background:#0a0a0a !important; border:none !important; border-radius:56px !important; padding:13px !important;
    box-shadow:0 50px 90px -20px rgba(0,0,0,0.65), 0 0 0 2px #2c2c2e, inset 0 0 0 2px #000 !important; position:relative !important;
  } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-stage] [data-frame] {
    width:834px !important; max-width:100% !important; height:1112px !important; margin:0 auto !important;
    background:#0a0a0a !important; border:none !important; border-radius:34px !important; padding:16px !important;
    box-shadow:0 50px 90px -20px rgba(0,0,0,0.65), 0 0 0 2px #2c2c2e, inset 0 0 0 2px #000 !important; position:relative !important;
  } }
  @media (max-width: 759.98px) { [data-stage] [data-notch] {
    display:block; position:absolute; top:13px; left:50%; transform:translateX(-50%);
    width:124px; height:33px; background:#000; border-radius:0 0 20px 20px; z-index:50;
  } }
  @media (max-width: 759.98px) { [data-stage] [data-scroll] {
    width:100%; height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
    background:var(--bg); position:relative; transform:translateZ(0);
  } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-stage] [data-scroll] {
    width:100%; height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
    background:var(--bg); position:relative; transform:translateZ(0);
  } }
  @media (max-width: 759.98px) { [data-stage] [data-scroll] { border-radius:44px; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-stage] [data-scroll] { border-radius:20px; } }
  /* tablet */
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-mast] { padding:30px 32px 24px !important; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-lead] { grid-template-columns:330px 1fr !important; gap:30px !important; padding:32px !important; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-artgrid] { grid-template-columns:1fr 1fr !important; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-sub] { padding:48px 32px !important; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-foot-d] { padding:44px 32px 40px !important; } }
  /* phone */
  @media (max-width: 759.98px) { [data-navtext] { display:none !important; } }
  @media (max-width: 759.98px) { [data-burger] { display:inline-flex !important; } }
  @media (max-width: 759.98px) { [data-hdr] { padding:52px 18px 16px !important; } }
  @media (max-width: 759.98px) { [data-wm] { font-size:22px !important; } }
  @media (max-width: 759.98px) { [data-mast] { flex-direction:column !important; align-items:flex-start !important; gap:16px !important; padding:26px 18px 20px !important; } }
  @media (max-width: 759.98px) { [data-mast-name] { font-size:2.4rem !important; } }
  @media (max-width: 759.98px) { [data-chips] { justify-content:flex-start !important; } }
  @media (max-width: 759.98px) { [data-lead] { grid-template-columns:1fr !important; gap:20px !important; padding:26px 18px 30px !important; } }
  @media (max-width: 759.98px) { [data-leadimg] { max-width:300px !important; } }
  @media (max-width: 759.98px) { [data-lead-title] { font-size:2rem !important; } }
  @media (max-width: 759.98px) { [data-artgrid] { grid-template-columns:1fr !important; } }
  @media (max-width: 759.98px) { [data-sub] { flex-direction:column !important; flex-wrap:nowrap !important; align-items:flex-start !important; justify-content:flex-start !important; padding:44px 20px !important; gap:18px !important; } }
  @media (max-width: 759.98px) { [data-sub] > div:first-child { flex:0 0 auto !important; width:100% !important; } }
  @media (max-width: 759.98px) { [data-sub] form { width:100% !important; flex:0 0 auto !important; } }
  @media (max-width: 759.98px) { [data-sub-title] { font-size:29px !important; } }
  /* Footer: desktop layout by default, stacked mobile layout on phones. */
  @media (max-width: 759.98px) { [data-foot-d] { display:none !important; } }
  @media (max-width: 759.98px) { [data-foot-m] { display:flex !important; } }
  [data-site][data-theme="alt"] [data-sectmark] { color:var(--accent) !important; }
  /* ===== live deploy: real-width responsive, no device bezel, no faux chrome ===== */
  [data-stage] { background:none !important; padding:0 !important; }
  @media (max-width: 759.98px) { [data-stage] { background:none !important; padding:0 !important; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-stage] { background:none !important; padding:0 !important; } }
  [data-notch], [data-chrome], [data-deskonly] { display:none !important; }
  @media (max-width: 759.98px) { [data-stage] [data-frame] {
    width:100% !important; max-width:none !important; height:100vh !important; height:100dvh !important;
    margin:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important;
    border:none !important; background:var(--bg) !important;
  } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-stage] [data-frame] {
    width:100% !important; max-width:none !important; height:100vh !important; height:100dvh !important;
    margin:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important;
    border:none !important; background:var(--bg) !important;
  } }
  @media (max-width: 759.98px) { [data-stage] [data-scroll] { border-radius:0 !important; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-stage] [data-scroll] { border-radius:0 !important; } }

/* ============================================================================
   De-mockup shell overrides — strip the design-tool browser/phone frame so the
   real site renders full-bleed (see index.css for the full explanation).
   ========================================================================== */
html, body { background: var(--bg); }
html[data-theme="alt"], html[data-theme="alt"] body { background: #000000; }
[data-stage] { background: var(--bg) !important; padding: 0 !important; min-height: 100vh !important; }
[data-frame] { max-width: none !important; margin: 0 !important; border: none !important;
               border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
[data-chrome], [data-notch], [data-deskonly] { display: none !important; }
[data-scroll] { border-radius: 0 !important; }
/* CRITICAL: let the page scroll normally on mobile/tablet (was a 100vh internal scroller). */
@media (max-width: 759.98px) { [data-stage] [data-frame] { height: auto !important; min-height: 0 !important; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-stage] [data-frame] { height: auto !important; min-height: 0 !important; } }
@media (max-width: 759.98px) { [data-stage] [data-scroll] { height: auto !important; overflow: visible !important; -webkit-overflow-scrolling: auto !important; transform: none !important; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-stage] [data-scroll] { height: auto !important; overflow: visible !important; -webkit-overflow-scrolling: auto !important; transform: none !important; } }
@media (max-width: 759.98px) { [data-hdr] { padding: 18px 18px 16px !important; } }

/* ---- Topic layout polish (post-QA) ---- */
/* Featured lead: top-align the text column with the hero image top (was
   vertically centered, leaving a large gap above the "Featured" label). */
[data-lead] { align-items: start !important; }
/* Card grid: when a topic has only 2 tail cards, use 2 columns so they fill the
   row instead of leaving an empty, bordered 3rd column; drop hanging borders. */
[data-artgrid]:has(> :last-child:nth-child(2)) { grid-template-columns: 1fr 1fr !important; }
[data-artgrid] > *:nth-child(3n), [data-artgrid] > *:last-child { border-right: none !important; }
@media (max-width: 759.98px) { [data-stage][data-stage] [data-artgrid] > * { border-right: none !important; } }
/* a topic with exactly 2 tail cards must still collapse to one column on phone
   (overrides the :has(2 items) two-column rule above) */
@media (max-width: 759.98px) { [data-stage][data-stage] [data-artgrid] { grid-template-columns:1fr !important; } }
/* "Read →" CTA on tail cards: mobile/tablet only (desktop relies on hover). */
@media (max-width: 759.98px) { [data-topic-read] { display:inline-block !important; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-topic-read] { display:inline-block !important; } }
/* ============================================================================
   Unified nav (ported from the home page): a single hamburger + search icon on
   every viewport, opening the full-page sheet (Topics/Archive/About/Subscribe +
   a Light/Dark toggle). The old exposed desktop rail is retired.
   ========================================================================== */
[data-frame] { position:relative; }
/* phone: search sits beside the hamburger; wordmark stays left */
@media (max-width: 759.98px) { [data-navtext] { display:none !important; } }
@media (max-width: 759.98px) { [data-burger] { display:inline-flex !important; } }
@media (max-width: 759.98px) { [data-mob-actions] { display:flex !important; align-items:center; gap:8px; } }
@media (max-width: 759.98px) { [data-hdr-search] { display:inline-flex !important; align-items:center; justify-content:center; } }
@media (max-width: 759.98px) { [data-stage] [data-hdr] { position:relative; } }
@media (max-width: 759.98px) { [data-stage].hdr-searching [data-hdr-searchbar] { display:flex !important; } }
@media (max-width: 759.98px) { [data-stage].hdr-searching [data-mob-actions] { visibility:hidden; } }
[data-hdr-search-input]::placeholder { color:var(--muted); opacity:1; }
/* desktop + tablet: hide the rail, show hamburger + search icon */
@media (min-width: 760px) { [data-stage] [data-navtext] { display:none !important; transition:opacity 0.22s ease; } }
@media (min-width: 760px) { [data-stage] [data-burger] { display:inline-flex !important; } }
@media (min-width: 760px) { [data-stage] [data-mob-actions] { display:flex !important; align-items:center; gap:12px; } }
@media (min-width: 760px) { [data-stage] [data-hdr-search] { display:inline-flex !important; align-items:center; justify-content:center; } }
@media (min-width: 760px) { [data-stage].hdr-searching [data-mob-actions] { visibility:hidden; } }
/* "Search" opens an inline line in the nav footprint (nav fades, wordmark stays) */
@media (min-width: 760px) { [data-stage].hdr-searching [data-hdr] { position:relative; } }
@media (min-width: 760px) { [data-stage].hdr-searching [data-navtext] { opacity:0; pointer-events:none; } }
@media (min-width: 760px) { [data-stage].hdr-searching [data-hdr-searchbar] {
  display:flex !important; position:absolute !important; top:50% !important; right:40px !important; left:auto !important; bottom:auto !important;
  transform:translateY(-50%); width:330px; gap:10px; background:transparent !important; padding:0 0 5px !important;
  border-bottom:1px solid var(--fg); z-index:8; animation:hdrsl-in 0.26s cubic-bezier(.16,1,.3,1);
} }
@keyframes hdrsl-in { from { opacity:0; transform:translate(12px,-50%); } to { opacity:1; transform:translate(0,-50%); } }
@media (min-width: 760px) { [data-stage].hdr-searching [data-hdr-search-input] { font-size:19px; } }
@media (min-width: 760px) { [data-stage].hdr-searching [data-hdr-search-close] svg { width:19px; height:19px; } }

/* ===== full-page sheet ===== */
[data-stage][data-theme="alt"] { --bg:#000000; --fg:#FFFFFF; --accent:#D98A5E; --surface:#000000; --hair:rgba(255,255,255,0.14); --muted:rgba(255,255,255,0.56); --divider:rgba(255,255,255,0.20); }
[data-mobile-nav] { display:none; position:absolute; inset:0; z-index:300; }
[data-mobile-nav].open { display:block; }
[data-mobile-nav] .mobile-nav-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.4); }
[data-mobile-nav] .mobile-nav-drawer { position:absolute; top:0; left:0; right:0; width:100%; max-width:none; height:100%; max-height:100%; overflow-y:auto; background:var(--bg); border-bottom:1px solid var(--fg); display:flex; flex-direction:column; transform:translateY(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1); }
[data-mobile-nav].open .mobile-nav-drawer { transform:translateY(0); }
@media (max-width: 759.98px) { [data-stage] [data-mobile-nav] .mobile-nav-drawer { height:auto; } }
[data-mobile-nav] .mobile-nav-head { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid var(--fg); }
[data-mobile-nav] .mobile-nav-wordmark { display:inline; }
@media (max-width: 759.98px) { [data-stage] [data-mobile-nav] .mobile-nav-head { height:92px; align-items:flex-end; padding-bottom:16px; } }
@media (min-width: 760px) { [data-stage] [data-mobile-nav] .mobile-nav-head { height:auto; padding:22px 40px; } }
@media (min-width: 760px) { [data-stage] [data-mobile-nav] .mobile-nav-wordmark { font-size:27px !important; } }
@media (min-width: 1024px) { [data-stage] [data-mobile-nav] .mobile-nav-wordmark { font-size:31px !important; } }
@media (min-width: 1024px) { [data-stage] [data-mobile-nav] { top:var(--chrome-h, 0px); } }
@media (max-width: 759.98px) { [data-stage] [data-mobile-nav] { top:13px; left:13px; right:13px; bottom:13px; border-radius:44px; overflow:hidden; } }
@media (min-width: 760px) and (max-width: 1023.98px) { [data-stage] [data-mobile-nav] { top:16px; left:16px; right:16px; bottom:16px; border-radius:20px; overflow:hidden; } }
@media (min-width: 760px) { [data-stage].nav-open .nav-burger { opacity:0 !important; pointer-events:none !important; } }
[data-mobile-nav] .nav-x { display:none; }
[data-mobile-nav] .mobile-nav-close { appearance:none; background:none; border:none; cursor:pointer; color:var(--fg); width:32px; height:32px; display:flex; align-items:center; justify-content:center; transition:color .15s; }
[data-mobile-nav] .mobile-nav-close svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; }
[data-mobile-nav] .mobile-nav-links { display:flex; flex-direction:column; align-items:stretch; padding:30px 0 10px; }
[data-mobile-nav] .mnav-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; color:var(--fg); cursor:pointer; font-family:'Playfair Display',serif; font-weight:500; font-size:28px; letter-spacing:-0.02em; line-height:1.14; padding:14px 22px; overflow:hidden; transition:color .12s; }
@media (hover: hover) { [data-mobile-nav] .mnav-row:hover { color:var(--accent); } }
[data-mobile-nav] .mnav-row.dcl-press { color:var(--accent); }
[data-mobile-nav] .mnav-row svg { stroke:currentColor; }
[data-mobile-nav] .mnav-label { display:inline-block; }
[data-mobile-nav] .mnav-row[data-mtopics] svg { width:0.6em; height:0.6em; flex:none; }
[data-mobile-nav] .mnav-arrow { width:0.72em; height:0.72em; flex:none; }
[data-mobile-nav] [data-mtopics-list] { align-items:flex-start; margin-left:30px; padding:4px 0; border-left:1px solid var(--divider); }
[data-mobile-nav] .mnav-sub { display:flex; align-items:center; justify-content:flex-start; gap:0; width:100%; text-align:left; color:var(--fg); cursor:pointer; font-family:'Playfair Display',serif; font-weight:500; font-size:19px; letter-spacing:-0.02em; padding:8px 22px 8px 14px; transition:transform .18s cubic-bezier(.16,1,.3,1), color .12s; }
@media (hover: hover) { [data-mobile-nav] .mnav-sub:hover { color:var(--accent); transform:translateX(8px); } }
[data-mobile-nav] .mnav-sub.dcl-press { color:var(--accent); transform:translateX(8px); }
[data-mobile-nav] .mnav-dot { color:var(--accent); line-height:1; display:none; }
[data-mobile-nav] .mnav-sub::after { content:"\2794"; order:2; color:var(--accent); font-weight:400; font-size:0.72em; line-height:1; width:0; opacity:0; overflow:hidden; transform:translateX(-4px); transition:width .18s ease, opacity .15s ease, transform .18s ease; }
@media (hover: hover) { [data-mobile-nav] .mnav-sub:hover::after { width:1.05em; margin-left:0.26em; opacity:1; transform:translateX(0); } }
[data-mobile-nav] .mnav-sub.dcl-press::after { width:1.05em; margin-left:0.26em; opacity:1; transform:translateX(0); }
@media (min-width: 760px) { [data-stage] [data-mobile-nav] .mobile-nav-links { padding-top:44px; } }
@media (min-width: 760px) { [data-stage] [data-mobile-nav] .mnav-row { font-size:clamp(34px, 3.2vw, 46px); padding:16px 40px; } }
@media (min-width: 760px) { [data-stage] [data-mobile-nav] .mnav-sub { font-size:24px; padding:10px 40px 10px 20px; } }
@media (min-width: 760px) { [data-stage] [data-mobile-nav] [data-mtopics-list] { margin-left:52px; } }
/* closed state keeps label/arrow hidden so the reveal replays on every open */
[data-mobile-nav] .mnav-label { transform:translateY(200%); }
[data-mobile-nav] .mnav-arrow, [data-mobile-nav] .mnav-row[data-mtopics] [data-mchev] { opacity:0; }
[data-mobile-nav].open .mnav-row .mnav-label { animation:mnav-up .55s cubic-bezier(.16,1,.3,1) calc(.20s + var(--idx,0) * .08s) both; }
[data-mobile-nav].open .mnav-row .mnav-arrow { animation:mnav-arrow-in .42s cubic-bezier(.16,1,.3,1) calc(.30s + var(--idx,0) * .08s) both; }
[data-mobile-nav].open .mnav-row[data-mtopics] [data-mchev] { animation:mnav-fade .42s ease-out .30s both; }
@keyframes mnav-up { from { transform:translateY(200%); } to { transform:translateY(0); } }
@keyframes mnav-arrow-in { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } }
@keyframes mnav-fade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  [data-mobile-nav] .mnav-label { transform:none; }
  [data-mobile-nav] .mnav-arrow, [data-mobile-nav] .mnav-row[data-mtopics] [data-mchev] { opacity:1; }
  [data-mobile-nav].open .mnav-row .mnav-label, [data-mobile-nav].open .mnav-row .mnav-arrow, [data-mobile-nav].open .mnav-row[data-mtopics] [data-mchev] { animation:none; }
}
/* ===== theme control in the sheet footer ===== */
[data-mobile-nav] .mobile-nav-foot { margin-top:auto; display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:16px 20px calc(18px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 760px) { [data-stage] [data-mobile-nav] .mobile-nav-foot { padding:20px 40px; } }
[data-mobile-nav] .theme-select { position:relative; }
[data-mobile-nav] .theme-pill { display:inline-flex; align-items:center; gap:7px; appearance:none; background:transparent; border:1px solid var(--fg); border-radius:0; cursor:pointer; font-family:'Fira Mono',monospace; font-size:12px; letter-spacing:0.01em; color:var(--fg); padding:4px 12px; transition:color .15s ease, border-color .15s ease; }
[data-mobile-nav] .theme-pill .theme-cur { color:var(--fg); }
[data-mobile-nav] .theme-cur > span { display:none; align-items:center; gap:6px; }
[data-mobile-nav] .theme-select[data-mode="light"] .theme-cur > span[data-cur="light"], [data-mobile-nav] .theme-select[data-mode="dark"] .theme-cur > span[data-cur="dark"] { display:inline-flex; }
[data-mobile-nav] .theme-ico { width:13px; height:13px; flex:none; }
@media (hover: hover) { [data-mobile-nav] .theme-pill:hover { color:var(--fg); border-color:var(--accent); } }
[data-mobile-nav] .theme-pill.dcl-press { color:var(--fg); border-color:var(--accent); }

/* ===== de-mockup: anchor the sheet to the VIEWPORT (mirrors index.css) =====
   With the device frame stripped, [data-frame] spans the whole (tall) document,
   so an absolute inset:0 sheet stretched to full page height — the theme pill
   dropped off-screen and the sheet scrolled away with the page. position:fixed
   pins it to the viewport; a scroll-lock freezes the page behind it. */
[data-mobile-nav] { position: fixed !important; }
html:has([data-stage].nav-open), body:has([data-stage].nav-open) { overflow: hidden !important; }
@media (max-width: 759.98px) { [data-mobile-nav] { inset: 0 !important; border-radius: 0 !important; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-mobile-nav] { inset: 0 !important; border-radius: 0 !important; } }
@media (max-width: 759.98px) { [data-mobile-nav] .mobile-nav-drawer { height: 100% !important; max-height: 100% !important; position: relative !important; border-bottom: none !important; } }
  @media (min-width: 760px) and (max-width: 1023.98px) { [data-mobile-nav] .mobile-nav-drawer { height: 100% !important; max-height: 100% !important; position: relative !important; border-bottom: none !important; } }
@media (max-width: 759.98px) { [data-mobile-nav] .mobile-nav-drawer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--fg); pointer-events: none; z-index: 3; } }
@media (max-width: 759.98px) { [data-theme="alt"]  [data-mobile-nav] .mobile-nav-drawer::after { height: 2px; } }
@media (max-width: 759.98px) { [data-mobile-nav] .mobile-nav-head { height: 69px !important; align-items: center !important; padding: 0 18px !important; } }

/* ============================================================================
   Footer parity with the global footer (index.css): back-to-top overtext arrow,
   Mars Code Factory invert-on-hover credit, and the wordmark scramble glyphs.
   Kept identical so the topic footer behaves exactly like the rest of the site.
   ========================================================================== */
.to-top { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; appearance:none; background:transparent; border:none; padding:6px 9px; cursor:pointer; color:var(--fg); -webkit-tap-highlight-color:transparent; }
.to-top .to-top-arrow { flex:none; transition:transform .24s cubic-bezier(.16,1,.3,1), color .18s ease; }
.to-top .to-top-label { position:absolute; right:100%; top:0; bottom:0; margin-right:2px; display:flex; align-items:center; font-family:'Fira Mono',monospace; font-size:11px; letter-spacing:0.04em; color:var(--accent); white-space:nowrap; opacity:0; transform:translateX(5px); transition:opacity .18s ease, transform .22s cubic-bezier(.16,1,.3,1); pointer-events:none; }
@media (hover: hover) {
  .to-top:hover .to-top-arrow { transform:translateY(-4px); color:var(--accent); }
  .to-top:hover .to-top-label { opacity:1; transform:translateX(0); }
}
.to-top.dcl-press .to-top-arrow { transform:translateY(-4px); color:var(--accent); }
.to-top.dcl-press .to-top-label { opacity:1; transform:translateX(0); }
@media (hover: hover) { .mcf-credit:hover { background:var(--accent); color:#fff !important; text-decoration:none; } }
.mcf-credit.dcl-press { background:var(--accent); color:#fff !important; text-decoration:none; }
.scramble-g { color:var(--accent); opacity:0.85; font-size:0.8em; vertical-align:baseline; }
@font-face { font-family:'TG Scramble'; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/360a99fb7123.woff2") format('woff2'); }
.is-scrambling { font-family:'TG Scramble',ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:0.02em; }
/* The glyph cells specifically: wordmarks carry inline Playfair styles that
   beat the element rule above, but the cells have no inline font, so this
   wins over inheritance and the churn always renders from the subset. */
.is-scrambling .scramble-g { font-family:'TG Scramble',ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
@media (prefers-reduced-motion: reduce) { .is-scrambling { font-family:inherit; letter-spacing:normal; } }

/* ============================================================================
   Topic lead + card hover: pure-CSS so it can never stick after the pointer
   leaves (the old JS mouseenter/leave could miss a leave and freeze the effect).
   Only the title turns terracotta; the image tile keeps its hairline — no frame.
   ========================================================================== */
/* Hug each title's box to its own text (not the full card width) so the hover
   target is the title itself, not the card row. */
.topic-lead [data-title], .topic-card [data-title] { width:fit-content; max-width:100%; }
@media (hover: hover) {
  /* Title turns terracotta only when the pointer is directly over the title text
     (!important overrides the inline color:var(--fg)). */
  .topic-lead [data-title]:hover, .topic-card [data-title]:hover { color:var(--accent) !important; }
  /* "Read →" underlines independently — only on its own hover, not the title's. */
  .tp-read:hover { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; }
}

/* Subscribe attention cue (mirrors index.css): hovering the heading nudges the
   eye to the email field with a quiet terracotta pulse. */
@keyframes tg-sub-cue {
  0%, 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent), transparent 100%); }
  50% { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent), transparent 82%); }
}
@media (hover: hover) {
  [data-sub]:has([data-sub-title]:hover) input[type="email"] {
    border-color:var(--accent) !important;
    animation:tg-sub-cue 1.5s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-sub]:has([data-sub-title]:hover) input[type="email"] { animation:none; }
}

/* ===== Reduced motion: site-wide sweep (mirrors index.css). Kills the
   remaining decorative animations and transform-based transitions; short
   opacity/color fades stay. ===== */
@media (prefers-reduced-motion: reduce) {
  /* header search bar: appear in place, no slide-in */
  @media (min-width: 760px) { [data-stage].hdr-searching [data-hdr-searchbar] { animation:none; } }
  /* back-to-top: label/arrow appear without sliding */
  .to-top .to-top-arrow { transition:color .18s ease; }
  .to-top .to-top-label { transition:opacity .18s ease; transform:none; }
  .to-top:hover .to-top-arrow { transform:none; }
  /* mobile nav: drawer + topic sub-links snap instead of sliding */
  [data-mobile-nav] .mobile-nav-drawer { transition:none; }
  [data-mobile-nav] .mnav-sub { transition:color .12s; }
  [data-mobile-nav] .mnav-sub:hover { transform:none; }
  [data-mobile-nav] .mnav-sub::after { transition:none; }
  /* chevrons/carets: rotate instantly (inline styles carry the transition,
     hence the !important) */
  [data-chev], [data-mchev] { transition:none !important; }
}

/* ===== Static shell (multi-page migration) — mirrors index.css. ===== */
.topic-card, .topic-lead { text-decoration:none; color:var(--fg); }
[data-mobile-nav] .mnav-row, [data-mobile-nav] .mnav-sub { text-decoration:none; }
@media (hover: hover) {
  .nav-hu:hover { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:5px; text-decoration-thickness:1px; }
  .accent-hu:hover { color:var(--accent) !important; }
}
[data-dropdown] { display:none; }
@media (hover: hover) {
  .nav-topics:hover [data-dropdown] { display:block; }
  .nav-topics:hover [data-chev] { transform:rotate(0deg) !important; }
}
.dd-item { display:flex; align-items:center; gap:9px; padding:9px 22px; font-family:'Fira Mono',monospace; font-size:13px; color:var(--fg); white-space:nowrap; cursor:pointer; text-decoration:none; }
.dd-dot { color:var(--accent); font-size:16px; line-height:1; }
@media (hover: hover) { .dd-item:hover { color:var(--accent); font-weight:600; } }
.sub-email:focus { border:1px solid var(--accent); border-right:none; }
@media (hover: hover) { .sub-btn:hover { background:var(--accent); border-color:var(--accent); } }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation:tg-vt-out 0.18s ease both; }
::view-transition-new(root) { animation:tg-vt-in 0.18s ease both; }
@keyframes tg-vt-out { from { opacity:1; } to { opacity:0; } }
@keyframes tg-vt-in { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}

/* Shell elements shared with the article header fragment — inert on topic
   pages (no reading progress), but they must not take up flex space. */
.progress-bracket { display:none; }
.hdr-progress { position:absolute; left:0; right:0; bottom:-1px; height:2px; display:none; overflow:hidden; pointer-events:none; z-index:46; }