/*
 * The four designs, after the four cards in the business card scene of American Psycho.
 * A design applies to a card (data-design on the card) and to the website (data-design on <html>),
 * so a site is printed in the same type as its owner's card.
 */

/* “Bone. And the lettering is something called Silian Rail.” */
[data-design="bateman"] {
  --card-paper: var(--bone);
  --card-ink: var(--ink);
  --card-grain: var(--grain-fine);
  --card-font: var(--font-engraved);
  --card-weight: 600;

  --corner-size: 3.1cqw;
  --firm-size: 3.7cqw;
  --dept-size: 2.25cqw;
  --name-size: 4.9cqw;
  --title-size: 4.1cqw;
  --address-size: 2.75cqw;

  --turn: -2deg;
}

/* “Eggshell with Romalian type.” */
[data-design="vanpatten"] {
  --card-paper: #f3f1ea;
  --card-ink: #1d1c1b;
  --card-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  --card-font: "Tinos", "Times New Roman", Times, serif;

  --corner-size: 3.2cqw;
  --firm-size: 3.5cqw;
  --firm-weight: 700;
  --firm-case: uppercase;
  --dept-size: 2.6cqw;
  --name-size: 4.5cqw;
  --name-weight: 700;
  --name-case: uppercase;
  --title-size: 4cqw;
  --address-size: 2.4cqw;
  --address-case: uppercase;

  --turn: 1.6deg;
}

/* “Raised lettering, pale nimbus white.” */
[data-design="bryce"] {
  --card-paper: #ecebe7;
  --card-ink: #262624;
  --card-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .28 0 0 0 0 .28 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  --card-font: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* raised, not pressed: the shadow falls below the letters */
  --card-impression: 0 .1cqw 0 rgb(0 0 0 / .22), 0 -.05cqw 0 rgb(255 255 255 / .8);

  --corner-size: 3.2cqw;
  --firm-size: 3.4cqw;
  --firm-case: uppercase;
  --dept-size: 2.6cqw;
  --name-size: 5cqw;
  --name-caps: small-caps;
  --title-size: 3.6cqw;
  --address-size: 2.3cqw;
  --address-case: uppercase;

  --turn: -1.2deg;
}

/* “Look at that subtle off-white coloring.” */
[data-design="allen"] {
  --card-paper: #efe9d8;
  --card-ink: #3a362f;
  --card-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  /* Raleway SemiBold, Claas's choice */
  --card-font: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --card-weight: 600;
  --card-tracking: .02em;

  --corner-size: 3cqw;
  --firm-size: 3.4cqw;
  --dept-size: 2.3cqw;
  --name-size: 4.6cqw;
  --title-size: 3.6cqw;
  --address-size: 2.4cqw;

  --turn: 2.2deg;
}