/* Think Like a Math Champion: Online Contests (courses/olympiad/src), part of avatarlc.com.
   The series design of the book (v7 tex/themes/theme-g46v1.tex and theme-g68v1.tex, tools/make_series.py): one colour
   per book, the inside in shades of it. Grades 4-6 = Oxford Navy, Grades 6-8 = Molten Lava, Golden Apricot the
   accent of both. Poppins headings, TeX Gyre Schola text (self-hosted, GUST licence), faint graph paper on the
   bands, the book's motifs. data-band="e|m" on <html> picks the band's shades. The site's logo and menu stay. */
@font-face { font-family: "Schola"; src: url(fonts/texgyreschola-regular.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Schola"; src: url(fonts/texgyreschola-bold.otf) format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Schola"; src: url(fonts/texgyreschola-italic.otf) format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Grades 4-6, Volume 1: the KDP cover's maroon (owner, 2026-10-25: the website matches the submitted covers) */
  --deep: #3D0502; --badge: #690903; --b1: #CC6C66; --b2: #DA9490; --b3: #E8BDBA; --ink: #65100B; --tint: #F9EEEE; --num: #EDCCC9;
  --grid: #e0a5a1;          /* b2 toward white: the graph paper on a band */
  --sun: #FFAD3C; --suntint: #FFF1DA; --sunink: #6E4A0C;
  /* the contest banner wears its volume's cover: background, title, highlight, the GRADES pill */
  --cover: #690903; --cover-ink: #FFFFFF; --cover-hi: #FFAD3C; --pill-bg: #FFC43D; --pill-ink: #460806;
  --coral: #FF7A59; --green: #2E9E68;
  --text: #1C2433; --muted: #4A5468; --rule: #DCE4F0; --bg: #FBFCFE;
  --head: "Poppins", "Segoe UI", system-ui, sans-serif; --body: "Schola", "Century Schoolbook", Georgia, serif;
  --shadow: 0 1px 2px rgba(66,9,5,.04), 0 10px 28px rgba(66,9,5,.08);
  --r: 12px; --rl: 18px;
}
:root[data-band="m"] {
  /* Grades 6-8, Volume 1: the KDP cover's navy */
  --cover: #012C56; --cover-ink: #FFFFFF; --cover-hi: #FFAD3C; --pill-bg: #FFC43D; --pill-ink: #032A50;
  --deep: #021F3D; --badge: #012C56; --b1: #5790C7; --b2: #85AED6; --b3: #B3CDE6; --ink: #0B3965; --tint: #EEF4F9; --num: #C9DCED;
  --grid: #93b9dd;
  --shadow: 0 1px 2px rgba(5,36,66,.04), 0 10px 28px rgba(5,36,66,.08);
}
/* Volume 2 (contests 11-25) of each band: Grades 4-6 gold with brown and maroon type, Grades 6-8 green */
:root[data-vol="2"]:not([data-band="m"]) {
  --cover: #E4A942; --cover-ink: #503606; --cover-hi: #7B0802; --pill-bg: #503506; --pill-ink: #FFFFFF;
  --deep: #503606; --badge: #7B0802; --b1: #D9A13A; --b2: #E9C27A; --b3: #F3DDB0; --ink: #6B4A0A; --tint: #FDF6E8; --num: #F1DDB4; --grid: #ecd3a0;
}
:root[data-band="m"][data-vol="2"] {
  --cover: #014E36; --cover-ink: #FFFFFF; --cover-hi: #FFAD3C; --pill-bg: #FFC43D; --pill-ink: #034A34;
  --deep: #01301F; --badge: #014E36; --b1: #4F9A80; --b2: #84BBA6; --b3: #B5D7CA; --ink: #0B4A33; --tint: #EEF6F2; --num: #CBE3D9; --grid: #9cc9b8;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--body); background: var(--bg); color: var(--text); font-size: 17px; line-height: 1.55; }
/* the footer stays at the bottom of the window however long the page (owner, 2026-10-25: it moved from problem to problem) */
body.is-player { min-height: 100vh; display: flex; flex-direction: column; }
body.is-player > .player { flex: 1 0 auto; }
body.is-player > .av-header, body.is-player > .av-footer { flex: none; }
a { color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.15; color: var(--deep); letter-spacing: -.01em; }
.wrap { width: min(1170px, 100% - 40px); margin: 0 auto; }
.eyebrow { font-family: var(--head); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.paper { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 14px 14px; }

/* ── the site's header and footer (logo and menu), in the book's colours ── */
.av-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.9); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--rule); }
.av-header .av-wrap { max-width: 1170px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.av-logo img { height: 44px; width: auto; display: block; }
.av-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.av-nav a { display: block; padding: 10px 12px; color: var(--deep); text-decoration: none; font-weight: 600; font-size: 15px; font-family: var(--head); border-radius: 8px; }
.av-nav a:hover { background: var(--tint); }
.av-actions { display: flex; align-items: center; gap: 10px; }
.av-footer { background: var(--badge); color: #e6edf5; font-size: .95rem; margin-top: 72px; font-family: var(--head); position: relative; }
.av-footer .av-wrap { max-width: 1170px; margin: 0 auto; padding: 0 20px; }
.av-footer .av-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 60px 20px 40px; }
.av-footer-brand img { height: 44px; width: auto; margin-bottom: 18px; background: #fff; padding: 10px 14px; border-radius: 12px; box-sizing: content-box; }
.av-footer-brand p { max-width: 34ch; color: #e6edf5; font-family: var(--head); font-weight: 500; font-size: 15px; line-height: 1.5; }
.av-footer h3 { color: var(--sun); font-size: 1.05rem; margin: 0 0 16px; }
.av-footer ul { list-style: none; display: grid; gap: 10px; }
.av-footer a { color: #e6edf5; text-decoration: none; }
.av-footer a:hover { color: #fff; }
.av-footer .av-footer-legal { font-family: var(--head); font-weight: 500; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.6); padding: 0 20px 20px; max-width: 80ch; }
.av-footer .av-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; }
.av-footer-bottom a { color: #fff; }

/* ── buttons: Golden Apricot on deep ── */
.btn, .av-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-family: var(--head); font-weight: 700; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; line-height: 1.2; transition: background .15s, transform .1s; }
.btn-gold, .av-btn-green { background: var(--sun); color: var(--deep); box-shadow: 0 8px 20px rgba(232,172,65,.3); } .btn-gold:hover, .av-btn-green:hover { background: #f2c268; transform: translateY(-1px); }
.btn-navy, .av-btn-navy { background: var(--badge); color: #fff; } .btn-navy:hover, .av-btn-navy:hover { background: var(--deep); }
.btn-ghost { background: transparent; color: var(--deep); box-shadow: inset 0 0 0 2px var(--badge); } .btn-ghost:hover { background: var(--tint); }
.btn-teal { background: var(--badge); color: #fff; } .btn-teal:hover { background: var(--deep); }
.btn-white { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); background: transparent; } .btn-white:hover { background: #fff; color: var(--deep); }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }

/* ── hero: the cover ── */
.hero { background-color: var(--badge); color: #fff; padding: 56px 0 44px; position: relative; overflow: hidden; }
.hero.paper { background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 14px 14px; }
.hero .wrap { display: grid; grid-template-columns: 1.3fr .95fr; gap: 36px; align-items: center; }
.hero .badge { display: inline-flex; align-items: center; font-family: var(--head); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; background: var(--sun); color: var(--deep); padding: 5px 14px; border-radius: 999px; margin-bottom: 18px; }
.hero .think { font-family: var(--head); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; font-size: clamp(14px, 1.6vw, 18px); color: #f3cfcc; }
:root[data-band="m"] .hero .think { color: #cfe0f5; }
.hero h1 { color: #fff; font-size: clamp(44px, 7vw, 84px); line-height: .95; margin: 6px 0 4px; font-weight: 800; letter-spacing: -.01em; }
.hero h1 span { display: block; color: var(--sun); }
.hero .sub { font-family: var(--head); color: #fff; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.45; max-width: 44ch; margin-top: 10px; }
.hero p.lead { font-size: 17px; color: #f3d9d6; max-width: 56ch; line-height: 1.6; margin-top: 14px; }
:root[data-band="m"] .hero p.lead { color: #dbe6f3; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hero .motifs { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; margin-top: 30px; }
.hero .motif { display: grid; gap: 8px; justify-items: center; font-family: var(--head); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: #cfe0f5; }
.hero .motif img { height: 86px; width: auto; }
.hero-card { background: #fff; color: var(--text); border-radius: var(--rl); padding: 20px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.4); position: relative; }
.hero-card .eyebrow { margin-bottom: 8px; }
.hero-card .sample { font-size: 16.5px; }
.hero-card .sample p { margin: 6px 0; }
.hero-card .meta { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--head); font-size: 12.5px; color: var(--muted); margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 12px; }
.hero-card .meta b { color: var(--deep); }
.hero-bambo { position: absolute; right: -18px; bottom: -22px; width: 112px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }

/* the hero problem, animated: the four flowers of the pattern bloom in turn, over and over */
.demo { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 12px; }
.demo-row { display: flex; gap: 10px; align-items: flex-end; justify-content: center; }
.fl { display: grid; justify-items: center; gap: 4px; font-family: var(--head); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fl svg { width: 54px; height: 63px; display: block; transform-origin: 50% 100%; transform: scale(.86); opacity: .5; animation: bloom 3.2s ease-in-out infinite; filter: none; }
.fl b { font-weight: 700; opacity: .5; animation: bloomtext 3.2s ease-in-out infinite; }
.fl:nth-child(1) svg, .fl:nth-child(1) b { animation-delay: 0s; } .fl:nth-child(2) svg, .fl:nth-child(2) b { animation-delay: .8s; }
.fl:nth-child(3) svg, .fl:nth-child(3) b { animation-delay: 1.6s; } .fl:nth-child(4) svg, .fl:nth-child(4) b { animation-delay: 2.4s; }
.fl.more { align-self: center; font-size: 22px; color: var(--muted); padding-bottom: 22px; }
@keyframes bloom { 0%, 18% { transform: scale(1.06); opacity: 1; filter: drop-shadow(0 4px 6px rgba(232,172,65,.45)); } 30%, 100% { transform: scale(.86); opacity: .5; filter: none; } }
@keyframes bloomtext { 0%, 18% { opacity: 1; color: var(--deep); } 30%, 100% { opacity: .5; } }
/* the sample matches the chosen book: the flowers for Grades 4-6, the thermometer for Grades 6-8 */
:root[data-band="m"] .sample-e, :root:not([data-band="m"]) .sample-m { display: none; }
/* Grades 6-8: the thermometer starts at -9, rises 14 to 2 p.m., drops 8 to 10 p.m. and stops at "?" (7 s, looping);
   the column runs -15 (bottom) to +10 (top): -9 = .24, +5 = .80, -3 = .48 of its height */
.thermo-demo { display: flex; align-items: center; justify-content: center; gap: 20px; padding-right: 70px; }
.thermo { width: 60px; height: 172px; flex: none; }
.thermo .merc { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.48); animation: merc 7s ease-in-out infinite; }
@keyframes merc { 0%, 14% { transform: scaleY(.24); } 38%, 52% { transform: scaleY(.8); } 74%, 100% { transform: scaleY(.48); } }
.thermo-steps { display: grid; gap: 8px; }
.ts { display: flex; align-items: center; gap: 8px; font-family: var(--head); font-size: 13px; color: var(--muted); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; opacity: .45; }
.ts b { color: var(--deep); font-weight: 700; }
.ts i { font-style: normal; font-weight: 800; }
.ts2 i { color: #D9363E; } .ts3 i { color: #2B6CB0; }
.ts .q { font-weight: 800; color: #D9363E; font-size: 16px; line-height: 1; }
.ts1 { animation: ts1 7s ease-in-out infinite; } .ts2 { animation: ts2 7s ease-in-out infinite; } .ts3 { animation: ts3 7s ease-in-out infinite; }
@keyframes ts1 { 0%, 14% { opacity: 1; border-color: var(--sun); box-shadow: 0 4px 12px rgba(255,173,60,.3); } 22%, 100% { opacity: .45; } }
@keyframes ts2 { 0%, 16% { opacity: .45; } 22%, 52% { opacity: 1; border-color: var(--sun); box-shadow: 0 4px 12px rgba(255,173,60,.3); } 60%, 100% { opacity: .45; } }
@keyframes ts3 { 0%, 56% { opacity: .45; } 62%, 100% { opacity: 1; border-color: var(--sun); box-shadow: 0 4px 12px rgba(255,173,60,.3); } }
@media (prefers-reduced-motion: reduce) { .thermo .merc, .ts { animation: none; } .ts { opacity: 1; } }
@media (max-width: 640px) { .thermo-demo { padding-right: 0; justify-content: flex-start; } }
/* Bambo idles: a gentle bob, none when motion is reduced */
.hero-bambo.bob { animation: bob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .hero-bambo.bob, .fl svg, .fl b { animation: none; } .fl svg, .fl b { opacity: 1; transform: none; } }

/* ── the hero's choice: the two books, drawn like the series covers ── */
.hero .wrap { grid-template-columns: 1fr 1.05fr; }
.hero-copy .lead { margin-top: 18px; }
.pick { display: grid; gap: 16px; justify-items: center; }
.pick-title { font-family: var(--head); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sun); }
.covers { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 22px; padding: 22px 26px 18px; border-radius: 22px; background: radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,.16), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.cover { display: grid; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: #fff; transition: transform .18s ease, opacity .18s ease; opacity: .72; }
.cover:hover { opacity: .95; }
.cover.on { opacity: 1; transform: translateY(-6px); }
.cover:focus-visible { outline: 3px solid var(--sun); outline-offset: 6px; border-radius: 12px; }
.c-stack { position: relative; display: block; aspect-ratio: 8.5 / 11; margin: 0 30px 10px 0; }
.c-stack img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; box-shadow: 0 12px 26px rgba(28,36,51,.28); transition: transform .2s ease; }
.c-stack .c-v2 { transform: translate(30px, -6px) rotate(6deg); }
.c-stack .c-v1 { transform: rotate(-1.5deg); }
.cover.on .c-stack .c-v1 { box-shadow: 0 18px 38px rgba(28,36,51,.32), 0 0 0 3px var(--sun); }
.cover:hover .c-stack .c-v2 { transform: translate(36px, -8px) rotate(8deg); }
.c-face { position: relative; display: grid; align-content: start; aspect-ratio: 8.5 / 11; border-radius: 10px; padding: 14px 14px 12px; overflow: hidden;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 11px 11px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.18); }
.cover-e .c-face { background-color: #7C0902; }
.cover-m .c-face { background-color: #003262; }
.cover.on .c-face { box-shadow: 0 22px 46px rgba(0,0,0,.5), 0 0 0 3px var(--sun); }
.c-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 18px; }
.c-logo { font-family: var(--head); font-size: 7.5px; font-weight: 600; color: #fff; opacity: .9; }
.c-pill { font-family: var(--head); font-size: 7.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--sun); color: #2b1d00; padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.c-think { font-family: var(--head); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #f3cfcc; }
.cover-m .c-think { color: #cfe0f5; }
.c-math { font-family: var(--head); font-weight: 800; font-size: 44px; line-height: .95; color: #fff; letter-spacing: -.01em; }
.c-champ { font-family: var(--head); font-weight: 800; font-size: 23px; line-height: 1.05; color: var(--sun); }
.c-motifs { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; justify-content: space-between; align-items: flex-end; }
.c-motifs img { height: 30px; width: auto; }
.c-cap { display: grid; gap: 1px; padding-left: 2px; }
.c-cap b { font-family: var(--head); font-size: 17px; color: #fff; }
.c-cap small { font-family: var(--head); font-size: 12.5px; color: #cfe0f5; }
.pick-cta { min-width: 300px; }

/* the switch at the contests list */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--tint); border: 1px solid var(--num); margin-bottom: 18px; flex-wrap: wrap; }
.seg-btn { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; cursor: pointer; font-family: var(--head); color: var(--deep); }
.seg-btn b { font-size: 15px; } .seg-btn small { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.seg-btn.on { background: var(--badge); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.seg-btn.on small { color: rgba(255,255,255,.8); }

/* How it works: the steps beside the sample problem */
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.steps.stack { grid-template-columns: 1fr; }
.sample-card { box-shadow: var(--shadow); border: 1px solid var(--rule); }

/* ── a neutral page (owner, 2026-10-24: "the blue is dominant"): the page belongs to neither book; the hero is light
   paper with the graph grid, ink and gold type, and the two covers carry the red and the blue equally. The chosen
   book's shades stay in the contest list only. ── */
.hero, .hero.paper { background-color: #FBF8F2; color: var(--text);
  background-image: linear-gradient(rgba(28,36,51,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(28,36,51,.06) 1px, transparent 1px); background-size: 14px 14px; }
.hero h1 { color: #1C2433; }
.hero h1 span { color: #C98A1A; }
.hero .think, :root[data-band="m"] .hero .think { color: #4A5468; }
.hero p.lead, :root[data-band="m"] .hero p.lead { color: #3a4356; }
.hero .badge { background: #1C2433; color: #fff; }
/* the book's title in the hero line (owner, 2026-10-25: "can the book title stand out more, be dynamic, moving"):
   Poppins like the headline, a gold highlighter stroke drawn across it as the page opens, then a light passing over
   it every few seconds; it links to the books. Two background layers: the light (0) and the highlighter (1). */
.hero .book-title { font-family: var(--head); font-weight: 700; font-style: normal; color: #1C2433; text-decoration: none;
  padding: 1px .28em; margin: 0 .05em; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%), linear-gradient(#FFD877, #FFC43D);
  background-repeat: no-repeat; background-size: 260% 100%, 0% 78%; background-position: 100% 0, 0 70%;
  animation: bt-draw .9s .45s cubic-bezier(.3,.7,.2,1) forwards, bt-shine 5s 1.6s ease-in-out infinite;
  transition: box-shadow .2s; display: inline-block; white-space: nowrap; line-height: 1.35; transform-origin: 50% 60%; }
.hero .book-title:hover { box-shadow: 0 6px 16px rgba(201,138,26,.35); }
@keyframes bt-draw { to { background-size: 260% 100%, 100% 78%; } }
/* every 5 s: a small pop, and the light crosses the title */
@keyframes bt-shine { 0%, 60% { background-position: 100% 0, 0 70%; transform: none; } 66% { transform: scale(1.045) rotate(-1deg); }
  72% { transform: scale(.99) rotate(.4deg); } 78% { transform: none; } 100% { background-position: 0% 0, 0 70%; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero .book-title { animation: none; background-size: 260% 100%, 100% 78%; } }
.pick-title { color: #8A5A00; }
.covers { background: radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,.9), rgba(255,255,255,.5)); box-shadow: inset 0 0 0 1px rgba(28,36,51,.08), 0 10px 30px rgba(28,36,51,.06); }
.c-face { box-shadow: 0 14px 30px rgba(28,36,51,.28), inset 0 0 0 1px rgba(255,255,255,.18); }
.cover.on .c-face { box-shadow: 0 18px 38px rgba(28,36,51,.32), 0 0 0 3px var(--sun); }
.c-cap b { color: #1C2433; } .c-cap small { color: #4A5468; }
.cover { opacity: .78; }
.hero .btn-ghost { color: #1C2433; box-shadow: inset 0 0 0 2px #1C2433; }
.av-footer { background: #1C2433; }
.av-header .av-btn-navy { background: #1C2433; color: #fff; } .av-header .av-btn-navy:hover { background: #000; }
.record[hidden] { display: none; }   /* .record sets display: grid, which outranked the hidden attribute */

/* ── sections: the book's part openers ── */
section { padding: 46px 0; }
.part-head { display: grid; grid-template-columns: auto 1fr; gap: 18px 22px; align-items: center; margin-bottom: 18px; }
.part-head .num { font-family: var(--head); font-weight: 800; font-size: 72px; line-height: 1; color: var(--b1); }
.part-head .eyebrow { margin-bottom: 2px; }
.part-head h2 { font-size: clamp(26px, 3.4vw, 40px); }
.part-head .gold { width: 92px; height: 5px; background: var(--sun); border-radius: 3px; margin-top: 8px; }
.sub { color: var(--muted); font-size: 16px; margin-bottom: 18px; max-width: 80ch; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); display: grid; grid-template-columns: 36px 1fr; gap: 12px; }
.step .n { width: 36px; height: 36px; border-radius: 50%; background: var(--badge); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--head); font-weight: 700; }
.step h3 { font-size: 17px; margin-bottom: 4px; }
.step p { color: var(--muted); font-size: 15px; }

/* band switch: the two books */
.bands { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.band { display: grid; grid-template-columns: 10px 1fr; gap: 0 14px; text-align: left; padding: 0; border-radius: var(--r); border: 2px solid var(--rule); background: #fff; cursor: pointer; font-family: var(--head); min-width: 260px; overflow: hidden; }
.band i { display: block; background: #7C0902; } .band[data-band="m"] i { background: #003262; }
.band > span { display: grid; gap: 2px; padding: 12px 16px 12px 4px; }
.band b { font-size: 17px; color: var(--deep); }
.band small { font-size: 12.5px; color: var(--muted); font-family: var(--body); }
.band.on { border-color: var(--badge); background: var(--tint); }

/* the chooser in the hero: on the dark cover, white cards */
.hero-bands { margin: 14px 0 6px; }
.hero-bands .band { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.hero-bands .band b { color: #fff; } .hero-bands .band small { color: #dbe6f3; }
.hero-bands .band.on { background: #fff; border-color: var(--sun); }
.hero-bands .band.on b { color: var(--deep); } .hero-bands .band.on small { color: var(--muted); }

/* record strip */
.record { background: var(--tint); border: 1px solid var(--num); border-radius: var(--r); padding: 16px 20px; display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 20px; }
.record .stat b { display: block; font-family: var(--head); font-size: 26px; color: var(--deep); line-height: 1.1; }
.record .stat small { color: var(--muted); font-size: 13px; font-family: var(--head); }
.record .stat b small { font-size: 14px; color: var(--muted); font-weight: 600; }
.medal-dots { display: inline-flex; gap: 6px; vertical-align: middle; }
.medal-dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--head); font-size: 13px; font-weight: 800; color: var(--deep); }
.m-gold { background: var(--sun); } .m-silver { background: #D7DEE8; } .m-bronze { background: #E2B08A; }

/* contests: five tiers */
.level { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 16px 18px; margin-bottom: 12px; display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; box-shadow: var(--shadow); }
.level-head h3 { font-size: 18px; margin: 4px 0 4px; }
.level-head .tag { display: block; width: fit-content; margin-bottom: 2px; font-family: var(--head); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; background: var(--sun); color: var(--deep); padding: 3px 9px; border-radius: 999px; font-weight: 700; }
.level-head .desc { color: var(--muted); font-size: 14px; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tile { display: grid; gap: 2px; padding: 10px 10px 8px; border-radius: 12px; border: 1px solid var(--rule); background: #fff; text-decoration: none; color: var(--text); min-height: 78px; position: relative; font-family: var(--head); }
.tile .n { font-size: 10.5px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.tile .t { font-weight: 800; font-size: 20px; color: var(--deep); line-height: 1.1; }
.tile .s { font-size: 12px; color: var(--muted); margin-top: auto; display: flex; align-items: center; gap: 6px; }
.tile.open { border-color: var(--b1); }
.tile.open:hover { background: var(--tint); }
.tile.done { background: var(--tint); border-color: var(--b2); } .tile.done .s { color: var(--ink); font-weight: 700; }
.tile.locked { background: #f4f6fa; color: #8a929b; border-style: dashed; } .tile.locked .t { color: #8a929b; }
.tile.free::after { content: "FREE"; position: absolute; top: 7px; right: 7px; font-size: 9px; letter-spacing: .12em; background: var(--sun); color: var(--deep); padding: 2px 6px; border-radius: 999px; font-weight: 800; }
.tile .medal-dot { width: 16px; height: 16px; font-size: 0; }

/* scoring box */
.scoring { background: var(--suntint); border: 1px solid #f0dfa3; border-radius: var(--r); padding: 16px 20px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-top: 16px; }
.scoring h3 { font-size: 16px; color: var(--sunink); margin-bottom: 4px; }
.scoring p { color: var(--text); font-size: 15px; }
.scoring .medals { display: flex; gap: 10px; flex-wrap: wrap; }
.scoring .medal { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 6px 12px 6px 6px; font-family: var(--head); font-size: 13px; font-weight: 700; color: var(--deep); }

/* plans */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* online contests only, the printed books separately (owner, 2026-10-26: not "physical books") */
.plans-note { margin: 14px 0 0; font-size: 14px; color: var(--text); text-align: center; }
.plan { background: #fff; border: 1px solid var(--rule); border-radius: var(--rl); padding: 24px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.plan.hi { border-color: var(--sun); box-shadow: 0 10px 30px rgba(232,172,65,.22); }
.plan h3 { font-size: 18px; }
.plan .price { font-family: var(--head); font-size: 36px; color: var(--deep); line-height: 1; }
.plan .price small { font-size: 14px; color: var(--muted); font-weight: 600; }
.plan ul { list-style: none; color: var(--muted); font-size: 15px; display: grid; gap: 6px; }
.plan ul li::before { content: "✓ "; color: var(--green); font-weight: 800; }
.plan .btn { margin-top: auto; }
.plan .fine { font-size: 13px; color: var(--muted); font-family: var(--head); }
/* a book or both (owner, 2026-10-25): the yearly price under the monthly one, two buttons, "Only $10 more" on both books */
.plan { position: relative; }
.plan .price-alt { font-family: var(--head); font-size: 13.5px; color: var(--muted); margin-top: -2px; }
.plan .plan-btns { display: flex; gap: 8px; margin-top: auto; }
.plan .plan-btns .btn { flex: 1; text-align: center; padding-left: 10px; padding-right: 10px; }
.plan .plan-badge { position: absolute; top: -12px; right: 18px; background: var(--sun); color: #1C2433; font-family: var(--head); font-weight: 800; font-size: 12px; padding: 3px 11px; border-radius: 999px; }
.plan .plan-badge[hidden] { display: none; }

/* faq + book strip */
.faq details { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--deep); font-family: var(--head); font-size: 15px; }
.faq p { color: var(--muted); margin-top: 8px; font-size: 15.5px; }
.book { background-color: var(--badge); color: #fff; border-radius: var(--rl); padding: 22px 26px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin-top: 8px; }
.book h3 { color: var(--sun); font-size: 18px; margin-bottom: 4px; }
.book p { color: #e6edf5; font-size: 15px; max-width: 70ch; }
.book.has-buys { grid-template-columns: 1fr; }
.book-buys[hidden], .pick-paper[hidden] { display: none; }
.book-buys { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.buy { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 14px; padding: 12px 14px; text-decoration: none; color: var(--text); box-shadow: 0 6px 18px rgba(0,0,0,.12); transition: transform .15s ease; }
.buy:hover { transform: translateY(-2px); }
.buy-img { flex: none; width: 66px; height: auto; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.buy-cover { flex: none; width: 62px; overflow: hidden; aspect-ratio: 8.5 / 11; border-radius: 5px; padding: 6px 5px; display: grid; align-content: start; gap: 0; color: #fff; font-family: var(--head); line-height: 1.05; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.buy-e .buy-cover { background: #7C0902; } .buy-m .buy-cover { background: #003262; }
.buy-cover small { font-size: 6.5px; opacity: .85; } .buy-cover b { font-size: 9px; font-weight: 800; }
.buy-cover i { font-style: normal; font-size: 6.5px; margin-top: 6px; background: #E8AC41; color: #1C2433; border-radius: 99px; padding: 1px 4px; justify-self: start; font-weight: 700; }
.buy-text { display: grid; gap: 2px; }
.buy-text b { font-family: var(--head); font-size: 15px; color: var(--deep); }
.buy-text small { color: var(--muted); font-size: 13px; }
.buy-btn { justify-self: start; margin-top: 6px; background: #E8AC41; color: #1C2433; font-family: var(--head); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px; }
.pick-paper { font-family: var(--head); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.book-strip { display: flex; gap: 14px 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--suntint); color: var(--sunink); font-size: 15px; text-align: left; }
.book-strip p { margin: 0; max-width: 62ch; }
.book-strip .btn { flex: none; }
.book-strip .amz-soon { flex: none; }
/* "Coming soon on Amazon": a volume whose Amazon link is not set yet (owner, 2026-10-25); plain words, not Amazon's logo */
.amz-soon { display: inline-block; justify-self: start; margin-top: 6px; background: #232F3E; color: #fff; font-family: var(--head); font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.amz-soon b { color: #FF9900; font-weight: 800; font-size: inherit; }
.buy .buy-text { min-width: 0; }
/* four volumes: two per grade band, one band per row */
.book.has-buys .book-buys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .book.has-buys .book-buys { grid-template-columns: 1fr; } }
.buy .amz-soon { font-size: 11.5px; white-space: normal; padding: 5px 11px; }
.buy.is-soon { cursor: default; }
.buy.is-soon:hover { transform: none; }

/* ─── the player: the book's contest page ─── */
.player { width: min(960px, 100% - 32px); margin: 20px auto 60px; }
.banner { position: relative; background-color: var(--cover); padding: 26px 30px 22px; border-radius: var(--rl) var(--rl) 0 0; overflow: hidden; }
.banner.paper { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); }
.banner h1 { color: var(--cover-ink); }
.banner .strip { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--sun) 0 78%, var(--b1) 78% 85%, var(--b2) 85% 92%, var(--b3) 92% 100%); }
.banner .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.banner .eyebrow { color: var(--cover-ink); opacity: .85; }
.banner .lvl { font-family: var(--head); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; background: var(--pill-bg); color: var(--pill-ink); padding: 3px 10px; border-radius: 999px; font-weight: 700; }
.banner h1 { font-size: clamp(32px, 4.4vw, 44px); margin: 4px 0 6px; font-weight: 800; }
.banner .pill { margin-left: auto; background: #fff; border: 2px solid var(--cover-hi); color: var(--ink); border-radius: 12px; padding: 8px 14px; font-family: var(--head); font-weight: 600; font-size: 14px; white-space: nowrap; }
.banner .pill b { color: var(--deep); }
.banner .motif { position: absolute; right: 34px; top: -8px; height: 54px; width: auto; opacity: .95; }   /* top corner only; the pill sits on the lower line */
.banner .row { padding-right: 90px; }
/* the volume's cover, tilted in the banner's right edge; the title row and the pill keep clear of it */
.banner .cover-thumb { position: absolute; right: 28px; top: 50%; height: 108px; width: auto; transform: translateY(-50%) rotate(5deg); border-radius: 4px; box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.banner:has(.cover-thumb) { padding-right: 140px; }
.banner:has(.cover-thumb) .row { padding-right: 0; }
.banner .row2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 6px; }
.banner .row2 .pill { margin: 0 0 8px; }
.banner-m { display: grid; gap: 6px; }
.card { background: #fff; border: 1.2px solid var(--rule); border-radius: var(--r); padding: 22px 24px; margin-top: 16px; box-shadow: var(--shadow); }
.card.under { border-radius: 0 0 var(--rl) var(--rl); margin-top: 0; border-top: 0; }

.pbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 10px 16px; position: sticky; top: 76px; z-index: 10; margin-top: 14px; box-shadow: var(--shadow); }
.pbar #rules-btn { flex: none; }
.rules-dlg { margin: auto; max-height: calc(100vh - 32px); overflow-y: auto; border: 0; border-radius: var(--r); padding: 22px 24px; max-width: 860px; width: calc(100% - 32px); box-shadow: var(--shadow); text-align: center; }
.rules-dlg::backdrop { background: rgba(16, 24, 40, .45); }
.rules-dlg h2 { font-family: var(--head); color: var(--deep); margin: 0 0 4px; font-size: 22px; }
.rules-dlg .note { color: var(--muted); margin: 0 0 4px; }
.rules-dlg .rules { margin: 14px auto; }
.rules-dlg .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pbar .title { font-family: var(--head); font-weight: 700; color: var(--deep); }
.pbar .title small { display: block; font-size: 11px; color: var(--ink); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.timer { margin-left: auto; font-family: var(--head); font-weight: 800; font-size: 24px; color: var(--deep); font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; }
.timer.low { color: #b42318; }
.timer small { display: block; font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.dots { display: flex; gap: 5px; flex-wrap: wrap; }
.dots button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; font-family: var(--head); font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; }
.dots button.cur { border-color: var(--badge); color: #fff; background: var(--badge); }
.dots button.filled { background: var(--tint); border-color: var(--b2); color: var(--ink); }

/* the problem card: number rail, the problem, the ANSWER column */
.prob { display: grid; grid-template-columns: 64px 1fr 170px; border: 1.2px solid var(--rule); border-radius: 12px; background: #fff; overflow: hidden; margin-top: 16px; box-shadow: var(--shadow); }
.prob .rail { padding: 16px 0 0 14px; display: grid; justify-items: start; align-content: start; gap: 6px; }
.prob .rail .circ { width: 38px; height: 38px; border-radius: 50%; background: var(--badge); color: #fff; font-family: var(--head); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.prob .rail .min { font-family: var(--head); font-size: 11.5px; font-weight: 600; color: var(--ink); }
.prob .rail .stars { font-size: 10px; letter-spacing: 1px; color: var(--sun); }
.prob .body { padding: 16px 18px 16px 10px; }
.prob .strat { display: inline-block; font-family: var(--head); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--suntint); color: var(--sunink); padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
.prob .ansbox { background: var(--tint); border-left: 1.2px solid var(--rule); padding: 16px 14px; display: grid; align-content: start; gap: 8px; }
.prob .ansbox label { font-family: var(--head); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-align: center; }
.prob .ansbox input { font: inherit; font-size: 20px; padding: 10px 10px; border: 1.4px solid var(--b1); border-radius: 8px; width: 100%; font-family: var(--head); text-align: center; background: #fff; }
.prob .ansbox input:focus { outline: none; border-color: var(--badge); }
.prob .ansbox .yours { text-align: center; font-family: var(--head); font-size: 20px; font-weight: 700; color: var(--deep); background: #fff; border: 1.4px solid var(--b1); border-radius: 8px; padding: 8px; }
.prob .ansbox .key { text-align: center; font-family: var(--head); font-size: 12px; color: var(--muted); }
.prob .ansbox .key b { color: var(--green); }
.prob .ansbox .mark { justify-self: center; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.prob .mark.ok { background: var(--green); } .prob .mark.no { background: var(--coral); }
.stmt { font-size: 18px; line-height: 1.55; color: var(--text); }
.stmt p { margin: 0 0 8px; }
.stmt .ctr { text-align: center; margin: 8px 0 10px; }
.stmt .dm { margin: 6px 0 10px; overflow-x: auto; }
.stmt ul, .stmt ol { margin: 4px 0 10px 24px; }
.stmt .tex-table { border-collapse: collapse; margin: 6px auto; font-size: 18px; }
.stmt .tex-table td { border: 1px solid var(--text); width: 40px; height: 40px; text-align: center; }
.stmt .tex-table td.thick-right { border-right-width: 3px; }
.stmt .tex-table tr.thick-below td { border-bottom-width: 3px; }
.stmt .tex-table.plain td { border: 0; width: auto; height: auto; text-align: left; padding: 3px 26px 3px 0; }
.fig { margin: 8px 0 6px; text-align: center; }
.fig svg { max-width: 100%; height: auto; max-height: 280px; }
.prob .ansbox .ans-row { display: flex; gap: 6px; }
.prob .ansbox .sign { flex: none; width: 44px; border: 1.4px solid var(--b1); border-radius: 8px; background: #fff; font-family: var(--head); font-size: 20px; font-weight: 700; color: var(--ink); cursor: pointer; }
.prob .ansbox .sign:hover { border-color: var(--badge); }
.prob .ansbox input.nope { border-color: #B3261E; animation: nope .3s; }
@keyframes nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .prob .ansbox input.nope { animation: none; } }
.howto { max-width: 800px; margin: 0 auto 20px; text-align: left; background: #fff; border: 1px solid var(--num); border-radius: 12px; padding: 14px 18px; }
.howto h3 { font-family: var(--head); font-size: 15px; color: var(--deep); margin: 0 0 8px; }
.howto dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14.5px; }
.howto dt { font-family: var(--head); font-weight: 700; color: var(--ink); }
.howto dd { margin: 0; }
.pnav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pnav .spacer { flex: 1; }

.start, .lock, .msg { text-align: center; padding: 28px 28px 32px; }
.start p, .lock p { color: var(--muted); max-width: 62ch; margin: 0 auto 8px; }
.lock h1 { font-size: clamp(24px, 3.4vw, 34px); margin: 6px 0 8px; }
.rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px auto; max-width: 800px; text-align: left; }
/* only the rule cards: KaTeX draws 
ule (a math strut) as span.rule, which a bare .rule turned into a tinted blob */
.rules .rule { background: var(--tint); border: 1px solid var(--num); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.rules .rule b { display: block; font-family: var(--head); color: var(--deep); font-size: 15px; }
.start .actions, .lock .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

/* results */
.score { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.score .big { font-family: var(--head); font-size: 64px; font-weight: 800; color: var(--deep); line-height: 1; }
.score .big small { font-size: 22px; color: var(--muted); font-weight: 700; }
.score h2 { font-size: 22px; margin-bottom: 4px; }
.score p { color: var(--muted); font-size: 16px; }
.medal { display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px 5px 6px; border-radius: 999px; font-weight: 800; margin-bottom: 8px; background: var(--tint); color: var(--deep); }
.medal .medal-dot { width: 22px; height: 22px; font-size: 0; }
.save-note { margin-top: 16px; padding: 14px 16px; border-radius: 12px; font-size: 15px; }
.save-note.ok { background: var(--tint); color: var(--ink); }
.save-note.warn { background: var(--suntint); color: var(--sunink); }
.save-note a { color: inherit; font-weight: 800; }
.sol { grid-column: 1 / -1; border-top: 1px dashed var(--rule); padding: 14px 18px 16px 18px; background: #fff; }
.sol[hidden] { display: none; }
.sol svg { max-width: 100%; height: auto; }
.sol .eyebrow { margin-bottom: 8px; }
.toggle-row { grid-column: 1 / -1; padding: 0 18px 12px; display: flex; justify-content: flex-end; }
.after { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; }
  .pick { justify-items: stretch; }
  .covers { justify-content: center; }
  .hero-bambo { width: 90px; right: 0; }   /* inside the screen: at -18px it widened a phone page */
  .steps, .plans { grid-template-columns: 1fr; }
  .record { grid-template-columns: repeat(2, 1fr); }
  .level { grid-template-columns: 1fr; }
  .rules { grid-template-columns: repeat(2, 1fr); }
  .scoring, .book { grid-template-columns: 1fr; }
  .score { grid-template-columns: 1fr; text-align: center; }
  .av-nav { display: none; }
  .av-header .av-wrap { padding: 10px 16px; }
  .av-logo img { height: 38px; }
  .av-footer .av-footer-grid { grid-template-columns: 1fr 1fr; }
  .pbar { top: 64px; }
  .banner .motif, .banner .cover-thumb { display: none; }
  .banner:has(.cover-thumb) { padding-right: 16px; }
}
@media (max-width: 640px) {
  .covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px; }
  .c-math { font-size: 34px; } .c-champ { font-size: 18px; } .c-motifs img { height: 22px; }
  .pick-cta { min-width: 0; width: 100%; }
  .prob { grid-template-columns: 56px 1fr; }
  .prob .ansbox { grid-column: 1 / -1; border-left: 0; border-top: 1.2px solid var(--rule); }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .card { padding: 18px 16px; }
  .stmt { font-size: 17px; }
  .timer { font-size: 20px; min-width: 80px; }
  .banner { padding: 18px 16px 16px; }
  .banner .pill { margin-left: 0; }
  .av-actions .av-btn-navy { display: none; }
  .av-footer .av-footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 44px 20px 28px; }
  .hero .motifs { gap: 16px; } .hero .motif img { height: 60px; }
}
/* inside the portal (a signed-in student): a slim bar back to the Student Portal, no site navigation */
.in-portal .av-header .av-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.av-portal-home { font-family: var(--head); font-weight: 700; color: #13498B; text-decoration: none; white-space: nowrap; }
.av-portal-home:hover { text-decoration: underline; }
.av-portal-who { color: var(--muted); font-weight: 600; font-size: 14px; }
/* phones: the contest bar in two short rows (title, clock, Rules; then the problem numbers in one scrolling line),
   so the sticky bar does not cover half the screen */
@media (max-width: 560px) {
  .pbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 10px; padding: 8px 12px; }
  .pbar .title { grid-row: 1; grid-column: 1; font-size: 15px; }
  .pbar .timer { grid-row: 1; grid-column: 2; margin: 0; min-width: 0; font-size: 20px; }
  .pbar .timer small { display: none; }
  .pbar #rules-btn { grid-row: 1; grid-column: 3; padding: 6px 12px; }
  .pbar .dots { grid-row: 2; grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 1px 0 2px; }
  .pbar .dots::-webkit-scrollbar { display: none; }
  .pbar .dots button { flex: none; width: 30px; height: 30px; }
  .av-portal-who { font-size: 12px; text-align: right; max-width: 55%; line-height: 1.3; }
}
/* the contest list marks each set's volume in that volume's cover colour */
.level-head h3 { display: inline-block; margin-right: 8px; }
.level-head .vol { display: inline-block; vertical-align: 3px; font-family: var(--head); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 10px; border-radius: 999px; background: #690903; color: #fff; }
.level-head .vol.v2 { background: #E4A942; color: #503606; }
:root[data-band="m"] .level-head .vol { background: #012C56; }
:root[data-band="m"] .level-head .vol.v2 { background: #014E36; color: #fff; }