/* mrpenney.ca — one stylesheet for the whole site.
   Plain type, one accent colour, no decoration that isn't doing work. */

:root{
  --ink:#16181d; --ink-soft:#5b6270; --ink-faint:#8b929e;
  --bg:#fcfbf9; --card:#fff; --line:#e5e2db;
  --accent:#b23c08;
  --code-bg:#14171c; --code-ink:#e6e9ef;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e9ebef; --ink-soft:#a4acba; --ink-faint:#767e8c;
    --bg:#15171b; --card:#1c1f25; --line:#2b3038;
    --accent:#ff8a4c;
    /* Dark mode needs the code block LIGHTER than the page, not darker, or it disappears. */
    --code-bg:#22262d; --code-ink:#e9ebef;
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:52rem; margin:0 auto; padding:0 1.25rem}
.wrap.wide{max-width:64rem}

h1{font-size:1.9rem; line-height:1.2; letter-spacing:-.02em; margin:0 0 .35rem}
h2{font-size:1.05rem; letter-spacing:.02em; margin:2.75rem 0 1rem; font-weight:650}
h3{font-size:1rem; margin:1.75rem 0 .5rem}
p{margin:0 0 1rem; color:var(--ink-soft)}
a{color:var(--accent); text-underline-offset:3px}
.sub{color:var(--ink-soft); margin:0 0 2rem}
.tiny{font-size:.85rem; color:var(--ink-faint)}

/* header ------------------------------------------------------------------ */
header.top{border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; gap:.6rem; height:3.25rem; font-size:.92rem}
header.top a{color:var(--ink-soft); text-decoration:none}
header.top a:hover{color:var(--accent)}
header.top a[aria-current]{color:var(--ink)}
header.top .home{font-weight:650; color:var(--ink)}
header.top .sep{color:var(--ink-faint)}
main{padding:2.75rem 0 4rem}
footer{border-top:1px solid var(--line); padding:1.25rem 0; font-size:.85rem}
footer .wrap{display:flex; gap:1.25rem; color:var(--ink-faint)}
footer a{color:var(--ink-faint)}

/* simple link lists -------------------------------------------------------- */
.rows{border-top:1px solid var(--line)}
.rows a{
  display:flex; align-items:baseline; gap:.75rem; padding:.85rem .25rem;
  border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink);
}
.rows a:hover{color:var(--accent)}
.rows .name{font-weight:600}
.rows .note{color:var(--ink-faint); font-size:.9rem}
.rows .go{margin-left:auto; color:var(--ink-faint)}

/* lesson previews ---------------------------------------------------------- */
.lessons{
  display:grid; gap:1.5rem 1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  margin:0;
}
.lesson{text-decoration:none; color:inherit; display:block}
.lesson img{
  width:100%; aspect-ratio:16/9; display:block; border-radius:6px;
  border:1px solid var(--line); background:var(--card);
}
.lesson:hover img{border-color:var(--accent)}
.lesson .n{display:block; font-size:.78rem; color:var(--ink-faint); margin:.6rem 0 .1rem; font-family:var(--mono)}
.lesson .t{display:block; font-size:.95rem; font-weight:600; line-height:1.35}
.lesson.noimg .ph{
  width:100%; aspect-ratio:16/9; border-radius:6px; border:1px dashed var(--line);
  display:grid; place-items:center; color:var(--ink-faint); font-size:.85rem;
}

/* reference sheets --------------------------------------------------------- */
.sheet h2{border-top:1px solid var(--line); padding-top:1.75rem; font-size:1.15rem; scroll-margin-top:1rem}
.sheet h2:first-of-type{border-top:0; padding-top:0}
.sheet ul,.sheet ol{color:var(--ink-soft); padding-left:1.25rem}
.sheet li{margin-bottom:.3rem}
.toc{margin:0 0 2.5rem; padding:0 0 1.25rem; border-bottom:1px solid var(--line)}
.toc ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem}
.toc li{font-size:.9rem}

code{font-family:var(--mono); font-size:.88em; background:rgba(127,127,127,.13); padding:.1em .32em; border-radius:4px}
pre{
  font-family:var(--mono); background:var(--code-bg); color:var(--code-ink);
  padding:.9rem 1.1rem; border:1px solid var(--line);
  border-radius:8px; overflow-x:auto; font-size:.82rem; line-height:1.6; margin:0 0 1.25rem;
}
pre code{background:none; padding:0; color:inherit; font-size:1em}
table{border-collapse:collapse; width:100%; margin:0 0 1.25rem; font-size:.93rem}
th,td{text-align:left; padding:.5rem .7rem .5rem 0; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:650}
td{color:var(--ink-soft)}
blockquote{margin:0 0 1.25rem; padding-left:1rem; border-left:2px solid var(--line); color:var(--ink-soft)}
.table-scroll{overflow-x:auto; margin:0 0 1.25rem}
.table-scroll table{margin:0}
hr{border:0; border-top:1px solid var(--line); margin:2rem 0}

@media print{
  header.top,footer,.toc{display:none}
  body{background:#fff; color:#000; font-size:11pt}
  pre{background:#f4f4f4; color:#111; border:1px solid #ddd}
  a{color:#000; text-decoration:none}
}