/* =========================================
   ROSIE & THE RATDOGS — CLEAN FINAL CSS
   ========================================= */

:root{
  --bg:#070707;
  --fg:#f2f2f2;
  --muted:rgba(242,242,242,.68);

  --red:#dc2626;

  --max:1120px;
  --radius:22px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* subtle depth so black isn’t flat */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(255,255,255,.07), transparent 55%),
    radial-gradient(900px 600px at 85% 80%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(1200px 900px at 50% 50%, transparent 40%, rgba(0,0,0,.85) 100%);
  opacity:.55;
}

/* =========================================
   LAYOUT
   ========================================= */

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px, 4vw, 60px);
}

/* =========================================
   HERO (REAL RED BORDER)
   ========================================= */

.hero{
  width:min(var(--max), 100%);
  min-height:clamp(520px, 80vh, 900px);

  position:relative;
  overflow:hidden;

  border-radius:var(--radius);

  /* THIS IS THE BORDER YOU WANT */
  border:3px solid var(--red);

  box-shadow:0 30px 90px rgba(0,0,0,.7);

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.38) 0%,
      rgba(0,0,0,.62) 55%,
      rgba(0,0,0,.82) 100%
    ),
    url("asset/img/PXL_20250711_231216420.jpg");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(26px, 4.5vw, 64px);
}

/* film grain */
.noise{
  position:absolute;
  inset:-30%;
  pointer-events:none;
  opacity:.14;
  transform:rotate(8deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* keep content above overlays */
.hero > *{
  position:relative;
  z-index:1;
}

/* =========================================
   TYPE
   ========================================= */

.title{
  margin:0 0 10px;
  text-transform:uppercase;
  font-weight:950;
  line-height:.86;
  letter-spacing:-0.03em;
  font-size:clamp(46px, 7.2vw, 96px);
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 18px 55px rgba(0,0,0,.55);
}

.tagline{
  margin:0 0 26px;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:13px;
  color:var(--muted);
}

/* =========================================
   NAV + BUTTONS
   ========================================= */

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;

  padding:16px 24px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.45);

  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:900;

  color:var(--fg);
  text-decoration:none;

  transition:
    transform 120ms cubic-bezier(.2,.9,.2,1),
    background 140ms cubic-bezier(.2,.9,.2,1),
    border-color 140ms cubic-bezier(.2,.9,.2,1);
}

.btn::after{
  content:"→";
  opacity:.85;
}

.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.08);
}

.btn.primary{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.6);
}

/* =========================================
   FLOATING INSTAGRAM (SMALL)
   ========================================= */

.float-icon{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;

  width:38px;
  height:38px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  box-shadow:0 10px 28px rgba(0,0,0,.55);
}

/* Instagram brand */
.float-icon.instagram{
  background:linear-gradient(
    135deg,
    #f58529,
    #feda77,
    #dd2a7b,
    #8134af,
    #515bd4
  );
}

.float-icon.instagram svg{
  width:18px;
  height:18px;
  fill:#fff;
}

/* subtle motion */
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}

.float-icon.instagram{
  animation:floaty 2.8s ease-in-out infinite;
}

.float-icon.instagram:hover{
  animation:none;
  transform:translateY(-4px) scale(1.05);
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width:520px){
  .hero{
    min-height:86vh;
    padding:22px;
    border-width:2px;
  }

  .title{
    letter-spacing:-0.02em;
    line-height:.9;
  }

  .nav{
    flex-direction:column;
  }

  .btn{
    width:100%;
    justify-content:space-between;
  }

  .float-icon{
    right:14px;
    bottom:14px;
    width:34px;
    height:34px;
    border-radius:10px;
  }

  .float-icon.instagram svg{
    width:16px;
    height:16px;
  }
}

/* Contact page text */
.simple-text{
  margin:0 0 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.simple-email{
  margin:0;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .04em;
}

.simple-email a{
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
}

.simple-email a:hover{
  border-bottom-color: rgba(255,255,255,.7);
}

.simple-email{
  margin:0;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--fg);
}
/* Extra breathing room before EPK button on Contact page */
.page-simple .simple-block + .simple-block{
  margin-top: 56px;
}

.page-simple::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .08;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 3px
    );

   .video-wrap{
  border: 3px solid #dc2626; /* matches your hero border */
}

}

/* Consume page: horizontal video row */
.videos{
  width: min(1120px, 100%);
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Ensure each embed stays 16:9 */
.videos .video-wrap{
  margin: 0;                /* override vertical stacking margins */
  aspect-ratio: 16 / 9;
}

/* Responsive: stack to 1 column on small screens */
@media (max-width: 900px){
  .videos{
    grid-template-columns: 1fr;
  }
}

/* Consume page hero image */
.page-consume .hero{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.70) 55%,
      rgba(0,0,0,.90) 100%
    ),
    url("asset/img/consume-hero.png");

  background-size: cover;
background-position: center 35%;

}