/* Guide page — article layout, extends css/style.css */

/* the guide page has no hero to scroll past, so its nav is always docked —
   a dedicated class rather than reusing .is-scrolled, since main.js's
   scroll listener would otherwise strip that class the instant it runs
   (scrollY is 0 on load), flashing the header transparent */
.nav-guide{
  background:rgba(10,7,5,0.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}

.guide-footer-bottom{ border-top:none; padding-top:0; }

.guide{ padding-top:150px; padding-bottom:100px; }
.guide-wrap{ max-width:840px; }

.guide-hero{ margin-bottom:70px; }
.guide-hero h1{
  font-size:clamp(38px,6vw,64px);
  text-transform:uppercase;
  margin-top:14px;
}
.guide-lede{
  margin-top:22px;
  color:var(--muted);
  font-size:18px;
  max-width:60ch;
  line-height:1.65;
}

.guide-body{ display:flex; flex-direction:column; gap:64px; }

.g-block{ position:relative; padding-left:64px; }
.g-num{
  position:absolute;
  left:0; top:-4px;
  font-family:var(--f-display);
  font-size:14px;
  color:var(--ember);
  border:1px solid var(--line-strong);
  border-radius:50%;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
}
.g-block h2{
  font-size:clamp(24px,3vw,32px);
  text-transform:uppercase;
  margin-bottom:18px;
}
.g-block p{
  color:var(--off-white-dim);
  font-size:16px;
  line-height:1.75;
  max-width:68ch;
  margin-bottom:14px;
}
.g-block p strong{ color:var(--amber-soft); font-weight:700; }
.g-block code{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  background:var(--charcoal-3);
  border:1px solid var(--line);
  padding:2px 7px;
  border-radius:4px;
  font-size:0.88em;
  color:var(--amber-soft);
}
.g-block ol{
  color:var(--off-white-dim);
  font-size:16px;
  line-height:1.75;
  padding-left:22px;
  max-width:68ch;
}
.g-block ol li{ margin-bottom:10px; padding-left:6px; }
.g-block ol li code{ font-size:0.85em; }

.swatch-row{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
  gap:12px;
  margin-bottom:22px;
}
.swatch{
  aspect-ratio:1;
  border-radius:8px;
  border:1px solid var(--line-strong);
  display:flex;
  align-items:flex-end;
  padding:12px;
}
.swatch span{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--off-white);
  line-height:1.4;
  text-transform:uppercase;
}

.prompt-card{
  background:var(--charcoal-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:22px 24px;
  margin-bottom:16px;
}
.prompt-card h3{
  font-family:var(--f-body);
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--off-white);
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.prompt-card h3 span{
  font-size:11px;
  font-weight:700;
  color:var(--amber);
  border:1px solid var(--line-strong);
  padding:3px 9px;
  border-radius:999px;
  letter-spacing:0.06em;
}
.prompt-card p{
  color:var(--muted);
  font-size:14.5px;
  font-style:italic;
  line-height:1.65;
  margin-bottom:0;
  max-width:none;
}

.guide-back{ margin-top:20px; }

@media (max-width:600px){
  .guide{ padding-top:120px; }
  .g-block{ padding-left:0; padding-top:56px; }
  .g-num{ top:0; left:0; }
}

/* the back link stays visible at every width on this page (see index.html comment),
   so on narrow screens both it and the wordmark need to shrink to fit the same row
   the main site normally splits across a hamburger panel instead */
@media (max-width:480px){
  .nav-guide .nav-logo{ font-size:12.5px; gap:6px; }
  .nav-guide .nav-cta{ padding:9px 14px; font-size:11px; gap:6px; }
}