* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --black:#0a0a0a;
  --white:#ffffff;
  --cream:#f7f5f1;
  --muted:#888;
  --accent:#c9a96e;
  --paper:#f4f1ec;
  --paper-2:#eae6df;
}
html, body { background:#fff; color:#111; font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

.hidden { display:none !important; }

/* ===== ENVELOPE (white, triangular flaps) ===== */
.envelope {
  position:fixed; inset:0; z-index:50;
  background:var(--paper);
  overflow:hidden;
}
/* Background paper texture */
.envelope::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, #faf8f4 0%, #ece7dd 100%);
  z-index:0;
}

.env-top, .env-bottom, .env-left, .env-right {
  position:absolute; inset:0;
  transition:transform 1.4s cubic-bezier(.7,0,.25,1), opacity 1.2s ease;
  z-index:2;
  background:linear-gradient(135deg,#f6f3ee 0%, #e6e0d5 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.06);
}
/* Triangular flaps via clip-path */
.env-top    { clip-path: polygon(0 0, 100% 0, 50% 50%); }
.env-bottom { clip-path: polygon(0 100%, 100% 100%, 50% 50%);
  background:linear-gradient(315deg,#f6f3ee 0%, #e2dccf 100%);}
.env-left   { clip-path: polygon(0 0, 0 100%, 50% 50%);
  background:linear-gradient(90deg,#ece6db 0%, #f6f3ee 100%);}
.env-right  { clip-path: polygon(100% 0, 100% 100%, 50% 50%);
  background:linear-gradient(270deg,#ece6db 0%, #f6f3ee 100%);}

/* Subtle seam lines */
.env-seams{
  position:absolute; inset:0; z-index:3; pointer-events:none;
}
.env-seams::before, .env-seams::after{
  content:""; position:absolute; left:50%; top:50%;
  width:150vmax; height:1px; background:rgba(0,0,0,.06);
  transform-origin:center;
}
.env-seams::before{ transform:translate(-50%,-50%) rotate(45deg); }
.env-seams::after { transform:translate(-50%,-50%) rotate(-45deg); }

.env-content {
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#444; padding:20px;
  transition:opacity .6s ease;
}
.env-title {
  font-family:'Italianno',cursive; font-size:58px; color:#9a9a9a; opacity:.85; margin-bottom:10px;
  letter-spacing:2px;
}
.env-sub {
  font-family:'Inter',sans-serif; font-size:12px; letter-spacing:5px; color:#5a4a3a; margin-bottom:48px;
  font-weight:500;
}
.seal-btn {
  background:none; border:none; cursor:pointer; padding:0;
  animation:floaty 4s ease-in-out infinite;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.25));
}
.seal-img { width:170px; height:170px; object-fit:contain; }
.env-hint {
  margin-top:38px; font-size:11px; letter-spacing:3px; color:#888; line-height:1.8;
  text-transform:lowercase;
}
@keyframes floaty {
  0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);}
}

/* OPEN STATE — top flies up, bottom down, sides fade aside */
.envelope.opening .env-top    { transform:translateY(-100%); }
.envelope.opening .env-bottom { transform:translateY(100%); }
.envelope.opening .env-left   { transform:translateX(-100%); opacity:0; }
.envelope.opening .env-right  { transform:translateX(100%); opacity:0; }
.envelope.opening .env-content{ opacity:0; }
.envelope.opening .env-seams  { opacity:0; transition:opacity .4s; }
.envelope.gone { display:none; }

/* ===== INVITATION ===== */
.invitation { background:#fff; color:#0a0a0a; animation:fadeIn .8s ease; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

/* HERO */
.hero {
  position:relative; width:100%; height:100vh; min-height:600px; overflow:hidden;
}
.hero-img {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:grayscale(100%) contrast(1.05);
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.85) 100%);
}
.hero-bottom {
  position:absolute; bottom:0; left:0; right:0;
  padding:40px 24px 50px;
  text-align:center; color:#fff;
}
.hero-eyebrow {
  font-size:11px; letter-spacing:6px; opacity:.85; margin-bottom:18px;
}
.hero-names {
  font-family:'Cormorant Garamond',serif;
  font-weight:300; font-size:54px; line-height:1.05;
  letter-spacing:2px;
}
.hero-names span {
  font-family:'Italianno',cursive; font-weight:400;
  font-size:62px; color:#fff; margin:0 6px;
  opacity:.9;
}
.hero-date {
  margin-top:14px; font-family:'Cormorant Garamond',serif;
  font-size:20px; letter-spacing:8px; font-weight:300; opacity:.95;
}

/* SECTIONS */
.section {
  padding:80px 28px;
  text-align:center;
  max-width:560px; margin:0 auto;
}
.section-eyebrow {
  font-size:11px; letter-spacing:5px; color:#888; margin-bottom:14px;
}
.section-title {
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:36px; margin-bottom:36px; letter-spacing:1px;
}
.ornament { font-size:16px; color:#999; margin:14px auto; letter-spacing:6px; }

/* BLESSING */
.blessing-text {
  font-family:'Cormorant Garamond',serif;
  font-style:italic; font-weight:300;
  font-size:22px; line-height:1.7; color:#1a1a1a;
  margin:24px 0 36px;
}
.invite-text {
  font-size:15px; line-height:1.9; color:#444; font-weight:300;
}

/* COUNTDOWN */
.countdown-section {
  position:relative; width:100%; height:90vh; min-height:560px; overflow:hidden;
}
.cd-img {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:grayscale(100%);
}
.cd-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.55));
}
.cd-content {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:0 16px 60px; color:#fff; text-align:center;
}
.cd-title {
 font-family: 'Kotayk', 'Cormorant Garamond', serif; font-size:38px; margin-bottom:32px;
  letter-spacing:1px; color:#f5f5f5;
}
.cd-grid {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; max-width:480px;
}
.cd-cell { display:flex; flex-direction:column; align-items:center; flex:1; }
.cd-num {
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:38px; line-height:1; color:#fff;
}
.cd-label {
  font-size:10px; letter-spacing:3px; margin-top:8px; color:#ddd; text-transform:lowercase;
}
.cd-sep { color:rgba(255,255,255,.5); font-weight:300; font-size:28px; padding-bottom:18px; }

/* CALENDAR */
.calendar {
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px;
  max-width:360px; margin:0 auto;
  font-family:'Cormorant Garamond',serif;
}
.cal-h {
  font-size:11px; letter-spacing:2px; color:#999; padding:8px 0; font-family:'Inter',sans-serif;
  text-transform:uppercase;
}
.cal-d {
  padding:10px 0; font-size:16px; color:#222; position:relative;
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
}
.cal-d.empty { color:transparent; }
.cal-d.highlight {
  position:relative; color:#7a5a3a;
}
.cal-d.highlight::before {
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23b08a64' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M16 27 S4 19 4 11 a6 6 0 0 1 12 -2 a6 6 0 0 1 12 2 c0 8 -12 16 -12 16 z'/></svg>");
  background-repeat:no-repeat; background-position:center;
  background-size:108% 108%;
  z-index:0;
}
.cal-d.highlight span {
  position:relative; z-index:1; color:#7a5a3a; font-weight:500;
  font-family:'Cormorant Garamond',serif; font-size:15px;
  transform:translateY(1px);
}

/* TIMELINE */
.timeline { list-style:none; max-width:420px; margin:0 auto; text-align:left; }
.timeline li {
  display:flex; gap:24px; padding:18px 0;
  border-bottom:1px solid #eee;
}
.timeline li:last-child { border-bottom:none; }
.t-time {
  font-family:'Cormorant Garamond',serif;
  font-size:22px; color:#888; min-width:60px; padding-top:2px;
}
.t-body h3 {
  font-family:'Cormorant Garamond',serif; font-weight:500;
  letter-spacing:3px; font-size:15px; color:#0a0a0a; margin-bottom:4px;
}
.t-body p, .t-body a {
  font-size:13px; color:#666; font-weight:300;
}

/* FOOTER */
.footer {
  background:#0a0a0a;
   color:#fff;
    text-align:center;
  padding:60px 20px;
}
.footer-names {
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:36px; letter-spacing:2px;
}
.footer-names span {
  font-family:'Italianno',cursive; font-size:44px; color:#eee; margin:0 4px;
}
.footer-date {
  margin-top:10px; font-size:13px; letter-spacing:6px; color:#aaa;
}
.footer .ornament { color:#555; }

@media (max-width: 380px) {
  .hero-names { font-size:44px; }
  .hero-names span { font-size:52px; }
  .cd-num { font-size:30px; }
  .cd-sep { font-size:22px; }
  .seal-img { width:140px; height:140px; }
  .env-title { font-size:48px; }
}

/* ===== KOTAYK FONT ===== */
@font-face {
  font-family: 'Kotayk';
  src: url('fonts/Kotayk-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Kotayk';
  src: url('fonts/Kotayk-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
.env-title, .hero-names, .section-title, .footer-names {
  font-family: 'Kotayk', 'Cormorant Garamond', serif;
}
.hero-names span, .footer-names span { font-family:'Kotayk','Italianno',cursive; }

/* ===== MUSIC BUTTON ===== */
.music-btn {
  position:fixed; top:18px; right:18px; z-index:100;
  width:44px; height:44px; border-radius:50%;
  background:rgba(60,60,60,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.15);
  color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s, background .2s;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.music-btn:hover { transform:scale(1.08); background:rgba(80,80,80,.7); }
.music-btn svg { width:20px; height:20px; }
.music-btn.muted svg { opacity:.5; }
.music-btn.muted::after{
  content:""; position:absolute; left:8px; right:8px; top:50%;
  height:2px; background:#fff; transform:rotate(-35deg); border-radius:2px;
}

/* ===== RSVP ===== */
.rsvp-form {
  max-width:380px; margin:0 auto; text-align:left;
  display:flex; flex-direction:column; gap:28px;
}
.rsvp-field { display:flex; flex-direction:column; gap:10px; }
.rsvp-label {
  font-size:13px; letter-spacing:1.5px; color:#333;
  font-weight:500; margin-bottom:4px;
}
.rsvp-input {
  width:100%; padding:12px 0; border:none;
  border-bottom:1px solid #ccc; background:transparent;
  font-family:'Inter',sans-serif; font-size:15px; color:#0a0a0a;
  outline:none; transition:border-color .2s;
}
.rsvp-input:focus { border-bottom-color:#0a0a0a; }
.rsvp-radio {
  display:flex; align-items:center; gap:12px;
  font-size:15px; color:#222; cursor:pointer;
  padding:8px 0;
}
.rsvp-radio input[type="radio"] {
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; border:1.5px solid #888;
  border-radius:50%; position:relative; cursor:pointer;
  flex-shrink:0; transition:border-color .2s;
}
.rsvp-radio input[type="radio"]:checked {
  border-color:#0a0a0a;
}
.rsvp-radio input[type="radio"]:checked::after {
  content:""; position:absolute; inset:3px;
  background:#0a0a0a; border-radius:50%;
}
.rsvp-submit {
  margin-top:8px; padding:14px 24px;
  background:#0a0a0a; color:#fff; border:none;
  font-family:'Inter',sans-serif; font-size:12px;
  letter-spacing:4px; cursor:pointer;
  transition:background .2s;
}
.rsvp-submit:hover { background:#333; }
.rsvp-thanks {
  margin-top:16px; text-align:center;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:18px; color:#7a5a3a;
}

.gallary-3{
    display: flex;
    gap: 8px;
}

.gallary-3 > div{
    flex: 1;
}

.gallary-3 img{
    width: 100%;
    display: block;
    object-fit: cover;
}

.gallary-3 > div:first-child{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gallary-3 > div:first-child img{
    height: calc(50% - 4px);
}

.gallary-3 > div:last-child img{
    height: 100%;
}