body {
  text-align: center;
  max-width: 13in;
  margin-inline: auto;
  padding: var(--d-m);
  /*
  background-color: #e0cebd;
   */
  background-repeat: repeat;
  background-color: #E6DDD4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Crect width='32' height='16' fill='%23E0D5C7'/%3E%3Cpath d='M0 0h32v1H0zM0 8h32v1H0zM16 1v7h1V1zM0 9v7h1V9zM31 9v7h1V9z' fill='%23ECE5DC'/%3E%3Cpath d='M0 7h32v1H0zM0 15h32v1H0zM15 1v7h1V1zM0 9v7h0V9zM30 9v7h1V9z' fill='%23C8BBAA' fill-opacity='0.4'/%3E%3C/svg%3E");
  background-image: url("ba.gif");
}
main {
  display: flex;
  flex-direction: column;
  gap: var(--d-m);

  > * {
    min-width: 0;
  }
}

h1 {
  a {
    color: var(--c-mud);
    text-decoration: none;
  }
}

section[aria-label="Introduction"] {
  margin: var(--d-s);
  padding: var(--d-s);
  text-align: left;
  background: var(--c-pale);
  border: 1px solid var(--c-border);
  outline: var(--d-s) solid var(--c-pale);
  p {
    margin-top: var(--d-s);
  }
}

form {
  padding: var(--d-s);

  border: 5px double var(--c-text);
  background: var(--c-pale);

  textarea {
    font-family: var(--monospace);
    font-weight: bold;
    width: 100%;
  }
  fieldset {
    min-width: 0;

    input[type="file"] {
      max-width: 100%;
    }

    p {
      label {
        font-family: var(--monospace);
        font-weight: bold;
      }
    }
  }
  button[type="submit"] {
    appearance: auto;
    background-color: var(--c-pale);
    border: 2px outset buttonborder;
    color: var(--c-wine);
    font-weight: bold;
    margin-top: var(--d-s);
    padding: 2px 6px;
  }
}

section[aria-label="Gallery"] {
  display: flex;
  flex-direction: column;
  gap: var(--d-s);
}

article {
  margin: var(--d-s);
  padding: var(--d-s);
  background: var(--c-mint);
  border: 1px solid var(--c-border);
  outline: var(--d-s) solid var(--c-mint);
  display: flow-root;
  text-align: left;
  font-family: var(--old-style);

  > header h3 {
    color: var(--c-mud);
    display: block;
    font-size: inherit;
    font-weight: bold;

    &::before {
      content: ">> ";
    }
  }

  > figure {
    float: left;
    width: min(30%, 320px);
    margin: 0 var(--d-s) var(--d-s) 0;


    background-image: url("linen-tile.png");
    background-repeat: repeat;
    img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 320px;
      margin: 0 auto;
    }
  }

  > section {
    clear: both;
  }
}

p {
  text-align: left;
}

@media (max-width: 600px) {
  article > figure {
    float: none;
    width: 100%;
    margin-right: 0;
  }

  article > figure img {
    margin-inline: auto;
  }
}