/* Korpora public page — „What can be designed?“: every kind of furniture as the engine draws it from the front. */

/* furniture types: every kind as the engine draws it from the front, one scale for all, bottoms on one line */
.lineup {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}
.lineup-group h3 {
  font-size: 1.05rem;
  padding-bottom: 8px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--ink);
}
.lineup-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 26px clamp(22px, 3.4vw, 46px);
}
.lineup-row li {
  display: grid;
  gap: 4px;
  justify-items: start;
}
.elev {
  /* the fronts and the oak top are light boards in both themes, so what is drawn on them stays graphite; the legs,
     the carcass outline and the floor line sit on the page and follow its ink */
  --on-board: #34302f;
  --on-board-2: #6f6963;
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
  margin-bottom: 8px;
  border-bottom: 1.5px solid var(--ink);
}
.elev .l-body {
  fill: var(--panel);
  stroke: var(--ink);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.elev .l-front {
  fill: #e8dbc9;
  stroke: var(--on-board);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.elev .l-leg {
  fill: var(--ink);
}
.elev .l-top {
  fill: var(--oak);
  stroke: var(--on-board);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.elev .l-open,
.elev .l-mattress {
  fill: none;
  stroke: var(--on-board-2);
  stroke-width: 0.8px;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
.elev .l-handle {
  stroke: var(--on-board);
  stroke-width: 2px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.lineup-name {
  font-weight: 620;
}
.lineup-note {
  margin-top: 22px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.rules {
  margin-top: 30px;
  max-width: var(--measure);
  color: var(--ink-2);
}

/* a narrow phone: two small pieces still share a row (the wall unit beside the base unit, as on a wider screen), so the
   row does not turn into a column of single drawings with gaps; the longer Italian range text gets a little smaller */
@media (max-width: 420px) {
  .lineup-row {
    column-gap: 16px;
  }
  .lineup-row small {
    font-size: 0.78rem;
  }
}