/* The gift-card promotion (F01-52) — M12 v3-ruled, ported from research/mockups/M12-gift-promo/
   assets/gift-promo.css (Ethan 2026-11-06, decisions D-01..D-10). Loaded only while GIFT_PROMO is on,
   by the pages that render _gift_promo.html. It reads the page's own tokens (site-chrome.css), so the
   same block sits on the dark dome (/shows) and on paper (program pages, confirmation) without a
   color of its own beyond the lander's card edges. The one sentence (.gcp-p) takes the prose face
   from the generated typography rule in site-chrome.css; nothing here names it. */

/* ── the card art (the lander's SVG) ── */
.gc-card{ display:block; height:auto; overflow:visible; font-family:var(--font-display, "Custom Dot Monda", sans-serif); }
.gc-card .card-kind{ font-size:15px; letter-spacing:5px; }
.gc-card .card-value{ font-size:26px; }

/* ══ v1 — the card band ══════════════════════════════════════════════════════════ */
.gcp{ position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
  gap:clamp(1.25rem,4vw,3.25rem); padding:clamp(1.5rem,3.6vw,2.6rem) clamp(1.25rem,4.4vw,3.4rem);
  border-radius:22px; background:var(--plate); border:1px solid var(--line); color:var(--ink);
  box-shadow:0 0 0 1px hsl(var(--neon-h,192) 100% 59% / calc(.14 * var(--neon-a,1))),
             0 24px 50px -32px hsl(calc(var(--neon-h,192) + 70) 90% 66% / calc(.35 * var(--neon-a,1))); }
/* the dome's light behind the cards: the three card edges, blurred */
.gcp::before{ content:""; position:absolute; z-index:-1; left:-4rem; top:50%; width:24rem; height:18rem; transform:translateY(-50%);
  pointer-events:none; filter:blur(30px); opacity:.5;
  background:radial-gradient(9rem 7rem at 30% 45%, rgba(52,119,152,.55), transparent 70%),
             radial-gradient(9rem 7rem at 55% 55%, rgba(150,68,139,.55), transparent 70%),
             radial-gradient(9rem 7rem at 78% 45%, rgba(142,129,52,.45), transparent 70%); }
.gcp--paper::before{ opacity:.16; }

.gcp-art{ position:relative; flex:none; width:var(--fan-w,16rem); height:var(--fan-h,12rem); }
.gcp-art .gc-card{ position:absolute; left:50%; top:50%; width:var(--card-w,6.6rem);
  transform-origin:50% 85%; transition:transform .45s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.42)); }
.gcp-art .gc-card:nth-child(1){ transform:translate(-50%,-50%) translateX(calc(-1 * var(--spread,58%))) rotate(-12deg); }
.gcp-art .gc-card:nth-child(2){ transform:translate(-50%,-50%) translateX(var(--spread,58%)) rotate(12deg); }
.gcp-art .gc-card:nth-child(3){ transform:translate(-50%,-50%) translateY(-5%); }
.gcp:hover .gc-card:nth-child(1){ transform:translate(-50%,-50%) translateX(calc(-1 * var(--spread,58%) - 8%)) rotate(-15deg); }
.gcp:hover .gc-card:nth-child(2){ transform:translate(-50%,-50%) translateX(calc(var(--spread,58%) + 8%)) rotate(15deg); }
.gcp:hover .gc-card:nth-child(3){ transform:translate(-50%,-50%) translateY(-9%); }

.gcp-copy{ min-width:0; }
.gcp-kicker{ margin:0 0 .55rem; font-family:var(--font-display, "Custom Dot Monda", sans-serif); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink, var(--gold)); }
/* D-09: the NEW badge, drawn like the gold "From $44.95" pills on the posters of the same page */
.gcp-new{ display:inline-block; margin-right:.65rem; padding:.34rem .58rem .3rem; border-radius:999px; background:var(--gold); color:#1a1205;
  font-size:.7rem; line-height:1; letter-spacing:.14em; vertical-align:.1em; box-shadow:0 8px 20px -8px rgba(0,0,0,.85); }
.gcp .gcp-h{ margin:0 0 .6rem; font-family:var(--font-display, "Custom Dot Monda", sans-serif); font-weight:400; font-size:clamp(1.6rem,3.3vw,2.35rem); line-height:1.08; letter-spacing:0; text-transform:none; color:var(--ink); }
/* the one prose sentence: its face comes from typography.json (`.gcp-p`) */
.gcp-p{ margin:0 0 1.2rem; max-width:32rem; font-size:1.02rem; line-height:1.5; color:var(--muted); }
.gcp-cta{ display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.72rem 1.25rem; border-radius:9999px;
  border:1px solid var(--gold); color:var(--ink); background:transparent; text-decoration:none;
  font-family:var(--font-display, "Custom Dot Monda", sans-serif); font-size:.98rem; line-height:1;
  transition:background .15s, transform .15s; }
/* the whole plate is the link: one tab stop, one destination */
.gcp-cta::after{ content:""; position:absolute; inset:0; z-index:3; border-radius:22px; }
.gcp:hover .gcp-cta{ background:rgba(255,155,18,.14); }
.gcp-cta:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; }

/* on paper (wallet, confirmation): a lighter fall-off under the cards */
.gcp--paper .gcp-art .gc-card{ filter:drop-shadow(0 10px 14px rgba(23,23,26,.22)); }
/* a wide row (/shows, event pages): bigger cards */
@media (min-width:900px){ .gcp:not(.gcp--compact){ --fan-w:19rem; --fan-h:13.5rem; --card-w:7.6rem; } }

/* compact: inside a 36–38rem column (wallet, confirmation) */
.gcp--compact{ --fan-w:12.4rem; --fan-h:8.8rem; --card-w:4.5rem; --spread:50%; gap:1.2rem; padding:1.4rem 1.5rem 1.4rem 1.1rem; }
.gcp--compact .gcp-h{ font-size:clamp(1.35rem,4.4vw,1.6rem); }
.gcp--compact .gcp-p{ font-size:.97rem; margin-bottom:1rem; }

@media (max-width:620px){
  .gcp:not(.gcp--compact){ grid-template-columns:1fr; justify-items:center; text-align:center; --fan-w:14rem; --fan-h:10.4rem; --card-w:5.8rem; }
  .gcp:not(.gcp--compact) .gcp-p{ margin-inline:auto; }
  .gcp:not(.gcp--compact)::before{ left:50%; top:4rem; transform:translateX(-50%); }
}
@media (max-width:460px){
  .gcp--compact{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .gcp--compact::before{ left:50%; top:4rem; transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){ .gcp-art .gc-card, .gcp-cta{ transition:none; } }

/* ══ v2 — the one line ══════════════════════════════════════════════════════════ */
.gcl{ margin:0; }
.gcl a{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.35rem .9rem; min-height:44px; padding:.8rem 1.1rem;
  border:1px solid var(--line); border-radius:16px; background:var(--plate); color:var(--ink); text-decoration:none;
  font-family:var(--font-display, "Custom Dot Monda", sans-serif); font-size:1.02rem; line-height:1.2; }
.gcl .gc-card{ width:1.7rem; flex:none; transform:rotate(-8deg); filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.gcl-go{ color:var(--gold-ink, var(--gold)); white-space:nowrap; }
@media (max-width:520px){ .gcl .gc-card{ grid-row:span 2; } .gcl-go{ grid-column:2; } }
.gcl a:hover{ border-color:var(--gold); }
.gcl a:hover .gcl-go{ text-decoration:underline; text-underline-offset:4px; }
.gcl a:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* ── slot spacing on each page ── */
.gcp-wrap{ margin-top:0; margin-bottom:clamp(1.5rem,4vw,2.5rem); }   /* program pages: after Good to Know */
.cf-gift-promo{ margin-top:1rem; }                            /* confirmation: after the receipt */
.more-gift{ max-width:36rem; margin:1rem auto 0; }            /* wallet: under "See what's on next" */
/* M12 D-21: on /shows the line sits centered under the room grid (after the photo on a phone). */
.cold-close .gcl{ max-width:40rem; margin:3rem auto 0; }