/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.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: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.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: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.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: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.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: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.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: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.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: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.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: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.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: 500;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.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: 500;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.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: 500;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.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: 500;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.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: 500;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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: 500;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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: 700;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.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: 700;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.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: 700;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.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: 700;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.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: 700;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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: 700;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIOOaBXso.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: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIOuaBXso.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: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIO-aBXso.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: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofINeaB.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: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIOOaBXso.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: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIOuaBXso.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: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIO-aBXso.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: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofINeaB.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: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIOOaBXso.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: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIOuaBXso.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: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIO-aBXso.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: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofINeaB.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: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIOOaBXso.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: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIOuaBXso.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: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofIO-aBXso.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: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/XRXV3I6Li01BKofINeaB.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;
}

/* ==========================================================================
   Soda City Cubing — shared design system
   "Stickerless speedcube": light, minimal, rounded. The six WCA cube colors
   used as a disciplined semantic accent system; a monospace readout for the
   countdown as a quiet nod to the speedcubing timer.
   ========================================================================== */

:root {
    /* Neutrals */
    --paper:      #F3F5FA;
    --card:       #FFFFFF;
    --ink:        #15171E;
    --ink-muted:  #5A6373;
    --ink-faint:  #8A93A3;
    --line:       #E6E9F1;

    /* Cube accents (semantic) */
    --blue:        #0D6E87;
    --blue-strong: #0A5368;
    --blue-tint:   #E2F4F8;
    --green:       #0E8F52;
    --red:         #D8382C;
    --orange:      #E07B12;
    --gold:        #E0A500;
    --gold-ink:    #8A6A00;
    --gold-tint:   #FBF4DD;

    /* Type */
    --font-display: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-body:    'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Shape & depth */
    --radius:    20px;
    --radius-sm: 12px;
    --radius-pill: 999px;
    --shadow:    0 1px 2px rgba(20, 30, 60, .04), 0 10px 30px rgba(20, 30, 60, .06);
    --shadow-lg: 0 2px 6px rgba(20, 30, 60, .06), 0 18px 44px rgba(20, 30, 60, .10);

    --maxw: 920px;
}

/* ---------- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    background-color: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--blue); color: #fff; }

a { color: var(--blue); }

img { max-width: 100%; }

:focus-visible {
    outline: 2.5px solid var(--blue);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Header -------------------------------------------------------- */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px clamp(18px, 4vw, 40px);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: transform .2s ease-out;
}
header.hide-on-mobile { transform: translateY(-100%); }

.header-left { display: flex; align-items: center; gap: 14px; }
.header-left img { height: 46px; width: auto; display: block; }

.header-left h2 {
    position: relative;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
    line-height: 1.1;
}

.header-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.header-nav a {
    text-decoration: none;
    color: var(--ink-muted);
    font-weight: 600;
    font-size: .975rem;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    transition: color .18s, background-color .18s;
}
.header-nav a:hover { color: var(--blue); background: var(--blue-tint); }
.header-nav a:focus-visible { outline-offset: 0; }

/* ---------- Layout & typography ------------------------------------------ */
main { display: block; }

section {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(28px, 5vw, 48px) clamp(18px, 4vw, 24px);
}

h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    text-align: center;
    color: var(--ink);
    margin: 0 0 24px;
}

h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--ink);
}
h2 { font-size: 1.5rem; line-height: 1.25; }
h3 { font-size: 1.2rem; line-height: 1.3; }

p { margin: 0 0 1rem; }

.intro-text { text-align: center; }
.intro-text, .story-text {
    font-size: 1.125rem;
    line-height: 1.75;
    color: #2C3340;
    margin: 0 auto 1.1rem;
    max-width: 70ch;
}
.intro-text a, .story-text a { color: var(--blue); font-weight: 600; }

/* ---------- Buttons ------------------------------------------------------- */
.button-container {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 44px;
}
.nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    background: var(--blue);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(13, 110, 135, .22);
    transition: background-color .18s, transform .18s, box-shadow .18s;
}
.nav-button:hover {
    background: var(--blue-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(13, 110, 135, .28);
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    background: var(--blue);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(13, 110, 135, .22);
    transition: background-color .18s, transform .18s, box-shadow .18s;
}
.action-btn:hover {
    background: var(--blue-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(13, 110, 135, .28);
}

/* ---------- Home: next meeting ------------------------------------------- */
.meeting-heading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 56px 0 18px;
}
.meeting-heading-row h2 { margin: 0; }

.meeting {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px 26px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .25s, box-shadow .25s;
}
.meeting:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.meeting p { margin: 8px 0; color: var(--ink-muted); }
.meeting p strong { color: var(--ink); font-weight: 600; }

#meeting-countdown {
    margin: 0 0 16px;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--blue);
}
#meeting-date, #meeting-time { font-family: var(--font-mono); font-size: .95em; }

#future-meetings-section h2 { text-align: center; margin-top: 30px; }
#future-meetings-list p {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--ink-muted);
}

/* ---------- Calendar buttons & dropdowns --------------------------------- */
.cal-wrap { position: relative; display: inline-block; }
.cal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    background: var(--blue-tint);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}
.cal-btn:hover { background: var(--blue); color: #fff; }
.cal-btn.sm { padding: 5px 11px; font-size: 12px; }

.cal-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 210px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 50;
}
.cal-dropdown.drop-down { bottom: auto; top: calc(100% + 6px); }
.cal-dropdown.open { display: block; }
.cal-dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    transition: background-color .12s;
}
.cal-dropdown-item:hover { background: var(--paper); }
.cal-dropdown-item img { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.cal-dropdown-divider { height: 1px; background: var(--line); margin: 2px 0; }

/* ---------- Home: competition card --------------------------------------- */
.competition-card {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
    padding: 30px 26px;
    background: var(--card);
    border: 1px solid #ECDFB8;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .25s, box-shadow .25s;
}
.competition-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.competition-card h3 {
    margin: 0 0 14px;
    font-size: 1.3rem;
    color: var(--gold-ink);
}
.competition-card p { margin: 7px 0; color: var(--ink-muted); }
.competition-card p strong { color: var(--ink); font-weight: 600; }

.comp-events {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}
.comp-event {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: .75em;
    color: var(--ink-muted);
}
.comp-event .cubing-icon {
    font-size: 34px;
    color: var(--gold-ink);
    filter: invert(45%) sepia(85%) saturate(620%) hue-rotate(5deg) brightness(85%);
}
.comp-event svg { display: block; }

.more-info-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 28px;
    background: var(--blue);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(13, 110, 135, .22);
    transition: background-color .18s, transform .18s, box-shadow .18s;
}
.more-info-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13, 110, 135, .28); }

/* Skeleton shimmer */
@keyframes sk-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } }
.sk {
    background: linear-gradient(90deg, #eef1f7 25%, #e2e6ef 50%, #eef1f7 75%);
    background-size: 1200px 100%;
    animation: sk-shimmer 1.4s linear infinite;
    border-radius: 6px;
}

/* ---------- Story: gallery + lightbox ------------------------------------ */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 40px;
}
.gallery-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.gallery-item img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.gallery-item:hover img { transform: scale(1.05); }
.play-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    background: var(--red);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(216, 56, 44, .4);
}
.play-icon::after {
    content: '';
    width: 0; height: 0;
    border-left: 19px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    margin-left: 5px;
}

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(10, 12, 18, .94);
    align-items: center;
    justify-content: center;
}
.lightbox.active { display: flex; }
.lightbox-content { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: 10px; }
.lightbox-video-container { width: 90%; max-width: 1200px; aspect-ratio: 16/9; }
.lightbox-video-container iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; }
.close-lightbox {
    position: absolute;
    top: 20px; right: 40px;
    color: #fff;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    transition: color .3s;
    z-index: 1001;
}
.close-lightbox:hover { color: #bbb; }

/* ---------- FAQ accordion ------------------------------------------------- */
.faq-item {
    margin-bottom: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: box-shadow .25s;
}
.faq-item:hover { box-shadow: var(--shadow-lg); }
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: var(--font-display);
    font-size: 1.075rem;
    font-weight: 600;
    color: var(--ink);
    padding: 18px 22px;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s;
}
.faq-question:hover { background: var(--paper); }
.faq-question::after {
    content: '+';
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4em;
    font-weight: 500;
    line-height: 1;
    color: var(--blue);
    background: var(--blue-tint);
    border-radius: 50%;
    transition: transform .3s, background-color .2s, color .2s;
}
.faq-question.active::after {
    content: '\2212';
    background: var(--blue);
    color: #fff;
}
.faq-answer {
    font-size: 1.03rem;
    line-height: 1.75;
    color: var(--ink-muted);
    padding: 0 22px;
    max-height: 0;
    overflow: hidden;
    background: #FAFBFE;
    transition: max-height .4s ease-out, padding .4s ease-out;
}
.faq-answer.active { max-height: 2200px; padding: 18px 22px 22px; }
.faq-answer a { color: var(--blue); text-decoration: none; font-weight: 600; }
.faq-answer a:hover { text-decoration: underline; }
.faq-answer ul { margin: 10px 0; padding-left: 22px; }
.faq-answer li { margin: 8px 0; }
.faq-answer img { border-radius: 10px; }

/* ---------- Toast --------------------------------------------------------- */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 14px 26px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    z-index: 1000;
}
.toast.show { opacity: 1; visibility: visible; }

/* ---------- Contact ------------------------------------------------------- */
.contact {
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line);
    padding: 40px 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.social-icons { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 8px; }
.social-row { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.also-on { margin-top: 22px; font-size: 1em; color: var(--ink-muted); }
.also-on a { color: var(--blue); text-decoration: none; font-weight: 600; }
.also-on a:hover { text-decoration: underline; }

.social-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    font-size: 30px;
    color: var(--ink);
    text-decoration: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    transition: transform .25s, box-shadow .25s, color .25s, border-color .25s;
}
.social-icon img { width: 32px; height: 32px; display: block; transition: filter .3s; }
.social-icon:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* Tooltip */
.social-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: var(--ink);
    color: #fff;
    padding: 7px 11px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
}
.social-icon::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.social-icon:hover::after { opacity: 1; transform: translateX(-50%) translateY(-14px); }
.social-icon:hover::before { opacity: 1; }

.social-icon.email:hover    { color: #EA4335; border-color: #EA4335; }
.social-icon svg               { width: 1em; height: 1em; fill: currentColor; display: block; }
.social-icon.tiktok:hover     { color: #111; border-color: #111; }
.social-icon.instagram:hover  { color: #E4405F; border-color: #E4405F; }
.social-icon.youtube:hover    { color: #FF0000; border-color: #FF0000; }
.social-icon.facebook:hover   { color: #1877F2; border-color: #1877F2; }
.social-icon.xtwitter:hover   { color: #1DA1F2; border-color: #1DA1F2; }
.social-icon.groupme img      { filter: none; }
.social-icon.groupme:hover    { border-color: #00AFF0; }
.social-icon.groupme:hover img {
    filter: brightness(0) saturate(100%) invert(47%) sepia(96%) saturate(1876%) hue-rotate(168deg) brightness(101%) contrast(101%);
}

/* Email signup */
.signup-section {
    margin: 50px auto;
    max-width: 600px;
    background: var(--card);
    border: 1px solid var(--line);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.signup-section h2 { text-align: center; margin: 0 0 12px; font-size: 1.6rem; }
.signup-section p { text-align: center; margin: 0 auto 28px; color: var(--ink-muted); max-width: 46ch; }
.signup-form { display: flex; gap: 12px; align-items: stretch; }
.signup-form input[type="email"] {
    flex: 1;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.signup-form input[type="email"]:focus {
    outline: none;
    background: var(--card);
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(13, 110, 135, .14);
}
.signup-form button {
    padding: 14px 28px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    background: var(--blue);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(13, 110, 135, .22);
    transition: background-color .18s, transform .18s, box-shadow .18s;
}
.signup-form button:hover {
    background: var(--blue-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(13, 110, 135, .28);
}
.signup-form button:disabled { background: #c2c8d4; cursor: not-allowed; transform: none; box-shadow: none; }
.signup-message {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    text-align: center;
    font-weight: 500;
    display: none;
}
.signup-message.success { display: block; background: #E6F5EC; color: #0B6B3D; border: 1px solid #BBE3CB; }
.signup-message.error   { display: block; background: #FBEAE8; color: #9A271D; border: 1px solid #F2C7C2; }

/* ---------- Cards: learn / pdfs ------------------------------------------ */
.learn-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 700px;
    margin: 0 auto;
}
.pdf-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    max-width: 800px;
    margin: 0 auto 50px;
}
.learn-card, .pdf-card {
    display: block;
    text-decoration: none;
    color: inherit;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.learn-card { padding: 40px 30px; }
.pdf-card   { padding: 34px 26px; }
.learn-card:hover, .pdf-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: #D5DCEA;
}
.learn-card-icon { font-size: 3.4em; margin-bottom: 18px; }
.pdf-icon { font-size: 3em; margin-bottom: 14px; }
.learn-card h2, .pdf-card h2 { color: var(--ink); margin: 0 0 12px; }
.learn-card h2 { font-size: 1.55rem; }
.pdf-card h2 { font-size: 1.35rem; }
.learn-card p, .pdf-card p { color: var(--ink-muted); margin: 0; line-height: 1.6; }
.pdf-card p { font-size: .95em; }

/* ---------- Algorithm PDF viewer ----------------------------------------- */
.pdf-description {
    text-align: center;
    color: var(--ink-muted);
    margin: 0 auto 28px;
    max-width: 60ch;
    font-size: 1.075em;
}
.pdf-container {
    width: 100%;
    height: 800px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 30px;
    background: var(--card);
}
.pdf-container iframe { width: 100%; height: 100%; border: none; }
.credit { text-align: center; color: var(--ink-faint); font-size: .9em; margin-top: 20px; }

/* ---------- Privacy policy ------------------------------------------------ */
#policy-body h1, #policy-body h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1.75rem 0 .5rem;
    color: var(--ink);
}
#policy-body h3 { font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 .4rem; color: var(--ink); }
#policy-body p { line-height: 1.7; margin: .6rem 0; color: #2C3340; }
#policy-body ul { margin: .5rem 0 .5rem 1.5rem; }
#policy-body li { margin-bottom: .4rem; line-height: 1.6; }
#policy-body a { color: var(--blue); }
#policy-empty { color: var(--ink-faint); font-style: italic; }

/* ---------- Footer -------------------------------------------------------- */
footer {
    text-align: center;
    padding: 32px 20px;
    margin-top: 24px;
    font-size: .9em;
    color: var(--ink-muted);
    border-top: 1px solid var(--line);
}
footer a { color: var(--ink-muted); text-decoration: none; }
footer a:hover { color: var(--blue); }

/* ---------- Page variants ------------------------------------------------- */
.page-learn section,
.page-pdfs section { text-align: center; padding-top: clamp(40px, 8vh, 72px); }
.page-learn .intro-text,
.page-pdfs .intro-text { color: var(--ink-muted); margin-bottom: 48px; }
.page-algo section { max-width: 1140px; }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        padding: 12px 15px;
    }
    .header-left { justify-content: center; }

    .header-nav { width: 100%; justify-content: center; gap: 4px 8px; }
    .header-nav a { padding: 6px 12px; }

    .meeting-heading-row { margin-top: 40px; }
    .button-container { flex-direction: column; align-items: center; }
    .nav-button { width: 80%; }
    .action-buttons { flex-direction: column; align-items: center; }
    .action-btn { width: 80%; justify-content: center; }

    .gallery { grid-template-columns: 1fr; }
    .learn-buttons, .pdf-list { grid-template-columns: 1fr; }
    .pdf-container { height: 600px; }

    .signup-form { flex-direction: column; }
    .signup-form button { width: 100%; }
    .signup-section { padding: 30px 22px; margin: 30px auto; }

    .social-icon { width: 60px; height: 60px; font-size: 26px; }
    .social-icon img { width: 28px; height: 28px; }
    .close-lightbox { right: 20px; font-size: 32px; }
    .intro-text, .story-text { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}