/* ---- Design tokens ------------------------------------------------------ */
:root{
  --gold-1:#f1d48a;
  --gold-2:#d4af37;
  --gold-3:#b8860b;

  --text:#ffffff;
  --bg:#7b0f10; /* behind the image */

  --container-max: 1200px;
}

/* ---- Base / layout ------------------------------------------------------ */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  background: var(--bg) url('assets/background.png') top center / cover no-repeat fixed;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
}

.page{
  min-height:100dvh;
  max-width:var(--container-max);
  margin:0 auto;
  padding: clamp(16px, 3vw, 32px);
  display:grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "brand hero"
    "blurb blurb";
  column-gap: clamp(16px, 4vw, 48px);
  row-gap: clamp(24px, 4vw, 48px);
}

/* ---- Brand (left rail) -------------------------------------------------- */
.brand{ grid-area: brand; align-self:start; text-align:left; }
.brand__logo{ width:min(220px, 36vw); height:auto; display:block; }
.brand__tag{
  margin:.5rem 0 0 -25px;
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(20px, 4vw, 36px);
  letter-spacing:.02em;
}

/* ---- Hero (video frame + decor) ---------------------------------------- */
.hero{
  grid-area: hero;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top: clamp(8px, 1.5vw, 16px);
}

.frame {
  position: relative;
  display: inline-block;
  border-radius: 6px;
}

.frame__video {
  display: block;
  width: min(760px, 70vw);
  height: auto;
  max-width: 100%;
}

.art {
  position: absolute;
  pointer-events: none;
}

/* Bills now relative to .frame */
.art--money1 { width: 30%; top: -11%; left: -8%; z-index: -1; }
.art--money2 { width: 30%; top: -14%; right: -8%; z-index: -1; }
.art--money3 { width: 28%; bottom: -10%; left: -8%; z-index: -1; }

/* Host at right, overlapping lower area */
.art--host  {
  width:min(300px, 28vw);
  right:-190px;
  bottom:-410px;
  z-index: 3; /* above frame */
}

/* ---- Blurb with its own decorations ------------------------------------ */
.blurb-wrap{
  grid-area: blurb;
  position: relative;
  display: grid;
  place-items: center;
  margin-top: clamp(24px, 6vw, 64px);
}

/* card */
.blurb{
  background: rgba(120,31,25,1);
  width:min(700px, 92vw);
  color:var(--text);
  padding: clamp(16px, 3vw, 24px);
  box-shadow: inset 0 0 25px rgba(0,0,0,.5);
  border-radius:6px;
}
.blurb p{ margin:.5rem 0; font-size:clamp(16px, 1.8vw, 18px); }

/* coins + bill around blurb (placeholder asset names) */
.dec{
  position:absolute;
  width:auto; height:auto;
  pointer-events:none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
}
.dec--coinL{
  width: 110px;
  left: max(8px, -10vw);
  top: -30px;
  transform: rotate(-8deg);
}
.dec--coinB{
  width: 120px;
  bottom: 55px;
  left: 19%;
  transform: translateX(-50%) rotate(8deg);
  z-index: -1;
}
.dec--billR{
  width: 180px;
  right: max(70px, -6vw);
  bottom: 39x;
  transform: rotate(10deg);
  z-index: -1;
}

/* ---- Accessibility utility --------------------------------------------- */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- Responsive tweaks -------------------------------------------------- */

/* Medium screens: pull host in a bit */
@media (max-width: 1100px){
  .art--host{ right:-120px; bottom:-360px; }
}

/* Tablet: stack brand above hero; scale decor */
@media (max-width: 900px){
  .page{
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "hero"
      "blurb";
    justify-items:center;
    text-align:center;
  }

  .brand{ text-align:center; }
  .brand__logo{ width:min(200px, 48vw); margin:0 auto; }

  .frame__video{ width:min(680px, 92vw); }
  .frame::after{ inset:-8px; border-width:8px; }

  .art--money1{ width:200px; top:-40px; left:-44px; }
  .art--money2{ width:200px; top:-40px; right:-44px; }
  .art--money3{ width:180px; bottom:-38px; left:-54px; }
  .art--host  { width:220px; right:-40px; bottom:-300px; }

  .dec--coinL{ width:90px; top:-24px; left: -6vw; }
  .dec--coinB{ width:100px; bottom:-32px; }
  .dec--billR{ width:150px; bottom:-24px; right: -4vw; }
}

/* Phone: tighter spacing; move host below */
@media (max-width: 560px){
  .brand__logo{ width:160px; }
  .frame__video{ width: 92vw; }
  .frame::after{ inset:-6px; border-width:6px; }

  .art--money1{ width:150px; top:-36px; left:-26px; }
  .art--money2{ width:150px; top:-40px; right:-26px; }
  .art--money3{ width:140px; bottom:-26px; left:-28px; }

  .art--host{
    position:static;
    display:block;
    margin: 24px auto 0;
    width: 52vw;
  }

  .dec--coinL{ width:80px; left:-8vw; top:-18px; z-index: -1; }
  .dec--coinB{ width:90px; bottom:-24px; z-index: -1; }
  .dec--billR{ width:130px; right:-6vw; bottom:-18px; }
}