:root{
  --paper:#FFFFFF;
  --ink:#1A1A1A;
  --ink-soft:#4A4742;
  --tan:#A29585;        /* gregorjeffrey.com accent */
  --ochre:#C68B2C;      /* cognitivedynamics.com accent */
  --rule:#E5E1DA;
  --rule-strong:#CFC9C0;
  --stone:#F7F5F2;
  /* four-mode spectrum tones */
  --an:#55565A;  /* Analytical — graphite */
  --lo:#8B8475;  /* Logistical — warm grey */
  --co:#C68B2C;  /* Conceptual — ochre */
  --re:#A29585;  /* Relational — tan */
  --measure:62ch;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition:none!important;} }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}

/* ---------- signature: the spectrum strip ---------- */
.spectrum{display:flex;height:3px;width:100%;}
.spectrum span{flex:1;}
.spectrum .an{background:var(--an);}
.spectrum .lo{background:var(--lo);}
.spectrum .co{background:var(--co);}
.spectrum .re{background:var(--re);}

.spectrum-glyph{display:inline-flex;height:8px;width:44px;flex:none;}
.spectrum-glyph span{flex:1;}
.spectrum-glyph .an{background:var(--an);}
.spectrum-glyph .lo{background:var(--lo);}
.spectrum-glyph .co{background:var(--co);}
.spectrum-glyph .re{background:var(--re);}

/* ---------- layout shell ---------- */
.shell{max-width:1180px;margin:0 auto;padding:0 48px;}
@media (max-width:720px){ .shell{padding:0 24px;} }

/* ---------- masthead ---------- */
header.masthead{border-bottom:1px solid var(--rule);}
.masthead-inner{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-top:26px;padding-bottom:22px;gap:24px;flex-wrap:wrap;
}
.wordmark{
  font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.wordmark sup{font-weight:400;font-size:9px;color:var(--ink-soft);}
nav.primary{display:flex;gap:32px;}
nav.primary a{
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s;
}
nav.primary a:hover, nav.primary a[aria-current="page"]{color:var(--ink);border-color:var(--tan);}

/* ---------- hero (home) ---------- */
.hero{padding:96px 0 84px;}
.hero h1{
  font-size:clamp(38px,5.4vw,64px);
  font-weight:300;letter-spacing:-.015em;line-height:1.08;
  max-width:18ch;
}
.hero h1 strong{font-weight:700;}
.hero-body{
  margin-top:56px;
  display:grid;grid-template-columns:200px 1fr;gap:48px;
}
.hero-marginal{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tan);
  padding-top:6px;
}
.hero-marginal .spectrum-glyph{margin-top:14px;}
.hero-text{max-width:var(--measure);}
.hero-text p{margin-bottom:24px;font-size:15px;line-height:1.7;color:var(--ink);}
.hero-text p:last-child{margin-bottom:0;}
.hero-text a{border-bottom:1px solid var(--rule-strong);transition:border-color .2s;}
.hero-text a:hover{border-color:var(--ochre);}
@media (max-width:860px){
  .hero{padding:64px 0 56px;}
  .hero-body{grid-template-columns:1fr;gap:28px;}
}

/* ---------- index / table of contents (home) ---------- */
.index{border-top:1px solid var(--ink);padding:40px 0 72px;}
.index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
@media (max-width:860px){ .index-grid{grid-template-columns:1fr;gap:36px;} }
.index-col h2{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:18px;
}
.index-col ul{list-style:none;}
.index-col li{border-top:1px solid var(--rule);}
.index-col li:last-child{border-bottom:1px solid var(--rule);}
.index-col a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 2px;font-size:16px;transition:color .2s;
}
.index-col a:hover{color:var(--ochre);}
.index-col .abbr{
  font-size:11px;letter-spacing:.12em;color:var(--tan);font-weight:400;flex:none;
}

/* ---------- framework entries (home) ---------- */
.entries{border-top:1px solid var(--ink);}
article.entry{
  border-bottom:1px solid var(--rule);
  padding:72px 0;
  display:grid;grid-template-columns:200px 1fr;gap:48px;
}
article.entry:last-child{border-bottom:none;}
@media (max-width:860px){
  article.entry{grid-template-columns:1fr;gap:24px;padding:52px 0;}
}
.entry-meta .domain{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  display:block;margin-bottom:18px;
}
.entry-meta .abbr{
  font-size:clamp(40px,4.5vw,56px);font-weight:200;letter-spacing:.02em;color:var(--tan);
  line-height:1;display:block;
}
.entry-content{max-width:var(--measure);}
.entry-content h3{
  font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.01em;line-height:1.15;
  margin-bottom:10px;
}
.entry-content .deck{
  font-size:17px;font-weight:400;color:var(--ink-soft);margin-bottom:26px;
}
.entry-content p.body{margin-bottom:30px;color:var(--ink);}
.entry-links{display:flex;gap:36px;flex-wrap:wrap;}
.entry-links a{
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border-bottom:1px solid var(--rule-strong);padding-bottom:3px;
  transition:border-color .2s,color .2s;
}
.entry-links a:hover{color:var(--ochre);border-color:var(--ochre);}
.entry-links a.quiet{font-weight:400;color:var(--ink-soft);}
.entry-links a.quiet:hover{color:var(--ochre);}

/* ---------- detail pages (frameworks + bio) ---------- */
.page{padding:80px 0 96px;}
@media (max-width:860px){ .page{padding:56px 0 64px;} }
.page-grid{display:grid;grid-template-columns:200px 1fr;gap:48px;}
@media (max-width:860px){ .page-grid{grid-template-columns:1fr;gap:28px;} }

.page-marginal{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
.page-marginal .sticky{position:sticky;top:40px;}
.page-marginal .domain{display:block;margin-bottom:18px;}
.page-marginal .abbr{
  font-size:clamp(40px,4.5vw,56px);font-weight:200;letter-spacing:.02em;color:var(--tan);
  line-height:1;display:block;text-transform:none;
}
.page-marginal .spectrum-glyph{margin-top:22px;}

.page-main{max-width:var(--measure);}
.page-main h1{
  font-size:clamp(34px,4.4vw,52px);
  font-weight:300;letter-spacing:-.015em;line-height:1.1;
  margin-bottom:14px;
}
.page-main h1 sup{font-weight:300;font-size:.4em;color:var(--ink-soft);}
.page-main .deck{
  font-size:19px;color:var(--ink-soft);font-weight:400;line-height:1.5;
  margin-bottom:44px;padding-bottom:34px;border-bottom:1px solid var(--rule);
}
.prose p{margin-bottom:26px;}
.prose p:last-of-type{margin-bottom:0;}
.prose a{border-bottom:1px solid var(--rule-strong);transition:border-color .2s;}
.prose a:hover{border-color:var(--ochre);}
.prose em{font-style:italic;}
.page-actions{margin-top:44px;padding-top:32px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:18px 32px;}
.page-actions a{
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border-bottom:1px solid var(--rule-strong);padding-bottom:3px;
  transition:border-color .2s,color .2s;
}
.page-actions a:hover{color:var(--ochre);border-color:var(--ochre);}

/* prev / next framework pager */
.pager{border-top:1px solid var(--ink);}
.pager-inner{
  display:flex;justify-content:space-between;gap:24px;
  padding-top:30px;padding-bottom:34px;
}
.pager a{
  display:flex;flex-direction:column;gap:6px;max-width:46%;
  transition:color .2s;
}
.pager a:hover{color:var(--ochre);}
.pager .dir{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tan);}
.pager .name{font-size:16px;font-weight:700;line-height:1.3;}
.pager .next{margin-left:auto;text-align:right;}

/* ---------- bio page ---------- */
.bio-portrait{
  width:100%;max-width:340px;display:block;
  filter:grayscale(100%);
  margin-bottom:28px;
  background:var(--stone);
}
@media (min-width:861px){
  .bio-grid{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start;}
  .bio-grid .bio-portrait{position:sticky;top:40px;margin-bottom:0;}
}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--ink);padding:56px 0 64px;}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;}
.foot-id .name{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.foot-id .spectrum-glyph{margin-top:14px;}
.foot-links{display:flex;gap:28px;flex-wrap:wrap;}
.foot-links a{
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s;
}
.foot-links a:hover{color:var(--ink);border-color:var(--tan);}
.colophon{margin-top:40px;font-size:12px;color:var(--ink-soft);letter-spacing:.02em;}