/* IAmMoody social card: an event as a phone-sized poster to screenshot (lib/render.js cardPage).
   Sizes inside the card use container units (cqw) so the layout is identical at any screen width. */
:root {
  --ink: #0e0d0c;
  --paper: #f6f2ea;
  --muted: #a9a294;
  --red: #a3172b;
  --gold: #b89a62;
  --display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); }
body { display: flex; flex-direction: column; align-items: center; min-height: 100svh; }

/* ---- the card ---- */
.ad {
  position: relative; overflow: hidden; container-type: inline-size;
  width: min(100vw, 430px); aspect-ratio: 9 / 16;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink);
}
.feed .ad { width: min(100vw, 540px); aspect-ratio: 4 / 5; }
/* On a phone the story card fills the whole screen, so the screenshot is the card and nothing else. */
@media (max-width: 600px) {
  .story .ad { width: 100vw; height: 100svh; aspect-ratio: auto; }
}

/* Photo on top takes whatever height the text leaves, so text and photo never overlap in either shape. */
.ad-media { position: relative; flex: 1 1 0; min-height: 0; background: radial-gradient(circle at 70% 30%, #2a2420, var(--ink) 70%); }
.ad-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.ad-media::before, .ad-media::after { content: ""; position: absolute; left: 0; right: 0; }
.ad-media::before { top: 0; height: 30%; z-index: 1; background: linear-gradient(180deg, rgba(14,13,12,.6), rgba(14,13,12,0)); }  /* behind the wordmark */
.ad-media::after { bottom: -1px; height: 35%; background: linear-gradient(180deg, rgba(14,13,12,0), var(--ink)); }             /* fades into the text */

.ad-mark { position: absolute; z-index: 2; top: 5cqw; left: 6cqw; margin: 0; font: 400 7cqw/1 var(--display); letter-spacing: .02em; color: #fff; }
.ad-mark b { font-weight: 600; font-style: italic; color: var(--gold); margin-left: .1em; }

.ad-body { position: relative; flex: none; margin-top: -8cqw; padding: 0 7cqw 7cqw; }
.ad-eyebrow { margin: 0 0 2.5cqw; font: 600 3cqw var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.ad-title { margin: 0 0 4.5cqw; font: 500 10.5cqw/1.02 var(--display); letter-spacing: -.01em; color: #fff; }
.ad-date { margin: 0; font: 600 7.4cqw/1.1 var(--sans); letter-spacing: -.01em; color: #fff; }
.ad-date::before { content: ""; display: block; width: 12cqw; height: .9cqw; margin-bottom: 3.5cqw; background: var(--red); }
.ad-time { margin: 1cqw 0 0; font: 500 5cqw/1.3 var(--sans); color: var(--gold); }
.ad-venue { margin: 4.5cqw 0 0; font: 600 4.2cqw/1.35 var(--sans); color: #fff; }
.ad-venue span { display: block; font-weight: 400; color: var(--muted); }
.ad-line { margin: 4.5cqw 0 0; font: italic 400 5.6cqw/1.25 var(--display); color: var(--paper); }
.feed .ad-line { display: none; }   /* the 4:5 shape has no room for it */
.feed .ad-title { font-size: 8.6cqw; margin-bottom: 3.5cqw; }
.feed .ad-date { font-size: 6.2cqw; }
.feed .ad-date::before { margin-bottom: 2.6cqw; }
.feed .ad-time { font-size: 4.4cqw; }
.feed .ad-venue { margin-top: 3.4cqw; font-size: 3.7cqw; }
.feed .ad-body { padding-bottom: 5.5cqw; }
.ad-foot { display: flex; align-items: center; gap: 3cqw; margin: 6cqw 0 0; font: 600 3.4cqw var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.feed .ad-foot { margin-top: 3.6cqw; }
.ad-cost { padding: 1.4cqw 3cqw; border-radius: 99px; background: var(--red); color: #fff; }
.ad-url { color: var(--muted); }

/* ---- controls (below the card, outside the screenshot) ---- */
.card-tools { width: min(100vw, 540px); padding: 28px 20px 48px; font-size: 15px; line-height: 1.55; color: var(--muted); text-align: center; }
.card-tools p { margin: 0 0 16px; }
.card-tools b { color: var(--paper); font-weight: 600; }
.card-tools a { color: var(--paper); }
.card-switch { display: inline-flex; margin: 0 0 18px; border: 1px solid #3a3631; border-radius: 99px; padding: 3px; }
.card-switch button { font: 600 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 9px 20px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); cursor: pointer; }
.card-switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
@media (min-width: 601px) { body { padding-top: 32px; } .ad { box-shadow: 0 0 0 1px #2c2925, 0 24px 60px rgba(0,0,0,.5); } }

@media print {
  body { padding: 0; }
  .card-tools { display: none; }
  .ad { width: 100%; max-width: 430px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}