:root {
  --pink:        #d42571;
  --pink-light:  #e05590;
  --pink-deep:   #a81d5a;
  --pink-pale:   rgba(212,37,113,.10);
  --pink-line:   rgba(212,37,113,.22);
  --cream:       #f1e4e6;
  --cream-mid:   #e8d5d9;
  --cream-dark:  #ddc4c9;
  --ink:         #9f1d48;
  --rose:        #6b2040;
  --rose-mid:    #9a4a65;
  --rose-pale:   #c48898;
  --white:       #fdf6f8;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:19.2px; }

body {
  font-family:'Cormorant Garamond', serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
}

/* ════════ HARLEQUIN HERO FRAME ════════ */
.hero-harlequin {
  position:absolute; inset:0; pointer-events:none; z-index:4;
  padding:28px;
  background-color:var(--cream);
  background-image:
    linear-gradient(45deg, var(--pink) 25%, transparent 25%, transparent 75%, var(--pink) 75%),
    linear-gradient(45deg, var(--pink) 25%, transparent 25%, transparent 75%, var(--pink) 75%);
  background-size:22px 22px;
  background-position:0 0, 11px 11px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}

/* Subtle paper grain */
body::before {
  content:''; position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ════════ NAV ════════ */
nav {
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 4rem;
  background:rgba(241,228,230,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--pink-line);
}
.nav-logo {
  font-family:'Ballet',cursive; font-size:1.3rem;
  color:var(--pink); letter-spacing:.02em;
}
.nav-links { display:flex; gap:3rem; list-style:none; }
.nav-links a {
  font-size:.54rem; font-weight:400; letter-spacing:.28em; text-transform:uppercase;
  text-decoration:none; color:var(--rose); transition:color .3s;
}
.nav-links a:hover { color:var(--pink); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
.hamburger span { display:block; width:22px; height:1px; background:var(--pink); }
.mobile-nav {
  display:none; position:fixed;
  inset:0;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index:210; background:var(--cream);
  flex-direction:column; align-items:center; justify-content:center; gap:2.5rem;
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
  font-family:'Ballet',cursive; font-size:3.2rem;
  color:var(--ink); text-decoration:none; transition:color .25s;
}
.mobile-nav a:hover { color:var(--pink); }
.mnav-close {
  position:absolute; top:1.5rem; right:2.5rem; font-size:2rem;
  background:none; border:none; color:var(--rose-mid); cursor:pointer;
}

/* ════════ HERO ════════ */
#home {
  min-height:93vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  background:linear-gradient(145deg, #fdf0f3 0%, #f9e0e7 40%, #f5d5de 100%);
}

/* Champagne bubbles canvas */
#bubbles-canvas {
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;
}


/* Champagne glasses — top center of hero */
.illus-champagne {
  position:absolute; top:2.5rem; left:50%; transform:translateX(-50%);
  z-index:3; opacity:.22; pointer-events:none;
  width:420px;
}

/* Big Ben — centered behind hero text */
.illus-bigben {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  z-index:1; opacity:.13; pointer-events:none;
  width:340px;
}

/* Corner ornaments */
.illus-corner { position:absolute; z-index:2; opacity:.18; pointer-events:none; width:160px; }
.illus-corner-tl { top:0; left:0; }
.illus-corner-tr { top:0; right:0; transform:scaleX(-1); }
.illus-corner-bl { bottom:0; left:0; transform:scaleY(-1); }
.illus-corner-br { bottom:0; right:0; transform:scale(-1); }

/* Bus illustration — floating in hero left */
.illus-bus-hero {
  position:absolute; bottom:3.5rem; left:3rem; z-index:2;
  opacity:.20; pointer-events:none;
  width:182px;
}

.hero-inner {
  position:relative; z-index:3; text-align:center;
  padding:5rem 3rem 6rem;
}

.hero-pre {
  display:flex; align-items:center; justify-content:center; gap:1.4rem;
  margin-bottom:2.4rem; opacity:0; animation:fadeUp .8s ease .25s forwards;
}
.hero-pre span { font-size:.5rem; letter-spacing:.3em; text-transform:uppercase; color:var(--pink); }
.pre-line { width:55px; height:1px; background:var(--pink-line); }
.pre-gem { width:5px; height:5px; background:var(--pink); transform:rotate(45deg); }

.hero-title {
  font-family:'Ballet',cursive;
  font-size:clamp(5.5rem, 14vw, 13.5rem);
  color:var(--ink); line-height:.86; margin-bottom:.3rem;
  opacity:0; animation:fadeUp 1s ease .5s forwards;
}

.hero-script {
  font-family:'Ballet',cursive;
  font-size:clamp(2.3rem, 5.5vw, 5.8rem);
  color:var(--pink);
  opacity:0; animation:fadeUp 1s ease .72s forwards;
  margin-bottom:3.5rem;
}

.hero-sep {
  display:flex; align-items:center; justify-content:center;
  gap:1.2rem; margin-bottom:3rem;
  opacity:0; animation:fadeUp .8s ease .92s forwards;
}
.hsep-line { flex:1; max-width:90px; height:1px; background:var(--pink-line); }
.hsep-orn { font-size:.65rem; color:var(--pink); letter-spacing:.7em; opacity:.7; }

.hero-details {
  display:inline-grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--pink-line); border-radius:2px; overflow:hidden;
  opacity:0; animation:fadeUp .9s ease 1.1s forwards;
}
.hd-item {
  padding:1.4rem 2.5rem; border-right:1px solid var(--pink-line); text-align:center;
  background:rgba(255,255,255,.35);
}
.hd-item:last-child { border-right:none; }
.hd-label { font-size:.48rem; letter-spacing:.26em; text-transform:uppercase; color:var(--pink); margin-bottom:.5rem; }
.hd-value { font-size:.86rem; font-weight:500; letter-spacing:.05em; color:var(--rose); }

.scroll-hint {
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  z-index:3;
  opacity:0; animation:fadeUp .8s ease 1.5s forwards;
}
.scroll-hint span { font-size:.44rem; letter-spacing:.26em; text-transform:uppercase; color:var(--rose-pale); }
.scroll-line { width:1px; height:48px; background:linear-gradient(var(--pink),transparent); animation:linePulse 2.5s ease infinite; }

/* ════════ SECTION BASE ════════ */
.s-wrap { padding:7rem 4rem; position:relative; }
.s-inner { max-width:1120px; margin:0 auto; }

.s-eyebrow {
  display:flex; align-items:center; gap:1.4rem; margin-bottom:1rem;
}
.s-eyebrow span { font-size:.5rem; letter-spacing:.3em; text-transform:uppercase; color:var(--pink); }
.s-eyebrow::before { content:'◆'; font-size:.3rem; color:var(--pink); opacity:.6; }
.s-eyebrow::after  { content:''; flex:1; height:1px; background:var(--pink-line); }

.s-title {
  font-family:'Ballet',cursive;
  font-size:clamp(3.5rem, 7vw, 7.5rem);
  color:var(--ink); line-height:.9; margin-bottom:3.5rem;
}

/* ════════ EXPÉRIENCE ════════ */
#experience { background:var(--cream); overflow:hidden; }

/* Phone box — decorative left side of experience section */
.illus-phone-wrap {
  position:absolute; top:5rem; left:1.5rem;
  opacity:.20; pointer-events:none; z-index:0;
  width:130px;
}

.exp-intro {
  font-size:.8rem; font-weight:400; letter-spacing:.04em; line-height:2.15;
  color:#6c3447; max-width:660px; margin-bottom:4.5rem;
  position:relative; z-index:1;
  background:rgba(241,228,230,.7);
}

/* Photo mosaic */
.photo-mosaic {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  grid-template-rows:min(220px, 19.5vw) min(220px, 19.5vw);
  gap:.7rem; margin-bottom:5.5rem;
  border-radius:4px; overflow:visible; position:relative; z-index:1;
}
.pm-tall { grid-row:1/3; }
.pm-item {
  position: relative;
  overflow:hidden;
  border: 12px solid transparent;
  border-image-source: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect x='1' y='1' width='38' height='38' fill='none' stroke='%23d42571' stroke-width='1'/><rect x='5' y='5' width='30' height='30' fill='none' stroke='%23d42571' stroke-width='1'/><rect x='9' y='9' width='22' height='22' fill='none' stroke='%23d42571' stroke-width='1'/></svg>");
  border-image-slice: 12;
  border-image-repeat: stretch;
  box-shadow: 3px 6px 18px rgba(0,0,0,0.3);
}
.pm-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(221, 196, 201, 0.5);
  pointer-events: none;
  z-index: 1;
}
.pm-item img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.92) brightness(1.02);
  opacity:1;
  transform:scale(1.12);
  will-change:transform;
}
.pm-item:hover img { filter:saturate(1.1); }

/* Parallax-Animationen */
@keyframes pm-drift-a {
  0%,100% { transform:scale(1.12) translate(0,0); }
  25%      { transform:scale(1.12) translate(-3%,2%); }
  50%      { transform:scale(1.12) translate(2%,3%); }
  75%      { transform:scale(1.12) translate(3%,-2%); }
}
@keyframes pm-drift-b {
  0%,100% { transform:scale(1.12) translate(0,0); }
  30%     { transform:scale(1.12) translate(3%,3%); }
  60%     { transform:scale(1.12) translate(-2%,2%); }
  85%     { transform:scale(1.12) translate(1%,-3%); }
}
@keyframes pm-drift-c {
  0%,100% { transform:scale(1.12) translate(0,0); }
  20%     { transform:scale(1.12) translate(2%,-3%); }
  55%     { transform:scale(1.12) translate(-3%,1%); }
  80%     { transform:scale(1.12) translate(1%,3%); }
}

.pm-item:nth-child(1) img { animation:pm-drift-a 18s ease-in-out infinite; }
.pm-item:nth-child(2) img { animation:pm-drift-b 14s ease-in-out 2s infinite; }
.pm-item:nth-child(3) img { animation:pm-drift-c 16s ease-in-out 1s infinite; }
.pm-item:nth-child(4) img { animation:pm-drift-a 20s ease-in-out 3s infinite reverse; }
.pm-item:nth-child(5) img { animation:pm-drift-b 15s ease-in-out 4s infinite; }
.pm-item:nth-child(6) img { animation:pm-drift-c 17s ease-in-out 1.5s infinite reverse; }
.pm-item:nth-child(7) img { animation:pm-drift-a 13s ease-in-out 2.5s infinite; }

/* Day blocks */
.day-block {
  margin-bottom:1.8rem;
  border:1px solid var(--pink-line); border-radius:2px;
  background:var(--white); overflow:hidden; position:relative; z-index:1;
  box-shadow:inset 0 0 0 4px var(--white), inset 0 0 0 5px var(--pink-line);
}
.day-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.7rem 2.4rem;
  background:linear-gradient(90deg, #f9eaee, #fdf4f6);
  border-bottom:1px solid var(--pink-line);
}
.day-left { display:flex; align-items:center; gap:1.4rem; }
.day-num {
  font-family:'Ballet',cursive; font-size:3.8rem;
  color:var(--pink); opacity:.18; line-height:1;
  min-width:3ch; display:inline-block; overflow:visible;
}
.day-name { font-size:.96rem; font-weight:600; letter-spacing:.06em; color:var(--ink); }
.day-date { font-size:.55rem; letter-spacing:.16em; color:var(--rose-pale); margin-top:.2rem; }
.day-tag  { font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; color:var(--pink); font-style:italic; }

.ev-row {
  display:grid; grid-template-columns:125px 1fr; padding:1.7rem 2.4rem;
  border-bottom:1px solid rgba(212,37,113,.06); gap:2rem; transition:background .2s;
}
.ev-row:last-child { border-bottom:none; }
.ev-row:hover { background:rgba(212,37,113,.03); }

.ev-time { font-size:.86rem; font-weight:600; letter-spacing:.04em; color:var(--rose); padding-top:2px; }
.ev-title {
  font-size:.98rem; font-weight:600; letter-spacing:.05em; color:var(--ink); margin-bottom:.4rem;
}
.ev-desc {
  font-size:.74rem; font-weight:400; letter-spacing:.03em; line-height:1.9; color:var(--rose-mid);
}
.ev-desc strong { color:var(--rose); font-weight:600; }
.ev-desc em     { color:var(--pink); font-style:italic; }

.ev-map {
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.95rem;
  font-size:.52rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pink); text-decoration:none;
  border:1px solid var(--pink-line); padding:.38rem 1rem; border-radius:100px;
  transition:all .3s;
}
.ev-map:hover { background:var(--pink); color:white; border-color:var(--pink); }

/* Bus illustration between day blocks */
.illus-bus-section {
  display:flex; justify-content:flex-start; margin:1.5rem 0;
  opacity:.20; pointer-events:none;
}
.illus-bus-section svg { width:260px; }

/* ════════ PHOTOS ════════ */
#photos { background:#fdf0f3; overflow:clip; }

/* Phone box left of photos */
.illus-phone-photos {
  position:absolute; bottom:3rem; left:3rem;
  opacity:.20; pointer-events:none;
  width:104px;
}

.gal-intro {
  font-size:.78rem; font-weight:400; letter-spacing:.04em; line-height:2.1;
  color:var(--rose-mid); max-width:640px; margin-bottom:.8rem;
}
.gal-note {
  font-size:.74rem; color:var(--pink); font-style:italic; letter-spacing:.04em; margin-bottom:3rem;
}

.lock-box {
  max-width:420px; margin:0 auto;
  border:1px solid var(--pink-line); border-radius:2px;
  padding:4rem 2.8rem; text-align:center;
  background:white; position:relative;
  box-shadow:inset 0 0 0 4px white, inset 0 0 0 5px var(--pink-line);
}
.lock-box::before {
  content:'♡'; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:white; padding:0 .8rem; color:var(--pink); font-size:1rem;
}
.lock-orn { font-size:1.8rem; color:var(--pink); opacity:.35; margin-bottom:1.4rem; }
.lock-title {
  font-family:'Ballet',cursive; font-size:2.6rem; color:var(--ink); margin-bottom:.4rem;
}
.lock-sub {
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rose-pale); margin-bottom:2.4rem; font-weight:400;
}
.lock-row { display:flex; max-width:300px; margin:0 auto; }
.lock-input {
  flex:1; padding:.85rem 1.1rem;
  border:1px solid var(--cream-dark); border-right:none;
  border-radius:2px 0 0 2px;
  font-size:.78rem; letter-spacing:.08em; font-family:'Cormorant Garamond',serif;
  background:var(--cream); color:var(--ink); outline:none; transition:border-color .3s;
}
.lock-input:focus { border-color:var(--pink); }
.lock-btn {
  background:var(--pink); color:white; border:none;
  padding:0 1.4rem; border-radius:0 2px 2px 0;
  font-family:'Cormorant Garamond',serif; font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; transition:background .25s;
}
.lock-btn:hover { background:var(--pink-deep); }
.lock-err { font-size:.68rem; color:#c0392b; margin-top:.8rem; display:none; letter-spacing:.05em; }

.gal-grid { display:none; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.gal-grid.on { display:grid; }
.gal-item { aspect-ratio:1; overflow:hidden; border-radius:2px; position:relative; }
.gal-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s, filter .4s, opacity .4s; opacity:.20; }
.gal-item:hover img { transform:scale(1.05); filter:saturate(1.1); opacity:.85; }
.gal-dl {
  position:absolute; bottom:.6rem; right:.6rem;
  background:rgba(253,246,248,.9); border:1px solid var(--pink-line);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; opacity:0; transition:opacity .3s; text-decoration:none;
}
.gal-item:hover .gal-dl { opacity:1; }
.gal-dl svg { width:13px; height:13px; stroke:var(--pink); fill:none; stroke-width:2; stroke-linecap:round; }
.gal-after { display:none; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; text-align:center; margin-top:2rem; color:var(--rose-pale); }

/* ════════ INFO ════════ */
#info { background:var(--cream); overflow:hidden; }

/* Big Ben deco in info section */
.illus-bigben-info {
  position:absolute; bottom:0; right:3rem;
  opacity:.20; pointer-events:none; z-index:0; width:143px;
}

.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; position:relative; z-index:1; }
.info-card {
  border:1px solid var(--pink-line); border-radius:2px;
  padding:2.4rem 2rem; background:white; transition:transform .3s, box-shadow .3s;
  box-shadow:inset 0 0 0 4px white, inset 0 0 0 5px var(--pink-line);
}
.info-card:hover {
  transform:translateY(-4px);
  box-shadow:inset 0 0 0 4px white, inset 0 0 0 5px var(--pink-line), 0 18px 50px rgba(212,37,113,.1);
}
.ic-orn  { font-size:1.2rem; color:var(--pink); opacity:.4; margin-bottom:1.2rem; }
.ic-cat  { font-size:.48rem; letter-spacing:.24em; text-transform:uppercase; color:var(--pink); margin-bottom:.5rem; }
.ic-title { font-size:1.08rem; font-weight:600; letter-spacing:.05em; color:var(--ink); margin-bottom:.9rem; }
.ic-text  { font-size:.73rem; font-weight:400; letter-spacing:.03em; line-height:1.9; color:var(--rose-mid); margin-bottom:.5rem; }
.ic-row   { font-size:.72rem; letter-spacing:.03em; color:var(--rose); margin-bottom:.35rem; }
.ic-row strong { font-weight:600; color:var(--ink); }
.ic-link {
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.2rem;
  font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; color:var(--pink);
  text-decoration:none; border-bottom:1px solid var(--pink-line); padding-bottom:2px;
  transition:opacity .25s;
}
.ic-link:hover { opacity:.6; }
.pack-list { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.pack-list li {
  font-size:.74rem; font-weight:400; letter-spacing:.03em; color:var(--rose);
  display:flex; align-items:flex-start; gap:.7rem; line-height:1.55;
}
.pack-list li::before {
  content:'◆'; font-size:.42rem; color:var(--pink); flex-shrink:0; margin-top:.3rem;
}

/* ════════ FAQ ════════ */
#faq { background:var(--cream-mid); overflow:hidden; }

/* Phone box decoration in FAQ */
.illus-phone-faq {
  position:absolute; top:4rem; left:3rem;
  opacity:.20; pointer-events:none; width:117px;
}

.faq-item { border-bottom:1px solid var(--pink-line); }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:1.55rem 0; background:none; border:none; cursor:pointer;
  font-family:'Cormorant Garamond',serif; font-size:.88rem; font-weight:500; letter-spacing:.04em;
  color:var(--ink); text-align:left; gap:1rem; transition:color .25s;
}
.faq-q:hover,.faq-q.open { color:var(--pink); }
.faq-tog {
  width:26px; height:26px; flex-shrink:0;
  border:1px solid var(--pink-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.88rem; color:var(--rose-pale); user-select:none; transition:all .3s;
}
.faq-q.open .faq-tog { background:var(--pink); border-color:var(--pink); color:white; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .45s ease, padding-bottom .3s; }
.faq-a.open { max-height:700px; padding-bottom:1.8rem; }
.faq-a-inner {
  font-size:.75rem; font-weight:400; letter-spacing:.03em;
  line-height:1.95; color:var(--rose-mid);
}
.faq-a-inner strong { color:var(--rose); font-weight:600; }
.faq-a-inner ul { margin-top:.8rem; padding-left:1.4rem; }
.faq-a-inner ul li { margin-bottom:.55rem; }
.faq-a-inner a { color:var(--pink); text-decoration:none; }
.faq-a-inner a:hover { text-decoration:underline; }

/* ════════ FOOTER ════════ */
footer {
  background:var(--ink);
  padding:2.8rem 4rem;
  display:flex; align-items:center; justify-content:space-between;
}
.footer-logo { font-family:'Ballet',cursive; font-size:1.4rem; color:var(--pink); }
.footer-hearts { font-size:.85rem; color:var(--pink); letter-spacing:.5em; opacity:.6; }
.footer-copy { font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.2); }

/* ════════ ANIMATIONS ════════ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes linePulse { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes floatA { 0%,100%{transform:translateY(0px)} 50%{transform:translateY(-8px)} }
@keyframes floatB { 0%,100%{transform:translateY(0px)} 50%{transform:translateY(-12px)} }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s ease, transform .75s ease; }
.reveal.on { opacity:1; transform:none; }
.stagger > * { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.stagger.on > *:nth-child(1){opacity:1;transform:none;transition-delay:.05s}
.stagger.on > *:nth-child(2){opacity:1;transform:none;transition-delay:.18s}
.stagger.on > *:nth-child(3){opacity:1;transform:none;transition-delay:.31s}

/* 1px stroke on all illustrations */
[class*="illus-"] svg { stroke-width:0.5px; }

/* Float illustrations */
.float-a { animation:floatA 6s ease-in-out infinite; }
.float-b { animation:floatB 8s ease-in-out infinite; }
.float-c { animation:floatA 10s ease-in-out 2s infinite; }

/* ════════ GALLERY SYSTEM ════════ */

/* Gate */
.gal-gate { display:flex; justify-content:center; padding:1rem 0 2rem; }
.gate-card {
  background:var(--white); border:1px solid var(--pink-line); border-radius:2px;
  padding:2rem 2.5rem; text-align:center; max-width:400px; width:100%;
  animation:fadeUp .5s ease;
}
.gate-icon { color:var(--pink); opacity:.5; margin-bottom:1.4rem; }
.gate-title { font-family:'Ballet',cursive; font-size:2.4rem; color:var(--ink); margin-bottom:.3rem; }
.gate-sub { font-size:.58rem; letter-spacing:-.1em; text-transform:uppercase; color:var(--rose-mid); margin-bottom:2rem; }
.gate-input-row { display:flex; max-width:300px; margin:0 auto; }
.gate-input {
  flex:1; padding:.85rem 1rem; border:1px solid var(--cream-dark); border-right:none;
  border-radius:2px 0 0 2px; font-family:'Cormorant Garamond',serif; font-size:.78rem;
  letter-spacing:.1em; background:var(--cream); color:var(--ink); outline:none; transition:border-color .3s;
}
.gate-input:focus { border-color:var(--pink); }
.gate-submit {
  background:var(--pink); border:none; padding:0 1.2rem; border-radius:0 2px 2px 0;
  color:white; cursor:pointer; transition:background .25s; display:flex; align-items:center;
}
.gate-submit:hover { background:var(--pink-deep); }
.gate-error { font-size:.65rem; color:#c0392b; margin-top:.8rem; opacity:0; transition:opacity .3s; letter-spacing:.05em; }
.gate-error.show { opacity:1; animation:shake .4s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* Gallery content */
.gal-content { animation:fadeUp .6s ease; }

/* Toolbar */
.gal-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; flex-wrap:wrap; gap:.6rem; background:rgba(241,228,230,.92); backdrop-filter:blur(14px); padding:.6rem 0; }
.gal-toolbar.is-sticky { padding:.6rem 4rem; border-bottom:1px solid var(--pink-line); }
.gal-toolbar-left, .gal-toolbar-right { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.gal-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 1rem; border:1px solid var(--pink-line); border-radius:2px;
  background:var(--white); color:var(--rose); font-family:'Cormorant Garamond',serif;
  font-size:.52rem; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:all .25s; white-space:nowrap;
}
.gal-btn:hover { background:var(--cream); border-color:var(--pink); color:var(--pink); }
.gal-btn.active { background:var(--pink); border-color:var(--pink); color:white; }
.gal-btn-upload { background:var(--pink); border-color:var(--pink); color:white; }
.gal-btn-upload:hover { background:var(--pink-deep); border-color:var(--pink-deep); color:white; }
.gal-btn-dl { color:var(--rose); }
.gal-btn-dl:disabled { opacity:.4; cursor:not-allowed; }
.gal-btn-dl:disabled:hover { background:var(--white); border-color:var(--pink-line); color:var(--rose); }
.gal-btn-cancel { padding:.55rem; border-radius:50%; width:34px; height:34px; justify-content:center; }
.gal-sel-count { font-size:.52rem; letter-spacing:.12em; color:var(--rose-mid); padding:0 .4rem; }

/* Grid container */
.gal-container { position:relative; overflow:visible; border-radius:2px; }
.gal-container::-webkit-scrollbar { width:4px; }
.gal-container::-webkit-scrollbar-thumb { background:var(--pink-line); border-radius:2px; }
.gal-grid-new { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.gal-scroll-hint { text-align:center; padding:.8rem; font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rose-pale); opacity:0; transition:opacity .3s; }
.gal-scroll-hint.show { opacity:1; }

/* Grid items */
.gal-item-new { position:relative; aspect-ratio:1; overflow:hidden; cursor:pointer; background:var(--cream-mid); }
.gal-item-new img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease, opacity .4s; opacity:0; }
.gal-item-new.loaded img { opacity:1; }
.gal-item-new:hover img { transform:scale(1.04); }

/* Shimmer auf noch nicht geladene Kacheln */
@keyframes shimmer { 0%,100%{ background-color:var(--cream-mid); } 50%{ background-color:var(--cream-dark); } }
.gal-item-new:not(.loaded)::after {
  content:''; position:absolute; inset:0;
  animation:shimmer 1.6s ease-in-out infinite;
}
.gal-item-overlay { display:none; }
.gal-item-dl { display:none; }

/* Select mode */
.gal-grid-new.select-mode .gal-item-new::before {
  content:''; position:absolute; top:8px; left:8px; width:22px; height:22px;
  border-radius:50%; border:1px solid rgba(212,37,113,.5); background:rgba(253,246,248,.6);
  backdrop-filter:blur(4px); z-index:2; transition:all .2s;
}
.gal-grid-new.select-mode .gal-item-new.selected::before { background:var(--pink); border-color:var(--pink); }
.gal-grid-new.select-mode .gal-item-new.selected::after {
  content:''; position:absolute; top:13px; left:13px; width:5px; height:9px;
  border:solid white; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); z-index:3;
}
.gal-grid-new.select-mode .gal-item-new.selected img { opacity:.7; transform:scale(.96); }
.gal-grid-new.select-mode .gal-item-new.selected { outline:2px solid var(--pink); outline-offset:-2px; }

/* Empty state */
.gal-empty { text-align:center; padding:4rem 2rem; color:var(--rose-mid); }
.gal-empty-icon { color:var(--pink); opacity:.3; margin-bottom:1.2rem; }
.gal-empty p { font-size:.9rem; font-weight:600; letter-spacing:.05em; color:var(--ink); margin-bottom:.4rem; }
.gal-empty span { font-size:.65rem; letter-spacing:.1em; color:var(--rose-pale); }

/* Modals */
.gal-modal { position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; }
.gal-modal.open { display:flex; }
.gal-modal-bg { position:absolute; inset:0; background:rgba(26,8,14,.5); backdrop-filter:blur(6px); }
.gal-modal-box {
  position:relative; z-index:1; background:var(--white); border:1px solid var(--pink-line);
  border-radius:2px; padding:2.5rem; max-width:500px; width:92%; max-height:88vh;
  overflow-y:auto; animation:fadeUp .35s ease;
}
.gal-modal-box h3 { font-family:'Ballet',cursive; font-size:2.2rem; color:var(--ink); margin-bottom:.2rem; }
.gal-modal-desc { font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--rose-pale); margin-bottom:1.5rem; }
.gal-modal-close { position:absolute; top:1rem; right:1.2rem; background:none; border:none; color:var(--rose-mid); font-size:1.8rem; cursor:pointer; line-height:1; }
.gal-modal-close:hover { color:var(--pink); }

/* Dropzone */
.gal-dropzone {
  border:1px dashed var(--pink-line); border-radius:2px; padding:2.5rem 1.5rem;
  text-align:center; cursor:pointer; transition:all .3s; color:var(--rose-mid);
}
.gal-dropzone:hover, .gal-dropzone.over { border-color:var(--pink); background:var(--pink-pale); color:var(--ink); }
.gal-dropzone p { font-size:.72rem; letter-spacing:.05em; margin-top:.8rem; }

/* Upload preview */
.gal-preview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:1rem; }
.gal-preview-item { position:relative; aspect-ratio:1; border-radius:2px; overflow:hidden; }
.gal-preview-item img { width:100%; height:100%; object-fit:cover; }
.gal-preview-rm {
  position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%;
  background:rgba(26,8,14,.55); border:none; color:white; font-size:.7rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.gal-preview-rm:hover { background:var(--danger, #c0392b); }
.gal-upload-actions { margin-top:1.5rem; }
.gal-upload-hint { font-size:.58rem; letter-spacing:.06em; line-height:1.7; color:var(--rose-mid); margin-bottom:.9rem; text-align:center; background:rgba(212,37,113,.06); border-radius:2px; padding:.6rem .8rem; }
.gal-upload-btn {
  width:100%; padding:.85rem; border:none; border-radius:2px; background:var(--pink);
  color:white; font-family:'Cormorant Garamond',serif; font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; cursor:pointer; transition:background .25s;
}
.gal-upload-btn:hover { background:var(--pink-deep); }
.gal-upload-btn:disabled { opacity:.5; cursor:not-allowed; }
.gal-upload-progress { margin-top:.6rem; height:2px; background:var(--cream-dark); border-radius:1px; overflow:hidden; display:none; }
.gal-upload-progress.on { display:block; }
.gal-upload-bar { height:100%; background:var(--pink); width:0%; transition:width .3s; }
.gal-upload-status { font-size:.58rem; letter-spacing:.1em; color:var(--rose-mid); margin-top:.5rem; text-align:center; }

/* PhotoViewer scroll-snap track */
.pv-track {
  position:absolute; inset:0;
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.pv-track::-webkit-scrollbar { display:none; }
.pv-slide {
  flex:0 0 100%; scroll-snap-align:start;
  display:flex; align-items:center; justify-content:center;
  height:100%;
}
.pv-image {
  max-width:90vw; max-height:82vh;
  object-fit:contain; border-radius:2px;
  user-select:none; -webkit-user-drag:none;
  box-shadow:0 20px 60px rgba(26,8,14,.5);
  transition:opacity .2s ease;
}
/* Placeholder state: stretch the cached thumb to fill the lightbox */
.pv-image.pv-loading {
  width:90vw; height:82vh;
  box-shadow:none;
  filter:blur(3px);
  opacity:.8;
}

/* Lightbox */
.gal-lightbox { z-index:600; }
.gal-lb-wrap { position:relative; width:100%; height:100%; overflow:hidden; z-index:1; }
.gal-lb-close { position:absolute; top:1rem; right:1.5rem; background:none; border:none; color:rgba(253,246,248,.8); font-size:2rem; cursor:pointer; z-index:5; }
.gal-lb-close:hover { color:white; }
.gal-lb-img-wrap { max-width:90vw; max-height:82vh; display:flex; align-items:center; justify-content:center; }
.gal-lb-img-wrap img { max-width:100%; max-height:82vh; object-fit:contain; border-radius:2px; box-shadow:0 20px 60px rgba(26,8,14,.5); }
.gal-lb-nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  background:rgba(253,246,248,.1); backdrop-filter:blur(8px);
  border:1px solid rgba(253,246,248,.2); border-radius:50%;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:rgba(253,246,248,.8); transition:all .25s;
}
.gal-lb-nav:hover { background:rgba(253,246,248,.2); color:white; }
.gal-lb-prev { left:1rem; }
.gal-lb-next { right:1rem; }
.gal-lb-footer {
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:1.2rem;
  background:rgba(26,8,14,.45); backdrop-filter:blur(10px);
  border:1px solid rgba(212,37,113,.2); border-radius:2px; padding:.5rem 1.2rem; z-index:5;
}
.gal-lb-footer span { font-size:.6rem; letter-spacing:.16em; color:rgba(253,246,248,.7); }
.gal-lb-footer button { background:none; border:none; color:rgba(253,246,248,.7); cursor:pointer; display:flex; align-items:center; padding:.2rem; }
.gal-lb-footer button:hover { color:white; }

/* Download progress overlay */
.gal-dl-overlay {
  position:fixed; inset:0; z-index:700;
  background:rgba(26,8,14,.6); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
}
.gal-dl-overlay.open { display:flex; }
.gal-dl-card { text-align:center; padding:2rem; }
.gal-dl-ring { position:relative; width:64px; height:64px; margin:0 auto 1.2rem; display:flex; align-items:center; justify-content:center; }
.gal-dl-ring span { position:absolute; font-size:.72rem; font-weight:600; letter-spacing:.04em; color:var(--pink); }
.gal-dl-card p { font-family:'Cormorant Garamond',serif; font-size:.72rem; letter-spacing:.12em; color:rgba(253,246,248,.9); margin-bottom:.3rem; }
.gal-dl-card span { font-size:.6rem; letter-spacing:.1em; color:rgba(253,246,248,.5); }
#galDlNext { margin-top:1rem; background:var(--pink); color:#fff; border:none; border-radius:2px; padding:.6rem 1.4rem; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }

/* Toast */
.gal-toast {
  position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:var(--white); padding:.7rem 1.4rem;
  border:1px solid var(--pink-line); border-radius:2px;
  font-family:'Cormorant Garamond',serif; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  z-index:800; opacity:0; transition:all .3s; white-space:nowrap;
}

/* ════════ PHOTOS & INFO — ink colour ════════ */
#photos h1, #photos h2, #photos .s-title,
#photos .gal-intro,
#photos .gal-note,
#photos .lock-title,
#photos .lock-sub,
#info h1, #info h2, #info .s-title,
#info .ic-cat,
#info .ic-title,
#info .ic-text,
#info .ic-row,
#info .ic-row strong { color:#9f1d48 !important; }

/* ════════ RESPONSIVE ════════ */
@media(max-width:900px){
  .hero-harlequin { padding:14px; background-size:16px 16px; background-position:0 0, 8px 8px; }
  .nav-links{display:none} .hamburger{display:flex}
  .s-wrap{padding:4.5rem 2rem}
  .hero-inner{padding:4rem 2rem 5rem}
  .hero-details{grid-template-columns:1fr;border:none}
  .illus-corner{width:90px}
  .illus-champagne{width:260px;top:3rem}
  .illus-bigben{width:220px}
  .hd-item{border-right:none;border-bottom:1px solid var(--pink-line);padding:1rem 1.5rem;background:rgba(255,255,255,.35)}
  .hd-item:last-child{border-bottom:none}
  .ev-row{grid-template-columns:95px 1fr;padding:1.3rem 1.4rem;gap:1rem}
  .day-hdr{padding:1.3rem 1.4rem}
  .info-grid{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr 1fr}
  .illus-bigben,.illus-bus-hero{display:none}

  /* Gallery edge-to-edge auf Mobile */
  #photos .s-inner { padding:0; }
  #photos .s-eyebrow,
  #photos .s-title,
  #photos .gal-intro,
  #photos .gal-note,
  #photos .gal-gate { padding-left:2rem; padding-right:2rem; }
  .gal-toolbar { padding:0 1rem; }
  .gal-container {
    border-radius:0;
    width:100vw;
    margin-left:-2rem;
  }
  .gal-grid-new { gap:2px; }
  .gal-empty { padding:3rem 2rem; }

  /* Pfeile auf Mobile verstecken — User wischt */
  .gal-lb-nav { display:none; }

  /* Bilder fullscreen wie iPhone Photos, 3px Abstand zum Rand */
  .pv-slide { align-items:center; justify-content:center; }
  .pv-image {
    max-width:calc(100vw - 6px);
    max-height:calc(100vh - 6px);
    border-radius:0;
    box-shadow:none;
  }
  .pv-image.pv-loading {
    width:calc(100vw - 6px);
    height:calc(100vh - 6px);
    filter:blur(2px);
  }
  footer{flex-direction:column;gap:1rem;text-align:center;padding:2rem}
  nav{padding:1rem 1.5rem}

  /* Gate card identisch wie Desktop */
  .gal-gate {
    width: calc(100% + 4rem);
    margin-left: -2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

}
@media(max-width:449px){
  #experience { overflow:visible; }
  .photo-mosaic {
    display:block; position:relative;
    height:520px; margin-bottom:5rem;
    width:100vw; margin-left:-2rem;
    overflow:visible;
  }
  #home {
    max-height: 95vh;
  }
  .pm-item {
    position:absolute;
    width:140px; height:125px;
    border: 10px solid transparent;
    border-image-source: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect x='1' y='1' width='38' height='38' fill='none' stroke='%23d42571' stroke-width='1'/><rect x='5' y='5' width='30' height='30' fill='none' stroke='%23d42571' stroke-width='1'/><rect x='9' y='9' width='22' height='22' fill='none' stroke='%23d42571' stroke-width='1'/></svg>");
    border-image-slice: 12;
    border-image-repeat: stretch;
    box-shadow: 3px 5px 14px rgba(0,0,0,0.35);
    overflow:hidden; border-radius:0;
  }
  .pm-item img { width:100%; height:100%; object-fit:cover; opacity:1; animation:none; transform:none; }
  .pm-tall { grid-row:unset; width:148px; height:168px; position:absolute; }
  .pm-item:nth-child(1) { top:55px;  left:2%;   z-index:4; width:148px; height:168px; }
  .pm-item:nth-child(2) { top:5px;   left:36%;  z-index:6; width:105px; height:95px;  }
  .pm-item:nth-child(3) { top:0;     right:2%;  z-index:5; width:148px; height:118px; }
  .pm-item:nth-child(4) { top:180px; left:28%;  z-index:7; width:168px; height:148px; }
  .pm-item:nth-child(5) { top:145px; right:2%;  z-index:3; width:98px;  height:90px;  }
  .pm-item:nth-child(6) { top:250px; right:2%;  z-index:2; width:98px;  height:88px;  }
  .pm-item:nth-child(7) { top:355px; left:8%;   z-index:1; width:152px; height:108px; }
}