@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Italiana&display=swap');

:root{--ink:#0b0d0d;--paper:#eeeae4;--white:#f7f5f0;--teal:#008c8f;--deep-teal:#063b3d;--orange:#ef6100;--line:#0b0d0d30;--display:"Italiana",Georgia,serif;--sans:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#171918}
body{margin:0;color:var(--ink);font:16px var(--sans);background:#171918}
body.locked{overflow:hidden}
button,input{font:inherit}
a{color:inherit}
h1,h2,h3,p{text-wrap:balance}
h1,h2,h3{font-family:var(--display);font-weight:400}
p{line-height:1.75}
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
main{width:min(100%,560px);margin:auto;overflow:hidden;background:var(--paper);box-shadow:0 0 80px #0008}
.panel{position:relative;min-height:100svh;padding:84px 42px;display:flex;flex-direction:column;justify-content:center}
.paper{background:var(--paper)}
.ink{color:var(--white);background:var(--ink)}
.number,.eyebrow{margin:0 0 34px;font-size:.7rem;letter-spacing:.23em;text-transform:uppercase;font-weight:500}
.number{color:var(--teal)}
h2{margin:0 0 28px;font-size:clamp(3rem,12vw,5rem);line-height:.93;letter-spacing:-.025em}
h2 em{font-style:normal;color:var(--orange)}
.accent-line{width:54px;height:2px;margin:0 0 38px;background:var(--orange)}

.entry{position:fixed;inset:0;z-index:90;display:grid;place-items:center;overflow:hidden;color:var(--white);background:var(--ink);transition:opacity .9s,visibility .9s}
.entry.open{opacity:0;visibility:hidden}
.entry-photo{position:absolute;inset:0;background:linear-gradient(#061719b3,#000c 72%),url('assets/beyond-climax-flyer.jpeg') 66% 32%/cover;filter:saturate(.8)}
.entry-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,#007f807a,transparent 44%,#ef610033)}
.entry-copy{position:relative;width:min(86%,440px);text-align:center}
.monogram{position:relative;width:60px;height:60px;margin:0 auto 20px;border:4px solid var(--teal);border-right-color:transparent;border-radius:50%;font-weight:500;color:var(--white)}
.monogram span{position:absolute;left:13px;top:13px;font-size:0}
.monogram b{position:absolute;left:18px;top:8px;font-size:1.7rem}
.entry h1{margin:0;font-size:clamp(4.3rem,17vw,7.3rem);line-height:.77;letter-spacing:-.04em}
.entry h1 em{font-style:normal;color:var(--orange)}
.entry-subtitle{max-width:30ch;margin:26px auto!important;line-height:1.6!important}
.entry-copy>p:not(.eyebrow){font-size:.7rem;letter-spacing:.17em;text-transform:uppercase}
.entry button{display:grid;place-items:center;width:94px;height:94px;margin:26px auto 18px;border:1px solid #f7f5f080;border-radius:50%;color:var(--white);background:#00191cb3;cursor:pointer;transition:.3s}
.entry button:hover{transform:scale(1.06);border-color:var(--orange);background:var(--orange)}
.entry button span{font-size:.65rem;line-height:1.4;letter-spacing:.13em;text-transform:uppercase}
.entry small{font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;opacity:.75}

.sound{position:fixed;z-index:70;top:18px;right:max(18px,calc((100vw - 520px)/2));border:1px solid #ffffff24;border-radius:999px;padding:9px 12px;color:var(--white);background:#071011c7;backdrop-filter:blur(9px);display:flex;gap:9px;align-items:center;cursor:pointer}
.sound b{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
.bars{height:13px;display:flex;align-items:end;gap:2px}
.bars i{width:2px;height:4px;background:currentColor}
.sound[aria-pressed=true] i{animation:bars .8s ease-in-out infinite alternate}
.sound[aria-pressed=true] i:nth-child(2){animation-delay:-.4s}
.sound[aria-pressed=true] i:nth-child(3){animation-delay:-.2s}
@keyframes bars{to{height:13px}}

.hero{overflow:hidden;align-items:center;text-align:center;color:var(--white);background:#08191a}
.hero-photo{position:absolute;inset:0;background:url('assets/beyond-climax-flyer.jpeg') 68% 22%/cover no-repeat;transform:scale(1.02)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,#041011d9 0%,#04101166 38%,#041011e8 86%),linear-gradient(90deg,#007d7d4d,transparent 55%)}
.hero-copy,.scroll{position:relative;z-index:2}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.73rem;letter-spacing:.2em;text-transform:uppercase}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--teal);border-radius:50%;font-weight:500;letter-spacing:-.15em}
.hero .brand{margin-bottom:40px}
.hero .eyebrow{max-width:37ch;margin-inline:auto}
.hero h2{font-size:clamp(4.6rem,18vw,7.8rem);line-height:.76;text-shadow:0 4px 30px #000}
.hero h2 em{color:var(--orange)}
.artist{font-size:.73rem;letter-spacing:.12em;text-transform:uppercase}
.artist strong{color:#66c4c1;font-weight:500}
.meta{display:grid;gap:6px;margin-top:32px;font-size:.71rem;letter-spacing:.1em;text-transform:uppercase}
.meta span:nth-child(2){color:#ff8430}
.scroll{position:absolute;bottom:24px;display:grid;gap:8px;font-size:.6rem;text-decoration:none;letter-spacing:.15em;text-transform:uppercase}
.scroll i{width:1px;height:27px;margin:auto;background:var(--orange);animation:drift 1.5s ease-in-out infinite}
@keyframes drift{50%{transform:translateY(7px);opacity:.35}}

.note .number,.countdown .number{position:absolute;top:36px;left:42px}
.note .lead{font-family:var(--display);font-size:1.5rem;line-height:1.45;color:var(--deep-teal)}
.signature{margin:34px 0 0;font:italic 2rem var(--display)}
.role{margin-top:3px;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.countdown{align-items:center;text-align:center;background:radial-gradient(circle at 85% 15%,#008c8f33,transparent 35%),var(--ink)}
.countdown .number{color:#74c7c5}
.countdown .eyebrow{margin-bottom:12px}
.clock{width:100%;display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px;border-block:1px solid #f7f5f038}
.clock div{padding:24px 2px;border-right:1px solid #f7f5f02c}
.clock div:last-child{border:0}
.clock b{display:block;font:400 clamp(2rem,9vw,3.2rem) var(--display);color:var(--orange)}
.clock span{font-size:.59rem;letter-spacing:.1em;text-transform:uppercase;opacity:.65}
#countdownStatus{min-height:1.75em;font-size:.73rem;text-transform:uppercase;letter-spacing:.1em}

.gallery{min-height:auto;padding-top:100px;padding-bottom:120px;color:var(--white);background:var(--deep-teal)}
.gallery .number{color:#8bd1cf}
.gallery h2{font-size:clamp(3rem,12vw,4.7rem)}
.gallery h2 em{color:#ff7a20}
.flyer-frame{position:relative;width:88%;margin:34px 0 28px auto}
.flyer-frame:before{content:"";position:absolute;inset:-12px 12px 12px -12px;border:1px solid #ef610087}
.flyer-frame img{position:relative;display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:66% 25%;filter:saturate(.85) contrast(1.06);box-shadow:0 24px 50px #00181999}
.gallery-note{max-width:36ch;margin-left:auto;font-size:.88rem;color:#d7e4e1}

.details h2{font-size:clamp(2.8rem,11vw,4.7rem)}
.event-grid{margin:22px 0 38px;border-top:1px solid var(--line)}
.event-grid>div{display:grid;grid-template-columns:85px 1fr;gap:18px;padding:23px 0;border-bottom:1px solid var(--line)}
.event-grid span{padding-top:5px;font-size:.65rem;color:var(--teal);letter-spacing:.14em;text-transform:uppercase}
.event-grid strong{font:400 1.45rem/1.3 var(--display)}
.event-grid small{font:400 .67rem var(--sans);letter-spacing:.13em;text-transform:uppercase}
.button{display:inline-flex;justify-content:center;align-items:center;min-height:54px;padding:0 24px;border:1px solid;text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:.69rem;cursor:pointer;transition:.25s}
.outline{align-self:flex-start;color:var(--deep-teal)}
.outline:hover{color:var(--white);background:var(--deep-teal)}

.venue{min-height:88svh;align-items:center;text-align:center;color:var(--white);background:linear-gradient(#001718a8,#071010dc),url('assets/beyond-climax-flyer.jpeg') 78% 69%/cover}
.venue:before{content:"";position:absolute;inset:28px;border:1px solid #f7f5f040}
.venue>div{position:relative}
.venue .number,.venue .eyebrow{color:#8bd1cf}
.venue h2{font-size:clamp(4.2rem,17vw,7rem);line-height:.78}
.venue p:not(.number,.eyebrow){letter-spacing:.2em;text-transform:uppercase}
.ghost{margin-top:18px}
.ghost:hover{color:var(--ink);border-color:var(--white);background:var(--white)}

.quote{text-align:center}
.quote .number{position:absolute;top:36px;left:42px}
.quote-mark{align-self:flex-start;height:78px;color:var(--teal);font:7rem/1 var(--display)}
.quote>p:not(.number){max-width:34ch;margin-inline:auto}
.seal{display:grid;place-items:center;width:150px;height:150px;margin:38px auto 0;border:1px solid var(--orange);border-radius:50%;color:var(--orange)}
.seal b{font:400 2.1rem var(--display)}
.seal span{max-width:90px;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase}
.rsvp .number{color:#72c8c5}
.rsvp>p:not(.number){opacity:.76}
form{display:grid;gap:25px;margin-top:28px}
form>label{display:grid;gap:9px}
form span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
input{width:100%;border:0;border-bottom:1px solid #f7f5f066;border-radius:0;padding:12px 0;color:var(--white);background:transparent;outline:0}
input:focus{border-color:var(--orange)}
.fill{margin-top:12px;color:var(--white);border-color:var(--orange);background:var(--orange)}
.fill:hover{color:var(--ink);border-color:var(--white);background:var(--white)}
.phone{align-self:flex-start;margin-top:28px;color:#84cfcd;font-size:.78rem;letter-spacing:.14em;text-underline-offset:5px}
.footer{min-height:55svh;align-items:center;text-align:center;color:var(--white);background:linear-gradient(145deg,var(--deep-teal),#001c1d)}
.footer p{margin:34px 0 8px;font:3rem var(--display)}
.footer>a{font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;text-underline-offset:5px}
.footer .back{margin-top:45px;color:#93cecc}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .85s,transform .85s}
.reveal.visible{opacity:1;transform:none}

@media(max-width:420px){.panel{padding-inline:26px}.note .number,.countdown .number,.quote .number{left:26px}.clock b{font-size:1.75rem}.clock span{font-size:.52rem;letter-spacing:.04em}.sound{right:12px;top:12px}.entry h1{font-size:4rem}}
@media(min-width:900px){body{padding-block:28px}.entry{width:560px;left:50%;transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}