/* ============================================================
   VPS Field Guide — shared design system
   Editorial-technical: warm paper, ink, one confident accent.
   ============================================================ */
:root{
  /* palette (oklch) */
  --paper:      oklch(98.6% 0.006 95);
  --paper-2:    oklch(96.8% 0.008 95);
  --card:       oklch(100% 0 0);
  --ink:        oklch(23% 0.02 265);
  --ink-2:      oklch(38% 0.02 265);
  --ink-soft:   oklch(52% 0.015 265);
  --line:       oklch(90% 0.008 265);
  --line-2:     oklch(84% 0.01 265);

  --accent:     oklch(52% 0.16 264);   /* indigo */
  --accent-ink: oklch(42% 0.17 266);
  --accent-bg:  oklch(95% 0.03 264);
  --exit:       oklch(56% 0.12 168);   /* teal = residential/exit/go (borders/fills) */
  --exit-ink:   oklch(45% 0.11 168);   /* darker teal for TEXT (WCAG AA) */
  --exit-bg:    oklch(95% 0.04 168);
  --warn:       oklch(58% 0.16 40);    /* rust = warning/don't (borders/fills) */
  --warn-ink:   oklch(47% 0.16 38);    /* darker rust for TEXT (WCAG AA) */
  --warn-bg:    oklch(95% 0.04 45);

  --r-lg:20px; --r-md:13px; --r-sm:8px;
  --shadow-sm:0 1px 2px oklch(23% 0.02 265 / .05), 0 2px 8px oklch(23% 0.02 265 / .05);
  --shadow-md:0 4px 14px oklch(23% 0.02 265 / .08), 0 14px 40px oklch(23% 0.02 265 / .07);

  --serif:'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  --measure:70ch;
  --gutter:clamp(1.1rem, 4vw, 3rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:var(--sans); font-size:clamp(1rem, .96rem + .2vw, 1.08rem); line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; display:block}
a{color:var(--accent-ink); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* grain/atmosphere */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:radial-gradient(120% 80% at 78% -10%, var(--accent-bg) 0%, transparent 42%),
             radial-gradient(90% 60% at 5% 0%, var(--exit-bg) 0%, transparent 40%);
}
.wrap{max-width:1180px; margin:0 auto; padding-inline:var(--gutter); position:relative; z-index:1}
.narrow{max-width:820px}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:560; letter-spacing:-.015em; line-height:1.08; color:var(--ink)}
h1{font-size:clamp(2.6rem, 1.4rem + 5vw, 5rem); font-weight:600}
h2{font-size:clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem); margin:0 0 .5em}
h3{font-size:clamp(1.2rem, 1rem + .8vw, 1.55rem); margin:2.2em 0 .4em; letter-spacing:-.01em}
.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-ink); font-weight:600; margin:0 0 1rem}
.lede{font-size:clamp(1.15rem, 1rem + .7vw, 1.4rem); line-height:1.5; color:var(--ink-2); font-family:var(--serif); font-weight:380}
.prose{max-width:var(--measure)}
.prose p, .prose ul, .prose ol{margin:0 0 1.15em}
.prose li{margin:.35em 0}
.prose strong{font-weight:650; color:var(--ink)}
.prose code{font-family:var(--mono); font-size:.86em; background:var(--paper-2); border:1px solid var(--line);
  padding:.1em .4em; border-radius:5px}

/* ---------- top nav ---------- */
.nav{position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:oklch(98.6% 0.006 95 / .82); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:4rem; gap:1rem}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-weight:600; font-size:1.15rem;
  letter-spacing:-.02em; color:var(--ink); text-decoration:none}
.brand .mk{width:26px; height:26px; flex:none}
.nav-links{display:flex; align-items:center; gap:.3rem; font-size:.92rem}
.nav-links a{color:var(--ink-2); text-decoration:none; padding:.45rem .7rem; border-radius:999px; white-space:nowrap}
.nav-links a:hover{color:var(--ink); background:var(--paper-2)}
.nav-links a.cta{background:var(--ink); color:var(--paper)}
.nav-links a.cta:hover{background:var(--accent-ink); color:#fff}
@media(max-width:640px){
  .nav-links a.cta{display:none}
  .nav .wrap{gap:.5rem}
  .nav-links{gap:0; flex:none}
  .nav-links a{padding:.3rem .38rem; font-size:.8rem; white-space:nowrap}
  .brand{font-size:.92rem; white-space:nowrap}
}
/* phones: logo-only brand so all three section links fit the header */
@media(max-width:480px){ .brand{font-size:0} .brand .mk{width:26px; height:26px} .nav-links a{padding:.4rem .45rem} }
@media(max-width:360px){ .nav-links a{font-size:.72rem; padding:.35rem .3rem} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem;
  text-decoration:none; padding:.7rem 1.15rem; border-radius:999px; transition:transform .15s, box-shadow .15s, background .15s}
.btn-primary{background:var(--ink); color:var(--paper); box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-ink); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn-ghost{border:1px solid var(--line-2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink); background:var(--card)}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}
@media(max-width:640px){ .brand .g{display:none} }

/* ---------- hero ---------- */
.hero{padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,4vw,3.5rem); position:relative; overflow:hidden}
.hero .wrap{position:relative; z-index:2}
/* decorative network-of-nodes background */
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.hero-bg svg{position:absolute; top:-6%; right:-4%; width:min(940px,66%); height:auto}
.hero-bg .edge{stroke:var(--accent); stroke-width:1.1; fill:none; opacity:.2}
.hero-bg .node{fill:var(--paper); stroke:var(--accent); stroke-width:1.5; opacity:.42}
.hero-bg .node.a{fill:var(--accent); stroke:none; opacity:.9}
.hero-bg .node.e{fill:var(--exit); stroke:none; opacity:.9}
.hero-bg .halo{fill:none; stroke-width:1.4}
.hero-bg .halo.a{stroke:var(--accent)} .hero-bg .halo.e{stroke:var(--exit)}
.hero-bg .pulse{transform-box:fill-box; transform-origin:center; opacity:.55; animation:nodepulse 3.6s ease-in-out infinite}
.hero-bg .pulse.d2{animation-delay:1.2s} .hero-bg .pulse.d3{animation-delay:2.4s}
@keyframes nodepulse{0%,100%{opacity:.3; transform:scale(1)} 50%{opacity:.9; transform:scale(1.55)}}
/* soft radial glow behind the mesh + gentle fade behind the headline (left) only */
.hero-bg::before{content:""; position:absolute; top:-12%; right:-6%; width:56%; height:80%;
  background:radial-gradient(closest-side, var(--accent-bg), transparent 72%); opacity:.7}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(92deg, var(--paper) 15%, transparent 48%)}

/* ---------- social ---------- */
.social{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem}
.social a{display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .8rem; border:1px solid var(--line-2);
  border-radius:999px; color:var(--ink-2); text-decoration:none; font-size:.85rem; font-weight:600; transition:.15s}
.social a:hover{border-color:var(--ink); color:var(--ink); background:var(--card); transform:translateY(-1px)}
.social svg{width:16px; height:16px; fill:currentColor}
.hero h1{margin:.2em 0 .4em; max-width:16ch}
.hero .lede{max-width:56ch; margin:0 0 1.8rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}
.hero-figure{margin-top:clamp(2.5rem,5vw,4rem); overflow-x:auto}

/* ---------- stat strip ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin:2.5rem 0}
.stats .s{background:var(--card); padding:1.15rem 1.2rem}
.stats .v{font-family:var(--serif); font-size:clamp(1.6rem,1.2rem+1.4vw,2.2rem); font-weight:600; line-height:1; letter-spacing:-.02em}
.stats .k{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:.5rem}
@media(max-width:680px){ .stats{grid-template-columns:1fr 1fr} }

/* ---------- track cards ---------- */
.tracks{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; margin:1.5rem 0}
@media(max-width:760px){ .tracks{grid-template-columns:1fr} }
.track{position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.7rem 1.7rem 1.5rem; text-decoration:none; color:inherit;
  box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s, border-color .18s; overflow:hidden}
.track:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-2)}
.track .num{font-family:var(--mono); font-size:.72rem; letter-spacing:.15em; color:var(--accent-ink)}
.track h3{font-size:1.5rem; margin:.6rem 0 .5rem}
.track p{color:var(--ink-2); margin:0 0 1.2rem; font-size:.98rem; line-height:1.55}
.track .go{margin-top:auto; font-weight:600; color:var(--accent-ink); font-size:.92rem; display:inline-flex; gap:.4rem; align-items:center}
.track .edge{position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent)}
.track.exit .edge{background:var(--exit)}
.track.exit .num,.track.exit .go{color:var(--exit-ink)}

/* ---------- section scaffolding ---------- */
.section{padding:clamp(2.5rem,5vw,4.5rem) 0}
.section + .section{border-top:1px solid var(--line)}
.kicker{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink); font-weight:600}

/* ---------- callouts ---------- */
.callout{border-radius:var(--r-md); padding:1.05rem 1.2rem; margin:1.6rem 0; border:1px solid var(--line-2);
  background:var(--card); font-size:.97rem; line-height:1.55}
.callout .ct{font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.35rem; display:flex; gap:.5rem; align-items:center}
.callout.do{background:var(--exit-bg); border-color:oklch(84% 0.06 168)} .callout.do .ct{color:var(--exit-ink)}
.callout.dont{background:var(--warn-bg); border-color:oklch(85% 0.07 45)} .callout.dont .ct{color:var(--warn-ink)}
.callout.tip{background:var(--accent-bg); border-color:oklch(86% 0.05 264)} .callout.tip .ct{color:var(--accent-ink)}

/* ---------- code block ---------- */
pre{background:oklch(24% 0.02 265); color:oklch(93% 0.01 265); border-radius:var(--r-md); padding:1rem 1.15rem;
  overflow-x:auto; font-family:var(--mono); font-size:.83rem; line-height:1.6; margin:1.4rem 0; box-shadow:var(--shadow-sm)}
pre .c{color:oklch(62% 0.03 265)}  /* comment */
pre .k{color:oklch(78% 0.12 264)}  /* keyword/accent */

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line); margin-top:2rem; padding:2.5rem 0; color:var(--ink-soft); font-size:.88rem}
.footer .wrap{display:flex; flex-wrap:wrap; gap:1.2rem 2rem; justify-content:space-between; align-items:baseline}
.footer a{color:var(--ink-2); text-decoration:none} .footer a:hover{color:var(--accent-ink)}
.footer .disc{max-width:48ch; line-height:1.5}

/* ---------- guide layout (TOC + body) ---------- */
.guide-hero{padding:clamp(2.5rem,5vw,4rem) 0 0}
.guide-hero .lede{max-width:60ch; margin-top:.6rem}
.guide{display:grid; grid-template-columns:210px minmax(0,1fr); gap:clamp(2rem,4vw,4.5rem); align-items:start; padding:clamp(2rem,4vw,3.5rem) 0 1rem}
.toc{position:sticky; top:5rem; font-size:.85rem}
.toc .tt{font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.7rem}
.toc a{display:block; color:var(--ink-2); text-decoration:none; padding:.32rem 0 .32rem .8rem; border-left:2px solid var(--line); line-height:1.3}
.toc a:hover{color:var(--accent-ink); border-color:var(--accent)}
.gbody{min-width:0; max-width:74ch}
.gbody section{padding:0 0 2.6rem}
.gbody section + section{border-top:1px solid var(--line); padding-top:2.6rem}
.gbody h2{scroll-margin-top:5rem; margin:0 0 .5em; font-size:clamp(1.55rem,1.2rem+1.4vw,2.1rem)}
.gbody h2 .n{font-family:var(--mono); font-size:.9rem; color:var(--accent-ink); font-weight:400; margin-right:.6rem; vertical-align:middle}
/* mini comparison table */
.mtable{width:100%; border-collapse:collapse; font-size:.9rem; margin:1.4rem 0}
.mtable th,.mtable td{text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line); vertical-align:top}
.mtable thead th{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--line-2)}
.mtable td:first-child{font-weight:600}
.mtable .mono{font-family:var(--mono); font-size:.85em; color:var(--ink-2)}
/* diagrams / figures */
.fig{margin:1.7rem 0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:1.4rem 1.1rem 1rem; overflow-x:auto}
.fig svg{display:block; margin:0 auto; height:auto; min-width:0}
.fig figcaption{margin:1rem auto 0; max-width:62ch; text-align:center; color:var(--ink-soft); font-size:.82rem; line-height:1.5}
.dg-box{fill:var(--card); stroke:var(--line-2); stroke-width:1.4}
.dg-box.a{fill:var(--accent-bg); stroke:var(--accent)}
.dg-box.e{fill:var(--exit-bg); stroke:var(--exit)}
.dg-box.dash{fill:var(--card); stroke:var(--exit); stroke-dasharray:5 4}
.dg-t{font-family:var(--sans); font-weight:650; fill:var(--ink)}
.dg-s{font-family:var(--sans); fill:var(--ink-soft)}
.dg-m{font-family:var(--mono); fill:var(--accent-ink)}
.dg-me{font-family:var(--mono); fill:var(--exit-ink)}
.dg-arw{stroke:var(--ink-soft); stroke-width:1.6; fill:none}
.dg-lbl{font-family:var(--mono); font-size:10px; letter-spacing:.04em; fill:var(--ink-soft); text-transform:uppercase}

/* checklist */
.check{list-style:none; padding:0; margin:1.4rem 0}
.check li{position:relative; padding:.5rem 0 .5rem 2rem; border-bottom:1px solid var(--line)}
.check li::before{content:"✓"; position:absolute; left:.2rem; top:.5rem; color:var(--exit); font-weight:700}
.next-cards{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem}
@media(max-width:760px){ .next-cards{grid-template-columns:1fr} }
@media(max-width:860px){ .guide{grid-template-columns:1fr} .toc{display:none} }

@media(prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} html{scroll-behavior:auto} }