:root {
--bg-l: #F3EAD7;
  --bg-d: #1E1812;
  --text-l: #2E2418;
  --text-d: #EADCC0;
  --accent: #BE562D;

  --font-prose: 'Petrona', Georgia, serif;
  --font-title: 'Bona Nova SC', Georgia, serif;
  --font-heading: 'Petrona', Georgia, serif;
}

article h1 {
  padding-bottom: var(--space-xl);
}

article p {
 width: 50ch;
 max-width: 90%;
}

p {
 font-weight: 300;
}

a {
  font-weight: 100;
}

article > p:first-of-type::first-letter {
  initial-letter: 3;
  font-family: var(--font-title);
  margin-right: 0.1em;
}
@supports not (initial-letter: 3) {
  article > p:first-of-type::first-letter {
    float: left;
    font-size: 3em;
    line-height: 0.8;
    padding-right: 0.08em;
  }
}

.breakthrough-home {
  --bg: #EFEFEB;
  --text: #1A1A1C;
  --shade: 20%;
  --font-prose: 'Newsreader', Georgia, serif;
  position: relative;
  isolation: isolate;
  color: var(--text);
  background-color: var(--bg);
  margin-block: var(--space-md);
  padding-block: var(--space-md);
}
@media (prefers-color-scheme: dark) {
  .breakthrough-home {
    --bg: #111114;
    --text: #DDDDE4;
    --shade: 80%;
  }
}

.breakthrough-home p  {
  width: 70ch;
  font-weight: 450;
  max-width: 100%;
  text-align: justify;
  hyphens: auto;
  
}

.breakthrough-home::before {
  content: "";
  position: absolute;
  inset: 0 -100vmax;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg), black calc(var(--shade) * 1.5)) 0%,
    var(--bg) var(--space-xs),
    var(--bg) calc(100% - var(--space-md)),
    color-mix(in srgb, var(--bg), black var(--shade)) 100%
    );
  }

body { overflow-x: clip; }