:root {
  --ink: #0f0806;
  --espresso: #1c110b;
  --mocha: #3b271c;
  --bronze: #ad8850;
  --copper: #cc9c56;
  --gold: #c8922a;
  --champagne: #f0dcc0;
  --cream: #fff8f0;
  --muted: rgba(255, 244, 232, .62);
  --line: rgba(204, 156, 86, .28);
  --serif: "Cormorant Garamond", Georgia, serif;
  --label: "Josefin Sans", Montserrat, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; color: var(--cream); background: var(--ink); font-family: Montserrat, Arial, sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.eyebrow { margin: 0; color: var(--copper); font-family: var(--label); font-size: 11px; font-weight: 400; letter-spacing: .42em; }

/* Ambassador backdrop: fixed, fades into espresso on the left and bottom */
.backdrop { position: fixed; top: 0; right: 0; bottom: 0; width: 62%; z-index: 0; pointer-events: none; }
.backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; opacity: .92; filter: saturate(.92); }
.backdrop::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(15,8,6,.88) 22%, rgba(15,8,6,.25) 58%, rgba(15,8,6,.1) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(15,8,6,0) 45%);
}
body::before { content: ""; position: fixed; top: -20vw; left: -15vw; width: 55vw; height: 55vw; border-radius: 50%; background: #b27a45; filter: blur(140px); opacity: .12; z-index: 0; pointer-events: none; }

.topbar, .hero, .collection, .how, .site-foot { position: relative; z-index: 2; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 26px 6vw; }
.brand img { width: 150px; }
.topbar nav a { margin-left: 34px; color: var(--muted); font-family: var(--label); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; transition: color .3s; }
.topbar nav a:hover { color: var(--champagne); }

.hero { min-height: calc(100vh - 110px); display: flex; flex-direction: column; justify-content: center; padding: 0 6vw 80px; max-width: 760px; }
.hero h1 { margin: 22px 0 0; font-family: var(--serif); font-weight: 400; font-size: 96px; line-height: .9; letter-spacing: -.02em; color: var(--champagne); text-shadow: 0 10px 40px rgba(0,0,0,.5); }
.hero h1 em { color: var(--copper); font-weight: 500; }
.rule { display: block; width: 90px; height: 1px; margin: 34px 0 26px; background: linear-gradient(90deg, var(--gold), transparent); }
.lede { margin: 0; max-width: 470px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.hero-stats { display: flex; gap: 56px; margin-top: 44px; }
.hero-stats strong { display: block; font-family: var(--serif); font-size: 54px; font-weight: 500; line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; }
.hero-stats span { display: block; margin-top: 8px; color: var(--bronze); font-family: var(--label); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.scroll-cue { align-self: flex-start; margin-top: 52px; padding: 17px 34px; border: 1px solid rgba(240,220,192,.55); color: var(--champagne); font-family: var(--label); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; background: rgba(15,8,6,.35); transition: background .35s, color .35s; }
.scroll-cue:hover { background: linear-gradient(110deg, #a9803a, #f2dba0 45%, #c8922a); color: #1b0f09; }

/* Collection */
.collection { padding: 110px 6vw 60px; background: linear-gradient(180deg, rgba(15,8,6,0), var(--ink) 140px); }
.collection-head { text-align: center; margin-bottom: 64px; }
.collection-head h2, .how h2 { margin: 16px 0 0; font-family: var(--serif); font-weight: 400; font-size: 58px; color: var(--champagne); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 34px; max-width: 1380px; margin: 0 auto; }

.card { position: relative; display: flex; flex-direction: column; background: linear-gradient(160deg, #22150e, #120a07 70%); border: 1px solid var(--line); transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .5s; }
.card::before { content: ""; position: absolute; top: 9px; right: 9px; bottom: 9px; left: 9px; border: 1px solid rgba(204,156,86,.1); pointer-events: none; z-index: 3; }
.card:hover { transform: translateY(-8px); border-color: rgba(240,210,160,.6); box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 40px rgba(200,146,42,.14); }
.card figure { position: relative; margin: 0; height: 340px; overflow: hidden; }
.card figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .6s; }
.card:hover figure img { transform: scale(1.06); }
.card figure::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(0deg, #1a100b, transparent); }
.card.is-closed figure img { filter: grayscale(.55) brightness(.62); }

.status { position: absolute; z-index: 2; top: 22px; left: 22px; padding: 8px 14px; border: 1px solid rgba(240,220,192,.4); background: rgba(15,8,6,.62); color: var(--champagne); font-family: var(--label); font-size: 9px; letter-spacing: .28em; text-transform: uppercase; backdrop-filter: blur(4px); }
.is-open .status { border-color: var(--accent); color: var(--cream); box-shadow: 0 0 18px rgba(200,146,42,.25); }

.card-body { flex: 1; padding: 6px 30px 26px; }
.season { margin: 0; color: var(--accent); font-family: var(--label); font-size: 10px; letter-spacing: .34em; text-transform: uppercase; }
.card h3 { margin: 10px 0 0; font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1.05; color: var(--cream); }
.value { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--copper); }
.prize { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }

.counter { display: flex; align-items: center; justify-content: space-between; padding: 20px 30px; border-top: 1px solid var(--line); background: rgba(0,0,0,.22); }
.counter .label { white-space: nowrap; display: flex; align-items: center; gap: 10px; color: var(--bronze); font-family: var(--label); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; }
.counter strong { font-family: var(--serif); font-size: 38px; font-weight: 500; line-height: 1; color: var(--champagne); font-variant-numeric: tabular-nums; }
.counter strong.winner { font-size: 24px; color: var(--copper); }
.counter strong.cta { white-space: nowrap; font-family: var(--label); font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--champagne); }
.counter strong.dash { color: rgba(255,255,255,.25); }
.is-open .counter { background: linear-gradient(90deg, rgba(200,146,42,.12), rgba(0,0,0,.2)); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200,146,42,.6); } 70% { box-shadow: 0 0 0 10px rgba(200,146,42,0); } 100% { box-shadow: 0 0 0 0 rgba(200,146,42,0); } }

/* How to enter */
.how { padding: 90px 6vw 100px; text-align: center; background: var(--ink); }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1100px; margin: 50px auto 0; }
.how-grid div { padding: 40px 28px; border-top: 1px solid var(--line); }
.how-grid span { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--copper); }
.how-grid h4 { margin: 14px 0 10px; font-family: var(--label); font-weight: 400; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--champagne); }
.how-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

.site-foot { padding: 60px 6vw 40px; text-align: center; background: var(--ink); border-top: 1px solid rgba(204,156,86,.14); }
.site-foot img { width: 120px; margin: 0 auto; opacity: .85; }
.site-foot p { margin: 18px 0 26px; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--muted); }
.site-foot div { display: flex; justify-content: center; gap: 34px; color: rgba(255,255,255,.35); font-family: var(--label); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; }
.site-foot a:hover { color: var(--copper); }

@media (max-width: 900px) {
  .backdrop { width: 100%; }
  .backdrop img { opacity: .55; object-position: 60% 15%; }
  .backdrop::after { background: linear-gradient(0deg, var(--ink) 5%, rgba(15,8,6,.55) 55%, rgba(15,8,6,.35)); }
  .hero h1 { font-size: 64px; }
  .how-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 520px) {
  .topbar { padding: 20px 16px; }
  .topbar nav { display: none; }
  .brand img { width: 120px; }
  .hero, .collection, .how { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: 52px; }
  .hero-stats { gap: 34px; }
  .hero-stats strong { font-size: 42px; }
  .collection-head h2 { font-size: 42px; }
  .cards { grid-template-columns: 1fr; }
  .site-foot div { flex-direction: column; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Countdown to the draw (open competitions with a draw date) */
.countdown { position: relative; margin: 0 24px 24px; padding: 18px 10px 16px; text-align: center; border: 1px solid rgba(204,156,86,.32); background: linear-gradient(180deg, rgba(200,146,42,.1), rgba(0,0,0,.25)); }
.countdown::before { content: ""; position: absolute; top: -1px; left: 50%; width: 60px; height: 1px; margin-left: -30px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.cd-kicker { margin: 0 0 12px; color: var(--copper); font-family: var(--label); font-size: 9px; letter-spacing: .38em; text-transform: uppercase; }
.cd-units { display: flex; justify-content: center; }
.cd-units div { flex: 1; padding: 0 4px; border-left: 1px solid rgba(204,156,86,.18); }
.cd-units div:first-child { border-left: 0; }
.cd-units strong { display: block; font-family: var(--serif); font-size: 36px; font-weight: 500; line-height: 1; color: var(--champagne); font-variant-numeric: tabular-nums; }
.cd-units span { display: block; margin-top: 6px; color: var(--bronze); font-family: var(--label); font-size: 8px; letter-spacing: .26em; text-transform: uppercase; }
.cd-date { margin: 14px 0 0; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--muted); }
.cd-now { display: none; margin: 4px 0 0; font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--champagne); }
.countdown.is-due .cd-units { display: none; }
.countdown.is-due .cd-now { display: block; }
.countdown.is-due .cd-kicker { color: var(--accent); }
.counter { gap: 14px; }