/* cursos.santiago.work — shared stylesheet (same tokens as santiago.work) */
:root {
  --bg: #f7f4ee; --bg-2: #efe9df; --ink: #1d1b18; --ink-2: #5a554c; --line: #d9d2c5;
  --accent: #b5471f; --accent-soft: #f3dfd4; --card: #ffffff; --ok: #2f7d4f; --ok-soft: #dfeee4;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max: 960px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#171513; --bg-2:#211e1b; --ink:#ece7de; --ink-2:#a9a194; --line:#363129;
          --accent:#e8794a; --accent-soft:#3a251b; --card:#1f1c19; --ok:#6fc08f; --ok-soft:#1e3327; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); text-wrap: balance; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 1.8em; }
h3 { font-size: 1.2rem; }
code, kbd { font-family: var(--mono); font-size: .85em; }
kbd { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; color: var(--ink); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px 64px; }

/* top bar */
.top { display:flex; align-items:center; gap:18px; padding:14px 0; }
.top .brand { font-family: var(--serif); font-weight:600; color: var(--ink); font-size:1.15rem; }
.top .crumbs { color: var(--ink-2); font-size:.95rem; }
.top .crumbs a { color: var(--ink-2); }
.top .home { margin-left:auto; font-size:.9rem; color: var(--ink-2); }

/* header */
.eyebrow { margin: 28px 0 .5em; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); font-weight:600; }
.meta { color: var(--ink-2); margin: 0 0 1.4em; }
.meta b { color: var(--ink); font-weight: 600; }
.lede { font-size: 1.1rem; max-width: 64ch; margin: 0 0 1.6em; }

/* course cards (hub) */
.courses { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:18px; margin: 8px 0 20px; }
.course { display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; color:var(--ink); transition: transform .15s, border-color .15s, box-shadow .15s; }
a.course:hover { text-decoration:none; transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.course .k { font-family: var(--mono); font-size:.78rem; color:var(--accent); }
.course h3 { margin:.35em 0 .3em; }
.course p { margin:0; color:var(--ink-2); font-size:.95rem; }
.course .foot { margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.course.soon { opacity:.65; }

/* pills */
.pill { display:inline-block; padding:2px 10px; border-radius:999px; font-family:var(--mono); font-size:.74rem; background:var(--bg-2); color:var(--ink-2); border:1px solid var(--line); }
.pill.ok { background:var(--ok-soft); color:var(--ok); border-color:transparent; }
.pill.acc { background:var(--accent-soft); color:var(--accent); border-color:transparent; }

/* lesson list (course page) */
ol.lessons { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.lesson { display:grid; grid-template-columns: 56px 1fr auto; gap:16px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; color:inherit; }
a.lesson:hover { text-decoration:none; border-color:var(--accent); box-shadow:0 6px 18px rgba(0,0,0,.07); }
.lesson .n { font-family:var(--serif); font-weight:600; font-size:2rem; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.lesson .t { font-weight:600; font-size:1.1rem; line-height:1.25; }
.lesson .s { color:var(--ink-2); font-size:.92rem; margin-top:3px; }
.lesson .go { font-family:var(--mono); font-size:.8rem; color:var(--accent); white-space:nowrap; }
.lesson .pill { margin-left:8px; vertical-align:middle; }
.lesson.soon { opacity:.6; }
.lesson.soon .n, .lesson.soon .go { color: var(--ink-2); }

/* info blocks */
.block { background:var(--bg-2); border-radius:14px; padding:20px 24px; margin: 0 0 18px; }
.block h3 { margin-top:0; }
.keys { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; align-items:baseline; font-size:.95rem; color:var(--ink-2); margin:0; }
.keys dt { margin:0; } .keys dd { margin:0; }
.two { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.todo { color: var(--ink-2); font-style: italic; }

footer { margin-top:40px; color:var(--ink-2); font-size:.88rem; border-top:1px solid var(--line); padding-top:16px; }

@media (max-width: 640px) {
  .lesson { grid-template-columns: 44px 1fr; } .lesson .go { grid-column: 2; } .lesson .n { font-size:1.6rem; }
  .two { grid-template-columns: 1fr; }
  .top .crumbs { display:none; }
}