:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  color: #342115;
  background: #211811;
}
* { box-sizing: border-box; }
body {
  min-height: 100svh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 42px);
  background: radial-gradient(ellipse at 50% 25%, #514031, #211811 65%, #140f0c);
}
.card {
  width: min(100%, 470px);
  overflow: hidden;
  border: 1px solid #d0a969;
  border-radius: 24px;
  background: linear-gradient(#f6ede4cf, #fbf4e9d9), url("assets/travertine.webp") center / 300px auto;
  box-shadow: 0 18px 58px #120a07b3;
  text-align: center;
}
.brand, .trim {
  display: block;
  width: 100%;
  height: auto;
}
.brand { mask-image: linear-gradient(#000 95%, transparent); }
.trim { mask-image: linear-gradient(transparent, #000 24%); }
.identity { padding: 2px 12px 0; }
.role {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 5px;
  color: #6e4b26;
  font: 600 0.9rem Georgia, serif;
  letter-spacing: .045em;
}
.role::before, .role::after {
  content: "";
  width: 36px;
  height: 1px;
  background: #b4894b;
}
h1 {
  margin: 0;
  font: 700 clamp(1.3rem, 5.3vw, 2rem)/1.15 Georgia, serif;
}
.name-ar { margin: 4px 0 0; font-size: .89rem; }
.actions {
  display: grid;
  gap: 9px;
  width: min(100% - 32px, 355px);
  margin: 17px auto 0;
}
.action {
  display: grid;
  grid-template-columns: 24px 1fr 18px;
  align-items: center;
  gap: 12px;
  min-height: 49px;
  padding: 6px 16px;
  border: 1px solid #bd9057;
  border-radius: 28px;
  background: linear-gradient(#70451e, #3a2414);
  box-shadow: inset 0 1px 0 #f1ce8c80, 0 3px 5px #41271430;
  color: #fffaf0;
  text-decoration: none;
  font-weight: 650;
  line-height: 1.22;
}
.action:hover { background: linear-gradient(#815323, #4b2d15); }
.action svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #ffdf9e;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.action small { display: block; font-size: .75rem; font-weight: 500; }
.arrow { color: #ffdf9e; font-size: 1.05rem; }
.save {
  background: linear-gradient(#fbe2a9, #d0a05c);
  border-color: #93672e;
  color: #362010;
}
.save:hover { background: linear-gradient(#ffebbd, #dbad67); }
.save svg { stroke: #56300d; }
.save .arrow { color: #56300d; }
.action:focus-visible, summary:focus-visible { outline: 2px solid #3b200e; outline-offset: 3px; }
.qr { margin: 8px auto 0; width: min(100% - 32px, 355px); }
summary {
  width: fit-content;
  margin: auto;
  padding: 12px;
  cursor: pointer;
  color: #5b3b1e;
  font-size: .85rem;
  font-weight: 650;
}
.qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; border-radius: 8px; }
figcaption { padding: 4px 0 8px; font-size: .82rem; font-weight: 650; }
figcaption span { display: block; font-size: .72rem; font-weight: 400; }