/* ------------------------------------------------------------
   Goodstack sites. One look shared by all seven: cream paper,
   Goodstack red, a Didone display face, monospace labels.
   Tokens match the parent site at goodstack.co. Light theme only.
   ------------------------------------------------------------ */
:root{
  color-scheme: light;
  --paper:#FBF6EA;
  --paper-2:#F4ECDA;
  --ink:#A5271A;
  --ink-2:#7C1B11;
  --text:#4F1C13;
  --text-soft:#7A4A40;
  --rule:rgba(165,39,26,.45);
  --tint:rgba(165,39,26,.09);
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p a,li a,dd a{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
p a:hover,li a:hover,dd a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:var(--paper)}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}

/* Labels, chips, buttons */
.lbl{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;color:var(--ink)}
.lbl.soft{color:var(--text-soft)}
.chip{display:inline-block;padding:8px 10px 7px;background:var(--tint);line-height:1}
.chip.solid{background:var(--ink);color:var(--paper)}
.btn{
  display:inline-block;padding:13px 16px 12px;background:var(--ink);color:var(--paper);border:0;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  transition:background .15s ease,transform .15s ease;
}
.btn:hover{background:var(--ink-2)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.btn.ghost:hover{background:var(--tint)}

/* Frame */
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
.wrap.narrow{max-width:860px}
section{padding-block:clamp(52px,7vw,104px)}
section + section{border-top:1px dotted var(--rule)}
section.flush{padding-top:0;border-top:0}
section.tinted{background:var(--paper-2)}
.display{
  font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 24;
  line-height:1.1;letter-spacing:-.005em;color:var(--ink);text-wrap:balance;
}
.display em{font-style:italic;font-weight:400}
.h-xl{font-size:clamp(34px,4.6vw,62px)}
.h-lg{font-size:clamp(28px,3.4vw,46px)}
.h-md{font-size:clamp(24px,2.4vw,34px)}
.h-sm{font-size:clamp(20px,1.7vw,24px);line-height:1.2}
.body{max-width:64ch}
.body + .body{margin-top:1em}
.lede{margin-top:22px;max-width:60ch;font-size:clamp(18px,1.5vw,21px);line-height:1.55}
.note{margin-top:22px;max-width:64ch;font-size:15px;line-height:1.55;color:var(--text-soft)}
.note.wide{max-width:80ch;margin-top:36px;padding-top:20px;border-top:1px dotted var(--rule)}
.note strong{color:var(--text);font-weight:500}
.section-head{display:grid;gap:20px;margin-bottom:clamp(30px,4vw,52px);justify-items:start}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}

/* Preview bar */
.preview-bar{background:var(--ink);color:var(--paper);text-align:center;padding:9px 12px 8px;font-size:11px}

/* Header */
.top{
  position:sticky;top:0;z-index:20;
  background:rgba(251,246,234,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px dotted var(--rule);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:13px}
.brand{display:grid;gap:5px}
.brand .by{font-size:10px}
.top nav{display:flex;gap:4px}
.top nav a{padding:8px 10px 7px;line-height:1}
.top nav a:hover,.top nav a[aria-current="page"]{background:var(--tint)}
@media (max-width:899px){ .top nav{display:none} }
.top .btn{white-space:nowrap}
@media (max-width:479px){ .brand .by{display:none} .top .btn{padding:11px 12px 10px;font-size:11px;letter-spacing:.06em} }

/* Hero and page head */
.hero{padding-block:clamp(48px,8vw,112px) clamp(48px,7vw,96px)}
.hero .display{margin-top:22px;max-width:18ch}
.page-head{padding-block:clamp(40px,6vw,80px) clamp(28px,4vw,44px)}
.page-head .display{margin-top:22px}

/* Grids and cards */
.grid{display:grid;gap:clamp(20px,2.5vw,36px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:799px){ .grid-2{grid-template-columns:1fr} }
.card{padding-top:20px;border-top:1px solid var(--rule)}
.card h3{margin-bottom:10px}
.card p{font-size:16px;max-width:56ch}

/* Role and system map */
.map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
@media (max-width:899px){ .map{grid-template-columns:1fr} }
.map-col > .lbl{display:block;margin-bottom:6px}
.rows > div{display:grid;grid-template-columns:minmax(120px,32%) minmax(0,1fr);gap:8px 20px;padding-block:16px;border-bottom:1px dotted var(--rule)}
.rows > div:first-child{border-top:1px solid var(--rule)}
.rows dt{font-weight:500;color:var(--ink)}
.rows dd{font-size:16px}
@media (max-width:519px){ .rows > div{grid-template-columns:1fr} }

/* Example steps and process */
.steps,.process{display:grid;gap:clamp(20px,2.5vw,32px);counter-reset:n}
.steps{grid-template-columns:repeat(4,minmax(0,1fr))}
.process{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1099px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:899px){ .process{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:599px){ .steps,.process{grid-template-columns:1fr} }
.steps li,.process li{counter-increment:n;padding-top:18px;border-top:1px solid var(--rule)}
.steps li::before,.process li::before{
  content:counter(n,decimal-leading-zero);display:block;margin-bottom:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink);
}
.steps h3,.process h3{margin-bottom:8px}
.steps p,.process p{font-size:16px}

/* Questions and answers */
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px) clamp(28px,4vw,64px)}
@media (max-width:799px){ .qa{grid-template-columns:1fr} }
.qa > div{padding-top:18px;border-top:1px solid var(--rule)}
.qa dt{margin-bottom:10px}
.qa dd{font-size:16px;max-width:58ch}

/* Checklist */
.checklist{display:grid;gap:0;border-top:1px solid var(--rule)}
.checklist li{position:relative;padding:15px 0 15px 34px;border-bottom:1px dotted var(--rule)}
.checklist li::before{content:"";position:absolute;left:2px;top:19px;width:14px;height:14px;box-shadow:inset 0 0 0 1.5px var(--ink)}

/* People */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(28px,4vw,48px)}
@media (max-width:699px){ .people{grid-template-columns:1fr} }
.person{padding-top:18px;border-top:1px solid var(--rule)}
.person h2,.person h3{margin:12px 0 10px}
.person p{font-size:16px;max-width:54ch}

/* Closing call */
.closing{text-align:left}
.closing .body{margin-top:18px}

/* Long-form prose (guides, trust pages) */
.prose > * + *{margin-top:1.05em}
.prose h2{font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 24;color:var(--ink);font-size:clamp(26px,2.6vw,36px);line-height:1.15;margin-top:1.9em;text-wrap:balance}
.prose h3{font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 24;color:var(--ink);font-size:clamp(21px,1.8vw,25px);line-height:1.2;margin-top:1.6em}
.prose h4{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-top:1.8em}
.prose p,.prose li{max-width:68ch}
.prose ul,.prose ol{padding-left:1.25em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--ink)}
.prose blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:2px solid var(--ink);font-family:var(--display);font-size:clamp(20px,1.8vw,24px);line-height:1.35;color:var(--ink)}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--tint);padding:2px 5px}
.prose pre{background:var(--paper-2);padding:16px;overflow-x:auto}
.prose pre code{background:none;padding:0}
.prose hr{border:0;border-top:1px dotted var(--rule);margin-block:2.2em}
.prose .actions{margin-top:36px}
.table-wrap{overflow-x:auto;margin-block:1.4em}
table{border-collapse:collapse;width:100%;font-size:15.5px}
th{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-align:left;font-weight:500}
th,td{padding:12px 16px 12px 0;border-bottom:1px dotted var(--rule);vertical-align:top}
thead th{border-bottom:1px solid var(--rule)}

/* Contact */
.mail-row{margin-top:30px}
.mail{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:6px;word-break:break-word}
.mail:hover{color:var(--ink-2)}

/* Footer */
footer{border-top:1px solid var(--rule);padding-block:40px 48px;background:var(--paper-2)}
.foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 4px;margin-block:26px}
.foot-links a{padding:8px 10px 7px;line-height:1}
.foot-links a:hover{background:var(--tint)}