:root{
      --bg:#0b0612; --fg:#f7eaff; --muted:#bba5d6; --accent:#ffd24a; --rope:#c5973f;
      --pedestal:#ece8ff; --pedestal-edge:#c8c2ea;
    }
    
    html,body{height:100%}
    
    body{
      margin:0; 
      display:grid; place-items:center; 
      background:radial-gradient(1200px 600px at 20% -10%, #ffd24a10, transparent), var(--bg);
      color:var(--fg); 
      font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    }
    
    .wrapper{
      width:min(960px, 92vw); 
    padding:28px}
    
h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.2;
}

h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.3;
}

h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
}

    
    p.subtitle{margin:0 0 20px; color:var(--muted)}
    
    .gallery{
      position:relative; isolation:isolate;
      background:linear-gradient(180deg, #110a23, #0b0612);
      border:1px solid #3b2b66; border-radius:18px; padding:48px 24px 60px;
      box-shadow:0 20px 60px #00000066, inset 0 0 40px #00000055;
      overflow:hidden;
    }
    
    /* spotlights */
    .spot{position:absolute; top:-10%; width:40%; aspect-ratio:1/1.4; filter:blur(2px);
      background:conic-gradient(from 180deg at 50% 0%, rgba(255,210,74,.55), rgba(255,210,74,.00) 45%);
      transform-origin:50% 0%; opacity:.9; mix-blend-mode:screen; pointer-events:none;
      animation: sway 5s ease-in-out infinite;
    }
    
    .spot.s2{left:10%; transform:rotate(-12deg)}
    
    .spot.s1{right:10%; transform:rotate(12deg); animation-delay:1.2s}
    @keyframes sway{
      0%,100%{transform:rotate(var(--rot,12deg))}
      50%{transform:rotate(calc(var(--rot,12deg) * -1))}
    }
    /* rope + stanchions */
    .stanchions{
      
      position:relative; margin:0 auto; width:min(680px, 90%); height:120px;
    }
    .post{
      
      position:absolute; bottom:0; width:14px; height:70px; background:#d2c9ff; border:1px solid #9a8dd9; border-radius:8px;
      box-shadow:0 6px 12px #0006;
    }
    
    .post::after{
      content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
      width:28px; height:10px; background:#f0eaff; border:1px solid #bfb2ff; border-radius:8px / 6px;
      box-shadow:0 2px 6px #0004;
    }
    
    .post.left{left:10%}
    
    .post.right{right:10%}
    
    .rope{
      
      position:absolute; left:calc(10% + 7px); right:calc(10% + 7px); top:48px; height:30px;
      background:radial-gradient(40% 160% at 10% 0%, #0000 60%, #0003), 
                  radial-gradient(40% 160% at 90% 0%, #0000 60%, #0003),
                  linear-gradient(90deg, #b07a18, #e5b24e, #b07a18);
      border-radius:50% / 80% 80% 20% 20%;
      box-shadow:0 6px 12px #0005 inset;
    }
    
    /* pedestal */
    .pedestal{
      width:min(460px, 80%); margin:0 auto; background:var(--pedestal); border:2px solid var(--pedestal-edge);
      border-radius:10px; padding:18px 16px 26px; box-shadow:0 10px 30px #0007, inset 0 -6px 0 #fff;
      text-align:center; color:#1a1330; font-weight:700;
    }
    
    .pedestal small{display:block; font-weight:600; color:#4c4370}
    
    .punchline{
      margin:18px auto 0; text-align:center; font-size:clamp(1.1rem, 1vw + .9rem, 1.4rem);
    }
    .btns{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px}
    
    .btn{
      text-decoration:none; padding:10px 14px; border-radius:12px; border:1px solid #9a8dd9;
      background:linear-gradient(180deg, #1e1336, #120a26); color:#f7eaff; font-weight:700;
      box-shadow:0 10px 30px #0006; transition:transform .12s ease;
    }
    
    .btn:hover{transform:translateY(-1px)}
    
    .note{margin-top:14px; color:var(--muted); text-align:center; font-size:.94rem}
    
    figure{margin:20px auto 0; max-width:800px}
    
    figure img{
      max-width:800px; 
      border-radius:12px; 
      border:1px solid #3b2b66; 
      box-shadow:0 10px 28px #0006}
    
    figcaption{color:var(--muted); font-size:.85rem; text-align:center; margin-top:6px}