/* Omni-American Commons — site styles
   Palette: warm paper, near-black ink, FBT yellow (#ff0) as a restrained accent. */

:root {
  --paper: #f8f5ec;
  --paper-deep: #f1ecdf;
  --ink: #17140e;
  --ink-soft: #55503f;
  --rule: #d9d2c0;
  --yellow: #ffef00;
  --yellow-soft: #fff9c2;
  --murray-blue: #2b5cad;
  --murray-red: #cf2e36;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Charter BT", Georgia, "Times New Roman", serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "Source Code Pro", Consolas, Menlo, monospace;
  --measure: 44rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

::selection { background: var(--yellow); color: var(--ink); }

.wrap {
  max-width: 66rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Header ---------- */

/* Tricolor keyline — a nod to the jacket bands on Albert Murray's editions. */
body::before {
  content: "";
  display: block;
  height: 8px;
  background: linear-gradient(
    180deg,
    var(--murray-blue) 0 3px,
    #ffffff 3px 5px,
    var(--murray-red) 5px 8px
  );
  border-bottom: 1px solid var(--ink);
}

.site-header {
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}

.site-header .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.masthead {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  text-decoration: none;
}

.masthead .wordmark {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.masthead .fbt-tag {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: var(--ink); border-bottom-color: var(--yellow); }

.site-nav a.nav-cta {
  color: var(--ink);
  background: var(--yellow);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 0.35rem 0.8rem;
  font-weight: 600;
}

.site-nav a.nav-cta:hover { background: var(--ink); color: var(--yellow); }

/* Companion launch chip — a split control mirroring the ·Sum family pattern.
   The label navigates to the Companion page in place; the glyph segment pops
   it out as a slender floating window, which Chrome can then install as an app
   (desktop) or add to the home screen (Android). No accounts here, so unlike
   the family's other Companions there is no credential to seed on launch. */
.companion-chip {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  overflow: hidden;
}
.companion-chip:hover { border-color: var(--murray-blue); }
.site-nav .companion-chip a,
.companion-chip button {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--murray-blue);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.site-nav .companion-chip a { padding: 0.35rem 0.75rem; }
.companion-chip button { padding: 0.35rem 0.55rem; border-left: 1.5px solid var(--ink); }
.site-nav .companion-chip a:hover,
.companion-chip button:hover { background: var(--yellow-soft); }
.companion-chip svg { display: block; }

/* ---------- Hero ---------- */

.hero {
  padding: 4.5rem 0 4rem;
  border-bottom: 1px solid var(--rule);
}

.hero .kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--yellow);
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05;
  margin: 1.2rem 0 1.4rem;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

.hero .lede {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 36em;
  margin: 0 0 2.2rem;
}

.hero .lede strong { color: var(--ink); font-weight: 600; }

.btn-row { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.btn {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.7rem 1.3rem;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--yellow); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--yellow-soft); }

/* ---------- Sections ---------- */

.section {
  padding: 3.8rem 0;
  border-bottom: 1px solid var(--rule);
}

.section:last-of-type { border-bottom: none; }

.section-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}

.section-label::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 0.65em;
  background: var(--yellow);
  margin-right: 0.7rem;
  vertical-align: baseline;
}

.section h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  line-height: 1.15;
  margin: 0 0 1.4rem;
  max-width: 24ch;
  letter-spacing: -0.005em;
}

.section p, .section ul, .section ol { max-width: var(--measure); }

.section p + h3 { margin-top: 2.2rem; }

.section h3 {
  font-size: 1.22rem;
  margin: 2rem 0 0.7rem;
}

.muted { color: var(--ink-soft); }

mark {
  background: linear-gradient(transparent 62%, var(--yellow) 62%);
  color: inherit;
  padding: 0 0.08em;
}

/* Murray accents */

.omni-blue { color: var(--murray-blue); }
.omni-red { color: var(--murray-red); }

blockquote.epigraph {
  position: relative;
  max-width: var(--measure);
  margin: 2rem 0;
  padding: 0.4rem 0 0.4rem 1.5rem;
  font-size: 1.22rem;
  line-height: 1.55;
  font-style: italic;
}

blockquote.epigraph::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(
    180deg,
    var(--murray-blue) 0 33.3%,
    #ffffff 33.3% 66.6%,
    var(--murray-red) 66.6% 100%
  );
  box-shadow: 0 0 0 1px var(--rule);
}

blockquote.epigraph footer {
  margin-top: 0.6rem;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

blockquote.epigraph footer .work { color: var(--murray-red); }

/* Two-column split for identity section */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.logo-plate {
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 2rem 1.6rem;
  text-align: center;
}

.logo-plate img { width: min(200px, 70%); height: auto; display: block; margin: 0 auto; }

.logo-plate figcaption {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin-top: 1.1rem;
  color: var(--ink);
}

/* Mental-model list */

.model-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  max-width: var(--measure);
  border-top: 2px solid var(--ink);
}

.model-list li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 1.4rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
}

.model-list .term {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 0.2rem;
}

.model-list .def { margin: 0; }

/* Dialogue example */

.exchange {
  max-width: var(--measure);
  margin: 2.2rem 0 0;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: #fffdf4;
  padding: 1.5rem 1.7rem;
}

.exchange .speaker {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.35rem;
}

.exchange .speaker.you::before,
.exchange .speaker.bot::before {
  content: "";
  display: inline-block;
  width: 0.6em; height: 0.6em;
  margin-right: 0.5em;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}

.exchange .speaker.bot::before { background: var(--yellow); }

.exchange p { margin: 0 0 1.2rem; }
.exchange p:last-child { margin-bottom: 0; }

.exchange cite {
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--yellow);
  padding-left: 0.8rem;
  margin-top: 0.5rem;
}

/* Numbered steps */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  max-width: var(--measure);
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.5rem 3.2rem;
}

.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--yellow);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 0.15rem 0.4rem;
}

.steps h3 { margin: 0 0 0.4rem; font-size: 1.12rem; }
.steps p { margin: 0.3rem 0; }

/* Cards for contribution kinds */

.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.6rem 0 0;
  max-width: var(--measure);
  padding: 0;
  list-style: none;
}

.tag-grid li {
  font-family: var(--sans);
  font-size: 0.84rem;
  border: 1.5px solid var(--ink);
  border-radius: 2rem;
  padding: 0.35rem 0.95rem;
  background: var(--paper-deep);
}

/* Callouts */

.callout {
  max-width: var(--measure);
  border-left: 4px solid var(--yellow);
  background: var(--yellow-soft);
  padding: 1rem 1.3rem;
  margin: 1.8rem 0 0;
}

.callout p { margin: 0; }
.callout p + p { margin-top: 0.7rem; }

.callout.plain {
  background: var(--paper-deep);
  border-left-color: var(--ink);
}

/* CTA band */

.cta-band {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 3.4rem 0 3rem;
}

.cta-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(
    180deg,
    var(--murray-blue) 0 3px,
    #ffffff 3px 5px,
    var(--murray-red) 5px 8px
  );
}

.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 0.8rem; }
.cta-band p { color: #cfc9b8; max-width: 40em; margin: 0 0 1.8rem; }
.cta-band .btn { border-color: var(--yellow); }
.cta-band .btn-primary { background: var(--yellow); color: var(--ink); }
.cta-band .btn-primary:hover { background: transparent; color: var(--yellow); }

/* ---------- Connect page ---------- */

.page-title { padding: 3.6rem 0 0.6rem; }
.page-title h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.08; margin: 1.2rem 0 1rem; max-width: 20ch; }
.page-title .lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 38em; margin: 0; }
.page-title .kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--yellow);
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
}

.connector-card {
  max-width: var(--measure);
  margin: 2.4rem 0 0;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fffdf4;
}

.connector-card .card-head {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--yellow);
  border-bottom: 2px solid var(--ink);
  padding: 0.55rem 1.2rem;
}

.connector-card .card-body { padding: 1.2rem 1.2rem 1.4rem; }

.connector-card .endpoint {
  display: block;
  font-family: var(--mono);
  font-size: 1rem;
  background: var(--ink);
  color: var(--yellow);
  padding: 0.8rem 1rem;
  border-radius: 3px;
  overflow-x: auto;
  white-space: nowrap;
}

.connector-card .card-body p { margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--ink-soft); }

.connector-card dl.settings {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.35rem 1.4rem;
  margin: 1.1rem 0 0;
}

.connector-card dl.settings dt {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.15rem;
}

.connector-card dl.settings dd { margin: 0; font-size: 0.98rem; }

pre.code {
  max-width: var(--measure);
  background: var(--ink);
  color: #f3efe2;
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.55;
  padding: 1.1rem 1.3rem;
  border-radius: 3px;
  overflow-x: auto;
  margin: 1rem 0 0;
}

pre.code .c { color: #a49e8a; }

code.inline {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.08em 0.35em;
  white-space: nowrap;
}

.client-block { margin-top: 2.6rem; max-width: var(--measure); }
.client-block h3 {
  margin: 0 0 0.6rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--ink);
  font-size: 1.25rem;
}
.client-block p { margin: 0.6rem 0; }
.client-block h4 { margin: 1.6rem 0 0.3rem; font-size: 1.02rem; }
.client-block h4 a { text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.client-block ol { margin: 0.6rem 0; padding-left: 1.3rem; }
.client-block ol li { margin: 0.35rem 0; }

.prompt-list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  max-width: var(--measure);
}

.prompt-list li {
  border: 1.5px solid var(--ink);
  background: #fffdf4;
  border-radius: 3px;
  padding: 0.75rem 1.1rem;
  margin-bottom: 0.7rem;
  font-style: italic;
}

.prompt-list li::before { content: "“"; }
.prompt-list li::after { content: "”"; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: #cfc9b8;
  border-top: 1px solid #3f3a2d;
  padding: 2.2rem 0 2.2rem;
  font-size: 0.92rem;
}

.site-footer .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.site-footer p { margin: 0.4rem 0; max-width: 46em; }

.site-footer .foot-links {
  font-family: var(--sans);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.site-footer a { color: #eae4d2; text-decoration: none; border-bottom: 1px solid #4c473a; padding-bottom: 1px; }
.site-footer a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }

.site-footer .fineprint {
  margin-top: 1.6rem;
  font-size: 0.8rem;
  color: #8d876f;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .masthead .fbt-tag { display: none; }
}

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .logo-plate { max-width: 20rem; }
  .model-list li { grid-template-columns: 1fr; gap: 0.25rem; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .hero { padding: 3.2rem 0 3rem; }
  .section { padding: 3rem 0; }
}