/* Reading SmartOne in 2026 — design system
   spec: docs/superpowers/specs/2026-05-28-smartone-microsite-design.md §8
   plan: docs/superpowers/plans/2026-05-28-smartone-microsite.md Task 0.2 */

:root {
  /* Color tokens */
  --ivory:    #FAF9F5;
  --slate:    #141413;
  --blue:     #3B82F6;
  --blue-d:   #1E3A8A;
  --oat:      #E3DACC;
  --olive:    #788C5D;
  --olive-d:  #4F6638;
  --clay:     #D97757;
  --clay-d:   #B85C3E;
  --gray-50:  #F0EEE6;
  --gray-200: #D1CFC5;
  --gray-500: #87867F;
  --gray-700: #3D3D3A;
  --white:    #FFFFFF;

  /* Type stacks */
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Radii */
  --r-panel: 12px;
  --r-card:  8px;
  --r-pill:  999px;
  --r-tag:   6px;

  /* Border */
  --border: 1.5px solid var(--gray-200);
}

* { box-sizing: border-box; }

html { color-scheme: light; }
body {
  margin: 0;
  padding: 56px 32px 120px;
  background: var(--ivory);
  color: var(--slate);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 1180px; margin: 0 auto; }
.prose-narrow { max-width: 780px; }

/* Nav strip */
.nav {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 28px;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.nav .brand { color: var(--slate); font-weight: 600; letter-spacing: 0.04em; margin-right: 8px; }
.nav .sep { color: var(--gray-200); }
.nav a { color: var(--gray-700); text-decoration: none; }
.nav a:hover { color: var(--blue-d); }
.nav a.active { color: var(--blue-d); font-weight: 600; }

/* Eyebrow + headings */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-d);
  margin-bottom: 8px;
}
h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.subtitle { color: var(--gray-700); font-size: 16px; margin: 0 0 28px; max-width: 760px; }

section { margin-bottom: 40px; }
hr.rule { border: none; border-top: 1px solid var(--gray-200); margin: 0 0 22px; }

/* By-line — agent attribution */
.byline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: #F2F6FE;
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--blue-d);
}
.byline .role-mini { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.byline .sep { color: var(--gray-200); }
.byline .meta { color: var(--gray-500); text-transform: none; letter-spacing: 0; }

/* Cards + panels */
.panel {
  background: var(--white);
  border: var(--border);
  border-radius: var(--r-panel);
  padding: 22px 24px;
}
.card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--r-card);
  padding: 16px 18px;
}

/* Stat strip */
.stat-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin: 20px 0 32px;
}
@media (max-width: 720px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: var(--white);
  border: var(--border);
  border-radius: var(--r-card);
  padding: 14px 16px;
}
.stat .val { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--slate); }
.stat .lab {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gray-500); margin-top: 4px;
}

/* Pulled quotes */
.pulled {
  margin: 18px 0;
  padding: 10px 16px;
  background: var(--gray-50);
  border-left: 3px solid var(--oat);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--gray-700);
}
.pulled .src {
  display: block;
  font-family: var(--mono); font-style: normal;
  font-size: 10.5px; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 6px;
}

/* Callouts — risk and opportunity */
.callout {
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 3px solid;
  border-radius: 0 var(--r-card) var(--r-card) 0;
  font-size: 14px;
}
.callout-risk { border-color: var(--clay); background: #FBF1EA; color: var(--gray-700); }
.callout-risk strong { color: var(--clay-d); }
.callout-opp { border-color: var(--olive); background: #F5F8EE; color: var(--gray-700); }
.callout-opp strong { color: var(--olive-d); }
.callout-info { border-color: var(--blue); background: #F2F6FE; color: var(--gray-700); }
.callout-info strong { color: var(--blue-d); }

/* Pills + tags */
.pill {
  display: inline-block;
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--gray-200); background: var(--gray-50); color: var(--gray-700);
}
.tag {
  display: inline-block;
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: var(--r-tag);
}
.tag-blue   { background: #E6EFFE; color: var(--blue-d); }
.tag-olive  { background: #E5EBD9; color: var(--olive-d); }
.tag-clay   { background: #F8E3D6; color: var(--clay-d); }
.tag-oat    { background: #F0E8D6; color: #7B6B53; }

/* HARBOR phase footer */
.phase-footer {
  margin-top: 56px; padding-top: 16px;
  border-top: 1px solid var(--gray-200);
  font-family: var(--mono); font-size: 11px;
  color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* Site footer */
.site-footer {
  margin-top: 80px; padding-top: 24px;
  border-top: 1px solid var(--gray-200);
  font-size: 12.5px; color: var(--gray-500);
  line-height: 1.55;
}
.site-footer a { color: var(--blue-d); }

/* Tables */
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th, table.data td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--gray-50); }
table.data th {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gray-500);
  background: var(--gray-50); border-bottom: none;
}
table.data td.num { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--gray-700); }

/* Disclosure callout (top of index) */
.disclosure {
  margin: 8px 0 28px;
  padding: 12px 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-card);
  font-size: 13px; color: var(--gray-700); line-height: 1.55;
}

/* Chapter card grid (used on index) */
.chapter-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 16px 0 28px;
}
@media (max-width: 880px) { .chapter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .chapter-grid { grid-template-columns: 1fr; } }
.chapter-card {
  background: var(--white); border: var(--border); border-radius: var(--r-card);
  padding: 16px 18px; text-decoration: none; color: var(--slate);
  display: block; transition: border-color 0.15s;
}
.chapter-card:hover { border-color: var(--blue); }
.chapter-card .ch-num {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--blue-d); margin-bottom: 4px;
}
.chapter-card .ch-title {
  font-family: var(--serif); font-size: 16px; line-height: 1.35;
  color: var(--slate); margin-bottom: 4px;
}
.chapter-card .ch-q {
  font-size: 12.5px; color: var(--gray-500); font-style: italic;
}

/* Role cards (used on team page) */
.role-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin: 14px 0 28px;
}
@media (max-width: 720px) { .role-grid { grid-template-columns: 1fr; } }
.role-card {
  background: var(--white); border: var(--border); border-radius: var(--r-card);
  padding: 18px 20px;
}
.role-card.s1 { border-left: 3px solid var(--blue); }
.role-card.s2 { border-left: 3px solid var(--olive); }
.role-card.s3 { border-left: 3px solid var(--clay); }
.role-card .r-num {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gray-500); margin-bottom: 5px;
}
.role-card .r-name {
  font-family: var(--serif); font-size: 17px; font-weight: 500;
  margin: 0 0 6px;
}
.role-card .r-mandate {
  font-size: 13.5px; color: var(--gray-700); font-style: italic; margin: 0 0 10px;
}
.role-card .r-artifacts {
  border-top: 1px solid var(--gray-50); padding-top: 10px;
  font-size: 12.5px; color: var(--gray-700);
}
.role-card .r-artifacts h5 {
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--blue-d); margin: 0 0 6px;
}
.role-card .r-artifacts ul { margin: 0; padding-left: 14px; }
.role-card .r-artifacts li { margin-bottom: 2px; }
.role-card .r-artifacts a { color: var(--slate); }

/* Phase header on team page */
.phase-head {
  margin-top: 32px; padding: 10px 14px;
  border-radius: var(--r-card);
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
}
.phase-head.s1 { background: #EEF4FF; color: var(--blue-d); }
.phase-head.s2 { background: #F5F8EE; color: var(--olive-d); }
.phase-head.s3 { background: #FBF1EA; color: var(--clay-d); }
.phase-head .when { color: var(--gray-500); margin-left: auto; }