@font-face { font-family: "Bebas Neue"; src: url("../fonts/bebas-neue.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Iosevka Charon Mono"; src: url("../fonts/iosevka-charon-mono.woff2") format("woff2"); font-display: swap; }

:root {
  --green: #17352d;
  --orange: #bb5a32;
  --paper: #f1e5ca;
  --ink: #17352d;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--green); }
body { min-width: 320px; min-height: 100%; margin: 0; color: var(--paper); background: var(--green); font-family: "Iosevka Charon Mono", monospace; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.business-card-page {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  align-items: center;
  padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow: hidden;
}

.business-card-page::before {
  content: "21+";
  position: fixed;
  z-index: -1;
  right: -2vw;
  bottom: -8vw;
  color: rgb(241 229 202 / .035);
  font: 54vw/.75 "Bebas Neue", Impact, sans-serif;
  pointer-events: none;
}

.business-card-page__grain {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: url("../images/textures/paper-grain.jpg") center / max(100%, 1200px) auto repeat-y,
              url("../images/textures/grain.svg") 0 0 / 180px 180px repeat;
  background-blend-mode: multiply;
  mix-blend-mode: overlay;
  opacity: .5;
  filter: grayscale(1) contrast(1.5);
}

.business-card-header,
.business-card-footer {
  display: flex;
  width: min(100%, 640px);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font: 16px/1 "Bebas Neue", Impact, sans-serif;
  letter-spacing: .04em;
}

.business-card-header { margin-bottom: clamp(25px, 6vh, 58px); }
.business-card-header img { display: block; width: clamp(158px, 42vw, 220px); filter: brightness(0) invert(1) sepia(.2); }
.business-card-header > span { color: var(--orange); text-align: right; }

.business-card {
  position: relative;
  width: min(100%, 590px);
  padding: clamp(28px, 7vw, 52px) clamp(24px, 7vw, 54px) clamp(32px, 8vw, 60px);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 12px 14px 0 rgb(0 0 0 / .2);
  clip-path: polygon(1% 2%, 16% 0, 34% 1.4%, 56% .2%, 77% 1.2%, 99% 0, 98.5% 20%, 100% 43%, 98.8% 67%, 100% 98%, 79% 99.2%, 58% 98%, 37% 100%, 18% 98.5%, 0 100%, 1.2% 75%, 0 48%, 1% 25%);
}

.business-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../images/textures/paper-grain.jpg") center / cover;
  mix-blend-mode: multiply;
  opacity: .14;
}

.business-card > * { position: relative; z-index: 1; }
.business-card__register { display: flex; justify-content: space-between; gap: 20px; margin: 0; color: var(--orange); font: 15px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .08em; }
.business-card__mark { display: grid; width: 74px; height: 74px; margin: clamp(26px, 6vw, 44px) 0 20px; place-items: center; border-radius: 50%; background: var(--orange); }
.business-card__mark img { width: 45px; filter: brightness(0) invert(1); }
.business-card__kicker { margin: 0 0 12px; color: var(--orange); font: clamp(24px, 7vw, 38px)/.94 "Bebas Neue", Impact, sans-serif; }
.business-card h1 { margin: 0; font: clamp(65px, 20vw, 112px)/.78 "Bebas Neue", Impact, sans-serif; letter-spacing: -.015em; }
.business-card__role { margin: 18px 0 0; font-size: clamp(12px, 3.5vw, 16px); line-height: 1.35; }

.business-card__contacts { display: grid; gap: 8px; margin-top: clamp(30px, 7vw, 48px); }
.contact-line { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: baseline; padding: 13px 0; border-top: 2px solid var(--orange); }
.contact-line:last-of-type { border-bottom: 2px solid var(--orange); }
.contact-line span { color: var(--orange); font: 19px/1 "Bebas Neue", Impact, sans-serif; }
.contact-line strong { min-width: 0; overflow-wrap: anywhere; font-size: clamp(13px, 3.6vw, 17px); }
.business-card__pending { margin: 0; padding: 18px 0; border-block: 2px solid var(--orange); font-size: 13px; }

.business-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.card-button { display: grid; min-height: 48px; place-items: center; padding: 10px; border: 3px solid var(--orange); color: var(--ink); background: transparent; font: 21px/1 "Bebas Neue", Impact, sans-serif; text-align: center; cursor: pointer; }
.card-button--primary { color: var(--paper); background: var(--orange); }
.business-card__message { min-height: 1.3em; margin: 12px 0 0; font-size: 12px; text-align: center; }
.business-card-footer { justify-content: center; margin-top: auto; padding-top: clamp(28px, 6vh, 56px); }
.business-card-footer a:hover, .business-card-footer a:focus-visible { color: var(--orange); }
.business-card-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 16px; color: rgb(241 229 202 / .7); font: 13px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .04em; }
.business-card-legal a:hover, .business-card-legal a:focus-visible { color: var(--orange); }

@media (max-width: 430px) {
  .business-card-header > span { max-width: 90px; font-size: 13px; }
  .business-card__actions { grid-template-columns: 1fr; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .business-card { animation: card-in .7s cubic-bezier(.16, 1, .3, 1) both; }
  .business-card-header { animation: header-in .55s .12s ease-out both; }
  .card-button { transition: transform .2s ease, box-shadow .2s ease; }
  .card-button:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 rgb(23 53 45 / .2); }
  @keyframes card-in { from { opacity: 0; transform: translateY(24px) rotate(.5deg); } }
  @keyframes header-in { from { opacity: 0; transform: translateY(-10px); } }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }