/* ============================================================================
   CYSTEMS — Concept 1 "The Atelier" · /guide prose layer
   Builds on styles.css. Reading-first, same brand language, calmer.
   ========================================================================== */
.guide-hero { padding-top: clamp(8rem, 14vh, 12rem); padding-bottom: clamp(3rem,6vw,5rem); }
.guide-hero h1 { font-size: var(--step-4); max-width: 18ch; margin-top: 1.4rem; }
.guide-hero .lede { margin-top: 1.8rem; }

.guide-body { max-width: 74ch; margin-inline: auto; }
.guide-toc {
  border: 1px solid var(--linea); border-radius: var(--radius);
  padding: clamp(1.4rem,3vw,2rem); margin-bottom: clamp(3rem,6vw,5rem);
  columns: 2; column-gap: 2.4rem;
}
.guide-toc h5 { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1rem; column-span: all; }
.guide-toc a { display: block; padding: .38rem 0; color: var(--ink-soft); font-size: var(--step--1); border-bottom: 1px solid transparent; transition: color .3s; }
.guide-toc a:hover { color: var(--accent); }
.guide-toc a .n { font-family: var(--mono); color: var(--accent); margin-right: .8em; }
@media (max-width: 640px) { .guide-toc { columns: 1; } }

.guide-section { padding-block: clamp(2.6rem,5vw,4rem); border-top: 1px solid var(--linea); }
.guide-section:first-of-type { border-top: none; }
.guide-section > .g-no { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.guide-section h2 { font-size: var(--step-3); margin: 1rem 0 1.4rem; }
.guide-section h3 { font-size: var(--step-1); margin: 2rem 0 .8rem; font-family: var(--serif); }
.guide-section p { margin-bottom: 1.1rem; color: var(--ink-soft); }
.guide-section p strong { color: var(--ink); font-weight: 500; }
.guide-section ul.g-list { margin: 0 0 1.4rem; }
.guide-section ul.g-list li { position: relative; padding: .5rem 0 .5rem 1.6rem; border-bottom: 1px solid var(--linea); color: var(--ink-soft); }
.guide-section ul.g-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.guide-section ul.g-list li b { color: var(--ink); font-weight: 500; }

.g-callout {
  background: var(--hueso-2); border-left: 2px solid var(--oro);
  padding: 1.4rem 1.6rem; margin: 1.8rem 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.g-callout p { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--step-1); color: var(--ink); }

.g-code {
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.7;
  background: var(--hierro); color: var(--dark-soft); padding: 1.4rem 1.6rem;
  border-radius: var(--radius); overflow-x: auto; margin: 1.4rem 0; white-space: pre;
}
.g-code .k { color: var(--oro-lit); }
.g-code .c { color: var(--dark-faint); }

.pass-grid { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radius); overflow: hidden; margin: 1.6rem 0; }
.pass { background: var(--hueso); padding: clamp(1.4rem,3vw,2rem); }
.pass .p-tag { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pass h3 { margin: .6rem 0 .8rem; font-size: var(--step-1); }
.pass ul { margin-top: .8rem; }
.pass ul li { padding: .35rem 0 .35rem 1.4rem; position: relative; font-size: var(--step--1); color: var(--ink-soft); }
.pass ul li::before { content: "→"; position: absolute; left: 0; color: var(--oro); }

.g-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin: 1.4rem 0; }
.g-swatch { background: var(--hueso); padding: 1rem; }
.g-swatch .chip { width: 100%; height: 44px; border-radius: var(--radius); border: 1px solid var(--linea); margin-bottom: .6rem; }
.g-swatch .name { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink); }
.g-swatch .hex { font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); }

.guide-section p code, .guide-section li code, .g-callout code {
  font-family: var(--mono); font-size: .86em; background: var(--hueso-2);
  border: 1px solid var(--linea); border-radius: 3px; padding: .08em .4em; color: var(--arcilla);
}
.g-callout code { background: rgba(255,255,255,.5); }

.guide-foot { padding-block: clamp(3rem,6vw,5rem); text-align: center; border-top: 1px solid var(--linea); }
.guide-foot .btn { margin-top: 1.6rem; }
.guide-foot > .wrap > div { margin-top: 1.6rem; }