@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Outfit:wght@300;400;500;600&display=swap');

:root {
  --bg:      #0e0e0e;
  --bg-deep: #080808;
  --cream:   #f0ece6;
  --gold:    #d4af37;
  --muted:   #b0aaa0;
  --faint:   #706a60;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Outfit', system-ui, sans-serif;
}

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

html, body { background: var(--bg-deep); }

.poster {
  position: relative;
  width: 1080px;
  height: 1080px;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(212,175,55,0.10) 0%, rgba(212,175,55,0) 45%),
    radial-gradient(140% 120% at 85% 100%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(160deg, #161616 0%, var(--bg) 42%, var(--bg-deep) 100%);
  color: var(--cream);
  overflow: hidden;
  font-family: var(--sans);
  isolation: isolate;
}

/* film grain */
.poster::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 5;
}

/* hairline frame */
.frame {
  position: absolute; inset: 56px;
  border: 1px solid rgba(212,175,55,0.22);
  z-index: 1;
}
.frame::before, .frame::after {
  content: ""; position: absolute; background: var(--gold);
}
/* gold corner ticks */
.tick { position: absolute; width: 22px; height: 22px; z-index: 2; }
.tick.tl { top: 56px; left: 56px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.tick.tr { top: 56px; right: 56px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.tick.bl { bottom: 56px; left: 56px; border-bottom: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.tick.br { bottom: 56px; right: 56px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }

.content {
  position: absolute; inset: 56px;
  padding: 86px 92px;
  display: flex; flex-direction: column;
  z-index: 3;
}

/* shared type */
.kicker {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}
.kicker .dot { color: var(--faint); margin: 0 10px; }

h1 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.01em;
}
h1 em { font-style: italic; color: var(--gold); font-weight: 600; }

.lede { font-family: var(--serif); color: var(--muted); font-weight: 400; }

/* wordmark */
.wordmark { font-family: var(--sans); font-weight: 600; letter-spacing: 0.02em; }
.wordmark .dman { color: var(--cream); }
.wordmark .labs { color: var(--cream); font-weight: 300; }
.wordmark .tld  { color: var(--gold); }

.rule { height: 1px; background: linear-gradient(90deg, var(--gold), rgba(212,175,55,0)); }

.spacer { flex: 1; }

/* radiating signal motif (shared) */
.motif { position: absolute; width: 430px; height: 430px; z-index: 2; pointer-events: none; }
.motif.tr { top: 56px; right: 56px; }
.motif.bl { bottom: 56px; left: 56px; transform: rotate(180deg); }

/* scan-to-visit QR chip (shared) */
.qr { display: flex; align-items: center; gap: 16px; }
.qr img { width: 116px; height: 116px; border-radius: 12px; border: 1px solid rgba(212,175,55,0.5); background: #fff; padding: 8px; box-sizing: border-box; }
.qr .cap { font-family: var(--sans); font-weight: 300; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.qr .cap b { color: var(--cream); font-weight: 500; }