/* math.gakhov.com — the colours of the video boards: warm paper, near-black ink, the marker's blue. */
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("fonts/GolosText-Regular.ttf") format("truetype"); }
@font-face { font-family: "Golos Text"; font-weight: 700; font-display: swap; src: url("fonts/GolosText-Bold.ttf") format("truetype"); }

:root { --paper: #fcfbf9; --ink: #1b1b1b; --muted: #5d5d5d; --blue: #4462a0; --rule: #e4e1da; }
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0 auto; max-width: 64rem; padding: 0 1.25rem; font: 400 1.0625rem/1.6 "Golos Text", system-ui, sans-serif; }
a { color: var(--blue); }

header { text-align: center; padding: 2.5rem 0 1.5rem; }
.langs { text-align: right; font-size: 0.9rem; letter-spacing: 0.05em; }
.langs a, .langs span { margin-left: 0.6rem; }
.langs a { text-decoration: none; color: var(--muted); }
.langs span { font-weight: 700; }
.logo { display: block; margin: 1rem auto; width: 120px; height: 120px; }
h1 { font-size: 2.1rem; line-height: 1.2; margin: 0.5rem 0; }
.tagline { color: var(--muted); max-width: 40rem; margin: 0.5rem auto 0; }

main section { padding: 1.75rem 0; border-top: 1px solid var(--rule); }
h2 { font-size: 1.4rem; margin: 0 0 1rem; }
.about { max-width: 46rem; margin: 0 auto; font-size: 1.125rem; }

.volumes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem 1.25rem;
           grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.volume img { width: 100%; height: auto; display: block; border-radius: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.volume.later img { opacity: 0.55; }
.vnum { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); }
.vtitle { margin: 0; font-weight: 700; line-height: 1.3; }
.status { font-size: 0.85rem; color: var(--muted); }

.button { display: inline-block; padding: 0.55rem 1.1rem; border-radius: 6px; background: var(--blue); color: #fff;
          text-decoration: none; font-weight: 700; }
.button.small { padding: 0.3rem 0.8rem; font-size: 0.9rem; margin-top: 0.3rem; }
.button.disabled { background: var(--rule); color: var(--muted); font-weight: 400; }

footer { border-top: 1px solid var(--rule); padding: 1.5rem 0 2.5rem; font-size: 0.85rem; color: var(--muted); }
footer p { margin: 0.25rem 0; }

body.root header { padding-top: 5rem; }
.langs-big { font-size: 1.25rem; margin-top: 1.5rem; }

@media (max-width: 30rem) { h1 { font-size: 1.6rem; } .volumes { grid-template-columns: repeat(2, 1fr); } }