:root{
    --text:#1a1512;
    --muted:#6b5f58;
    --background:#f6f2ef;
    --surface:#ffffffcc;
    --primary:#7b4b35;
    --secondary:#e7d5cc;
    --accent:#d8a7b5;
    --accent2:#a69bae;
    --accent3:#97b197;
    --line:rgba(26,21,18,.12);
    --shadow:0 18px 50px rgba(26,21,18,.18);
    --radius:22px;
  }
  
  *{box-sizing:border-box}
  
  body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    background:var(--background);
    color:var(--text);
    text-align:center;
  }
  
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.07;
    background-image:
      radial-gradient(circle at 20% 10%, rgba(123,75,53,.25), transparent 40%),
      radial-gradient(circle at 80% 30%, rgba(216,167,181,.25), transparent 45%),
      radial-gradient(circle at 50% 90%, rgba(166,155,174,.18), transparent 45%);
    mix-blend-mode:multiply;
  }
  .block {
      padding-left: 5%;
      padding-right: 5%;
      padding-top: 6%;
  }
  
  .name-title{
    font-weight:900;
    letter-spacing:-.04em;
    text-transform:uppercase;
    padding-top: 3%;
  }
  
  hr,.rule{
    border:none;
    border-top:1px solid var(--line);
    margin:18px 0;
  }
  
  .topbar{
    position:sticky;
    top:0;
    z-index:50;
    background:color-mix(in srgb, var(--background) 86%, white 14%);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    padding:18px 16px 12px;
  }
  
  .topnav{
    display:flex;
    justify-content:center;
    gap:clamp(16px,4vw,56px);
  }
  
  .topnav a{
    text-decoration:none;
    color:var(--text);
    font-size:12px;
    letter-spacing:.28em;
    text-transform:uppercase;
    padding:8px 0;
    border-bottom:2px solid transparent;
    opacity:.85;
  }
  
  .topnav a:hover{
    border-bottom-color:var(--accent);
    opacity:1;
  }
  
  .one,.two,.three{
    border-radius:var(--radius);
    border:1px solid var(--line);
    box-shadow:0 10px 28px rgba(26,21,18,.10);
  }
  
  .two{background:var(--surface)}
  
  .three{
    background:linear-gradient(180deg, color-mix(in srgb, var(--secondary) 88%, white 12%), var(--secondary));
  }
  
  .vip-badge{
    display:inline-flex;
    gap:8px;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    background:color-mix(in srgb, var(--accent) 18%, white 82%);
    border:1px solid color-mix(in srgb, var(--accent) 40%, white 60%);
    letter-spacing:.22em;
    text-transform:uppercase;
    font-size:11px;
  }
  
  .polaroid-grid{
    width:min(1100px,92vw);
    margin:26px auto 0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    align-items:start;
  }
  
  .polaroid{
    position:relative;
    display:block;
    text-decoration:none;
    color:var(--text);
    background:rgba(255,255,255,.82);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:14px;
    transform-style:preserve-3d;
    will-change:transform;
    transition:transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    animation:floaty 7.5s ease-in-out infinite;
  }
  
  .polaroid:nth-child(2){animation-delay:-2.2s}
  .polaroid:nth-child(3){animation-delay:-4.1s}
  
  @keyframes floaty{
    0%,100%{transform:translateY(0) rotateZ(-.2deg)}
    50%{transform:translateY(-10px) rotateZ(.25deg)}
  }
  
  .polaroid-photo{
    border-radius:calc(var(--radius) - 6px);
    overflow:hidden;
    background:color-mix(in srgb, var(--secondary) 60%, white 40%);
    border:1px solid color-mix(in srgb, var(--line) 70%, transparent 30%);
  }
  
  .polaroid-photo img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    transform:translateZ(20px);
  }
  
  .polaroid-meta{
    padding:12px 6px 6px;
    text-align:left;
  }
  
  .polaroid-meta h3{
    margin:0;
    font-size:16px;
    letter-spacing:.02em;
  }
  
  .polaroid-meta p{
    margin:6px 0 0;
    color:var(--muted);
    font-size:13px;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  
  .polaroid-tag{
    position:absolute;
    top:12px;
    right:12px;
    padding:8px 10px;
    border-radius:999px;
    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
    background:color-mix(in srgb, var(--accent) 20%, white 80%);
    border:1px solid color-mix(in srgb, var(--accent) 45%, white 55%);
    box-shadow:0 10px 30px rgba(26,21,18,.16);
    transform:translateZ(35px);
  }
  
  .polaroid:hover,
  .polaroid:focus-visible{
    filter:saturate(1.03);
    box-shadow:0 22px 60px rgba(26,21,18,.24);
    outline:none;
  }
  
  .polaroid::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:var(--radius);
    pointer-events:none;
    opacity:0;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 40%, transparent 70%);
    transition:opacity 180ms ease;
  }
  
  .polaroid:hover::after{opacity:1}
  
  @media (max-width:980px){
    .polaroid-grid{grid-template-columns:1fr}
    .polaroid-photo img{height:240px}
  }
  
  .stage{
    position:relative;
    padding:32px 0 20px;
  }
  
  .stage-inner{
    width:min(1080px,88vw);
    margin:0 auto;
    position:relative;
    padding-inline: 16px;
  }
  
  
  .stage-link{
    display:block;
    position:relative;
    text-decoration:none;
  }
  
  .stage-bg{
    height:clamp(280px,36vw,460px);
    background:linear-gradient(180deg,#141414,#0b0b0c);
    border-radius:30px;
    border:1px solid rgba(0,0,0,.14);
    box-shadow:0 35px 100px rgba(0,0,0,.22);
  }
  .stage-poster{
    position:absolute;
    inset:42px;
    width:calc(100% - 84px);
    height:calc(100% - 84px);
    object-fit:cover;
    border-radius:24px;
    display:block;
    box-shadow:0 22px 70px rgba(0,0,0,.28);
  }
  
  
  .stage-link:hover .stage-poster{
    transform:translateY(-4px);
    transition:transform 220ms ease, filter 220ms ease;
    filter:saturate(1.05);
  }
  .stage-socials-side{
    position: absolute;
    padding-left: 3%;
    padding-right: 1%;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 22px;
    z-index: 5;
  }
  
  .stage-socials-side span{
    width: 1px;
    height: 18px;
    background: var(--line);
    margin: 0 auto;
  }
  
  .stage-socials-side a{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-decoration: none;
  
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
  
    color: color-mix(in srgb, var(--text) 65%, transparent 35%);
    opacity: 0.85;
  
    transition: color 160ms ease, opacity 160ms ease;
  }
  
  .stage-socials-side a:hover{
    color: var(--primary);
    opacity: 1;
  }
  
  
  
  @media (max-width: 900px){
    .stage-socials-side{
      left: 50%;
      top: auto;
      bottom: 22px;
      transform: translateX(-50%);
      flex-direction: row;
      gap: 14px;
      align-items: center;
      justify-content: center;
  
      padding: 10px 16px;
      border-radius: 999px;
  
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.18);
      box-shadow: 0 14px 40px rgba(0,0,0,0.35);
    }
  
    .stage-socials-side a{
      writing-mode: horizontal-tb;
      transform: none;
      color: rgba(255,255,255,0.92);
      opacity: 0.9;
      letter-spacing: 0.22em;
      font-size: 11px;
    }
  
    .stage-socials-side a:hover{
      color: #fff;
      opacity: 1;
    }
  
    .stage-socials-side span{
      width: 18px;
      height: 1px;
      background: rgba(255,255,255,0.28);
      margin: 0;
    }
  }