.l-shell {
  display: grid;
  grid-template-areas:
    "topbar"
    "main"
    "rail"
    "foot";
  grid-template-rows: auto 1fr auto auto;
  min-height: 100vh;
  padding-top: 64px;
  background: var(--paper);
}

.l-topbar { grid-area: topbar; }
.l-body { display: contents; }

.l-main { grid-area: main; min-width: 0; animation: sheet-in .55s ease both; }
.l-rail { grid-area: rail; }
.l-foot { grid-area: foot; }

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .l-main { animation: none; }
}

.l-wrap {
  width: min(92%, 1220px);
  margin-inline: auto;
}

.l-section {
  padding: 48px 0;
}


@media (max-width: 767px) {
  .l-section {
    min-height: calc(100svh - 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.l-section-plain {
  padding: 48px 0;
  min-height: 0;
  display: block;
}

.section-title { margin-bottom: 16px; }
.section-lead {
  color: var(--stone);
  max-width: 62ch;
  margin-bottom: 32px;
}
.section-kicker {
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 16px;
}


.divider-fold {
  height: 30px;
  background: linear-gradient(90deg, transparent 49%, rgba(21,23,25,.10) 50%, transparent 51%);
}


.parallax {
  background-image: url('/dist/media/artizynt-packung.png');
  background-size: cover;
  background-position: center 38%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  color: var(--on-dark);
}
.parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
}
.parallax > * { position: relative; z-index: 1; }
.parallax h2, .parallax h3 { color: var(--on-dark); }

.band-shell { background: var(--shell); }
.band-ink { background: var(--ink-deep); color: var(--on-dark); }
.band-ink h2, .band-ink h3 { color: var(--on-dark); }
.band-ink .section-lead { color: var(--mist); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-deep);
  color: var(--on-dark);
  padding: 8px 16px;
  z-index: 1300;
}
.skip-link:focus { left: 8px; top: 8px; }


@media (min-width: 768px) {
  .l-section { padding: 64px 0; }
  .l-section-plain { padding: 64px 0; }
}


@media (min-width: 1024px) {
  .l-shell.has-rail {
    grid-template-areas:
      "topbar topbar"
      "main   rail"
      "foot   foot";
    grid-template-columns: minmax(0, 1fr) 372px;
    grid-template-rows: auto 1fr auto;
    column-gap: 48px;
    width: min(94%, 1440px);
    margin-inline: auto;
  }
  .l-shell.has-rail .l-wrap { width: 100%; }
  .l-shell.has-rail .l-foot { grid-column: 1 / -1; }
  .l-rail { padding: 24px 0 64px; }
  
  .l-rail > .l-wrap { height: 100%; }
}


.page-head {
  padding: 48px 0 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.page-head p { color: var(--stone); margin-top: 8px; font-size: .95rem; }

.prose { max-width: 78ch; padding-bottom: 32px; }
.prose h2 { margin: 32px 0 16px; font-size: 1.45rem; }
.prose h3 { margin: 24px 0 8px; font-size: 1.15rem; }
.prose p { margin-bottom: 16px; }
.prose ul { margin: 0 0 16px 0; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 24px; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 1px;
  background: var(--stone);
}
.prose a { text-decoration: underline; color: var(--ink-deep); }
.prose .stamp { font-size: .86rem; color: var(--stone); }
.prose address { font-style: normal; color: var(--ink); }


.workbench-intro { padding-top: 32px; }
.the-workshop { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.the-workshop p { max-width: 72ch; }
.the-workshop p + p { margin-top: 16px; }
.craft-list { padding-bottom: 32px; }
.material-index { background: var(--paper); }
.material-index .section-lead { max-width: 68ch; }
.guarantee-note { text-align: left; }
.from-raw-to-ready { border-top: 1px solid var(--graphite); }
.from-raw-to-ready .section-lead { margin-top: 32px; margin-bottom: 0; }
.write-to-us { background: var(--shell); border-left: 3px solid var(--ink-deep); padding-left: 24px; }
.asked-often { border-top: 1px solid var(--line); }