:root {
  --bg: #141312;
  --bg-glow: #2a2825;
  --paper: #efeeeb;          /* bone */
  --paper-shade: #dedcd8;
  --ink: #32302e;            /* sampled from the film card: warm dark grey, never black */
  --ink-soft: #4b4744;
  --muted: #7d776e;
  --type: "Cinzel", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background:
    radial-gradient(ellipse at 50% 42%, var(--bg-glow) 0%, var(--bg) 62%);
  background-color: var(--bg);
  color: var(--paper);
  font-family: var(--type);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  perspective: 1400px;
}

/* ---------- Card ---------- */

.tilt {
  width: min(92vw, 640px);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  animation: arrive 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.tilt.tracking { transition: transform .08s linear; }

@keyframes arrive {
  from { opacity: 0; transform: translateY(24px) rotateX(18deg); }
  to   { opacity: 1; }
}

.card {
  position: relative;
  width: 100%;
  aspect-ratio: 3.5 / 2;
  container-type: inline-size;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.3,.7,.2,1);
  cursor: pointer;
  outline: none;
}
.card.flipped { transform: rotateY(180deg); }
.card:focus-visible .face { box-shadow: 0 0 0 2px var(--muted), 0 30px 60px rgba(0,0,0,.55); }

.face {
  position: absolute;
  inset: 0;
  border-radius: .6cqw;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: var(--ink);
  background:
    linear-gradient(115deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%, rgba(0,0,0,.04) 100%),
    var(--paper);
  box-shadow:
    inset 0 0 0 .5px rgba(0,0,0,.06),
    0 1px 0 var(--paper-shade),           /* tasteful thickness */
    0 2px 0 #d2cfc9,
    0 3px 0 #c4c0b9,
    0 4px 1px rgba(0,0,0,.3),
    0 30px 60px rgba(0,0,0,.55),
    0 12px 20px rgba(0,0,0,.35);
}

/* cotton fibre: noise lit from the top left, so the paper has real tooth */
.face::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .4;
  mix-blend-mode: multiply;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feDiffuseLighting lighting-color='%23fff' surfaceScale='.9' diffuseConstant='1'><feDistantLight azimuth='225' elevation='55'/></feDiffuseLighting></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}

/* soft mottling across the sheet */
.face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-size: cover;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='400' preserveAspectRatio='none'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.008 .014' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .6  0 0 0 0 .58  0 0 0 0 .54  0 0 0 -1.1 1'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
}

.back { transform: rotateY(180deg); }

/* type is set in the card's own width so it scales like real print */
.front > *, .back > * { position: absolute; z-index: 1; }
.face > .sheen { z-index: 2; }

/* letterpress: ink pressed into the sheet, light catching the lower lip of each stroke */
.top, .person, .address, .actions, .monogram {
  text-shadow:
    0 .07cqw .03cqw rgba(255,255,255,.85),
    0 -.04cqw .03cqw rgba(0,0,0,.28);
}

.top {
  top: 5.3cqw; left: 6cqw; right: 5.8cqw;
  display: flex;
  justify-content: space-between;
  align-items: center;                  /* number sits on the middle of the firm block */
}

.phone {
  font-size: 3cqw;
  color: var(--ink);
  text-decoration: none;
}

.firm {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  white-space: nowrap;
}
.firm-name { font-size: 3.3cqw; }
/* script.js spreads the letters so both lines start and end flush, like Pierce & Pierce */
.firm-sub  {
  font-size: 2.45cqw;
  margin-top: .2cqw;
  letter-spacing: var(--sub-spacing, 0);
  margin-right: calc(var(--sub-spacing, 0em) * -1);
}

.person {
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  line-height: 1.15;
}
.name {
  font-size: 3.75cqw;
  font-weight: 700;
}
.title {
  font-size: 2.75cqw;
  font-weight: 700;
}

.address {
  left: 0; right: 0; bottom: 4.4cqw;
  text-align: center;
  font-size: 2.65cqw;
  line-height: 1.3;
  white-space: nowrap;
}
.address a { color: inherit; text-decoration: none; }

/* it even has a watermark */
.watermark {
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 46cqw;
  line-height: 1;
  color: var(--ink);
  opacity: calc(.01 + var(--glare, 0) * .035);
  pointer-events: none;
  transition: opacity .3s;
}

.sheen {
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: var(--glare, 0);
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,.25) 25%,
    rgba(255,255,255,0) 55%);
  transition: opacity .3s;
}

/* ---------- Back ---------- */

.monogram {
  top: 15cqw; left: 0; right: 0;
  text-align: center;
  font-size: 3.4cqw;
  letter-spacing: .2em;
  color: var(--ink-soft);
}

.actions {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  padding-top: 4cqw;
}
.actions a {
  font-size: 3.6cqw;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  padding: .8cqw 2cqw;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
}
.actions a:hover, .actions a:focus-visible {
  border-bottom-color: var(--ink-soft);
  outline: none;
}
.rule { width: 8cqw; height: 1px; background: var(--muted); opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .tilt, .card { animation: none; transition: none; }
}