/* ============================================================
   Claude Explainers — scrolling-page system (Notes + Quiz)
   Builds on explainer.css (vars, fonts). Editorial, warm.
   ============================================================ */

html,body{ height:auto; }
body.page{
  overflow:auto;
  cursor:default;
  user-select:text;
}

/* ----------------------------- shell ----------------------------- */
.wrap{
  max-width:940px;
  margin:0 auto;
  padding:clamp(34px,6vh,72px) 28px 120px;
}

/* sticky slim top bar shared by Notes + Quiz */
.bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:14px clamp(18px,4vw,40px);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.bar .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.bar .brand .mark{ width:14px; height:14px; border-radius:4px; background:var(--terra); box-shadow:0 0 0 4px var(--terra-wash); }
.bar .brand .bt{ font-family:'Newsreader',serif; font-size:18px; color:var(--ink); }
.bar .brand .bt em{ font-style:italic; color:var(--terra); }
.bar nav{ display:flex; align-items:center; gap:6px; }
.bar nav a{
  text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.01em;
  color:var(--ink-2); padding:7px 14px; border-radius:999px;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.bar nav a:hover{ background:var(--panel-2); color:var(--ink); }
.bar nav a.here{ background:var(--terra); color:#fff; }

/* ----------------------------- masthead -------------------------- */
.kicker{
  display:flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:26px;
}
.kicker .mk{ width:13px; height:13px; border-radius:4px; background:var(--terra); box-shadow:0 0 0 4px var(--terra-wash); }
h1.title{
  font-family:'Newsreader',serif; font-weight:400;
  font-size:clamp(36px,6vw,62px); line-height:1.02; letter-spacing:-.015em;
  margin:0 0 18px; color:var(--ink);
}
h1.title em{ font-style:italic; color:var(--terra); }
.lede{
  font-size:clamp(16px,2vw,20px); color:var(--ink-2);
  max-width:60ch; line-height:1.55; margin:0;
}

/* ----------------------------- contents -------------------------- */
.toc{
  margin:46px 0 12px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:10px;
}
.toc a{
  display:flex; align-items:baseline; gap:10px;
  text-decoration:none; color:var(--ink-2);
  padding:11px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); font-size:13.5px; font-weight:500; line-height:1.3;
  transition:transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.toc a:hover{ transform:translateY(-2px); border-color:var(--terra-3); color:var(--ink); }
.toc a .n{ font-family:'Spline Sans Mono',monospace; font-size:11.5px; color:var(--terra); font-weight:600; }

/* ----------------------------- concept --------------------------- */
.concept{
  margin-top:clamp(40px,7vh,84px);
  scroll-margin-top:78px;
}
.concept .head{ display:flex; align-items:flex-start; gap:18px; margin-bottom:18px; }
.concept .idx{
  font-family:'Newsreader',serif; font-size:clamp(34px,5vw,48px); line-height:.9;
  color:var(--terra); flex:none; font-variant-numeric:lining-nums;
  min-width:1.4em;
}
.concept h2{
  font-family:'Newsreader',serif; font-weight:500;
  font-size:clamp(24px,3.4vw,34px); line-height:1.08; letter-spacing:-.01em;
  margin:.12em 0 0; color:var(--ink);
}
.concept .body{ font-size:16.5px; line-height:1.62; color:var(--ink-2); max-width:64ch; }
.concept .body + .body{ margin-top:14px; }
.concept .body strong{ color:var(--ink); font-weight:600; }
.concept .body .em{ color:var(--terra); font-weight:600; }
.lead-in{ padding-left:calc(1.4em + 18px); }

/* takeaway pull line */
.pull{
  padding-left:calc(1.4em + 18px); margin-top:20px;
}
.pull .pl{
  display:inline-block; font-family:'Newsreader',serif; font-style:italic;
  font-size:clamp(17px,2.2vw,22px); line-height:1.35; color:var(--ink);
  border-left:2px solid var(--terra); padding:2px 0 2px 16px;
}

/* key/value bullet rows */
.kv{ padding-left:calc(1.4em + 18px); margin-top:18px; display:flex; flex-direction:column; gap:11px; }
.kv .row{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.kv .row .dot{ width:7px; height:7px; border-radius:50%; background:var(--terra-3); margin-top:9px; }
.kv .row .tx{ font-size:15.5px; line-height:1.55; color:var(--ink-2); }
.kv .row .tx b{ color:var(--ink); font-weight:600; }

/* ----------------------------- anim frame ------------------------ */
.scene{
  margin:24px 0 4px; margin-left:calc(1.4em + 18px);
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-s);
  padding:30px;
  overflow:hidden;
}
.scene.full{ margin-left:0; }
.scene .scene-cap{
  display:flex; align-items:center; gap:9px; margin-bottom:22px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600;
}
.scene .scene-cap .lab{ width:6px; height:6px; border-radius:50%; background:var(--terra); }
.scene .replay{
  position:absolute; top:20px; right:20px;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--ink-3);
  background:var(--panel-2); border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; transition:color .2s var(--ease), border-color .2s var(--ease); user-select:none;
}
.scene .replay:hover{ color:var(--terra); border-color:var(--terra-3); }
.scene .replay svg{ width:13px; height:13px; }

/* ----------------------------- footer ---------------------------- */
.pagefoot{
  margin-top:90px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--ink-3);
}
.pagefoot a.cta{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-weight:600; font-size:14px; color:#fff; background:var(--terra);
  border-radius:999px; padding:11px 20px; box-shadow:var(--shadow-s); white-space:nowrap;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pagefoot a.cta:hover{ transform:translateY(-2px); box-shadow:var(--shadow-m); }
.pagefoot a.cta svg{ width:16px; height:16px; }

/* scroll reveal — visible by default; only hidden once JS takes over */
.reveal{ transition:opacity .6s var(--ease), transform .6s var(--ease); }
body.js .reveal{ opacity:0; transform:translateY(16px); }
body.js .reveal.in{ opacity:1; transform:none; }
/* hard lock to visible shortly after reveal — guarantees content shows
   even if a paint freeze ever stalls the tween mid-flight */
body.js .reveal.done{ opacity:1; transform:none; transition:none; }

@media (max-width:620px){
  .lead-in,.pull,.kv,.scene{ margin-left:0; padding-left:0; }
  .scene{ padding:22px 18px; }
  .concept .idx{ font-size:30px; }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}