@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Noto+Serif+Thai:wght@500;600;700&display=swap");

:root { --navy:#020b1f; --navy2:#061943; --blue:#174b96; --gold:#d6aa42; --pale:#f2d789; --cream:#fff8e8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:#fffef9; background:var(--navy); font-family:"IBM Plex Sans Thai",Tahoma,sans-serif; }
button,input { font:inherit; }
.site-shell { position:relative; min-height:100vh; overflow:hidden; background:radial-gradient(circle at 18% 27%,rgba(37,100,185,.23),transparent 32rem),radial-gradient(circle at 88% 8%,rgba(214,170,66,.14),transparent 25rem),linear-gradient(150deg,var(--navy),var(--navy2) 48%,#03112c); }
.site-shell::before { position:absolute; inset:0; content:""; pointer-events:none; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
.ambient { position:absolute; border:1px solid rgba(242,215,137,.16); border-radius:50%; pointer-events:none; }
.ambient::before,.ambient::after { position:absolute; inset:10%; content:""; border:inherit; border-radius:inherit; }
.ambient::after { inset:22%; }
.ambient-one { width:540px; height:540px; top:80px; left:-360px; }
.ambient-two { width:420px; height:420px; top:410px; right:-300px; }
.school-bar { position:relative; z-index:2; display:flex; align-items:center; gap:14px; max-width:1180px; margin:auto; padding:26px 28px; border-bottom:1px solid rgba(242,215,137,.2); }
.school-mark { display:grid; flex:none; place-items:center; width:50px; height:50px; color:var(--pale); font-family:"Noto Serif Thai",serif; font-size:12px; font-weight:700; border:1px solid var(--gold); border-radius:50%; box-shadow:inset 0 0 0 4px #061533,inset 0 0 0 5px rgba(214,170,66,.45); }
.school-logo { display:block; flex:none; width:62px; height:76px; object-fit:contain; filter:drop-shadow(0 7px 14px rgba(0,0,0,.28)); }.school-bar p,.school-bar h1 { margin:0; }
.school-bar p { color:#bac8e5; font-size:12px; letter-spacing:.06em; }
.school-bar h1 { color:var(--pale); font-family:"Noto Serif Thai",serif; font-size:clamp(17px,2.2vw,22px); font-weight:600; }
.hero { position:relative; z-index:1; display:grid; grid-template-columns:minmax(300px,.85fr) minmax(360px,1.15fr); align-items:center; gap:clamp(28px,6vw,92px); max-width:1120px; min-height:670px; margin:auto; padding:54px 28px 72px; }
.portrait-panel { position:relative; display:flex; align-items:center; flex-direction:column; }
.portrait-halo { position:absolute; top:6%; left:50%; width:82%; aspect-ratio:1; border:1px solid rgba(242,215,137,.4); border-radius:50%; transform:translateX(-50%); box-shadow:0 0 0 16px rgba(214,170,66,.045),0 0 0 32px rgba(214,170,66,.025),0 0 90px rgba(214,170,66,.16); }
.portrait-frame { position:relative; width:min(100%,390px); padding:9px; overflow:hidden; border:1px solid rgba(242,215,137,.68); border-radius:200px 200px 18px 18px; background:linear-gradient(145deg,rgba(242,215,137,.14),rgba(255,255,255,.02)); box-shadow:0 32px 70px rgba(0,0,0,.38); }
.portrait-frame img { display:block; width:100%; aspect-ratio:399/500; object-fit:cover; border-radius:190px 190px 11px 11px; filter:saturate(.96) contrast(1.03); }
.image-credit { margin:14px 0 0; color:#8999b9; font-size:11px; }
.hero-copy { text-align:center; }
.royal-emblem { display:block; width:clamp(84px,10vw,118px); height:auto; max-height:220px; margin:0 auto 16px; object-fit:contain; filter:drop-shadow(0 10px 24px rgba(0,0,0,.28)); }
.occasion { margin:0 0 9px; color:var(--pale); font-size:clamp(16px,2vw,21px); letter-spacing:.04em; }
.hero-copy h2 { margin:0; color:var(--cream); font-family:"Noto Serif Thai",serif; font-size:clamp(42px,6.1vw,76px); font-weight:600; line-height:1.13; text-shadow:0 4px 30px rgba(0,0,0,.3); }
.date-ribbon { display:inline-flex; align-items:center; gap:15px; margin:25px 0; padding:10px 24px 10px 12px; color:var(--navy); border-radius:999px; background:linear-gradient(115deg,#b88826,#f4d982 42%,#c6952d); box-shadow:0 12px 32px rgba(0,0,0,.26); }
.date-ribbon>span { display:grid; place-items:center; width:60px; height:60px; color:var(--pale); font-family:"Noto Serif Thai",serif; font-size:30px; font-weight:700; border-radius:50%; background:#061533; }
.date-ribbon div { display:flex; align-items:flex-start; flex-direction:column; line-height:1.12; }
.date-ribbon strong { font-family:"Noto Serif Thai",serif; font-size:22px; }
.date-ribbon small { margin-top:5px; font-size:12px; font-weight:600; letter-spacing:.06em; }
.invitation { max-width:630px; margin:auto; color:#cbd5ea; font-size:clamp(15px,1.65vw,18px); font-weight:300; line-height:1.8; }
.long-live { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:26px; color:var(--pale); }
.long-live strong { font-family:"Noto Serif Thai",serif; font-size:clamp(26px,3.5vw,40px); font-weight:600; }
.long-live span { font-size:10px; }
.signing-section { position:relative; z-index:2; padding:0 24px 96px; }
.blessing-card { max-width:820px; margin:auto; padding:clamp(32px,6vw,58px); color:#132145; text-align:center; border:1px solid rgba(242,215,137,.8); border-radius:24px; background:linear-gradient(rgba(255,254,249,.97),rgba(255,248,232,.98)),repeating-linear-gradient(45deg,transparent,transparent 16px,rgba(214,170,66,.1) 16px,rgba(214,170,66,.1) 17px); box-shadow:0 34px 100px rgba(0,0,0,.42); }
.eyebrow { margin:0 0 6px; color:#9a6d18; font-size:13px; font-weight:700; letter-spacing:.08em; }
.blessing-card h2 { margin:0; color:#0a2453; font-family:"Noto Serif Thai",serif; font-size:clamp(27px,4vw,40px); font-weight:700; }
.blessing { max-width:620px; margin:17px auto 0; color:#3f4b67; font-size:16px; line-height:1.8; }
.divider { display:flex; align-items:center; gap:12px; max-width:320px; margin:24px auto 28px; color:#c29330; }
.divider span { flex:1; height:1px; background:linear-gradient(to right,transparent,#c29330); }
.divider span:last-child { background:linear-gradient(to left,transparent,#c29330); }
.divider b { font-size:9px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:left; }
.form-grid label>span { display:block; margin:0 0 7px 3px; color:#253456; font-size:14px; font-weight:600; }
.form-grid input { width:100%; height:54px; padding:0 17px; color:#101b36; border:1px solid #cfd4df; border-radius:12px; outline:none; background:rgba(255,255,255,.76); transition:.2s; }
.form-grid input::placeholder { color:#969dab; }
.form-grid input:focus { border-color:#b7892c; background:#fff; box-shadow:0 0 0 4px rgba(214,170,66,.16); }
.consent { display:flex; align-items:flex-start; gap:10px; margin:18px 2px 22px; color:#5c6578; text-align:left; font-size:13px; line-height:1.55; cursor:pointer; }
.consent input { width:17px; height:17px; margin-top:1px; accent-color:var(--blue); }
button[type=submit] { width:min(100%,350px); min-height:56px; padding:12px 24px; color:var(--cream); font-weight:700; letter-spacing:.03em; border:1px solid #e4c56e; border-radius:999px; cursor:pointer; background:linear-gradient(110deg,#061d47,var(--blue) 58%,#0b2d66); box-shadow:0 12px 28px rgba(11,40,88,.28); transition:.2s; }
button[type=submit]:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 16px 34px rgba(11,40,88,.36); }
button[type=submit]:focus-visible { outline:3px solid rgba(23,75,150,.25); outline-offset:3px; }
button[type=submit]:disabled { cursor:wait; opacity:.65; }
.form-message { min-height:24px; margin-top:14px; font-size:14px; font-weight:600; }
.form-message.success { color:#12733e; }
.form-message.error { color:#b42318; }
footer { position:relative; z-index:1; display:flex; align-items:center; flex-direction:column; gap:7px; padding:50px 24px 56px; color:#aebbd3; text-align:center; border-top:1px solid rgba(242,215,137,.16); }
footer p,footer strong,footer span { margin:0; }
footer p { color:var(--pale); font-family:"Noto Serif Thai",serif; font-size:20px; }
footer strong { max-width:760px; font-size:14px; font-weight:400; }
footer span { color:#d8e0ef; font-size:13px; }
@media(max-width:800px) { .hero{grid-template-columns:1fr;gap:44px;padding-top:42px}.portrait-frame{width:min(82vw,365px)}.hero-copy{order:-1}.invitation{max-width:560px} }
@media(max-width:560px) { .school-bar{padding:19px 18px}.school-logo{width:50px;height:62px}.school-mark{width:44px;height:44px;font-size:10px}.school-bar p{font-size:10px}.hero{min-height:0;padding:36px 18px 62px}.hero-copy h2{font-size:40px}.occasion{font-size:14px}.date-ribbon{gap:11px;margin:20px 0;padding:8px 18px 8px 9px}.date-ribbon>span{width:51px;height:51px;font-size:26px}.date-ribbon strong{font-size:19px}.signing-section{padding:0 13px 60px}.blessing-card{padding:30px 20px;border-radius:18px}.form-grid{grid-template-columns:1fr;gap:13px}footer{padding:42px 20px} }
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important} }