.main {
    overflow-x: hidden;
}

/* The home page's angular trunk, running down the left edge into the footer's roots, with the fork
   at its top reaching up into the navbar's foliage. Everything is the home page's artwork at 80%:
   the trunk tile is 112px wide (its bottom, x 12.3-136.9 of 140, is then 100px wide and lands on the
   top of the roots, x -70 to 30, see #footer-trunk below), and the fork is 720px by 208px, its base
   on the top of the trunk, which is what the room above the text is for (the trunk starts 2px early, under the fork, so no seam shows between them). The trunk runs from the
   fork's base to the footer, its repeats stretched slightly to fit a whole number, so it ends in the
   same shape it starts in. It is drawn twice, the second copy 2px lower, so that the hairline seams
   stretched repeats can leave on a screen (phones, mostly) are covered by the other copy. */
.fullpage-main {
    position: relative;
    padding-bottom: 120px;
}

.fullpage-main::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 206px;
    bottom: 0;
    left: -79.8px;
    width: 112px;
    background:
        url("/img/trunk-tile.svg") left top / 112px 480px,
        url("/img/trunk-tile.svg") left 2px / 112px 480px;
    background-repeat: no-repeat round;
}

.fullpage-main::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: -383.8px;
    width: 720px;
    height: 208px;
    background: url("/img/trunk-fork.svg") 0 0 / 720px 208px no-repeat;
    pointer-events: none;
}

.fullpage-main-inner {
    /* In front of the trunk and its fork, which take the room above the text */
    position: relative;
    z-index: 1;
    padding-top: 200px;
    padding-left: 90px;
    padding-right: 5%;
    max-width: 800px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-ink-soft);
}

.fullpage-main-inner h1 {
    margin: 0 0 18px;
    font-size: 2em;
    line-height: 1.2;
    color: var(--color-ink);
}

.fullpage-main-inner h2 {
    margin: 32px 0 10px;
    font-size: 1.3em;
    line-height: 1.3;
    color: var(--color-ink);
}

.fullpage-main-inner li + li {
    margin-top: 8px;
}

.fullpage-main-inner code {
    font-size: 0.9em;
}

/* A .dlb script card, as on the home page, sitting in the text column */
.fullpage-main-inner .script-card {
    max-width: 560px;
    margin: 20px 0 24px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

#footer-trunk {
    left: 0px;
    margin-left:-270px;
}

.license-text {
    padding-left: 40px;
}

.about-separator {
    margin-left: -100px;
    height: 125px;
    width: 500px;
    background-image: url("/img/branch-thin-right.svg");
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 500px 125px;
    margin-bottom: 20px;
}

/* Each contributor: its logo card (as on the home page) beside a description */
.about-contributor {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin: 22px 0;
}

.about-contributor .contributor-card {
    flex: 0 0 200px;
    box-sizing: border-box;
}

.about-contributor p {
    flex: 1;
    margin: 0;
}

/* The About page has one H1 (its title); its sections are H2s that look like the title */
.fullpage-main-inner h2.about-header {
    margin: 0 0 18px;
    font-size: 2em;
    line-height: 1.2;
}

/* Keep a heading reached through a link (e.g. /about/#story) clear of the fixed navbar */
.about-header,
#license {
  scroll-margin-top: calc(var(--val-menu-bar-height) + 40px);
}

/* The Matomo opt-out form on the Privacy page */
.matomo-opt-out-box {
  margin: 16px 0 8px;
  padding: 14px 18px;
  border: 1px solid var(--color-line);
  border-left: 6px solid var(--color-foliage);
  border-radius: 8px;
  background: #fff;
}

.matomo-opt-out-box p {
  margin-top: 0;
}

.matomo-opt-out-box input {
  margin-right: 8px;
}