:root { --ink:#2b2a27; --muted:#6f6a61; --paper:#faf7f2; --line:#e4ddd0; --accent:#8a5a3c; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  html, body { overflow-x:clip; }
  body { margin:0; background:var(--paper); color:var(--ink); font:18px/1.65 Cardo, Georgia, serif; }
  a { color:var(--accent); }
  img { display:block; max-width:100%; }

  nav { position:sticky; top:0; z-index:1; background:var(--paper); border-bottom:1px solid var(--line);
        display:flex; flex-wrap:wrap; justify-content:center; gap:4px 24px; padding:12px 16px; }
  nav a { color:var(--ink); text-decoration:none; font-size:14px; letter-spacing:.12em; text-transform:uppercase; }
  nav a:hover, nav a:focus-visible { color:var(--accent); }
  /* menu links: drop in one by one on load; on hover a line draws out from the center and a small blossom pops above */
  nav a { position:relative; display:inline-block; padding:4px 0; transition:color .3s, transform .4s cubic-bezier(.34,1.56,.64,1); animation:nav-in .7s cubic-bezier(.2,.7,.2,1) backwards; }
  nav a:nth-child(1) { animation-delay:70ms; } nav a:nth-child(2) { animation-delay:140ms; } nav a:nth-child(3) { animation-delay:210ms; } nav a:nth-child(4) { animation-delay:280ms; } nav a:nth-child(5) { animation-delay:350ms; } nav a:nth-child(6) { animation-delay:420ms; } nav a:nth-child(7) { animation-delay:490ms; } nav a:nth-child(8) { animation-delay:560ms; }
  @keyframes nav-in { from { opacity:0; transform:translateY(-10px); } }
  nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent); transform:scaleX(0); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
  nav a::before { content:"\273F"; position:absolute; left:50%; top:-9px; font-size:11px; line-height:1; letter-spacing:0; color:#e58fa0; opacity:0;
                  transform:translate(-50%,6px) scale(0) rotate(-120deg); transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
  nav a:hover, nav a:focus-visible { transform:translateY(-2px); }
  nav a:hover::after, nav a:focus-visible::after { transform:scaleX(1); }
  nav a:hover::before, nav a:focus-visible::before { opacity:1; transform:translate(-50%,0) scale(1) rotate(0deg); }
  @media (prefers-reduced-motion: reduce) { nav a, nav a::before, nav a::after { animation:none; transition:none; } }

  header { text-align:center; }
  header img { width:100%; height:min(78vh,760px); object-fit:cover; object-position:center 60%; }
  .hero { position:relative; overflow:hidden; height:min(78vh,760px); }
  /* video sits over the photo, sized to cover; the photo shows until it starts and if it never does */
  .hero iframe { position:absolute; top:50%; left:50%; width:max(100%, calc(min(78vh,760px) * 16 / 9)); aspect-ratio:16/9;
                 transform:translate(-50%,-50%); border:0; pointer-events:none; opacity:0; transition:opacity 1.2s; }
  .hero iframe.playing { opacity:1; }
  #herotoggle { position:absolute; inset:0; width:100%; background:none; border:0; padding:0; cursor:pointer; }
  #herotoggle:focus-visible { outline:3px solid var(--paper); outline-offset:-6px; }
  @media (prefers-reduced-motion: reduce) { .hero iframe, #herotoggle { display:none; } }
  h1 { font-weight:400; font-size:clamp(44px,9vw,84px); line-height:1.05; margin:48px 16px 12px; }
  h1 em { color:var(--accent); }
  .when { letter-spacing:.14em; text-transform:uppercase; font-size:15px; color:var(--muted); margin:0 16px; }
  #countdown { margin:28px 16px 32px; animation:rise 1.4s ease-out both; }
  #countdown .num { display:block; font-size:clamp(64px,12vw,96px); line-height:1; font-style:italic; color:var(--accent); font-variant-numeric:tabular-nums; }
  #countdown .label { display:inline-flex; align-items:center; gap:14px; margin-top:10px; font-size:14px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
  #countdown .label::before, #countdown .label::after { content:""; width:44px; height:1px; background:var(--accent); animation:draw 1.6s .5s ease-out both; }
  #countdown .label::before { transform-origin:right; }
  #countdown .label::after { transform-origin:left; }
  #countdown .heart { display:block; margin-top:8px; color:var(--accent); font-size:32px; font-style:normal; animation:beat 2.4s 2s ease-in-out infinite; }
  #countdown.wait { opacity:0; }
  #countdown.wait, #countdown.wait * , #countdown.wait .label::before, #countdown.wait .label::after { animation-play-state:paused; }
  @keyframes rise { from { opacity:0; transform:translateY(14px); } }
  @keyframes draw { from { transform:scaleX(0); } }
  @keyframes beat { 0%,100% { transform:scale(1); } 12% { transform:scale(1.3); } 24% { transform:scale(1); } 36% { transform:scale(1.2); } 48% { transform:scale(1); } }
  @media (prefers-reduced-motion: reduce) { #countdown, #countdown * , #countdown .label::before, #countdown .label::after { animation:none; } }

  .btn { display:inline-block; padding:13px 34px; background:var(--ink); color:var(--paper); text-decoration:none;
         letter-spacing:.14em; text-transform:uppercase; font-size:14px; border:1px solid var(--ink); }
  .btn:hover, .btn:focus-visible { background:var(--accent); border-color:var(--accent); }
  .btn.ghost { background:none; color:var(--ink); }
  .btn.ghost:hover, .btn.ghost:focus-visible { background:var(--accent); color:var(--paper); }

  .bloom { position:relative; display:inline-block; }
  .bloom .btn { position:relative; z-index:1; transition:background .4s, border-color .4s, letter-spacing .5s, transform .5s cubic-bezier(.34,1.56,.64,1); }
  .bloom .btn:hover, .bloom .btn:focus-visible { letter-spacing:.3em; transform:scale(1.08); }
  .bloom .btn:active { transform:scale(.96); }
  .bloom svg { position:absolute; width:38px; height:38px; pointer-events:none; opacity:.95;
               transform:translate(-50%,-50%) scale(0) rotate(-120deg);
               transition:transform .7s cubic-bezier(.34,1.56,.64,1); transition-delay:calc(var(--i) * 45ms); }
  .bloom:hover svg, .bloom:focus-within svg, .bloom.open svg { transform:translate(-50%,-50%) scale(var(--s)) rotate(var(--r)); }
  form .bloom { justify-self:center; }
  @media (prefers-reduced-motion: reduce) { .bloom svg, .bloom .btn { transition:none; } }

  /* every button: lifts with a soft shadow, a band of light sweeps across it, and it presses in when clicked */
  .btn { position:relative; overflow:hidden; transition:background .4s, color .4s, border-color .4s, letter-spacing .5s, box-shadow .5s, transform .5s cubic-bezier(.34,1.56,.64,1); }
  .btn::after { content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%; pointer-events:none;
                background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-20deg); transition:left .9s ease; }
  .btn:hover::after, .btn:focus-visible::after { left:125%; }
  .btn:hover, .btn:focus-visible { transform:translateY(-3px); box-shadow:0 10px 22px rgba(138,90,60,.24); letter-spacing:.2em; }
  .btn:active { transform:translateY(0) scale(.96); box-shadow:none; transition-duration:.1s; }
  /* every text link: its underline swells into a soft rose highlight */
  :is(section, .event, .credits) a:not(.btn):not(:has(img)) { text-decoration:none; padding:0 2px;
    background:linear-gradient(#f3d3d8, #f3d3d8) 0 100% / 100% 2px no-repeat; transition:background-size .35s ease, color .3s; }
  :is(section, .event, .credits) a:not(.btn):not(:has(img)):is(:hover, :focus-visible) { background-size:100% 100%; color:var(--ink); }
  @media (prefers-reduced-motion: reduce) { .btn, .btn::after, section a { transition:none; } }

  section { max-width:760px; margin:0 auto; padding:clamp(88px,14vw,140px) 20px 0; scroll-margin-top:40px; }
  h2 { font-weight:400; font-size:36px; text-align:center; margin:0 0 28px; }
  h2::after { content:""; display:block; width:48px; height:1px; background:var(--accent); margin:14px auto 0; }
  h3 { font-size:20px; margin:28px 0 4px; }
  p { margin:0 0 12px; }
  .center { text-align:center; }
  .muted { color:var(--muted); }

  .event { border:1px solid var(--line); background:#fff; padding:28px 20px; text-align:center; margin-bottom:16px; }
  .event .date { letter-spacing:.14em; text-transform:uppercase; font-size:14px; color:var(--accent); }
  .event h3 { margin:6px 0; font-size:26px; font-weight:400; }


  .gifts { margin:28px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
  .gift { border:1px solid var(--line); background:#fff; padding:12px 12px 20px; text-align:center; display:flex; flex-direction:column; gap:10px; }
  .gift h3 { margin:0; font-weight:400; font-size:22px; }
  .gift .btn { margin-top:auto; }
  .gift .zelle { margin:0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .gift img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin-bottom:8px; }
  .gift p { margin:0; }
  .gift { transition:transform .6s ease, box-shadow .6s ease, border-color .6s; }
  .gift:hover, .gift:focus-within { transform:translateY(-5px); box-shadow:0 16px 34px rgba(138,90,60,.16); border-color:#e7c3c9; }
  /* button label gently trades places with a thank-you */
  .btn.care { display:grid; }
  .btn.care span { grid-area:1/1; transition:opacity .5s, transform .5s; }
  .btn.care span:last-child { opacity:0; transform:translateY(10px); }
  .btn.care:hover span:first-child, .btn.care:focus-visible span:first-child { opacity:0; transform:translateY(-10px); }
  .btn.care:hover span:last-child, .btn.care:focus-visible span:last-child { opacity:1; transform:none; }
  .btn.care:hover, .btn.care:focus-visible { background:#c9727f; border-color:#c9727f; }
  @media (prefers-reduced-motion: reduce) { .gift, .btn.care span { transition:none; } }

  /* scroll-linked reveal: scroll.js sets --p (0 to 1) from the scroll position; without it everything is simply visible */
  .rise { opacity:var(--p, 1);
          transform:translateY(calc((1 - var(--p, 1)) * 46px)) scale(calc(.94 + .06 * var(--p, 1))) rotate(calc((1 - var(--p, 1)) * var(--tilt, 0deg))); }
  .rise:not(.done) { transition:none !important; }
  .measuring .rise { transform:none !important; }

  /* background vectors: a fixed layer behind the page; each drifts upward and turns slowly with the scroll position (--sy) */
  .flora { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
  .flora > svg { position:absolute; fill:none; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; opacity:.3;
               transform:translateY(calc(var(--sy, 0) * var(--k) * -1px)) rotate(calc(var(--rot) + var(--sy, 0) * var(--spin) * 1deg)); }
  .flora .sprig { stroke:var(--accent); }
  .flora .blossom { stroke:#e58fa0; }
  /* the two of us, walking along the bottom of the screen (moved by scroll.js) */
  .couple { position:absolute; left:0; bottom:8px; width:clamp(84px, 11vw, 132px); }
  .couple svg { display:block; width:100%; overflow:visible; fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; opacity:.6; }
  .couple .heart { fill:#e58fa0; stroke:none; opacity:0; transform-origin:65px 26px; }
  h2.rise::after { transform:scaleX(var(--p, 1)); }

  .spots { display:grid; gap:14px; margin-top:32px; counter-reset:spot; }
  .spot { border:1px solid var(--line); background:#fff; counter-increment:spot; }
  .spot img { width:100%; aspect-ratio:16/9; object-fit:cover; }
  .spot-body { position:relative; padding:22px 22px 22px 84px; }
  .spot-body::before { content:counter(spot); position:absolute; left:0; top:16px; width:84px; text-align:center; font-size:44px; line-height:1.1; font-style:italic; color:var(--accent); }
  .spot h3 { margin:0 0 2px; font-weight:400; font-size:24px; line-height:1.25; }
  .spot .where { margin:0 0 10px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .spot p:last-child { margin:0; }
  .credits { max-width:760px; margin:72px auto 0; padding:0 20px; font-size:13px; line-height:1.6; color:var(--muted); text-align:center; }
  @media (max-width:480px) { .spot-body { padding:20px 18px 20px 60px; } .spot-body::before { width:60px; font-size:34px; top:20px; } }

  #gallery { max-width:1100px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap:10px; }
  .grid img { width:100%; height:auto; }
  .grid img { position:relative; transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s; }
  .grid img:hover { transform:scale(1.045) rotate(-1deg); box-shadow:0 18px 40px rgba(43,42,39,.28); z-index:1; }
  @media (prefers-reduced-motion: reduce) { .grid img { transition:none; } .grid img:hover { transform:none; } }

  form { display:grid; gap:18px; }
  label, legend { display:block; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:0; }
  input[type=text], input[type=email], input[type=number], textarea {
    display:block; width:100%; margin-top:6px; padding:12px; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; }
  fieldset { border:0; margin:0; padding:0; }
  .choice { display:inline-block; margin:8px 24px 0 0; font-size:18px; letter-spacing:0; text-transform:none; color:var(--ink); }
  button.btn { cursor:pointer; font-family:inherit; justify-self:center; }
  .hp { display:none; }
  input[type=tel] { display:block; width:100%; margin-top:6px; padding:12px; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; }
  input[readonly] { background:#f1ece3; color:var(--muted); }
  .find { margin:0 0 28px; border:1px solid var(--line); background:#fff; padding:14px 18px; }
  .find summary { cursor:pointer; text-align:center; color:var(--accent); }
  .find form { margin-top:18px; }
  .find .btn { justify-self:center; cursor:pointer; font-family:inherit; }
  #find-status:empty { display:none; }
  .hint { margin:8px 0 2px; font-size:17px; line-height:1.5; letter-spacing:0; text-transform:none; color:var(--ink); }
  fieldset[hidden] { display:none; }
  .hotel-details { display:grid; gap:14px; margin-top:16px; }
  input[type=date] { display:block; width:100%; margin-top:6px; padding:11px 12px; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; }
  .guest { border:1px solid var(--line); background:#fff; padding:16px 18px 18px; display:grid; gap:14px; }
  .guest[hidden] { display:none; }
  .guest legend { padding:0 8px; color:var(--accent); }
  .pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:480px) { .pair { grid-template-columns:1fr; } }
  .declining .party-size, .declining .diet { display:none; }
  #thanks { display:none; text-align:center; font-size:22px; color:var(--accent); scroll-margin-top:80px; }
  #thanks:target { display:block; }

  footer { text-align:center; padding:clamp(88px,14vw,140px) 20px 56px; color:var(--muted); font-style:italic; }

  .map { display:block; width:100%; height:420px; border:1px solid var(--line); margin:24px 0; }
  .venue-photo { width:auto; height:auto; max-width:100%; max-height:85vh; margin:0 auto 16px; }