/* The intro page at /. Its header and footer are narrower than the ones the
   rest of the site uses, so they keep their own rules here. */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
}
.nav {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--ink-secondary);
}
.nav a {
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover { color: var(--ink); border-color: var(--ink) }

.intro { padding: 64px 0 0 }
.intro h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.18;
  letter-spacing: -.022em;
  max-width: 860px;
}
.intro p {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-secondary);
  max-width: 600px;
  text-wrap: pretty;
}

.blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 64px 0 0;
}
.col { display: flex; flex-direction: column }

/* the block carries the logo alone; the words sit under it on the page */
.block {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
/* white on white, so the hairline is what makes it a shape */
.block--mod { background: var(--surface-1); border: 1px solid var(--line) }
.block--mod:hover { background: var(--surface-2) }
.block--fondee { background: var(--forest-ground); border: 1px solid var(--forest-ground) }
.block--fondee:hover { background: var(--forest-ground-hover); border-color: var(--forest-ground-hover) }

/* 108px measures 1.18 Fondee-ink to mark-ink, the balance set on the old mark;
   the brand sheet's floor is 24px */
.mod-mark { display: block; height: 108px; width: auto; color: var(--ink) }
.fondee-logo { display: block; height: 40px; width: auto }

/* the words: same ink under both blocks, links on one floor */
.col-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 24px;
}
.block-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.015em;
  color: var(--ink);
}
.block-line {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 380px;
  color: var(--ink-secondary);
}
.block-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.block-go svg { transition: transform .2s var(--ease) }
.col:hover .block-go svg { transform: translateX(3px) }

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 96px;
  padding: 28px 0 44px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-secondary);
}
.foot-nav { display: flex; gap: 22px; flex-wrap: wrap }
.foot a {
  color: var(--ink-secondary);
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot a:hover { color: var(--ink); border-color: var(--ink) }

@media (max-width: 880px) {
  .intro { padding-top: 48px }
  .intro h1 { font-size: 28px }
  .intro p { font-size: 16px }
  .blocks { grid-template-columns: 1fr; gap: 20px; margin-top: 48px }
  .mod-mark { height: 88px }
  .fondee-logo { height: 33px }
  .nav { gap: 16px; font-size: 13px }
  .foot { display: block; margin-top: 56px }
  .foot p + p { margin-top: 10px }
}

/* On a phone the two cards sit right below, so the header keeps only Contact
   and the name stays on one line. */
@media (max-width: 600px) {
  .nav a:not(:last-child) { display: none }
  .brand { white-space: nowrap }
}

@media (prefers-reduced-motion: reduce) {
  .col:hover .block-go svg { transform: none }
}

/* First impression, once per visit (see /assets/js/intro-motion.b619706fb1.js).
   The headline darkens word by word from the tertiary ink; only colour
   changes, nothing moves. The paragraph
   follows, then the two cards settle 8px. About two and a half seconds in
   all, slowed at Marie's request so it can be seen: far longer than an
   interface would allow, acceptable because it is seen once per visit. */
.intro-play .intro h1 .w {
  color: var(--ink-tertiary);
  transition: color 600ms ease;
  transition-delay: calc(var(--i) * 110ms);
}
.intro-play.intro-go .intro h1 .w { color: var(--ink) }

.intro-play .intro p {
  opacity: 0;
  transition: opacity 700ms linear 900ms;
}
.intro-play .blocks .col {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: 1400ms;
}
.intro-play .blocks .col + .col { transition-delay: 1550ms }
.intro-play.intro-go .intro p,
.intro-play.intro-go .blocks .col { opacity: 1; transform: none }

/* reduced motion: one short fade, no sweep and no travel */
.intro-fade main { opacity: 0; transition: opacity 180ms linear }
.intro-fade.intro-go main { opacity: 1 }