/* Tossed cards: a postcard zine's board. The cards are laid loosely, each a little turned; brushing past one with
   the pointer throws its picture the way the pointer was going, and it comes back to its place. */
:root {
  --board: #f1ece3;         /* the board */
  --ink: #23201c;           /* text */
  --edge: clamp(18px, 3.4vw, 52px);
  --card: clamp(140px, 14vw, 214px);     /* a card's width */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  /* a turned card at the edge, or one in flight, must not make the page scroll sideways */
  overflow-x: clip;
  background: var(--board);
  color: var(--ink);
  font-family: 'DM Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100svh;
}

a {
  color: inherit;
  text-decoration: none;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px var(--edge);
  font-size: 15px;
}

.brand {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 25px;
  font-style: italic;
}

.bar__nav {
  display: flex;
  gap: clamp(14px, 2.4vw, 34px);
}

.bar__nav a {
  transition: opacity 0.2s;
}

@media (hover: hover) {
  .bar__nav a:hover {
    opacity: 0.55;
  }
}

.bar a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- the board */
.board {
  padding: 1vh var(--edge) 40px;
}

.intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 40px;
  margin-bottom: clamp(18px, 3vh, 40px);
}

.intro__title {
  max-width: 13em;
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(40px, 5.6vw, 92px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.intro__title em {
  color: #c74b37;
}

.intro__hint {
  margin: 0 0 8px;
  font-size: 14px;
  opacity: 0.7;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 34px);
}

/* the place on the board: turned a little, a little off the line */
.card {
  width: var(--card);
  margin: 0;
  transform: translateY(var(--y)) rotate(var(--r));
}

/* what gets thrown: the picture with its white border and caption */
.card__art {
  padding: 8px 8px 0;
  border-radius: 10px;
  background: #fffdf8;
  box-shadow: 0 1px 1px rgba(35, 32, 28, 0.08), 0 10px 24px -10px rgba(35, 32, 28, 0.35);
  will-change: transform;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.card svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.card figcaption {
  padding: 9px 2px 11px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(14px, 1.2vw, 17px);
  font-style: italic;
  opacity: 0.85;
}

.card figcaption span {
  font-style: normal;
}

@media (max-width: 760px) {
  :root {
    --card: calc((100vw - 2 * var(--edge) - 16px) / 2);
  }

  .bar__nav {
    display: none;
  }

  .cards {
    gap: 22px 16px;
  }
}

/* sul telefono con lo schermo basso (la casella dell'anteprima, 341 per 410) le sette cartoline stanno su due righe
   da quattro, più piccole, e tutta la bacheca sta nella finestra; sotto la cartolina resta solo il nome del posto */
@media (max-width: 760px) and (max-height: 520px) {
  :root {
    --card: calc((100vw - 2 * var(--edge) - 3 * 10px) / 4);
  }

  .bar {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .board {
    padding-top: 0;
    padding-bottom: 10px;
  }

  .intro {
    gap: 6px;
    margin-bottom: 14px;
  }

  .intro__title {
    font-size: clamp(28px, 9vw, 40px);
  }

  .intro__hint {
    margin: 0;
  }

  .cards {
    gap: 14px 10px;
  }

  .card__art {
    padding: 5px 5px 0;
    border-radius: 7px;
  }

  .card svg {
    border-radius: 3px;
  }

  /* «Greetings from» non ci sta in una cartolina larga un quarto: resta il posto */
  .card figcaption {
    padding: 5px 1px 6px;
    font-size: 0;
    line-height: 1.15;
  }

  .card figcaption span {
    display: block;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}