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

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-static-400.ttf") format("truetype");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-static-500.ttf") format("truetype");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-static-600.ttf") format("truetype");
}

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

:root {
  --ink: #0e1117;
  --midnight: #1c2430;
  --sage: #3d4d46;
  --stone: #dad5cc;
  --copper: #b4632d;
  --compass-highlight: #eab37c;
  --line: #dad5cc;
  --muted: #3d4d46;
  --subheader-size: 14px;
  --subheader-line-height: 1.45;
  --subheader-letter-spacing: 0.12em;
  --body-size: 12px;
  --body-line-height: 1.45;
  --label-size: 12px;
  --label-line-height: 1.45;
  --footer-size: 9px;
  --footer-line-height: 1.45;
  --font-heading: Georgia;
  --h1-size: clamp(30px, 6vw, 60px);
  --h1-line-height: 0.92;
  --h3-size: clamp(16px, 2.4vw, 24px);
  --h3-line-height: 1.15;
}

.hero {
  display: block;
  background-color: #efe8e1;
  background-image: url("/incongruence-hero.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.hero-copy {
  width: 50%;
  height: 100%;
  background: transparent;
}


.hero h1,
.gap-copy h2,
.mark,
.notebook span {
  font-family: var(--font-cormorant);
}

.hero h1 {
  line-height: 0.92;
  font-weight: 500;
}

.principles p,
.circles span,
.blueprint-copy p,
footer p {
  font-family: var(--font-inter);
  font-style: normal;
}

.principles {
  background: var(--ink);
}

.principles article {
  border-color: rgba(218, 213, 204, 0.22);
}

.principles p {
  color: var(--stone);
}

.principle-icon {
  color: var(--copper);
  background: none;
  border: 0;
  border-radius: 0;
  transform: none;
  scale: 1;
}

.principle-icon-svg {
  width: clamp(20px, 3.9vw, 39px);
  height: clamp(20px, 3.9vw, 39px);
  color: var(--copper);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eye::before {
  content: "";
  position: absolute;
  width: 72%;
  height: 72%;
  left: 14%;
  top: 14%;
  border: 1px solid var(--copper);
  border-radius: 70% 0 70% 0;
  transform: rotate(45deg);
}

.eye::after {
  content: "";
  position: absolute;
  width: 20%;
  height: 20%;
  inset: 40%;
  border: 1px solid var(--copper);
  border-radius: 50%;
}

.nodes {
  background:
    radial-gradient(circle at 12% 78%, var(--paper) 0 2%, var(--copper) 3% 7%, transparent 8%),
    radial-gradient(circle at 43% 48%, var(--paper) 0 2%, var(--copper) 3% 7%, transparent 8%),
    radial-gradient(circle at 78% 17%, var(--paper) 0 2%, var(--copper) 3% 7%, transparent 8%),
    linear-gradient(139deg, transparent 25%, var(--copper) 26% 28%, transparent 29% 47%, var(--copper) 48% 50%, transparent 51%);
}

.nodes::before,
.nodes::after {
  display: none;
}

.rise {
  background:
    linear-gradient(136deg, transparent 0 32%, var(--copper) 33% 35%, transparent 36%),
    linear-gradient(126deg, transparent 0 54%, var(--copper) 55% 57%, transparent 58%),
    linear-gradient(145deg, transparent 0 73%, var(--copper) 74% 76%, transparent 77%);
}

.rise::before {
  left: 4%;
  right: 4%;
  bottom: 10%;
  background: var(--copper);
}

.ic-seal {
  border-color: var(--copper);
  color: var(--copper);
}

.gap {
  grid-template-columns: 42% 58%;
}

.gap-diagram {
  padding-right: 0;
}

.circles > div {
  border-color: rgba(61, 77, 70, 0.42);
  background: #f5f1eb;
  margin-left: 0;
  position: relative;
  z-index: 1;
}

.circles {
  position: relative;
  gap: clamp(12px, 2.4vw, 28px);
}

.circles::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: rgba(61, 77, 70, 0.38);
}

.circles .core {
  border-color: var(--ink);
}

.circles span {
  color: var(--midnight);
  font-size: clamp(5px, 1vw, 10px);
  line-height: 1.25;
}

.circles strong,
.gap-diagram > b,
.principles b,
nav a,
.button {
  font-family: var(--font-inter);
}

body,
p,
a,
b,
small,
button,
.principles p,
.gap-copy p,
.blueprint-copy p,
.circles span,
.circles strong,
footer p {
  font-family: var(--font-inter);
}

h1,
h2,
h3,
.mark span,
.mark strong,
.ic-seal,
.notebook span {
  font-family: var(--font-cormorant);
}

footer {
  background: var(--ink);
}

footer p {
  color: var(--stone);
}

/* Canonical body-text specification */
p,
.hero-copy p,
.principles p,
.gap-copy p,
.blueprint-copy p,
.gap aside p,
.circles span,
footer p {
  font-family: var(--font-inter);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
}

/* Canonical body-text colors */
.home p,
.home .hero-copy p,
.home .gap-copy p,
.home .blueprint-copy p,
.home .circles span {
  color: var(--ink);
}

.home .principles p,
.home .gap aside p,
.home footer p {
  color: var(--stone);
}

/* Canonical CTA specification */
.home .button,
.home .nav-cta,
.home .gap-copy a,
.home .blueprint-copy a {
  font-family: var(--font-inter);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home .gap-copy a,
.home .blueprint-copy a {
  color: var(--copper);
}

.home .button,
.home .nav-cta {
  color: #ffffff;
}

/* Canonical navigation specification */
.home header nav a {
  font-family: var(--font-inter);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.home header nav .nav-cta {
  color: #ffffff;
}

/* Canonical section-subheader specification */
.home .section-subheader {
  font-family: var(--font-inter);
  font-size: var(--subheader-size);
  font-style: normal;
  font-weight: 700;
  line-height: var(--subheader-line-height);
  letter-spacing: var(--subheader-letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.home .principles .section-subheader,
.home .contrast .section-subheader,
.home footer .section-subheader {
  color: var(--stone);
}

/* Global approved typography system */
.home {
  font-family: var(--font-inter);
}

.home a,
.home b,
.home strong,
.home small,
.home button,
.home p,
.home .circles span {
  font-family: var(--font-inter);
}

.home h1,
.home h2,
.home h3 {
  font-family: var(--font-heading);
}

.home .mark span,
.home .mark strong,
.home .ic-seal,
.home .notebook span,
.home .notebook i {
  font-family: var(--font-cormorant);
}

/* Approved InCongruence wordmark treatment */
.home .mark {
  gap: 0;
  white-space: nowrap;
}

.home .mark span,
.home .mark strong {
  padding: 0;
  border: 0;
  font-size: clamp(18px, 2.2vw, 26px);
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}

.home .mark span {
  color: var(--copper);
}

.home header .mark strong {
  color: var(--ink);
}

.home footer .mark strong {
  color: var(--stone);
}

.home .brand-logo--header {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: clamp(175px, 21vw, 282px);
  height: clamp(42px, 5.1vw, 68px);
  overflow: hidden;
  contain: layout paint;
  line-height: 0;
}

.home .brand-logo--header .brand-compass {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 94%;
  object-fit: contain;
}

.home .brand-type {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  margin-left: 0.018em;
  line-height: 1;
}

.home .brand-wordmark {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  font-family: "Cormorant Garamond";
  font-size: clamp(25px, 2.85vw, 38px);
  font-style: normal;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
}

.home .brand-wordmark span {
  color: var(--copper);
}

.home .brand-wordmark strong {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: var(--ink);
}

.home .brand-tagline {
  display: block;
  margin-top: 0.55em;
  padding-left: 0.42em;
  white-space: nowrap;
  font-family: var(--font-inter);
  font-size: clamp(6px, 0.68vw, 9px);
  font-style: normal;
  font-weight: 700;
  line-height: 0.5;
  letter-spacing: 0.335em;
  text-transform: uppercase;
  color: var(--ink);
}

.home h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-line-height);
}

.home h3 {
  font-size: var(--h3-size);
  font-style: normal;
  font-weight: 500;
  line-height: var(--h3-line-height);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

.home .contrast h3,
.home .principles h3,
.home footer h3 {
  color: var(--stone);
}

.home .hero-copy p {
  font-weight: 400;
}

.home p,
.home .circles span {
  font-size: var(--body-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--body-line-height);
}

.home .principles b,
.home .circles strong {
  font-family: var(--font-inter);
  font-size: var(--label-size);
  font-style: normal;
  font-weight: 700;
  line-height: var(--label-line-height);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home .principles b {
  color: var(--stone);
}

.home .circles strong {
  color: var(--ink);
}

.home footer > a:not(.mark),
.home footer p {
  font-family: var(--font-inter);
  font-size: var(--footer-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--footer-line-height);
}