:root{
  --bg:#f3f2f1;
  --ink:#284135;
  --line:#c3c2c0;
  --soft:rgba(40,65,53,.7);
  --serif:"Cormorant Garamond","Noto Serif Thai",Georgia,"Times New Roman",serif;
  --sans:"Jost","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(20px,5vw,56px);
  --sky:clamp(150px,27vw,340px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[lang="th"] body{line-height:1.85}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}

/* bilingual: both languages live in the HTML, CSS shows one */
html[lang="th"] [data-l="en"],
html:not([lang="th"]) [data-l="th"]{display:none!important}
html[lang="th"] :where(.eyebrow,.label,.btn,.lbl,.cbox,.hero-place,.hero-date,.note,.fine,.lang button,.textlink){letter-spacing:.02em;text-transform:none}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(env(safe-area-inset-top,0px) + 18px) var(--gut) 10px;transition:background .25s}
.top.solid{background:rgba(243,242,241,.95)}
.mono{display:flex;flex-direction:column;align-items:center;font-family:var(--serif);font-size:14px;line-height:1.15;text-decoration:none;font-weight:500}
.lang{display:flex;align-items:center;gap:2px;font-family:var(--sans);font-size:12px;letter-spacing:.14em;color:var(--soft)}
.lang button{background:none;border:0;border-bottom:1px solid transparent;font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;padding:10px 8px}
.lang button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:110px var(--gut) calc(var(--sky) + 24px);overflow:hidden}
.eyebrow,.label{font-family:var(--sans);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--soft)}
.eyebrow{margin-bottom:22px}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(46px,12.5vw,132px);line-height:.98;letter-spacing:-.02em;color:var(--ink)}
.amp{font-style:italic;font-weight:400;padding:0 .04em}
.hero-date{margin-top:30px;font-family:var(--serif);font-size:clamp(22px,4.6vw,34px);font-weight:500;line-height:1.25}
.hero-place{margin-top:10px;font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);line-height:1.8}
.textlink{display:inline-block;margin-top:30px;font-family:var(--sans);font-size:12px;letter-spacing:.3em;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:4px}

.skyline{position:absolute;left:0;bottom:0;width:100%;height:var(--sky);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.skyline *{vector-effect:non-scaling-stroke}
.skyline rect,.skyline path{fill:var(--bg);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.skyline .moon{fill:none;stroke:#dcdad7;stroke-width:1}
.skyline .far *{stroke:#d6d4d1}
.skyline .mid *{stroke:#c3c2c0}
.skyline .front *{stroke:#a9a7a2}
.skyline .dash{fill:none;stroke-dasharray:2 5}
.skyline .ground{fill:none;stroke:#c3c2c0}
.skyline .rip{fill:none;stroke:#d0cecb}
.skyline .boat path{fill:none}

/* sections */
.block{padding:clamp(48px,9vh,110px) var(--gut);text-align:center}
.rule{width:1px;height:56px;background:var(--line);margin:0 auto 38px}
.label{margin-bottom:26px}
.bigdate{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--serif);font-weight:500;line-height:1.05}
.bigdate .dow{font-size:clamp(20px,4vw,28px)}
.bigdate .md{font-size:clamp(46px,11vw,104px);letter-spacing:-.02em}
.bigdate .yr{font-size:clamp(20px,4vw,28px);color:var(--soft)}
.note{margin:26px auto 0;font-family:var(--sans);font-size:14px;letter-spacing:.08em;color:var(--soft)}
.lede{max-width:34em;margin:0 auto;font-family:var(--serif);font-weight:500;font-size:clamp(22px,3.6vw,30px);line-height:1.4}
.lede.small{font-size:clamp(19px,3vw,24px);margin-bottom:44px}
.venue{font-family:var(--serif);font-weight:500;font-size:clamp(30px,6.4vw,58px);line-height:1.08;letter-spacing:-.01em}
.venue+.note{margin-bottom:36px}
html[lang="th"] .venue{font-size:clamp(25px,5.2vw,46px);line-height:1.3}
html[lang="th"] .lede{font-size:clamp(20px,3.2vw,26px)}

/* buttons */
.btn{display:inline-block;border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;padding:16px 30px;cursor:pointer;transition:background .2s,color .2s;list-style:none}
.btn::-webkit-details-marker{display:none}
.btn:hover,.cal[open] .btn{background:var(--ink);color:var(--bg)}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:wait}

.cal{margin-top:36px}
.cal ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px;font-family:var(--sans);font-size:14px;letter-spacing:.06em}
.cal a{text-underline-offset:4px}

/* form */
.rsvp{max-width:520px;margin:0 auto;text-align:left}
.field{display:block;margin-bottom:30px;border:0}
.lbl{display:block;margin-bottom:6px;font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select{
  width:100%;font-family:var(--serif);font-size:22px;font-weight:500;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:8px 0;outline:none;-webkit-appearance:none;appearance:none}
.field input:focus,.field select:focus{border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23284135' stroke-width='1.2'/></svg>");
  background-repeat:no-repeat;background-position:right 2px center}
.choices{display:grid;gap:10px;margin-top:10px}
.choice{display:block;position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.cbox{display:block;border:1px solid var(--line);padding:14px 18px;font-family:var(--sans);font-size:14px;letter-spacing:.08em;transition:background .2s,color .2s,border-color .2s}
.choice:hover .cbox{border-color:var(--ink)}
.choice input:checked+.cbox{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.choice input:focus-visible+.cbox{outline:2px solid var(--ink);outline-offset:3px}
.party{display:flex;align-items:flex-end;gap:28px;border:0}
.party .half{flex:1;min-width:0}
.rsvp .btn.solid{width:100%;margin-top:6px}
.fine{margin-top:18px;text-align:center;font-size:12px;letter-spacing:.06em;color:var(--soft)}
.error{margin-top:16px;text-align:center;font-size:14px;color:#8a2d2d}
.success{max-width:520px;margin:0 auto;padding:10px 0}
.success .lede{margin-top:22px;margin-bottom:0}

/* gallery (hidden until photos are added) */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;max-width:1100px;margin:0 auto}
.gallery-grid img{width:100%;height:auto;display:block}

.foot{padding:48px var(--gut) calc(48px + env(safe-area-inset-bottom,0px));text-align:center;border-top:1px solid var(--line);margin:0 var(--gut);
  font-family:var(--sans);font-size:11px;letter-spacing:.28em;color:var(--soft)}

/* gentle reveal, only when JS is running */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease var(--d,0s),transform .8s ease var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
}
@media (max-width:420px){
  .party{gap:18px}
  .hero-place{letter-spacing:.12em}
}