/* =========================================================================
   VPNSort · deepdoc.css
   Page-scoped layout for the AI deep guide. Reads tokens from base.css only.
   ========================================================================= */

/* ---------- page head ---------- */

.guide-hero{
  padding-top:var(--space-7);
  padding-bottom:var(--space-4);
}

.guide-title{
  max-width:18ch;
  font-size:clamp(32px,4.4vw,58px);
  line-height:1.08;
  letter-spacing:-.03em;
}

.guide-lede{
  max-width:68ch;
  margin-top:var(--space-4);
}

.guide-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:var(--space-5) 0 0;
  padding:0;
  list-style:none;
}
.guide-meta li{display:flex;min-width:0}

/* ---------- intro panel ---------- */

.guide-intro{
  display:grid;
  gap:var(--space-3);
}
.guide-intro .eyebrow{margin-bottom:0}
.guide-intro-title{
  margin:0;
  font-size:clamp(20px,2vw,25px);
  line-height:1.3;
}
.guide-intro p{
  max-width:74ch;
  margin:0;
  font-size:14.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.guide-intro a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.guide-intro a:hover{text-decoration-thickness:2px}

/* ---------- reading paths ---------- */

.guide-paths{margin-top:var(--space-5)}

.guide-path{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.guide-path:hover{
  transform:translateY(-2px);
  border-color:var(--accent-a45);
  box-shadow:var(--shadow-panel);
}

.guide-path-label{
  display:block;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}

.guide-path-title{
  display:block;
  margin-top:6px;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.01em;
}

.guide-path-text{
  display:block;
  margin-top:6px;
  font-size:13px;
  line-height:1.65;
  color:var(--text-muted);
}

/* ---------- article body ---------- */

.guide-body{
  position:relative;
  padding-top:var(--space-5);
}

.guide-prose{max-width:none}

.guide-prose :is(h2,h3,h4,p,ul,ol,blockquote,.callout){
  max-width:var(--reading-max);
}

.guide-prose .chapter{
  padding-top:var(--space-6);
  border-top:1px solid var(--border-soft);
}
.guide-prose .chapter:first-child{
  border-top:0;
  padding-top:0;
}

.guide-prose .chapter > h2{margin-top:0}

.chapter-kicker{
  margin:0 0 var(--space-2);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}

.guide-prose .table-scroll{
  margin:var(--space-5) 0;
}

.guide-prose .callout{
  margin-top:var(--space-5);
  margin-bottom:var(--space-5);
}

.guide-prose pre{
  max-width:100%;
  margin-top:var(--space-4);
  margin-bottom:var(--space-5);
}

.guide-prose .data-table{
  min-width:640px;
}

.guide-prose ul,
.guide-prose ol{
  margin-bottom:var(--space-5);
}

/* ---------- responsive ---------- */

@media (max-width:768px){
  .guide-hero{padding-top:var(--space-6)}
  .guide-title{max-width:none}
  .guide-intro p{font-size:14px}
  .guide-prose .chapter{padding-top:var(--space-5)}
}

@media (max-width:640px){
  .guide-hero{padding-top:var(--space-5)}
  .guide-meta{gap:6px}
  .guide-path{padding:var(--space-4)}
  .guide-prose .table-scroll{margin-top:var(--space-4);margin-bottom:var(--space-4)}
}