/* convoking4.com. decisiontect.com's site.css (BCDS-LLC/decisiontect-site 6451372), less the parts only Decisiontect's
   pages use (the mark, the trademark sign and the home and Who We Are blocks), with the history's stages added at
   the end. The beta notice is decisiontect.com's, by texts r7. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
}

:root {
  --ground: #faf9f6;
  --navy: #0E2240;
  color-scheme: light;
}

html {
  background: var(--ground);
  color: var(--navy);
  font-family: "Inter", sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.wrap {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 16px;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* The beta notice: one line above the header, ground on navy, linking to the home page's box. */
.beta-notice {
  background: var(--navy);
  color: var(--ground);
  font-size: 0.875rem;
}

.beta-notice p {
  margin-bottom: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.beta-notice a:focus-visible {
  outline-color: var(--ground);
}

/* At phone width the wordmark and the language switch share the first row and the menu takes the second;
   from 40rem all three share one row. */
.site-header .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand switch" "nav nav";
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 40rem) {
  .site-header .wrap {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav switch";
  }
}

/* The wordmark: upright, weight 700, navy, tracking opened slightly (section 4). */
.wordmark {
  grid-area: brand;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

/* The trademark sign rides the wordmark, top aligned to its cap line, as on decisiontect.com (texts r8). */
.tm {
  font-weight: 400;
  font-size: 0.5em;
  position: relative;
  top: -0.73em;
  margin-left: 0.05em;
  letter-spacing: 0;
}

/* The menu's bars are borders between its items, not characters in its text. */
.nav {
  grid-area: nav;
  justify-self: start;
  font-size: 0.9375rem;
}

@media (min-width: 40rem) {
  .nav {
    justify-self: end;
  }
}

.nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li + li {
  margin-left: 0.75em;
  padding-left: 0.75em;
  border-left: 1px solid var(--navy);
}

.nav a {
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover {
  text-decoration: underline;
}

.nav [aria-current] {
  font-weight: 700;
}

.switch {
  grid-area: switch;
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

.switch [aria-current] {
  font-weight: 700;
}

main {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h2 {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

p {
  margin: 0 0 1.25rem;
}

.actions {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.actions li {
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.site-footer {
  margin-top: 3rem;
  font-size: 0.875rem;
}

.site-footer .wrap {
  border-top: 1px solid var(--navy);
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

.site-footer p {
  margin: 0 0 0.5rem;
}

/* In running copy the face's own trademark glyph, already a superior, at the text's size. */
.site-footer .tm {
  font-size: 1em;
  top: 0;
  margin-left: 0;
}

.footer-links {
  padding-bottom: 0.5rem;
}

.footer-links a {
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}

.lead {
  font-size: 1.25rem;
  line-height: 1.45;
}

/* The history: each stage under a rule, its heading, its body, and its source in smaller type. */
.stage {
  padding-top: 1.25rem;
  border-top: 1px solid var(--navy);
}

.stage h2 {
  font-size: 1.125rem;
  line-height: 1.3;
}

.source {
  font-size: 0.9375rem;
}

/* The six posts: each title in italics, its date on the line under it. */
.posts {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}

.posts li {
  margin: 0 0 0.75rem;
}

.posts time {
  display: block;
  font-size: 0.9375rem;
}

.end {
  padding-top: 1.25rem;
  border-top: 1px solid var(--navy);
}