/* Layout: one light theme in the oro palette: ink for text, buttons and links, gold for small marks only, cool greys for the rest.
   Newsreader for every heading, grotesk body, mono for labels and code. */
:root {
  --bg: #f6f7f9; --bg-2: #eceef2; --fg: #09112b; --read: #2b3142; --muted: #5f6675; --line: #e3e6ec;
  --accent: #09112b; --accent-dark: #000000; --gold: #e0a526;
  --f-display: "Newsreader", Georgia, serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 17px; line-height: 1.65; padding-inline: 20px; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
/* hidden always wins, even over a class that sets display */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.wrap { max-width: 1180px; margin-inline: auto; min-height: 100vh; display: flex; flex-direction: column; }
.wrap > main { flex: 1; }
.mono { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--gold); }

.wrap > nav { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; padding-block: 24px; }
/* logo: the square-curl mark (public/logo.svg) beside "oro" in the nav's font, bold, the two the same height.
   The letters of "oro" are .51em tall; the mark fills 43 of its 54 viewBox units, so .64em of image gives a mark .51em tall.
   It sits on the letters' baseline, pulled down and left by the padding around it. */
.logo { display: inline-flex; align-items: baseline; gap: .22em; align-self: center; font: 700 28px/1 var(--f-body); letter-spacing: -.03em; color: var(--fg); text-decoration: none; }
.logo img { display: block; width: .64em; height: .64em; margin: 0 0 -.1em -.08em; transform: translateY(.07em); }
.wrap > nav ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0 0 0 auto; padding: 0; font: 500 15px var(--f-body); }
.wrap > nav ul a { text-decoration: none; color: var(--muted); cursor: pointer; transition: color .2s; }
.wrap > nav ul a:hover, .wrap > nav ul a[aria-current] { color: var(--fg); }
.wrap > nav svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wrap > nav svg .fill { fill: currentColor; stroke: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Search sits a little apart, with its "/" shortcut shown as a key */
.search-link { padding-left: 28px; border-left: 1px solid var(--line); }
.search-link a { display: inline-flex; align-items: center; gap: 8px; }
.search-link kbd { font: 500 11px/1 var(--f-mono); padding: 3px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; color: var(--muted); background: #fff; }
/* the WhatsApp community: the one solid ink button in the bar */
.wrap > nav .join a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 13px; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 600; transition: background .2s; }
.wrap > nav .join a:hover { color: #fff; background: #1c2647; }
.menu-btn { display: none; }
/* desktop: a gold underline slides in under the hovered link */
@media (min-width: 901px) {
  .wrap > nav ul li:not(.join) a { padding-block: 4px; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat; transition: color .2s, background-size .25s; }
  .wrap > nav ul li:not(.join) a:hover, .wrap > nav ul li:not(.join) a[aria-current] { background-size: 100% 2px; }
}
/* phones and tablets: a sticky bar with the logo and a menu button. The button drops a sheet down from under the bar:
   a search box at the top, the pages as a plain list (the current one underlined in gold, as on desktop),
   and the WhatsApp group as a button at the foot.
   The sheet only takes over once nav.js can close it again (the "js" class); without JavaScript the links stay as a plain list. */
@media (max-width: 900px) {
  .wrap > nav { position: sticky; top: 0; z-index: 20; align-items: center; gap: 0 10px; margin-inline: -20px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--bg); }
  .logo { white-space: nowrap; flex-shrink: 0; font-size: 26px; }
  .menu-btn { order: 2; margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; background: transparent; color: var(--fg); cursor: pointer; }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s, background .2s, width .25s; }
  .menu-btn span { position: relative; width: 20px; }
  .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
  .menu-btn span::before { top: -6px; width: 20px; }
  .menu-btn span::after { top: 6px; width: 12px; }
  .open .menu-btn span { background: transparent; }
  .open .menu-btn span::before { transform: translateY(6px) rotate(45deg); }
  .open .menu-btn span::after { width: 20px; transform: translateY(-6px) rotate(-45deg); }

  .wrap > nav ul { order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 10px 0 0; }
  .wrap > nav ul a { display: block; padding: 11px 0; border-top: 1px solid var(--line);
    font: 500 20px/1.2 var(--f-display); letter-spacing: -.01em; color: var(--fg); }
  .wrap > nav ul li:not(.join):not(.search-link) a[aria-current] { text-decoration: underline 2px var(--gold); text-underline-offset: 6px; }
  .wrap > nav ul a:active { color: var(--accent); }
  /* search: looks like a search box at the top of the sheet */
  .search-link { order: -1; margin: 0 0 14px; padding: 0; border: 0; }
  .wrap > nav .search-link a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 400 16px var(--f-body); color: var(--muted); }
  .search-link kbd { display: none; }
  /* the group: a full-width navy button under the list */
  .wrap > nav .join { order: 99; margin-top: 22px; }
  .wrap > nav .join a { display: flex; justify-content: center; gap: 10px; padding: 14px; border-radius: 10px; font: 600 16px var(--f-body); background: var(--accent); color: #fff; }
  .wrap > nav .join a:active { background: var(--accent-dark); }

  .js .wrap > nav ul { position: fixed; top: var(--nav-h, 69px); left: 0; right: 0; max-height: calc(100dvh - var(--nav-h, 69px)); margin: 0; padding: 18px 20px 24px;
    overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-bottom: 1px solid var(--line);
    visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .32s cubic-bezier(.2, .8, .2, 1), visibility 0s .32s; }
  .js .wrap > nav.open ul { visibility: visible; clip-path: inset(0); transition: clip-path .32s cubic-bezier(.2, .8, .2, 1); }
  .js .wrap > nav ul li { opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
  .js .wrap > nav.open ul li { opacity: 1; transform: none; }
  /* the page behind the sheet dims; tapping it closes the menu (nav.js) */
  .js .wrap > nav::after { content: ""; position: fixed; inset: var(--nav-h, 69px) 0 0; z-index: -1; background: rgba(9, 17, 43, .28); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  .js .wrap > nav.open::after { opacity: 1; visibility: visible; transition: opacity .3s; }
  html.menu-open { overflow: hidden; }
}

/* home page: a hero that fills the first screen together with the nav bar above it (84px tall on desktop, 69px on phones),
   its content centred in the space left, then the skills in three columns under ink rules, then how you learn as numbered rows beside its heading,
   then the newest skills as dated rows, then a white panel asking people to join the community, with the logo's curl drawn large beside it */
.hero { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 84px); padding-block: 48px; }
/* behind the hero (and the about page's heading): rounded squares nested like the logo's curl, centred right of the text, fading out towards the left and behind the headline */
.hero, .page-hero { position: relative; isolation: isolate; }
.hero::before, .page-hero::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Crect%20x%3D%22440%22%20y%3D%22440%22%20width%3D%22120%22%20height%3D%22120%22%20rx%3D%2217%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%22384%22%20y%3D%22384%22%20width%3D%22232%22%20height%3D%22232%22%20rx%3D%2232%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%22328%22%20y%3D%22328%22%20width%3D%22344%22%20height%3D%22344%22%20rx%3D%2248%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%22272%22%20y%3D%22272%22%20width%3D%22456%22%20height%3D%22456%22%20rx%3D%2264%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%22216%22%20y%3D%22216%22%20width%3D%22568%22%20height%3D%22568%22%20rx%3D%2280%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%22160%22%20y%3D%22160%22%20width%3D%22680%22%20height%3D%22680%22%20rx%3D%2295%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%22104%22%20y%3D%22104%22%20width%3D%22792%22%20height%3D%22792%22%20rx%3D%22111%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%2248%22%20y%3D%2248%22%20width%3D%22904%22%20height%3D%22904%22%20rx%3D%22127%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%22-8%22%20y%3D%22-8%22%20width%3D%221016%22%20height%3D%221016%22%20rx%3D%22142%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%22-64%22%20y%3D%22-64%22%20width%3D%221128%22%20height%3D%221128%22%20rx%3D%22158%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%22-120%22%20y%3D%22-120%22%20width%3D%221240%22%20height%3D%221240%22%20rx%3D%22174%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%22-176%22%20y%3D%22-176%22%20width%3D%221352%22%20height%3D%221352%22%20rx%3D%22189%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%22-232%22%20y%3D%22-232%22%20width%3D%221464%22%20height%3D%221464%22%20rx%3D%22205%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%22-288%22%20y%3D%22-288%22%20width%3D%221576%22%20height%3D%221576%22%20rx%3D%22221%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%22-344%22%20y%3D%22-344%22%20width%3D%221688%22%20height%3D%221688%22%20rx%3D%22236%22%20fill%3D%22none%22%20stroke%3D%22%23dde1e8%22%20stroke-width%3D%221.5%22/%3E%3C/svg%3E") no-repeat calc(50% + 420px) 50% / 1100px;
  --fade: radial-gradient(ellipse 50% 85% at 92% 50%, #000 25%, transparent 80%);
  /* a softer band across the middle, where the headline sits, so the lines behind it are fainter */
  --band: linear-gradient(#000 28%, rgb(0 0 0 / .3) 36%, rgb(0 0 0 / .3) 54%, #000 62%);
  -webkit-mask-image: var(--fade), var(--band); -webkit-mask-composite: source-in;
  mask-image: var(--fade), var(--band); mask-composite: intersect; }
.hero h1 { max-width: 13em; font-size: clamp(48px, 8vw, 96px); letter-spacing: -.025em; }
.hero .lead { margin-top: 24px; max-width: 34em; font-size: 20px; color: var(--muted); }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 40px; }
.btn { display: inline-flex; align-items: center; padding: 15px 26px; border: 1.5px solid var(--accent); border-radius: 6px; background: var(--accent); color: #fff; font: 600 17px/20px var(--f-body); text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.btn:hover { background: #1c2647; border-color: #1c2647; }
/* the hero's second button: an ink outline that fills on hover */
.btn.outline { background: none; color: var(--accent); }
.btn.outline:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.home .skills, .home .split, .home .new, .home .who { max-width: none; padding-block: 24px; }
.home .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px 64px; align-items: start; padding-top: 96px; }
.home .skills h2, .home .split h2, .home .new h2, .home .who h2 { font-size: clamp(32px, 4vw, 44px); }
.home .skills > p, .home .split > div > p, .home .new > p, .home .who > p { margin-top: 12px; color: var(--muted); max-width: 40em; }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin-top: 40px; }
.cols > div { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--fg); }
.cols h3 { font-size: 26px; }
.cols p { flex: 1; color: var(--read); font-size: 16px; }
.cols .facts { font-size: 14px; color: var(--muted); }
.cols .link { align-self: start; margin-top: 8px; font-size: 15px; transition: text-decoration-color .2s; }
.cols .link:hover { text-decoration-color: var(--fg); }
/* how you learn: big serif numbers in rows, so the rows read differently from the skill columns above */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 6px 24px; padding-block: 28px; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .n { grid-row: span 2; font: 400 72px/.85 var(--f-display); color: var(--gold); }
.steps h3 { font-size: 26px; }
.steps p { max-width: 34em; color: var(--read); }
.home .new { padding-top: 96px; }
.new-list { list-style: none; margin: 36px 0 0; padding: 0; }
.new-list li { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 8px 40px; align-items: baseline; padding-block: 24px; border-top: 1px solid var(--line); }
.new-list li:last-child { border-bottom: 1px solid var(--line); }
.new-list time { font-size: 14px; font-weight: 600; color: var(--muted); }
.new-list h3 { font-size: 24px; }
.new-list p { margin-top: 6px; max-width: 46em; color: var(--read); font-size: 16px; }
.new-list .link { font-size: 15px; white-space: nowrap; }
.page-hero { padding-block: 96px 48px; }
/* the about heading is short, so its squares run on below it and fade out evenly instead of being cut off */
.page-hero::before { bottom: -120px; background-position: calc(50% + 440px) 45%; background-size: 760px;
  --fade: radial-gradient(ellipse 40% 50% at 88% 45%, #000 15%, transparent 70%); --band: linear-gradient(#000, #000); }
.page-hero h1 { max-width: 14em; font-size: clamp(44px, 6.5vw, 76px); letter-spacing: -.025em; }
.page-hero .lead { margin-top: 24px; max-width: 36em; font-size: 20px; color: var(--muted); }
/* about page: what Oro covers, as labelled rows beside the heading */
.covers { margin: 0; }
.covers > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 24px; padding-block: 24px; border-top: 1px solid var(--line); }
.covers > div:last-child { border-bottom: 1px solid var(--line); }
.covers dt { font: 500 22px/1.3 var(--f-display); }
.covers dd { margin: 0; color: var(--read); }
.covers a { text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.covers a:hover { color: var(--accent); }
/* projects page: skill buttons under the heading that pick which skill's projects show, then that skill's projects as white cards in two columns */
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.jump a, .jump button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--fg); font: 500 15px var(--f-body); text-decoration: none; cursor: pointer; transition: border-color .2s; }
.jump a:hover, .jump button:hover { border-color: var(--fg); }
.jump a[aria-current], .jump button[aria-pressed="true"] { border-color: var(--fg); background: var(--fg); color: #fff; }
.jump a[aria-current] span, .jump button[aria-pressed="true"] span { color: #b9bfd3; }
.jump span { font-size: 13px; color: var(--muted); }
.proj-group { padding-top: 64px; scroll-margin-top: 24px; }
.js .proj-group { padding-top: 40px; }
.proj-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding-bottom: 18px; border-bottom: 2px solid var(--fg); }
.proj-head h2 { font-size: clamp(28px, 3.4vw, 36px); }
.proj-head p { color: var(--muted); }
.proj-head a { color: var(--fg); font-weight: 600; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.proj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.proj { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 8px; transition: border-color .2s; }
.proj:hover { border-color: var(--fg); }
.proj .meta { font-size: 14px; font-weight: 600; color: var(--muted); }
.proj h3 { font-size: 26px; }
.proj p:not(.meta) { flex: 1; color: var(--read); font-size: 16px; }
.proj .link { align-self: start; margin-top: 6px; font-size: 15px; }
/* skills page: one row per skill, the name and size on the left, the summary and roadmap place in the middle, links on the right */
.skill-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.skill-rows li { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 12px 48px; align-items: start; padding-block: 32px; border-bottom: 1px solid var(--line); }
.skill-rows h2 { font-size: 30px; }
.skill-rows .facts { margin-top: 8px; font-size: 14px; color: var(--muted); }
.skill-rows p:not(.facts) { max-width: 40em; color: var(--read); }
.skill-rows .facts a { color: var(--fg); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.skill-rows .go { display: grid; gap: 10px; justify-items: start; font-size: 15px; }
.skill-rows .go a:not(.link) { color: var(--muted); text-underline-offset: 4px; }
.skill-rows .go a:not(.link):hover { color: var(--fg); }
.join-cta { display: flex; align-items: center; justify-content: space-between; gap: 48px; margin-top: 72px; padding: 64px 56px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.join-cta .mark { flex-shrink: 0; width: 200px; height: 200px; margin-right: 24px; fill: none; stroke: var(--fg); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.join-cta h2 { font-size: clamp(32px, 4vw, 44px); }
.join-cta .btn { gap: 10px; margin-top: 28px; border-color: var(--gold); background: var(--gold); color: var(--fg); }
.join-cta .btn:hover { border-color: #c99118; background: #c99118; }
.join-cta .btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.join-cta .btn svg .fill { fill: currentColor; stroke: none; }
.join-cta p { margin-top: 10px; max-width: 34em; color: var(--muted); }
@media (max-width: 900px) { .hero { min-height: calc(100svh - 69px); } .hero::before { background-position: 70% 50%; background-size: 800px; } .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home .split { grid-template-columns: 1fr; padding-top: 64px; } .page-hero { padding-block: 56px 32px; } .covers > div { grid-template-columns: 1fr; } .proj-grid { grid-template-columns: 1fr; } .skill-rows li { grid-template-columns: 1fr; } .home .new { padding-top: 64px; } .new-list li { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .hero { padding-block: 32px; } .hero .lead { font-size: 18px; } .cols { grid-template-columns: 1fr; gap: 32px; } .steps li { grid-template-columns: 56px minmax(0, 1fr); } .steps .n { font-size: 52px; } .join-cta { margin-top: 64px; padding: 36px 24px; } .join-cta .mark { display: none; } }

/* roadmaps page: each roadmap's heading with its progress and a start button, then its stages, the stage name on the
   left and its steps on the right. Written steps link to their skill; planned ones are muted. */
.road { padding-top: 24px; scroll-margin-top: 16px; }
.road + .road { margin-top: 96px; }
.road-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; padding-bottom: 28px; border-bottom: 2px solid var(--fg); }
.road-head h2 { font-size: clamp(32px, 4vw, 44px); }
.road-head p:not(.facts) { margin-top: 12px; max-width: 40em; color: var(--read); }
.road-head .facts { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--muted); }
.stage { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 48px; padding-block: 28px; border-bottom: 1px solid var(--line); }
.stage h3 { font-size: 22px; padding-top: 10px; }
.stage ol { list-style: none; margin: 0; padding: 0; }
.stage li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto 3.5em; gap: 16px; align-items: baseline; padding-block: 10px; color: color-mix(in srgb, var(--fg) 45%, var(--bg)); }
.stage li + li { border-top: 1px solid var(--line); }
.stage .n { font: 400 14px var(--f-mono); color: var(--muted); }
.stage li > :nth-child(2) { font: 500 21px/1.3 var(--f-display); }
.stage .live { color: var(--fg); }
.stage li > a:nth-child(2) { text-decoration-color: var(--line); text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
.stage li > a:nth-child(2):hover { color: var(--accent); text-decoration-color: currentColor; }
.stage .facts { font-size: 14px; color: var(--muted); white-space: nowrap; }
.stage .link { font-size: 15px; justify-self: end; }
@media (max-width: 900px) { .stage { grid-template-columns: 1fr; } .stage h3 { padding-top: 0; } .road + .road { margin-top: 64px; } }
@media (max-width: 640px) { .stage li { grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 2px 16px; } .stage .facts { grid-column: 2; grid-row: 2; } .stage .link { grid-column: 3; grid-row: 1; } .stage li > :nth-child(2) { font-size: 19px; } }

/* a skill page: the heading with its size, roadmap place and start button, the topics as numbered rows with their
   reading time, the projects as cards, and the next skill on the roadmap */
.skillpage .crumbs { margin-bottom: 14px; }
.skillpage .page-hero .facts { margin-top: 10px; font-size: 15px; color: var(--muted); }
.skillpage .page-hero .lead + .facts { margin-top: 20px; }
.skillpage .page-hero .facts a { color: var(--fg); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.skillpage .start { margin-top: 28px; }
.skill-topics, .skill-projects { max-width: 860px; padding-top: 24px; }
.skill-projects { max-width: none; padding-top: 64px; }
.skillpage h2 { font-size: clamp(28px, 3.4vw, 36px); }
.skill-projects .intro { margin-top: 8px; color: var(--muted); }
.skill-next { max-width: 860px; margin-top: 64px; }
.skill-steps .min { font-size: 14px; color: var(--muted); white-space: nowrap; }
.skill-steps { list-style: none; margin: 20px 0 0; padding: 0; }
.skill-steps li { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding-block: 18px; border-top: 1px solid var(--line); }
.skill-steps li:last-child { border-bottom: 1px solid var(--line); }
.skill-steps .n { font: 400 14px/1.9 var(--f-mono); color: var(--muted); }
.skill-steps h3 { font: 500 21px/1.35 var(--f-display); }
.skill-steps h3 a { text-decoration-color: var(--line); text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
.skill-steps h3 a:hover { color: var(--accent); text-decoration-color: currentColor; }
.skill-steps p { margin-top: 4px; color: var(--read); font-size: 15.5px; }
@media (max-width: 640px) { .skill-steps li { grid-template-columns: 2.4em minmax(0, 1fr); } .skill-steps .min { grid-column: 2; } }

/* lesson page: the lesson on the left; on wide screens a sticky contents list on the right (the 404 page uses the same head) */
.notes { padding-block: 56px 48px; }
.notes-head, .notes-body { max-width: 720px; }
.notes-head { padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); }
.crumbs a { text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: var(--accent); }
.notes-head h1 { font-size: clamp(40px, 6vw, 64px); margin-top: 18px; }
.notes-head .lead { margin-top: 14px; color: var(--muted); font-size: 19px; max-width: 34em; }
.notes-head .go { margin-top: 24px; }
.notes-head .meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 18px; font-size: 14px; color: var(--muted); }
.notes-head .meta span + span::before { content: "·"; margin-inline: 10px; }
@media (min-width: 1100px) {
  .notes.has-toc { display: grid; grid-template-columns: minmax(0, 720px) 220px; column-gap: 96px; }
  .notes.has-toc .notes-head, .notes.has-toc .notes-body { grid-column: 1; }
  .notes.has-toc .toc { grid-column: 2; grid-row: 1 / span 2; }
}
/* a thin ink line across the top that fills as you read */
.progress-line { position: fixed; top: 0; left: 0; z-index: 30; height: 2px; width: 100%; background: var(--accent); transform: scaleX(var(--read, 0)); transform-origin: left; pointer-events: none; }
.md { font-size: 18px; line-height: 1.7; color: var(--read); }
.md h2, .md h3, .md strong, .md b { color: var(--fg); }
.md > p, .md > ul, .md > ol, .md > blockquote { max-width: 68ch; }
.md > * + * { margin-top: 18px; }
.md h2 { font-size: clamp(28px, 3.4vw, 36px); margin-top: 52px; }
.md h3 { font-size: 23px; margin-top: 34px; }
.md h2 + *, .md h3 + * { margin-top: 12px; }
.md a { text-decoration-color: var(--accent); text-underline-offset: 4px; }
.md strong { font-weight: 700; }
.md ul, .md ol { padding-left: 24px; }
.md li + li { margin-top: 6px; }
.md blockquote { margin-inline: 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--accent); color: var(--muted); }
.md hr { border: 0; border-top: 1px solid var(--line); margin-block: 40px; }
.md :not(pre) > code { font-family: var(--f-mono); font-size: .86em; background: var(--bg-2); padding: 2px 6px; border-radius: 2px; }
.md pre { position: relative; margin-inline: 0; background: var(--bg-2); padding: 18px 76px 18px 20px; overflow-x: auto; font: 400 14px/1.7 var(--f-mono); border-left: 2px solid var(--line); }
.md pre code { font: inherit; }
.md .copy { position: absolute; top: 8px; right: 8px; font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--bg); color: var(--muted); border: 1px solid var(--line); border-radius: 2px; padding: 5px 9px; cursor: pointer; }
.md .copy:hover { color: var(--fg); border-color: var(--muted); }
.md table { border-collapse: collapse; width: 100%; font-size: 16px; display: block; overflow-x: auto; }
.md th, .md td { text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.md th { font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.md img { max-width: 100%; height: auto; }
.hljs-keyword, .hljs-built_in, .hljs-selector-tag { color: var(--accent); }
.hljs-string, .hljs-attr, .hljs-addition { color: var(--accent-dark); }
.hljs-comment, .hljs-quote, .hljs-meta { color: var(--muted); font-style: italic; }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-title { color: var(--fg); font-weight: 500; }
.hljs-deletion { color: var(--accent); }
.label { font-size: 13px; font-weight: 500; color: var(--accent); }
/* the end of a lesson: the done button, then the next topic as a white panel with its summary, and a quiet link back */
.lesson-end { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.mark-done { margin-bottom: 24px; padding: 8px 16px; border-width: 1px; font-size: 15px; line-height: 20px; }
.mark-done[aria-pressed="true"] { background: var(--accent); color: #fff; }
.mark-done[aria-pressed="true"]::before { content: ""; width: 6px; height: 10px; margin: -3px 10px 0 1px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lesson-end nav { display: grid; gap: 16px; }
.lesson-end .next { display: grid; gap: 6px; padding: 26px 28px; background: #fff; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; transition: border-color .2s; }
.lesson-end .next:hover { border-color: var(--fg); }
.lesson-end .next .label { color: var(--muted); font-weight: 600; }
.lesson-end .next b { font: 500 26px/1.25 var(--f-display); }
.lesson-end .next .line { color: var(--read); font-size: 16px; }
.lesson-end .prev { justify-self: start; font-size: 15px; color: var(--muted); text-underline-offset: 4px; }
.lesson-end .prev:hover { color: var(--fg); }
/* lessons marked done in this browser (progress.js) */
.skill-steps li.done h3::after, .proj.done h3::after { content: "Done"; margin-left: 12px; font: 600 13px var(--f-body); color: var(--muted); vertical-align: middle; }
.done-count { color: var(--fg) !important; font-weight: 600; }

/* contents list: a folding box above the notes on narrow screens, a sticky list beside them on wide ones.
   lesson.js marks the section being read with aria-current. */
.toc { margin-bottom: 40px; padding: 16px 20px; background: var(--bg-2); border-radius: 8px; }
.toc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 500; color: var(--muted); }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; font-size: 18px; line-height: 1; color: var(--accent); }
.toc details[open] summary::after { content: "−"; }
.toc ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; font-size: 15px; line-height: 1.4; }
.toc a { display: block; padding: 5px 0; text-decoration: none; color: var(--muted); transition: color .2s; }
.toc a:hover, .toc a[aria-current] { color: var(--fg); }
@media (min-width: 1100px) {
  .toc { position: sticky; top: 40px; align-self: start; max-height: calc(100vh - 80px); overflow-y: auto; margin: 0; padding: 0; background: none; border-radius: 0; }
  .toc summary { pointer-events: none; margin-bottom: 6px; }
  .toc summary::after, .toc details[open] summary::after { content: none; }
  .toc ul { margin: 0; border-left: 1px solid var(--line); }
  .toc a { padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; }
  .toc a[aria-current] { border-left-color: var(--accent); color: var(--fg); }
}
.md h2, .md h3 { scroll-margin-top: 24px; }

/* search: the box is the page's heading, a large serif line on a rule, like writing on a ruled page */
.search { max-width: 860px; padding-block: 64px 96px; }
.search-box input { -webkit-appearance: none; appearance: none; width: 100%; padding: 0 0 14px; border: 0; border-radius: 0; background: none;
  box-shadow: inset 0 -1px var(--line); font: 500 clamp(36px, 6vw, 56px)/1.1 var(--f-display); letter-spacing: -.015em; color: var(--fg); transition: box-shadow .2s; }
.search-box input:focus { outline: none; box-shadow: inset 0 -2px var(--accent); }
.search-box input::placeholder { color: color-mix(in srgb, var(--muted) 55%, var(--bg)); }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-status { margin-top: 14px; color: var(--muted); font-size: 15px; }
.search-status:empty { display: none; }
/* before you type: searches to try and the skills to browse, as plain links after a muted label */
.search-start { display: grid; gap: 10px; margin-top: 24px; font-size: 15px; }
.search-start p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.search-start span { color: var(--muted); }
.search-start a { font-weight: 600; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.search-filter { margin-top: 20px; }
.search-filter:empty { display: none; }
/* results: one block per lesson, its title and skill on a line, then its matching sections indented on a rule */
.results { list-style: none; margin: 32px 0 0; padding: 0; }
.results:empty { display: none; }
.results > li { padding-block: 24px; border-top: 1px solid var(--line); }
.results > li:last-child { border-bottom: 1px solid var(--line); }
.results a { text-decoration: none; }
.results .lesson { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; }
.results .lesson b { font: 500 24px/1.3 var(--f-display); text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
.results .lesson:hover b, .results .lesson.active b { color: var(--accent); text-decoration-color: currentColor; }
.results .where { color: var(--muted); font-size: 14px; }
.results ul { list-style: none; margin: 12px 0 0; padding: 0 0 0 20px; border-left: 2px solid var(--line); }
.results ul a { display: block; padding-block: 8px; }
.results .sec { font-weight: 600; font-size: 15.5px; text-decoration: underline 1px transparent; text-underline-offset: 4px; transition: text-decoration-color .2s; }
.results ul a:hover .sec, .results ul a.active .sec { text-decoration-color: currentColor; }
.results ul p { margin-top: 2px; max-width: 46em; color: var(--read); font-size: 15px; line-height: 1.6; }
.results mark { background: none; color: var(--fg); font-weight: 700; }
.results .also { margin: 6px 0 0 22px; font-size: 14px; color: var(--muted); }
.search-more { margin-top: 28px; }
@media (max-width: 640px) { .search { padding-block: 40px 64px; } .results ul { padding-left: 14px; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* "Check your work" and "Show answer" boxes in the lessons */
.md details { margin: 16px 0 24px; padding: 12px 18px; background: var(--bg-2); border-left: 2px solid var(--accent); }
.md details > summary { cursor: pointer; font-weight: 700; }
.md details > pre { background: var(--bg); }
/* keys to press, drawn as keycaps */
.md kbd { font: 500 .78em/1 var(--f-mono); padding: 3px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--fg); white-space: nowrap; }
.md details[open] > summary { margin-bottom: 8px; }

/* footer: a full-width ink band with the logo, a line about oro, and the links in columns */
.site-foot { margin: 0 calc(50% - 50vw); background: var(--fg); color: #b9bfd3; font-size: 15px; }
.foot-in { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 32px; max-width: calc(1180px + 40px); margin-inline: auto; padding: 56px 20px 28px; }
.site-foot .logo { color: #fff; }
.foot-about p { margin-top: 8px; max-width: 26em; }
.foot-about .tagline { margin-top: 18px; font: 500 24px/1.2 var(--f-display); color: #fff; }
.site-foot h2 { margin-bottom: 12px; font: 600 14.5px var(--f-body); letter-spacing: 0; color: #fff; }
.site-foot ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.site-foot a { text-decoration: none; transition: color .2s; }
.site-foot a:hover { color: #fff; }
/* the bottom row: copyright and licence on the left, back to top on the right */
.foot-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.foot-bottom a { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.wrap > main + .site-foot { margin-top: 72px; }
@media (max-width: 900px) { .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-about { grid-column: 1 / -1; } }
@media (max-width: 640px) { .foot-in { grid-template-columns: 1fr; } }