/* The project page (calc.cpuchip.net): text at a reading width, the live calculator beside "Try it". The header,
   footer and mode switch are the lesson pages' (lesson.css); these are the page's own. */

.top-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--t-sm); }
.top-nav a { color: var(--ink-soft); text-decoration: none; }
.top-nav a:hover, .top-nav a:focus-visible { color: var(--ink); text-decoration: underline; }

.page { max-width: 1000px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-9); }
.page section { margin: 0 0 var(--s-7); }
.page h2 { font-size: var(--t-lg); margin: 0 0 var(--s-3); }
.page p { max-width: 70ch; }
.page a { color: var(--accent); }

.hero h1 { font-size: var(--t-2xl); line-height: var(--lh-tight); margin: var(--s-6) 0 var(--s-3); }
.hero .lede { font-size: var(--t-lg); color: var(--ink); margin: 0 0 var(--s-3); }

.try { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 800px) { .try { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } }
.try-modes { margin: var(--s-3) 0; justify-content: flex-start; }
.try-note { font-size: var(--t-sm); color: var(--ink-soft); }
.state { color: var(--ink-soft); }

.rows { list-style: none; margin: 0; padding: 0; max-width: 70ch; }
.rows li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--s-1) var(--s-4); padding: var(--s-2) 0; }
@media (max-width: 599px) { .rows li { grid-template-columns: minmax(0, 1fr); } }
.row-name { font-weight: 600; }
.row-state { color: var(--ink-soft); }
.coming { color: var(--ink-soft); }
.coming-code { margin: var(--s-4) 0 0; }
.coming-code > p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 0 var(--s-1); }

/* the header and footer at the page's width, so their edges share its line */
.top, .foot { max-width: 1000px; }