/*
 * A business card. The layout is the same for every card; each design in cards.css
 * only sets the custom properties used here: paper, ink, typeface and type sizes.
 */

.card {
  /* where js/table.js puts the card in the lineup, relative to the middle of the table */
  --in-slot: translate(var(--slot-x, 0px), var(--slot-y, 0px)) scale(var(--slot-scale, 1)) rotateX(24deg) rotateZ(var(--turn, 0deg));

  /*
   * Designs only set what they change. Custom properties inherit, so without this a card
   * would pick up whatever the page's own design (on <html>) sets and its own design doesn't.
   */
  --card-weight: initial;
  --card-tracking: initial;
  --card-impression: initial;
  --firm-weight: initial;
  --firm-case: initial;
  --name-weight: initial;
  --name-case: initial;
  --name-caps: initial;
  --title-weight: initial;
  --address-weight: initial;
  --address-case: initial;

  position: relative;
  width: min(100%, 36rem);
  aspect-ratio: 1.75; /* keep in sync with CARD_RATIO in js/geometry.js */
  container-type: inline-size;
  transform-style: preserve-3d;
  color: var(--card-ink);
  font-family: var(--card-font);
  font-weight: var(--card-weight, 400);
  letter-spacing: var(--card-tracking, 0);
  text-decoration: none;
}

/*
 * The paper gets a 1px transparent border with the fill clipped inside it.
 * Tilted in 3D, the edge then blends into the border instead of turning into a stair-stepped line.
 */
.card__paper {
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background-color: var(--card-paper);
  background-clip: padding-box;
  backface-visibility: hidden;
  box-shadow: 0 22px 40px rgb(0 0 0 / .5);
}

.card__paper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--card-grain);
}

.card__face {
  position: absolute;
  inset: 0;
  text-shadow: var(--card-impression, 0 .07cqw 0 rgb(255 255 255 / .75), 0 -.05cqw 0 rgb(0 0 0 / .16));
  font-feature-settings: "onum", "kern";
}

.card__face > * {
  position: absolute;
  margin: 0;
}

.card__corner {
  top: 9%;
  line-height: 1.2;
  left: 7%;
  font-size: var(--corner-size);
}

.card__firm {
  top: 8%;
  right: 7%;
  line-height: 1.05;
  text-align: right;
  font-size: var(--firm-size);
  font-weight: var(--firm-weight, inherit);
  text-transform: var(--firm-case, none);
}

.card__firm small {
  display: block;
  font-size: var(--dept-size);
  font-weight: var(--card-weight, 400);
  text-transform: none;
}

.card__person {
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  line-height: 1.12;
  text-align: center;
}

.card__name {
  display: inline-block;
  font-size: var(--name-size);
  font-weight: var(--name-weight, inherit);
  font-variant-caps: var(--name-caps, normal);
  text-transform: var(--name-case, none);
}

.card__title {
  font-size: var(--title-size);
  font-weight: var(--title-weight, inherit);
}

.card__address {
  left: 0;
  right: 0;
  bottom: 9%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1.6cqw;
  line-height: 1.2;
  white-space: nowrap;
  font-size: var(--address-size);
  font-weight: var(--address-weight, inherit);
  text-transform: var(--address-case, none);
}

.card__address > * {
  display: inline-block;
}