/* Minimalist — Black & White, Swiss Design */
:root{--black:#0A0A0A;--white:#FAFAFA;--gray:#888;--gray-light:#DDD;--gray-dark:#333;--accent:#0A0A0A;--font-display:'Syne',sans-serif;--font-mono:'Space Mono',monospace}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-mono);font-size:15px;line-height:1.7;color:var(--black);background:var(--white)}

/* Hero */
.x-hero{min-height:100vh;display:flex;align-items:center;padding:4rem 2rem;border-bottom:1px solid var(--gray-light)}
.x-hero-grid{display:grid;grid-template-columns:1fr 200px;gap:3rem;width:100%;max-width:1000px;margin:0 auto;align-items:center}
.x-hero-main{position:relative}
.x-hero-date-v{position:absolute;left:-2.5rem;top:50%;transform:translateY(-50%) rotate(-90deg);font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.15em;color:var(--gray);white-space:nowrap}
.x-hero-name{font-family:var(--font-display);font-size:clamp(4rem,12vw,8rem);font-weight:800;line-height:0.9;text-transform:uppercase;letter-spacing:-0.03em}
.x-hero-plus{font-family:var(--font-display);font-size:2.5rem;font-weight:300;color:var(--gray);margin:0.3rem 0}
.x-hero-side{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--gray-light);padding-left:2rem}
.x-hero-meta{display:flex;flex-direction:column;gap:0.3rem;font-size:0.78rem;color:var(--gray);letter-spacing:0.05em}

/* Nav */
.x-nav{position:sticky;top:0;z-index:100;display:flex;gap:0;border-bottom:1px solid var(--gray-light);background:var(--white);overflow-x:auto}
.x-nav a{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;color:var(--gray);padding:0.8rem 1.2rem;border-right:1px solid var(--gray-light);transition:all 0.3s;white-space:nowrap}
.x-nav a:hover{background:var(--black);color:var(--white)}

/* Sections */
.x-section{padding:5rem 2rem;border-bottom:1px solid var(--gray-light)}
.x-section-inv{background:var(--black);color:var(--white);border-bottom-color:#222}
.x-container{max-width:800px;margin:0 auto}
.x-section-label{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gray);margin-bottom:2.5rem}

/* Details Grid */
.x-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--gray-light)}
.x-detail{padding:1.2rem 1.5rem;border-bottom:1px solid var(--gray-light);border-right:1px solid var(--gray-light);transition:background 0.3s}
.x-detail:hover{background:rgba(0,0,0,0.02)}
.x-detail:nth-child(2n){border-right:none}
.x-detail-label{display:block;font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--gray);margin-bottom:0.2rem}
.x-detail-value{font-family:var(--font-display);font-size:1.1rem;font-weight:600}

/* Program */
.x-program{display:flex;flex-direction:column;gap:0}
.x-pg{display:flex;gap:2rem;padding:1.5rem 0;border-bottom:1px solid #333;align-items:baseline}
.x-pg-t{font-family:var(--font-mono);font-size:0.85rem;color:var(--gray);min-width:55px}
.x-pg strong{font-family:var(--font-display);font-size:1.1rem;font-weight:600}
.x-pg span{font-size:0.85rem;color:var(--gray)}

/* Story */
.x-story{display:flex;flex-direction:column;gap:3rem}
.x-story-block{display:grid;grid-template-columns:80px 1fr;gap:1rem;align-items:start}
.x-story-year{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--gray-light);line-height:1}
.x-story-block h3{font-family:var(--font-display);font-size:1.2rem;font-weight:700;margin-bottom:0.3rem}
.x-story-block p{color:var(--gray);font-size:0.9rem}

/* Countdown */
.x-countdown{display:flex;justify-content:center;align-items:baseline;gap:0.3rem}
.x-cd{text-align:center}
.x-cd span{display:block;font-family:var(--font-display);font-size:5rem;font-weight:800;color:var(--white);line-height:1}
.x-cd small{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.2em;color:var(--gray)}
.x-cd-sep{font-family:var(--font-display);font-size:3rem;color:#444;margin:0 0.2rem}

/* Gallery */
.x-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;grid-auto-rows:200px}
.x-gal{overflow:hidden}
.x-gal-lg{grid-column:span 2}
.x-ph{width:100%;height:100%;background:#EEE;transition:background 0.3s}
.x-gal:hover .x-ph{background:#DDD}

/* RSVP */
.x-form{display:flex;flex-direction:column;gap:0}
.x-form input,.x-form textarea{width:100%;padding:1rem;font-family:var(--font-mono);font-size:0.9rem;border:none;border-bottom:1px solid var(--gray-light);background:transparent;transition:border-color 0.3s}
.x-form input:focus,.x-form textarea:focus{outline:none;border-color:var(--black)}
.x-rsvp-row{display:flex;gap:0}
.x-rsvp-row label{flex:1;cursor:pointer}
.x-rsvp-row input{display:none}
.x-rsvp-row span{display:block;padding:1rem;text-align:center;font-family:var(--font-mono);font-size:0.85rem;border-bottom:1px solid var(--gray-light);border-right:1px solid var(--gray-light);transition:all 0.3s}
.x-rsvp-row label:last-child span{border-right:none}
.x-rsvp-row input:checked+span{background:var(--black);color:var(--white)}
.x-btn{padding:1rem;font-family:var(--font-mono);font-size:0.88rem;font-weight:700;letter-spacing:0.08em;border:none;background:var(--black);color:var(--white);cursor:pointer;transition:all 0.3s;text-transform:uppercase}
.x-btn:hover{background:var(--gray-dark);letter-spacing:0.15em}

/* Footer */
.x-footer{display:flex;justify-content:space-between;padding:1.5rem 2rem;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;color:var(--gray);border-top:1px solid var(--gray-light)}

@media(max-width:768px){.x-hero-grid{grid-template-columns:1fr}.x-hero-side{border-left:none;border-top:1px solid var(--gray-light);padding-left:0;padding-top:1.5rem}.x-hero-date-v{display:none}.x-hero-name{font-size:4rem}.x-detail-grid{grid-template-columns:1fr}.x-detail{border-right:none}.x-story-block{grid-template-columns:1fr}.x-story-year{font-size:1.3rem}.x-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.x-gal-lg{grid-column:span 1}.x-cd span{font-size:3rem}.x-footer{flex-direction:column;gap:0.3rem}.x-section{padding:3rem 1.5rem}}
