/* clickntrain restoration — parchment & ink, with the 2002 arrows revived */
:root {
  --parchment: #f7f5f0;
  --paper: #fffdf9;
  --ink: #1a1a2e;
  --ink-soft: #4a4a5e;
  --accent: #8b2500;
  --accent-light: #c45a3c;
  --rule: #d9d4c8;
  --arrow-orange: #f18b05;   /* the original contentarrow colours */
  --arrow-green: #008000;
  --amber-bg: #fdf6e9;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--parchment);
  background-image: radial-gradient(circle at 15% 10%, rgba(241,139,5,.045), transparent 45%),
                    radial-gradient(circle at 90% 90%, rgba(139,37,0,.05), transparent 50%);
  color: var(--ink);
  font: 400 1.02rem/1.72 "Libre Baskerville", Georgia, serif;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-light); }
.mono, .eyebrow { font-family: "JetBrains Mono", monospace; }
.eyebrow {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 .4rem;
}

/* ---- home ---- */
.home { max-width: 46rem; margin: 0 auto; padding: 4.5rem 1.4rem 5rem; }
.site-mark { color: var(--accent); }
.masthead {
  font-size: clamp(1.9rem, 5.4vw, 3.1rem); line-height: 1.16;
  margin: .4rem 0 1.8rem; letter-spacing: -.01em;
}
.plate {
  background: var(--paper); border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  padding: 1rem 1.25rem; margin: 0 0 1.4rem;
  box-shadow: 0 1px 0 rgba(26,26,46,.05);
}
.plate-row {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem;
  padding: .3rem 0; font-size: .86rem;
}
.plate-row + .plate-row { border-top: 1px dotted var(--rule); }
.plate-row span {
  font-family: "JetBrains Mono", monospace; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  padding-top: .25rem;
}
.plate-row strong { font-weight: 400; }
.notice {
  border-left: 3px solid var(--arrow-orange); background: var(--amber-bg);
  padding: .8rem 1.1rem; margin: 0 0 1.8rem; font-size: .92rem;
}
.notice p { margin: 0; }
.lede { font-size: 1.05rem; }
.begin { margin: 2.2rem 0 2.6rem; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.begin-btn {
  display: inline-block; background: var(--accent); color: var(--parchment);
  font-family: "JetBrains Mono", monospace; font-size: .88rem; letter-spacing: .06em;
  padding: .75rem 1.4rem; text-decoration: none;
  box-shadow: 3px 3px 0 rgba(26,26,46,.85);
  transition: transform .12s ease, box-shadow .12s ease;
}
.begin-btn:hover { color: var(--parchment); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(26,26,46,.85); }
.begin-meta { font-size: .8rem; color: var(--ink-soft); font-family: "JetBrains Mono", monospace; }
.toc-head { font-size: 1.15rem; border-bottom: 1px solid var(--rule); padding-bottom: .4rem; }
.toc, .chunk-list { list-style: none; margin: 0; padding: 0; }
.toc li a, .chunk-list li a {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .58rem .2rem; text-decoration: none; color: var(--ink);
  border-bottom: 1px dotted var(--rule);
}
.toc li a:hover, .chunk-list li a:hover { background: var(--paper); color: var(--accent); }
.toc .mono, .chunk-list .mono { color: var(--accent); font-size: .78rem; min-width: 4.2rem; }
.q-count { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: .68rem; color: var(--ink-soft); }
.chunk-list li { position: relative; }
.chunk-list .q-count { position: absolute; right: .2rem; top: .7rem; }
.dl { font-size: .88rem; color: var(--ink-soft); }

/* ---- chunk pages ---- */
.topbar {
  max-width: 46rem; margin: 0 auto; padding: 1.1rem 1.4rem 0;
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: "JetBrains Mono", monospace; font-size: .72rem; letter-spacing: .06em;
}
.topbar a { text-decoration: none; }
.topbar-part { color: var(--ink-soft); text-align: right; }
.chunk { max-width: 46rem; margin: 0 auto; padding: 2.2rem 1.4rem 4rem; }
.unit-chip {
  display: inline-block; color: var(--accent);
  border: 1px solid var(--rule); background: var(--paper);
  padding: .18rem .55rem; font-size: .78rem; letter-spacing: .1em;
}
.chunk h1 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); line-height: 1.25; margin: .7rem 0 1.2rem; }
.chunk p, .chunk li { max-width: 68ch; }
.chunk ul { padding-left: 0; list-style: none; }
.chunk ul li { padding-left: 1.5em; position: relative; margin: .35rem 0; }
.chunk ul li::before {
  content: "\00BB"; position: absolute; left: .2em; top: 0;
  color: var(--arrow-green); font-weight: 700;
  text-shadow: 1px 1px 0 rgba(241,139,5,.55);
}
.chunk blockquote {
  margin: 1.4rem 0; padding: 1rem 1.25rem;
  background: var(--paper); border-left: 3px solid var(--accent);
  font-size: .95rem;
}
.chunk blockquote p:first-child { margin-top: 0; }
.chunk blockquote p:last-child { margin-bottom: 0; }

/* self-test */
.selftest {
  margin: 2.4rem 0 0; border: 1px solid var(--rule); border-top: 3px solid var(--arrow-orange);
  background: var(--paper); padding: 1.1rem 1.25rem;
}
.qa + .qa { border-top: 1px dotted var(--rule); margin-top: 1rem; padding-top: 1rem; }
.q-label {
  font-family: "JetBrains Mono", monospace; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 .3rem;
}
details { margin-top: .6rem; }
summary {
  cursor: pointer; font-family: "JetBrains Mono", monospace; font-size: .78rem;
  letter-spacing: .08em; color: var(--accent);
}
summary:hover { color: var(--accent-light); }
details[open] { background: var(--amber-bg); padding: .6rem .9rem; margin-left: -.9rem; }
details[open] summary { margin-bottom: .4rem; }

/* prev/next */
.chunk-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 3rem 0 0; border-top: 1px solid var(--rule); padding-top: 1.2rem;
}
.chunk-nav a {
  text-decoration: none; max-width: 46%;
  display: flex; flex-direction: column; gap: .15rem;
  transition: transform .12s ease;
}
.chunk-nav a:hover { transform: translateX(0); }
.nav-prev:hover { transform: translateX(-3px); }
.nav-next:hover { transform: translateX(3px); }
.chunk-nav span {
  font-family: "JetBrains Mono", monospace; font-size: .74rem; letter-spacing: .08em;
  color: var(--accent);
}
.chunk-nav em { font-style: normal; font-size: .82rem; color: var(--ink-soft); line-height: 1.4; }
.nav-next { margin-left: auto; text-align: right; align-items: flex-end; }
.nav-gap { flex: 1; }

.colophon {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-size: .78rem; color: var(--ink-soft);
}
@media (max-width: 560px) {
  .plate-row { grid-template-columns: 1fr; gap: .1rem; }
  .chunk-nav { flex-direction: column; }
  .chunk-nav a { max-width: 100%; }
  .nav-next { align-items: flex-start; text-align: left; }
}