/* ============================================================
   Agile Laws — site stylesheet
   Editorial design system: Fraunces (serif) + Inter (sans)
   ============================================================ */

:root {
  --bg: #F5EFE6;
  --surface: #FBF7F1;
  --ink: #1C2B3A;
  --ink-soft: #4A586B;
  --ink-muted: #6F7A88;
  --rule: #E2D9C8;
  --rule-soft: #ECE4D4;
  --accent: #3B6FB5;
  --accent-deep: #244881;
  --accent-soft: #D2DEEC;
  --serif: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --shell: 1600px;
  --pad-x: clamp(16px, 2vw, 32px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, 1vw, 17px);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

a { color: var(--accent-deep); text-decoration: none; border-bottom: 1px solid var(--accent-soft); transition: border-color 0.2s, color 0.2s; }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

img { max-width: 100%; height: auto; }

/* ---------- Header ---------- */
.brand-strip {
  position: sticky; top: 0; z-index: 51;
  height: 4px; background: var(--accent);
}

.site-header {
  position: sticky; top: 4px; z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid rgba(245, 239, 230, 0.08);
}
.site-header__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 12px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 3.4vw, 46px);
  color: var(--bg); border: none;
  letter-spacing: -0.02em; line-height: 1; white-space: nowrap;
}
.brand:hover { color: var(--accent-soft); border: none; }

.site-search { display: flex; align-items: stretch; gap: 8px; }
.site-search input {
  width: clamp(160px, 22vw, 280px);
  padding: 8px 14px;
  font-family: var(--sans); font-size: 14px;
  color: var(--ink); background: #fff;
  border: 1px solid transparent; border-radius: 4px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.site-search input:focus { border-color: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.site-search input::placeholder { color: var(--ink-muted); }
.site-search button {
  padding: 8px 18px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--bg); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.site-search button:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* ---------- Page layout ---------- */
.page { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad-x); width: 100%; }

.breadcrumb { padding: 24px 0 0; font-size: 13px; color: var(--ink-muted); letter-spacing: 0.02em; }
.breadcrumb a { color: var(--ink-muted); border-bottom: none; }
.breadcrumb a:hover { color: var(--accent-deep); }
.breadcrumb__sep { margin: 0 10px; color: var(--rule); }
.breadcrumb__current { color: var(--ink); }

.page-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 312px;
  gap: clamp(28px, 3.5vw, 56px);
  padding: 36px 0 64px;
  align-items: start;
}

.page-grid--no-rail { grid-template-columns: 240px minmax(0, 1fr); }

.page-grid--full { display: block; padding: 36px 0 64px; }

/* ---------- Left nav rail ---------- */
.side-nav-rail { position: sticky; top: 96px; font-size: 14px; }
.quickref-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; margin-bottom: 24px;
  color: var(--accent-deep);
  font-weight: 600; font-size: 13.5px;
  border: 1px solid var(--accent-soft);
  border-radius: 4px;
  background: transparent;
  transition: background 0.2s, border-color 0.2s;
}
.quickref-link:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.quickref-link__icon { width: 14px; height: 14px; flex-shrink: 0; }
.side-nav-rail__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--ink-muted);
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.side-nav-rail__sections { list-style: none; }
.side-nav-rail__section { margin-bottom: 8px; }
.side-nav-rail__section > a {
  display: block; padding: 6px 12px;
  color: var(--ink); font-weight: 600; font-size: 13.5px;
  border-radius: 4px; border: none; line-height: 1.35;
}
.side-nav-rail__section > a:hover { background: var(--surface); color: var(--accent-deep); border: none; }
.side-nav-rail__section > a.is-current { color: var(--accent-deep); background: var(--accent-soft); border: none; }
.side-nav-rail__articles {
  list-style: none; margin: 2px 0 6px;
  padding-left: 12px; border-left: 1px solid var(--rule);
}
.side-nav-rail__articles li a {
  display: block; padding: 4px 12px;
  color: var(--ink-soft); font-size: 13px; font-weight: 400;
  line-height: 1.4; border: none; border-radius: 4px; margin-left: -1px;
}
.side-nav-rail__articles li a:hover { color: var(--accent-deep); background: var(--surface); border: none; }
.side-nav-rail__articles li a.is-current { color: var(--accent-deep); font-weight: 600; background: var(--accent-soft); border: none; }

/* ---------- Article ---------- */
.article-hero { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--rule); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent-deep); margin-bottom: 22px; border: none;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--accent); }
a.eyebrow { color: var(--accent-deep); }
a.eyebrow:hover { color: var(--accent); }
.article-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(36px, 5.5vw, 68px);
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ink); margin-bottom: 22px;
}
.article-dek {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.4; color: var(--ink-soft);
}

.article-body { font-family: var(--sans); }
.article-body p { margin: 0 0 22px; color: var(--ink); }
.article-body h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.2; letter-spacing: -0.015em;
  color: var(--ink); margin: 52px 0 18px;
}
.article-body h2::before {
  content: ''; display: block;
  width: 40px; height: 2px; background: var(--accent);
  margin-bottom: 16px;
}
.article-body h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(20px, 1.6vw, 22px);
  line-height: 1.25; color: var(--ink);
  margin: 32px 0 12px;
}
.article-body ul, .article-body ol { margin: 0 0 26px; padding-left: 0; list-style: none; }
.article-body ul li, .article-body ol li {
  position: relative; padding-left: 26px;
  margin-bottom: 10px; color: var(--ink);
}
/* Level-1 ul: filled circle. Use > so nested ul items don't inherit. */
.article-body ul > li::before {
  content: ''; position: absolute;
  left: 4px; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
  box-sizing: border-box;
}
/* ol: numbered. Use > so nested <ul> items inside an <ol><li> don't
   inherit counter-increment (which is what caused 1,2,3,4,5,6,... to
   keep climbing through the bullets). */
.article-body ol { counter-reset: list; }
.article-body ol > li::before {
  counter-increment: list;
  content: counter(list) '.';
  position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 600;
}
/* Level-2 ul (nested directly inside any li): hollow circle */
.article-body li > ul > li::before {
  background: transparent;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  width: 7px; height: 7px;
}
/* Level-3 ul (ul nested inside an li inside another list): filled square */
.article-body li > ul > li > ul > li::before,
.article-body li > ol > li > ul > li::before {
  background: var(--accent);
  border: none;
  border-radius: 0;
  width: 6px; height: 6px;
}
/* Nested lists inside list items keep their own counters / bullets */
.article-body li ul, .article-body li ol { margin: 8px 0 0; }

/* Article figures (preserves existing /images/laws/*.png) */
.article-body figure {
  margin: 28px 0;
  text-align: center;
}
.article-body figure img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  /* Most diagrams have a white background; mix-blend-mode: multiply lets
     white pixels disappear into the cream page background so the figure
     reads as transparent. Add class="no-blend" on any <img> that needs the
     literal white (photos, screenshots, etc). */
  mix-blend-mode: multiply;
}
.article-body figure img.no-blend { mix-blend-mode: normal; }
.article-body figure figcaption {
  margin-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-muted);
}

/* Pull quote */
.pullquote {
  margin: 40px 0 24px;
  padding: 28px 36px 28px 56px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  position: relative;
}
.pullquote__mark {
  font-family: var(--serif); font-size: 80px; line-height: 0.5;
  color: var(--accent-soft);
  position: absolute; top: 32px; left: 16px; pointer-events: none;
}
.pullquote__text {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.35; color: var(--ink);
  margin-bottom: 14px; letter-spacing: -0.005em;
}
.pullquote__cite {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-muted); font-style: normal;
}
.quote-divider {
  border: none;
  width: 100%;
  height: 1px;
  background: var(--rule);
  margin: 0 0 32px;
}

/* Image-only pullquote (e.g. the Value = Why/How formula on Dude's Law).
   Drop the surface background so the image's white pixels blend cleanly
   into the page cream via multiply. Keep the left accent stripe so it
   still reads as a pullquote. */
.pullquote--image {
  background: transparent;
}
.pullquote--image .pullquote__mark {
  display: none;
}
.pullquote--image .pullquote__image {
  display: block;
  margin: 0 auto 12px;
  max-width: 100%;
  max-height: 220px;
  height: auto;
  mix-blend-mode: multiply;
}
.pullquote--image .pullquote__cite {
  display: block;
  text-align: center;
}

/* Key takeaways */
.takeaways {
  background: var(--surface);
  border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 4px; padding: 24px 36px; margin: 32px 0;
}
.takeaways h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(22px, 1.8vw, 26px);
  line-height: 1.2; margin: 0 0 14px;
  color: var(--ink); letter-spacing: -0.01em;
}
.takeaways ul { list-style: none; padding: 0; margin: 0; }
.takeaways ul li {
  position: relative; padding-left: 26px;
  margin-bottom: 12px; font-size: 16px; line-height: 1.55; color: var(--ink);
}
.takeaways ul li:last-child { margin-bottom: 0; }
.takeaways ul li::before {
  content: ''; position: absolute;
  left: 4px; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
}

/* Coaching tips */
.coaching { margin: 48px 0; }
.coaching__heading {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.2; letter-spacing: -0.015em;
  color: var(--ink); margin-bottom: 24px;
}
.coaching__heading::before {
  content: ''; display: block;
  width: 40px; height: 2px; background: var(--accent);
  margin-bottom: 16px;
}
.coaching__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.coaching__card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 4px; padding: 22px 24px;
  display: flex; gap: 16px; align-items: flex-start;
  transition: border-color 0.2s, transform 0.2s;
}
.coaching__card:hover { border-color: var(--accent-soft); transform: translateY(-1px); }
.coaching__card__icon {
  font-size: 1.5rem;
  color: #ffc107;
  flex-shrink: 0;
  line-height: 1.35;
  margin-top: 1px;
}
.coaching__card__body { flex: 1; min-width: 0; }
.coaching__card__body h4 {
  font-family: var(--sans); font-weight: 600;
  font-size: 16px; line-height: 1.35;
  color: var(--ink); margin: 0 0 8px;
}
.coaching__card__body p {
  color: var(--ink-soft); font-size: 14.5px;
  line-height: 1.6; margin: 0;
}

/* Summary section */
.summary p { color: var(--ink); }

/* Footnotes */
.footnotes { margin: 36px 0 0; padding: 24px 0 0; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-muted); }
.footnotes__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--ink-muted); margin-bottom: 12px;
}
.footnotes ol { padding-left: 20px; }
.footnotes li { margin-bottom: 8px; line-height: 1.6; }

/* ---------- Right rail ---------- */
.side-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 28px; }
.from-author {
  background: var(--ink); color: var(--bg);
  border-radius: 6px; padding: 28px 26px;
  position: relative; overflow: hidden;
}
.from-author::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px; background: var(--accent);
}
.from-author__label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent-soft); margin-bottom: 14px;
}
.from-author p { font-size: 14.5px; line-height: 1.6; color: rgba(245, 239, 230, 0.88); margin-bottom: 14px; }
.from-author p strong { color: var(--bg); font-weight: 600; }
.from-author__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--bg);
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.02em; padding: 10px 16px;
  border-radius: 4px; margin-top: 4px;
  border: none; transition: background 0.2s;
}
.from-author__cta:hover { background: var(--accent-deep); color: var(--bg); border: none; }
.from-author__cta::after { content: '→'; transition: transform 0.2s; }
.from-author__cta:hover::after { transform: translateX(2px); }

/* When the from-author mount holds an .author-ad image, drop the dark
   card chrome so the image fills the rail edge-to-edge. */
.from-author:has(.author-ad) {
  background: transparent;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}
.from-author:has(.author-ad)::before { display: none; }
.author-ad {
  display: block;
  border: none;
  line-height: 0;
}
.author-ad:hover { border: none; }
.author-ad img {
  display: block;
  width: 100%;
  max-width: 312px;
  height: auto;
  border-radius: 4px;
}

.learn-more__rail-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-muted); margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.books { display: flex; flex-direction: column; gap: 14px; }
.book {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 4px; padding: 14px;
  display: flex; gap: 14px; align-items: flex-start;
  transition: border-color 0.2s, transform 0.2s; text-decoration: none;
}
.book:hover { border-color: var(--accent-soft); transform: translateY(-1px); }
.book__cover {
  width: 110px; height: 160px;
  object-fit: contain; object-position: top center;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(28, 43, 58, 0.18);
  flex-shrink: 0; background: var(--rule-soft);
}
.book__body { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 160px; }
.book__title { font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: -0.005em; }
.book__subtitle { font-size: 12px; line-height: 1.4; font-weight: 400; color: var(--ink-muted); margin: 4px 0 0; font-style: italic; }
.book__cta { font-size: 12px; font-weight: 600; color: var(--accent-deep); letter-spacing: 0.04em; text-transform: uppercase; margin-top: auto; padding-top: 10px; }
.affiliate-disclosure {
  margin-top: 16px;
  font-size: 11.5px;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

/* ---------- Section index pages ---------- */
.section-hero { padding: 16px 0 36px; border-bottom: 1px solid var(--rule); margin-bottom: 36px; }
.section-intro {
  font-family: var(--sans);
  font-style: normal;
  font-size: clamp(15px, 1vw, 17px);
  color: var(--ink);
  line-height: 1.7;
  margin: 18px 0 0;
  max-width: 760px;
}
.section-intro + .section-intro { margin-top: 18px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 32px 0 32px; }
.card-grid--2col { grid-template-columns: repeat(2, 1fr); }
.card-grid--3col { grid-template-columns: repeat(3, 1fr); }
.card-grid--4col { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .card-grid--4col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px)  { .card-grid--3col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  {
  .card-grid--2col, .card-grid--3col, .card-grid--4col { grid-template-columns: 1fr; }
}
.card {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 4px;
  transition: border-color 0.2s, transform 0.2s;
  color: var(--ink); border-bottom: 1px solid var(--rule);
}
.card:hover { border-color: var(--accent-soft); transform: translateY(-1px); color: var(--ink); border-bottom-color: var(--accent-soft); }
.card__title { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.25; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; }
.card__dek { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.card__cta {
  margin-top: auto;
  padding-top: 14px;
  font-size: 12px; font-weight: 600;
  color: var(--accent-deep);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- Home page ---------- */
.hero {
  padding: clamp(48px, 8vw, 96px) 0 clamp(24px, 4vw, 48px);
  text-align: center;
  margin-bottom: clamp(24px, 4vw, 48px);
}
.hero__title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--ink); margin-bottom: 22px;
  max-width: 1100px; margin-left: auto; margin-right: auto;
}
.hero__dek {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4; color: var(--ink-soft);
  max-width: 760px; margin: 0 auto 28px;
}
.hero__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--bg);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 4px; border: none;
}
.hero__cta:hover { background: var(--accent-deep); color: var(--bg); border: none; }
.hero__cta::after { content: '→'; transition: transform 0.2s; }
.hero__cta:hover::after { transform: translateX(3px); }

.section-block { margin-bottom: clamp(48px, 6vw, 80px); }
.section-block__heading {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.15; color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.section-block__heading a { color: var(--ink); border: none; }
.section-block__heading a:hover { color: var(--accent-deep); border: none; }
.section-block__dek {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--ink-soft); margin-bottom: 24px;
  max-width: 760px;
}

/* ---------- Quick reference table ---------- */
.qref-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14.5px;
  margin: 8px 0 48px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.qref-table thead th {
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
}
.qref-table tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.qref-table tbody tr:last-child td { border-bottom: none; }
.qref-table tbody tr:hover td:not(.qref-category) { background: var(--bg); }
.qref-table .qref-category {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  border-right: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  vertical-align: middle;
  padding: 14px 8px;
  width: 60px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Category accents — pale tints. AgileLaws has 16 sections; pale-blue is
   intentionally avoided so the category cells don't clash with the site
   accent. */
.qref-table .qref-category--foundations    { background: #E0F7F4; }    /* pale aqua */
.qref-table .qref-category--heuristics     { background: #FFF0E1; }    /* pale peach */
.qref-table .qref-category--learning       { background: #E7FFF1; }    /* pale green */
.qref-table .qref-category--product        { background: #FFFBE6; }    /* pale yellow */
.qref-table .qref-category--complexity     { background: #F0EAFF; }    /* pale lavender */
.qref-table .qref-category--improvement    { background: #EDF7ED; }    /* pale mint */
.qref-table .qref-category--flow           { background: #FFEDED; }    /* pale rose */
.qref-table .qref-category--bias           { background: #FFF5DB; }    /* pale gold */
.qref-table .qref-category--estimation     { background: #FFEAE2; }    /* pale coral */
.qref-table .qref-category--systems        { background: #E0F0EE; }    /* pale teal */
.qref-table .qref-category--change         { background: #EFE5FB; }    /* pale violet */
.qref-table .qref-category--collaboration  { background: #FFE9D6; }    /* pale apricot */
.qref-table .qref-category--communication  { background: #E8F1E0; }    /* pale sage */
.qref-table .qref-category--bureaucracy    { background: #F2EDE0; }    /* pale beige */
.qref-table .qref-category--network        { background: #DEF1FA; }    /* pale sky */
.qref-table .qref-category--innovation     { background: #F1E4F7; }    /* pale lilac */
/* Compatibility aliases used by the AMP design */
.qref-table .qref-category--core        { background: #FFF0E1; }
.qref-table .qref-category--anti        { background: #E7FFF1; }
.qref-table .qref-category--shifts      { background: #FFFBE6; }
.qref-table .qref-category--reflective  { background: #F0EAFF; }
.qref-table .qref-category--coaching    { background: #EDF7ED; }
.qref-table td a {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--accent-soft);
}
.qref-table td a:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}
.qref-table .qref-item { white-space: nowrap; min-width: 220px; }
.qref-table .qref-summary { color: var(--ink-soft); }
@media (max-width: 720px) {
  .qref-table .qref-category {
    writing-mode: initial;
    transform: none;
    width: auto;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    border-top: 4px solid var(--accent);
    text-align: left;
    padding: 10px 16px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .qref-table .qref-item { white-space: normal; }
  .qref-table { font-size: 14px; }
  .qref-table thead { display: none; }
  .qref-table, .qref-table tbody, .qref-table tr, .qref-table td { display: block; }
  .qref-table tr { border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
}

/* ---------- Progression strip (used on homepage to show sister-site flow) ---------- */
.progression {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.5vw, 18px);
  flex-wrap: wrap;
  margin: 32px auto 12px;
  text-align: center;
}
.progression__step {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--ink);
  border-bottom: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.progression__step:hover { color: var(--accent-deep); border-bottom: none; }
.progression__arrow {
  color: var(--accent);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px);
}
.article-body .progression__caption,
.progression__caption {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 720px;
  margin: 0 auto 24px;
}

/* ---------- Search page ---------- */
.search-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 4vw, 40px); text-align: center; }
.search-hero h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.02em; line-height: 1.1; color: var(--ink);
  margin-bottom: 14px;
}
.search-hero p { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-soft); max-width: 640px; margin: 0 auto; }
.search-mount { padding: 24px 0 64px; }
/* Re-skin Google CSE to fit the editorial style */
.gsc-control-cse {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--sans) !important;
}
.gsc-search-button-v2 { background-color: var(--ink) !important; border-color: var(--ink) !important; padding: 9px 20px !important; border-radius: 4px !important; }
.gsc-search-button-v2:hover { background-color: var(--accent-deep) !important; border-color: var(--accent-deep) !important; }
.gsc-input-box { border-color: var(--rule) !important; border-radius: 4px !important; }
input.gsc-input { background: #fff !important; font-family: var(--sans) !important; }
.gsc-webResult.gsc-result { border-color: var(--rule) !important; }
.gs-title b, .gs-title { font-family: var(--serif) !important; color: var(--ink) !important; }
.gsc-url-top { color: var(--ink-muted) !important; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(245, 239, 230, 0.78);
  padding: 24px var(--pad-x) 36px;
  margin-top: 0; text-align: center;
}
.site-footer__inner { max-width: 720px; margin: 0 auto; }
.site-footer__tagline { font-size: 15px; color: var(--bg); letter-spacing: 0.01em; margin-bottom: 12px; }
.site-footer__social { display: flex; justify-content: center; gap: 18px; margin-bottom: 12px; }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: rgba(245, 239, 230, 0.8);
  font-size: 18px;
  border: none; border-radius: 4px;
  transition: color 0.2s;
}
.site-footer__social a:hover { color: var(--accent-soft); border: none; }
.site-footer__social svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer__social i { line-height: 1; }
.site-footer__byline { font-size: 14px; color: rgba(245, 239, 230, 0.72); }
.site-footer__byline a { color: rgba(245, 239, 230, 0.9); border: none; }
.site-footer__byline a:hover { color: var(--accent-soft); border: none; }

.site-footer__umbrella { margin-top: 32px; margin-bottom: 8px; }
.site-footer__umbrella a {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(24px, 2.4vw, 30px);
  color: var(--bg); border: none;
  letter-spacing: -0.01em; line-height: 1.1;
}
.site-footer__umbrella a:hover { color: var(--accent-soft); border: none; }
.site-footer__umbrella sup { font-size: 0.45em; font-weight: 500; margin-left: 2px; vertical-align: super; line-height: 0; }
.site-footer__sites { font-size: 14px; color: rgba(245, 239, 230, 0.85); line-height: 1.7; }
.site-footer__sites a { color: rgba(245, 239, 230, 0.85); border: none; white-space: nowrap; }
.site-footer__sites a:hover { color: var(--accent-soft); border: none; }
.site-footer__sites .is-current { color: var(--accent-soft); font-weight: 600; }
.site-footer__sep { color: rgba(245, 239, 230, 0.4); margin: 0 8px; }
.site-footer__legal { margin-top: 32px; font-size: 12.5px; color: rgba(245, 239, 230, 0.6); line-height: 1.7; }
.site-footer__legal sup { font-size: 0.8em; vertical-align: super; line-height: 0; }

/* ---------- Mobile nav toggle ---------- */
.nav-toggle { display: none; background: transparent; border: 1px solid var(--rule); border-radius: 4px; padding: 8px 12px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.nav-toggle:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .page-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
  .side-rail {
    grid-column: 1 / -1; position: static;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px; margin-top: 24px;
  }
}
@media (max-width: 880px) {
  .page-grid { grid-template-columns: 1fr; gap: 28px; padding: 24px 0 48px; }
  .page-grid--no-rail { grid-template-columns: 1fr; }
  .side-nav-rail { position: static; display: none; }
  .side-nav-rail.is-open { display: block; }
  .side-rail { grid-template-columns: 1fr; }
  .site-search input { width: clamp(120px, 36vw, 220px); }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 480px) {
  .site-header__inner { gap: 12px; padding: 14px var(--pad-x); flex-wrap: wrap; }
  .brand { font-size: 20px; }
  .site-search input { width: 110px; padding: 7px 10px; font-size: 13px; }
  .site-search button { padding: 7px 12px; font-size: 13px; }
  .article-body h2, .coaching__heading { font-size: 24px; }
  .pullquote { padding: 22px 0 22px 22px; }
  .pullquote__mark { font-size: 56px; top: 24px; left: 12px; }
  .takeaways { padding: 24px 22px; }
  .site-footer { padding: 36px 22px 28px; }
}