/* JEE Animated · jeeanimated.com
   Direction B "Highlighter": a yellow ground, black marker strokes with rough edges,
   Poppins, white pills and board cards with hard shadows. Phone first (360 px), up to 1440 px. */

/* ---------- fonts (self-hosted subsets, SIL Open Font License, see fonts/OFL.txt) ---------- */
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/poppins-bold.woff) format("woff"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/poppins-medium.woff) format("woff"); }
/* Greek letters and arrows that Poppins lacks (ω, φ …), only downloaded when a page uses them */
@font-face { font-family: "JA Math"; font-weight: 500; font-display: swap; src: url(fonts/math-medium.woff) format("woff"); unicode-range: U+0391-03A9, U+03B1-03C9, U+2190-2199; }
@font-face { font-family: "JA Math"; font-weight: 700; font-display: swap; src: url(fonts/math-bold.woff) format("woff"); unicode-range: U+0391-03A9, U+03B1-03C9, U+2190-2199; }

/* ---------- tokens ---------- */
:root {
  --sun: #FFD93B;      /* ground */
  --ink: #111111;      /* type, marker strokes, outlines, hard shadows */
  --paper: #FFFFFF;    /* pills and sticker strips */
  --slate: #163B2D;    /* board cards */
  --cream: #FFF3BF;    /* hover on white */
  --muted: #3A3A3A;    /* quiet text on yellow, 8:1 */
  --gutter: clamp(16px, 5vw, 56px);
  --max: 1240px;
  /* marker strokes: rough-edged bands stretched behind each line of text */
  --band-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%23111' fill-rule='evenodd' d='M10 14.4 19 14 28 14.2 37 14.1 46 13.8 55 13.7 64 14 73 13.8 82 13.3 91 13.3 100 13.8 109 14.1 118 14.4 127 13.7 136 14.8 145 15.1 154 14.5 163 15.3 172 14.9 181 15.7 190 15 199 14.9 208 15.4 217 15 226 14.5 235 14.1 244 13.8 253 13.6 262 14 271 13.2 280 13 289 13.4 298 12.7 307 12.8 316 13.4 325 13.1 334 13.1 343 13.4 352 13.7 361 14.4 370 14.2 379 13.9 388 14.6 397 14 406 14.3 415 13.8 424 14.2 433 13.6 442 13.1 451 13.1 460 12.9 469 13 478 12.5 487 12.2 496 12.5 505 12.4 514 12.6 523 11.7 532 12 541 11.6 550 12 559 11.8 568 12.3 577 12.1 586 11.7 595 11.7 604 12.4 613 12 622 12.6 631 12.7 640 12.7 649 13.5 658 13.7 667 13.9 676 13.6 685 14.1 694 13.6 703 13.9 712 13.5 721 13.2 730 12.4 739 12.9 748 12.3 757 11.9 766 11.3 775 10.7 784 10.4 793 10.6 802 10.7 811 10.6 820 10.4 829 10.5 838 10.6 847 11.4 856 11.2 865 11.3 874 11.4 883 12.1 892 12.3 901 12 910 11.6 919 12.2 928 12 937 11.5 946 11.5 955 11.1 964 11.3 973 10.9 982 11.3 997.8 13.3 996.7 20.4 998.9 25.9 991.5 31.9 1000 37.1 995 41.7 985.9 49.7 999.3 56.1 996.8 62.8 994.5 68.5 991.4 77.5 992.2 86 982 92.9 973 93.3 964 93.2 955 93.2 946 93.3 937 93.3 928 94.1 919 94.2 910 94 901 93.9 892 94.1 883 94.7 874 94.3 865 94.6 856 94.8 847 94.7 838 94.3 829 94.9 820 94.4 811 95.3 802 95 793 95 784 95.4 775 95.7 766 96 757 95.9 748 95.9 739 96.5 730 96.3 721 96.4 712 96.2 703 96.4 694 96.6 685 96.6 676 96.4 667 96.5 658 96.2 649 96.3 640 95.8 631 96.2 622 95.8 613 95.7 604 95.9 595 95.9 586 95.1 577 95.6 568 95.6 559 95.9 550 95.2 541 95.4 532 95.2 523 95.3 514 95.2 505 95.3 496 95.7 487 95.1 478 95.5 469 95.1 460 95.5 451 95.4 442 95.6 433 94.8 424 95.3 415 95.7 406 95.8 397 95.3 388 96 379 95.6 370 96.4 361 96.3 352 96.4 343 96.7 334 96.9 325 96.6 316 96.9 307 97 298 97.7 289 97.5 280 97.3 271 97.8 262 97.7 253 97.3 244 97.5 235 97.7 226 97.8 217 97.7 208 97.5 199 97.5 190 97.7 181 98.3 172 98 163 98 154 98.4 145 98.2 136 98.3 127 98.1 118 98.6 109 98.1 100 98 91 97.6 82 97.7 73 98 64 98.1 55 97.3 46 97.6 37 97.5 28 97.6 19 97.2 10 97 4.3 88.8 2.9 80.2 10.8 72.2 10.2 63.6 6.8 57.4 4.2 49.8 0.1 43.1 8.6 37.9 3.7 29.6 12.4 23.2 1.9 16.4Z'/%3E%3C/svg%3E");
  --band-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%23111' fill-rule='evenodd' d='M10 12.1 19 12.2 28 12.1 37 12 46 12.1 55 12 64 11.9 73 11.2 82 11.4 91 10.4 100 10.1 109 10.4 118 10 127 10 136 10.6 145 10.3 154 11.1 163 11.5 172 11.6 181 12 190 12 199 12.1 208 12.3 217 12.9 226 13.1 235 12.8 244 12.9 253 13 262 12.3 271 12.5 280 12.9 289 12.3 298 12.7 307 12.8 316 12.6 325 13.3 334 12.9 343 13.3 352 13.1 361 13 370 12.8 379 12.3 388 12.5 397 12.2 406 11.7 415 11.9 424 12.4 433 12.7 442 12.6 451 12.6 460 13.1 469 13.6 478 13.6 487 13.6 496 13.7 505 13.7 514 13.8 523 13.8 532 13.6 541 13.1 550 12.6 559 12.1 568 12.6 577 12.3 586 12.1 595 11.9 604 12.1 613 12.3 622 12.6 631 13 640 13 649 13.1 658 13.4 667 13.7 676 13.7 685 13.7 694 14 703 13.9 712 14 721 13.2 730 13.5 739 13.5 748 13.7 757 14.2 766 14.3 775 15.1 784 14.5 793 15.3 802 14.5 811 14.6 820 14.7 829 14.6 838 14.7 847 14.2 856 13.6 865 14.1 874 13.7 883 13.9 892 14.2 901 14 910 14.6 919 14.5 928 15.4 937 14.8 946 15.6 955 15 964 15.7 973 15.4 982 15.1 995.4 17.1 989.4 21.9 989.5 26.1 998.6 34.2 993.5 41.3 990.3 47.5 987.6 51.8 995.1 56.1 993.6 64.8 999.3 72.4 989.4 80.5 998.9 84.8 999.3 92.8 982 97.7 973 98 964 98.5 955 98.2 946 98.5 937 98 928 98.4 919 98.1 910 98 901 97.5 892 97.1 883 97 874 96.7 865 96.4 856 96.2 847 96.4 838 96.6 829 96.8 820 96.8 811 96.9 802 97 793 96.7 784 97.5 775 97.4 766 97 757 97.6 748 97.8 739 97.9 730 97.5 721 97.9 712 97.7 703 97.2 694 97.2 685 97.2 676 96.8 667 96.7 658 97.3 649 96.6 640 96.5 631 96.7 622 96.9 613 96.4 604 96.9 595 96.3 586 96.2 577 96.5 568 96.3 559 96.6 550 96.5 541 96.1 532 96 523 95.9 514 95.4 505 95.6 496 95.7 487 95.8 478 95.6 469 94.9 460 95.2 451 95.3 442 95.2 433 94.8 424 95 415 95.3 406 95.4 397 95.7 388 95.5 379 95.4 370 95.3 361 95.9 352 95.5 343 95.9 334 95.9 325 95.4 316 95.3 307 95.6 298 94.9 289 94.7 280 95.4 271 94.6 262 94.4 253 94.6 244 94.6 235 95.1 226 95.1 217 95.2 208 95.1 199 94.8 190 95.4 181 95.5 172 95.6 163 95.1 154 95.6 145 95.1 136 95.5 127 95.3 118 95.3 109 95.6 100 95.1 91 94.8 82 94.8 73 94.7 64 94.5 55 94.6 46 94.7 37 94.1 28 94.5 19 94.2 10 94.2 10.3 91.3 7 84 12 79 4.2 72.2 10.7 63.5 9.3 55.4 0.9 49.8 10.5 41.1 1.6 34.2 9.4 28.5 8.1 22.1 1.4 14.1Z'/%3E%3C/svg%3E");
  /* rough top edge of full-width ink sections, tiles along x */
  --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 30' preserveAspectRatio='none'%3E%3Cpath fill='%23111' fill-rule='evenodd' d='M0 30 0 9.2 5 9.9 10 8.2 15 9.5 20 10.9 25 10.4 30 11.1 35 9.5 40 10.3 45 9.9 50 10.7 55 11.0 60 10.1 65 10.9 70 11.4 75 13.1 80 13.1 85 11.9 90 13.3 95 11.7 100 12.6 105 11.3 110 10.8 115 12.6 120 11.2 125 11.4 130 13.4 135 13.6 140 12.8 145 14.7 150 14.1 155 14.5 160 13.5 165 15.0 170 14.2 175 14.4 180 13.9 185 12.3 190 12.3 195 15.4 200 11.7 205 11.5 210 15.7 215 12.6 220 11.2 225 12.5 230 11.5 235 11.2 240 12.1 245 11.2 250 10.9 255 11.4 260 12.2 265 11.2 270 13.6 275 12.0 280 13.9 285 14.3 290 12.5 295 14.0 300 12.7 305 12.7 310 10.9 315 10.5 320 14.6 325 11.7 330 9.8 335 11.0 340 14.9 345 11.2 350 9.9 355 9.8 360 10.0 365 10.3 370 8.7 375 10.0 380 10.1 385 10.3 390 8.8 395 11.2 400 9.9 405 11.0 410 12.1 415 13.3 420 12.3 425 13.7 430 12.9 435 12.3 440 12.1 445 11.7 450 11.4 455 11.6 460 13.0 465 14.0 470 12.6 475 12.8 480 15.2 485 14.6 490 14.5 495 14.2 500 15.0 505 15.4 510 14.4 515 14.2 520 13.3 525 15.2 530 13.2 535 14.2 540 14.9 545 13.1 550 14.1 555 17.0 560 12.8 565 12.4 570 10.1 575 10.0 580 8.7 585 12.6 590 8.2 595 8.5 600 9.2 600 30Z'/%3E%3C/svg%3E");
  --band-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%23111' fill-rule='evenodd' d='M10 14.4 19 14.3 28 13.8 37 13.9 46 13.7 55 14.4 64 14 73 13.6 82 13.9 91 13.8 100 13.5 109 13.2 118 13.2 127 13.3 136 12.9 145 12.9 154 13.6 163 13.9 172 14.2 181 13.9 190 14.2 199 14.7 208 14.9 217 15 226 14.6 235 14.9 244 14.5 253 13.8 262 13.9 271 13.8 280 13.1 289 13.5 298 13.2 307 13.2 316 12.7 325 13.4 334 13.5 343 13.1 352 13.5 361 13.7 370 13.7 379 14.2 388 14.6 397 14.7 406 14.5 415 14.2 424 13.2 433 13.3 442 13 451 12.1 460 11.7 469 11.4 478 12.1 487 11.2 496 11.3 505 11.9 514 11.6 523 12 532 12.9 541 12.4 550 12.7 559 13.2 568 13.6 577 13.6 586 13.1 595 13.8 604 13 613 12.6 622 13 631 12.8 640 12.3 649 12.3 658 11.7 667 12 676 11.7 685 12.2 694 12 703 12.1 712 12.3 721 13.1 730 13.2 739 13.1 748 13.3 757 13.1 766 13.3 775 13.2 784 13.4 793 13.3 802 13 811 12.8 820 12.8 829 12.1 838 12.6 847 12.1 856 11.5 865 11.7 874 11.5 883 11.9 892 11.2 901 11.8 910 11.1 919 11.4 928 11.2 937 11.8 946 11.9 955 11.2 964 12 973 11.8 982 11.7 993.3 13.7 994.5 21.3 996.8 26.9 991 34 998.4 42.6 990.1 50.8 999 59.2 995.9 63.9 987.1 72.3 997.5 76.9 999.7 84.5 995.5 89.6 982 94.9 973 95.3 964 94.6 955 94.9 946 95.3 937 95.5 928 94.9 919 94.9 910 95 901 95.7 892 95.5 883 95.4 874 95.4 865 95.9 856 95.7 847 95.7 838 95.7 829 95.4 820 95.3 811 94.6 802 94.9 793 94.7 784 94.4 775 94.1 766 94 757 94.5 748 93.9 739 93.9 730 94 721 94.6 712 94.8 703 94.6 694 95.2 685 95.6 676 95.9 667 95.7 658 96.1 649 96.7 640 96.5 631 96.7 622 97.1 613 97.1 604 97 595 96.7 586 96.9 577 97.1 568 96.7 559 96.3 550 97 541 96.4 532 96.4 523 95.7 514 95.6 505 96 496 95.5 487 95.3 478 95 469 94.9 460 94.3 451 94.7 442 94.7 433 95.1 424 94.8 415 95.1 406 95.8 397 96 388 96.1 379 96.2 370 96.8 361 97 352 96.8 343 97.9 334 97.8 325 97.3 316 97.8 307 97.9 298 97.8 289 97.2 280 97.2 271 97.2 262 96.8 253 96.8 244 97.3 235 96.7 226 96.4 217 96.5 208 96.4 199 96.1 190 95.9 181 96.6 172 95.9 163 95.6 154 95.5 145 95.9 136 96.1 127 96 118 96 109 96.7 100 96.6 91 96.4 82 97.1 73 96.8 64 96.8 55 97.1 46 97.8 37 97.7 28 97.9 19 97.9 10 97.9 4.6 91.5 8 85.7 5 80.4 0.7 74.6 1.7 69.1 12.9 64.8 3.1 60 3.7 54.9 8 48.1 12.8 39.7 2.9 34.8 2.3 28.3 4.5 23.7 11.5 16.4Z'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--sun); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--sun); font-family: Poppins, "JA Math", ui-sans-serif, system-ui, sans-serif; font-weight: 500; font-size: 17px; line-height: 1.5; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
p, .t { text-wrap: pretty; }
.how h3, .big-t, .lec-h { text-wrap: balance; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--sun); }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; z-index: 10; left: var(--gutter); top: -80px; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--sun); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- marker band: one rough black stroke per line of text ---------- */
.mk {
  color: var(--sun);
  background: var(--band-a) center / 100% 100% no-repeat;
  padding: 0 0.26em 0 0.26em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mk--b { background-image: var(--band-b); }
.mk--c { background-image: var(--band-c); }

/* ---------- wordmark ---------- */
.wordmark { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- buttons and pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 54px; padding: 0.2em 1.3em 0;
  border: 3px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font-weight: 700; font-size: 17px; line-height: 1.15; letter-spacing: -0.005em;
  text-align: center; text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn--ink { background: var(--ink); color: var(--sun); }
.btn--sm { min-height: 44px; padding: 0.15em 0.95em 0; font-size: 15px; gap: 0.45em; box-shadow: 4px 4px 0 var(--ink); }
.btn--lg { min-height: 62px; padding-inline: 1.5em; font-size: 20px; }
.btn .ic { width: 1.25em; height: 1.25em; flex: none; margin-top: -0.12em; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-yt { width: 1.45em; height: 1.45em; flex: none; margin-top: -0.14em; }
.ic-yt rect { fill: var(--ink); }
.ic-yt path { fill: var(--paper); }
.btn--ink .ic-yt rect { fill: var(--sun); }
.btn--ink .ic-yt path { fill: var(--ink); }

.pill {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.25em 1.05em 0;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
  font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: -0.01em;
}
.kicker {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0.2em 0.95em 0;
  border-radius: 999px; background: var(--ink); color: var(--sun);
  font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
}

/* ---------- board cards (lecture frames) ---------- */
.board {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 5px solid var(--ink); border-radius: 20px; background: var(--slate);
  box-shadow: 10px 10px 0 var(--ink);
  transform: rotate(1.6deg);
  transition: transform 0.2s ease;
}
.board img { width: 100%; height: 100%; object-fit: cover; }
.board iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.board.is-playing { transform: none; }
.board-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  padding: 0.3em 0.85em 0.18em; border-radius: 999px; background: var(--sun); color: var(--ink);
  font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: 0.005em; white-space: nowrap;
}
.player .yt { position: absolute; inset: 0; display: block; color: var(--ink); }
.player .yt:focus-visible { outline: 4px solid var(--sun); outline-offset: -12px; }
.play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: grid; place-items: center; border-radius: 50%;
  border: 4px solid var(--ink); background: var(--sun); box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.12s ease;
}
.play svg { width: 32px; height: 32px; margin-left: 4px; fill: var(--ink); }
.player .yt:hover .play { transform: scale(1.07); }

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px 6px; }
.brand { display: flex; align-items: center; min-height: 48px; width: clamp(156px, 45vw, 232px); margin-left: -6px; border-radius: 12px; }

/* ---------- hero ---------- */
.hero { display: grid; gap: 34px; padding-block: 18px 72px; }
.hero h1 { font-weight: 700; font-size: clamp(30px, 9.6vw, 72px); line-height: 1.22; letter-spacing: -0.025em; }
.hero h1 .line { display: block; }
.byline { margin-top: 22px; }
.lede { margin-top: 20px; max-width: 30ch; font-size: clamp(18px, 4.8vw, 23px); line-height: 1.45; letter-spacing: -0.01em; }
.ctas { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 28px; max-width: 420px; }
.board--hero { width: calc(100% - 12px); }

/* ---------- how a lecture works: a full-width ink stroke ---------- */
.how { position: relative; margin-block: 44px; padding-block: 56px 60px; background: var(--ink); color: var(--paper); }
.how::before, .how::after { content: ""; position: absolute; left: 0; right: 0; height: 30px; background: var(--edge) 0 0 / 600px 30px repeat-x; pointer-events: none; }
.how::before { top: -29px; }
.how::after { bottom: -29px; background-position: 237px 0; transform: scaleY(-1); }
.how h2 { position: relative; color: var(--sun); font-weight: 700; font-size: clamp(30px, 8vw, 54px); line-height: 1.1; letter-spacing: -0.03em; }
.how-list { position: relative; margin-top: 28px; }
.how-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding-block: 22px; border-top: 2px solid rgba(255, 255, 255, 0.22); }
.how-ic { grid-row: span 2; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--sun); }
.how-ic svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.how-ic .dot { fill: var(--ink); stroke: none; }
.how h3 { color: var(--sun); font-weight: 700; font-size: clamp(21px, 5.6vw, 27px); line-height: 1.2; letter-spacing: -0.02em; }
.how p { color: #F4F4F4; font-size: 17px; line-height: 1.5; }

/* ---------- chapter block ---------- */
.chapter { padding-block: 76px 24px; scroll-margin-top: 12px; }
.ch-head { display: grid; gap: 34px; }
.ch-title { margin-top: 18px; font-weight: 700; font-size: clamp(34px, 9.8vw, 84px); line-height: 1.22; letter-spacing: -0.03em; }
.ch-line { margin-top: 18px; max-width: 34ch; font-size: clamp(18px, 4.8vw, 23px); line-height: 1.45; letter-spacing: -0.01em; }
.board--side { width: calc(100% - 12px); transform: rotate(-1.8deg); }

.big3 { display: grid; gap: 18px; margin-top: 44px; }
.big {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 8px;
  min-height: 92px; padding: 16px 16px 16px 14px;
  border: 4px solid var(--ink); border-radius: 22px; background: var(--paper);
  box-shadow: 6px 6px 0 var(--ink);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.big:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.big:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }
.big-play { grid-row: span 2; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); }
.big-play svg { width: 24px; height: 24px; margin-left: 3px; fill: var(--sun); }
.big-t { font-weight: 700; font-size: clamp(19px, 5.2vw, 30px); line-height: 1.2; letter-spacing: -0.02em; }
.big-d { justify-self: start; padding: 0.22em 0.75em 0.08em; border: 2px solid var(--ink); border-radius: 999px; background: var(--sun); font-weight: 700; font-size: 14px; line-height: 1.3; white-space: nowrap; }

.lec-h { margin-top: 64px; font-weight: 700; font-size: clamp(24px, 6.6vw, 38px); line-height: 1.15; letter-spacing: -0.025em; }
.lec-panel { margin-top: 20px; padding: 6px; border: 4px solid var(--ink); border-radius: 26px; background: var(--paper); box-shadow: 8px 8px 0 var(--ink); }
.lectures li + li { border-top: 2px solid rgba(17, 17, 17, 0.1); }
.lectures a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 12px;
  min-height: 60px; padding: 10px 8px; border-radius: 16px; text-decoration: none;
}
.lectures a:hover { background: var(--cream); }
.lectures a:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.n { width: 34px; height: 34px; display: grid; place-items: center; padding-top: 2px; border-radius: 11px; background: var(--ink); color: var(--sun); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.t { font-size: 16px; line-height: 1.38; }
.go { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.12s ease; }
.lectures a:hover .go { transform: translateX(3px); }

/* ---------- close ---------- */
.close { display: grid; gap: 52px; padding-block: 88px 84px; }
.close h2 { font-weight: 700; font-size: clamp(25px, 8.1vw, 62px); line-height: 1.22; letter-spacing: -0.03em; }
.close h2 .line { display: block; }
.close .btn { margin-top: 34px; }
.board--close { width: calc(100% - 12px); transform: rotate(-1.4deg); }

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-block: 26px 40px; border-top: 3px solid var(--ink); }
.foot-brand { display: flex; align-items: center; min-height: 48px; width: 150px; margin-left: -5px; border-radius: 12px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot-links a, .soon { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; font-weight: 700; font-size: 16px; }
.foot-links a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.handle { font-weight: 500; }
.soon { color: var(--muted); }
.soon small { padding: 0.12em 0.55em 0; border: 1.5px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 700; }

/* ---------- wider phones and tablets ---------- */
@media (min-width: 560px) {
  .ctas { flex-direction: row; flex-wrap: wrap; align-items: center; max-width: none; }
  .board--hero, .board--side, .board--close { width: calc(100% - 16px); }
  .big { grid-template-columns: 60px minmax(0, 1fr) auto; column-gap: 18px; padding: 18px 22px 18px 18px; min-height: 100px; }
  .big-play { grid-row: auto; width: 60px; height: 60px; }
  .big-play svg { width: 28px; height: 28px; }
  .big-d { justify-self: end; font-size: 15px; }
  .how-list li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; }
  .how-ic { width: 56px; height: 56px; border-radius: 16px; }
  .t { font-size: 17px; }
  .lectures a { grid-template-columns: 38px minmax(0, 1fr) 20px; gap: 16px; padding: 10px 12px; }
  .n { width: 38px; height: 38px; }
  .go { width: 20px; height: 20px; }
}

/* ---------- desktop ---------- */
@media (min-width: 960px) {
  body { font-size: 18px; }
  .top { padding-block: 26px 10px; }
  .btn--sm { min-height: 50px; font-size: 16px; }
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 64px; padding-block: 48px 128px; }
  .hero h1 { font-size: clamp(42px, 4.5vw, 66px); }
  .board--hero { width: 100%; border-width: 7px; border-radius: 28px; box-shadow: 16px 16px 0 var(--ink); }
  .play { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-width: 5px; box-shadow: 5px 5px 0 var(--ink); }
  .play svg { width: 40px; height: 40px; }
  .board-tag { left: 18px; bottom: 18px; font-size: 15px; }

  .how { padding-block: 84px 92px; }
  .how-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 44px; }
  .how-list li { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding-block: 28px 0; border-top-width: 3px; border-top-color: var(--sun); }
  .how-ic { grid-row: auto; margin-bottom: 8px; }
  .how p { font-size: 18px; }

  .chapter { padding-block: 112px 40px; }
  .ch-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 64px; }
  .ch-title { font-size: clamp(46px, 4.6vw, 66px); }
  .board--side { width: 100%; border-width: 6px; border-radius: 24px; box-shadow: 14px 14px 0 var(--ink); }
  .big3 { margin-top: 64px; gap: 22px; }
  .big { grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 26px; min-height: 116px; padding: 20px 32px 20px 22px; border-radius: 26px; box-shadow: 8px 8px 0 var(--ink); }
  .big:hover { box-shadow: 10px 10px 0 var(--ink); }
  .big-play { width: 72px; height: 72px; }
  .big-play svg { width: 32px; height: 32px; }
  .big-d { font-size: 16px; padding: 0.3em 0.95em 0.15em; }

  .lec-h { margin-top: 88px; }
  .lec-panel { padding: 14px 18px; border-radius: 30px; box-shadow: 12px 12px 0 var(--ink); }
  .lectures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(13, auto); grid-auto-flow: column; column-gap: 36px; }
  .lectures li:nth-child(14) { border-top: 0; }

  .close { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 72px; padding-block: 140px 120px; }
  .close h2 { font-size: clamp(36px, 4.2vw, 60px); }
  .board--close { width: 100%; border-width: 6px; border-radius: 24px; box-shadow: 14px 14px 0 var(--ink); }
  .foot-brand { width: 176px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .big, .board, .play, .go { transition: none; }
}

/* Windows high-contrast and other forced colours: drop the painted bands, keep everything legible */
@media (forced-colors: active) {
  .mk { background: none; color: CanvasText; }
  .btn, .pill, .big, .lec-panel, .board { border-color: CanvasText; }
}