:root {
      --bg0:#07070a;
      --bg1:#0e0f18;
      --card:#0e1020cc;
      --card2:#0b0c14cc;
      --text:#f4f0e8;
      --muted:#c9c3b7;
      --gold:#d8b25a;
      --bronze:#b37b3a;
      --raven:#1b4d8a;
      --raven2:#0f2f57;
      --line:#2a2e4d;
      --shadow: 0 24px 80px rgba(0,0,0,.55);
      --radius: 22px;
    }
    * { box-sizing:border-box; }
    html,body { height:100%; }
    body {
      margin:0;
      color:var(--text);
      font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
      background: url("assets/bg.jpg") center/cover fixed no-repeat;
      overflow-x:hidden;
    }

    /* Background: subtle Great Hall arches */
    .hall {
      position:fixed; inset:0; pointer-events:none; z-index:-3;
      opacity:.28;
      background:
        radial-gradient(120px 220px at 15% 22%, rgba(216,178,90,.10) 0%, rgba(216,178,90,0) 70%),
        radial-gradient(120px 220px at 85% 28%, rgba(216,178,90,.08) 0%, rgba(216,178,90,0) 70%),
        radial-gradient(60px 120px at 50% 18%, rgba(244,240,232,.10) 0%, rgba(244,240,232,0) 70%),
        linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.75));
      filter: blur(.2px);
    }
    .arches {
      position:fixed; inset:-40px -40px 0 -40px; z-index:-4; pointer-events:none;
      opacity:.22;
      background-image:
        repeating-linear-gradient(90deg,
          rgba(216,178,90,.10) 0px,
          rgba(216,178,90,.10) 1px,
          rgba(0,0,0,0) 1px,
          rgba(0,0,0,0) 220px);
      mask-image: radial-gradient(1200px 700px at 50% 0%, #000 35%, transparent 80%);
    }

    /* Animated floating candles (more realistic) */
#candles{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
}

.candle{
  position:absolute;
  width: var(--w, 14px);
  height: var(--h, 120px);
  opacity: var(--op, .22);
  transform-origin: 50% 85%;
  will-change: transform, opacity;
  animation: candleFloat var(--dur, 8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* .candle .wax{
  position:absolute; inset:0;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.10) 22%,
      rgba(0,0,0,.10) 55%,
      rgba(255,255,255,.22) 78%,
      rgba(0,0,0,.08) 100%),
    linear-gradient(180deg,
      rgba(255,253,249,.98) 0%,
      rgba(242,230,210,.96) 58%,
      rgba(206,175,135,.92) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    inset 0 -26px 34px rgba(90,55,18,.12),
    0 14px 26px rgba(0,0,0,.55);
  filter: blur(var(--blur, .18px)) brightness(var(--b, 1)) saturate(1.05);
} */

/* melted rim / top concavity */
.candle .wax::before{
  content:"";
  position:absolute;
  left:50%;
  top:-8px;
  width: 132%;
  height: 18px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 62%,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.12) 45%,
      rgba(0,0,0,.22) 72%,
      rgba(0,0,0,0) 76%);
  border-radius: 50%;
  box-shadow:
    inset 0 -2px 6px rgba(0,0,0,.22),
    0 6px 18px rgba(0,0,0,.28);
  opacity: .9;
  filter: blur(calc(var(--blur, .18px) * .6));
}

/* subtle wax texture */
.candle .wax::after{
  content:"";
  position:absolute; inset: 10px 0 0 0;
  border-radius: 999px;
  background:
    radial-gradient(10px 22px at 18% 22%, rgba(255,255,255,.14), rgba(255,255,255,0) 72%),
    radial-gradient(8px 18px at 68% 38%, rgba(0,0,0,.10), rgba(0,0,0,0) 74%),
    radial-gradient(7px 16px at 42% 68%, rgba(255,255,255,.10), rgba(255,255,255,0) 75%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 7px, rgba(0,0,0,0) 7px 21px);
  mix-blend-mode: soft-light;
  opacity: .55;
  pointer-events:none;
  filter: blur(calc(var(--blur, .18px) * .7));
}

.candle .wick{
  position:absolute;
  left:50%;
  top:-6px;
  width:2px;
  height:14px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(25,18,12,.92), rgba(25,18,12,.35));
  border-radius: 1px;
  opacity: var(--wickOp, .55);
  filter: blur(calc(var(--blur, .18px) * .35));
}

.candle .flame{
  position:absolute;
  left:50%;
  top: calc(-26px + var(--flameLift, 0px));
  width: 22px;
  height: 30px;
  transform: translateX(-50%) rotate(var(--flameRot, 0deg));
  border-radius: 50% 50% 55% 55%;
  background:
    radial-gradient(ellipse at 50% 74%,
      rgba(255,232,175,.98) 0%,
      rgba(255,185,95,.78) 42%,
      rgba(255,135,70,.36) 64%,
      rgba(255,135,70,0) 74%),
    radial-gradient(ellipse at 50% 18%,
      rgba(255,255,255,.75) 0%,
      rgba(255,255,255,0) 58%);
  mix-blend-mode: screen;
  opacity: var(--fop, .72);
  filter:
    drop-shadow(0 0 16px rgba(255,190,110,.45))
    drop-shadow(0 0 48px rgba(255,190,110,.18));
  animation: flameFlicker var(--fDur, 1.18s) ease-in-out infinite;
  animation-delay: var(--fDelay, 0s);
  will-change: transform, opacity, filter;
}

@keyframes candleFloat{
  0%,100%{
    transform: translate3d(0,0,0) rotateZ(calc(var(--r, 2deg) * -0.45)) scale(var(--s, 1));
  }
  50%{
    transform: translate3d(var(--dx, 16px), calc(-1 * var(--dy, 18px)), 0)
               rotateZ(calc(var(--r, 2deg) * 0.45)) scale(var(--s, 1));
  }
}

@keyframes flameFlicker{
  0%,100%{
    opacity: var(--fop, .72);
    transform: translateX(-50%) rotate(var(--flameRot, 0deg)) scale(1) scaleY(1);
  }
  35%{
    opacity: calc(var(--fop, .72) - .10);
    transform: translateX(-50%) rotate(var(--flameRot, 0deg)) scale(.95) scaleY(.88);
  }
  70%{
    opacity: calc(var(--fop, .72) + .06);
    transform: translateX(-50%) rotate(var(--flameRot, 0deg)) scale(1.06) scaleY(1.08);
  }
}

@media (prefers-reduced-motion: reduce){
  .candle{ animation: none !important; }
  .candle .flame{ animation: none !important; }
}


    /* Page layout */
    .wrap {
      width:min(1120px, calc(100% - 36px));
      margin: 36px auto 90px;
      display:grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 22px;
      align-items:start;
    }
    @media (max-width: 980px) {
      .wrap { grid-template-columns: 1fr; }
    }

    .panel {
      border: 1px solid rgba(216,178,90,.22);
      background: linear-gradient(180deg, rgba(16,18,36,.86), rgba(8,9,16,.82));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .pad { padding: 22px 22px; }
    .hero {
      padding: 26px 22px 18px;
      border-bottom:1px solid rgba(216,178,90,.16);
      background:
        radial-gradient(420px 260px at 65% 10%, rgba(27,77,138,.22), transparent 70%),
        radial-gradient(360px 240px at 20% 15%, rgba(216,178,90,.18), transparent 70%),
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0));
    }
    .kicker {
      display:flex; gap:10px; align-items:center;
      color: rgba(244,240,232,.85);
      letter-spacing: .18em;
      text-transform: uppercase;
      font-size: 12px;
    }
    .kicker .dot {
      width:6px; height:6px; border-radius:50%;
      background: var(--gold);
      box-shadow: 0 0 18px rgba(216,178,90,.55);
    }
    h1 {
      margin: 10px 0 6px;
      font-size: clamp(32px, 4vw, 54px);
      line-height: 1.05;
      letter-spacing: .05em;
    }

    .hello{
      margin: 2px 0 12px;
      color: rgba(244,240,232,.9);
      letter-spacing: .18em;
      text-transform: uppercase;
      font-size: 12px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .hello:before{
      content:"";
      width:6px; height:6px; border-radius:50%;
      background: rgba(244,240,232,.82);
      box-shadow: 0 0 18px rgba(244,240,232,.22);
      display:inline-block;
    }

    .sub {
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.55;
      max-width: 52ch;
    }
    .chips {
      margin-top: 14px;
      display:flex; flex-wrap:wrap; gap:10px;
    }
    .chip {
      border: 1px solid rgba(216,178,90,.24);
      background: rgba(10,11,20,.55);
      border-radius: 999px;
      padding: 9px 12px;
      color: rgba(244,240,232,.92);
      font-size: 14px;
      display:inline-flex;
      gap:10px;
      align-items:center;
    }
    .chip b { color: var(--gold); font-weight: 700; }
    .btns {
      margin-top: 16px;
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
    }
    .btn {
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(216,178,90,.28);
      background: linear-gradient(180deg, rgba(216,178,90,.18), rgba(216,178,90,.10));
      color: var(--text);
      text-decoration:none;
      font-size: 14px;
      letter-spacing:.02em;
      cursor:pointer;
      user-select:none;
      transition: transform .12s ease, border-color .12s ease, background .12s ease;
    }
    .btn:hover { transform: translateY(-1px); border-color: rgba(216,178,90,.46); }
    .btn.secondary {
      border: 1px solid rgba(244,240,232,.18);
      background: rgba(10,11,20,.52);
    }

    /* Portrait block with overlay robe & wand (image stays untouched) */
    .portrait {
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .photo {
      position:relative;
      border-radius: 20px;
      overflow:hidden;
      border: 1px solid rgba(244,240,232,.12);
      background: rgba(0,0,0,.25);
    }
    .photo img {
      display:block;
      width:100%;
      height:auto;
      transform: translateZ(0);
      filter: contrast(1.02) saturate(1.04);
    }
    .photo .vignette {
      position:absolute; inset:0;
      background: radial-gradient(70% 70% at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,.40) 80%);
      pointer-events:none;
    }
    .photo .overlay {
      position:absolute; inset:0;
      pointer-events:none;
      mix-blend-mode: normal;
      opacity: .98;
    }
    .caption {
      display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
      color: rgba(244,240,232,.82);
      font-size: 13px;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid rgba(216,178,90,.18);
      background: rgba(10,11,20,.45);
    }
    .caption span b { color: var(--gold); font-weight: 700; }

    /* Sections */
    .section {
      border-top: 1px solid rgba(216,178,90,.12);
      padding: 18px 22px 22px;
    }
    .section:first-of-type { border-top:0; }
    h2 {
      margin: 0 0 10px 0;
      font-size: 18px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(244,240,232,.92);
      display:flex; align-items:center; gap:10px;
    }
    .lead {
      margin: 0 0 12px 0;
      color: rgba(244,240,232,.82);
      line-height: 1.65;
      font-size: 15px;
    }
    .grid {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    
    /* Gallery grid (images) */
    .gallery-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (min-width: 860px){
      .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
    }
    .gallery-grid .g{
      display:block;
      border-radius: 16px;
      overflow:hidden;
      border: 1px solid rgba(244,240,232,.12);
      background: rgba(10,11,20,.46);
      box-shadow: 0 10px 28px rgba(0,0,0,.22);
    }
    .gallery-grid img{
      width:100%;
      height: 160px;
      display:block;
      object-fit: cover;
      filter: contrast(1.02) saturate(1.05);
      transform: translateZ(0);
      transition: transform .25s ease;
    }
    .gallery-grid .g:hover img{ transform: scale(1.03); }
    @media (min-width: 860px){
      .gallery-grid img{ height: 190px; }
    }
@media (max-width: 520px) {
      .grid { grid-template-columns: 1fr; }
    }
    .item {
      padding: 14px 14px;
      border-radius: 16px;
      border: 1px solid rgba(244,240,232,.12);
      background: rgba(10,11,20,.46);
    }
    .item .t {
      color: rgba(244,240,232,.72);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .item .v {
      font-size: 15px;
      line-height:1.45;
      color: rgba(244,240,232,.95);
    }
    .item a { color: var(--gold); text-decoration: none; border-bottom:1px dashed rgba(216,178,90,.55); }
    .item a:hover { border-bottom-color: rgba(216,178,90,.95); }

    /* Dress code palette */
    .palette { display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }
    .swatch {
      width:54px; height:54px;
      border-radius: 16px;
      border: 1px solid rgba(244,240,232,.14);
      box-shadow: 0 10px 26px rgba(0,0,0,.35);
    }

    /* RSVP form */
    .form {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }
    .form .full { grid-column: 1 / -1; }
    input, textarea, select {
      width:100%;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(244,240,232,.16);
      background: rgba(6,7,12,.55);
      color: var(--text);
      outline:none;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      font-size: 14px;
    }
    textarea { min-height: 92px; resize: vertical; }
    .fine {
      margin-top: 10px;
      color: rgba(244,240,232,.65);
      font-size: 12px;
      line-height:1.55;
    }

    /* Right column */
    .stack { display:grid; gap: 22px; }
    .story p { margin: 0 0 10px 0; }
    .quote {
      margin-top: 10px;
      padding: 14px 14px;
      border-left: 3px solid rgba(216,178,90,.55);
      background: rgba(10,11,20,.46);
      border-radius: 14px;
      color: rgba(244,240,232,.86);
      line-height: 1.65;
      font-style: italic;
    }

    /* Footer */
    .footer {
      padding: 18px 22px 22px;
      border-top: 1px solid rgba(216,178,90,.12);
      color: rgba(244,240,232,.65);
      font-size: 12px;
      line-height: 1.55;
    }
    .watermark {
      opacity:.55;
      letter-spacing:.18em;
      text-transform: uppercase;
    }

    /* Small SVG icons */
    .ico {
      width:18px; height:18px; display:inline-block;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,.6));
    }