@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600&display=swap");

:root {
  --ink: #30251f;
  --ink-soft: #66564b;
  --paper: #f4eadb;
  --cream: #ead9c2;
  --sand: #d8bea0;
  --clay: #b97d62;
  --terracotta: #a85f43;
  --rust: #743d2b;
  --rose: #b96f55;
  --rose-deep: #743d2b;
  --sage: #8d9278;
  --coral: #d8876f;
  --line: rgba(48, 37, 31, 0.22);
  --display: "Fraunces", Georgia, serif;
  --body: "General Sans", "Helvetica Neue", sans-serif;
}

html,
body {
  background: var(--paper);
}

body {
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
}

body::before {
  opacity: 0.055;
  mix-blend-mode: multiply;
}

::selection {
  color: var(--paper);
  background: var(--terracotta);
}

h1,
h2,
h3,
blockquote,
.wordmark,
.footer-wordmark {
  font-family: var(--display);
  font-optical-sizing: auto;
}

.kicker,
.site-nav nav,
.button,
.hero-primary,
.hero-secondary,
.card-topline,
.footer-meta {
  font-family: var(--body);
  font-weight: 500;
}

.hero-background,
.collage-large img,
.collage-small img,
.connection-image img,
.inquiry-image img {
  filter: sepia(0.12) saturate(0.72) contrast(0.94) brightness(0.94);
}

.hero {
  background: var(--rust);
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(43, 28, 20, 0.72) 0%, rgba(73, 43, 30, 0.37) 43%, rgba(70, 43, 31, 0.08) 74%),
    linear-gradient(0deg, rgba(43, 25, 17, 0.72) 0%, rgba(75, 45, 31, 0.08) 58%, rgba(53, 35, 26, 0.25) 100%);
}

.hero h1,
.hero h1 em,
.hero-manifesto {
  color: #f7eddf;
}

.hero-primary {
  color: var(--rust);
  background: #f3e7d6;
}

.hero-primary:hover {
  background: var(--sand);
}

.statement-section {
  background:
    radial-gradient(circle at 78% 22%, rgba(216, 135, 111, 0.28), transparent 28%),
    var(--terracotta);
}

.introduction {
  background:
    radial-gradient(circle at 9% 86%, rgba(141, 146, 120, 0.12), transparent 24%),
    var(--paper);
}

.collage-small {
  border-color: var(--paper);
}

.body-copy,
.method-list p,
.training-columns {
  color: var(--ink-soft);
}

.introduction blockquote,
.training-credentials {
  border-color: var(--terracotta);
}

.button-dark {
  background: var(--rust);
}

.button-dark:hover {
  background: var(--terracotta);
}

.design-explainer {
  color: var(--paper);
  background:
    radial-gradient(circle at 88% 10%, rgba(185, 125, 98, 0.18), transparent 26%),
    #35271f;
}

.design-explainer-heading h2 em,
.design-foundations span {
  color: var(--coral);
}

.design-deck,
.design-prose {
  color: #cfbdaa;
}

.training-section {
  background:
    radial-gradient(circle at 8% 92%, rgba(116, 61, 43, 0.08), transparent 30%),
    var(--sand);
}

.training-mark {
  color: var(--rust);
  border-color: rgba(116, 61, 43, 0.52);
}

.working-together {
  background: rgba(247, 237, 223, 0.78);
  box-shadow: 0 24px 70px rgba(91, 57, 40, 0.08);
}

.working-together .kicker,
.client-words .kicker {
  color: var(--rust);
}

.readings {
  background:
    linear-gradient(135deg, rgba(255, 250, 241, 0.24), transparent 45%),
    var(--cream);
}

.reading-card:hover,
.reading-card.featured {
  color: var(--paper);
  background: var(--rust);
}

.method {
  background:
    radial-gradient(circle at 92% 84%, rgba(141, 146, 120, 0.13), transparent 25%),
    var(--paper);
}

.connection-feature,
footer {
  background: #34271f;
}

.connection-copy > p:not(.kicker):not(.connection-price) {
  color: #d0bdac;
}

.client-words {
  background:
    radial-gradient(circle at 50% 50%, rgba(216, 135, 111, 0.13), transparent 33%),
    #efe0cc;
}

.inquiry {
  background: var(--terracotta);
}

.form-wrap {
  background: #ead9c2;
}

.form-wrap input:focus,
.form-wrap textarea:focus {
  border-color: var(--rust);
}

.footer-meta {
  color: #b9a18d;
}

.testimonials-page {
  color: var(--ink);
  background:
    radial-gradient(circle at 90% 8%, rgba(168, 95, 67, 0.15), transparent 27%),
    linear-gradient(145deg, var(--paper), #e5cfb6);
  font-family: var(--body);
}

.testimonials-page .site-nav {
  color: var(--ink);
}

.testimonials-page .wordmark,
.testimonials-page .footer-wordmark,
.testimonials-hero h1,
.testimonial-card blockquote,
.testimonials-cta h2 {
  font-family: var(--display);
}

.testimonials-page .site-nav nav,
.testimonials-page footer,
.testimonials-page .footer-meta,
.testimonials-cta .button {
  font-family: var(--body);
}

.testimonials-hero h1 {
  font-weight: 400;
  letter-spacing: -0.045em;
}

.testimonials-hero::after {
  color: rgba(116, 61, 43, 0.12);
}

.testimonial-card {
  border-color: rgba(73, 49, 36, 0.16);
  background: rgba(247, 237, 223, 0.78);
}

.testimonial-card:nth-child(2) {
  background: #d4ad90;
}

.testimonial-card:nth-child(3) {
  background: var(--rust);
}

.testimonial-card:nth-child(4) {
  background: #ead8bf;
}

.testimonial-card:last-child {
  background: #aeb098;
}

.testimonial-card blockquote {
  font-weight: 300;
  line-height: 1.55;
}

.testimonials-cta {
  background: var(--terracotta);
}

@media (max-width: 760px) {
  .hero::before {
    background:
      linear-gradient(90deg, rgba(52, 32, 23, 0.43), rgba(52, 32, 23, 0.06)),
      linear-gradient(0deg, rgba(43, 25, 17, 0.86) 0%, rgba(63, 38, 27, 0.28) 64%, rgba(53, 35, 26, 0.3) 100%);
  }
}

.footer-legal {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(185, 161, 141, 0.2);
  color: #a08a77;
  font-family: var(--body);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.8;
  text-transform: uppercase;
}