/* James RGS 7+ Hub — shared styles */
:root{
  --ink:#1c1d20; --soft:#54575e; --faint:#9b9890; --line:#e6e4df; --bg:#faf9f6;
  --card:#ffffff; --accent:#1d4e6f; --accent-soft:#eaf1f5; --gold:#9a7a2e; --gold-soft:#f8f3e7;
  --good:#2f6b46; --good-bg:#eaf3ec; --warn:#8a5a1f; --warn-bg:#f6efe3; --play:#5a3d7a; --play-bg:#efeaf5;
  --radius:11px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:900px; margin:0 auto; padding:0 26px}

/* Top bar / breadcrumb */
.topbar{border-bottom:1px solid var(--line); background:#fff}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 26px}
.topbar .home{font-weight:700; font-size:14.5px; color:var(--ink)}
.topbar .home span{color:var(--accent)}
.topbar nav a{font-size:13px; color:var(--soft); margin-left:14px}
.crumb{font-size:12.5px; color:var(--faint); padding:14px 0 0}
.crumb a{color:var(--soft)}

/* Hero */
header.hero{padding:34px 0 6px}
.eyebrow{font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--gold); font-weight:700}
h1{font-size:32px; line-height:1.15; margin:8px 0 6px; letter-spacing:-.4px}
.lede{font-size:17px; color:var(--soft); margin:0 0 14px}
.meta{display:flex; flex-wrap:wrap; gap:9px; margin:14px 0}
.pill{background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 13px; font-size:12.5px}
.pill b{color:var(--accent)}

h2{font-size:22px; margin:30px 0 12px; letter-spacing:-.2px}
h3{font-size:16px; margin:20px 0 6px}
p{margin:10px 0}
ul,ol{margin:10px 0; padding-left:22px}
li{margin:5px 0}
code{background:#f0eee9; padding:1px 6px; border-radius:5px; font-size:13.5px; font-family:ui-monospace,Menlo,monospace}
hr{border:0; border-top:1px solid var(--line); margin:28px 0}

/* Cards & grids */
.grid{display:grid; gap:14px}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.c3{grid-template-columns:1fr 1fr 1fr}
.card{display:block; border:1px solid var(--line); background:var(--card); border-radius:var(--radius); padding:16px 18px; color:inherit}
a.card:hover{border-color:var(--accent); text-decoration:none; box-shadow:0 2px 10px rgba(29,78,111,.06)}
.card .k{font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--gold); font-weight:700}
.card h3{margin:4px 0 4px}
.card p{margin:0; font-size:14px; color:var(--soft)}
.card.dim{opacity:.55}
.card .soon{font-size:11.5px; color:var(--faint); font-weight:600}

/* Callouts */
.callout{border:1px solid var(--line); background:var(--card); border-radius:var(--radius); padding:15px 18px; margin:16px 0}
.callout .k{font-weight:700; display:block; margin-bottom:3px}
.callout.accent{border-left:4px solid var(--accent); background:var(--accent-soft)}
.callout.gold{border-left:4px solid var(--gold); background:var(--gold-soft)}
.callout.warn{border-left:4px solid var(--warn); background:var(--warn-bg)}
.callout.play{border-left:4px solid var(--play); background:var(--play-bg)}

/* Lesson card sections */
.lesson section{border-top:1px solid var(--line); padding-top:20px; margin-top:22px; scroll-margin-top:18px}
.lesson section:first-of-type{border-top:0}
.seclabel{display:inline-flex; align-items:center; gap:8px; font-size:12px; text-transform:uppercase; letter-spacing:.7px; font-weight:700; color:var(--accent)}
.seclabel .dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}
.kidwords{font-size:17px; background:var(--gold-soft); border-radius:var(--radius); padding:14px 18px}
.example{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px}
.exercise{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; margin:10px 0}
.exercise .lvl{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 9px; border-radius:999px}
.lvl.warm{background:var(--good-bg); color:var(--good)}
.lvl.core{background:var(--accent-soft); color:var(--accent)}
.lvl.stretch{background:var(--gold-soft); color:var(--gold)}
details.answers{margin-top:8px; border:1px dashed var(--line); border-radius:8px; padding:8px 12px; background:#fbfaf7}
details.answers summary{cursor:pointer; font-weight:600; font-size:13.5px; color:var(--soft)}
.lognote{font-size:14px}

/* Tables */
table{border-collapse:collapse; width:100%; margin:14px 0; font-size:14.5px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
th,td{text-align:left; padding:9px 13px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:#f3f1ec; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--soft)}
tr:last-child td{border-bottom:0}

/* Status markers (skills map) */
.st{font-weight:700} .st.ns{color:var(--faint)} .st.intro{color:var(--gold)} .st.prac{color:var(--accent)} .st.sec{color:var(--good)}

/* Tags */
.tag{display:inline-block; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px}
.tag.good{background:var(--good-bg); color:var(--good)}
.tag.warn{background:var(--warn-bg); color:var(--warn)}
.tag.play{background:var(--play-bg); color:var(--play)}

footer{margin:48px 0 80px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--soft)}

@media (max-width:720px){
  .grid.c2,.grid.c3{grid-template-columns:1fr}
  h1{font-size:27px}
}
@media print{
  .topbar nav, .crumb{display:none}
  body{background:#fff}
  a{color:var(--ink)}
}