* {
        box-sizing: border-box;
      }

      body {
        /* The artwork uses contain in a viewport-sized layer. Reserve its logo
           area in the document before placing text or an expanding form. */
        --artwork-clearance: min(43.52vw, 64.86svh);
        position: relative;
        isolation: isolate;
        margin: 0;
        min-height: 100vh;
        min-height: 100svh;
        overflow-x: hidden;
        font-family: Georgia, "Times New Roman", serif;
        color: #d9a83f;
        background: #0b0503 url("achter.webp") center / cover no-repeat;
      }

      body::before,
      body::after {
        content: "";
        position: fixed;
        pointer-events: none;
      }

      body::before {
        inset: -24px;
        z-index: -2;
        background:
          linear-gradient(rgba(8, 4, 2, 0.22), rgba(8, 4, 2, 0.5)),
          url("achter.webp") center / cover no-repeat;
        filter: blur(10px);
        opacity: 0.9;
        transform: scale(1.04);
      }

      body::after {
        position: absolute;
        inset: 0 0 auto;
        height: 100vh;
        height: 100svh;
        z-index: -1;
        background:
          radial-gradient(circle at 50% 42%, rgba(255, 198, 84, 0.1), transparent 35%),
          linear-gradient(rgba(8, 4, 2, 0.02), rgba(8, 4, 2, 0.16)),
          url("background.webp") center top / contain no-repeat;
      }

      @media (max-aspect-ratio: 1/1) {
        body {
          --artwork-clearance: min(108.6vw, 60.61svh);
        }

        body::after {
          background:
            radial-gradient(circle at 50% 42%, rgba(255, 198, 84, 0.1), transparent 35%),
            linear-gradient(rgba(8, 4, 2, 0.02), rgba(8, 4, 2, 0.16)),
            url("backgroundhigh.webp") center top / contain no-repeat;
        }
      }

      @media (min-aspect-ratio: 16/9) {
        body {
          /* The wide composition includes a guitar beneath the logo. */
          --artwork-clearance: min(39.78vw, 93.75svh);
        }

        body::after {
          background:
            radial-gradient(circle at 50% 42%, rgba(255, 198, 84, 0.1), transparent 35%),
            linear-gradient(rgba(8, 4, 2, 0.02), rgba(8, 4, 2, 0.16)),
            url("backgroundwide.webp") center top / contain no-repeat;
        }
      }

      main {
        min-height: 100vh;
        min-height: 100svh;
        display: grid;
        align-content: start;
        align-items: start;
        justify-items: center;
        padding: clamp(18px, 5vw, 56px);
        padding-top: calc(var(--artwork-clearance) + clamp(24px, 3vw, 40px));
        padding-bottom: clamp(28px, 8vh, 82px);
      }

      .hero {
        width: min(680px, 100%);
        padding: clamp(16px, 3vw, 28px) clamp(18px, 4vw, 42px);
        text-align: center;
        border: 1px solid rgba(226, 174, 65, 0.16);
        border-radius: 8px;
        background:
          linear-gradient(145deg, rgba(28, 11, 6, 0.22), rgba(8, 4, 2, 0.08)),
          radial-gradient(circle at 50% 0%, rgba(230, 170, 59, 0.08), transparent 58%);
        box-shadow:
          inset 0 1px 0 rgba(255, 232, 170, 0.1),
          0 18px 40px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(0.6px);
      }

      h1 {
        width: 100%;
        margin: 0 auto;
        font-size: clamp(1.55rem, 3.4vw, 3rem);
        line-height: 1;
        font-weight: 900;
        text-align: center;
        text-wrap: balance;
        overflow-wrap: normal;
        letter-spacing: 0;
        color: #d9a83f;
        background: linear-gradient(180deg, #fff1a8 0%, #d9a83f 34%, #8f4f16 72%, #3f1e0b 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.46));
        text-shadow:
          0 1px 0 #ffe9a4,
          0 2px 0 #d39331,
          0 3px 0 #4b260d,
          0 8px 13px rgba(0, 0, 0, 0.65),
          0 0 18px rgba(217, 168, 63, 0.2);
      }

      h1 span {
        display: block;
      }

      h1 span + span {
        margin-top: 0.16em;
        font-size: 0.58em;
        letter-spacing: 0.08em;
      }

      @media (max-width: 560px) {
        .hero {
          padding-block: 18px;
        }

        h1 {
          font-size: clamp(1.35rem, 8vw, 2.2rem);
        }

        h1 span + span {
          letter-spacing: 0.04em;
        }
      }

      .preview-access {
        margin: 26px auto 0;
        max-width: 430px;
        font-family: Arial, sans-serif;
        font-size: .875rem;
        line-height: 1.6;
        color: #f4deb0;
      }

      .preview-access a { color: inherit; }
      .preview-access summary, .preview-access a {
        cursor: pointer;
        text-underline-offset: 4px;
        text-decoration: underline;
      }

      .preview-access form {
        margin-top: 18px;
        text-align: left;
      }

      .preview-access label { display: block; margin-bottom: 6px; }
      .preview-fields { display: flex; gap: 8px; }
      .preview-fields input {
        width: 100%; min-width: 0; padding: 12px;
        border: 1px solid #af833e; border-radius: 4px;
        background: rgba(12, 6, 3, .84); color: #fff4dc;
        font: inherit; font-size: 1rem;
      }
      .preview-fields button {
        flex-shrink: 0; padding: 12px 18px;
        border: 1px solid #e6bc66; border-radius: 4px;
        background: #dfb65f; color: #291608;
        font: inherit; font-weight: 700; cursor: pointer;
      }
      .preview-fields button:hover { background: #f1d38e; }
      .preview-access :focus-visible { outline: 2px solid #fff1b6; outline-offset: 4px; }
      .preview-note { margin: 12px 0 0; color: #decbae; font: .75rem/1.6 Arial, sans-serif; }
      .preview-error { margin: 12px 0 0; color: #ffd1ba; }
      @media (max-width: 380px) { .preview-fields { flex-direction: column; } }