:root {
    --gap-sm: 3px;
    --gap-md: 8px;
    --gap-lg: 36px;
    --gap: var(--gap-md);

    --orange-hsl: 22 100% 34%;
    --orange: hsla(var(--orange-hsl) / 1);
    --wine-red: #630000;
    --cat-iris-green: #649060;
}

/* ────────────────────── base ───────── */
html,
body {
    font-family: 'Courier New', Courier, monospace;
    background: var(--cat-iris-green);
    color: black;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: black;
}

p {
    margin: 0;
}

a {
    color: black;
}

body {
    padding: 0 16px;
    /* max-width: 800px; */
    /* margin: auto; */
}

input[type="text"] {
    /* border-bottom: 2px solid black; */
}

/* ────────────────────── header ──────────────────── */
header {
    display: flex;
    align-items: baseline;
    gap: var(--gap);
}

/* ────────────────────── catalog ──────────────────── */
.catalog {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding: 0;
}

.catalog-item {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.catalog-item .catalog-item-name {
    font-style: italic;
    /* margin-bottom: 0; */
}

.catalog-item .catalog-item-name[contenteditable="true"],
.catalog-item .catalog-item-info[contenteditable="true"] {
    border: 1px dotted white;
    border-radius: 3px;
}

.catalog-item img {
    max-width: 200px;
    height: 300px;
    object-fit: cover;
}

.catalog-item-gallery {
    display: flex;
    gap: var(--gap);
    overflow-x: scroll;
    margin-bottom: 0.25em;
}


@keyframes morphShape {
  0% {
    clip-path: polygon(
      4.91% 27.37%, 0% 0%, 25.88% 7.48%, 61.62% 0%, 94.19% 7.48%,
      88.38% 17.59%, 99.82% 37.93%, 90.67% 62.47%, 92.43% 89.63%,
      63.38% 100%, 40.49% 94.09%, 6.86% 95.80%, 11.80% 82.94%,
      3.32% 69.11%, 15.85% 48.03%, 4.91% 27.37%
    );
  }
  20% {
    clip-path: polygon(
      10% 0%, 30% 5%, 50% 0%, 70% 3%, 90% 10%,
      97% 30%, 100% 50%, 95% 70%, 90% 85%,
      70% 95%, 50% 100%, 30% 97%, 15% 90%,
      5% 75%, 0% 50%, 3% 25%
    );
  }
  40% {
    clip-path: polygon(
      8% 20%, 0% 0%, 35% 8%, 65% 0%, 92% 12%,
      100% 35%, 88% 60%, 95% 80%, 75% 100%,
      50% 95%, 25% 100%, 10% 85%, 0% 60%,
      12% 40%, 5% 25%
    );
  }
  60% {
    clip-path: polygon(
      5% 30%, 0% 10%, 20% 0%, 50% 5%, 80% 0%,
      95% 8%, 100% 25%, 98% 50%, 100% 75%,
      85% 92%, 60% 100%, 40% 95%, 20% 100%,
      8% 88%, 0% 65%, 3% 45%
    );
  }
  80% {
    clip-path: polygon(
      12% 25%, 2% 8%, 25% 0%, 48% 10%, 70% 2%,
      88% 15%, 100% 40%, 92% 65%, 98% 88%,
      75% 98%, 55% 90%, 35% 100%, 18% 92%,
      5% 75%, 0% 50%, 8% 35%
    );
  }
  100% {
    clip-path: polygon(
      4.91% 27.37%, 0% 0%, 25.88% 7.48%, 61.62% 0%, 94.19% 7.48%,
      88.38% 17.59%, 99.82% 37.93%, 90.67% 62.47%, 92.43% 89.63%,
      63.38% 100%, 40.49% 94.09%, 6.86% 95.80%, 11.80% 82.94%,
      3.32% 69.11%, 15.85% 48.03%, 4.91% 27.37%
    );
  }
}

img {
  /* animation: morphShape 12s ease-in-out infinite; */
}