/* FILE-MAP:
purpose: MAGNETAR /guide/ — didactic layer over the main design system.
depends_on: [css/main.css (tokens + nav/footer chrome)]
used_by: [guide/index.html]
invariants: [same accent budget; specimen rows must wrap under 880px (ORRERY pass-3 lesson:
  never white-space:nowrap + fixed clamp on specimens)]
END-FILE-MAP */

.guide{ background:var(--ink) }

.g-wrap{
  max-width:52rem;
  margin-inline:auto;
  padding:8rem var(--pad) 4rem;
}

/* ---------- masthead ---------- */
.g-masthead{ margin-bottom:clamp(4rem, 10vh, 7rem) }
.g-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem, 6.4vw, 4.4rem);
  line-height:1.06;
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin-top:1.3rem;
}
.g-lede{
  margin-top:1.8rem;
  max-width:56ch;
  color:var(--body);
  font-size:1.06rem;
}

/* ---------- sections ---------- */
.g-sec{
  margin-block:clamp(4rem, 9vh, 6.5rem);
  padding-top:2.4rem;
  border-top:1px solid var(--line);
}
.g-h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.3rem, 2.6vw, 1.9rem);
  margin-bottom:1.4rem;
  display:flex; align-items:baseline; gap:.9rem;
}
.g-idx{
  font-weight:300;
  font-size:.72em;
  color:var(--muted);
}
.g-h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.05rem;
  margin:2.4rem 0 .9rem;
}
.g-sec p{ color:var(--body); max-width:60ch }
.g-sec p + p{ margin-top:1.1rem }
.g-sec strong{ color:var(--text) }
.g-note{ font-size:.9rem; color:var(--muted); margin-top:1.4rem }

.mono{
  font-family:ui-monospace, 'SF Mono', Menlo, monospace;
  font-size:.88em;
  color:var(--text);
  background:var(--raised);
  padding:.1em .4em;
  border-radius:4px;
}

/* ---------- dials ---------- */
.g-dials{ margin-top:1.8rem; display:grid; gap:1rem }
.g-dials > div{ display:grid; grid-template-columns:7.5rem 1fr; gap:1rem; align-items:center }
.g-dials dt{
  font-size:.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; color:var(--muted);
}
.g-dials dd{ color:var(--body); font-size:.95rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap }
.dial{
  display:inline-block; width:6rem; height:4px; border-radius:2px;
  background:var(--raised); position:relative; overflow:hidden; flex-shrink:0;
}
.dial i{
  position:absolute; inset:0;
  width:calc(var(--v) * 10%);
  background:var(--muted);
  border-radius:2px;
}

/* ---------- swatches ---------- */
.swatches{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr));
  gap:1rem;
  margin-top:1.8rem;
}
.swatches li{
  display:flex; align-items:center; gap:.7rem;
  font-size:.85rem; color:var(--body);
}
.chip{
  width:2.4rem; height:2.4rem; border-radius:8px; flex-shrink:0;
  border:1px solid rgba(139,139,158,.38);
}
.iride-strip{
  margin-top:1.6rem;
  height:4.6rem;
  border-radius:12px;
  background:var(--iride);
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:.7rem 1rem;
}
.iride-strip .mono{
  background:rgba(10,10,18,.72);
  color:var(--text);
  font-size:.72rem;
}

/* ---------- specimen (wraps on mobile — never nowrap + fixed clamp) ---------- */
.specimen{
  margin-top:1.8rem;
  border:1px solid var(--line);
  border-radius:14px;
  padding:clamp(1.2rem, 3vw, 2.2rem);
  display:grid;
  gap:1rem;
}
.sp{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 5vw, 2.8rem);
  line-height:1.15;
  overflow-wrap:anywhere;
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
}
.sp-300{ font-weight:300 }
.sp-500{ font-weight:500 }
.sp-800{ font-weight:800 }
.sp-tag{
  font-family:var(--font-body);
  font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.specimen--body .sp-body{
  font-size:1.05rem; color:var(--body); max-width:56ch;
}

/* ---------- pipeline / plates ---------- */
.pipeline{
  margin:1.6rem 0 0 1.2rem;
  display:grid; gap:.9rem;
  color:var(--body);
  max-width:58ch;
}
.g-plates{
  margin-top:2.2rem;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:.8rem;
  align-items:start;
}
.g-plates img{
  width:100%; height:100%; object-fit:cover;
  border-radius:10px;
  box-shadow:var(--shadow-plate);
}
.g-plates figcaption{
  grid-column:1 / -1;
  font-size:.82rem; color:var(--muted);
  margin-top:.4rem;
}

/* ---------- code ---------- */
.code{
  margin-top:1.4rem;
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.2rem 1.4rem;
  overflow-x:auto;
}
.code code{
  font-family:ui-monospace, 'SF Mono', Menlo, monospace;
  font-size:.8rem;
  line-height:1.7;
  color:var(--body);
  white-space:pre;
}

/* ---------- limits list ---------- */
.g-limits{
  list-style:none;
  display:grid; gap:1.1rem;
  margin-top:1.6rem;
}
.g-limits li{
  color:var(--body);
  padding-left:1.4rem;
  position:relative;
  max-width:60ch;
}
.g-limits li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:.5rem; height:2px;
  background:var(--muted);
}

/* ---------- footer ---------- */
.g-footer{
  margin-top:clamp(4rem, 10vh, 7rem);
  padding-top:2.4rem;
  border-top:1px solid var(--line);
  display:grid; gap:1.4rem;
}
.g-footer .guide-link{ margin:0 }

/* ---------- reveals (progressive) ---------- */
.io-prep{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.io-in{ opacity:1; transform:none }

/* ---------- mobile ---------- */
@media (max-width: 879px){
  .g-wrap{ padding-top:6.5rem }
  .g-plates{ grid-template-columns:1fr 1fr }
  .g-plates img:first-child{ grid-column:1 / -1 }
  .g-dials > div{ grid-template-columns:1fr; gap:.3rem }
}