/* /card: Amr's digital business card (vintage, in the site's colours) */
:root { color-scheme: only light; }
[hidden] { display: none !important; }
:root { --ink: #2A231E; --soft: #5C5048; --line: #DCCFB8; --paper: #FBF7EF; --cream: #F4EDDF; --brick: #B4532F; --olive: #3F4A2E; --mustard: #D39B34; --sun: #FFCB56; --sage: #8AA086; --teal: #5E8F8B; --coral: #E39A6E; --wood: #8A5A3B; }
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body {
  font-family: "Readex Pro", system-ui, sans-serif; color: var(--ink); min-height: 100vh; position: relative;
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cd-palm { position: fixed; width: 560px; right: -250px; top: -120px; opacity: .12; pointer-events: none; -webkit-mask: radial-gradient(closest-side, #000 60%, transparent); mask: radial-gradient(closest-side, #000 60%, transparent); }
html[dir="rtl"] .cd-palm { right: auto; left: -250px; transform: scaleX(-1); }
.cd { position: relative; max-width: 440px; margin: 0 auto; padding: 0 0 28px; }
.cd-head { position: relative; height: 120px; }
.cd-sig { position: absolute; inset-inline-start: 24px; top: 28px; height: 34px; filter: brightness(0); }
.cd-lang { position: absolute; inset-inline-start: 24px; top: 74px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 3px 12px; font: 500 13px "Readex Pro", sans-serif; color: var(--ink); cursor: pointer; }
.cd-stamp { position: absolute; inset-inline-end: 18px; top: 16px; width: 76px; height: 92px; transform: rotate(6deg); padding: 6px;
  background: radial-gradient(circle at 4px 4px, transparent 3px, #FBF4E6 3.5px) -4px -4px / 8px 8px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.cd-stamp div { position: relative; width: 100%; height: 100%; background: var(--olive); color: var(--sun); font: 600 8.5px/1.2 "Readex Pro", sans-serif; display: flex; align-items: flex-end; padding: 6px; letter-spacing: .06em; direction: ltr; }
.cd-stamp i { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: repeating-linear-gradient(180deg, var(--mustard) 0 6px, var(--olive) 6px 8px); }
.cd-pol { position: relative; width: 170px; margin: 4px auto 0; background: var(--paper); padding: 8px 8px 30px; transform: rotate(-3deg); box-shadow: 0 18px 30px -16px rgba(60, 40, 20, .55); }
.cd-pol img { display: block; width: 100%; aspect-ratio: 1 / 1.12; object-fit: cover; object-position: center 30%; background: var(--line); }
.cd-pol figcaption { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font: 700 19px Caveat, cursive; color: var(--soft); }
html[lang="ar"] .cd-pol figcaption { font: 700 15px "Aref Ruqaa", serif; bottom: 6px; }
.cd-tape { position: absolute; width: 70px; height: 20px; background: rgba(232, 216, 170, .85); top: -9px; left: 50px; transform: rotate(-6deg); }
.cd-body { position: relative; padding: 14px 24px 0; text-align: center; }
.cd-kick { font-size: 11px; letter-spacing: .3em; color: var(--brick); font-weight: 500; margin: 14px 0 4px; }
html[lang="ar"] .cd-kick { letter-spacing: 0; font-size: 13px; }
h1 { margin: 0; font-size: 30px; letter-spacing: -.02em; font-weight: 600; }
.cd-hand { font: 700 24px Caveat, cursive; color: var(--wood); margin: 2px 0 0; }
html[lang="ar"] .cd-hand { font: 700 20px "Aref Ruqaa", serif; }
.cd-save { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 20px 0 12px; border: 0; background: var(--brick); color: #FBF4E6; border-radius: 999px; padding: 15px; font: 600 16px "Readex Pro", sans-serif; cursor: pointer; box-shadow: 0 12px 22px -12px rgba(180, 83, 47, .8); transition: transform .2s; }
.cd-save:active { transform: scale(.98); }
.cd-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.cd-acts a { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 10px 0 9px; font-size: 12px; color: var(--soft); text-decoration: none; transition: transform .2s, border-color .2s; }
.cd-acts a:hover { transform: translateY(-2px); border-color: var(--wood); }
.cd-acts svg { display: block; width: 46px; height: 46px; margin: 0 auto 4px; }
.cd-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; }
.cd-chips li { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 7px 13px; font-size: 13px; color: var(--soft); }
.cd-post { position: relative; margin-top: 18px; background: var(--paper); border: 1px solid var(--line); padding: 16px; display: flex; gap: 14px; align-items: center; text-align: start; overflow: hidden; }
.cd-post::before { content: ""; position: absolute; inset: 6px; border: 3px solid transparent; border-image: repeating-linear-gradient(135deg, var(--brick) 0 10px, transparent 10px 18px, var(--teal) 18px 28px, transparent 28px 36px) 8; pointer-events: none; opacity: .55; }
.cd-qr { position: relative; flex: none; width: 92px; height: 92px; background: #fff; padding: 5px; }
.cd-qr svg { display: block; width: 100%; height: 100%; }
.cd-post p { position: relative; margin: 0; font-size: 13px; color: var(--soft); line-height: 1.55; }
.cd-post p b { font: 700 20px Caveat, cursive; color: var(--ink); }
html[lang="ar"] .cd-post p b { font: 700 17px "Aref Ruqaa", serif; }
.cd-pm { position: absolute; inset-inline-end: 8px; bottom: -14px; width: 64px; height: 64px; border: 2px solid var(--wood); border-radius: 50%; opacity: .35; transform: rotate(-14deg); font: 600 7px "Readex Pro", sans-serif; display: grid; place-items: center; text-align: center; color: var(--wood); letter-spacing: .1em; }
.cd-foot { margin: 18px 0 0; font-size: 12px; color: #9A8C7E; }
.cd-foot a { color: inherit; }
.cd-off { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px; position: relative; }
.cd-off img { height: 40px; filter: brightness(0); }
.cd-off a { color: var(--brick); }
@media (prefers-reduced-motion: no-preference) {
  .cd-pol, .cd-body > * { animation: cd-in .6s both; }
  .cd-body > *:nth-child(2) { animation-delay: .05s; } .cd-body > *:nth-child(3) { animation-delay: .1s; } .cd-body > *:nth-child(4) { animation-delay: .15s; } .cd-body > *:nth-child(5) { animation-delay: .2s; }
}
@keyframes cd-in { from { opacity: 0; translate: 0 10px; } }