.afr-invitation {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(290px, .95fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: center;
  min-height: min(78vh, 820px);
  padding: clamp(72px, 10vw, 140px) max(7vw, 30px);
  overflow: hidden;
  border-block: 1px solid rgba(194, 139, 80, .22);
  background:
    radial-gradient(circle at 84% 47%, rgba(73, 116, 100, .18), transparent 31%),
    radial-gradient(circle at 20% 30%, rgba(166, 99, 52, .12), transparent 34%),
    linear-gradient(150deg, #071010, #0a0c0e 57%, #080809);
}

.afr-invitation::before {
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(194, 139, 80, .13);
  pointer-events: none;
  content: "";
}

.afr-invitation-copy,
.afr-invitation-collection { position: relative; z-index: 1; }

.afr-eyebrow {
  margin: 0 0 17px;
  color: #c58c56;
  font: 700 10px/1.3 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.afr-invitation h2 {
  margin: 0;
  color: #eee0c9;
  font: 400 clamp(48px, 7vw, 88px)/.9 Georgia, serif;
  letter-spacing: -.045em;
}

.afr-invitation h2 em {
  display: block;
  color: #c58c56;
  font-weight: 400;
}

.afr-invitation-copy > p:not(.afr-eyebrow) {
  max-width: 620px;
  margin: 26px 0 0;
  color: #aaa096;
  font: 400 16px/1.8 Georgia, serif;
}

.afr-open {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  min-height: 48px;
  margin-top: 30px;
  padding: 0 20px;
  border: 1px solid rgba(197, 140, 86, .5);
  color: #edcfaa;
  background: rgba(8, 11, 11, .55);
  font: 700 9px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.afr-open span { color: #8e8379; }
.afr-open:hover,
.afr-open:focus-visible { border-color: #c58c56; background: rgba(197, 140, 86, .08); outline: none; }

.afr-invitation-copy > small {
  display: block;
  max-width: 510px;
  margin-top: 17px;
  color: #756d66;
  font: 500 9px/1.6 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .05em;
}

.afr-invitation-collection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  perspective: 1200px;
}

.afr-invite-card {
  position: relative;
  aspect-ratio: 2 / 2.86;
  overflow: hidden;
  border: 1px solid rgba(197, 140, 86, .38);
  background: #081011;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
}

.afr-invite-card:nth-child(1) { transform: rotate(-3deg) translateY(16px); }
.afr-invite-card:nth-child(2) { transform: rotate(3deg) translateY(-12px); }
.afr-invite-card:nth-child(3) { transform: rotate(2deg) translateY(4px); }
.afr-invite-card:nth-child(4) { transform: rotate(-2deg) translateY(20px); }

.afr-invite-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .64;
  filter: saturate(.74) contrast(1.08);
}

.afr-invite-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.06), transparent 44%, rgba(3,8,9,.9));
  content: "";
}

.afr-invite-card span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 1;
  color: #e4ceb0;
  font: 700 9px/1.25 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.afr-recover {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  margin-top: 26px;
  padding: 0 17px;
  border: 1px solid rgba(197, 140, 86, .46);
  color: #e5c79f;
  background: rgba(7, 11, 11, .58);
  font: 700 9px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
}

.afr-recover::before { color: #c58c56; content: "✦"; }
.afr-recover:hover,
.afr-recover:focus-visible { border-color: #d6a36e; background: rgba(197, 140, 86, .1); outline: none; }
.afr-recover.is-earned { border-color: rgba(98, 163, 143, .4); color: #83bca9; }
.afr-recover.is-earned::before { color: #83bca9; content: "✓"; }

.afr-dialog,
.afr-discovery {
  width: min(1100px, calc(100vw - 28px));
  max-width: none;
  max-height: 92vh;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(197, 140, 86, .52);
  border-radius: 3px;
  color: #d8cbb9;
  background: #07100f;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .8);
}

.afr-dialog::backdrop,
.afr-discovery::backdrop {
  background: rgba(0, 5, 6, .9);
  backdrop-filter: blur(9px);
}

.afr-shell,
.afr-discovery-shell {
  position: relative;
  max-height: 92vh;
  overflow: auto;
  padding: clamp(48px, 7vw, 78px);
  background:
    radial-gradient(circle at 90% 10%, rgba(91, 132, 111, .15), transparent 28%),
    radial-gradient(circle at 8% 90%, rgba(159, 88, 49, .12), transparent 33%),
    linear-gradient(145deg, #071110, #0b0e0e 60%, #09090b);
  scrollbar-color: #b87f4e #07100f;
}

.afr-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(197, 140, 86, .34);
  border-radius: 50%;
  color: #e7cda8;
  background: rgba(3, 8, 8, .72);
  cursor: pointer;
}

.afr-close::before,
.afr-close::after {
  position: absolute;
  top: 20px;
  left: 11px;
  width: 20px;
  height: 1px;
  background: currentColor;
  content: "";
}

.afr-close::before { transform: rotate(45deg); }
.afr-close::after { transform: rotate(-45deg); }
.afr-close:hover,
.afr-close:focus-visible { border-color: #c58c56; outline: none; }

.afr-header {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(197, 140, 86, .23);
}

.afr-header p,
.afr-discovery-kicker {
  margin: 0 0 9px;
  color: #c58c56;
  font: 700 9px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.afr-header h2 {
  margin: 0;
  color: #eee0c9;
  font: 400 clamp(38px, 6vw, 68px)/.92 Georgia, serif;
}

.afr-header h2 em { color: #c58c56; font-weight: 400; }

.afr-header > strong {
  color: #e5c79f;
  font: 400 34px/1 Georgia, serif;
}

.afr-header > strong small {
  display: block;
  margin-top: 5px;
  color: #82786f;
  font: 700 8px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
}

.afr-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 13px;
}

.afr-slot {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.afr-card-face {
  --afr-accent: #c58c56;
  position: relative;
  display: block;
  aspect-ratio: 2 / 2.86;
  overflow: hidden;
  border: 1px solid rgba(197, 140, 86, .48);
  background: #071010;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34), inset 0 0 0 6px rgba(5, 10, 10, .62);
}

.afr-card-face::before {
  position: absolute;
  z-index: 2;
  inset: 7px;
  border: 1px solid rgba(235, 207, 167, .22);
  pointer-events: none;
  content: "";
}

.afr-card-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.08);
}

.afr-card-face.is-locked { border-color: #2f3431; }
.afr-card-face.is-locked img { opacity: 0; }

.afr-card-void {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #313b38;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, rgba(114, 141, 128, .05) 23px 24px),
    linear-gradient(160deg, #09100f, #07090a);
  font: 400 52px/1 Georgia, serif;
}

.afr-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), transparent 42%, rgba(3,7,7,.94));
}

.afr-card-top,
.afr-card-bottom {
  position: absolute;
  z-index: 3;
  right: 14px;
  left: 14px;
}

.afr-card-top {
  top: 14px;
  display: flex;
  justify-content: space-between;
  color: #e8cfac;
  font: 700 8px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.afr-card-top em { color: var(--afr-accent); font-style: normal; }

.afr-card-bottom { bottom: 14px; }
.afr-card-bottom small,
.afr-card-bottom i {
  display: block;
  color: var(--afr-accent);
  font: 700 7px/1.4 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.afr-card-bottom strong {
  display: block;
  margin: 5px 0;
  color: #f0dfc7;
  font: 400 clamp(13px, 1.4vw, 19px)/1.05 Georgia, serif;
}

.afr-card-bottom i { color: #756c64; font-size: 6px; font-style: normal; }

.afr-slot-clue {
  min-height: 33px;
  color: #80776f;
  font: 500 9px/1.45 ui-sans-serif, system-ui, sans-serif;
}

.afr-complete {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 28px;
  padding: 22px;
  border: 1px solid rgba(197, 140, 86, .4);
  background: rgba(197, 140, 86, .06);
}

.afr-complete[hidden] { display: none; }
.afr-complete > span { color: #c58c56; font-size: 34px; }
.afr-complete small { color: #c58c56; font: 700 8px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: .17em; }
.afr-complete h3 { margin: 6px 0 4px; color: #ead8bd; font: 400 23px/1.1 Georgia, serif; }
.afr-complete p { margin: 0; color: #8d8379; font: 400 11px/1.5 ui-sans-serif, system-ui, sans-serif; }

.afr-footer {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(197, 140, 86, .18);
  color: #746d66;
  font: 500 8px/1.5 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .06em;
}

.afr-footer p { flex: 1; margin: 0; }
.afr-footer a,
.afr-footer button { border: 0; color: #aa855f; background: transparent; font: inherit; text-decoration: none; cursor: pointer; }
.afr-footer a:hover,
.afr-footer button:hover { color: #e2bd8b; }

.afr-discovery { width: min(920px, calc(100vw - 28px)); }
.afr-detail-layout {
  display: grid;
  grid-template-columns: minmax(260px, .86fr) minmax(300px, 1.14fr);
  gap: clamp(28px, 6vw, 68px);
  align-items: center;
}

.afr-detail-card {
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  perspective: 1200px;
}

.afr-detail-card .afr-card-face { box-shadow: 0 28px 68px rgba(0, 0, 0, .62); }

.afr-detail-copy > small {
  color: var(--afr-detail-accent, #c58c56);
  font: 700 9px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.afr-detail-copy h2 {
  margin: 11px 0 18px;
  color: #f0dfc7;
  font: 400 clamp(38px, 6vw, 62px)/.95 Georgia, serif;
  letter-spacing: -.035em;
}

.afr-detail-copy > p {
  color: #a69b90;
  font: 400 14px/1.75 Georgia, serif;
}

.afr-detail-copy dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 23px 0;
  background: rgba(197, 140, 86, .16);
}

.afr-detail-copy dl div { padding: 12px; background: #0a1110; }
.afr-detail-copy dt { color: #756e66; font: 700 7px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.afr-detail-copy dd { margin: 5px 0 0; color: #dfc9aa; font: 700 10px/1.3 ui-sans-serif, system-ui, sans-serif; letter-spacing: .06em; }

.afr-protection {
  padding: 14px 15px;
  border-left: 2px solid var(--afr-detail-accent, #c58c56);
  color: #cdb99f !important;
  background: rgba(197, 140, 86, .055);
  font: 400 12px/1.6 ui-sans-serif, system-ui, sans-serif !important;
}

.afr-rights {
  color: #716a63 !important;
  font: 500 9px/1.55 ui-sans-serif, system-ui, sans-serif !important;
}

.afr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.afr-actions button {
  min-height: 39px;
  padding: 0 13px;
  border: 1px solid rgba(197, 140, 86, .38);
  color: #e2c49e;
  background: transparent;
  font: 700 8px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.afr-actions button:hover,
.afr-actions button:focus-visible { border-color: #c58c56; background: rgba(197, 140, 86, .08); outline: none; }
.afr-status { min-height: 18px; color: #83bca9 !important; font: 500 9px/1.45 ui-sans-serif, system-ui, sans-serif !important; }

.afr-toast {
  position: fixed;
  right: 22px;
  bottom: 91px;
  z-index: 9200;
  display: grid;
  gap: 4px;
  min-width: 250px;
  padding: 15px 18px;
  border: 1px solid rgba(197, 140, 86, .46);
  color: #e7d2b2;
  background: rgba(5, 12, 12, .96);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}

.afr-toast.is-visible { opacity: 1; transform: none; }
.afr-toast span { color: #c58c56; font: 700 8px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: .15em; }
.afr-toast strong { font: 400 17px/1.2 Georgia, serif; }

body.afr-open { overflow: hidden !important; }

@media (max-width: 900px) {
  .afr-invitation { grid-template-columns: 1fr; }
  .afr-invitation-collection { width: min(560px, 100%); }
  .afr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .afr-invitation { padding-inline: 24px; }
  .afr-invitation::before { inset: 12px; }
  .afr-shell,
  .afr-discovery-shell { padding: 62px 22px 34px; }
  .afr-header { display: grid; }
  .afr-header > strong { text-align: left; }
  .afr-header > strong small { display: inline; margin-left: 5px; }
  .afr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afr-detail-layout { grid-template-columns: 1fr; }
  .afr-detail-card { width: min(340px, 92%); margin-inline: auto; }
  .afr-footer { align-items: flex-start; flex-direction: column; }
  .afr-toast { right: 10px; bottom: 76px; left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .afr-toast { transition: none; }
  .afr-invite-card { transform: none !important; }
}

@media print {
  body.afr-print-card > * { display: none !important; }
  body.afr-print-card .afr-discovery[open] { position: static; display: block !important; width: 100%; max-height: none; border: 0; box-shadow: none; }
  body.afr-print-card .afr-discovery-shell { display: grid; min-height: 100vh; place-items: center; padding: 0; background: #fff; }
  body.afr-print-card .afr-detail-layout { display: block; width: 76mm; }
  body.afr-print-card .afr-detail-copy,
  body.afr-print-card .afr-close,
  body.afr-print-card .afr-discovery-kicker { display: none !important; }
  body.afr-print-card .afr-detail-card { width: 76mm; }
}