/* ============================================================
   Reading pages — essays and playground writeups
   ============================================================ */

.page-head{padding:18vh 0 4rem;max-width:44rem}
.page-head .eyebrow{margin-bottom:1.6rem}
.page-head h1{font-size:clamp(2.6rem,6.5vw,4.6rem);margin-bottom:1.5rem}
.page-head .lede{font-size:1.16rem}
.meta{margin-top:2rem;font-size:.78rem;letter-spacing:.02em;color:var(--muted)}
.meta span + span::before{content:"·";margin:0 .6rem;color:var(--rule)}

/* ---------------- index list ---------------- */
.entries{max-width:52rem;border-top:1px solid var(--rule);margin-top:1rem}
.entry{
  display:grid;grid-template-columns:1fr 9rem;gap:2rem;align-items:start;
  padding:2.4rem 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink);
  transition:padding-left .3s cubic-bezier(.3,0,.2,1);
}
.entry:hover{padding-left:.7rem}
.entry:hover h3{color:var(--accent-text)}
.entry h3{transition:color .25s ease}
.entry p{margin:0;color:var(--ink-soft);font-size:.98rem;max-width:34rem}
.entry .tag{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);text-align:right;padding-top:.55rem}

/* ---------------- article body ---------------- */
article{max-width:38rem;padding-bottom:4rem}
article p{margin:0 0 1.5rem;font-size:1.09rem;line-height:1.78;color:var(--ink-soft)}
article p:first-of-type{font-size:1.2rem;color:var(--ink)}
article h2{font-size:1.9rem;margin:3.5rem 0 1.2rem}
article em{font-style:italic}
article blockquote{
  margin:2.5rem 0;padding-left:1.6rem;border-left:1.5px solid var(--accent);
  font-family:var(--serif);font-size:1.45rem;line-height:1.4;color:var(--ink);font-style:italic;
}
article hr{border:0;border-top:1px solid var(--rule);margin:3.5rem 0}

.backlink{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;
  font-size:.8rem;letter-spacing:.02em;color:var(--muted);text-decoration:none;
}
.backlink:hover{color:var(--accent-text)}

.note{
  margin-top:4rem;padding:1.6rem 1.8rem;border:1px solid var(--rule);border-radius:24px;
  background:var(--cream-2);font-size:.9rem;line-height:1.7;color:var(--ink-soft);
}
.note b{font-weight:500;color:var(--ink)}

/* ---------------- playground grid ---------------- */
.toys{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1.2rem;max-width:60rem;margin-top:1rem}
.toy{
  display:block;text-decoration:none;color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r);padding:1.5rem;
  background:var(--cream);
  transition:border-color .3s ease,transform .3s cubic-bezier(.3,0,.2,1);
}
.toy:hover{border-color:var(--muted);transform:translateY(-3px)}
.toy .frame{
  border-radius:26px;overflow:hidden;background:var(--cream-2);
  aspect-ratio:16/10;display:block;margin-bottom:1.3rem;
}
.toy .frame svg{width:100%;height:100%;display:block}
.toy h3{margin-bottom:.35rem;font-size:1.45rem}
.toy p{margin:0;font-size:.92rem;color:var(--ink-soft)}
.toy .tag{display:inline-block;margin-top:.9rem;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

/* live toy canvas */
.stage{
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  background:var(--cream-2);margin:2.5rem 0;position:relative;
}
.stage svg{width:100%;height:min(70vh,560px);display:block}
.controls{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  padding:1rem 1.2rem;border-top:1px solid var(--rule);background:var(--cream);
}
.controls button{
  font-family:var(--sans);font-size:.82rem;cursor:pointer;
  background:transparent;border:1px solid var(--rule);border-radius:999px;
  padding:.45rem 1.1rem;color:var(--ink);transition:background .2s,border-color .2s;
}
.controls button:hover{background:var(--cream-2);border-color:var(--muted)}
.controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.controls .spacer{flex:1}
.controls label{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:.55rem}
.controls input[type=range]{accent-color:var(--accent);width:8rem}

@media (max-width:820px){
  .page-head{padding:15vh 0 2.5rem}
  .entry{grid-template-columns:1fr;gap:.6rem}
  .entry .tag{text-align:left;padding-top:0}
  article p{font-size:1.04rem}
}

/* ---------------- inline generative figure ---------------- */
/* generative figures bleed past the 38rem text measure — the SVG letterboxes to its
   height, so a narrow box shrinks all the type inside it */
.figure-wrap{
  margin:3rem 0;
  width:min(58rem, calc(100vw - 3.5rem));
  max-width:none;
}
.figure{
  border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;background:var(--cream-2);
}
.figure svg{width:100%;height:min(64vh,520px);display:block}
.figure .bar{
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
  padding:.9rem 1.2rem;border-top:1px solid var(--rule);background:var(--cream);
}
.figure button{
  font-family:var(--sans);font-size:.8rem;cursor:pointer;
  background:transparent;border:1px solid var(--rule);border-radius:999px;
  padding:.42rem 1.05rem;color:var(--ink);transition:background .2s,border-color .2s,color .2s;
}
.figure button:hover{background:var(--cream-2);border-color:var(--muted)}
.figure button.danger{border-color:var(--accent-soft);color:var(--accent-text)}
.figure button.danger:hover{background:var(--accent-wash);border-color:var(--accent)}
.figure button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.figure .gap{flex:1}
.figure .stat{font-size:.76rem;color:var(--muted);letter-spacing:.01em}
.figure .stat b{
  font-family:var(--serif);font-size:1.1rem;color:var(--ink);font-weight:400;
  font-variant-numeric:tabular-nums;
}
.figure .stat.lost b{color:var(--accent-text)}
figcaption{
  margin:.9rem 0 0;max-width:34rem;font-size:.83rem;line-height:1.6;color:var(--muted);max-width:34rem;
}
@media (max-width:820px){
  .figure-wrap{width:100%}
  .figure svg{height:46vh}
}

/* ---------------- three voices (hiking) ---------------- */
.voice{font-family:var(--sans);font-size:15.5px;opacity:0}
.v-obs{fill:var(--muted)}
.v-enc{fill:#2E6B57}
.v-dbt{fill:var(--accent-text)}
.trail{fill:none;stroke:var(--rule);stroke-width:1.6}
.climbed{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.marker{fill:var(--accent)}
.landmark{fill:var(--cream-2);stroke:var(--muted-line);stroke-width:1.2}
.landmark-label{font-family:var(--sans);font-size:12.5px;fill:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.summit-line{font-family:var(--serif);font-size:27px;fill:var(--ink);opacity:0}

/* ---------------- the pause (music) ---------------- */
.bars rect{fill:var(--muted-line)}
.bars.loud rect{fill:var(--accent)}
.figure .verdict{
  font-family:var(--serif);font-size:1.25rem;line-height:1.4;color:var(--ink);
  padding:1.1rem 1.4rem;border-top:1px solid var(--rule);background:var(--cream);
  margin:0;
}
.figure .verdict.hidden{display:none}
.figure .hint-sm{font-size:.74rem;color:var(--muted);letter-spacing:.02em}