@charset "UTF-8";
/* ------------------------------------------------------------------
   The home page only (linked from /index.html after global.css). Still no classes: everything hangs off the page's own
   structure.
   ------------------------------------------------------------------ */

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

main > h1 {
  margin-top: 0.6em;
  font-size: 2.9em;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
main > h1 + p {
  margin-top: 0.6em;
  font-family: var(--gh-font-display);
  font-size: 1.35em;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
main > h1 + p + p {
  color: var(--gh-ink-mid);
}
main > h1 ~ p:has(> a[href='/app/signup']:only-child) {
  margin-top: 1.5em;
}

/* Sections breathe a little more than article sections do. */
main > section {
  margin-top: 4em;
}
main > section > h2 {
  font-size: 1.9em;
  letter-spacing: -0.02em;
}

/* What It Sounds Like ---------------------------------------------
   The outer figure is the phone-ish card; each inner figure is one conversation, captioned with when it happened.
   Turns alternate, You first, the way the app lays them out: yours on the right in green, Geist's on the left on
   warm gray, with the G tile as its avatar. */

main figure:has(> figure) {
  margin: 1.75em 0 0;
  padding: 1.25em 1.25em 1em;
  border: 1px solid var(--gh-hairline);
  border-radius: var(--gh-radius-xl);
  background: var(--gh-field);
  box-shadow: var(--gh-shadow-md);
}
main figure > figure {
  margin: 0;
}
main figure > figure + figure {
  margin-top: 1.25em;
}

/* "Last month" / "Today": the date rule between conversations. */
main figure > figure > figcaption {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.9em;
  font-family: var(--gh-font-mono);
  font-size: 0.65em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gh-ink-soft);
  opacity: 1;
}
main figure > figure > figcaption::before,
main figure > figure > figcaption::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gh-hairline);
}

/* The earlier conversation reads as memory: receded to a pale bubble, not faded, so its words keep their contrast. */
main figure > figure:first-of-type blockquote p:nth-child(odd) {
  background: var(--gh-green-tint);
  color: var(--gh-green-deep);
}
main figure > figure:first-of-type blockquote p:nth-child(odd) mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath d='M0 2q2.5-2.5 5 0t5 0 5 0 5 0' fill='none' stroke='%2314893c' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

main figure > figure blockquote {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin: 0;
  padding: 0;
}
main figure > figure blockquote p {
  position: relative;
  max-width: 80%;
  margin: 0;
  padding: 0.6em 0.9em;
  border-radius: var(--gh-radius-xl);
  font-size: 0.95em;
  line-height: 1.4;
  -webkit-hyphens: manual;
  hyphens: manual;
}
main figure > figure blockquote p:nth-child(odd) {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  /* The deep green: paper text on the brand green is only 4.3:1. */
  background: var(--gh-green-deep);
  color: var(--gh-on-green);
}
main figure > figure blockquote p:nth-child(even) {
  align-self: flex-start;
  margin-left: 2.4em;
  border-bottom-left-radius: 4px;
  background: var(--gh-sunken);
  color: var(--gh-ink);
}

/* The speaker labels stay in the markup for screen readers and plain text. Yours is hidden; Geist's becomes the
   avatar. */
main figure > figure blockquote p:nth-child(odd) > strong:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
main figure > figure blockquote p:nth-child(even) > strong:first-child {
  position: absolute;
  left: -2.4em;
  bottom: 0;
  width: 1.8em;
  height: 1.8em;
  overflow: hidden;
  font-size: 1em;
  color: transparent;
  background: url(/favicon.svg) center / contain no-repeat;
}

/* The phrase that keeps coming back, underlined with the app's squiggle. */
main figure > figure blockquote mark {
  padding: 0 0 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath d='M0 2q2.5-2.5 5 0t5 0 5 0 5 0' fill='none' stroke='%2314893c' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")
    0 100% / 0.9em 0.22em repeat-x;
  color: inherit;
}
main figure > figure blockquote p:nth-child(odd) mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath d='M0 2q2.5-2.5 5 0t5 0 5 0 5 0' fill='none' stroke='%23fcfbf6' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

main figure:has(> figure) > figcaption {
  margin-top: 1.25em;
  text-align: center;
  font-size: 0.75em;
  color: var(--gh-ink-soft);
  opacity: 1;
}

/* What It Pays Attention To ----------------------------------------
   Each term and its description is a card; the term's link covers the whole card. The glyph is chosen by where the
   card links. */

main > section > dl {
  display: grid;
  gap: 0.9em;
  margin: 1.5em 0 0;
}
@media (min-width: 36rem) {
  main > section > dl {
    grid-template-columns: 1fr 1fr;
  }
  main > section > dl > div:last-child {
    grid-column: 1 / -1;
  }
}
main > section > dl > div {
  position: relative;
  padding: 1.1em 1.2em 1.2em;
  border: 1px solid var(--gh-hairline);
  border-radius: var(--gh-radius-lg);
  background: var(--gh-field);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}
main > section > dl > div:hover {
  border-color: var(--gh-green-line);
  box-shadow: var(--gh-shadow-md);
}
main > section > dl dt {
  display: flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--gh-font-display);
  font-size: 1.2em;
  letter-spacing: -0.01em;
}
main > section > dl dt a,
main > section > dl dt a:visited {
  color: var(--gh-ink);
  text-decoration: none;
}
main > section > dl dt a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--gh-radius-lg);
}
main > section > dl > div:hover dt a {
  color: var(--gh-green-deep);
}
main > section > dl dd {
  margin: 0.6em 0 0;
  padding: 0;
  font-size: 0.92em;
  color: var(--gh-ink-mid);
}
/* The link inside a description sits above the card-wide link. */
main > section > dl dd a {
  position: relative;
  z-index: 1;
}

main > section > dl dt::before {
  content: '';
  flex: none;
  width: 2.1em;
  height: 2.1em;
  border-radius: 9px;
  background: var(--gh-green-tint) center / 62% no-repeat;
}
main > section > dl dt:has(a[href='/defenses/'])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314893c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.6-3 8.1-7 9.8-4-1.7-7-5.2-7-9.8V5.8z'/%3E%3C/svg%3E");
}
main > section > dl dt:has(a[href='/object-relations/'])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314893c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='12' r='5'/%3E%3Ccircle cx='15.5' cy='12' r='5'/%3E%3C/svg%3E");
}
main > section > dl dt:has(a[href='/personality/'])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314893c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l8.5 4.5L12 12.5 3.5 8z'/%3E%3Cpath d='M3.5 12L12 16.5l8.5-4.5M3.5 16L12 20.5l8.5-4.5'/%3E%3C/svg%3E");
}
main > section > dl dt:has(a[href='/object-relations/selfobjects/'])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314893c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M8 20h8M4.5 7.5h15'/%3E%3Cpath d='M4.5 7.5L2 13h5zM19.5 7.5L17 13h5z'/%3E%3C/svg%3E");
}
main > section > dl dt:has(a[href='/inner-life/anniversary-reactions/'])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314893c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Ccircle cx='15' cy='15.2' r='1.6' fill='%2314893c'/%3E%3C/svg%3E");
}

/* What Geist Is Not: set apart as the one plain-spoken caution. ----- */

main > section:last-of-type {
  padding: 1.1em 1.3em;
  border-radius: var(--gh-radius-lg);
  background: var(--gh-sunken);
}
main > section:last-of-type > h2 {
  margin-top: 0;
  font-size: 1.3em;
}

/* Closing call to action ------------------------------------------- */

main > section:last-of-type ~ p {
  text-align: center;
}
main > section:last-of-type + p {
  margin-top: 3em;
}
main > section:last-of-type + p + p {
  margin-top: 0.75em;
  font-size: 0.9em;
  color: var(--gh-ink-soft);
}

@media (max-width: 30rem) {
  main > h1 {
    font-size: 2.3em;
  }
  main > h1 + p {
    font-size: 1.2em;
  }
  main figure:has(> figure) {
    padding: 1em 0.85em 0.85em;
  }
  main figure > figure blockquote p {
    max-width: 88%;
  }
}