:root { --ink:#12263e; --sky:#b9e4ed; --cream:#fff9ed; --coral:#ef6c54; --yellow:#f7c852; --line:#d7e2dd; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",sans-serif; } .site-header { height:84px; max-width:1240px; margin:auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; } .brand { display:flex; gap:9px; align-items:center; color:var(--ink); text-decoration:none; text-transform:uppercase; font-size:11px; font-weight:600; letter-spacing:.1em; line-height:1.08; } .brand b { font-size:15px; } .brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1.5px solid var(--ink); border-radius:50%; font:700 24px/1 "Playfair Display",serif; text-transform:none; letter-spacing:0; } nav { display:flex; gap:31px; } nav a { color:var(--ink); text-decoration:none; font-size:13px; font-weight:600; } nav a:hover,.text-link:hover { color:var(--coral); } .menu-toggle { display:none; border:0; background:transparent; color:var(--ink); font:600 13px "DM Sans"; }
.hero { position:relative; overflow:hidden; min-height:640px; background:var(--sky); padding:100px max(8vw,32px) 50px; } .hero-copy { position:relative; z-index:2; max-width:530px; } .eyebrow { text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.16em; margin:0 0 17px; } h1,h2 { margin:0; font-family:"Playfair Display",serif; font-weight:700; letter-spacing:-.045em; } h1 { font-size:clamp(74px,10vw,142px); line-height:.78; } h1 em { color:var(--coral); font-weight:600; } .hero-summary { max-width:350px; font-size:18px; line-height:1.5; margin:31px 0; } .button { display:inline-flex; align-items:center; gap:24px; border-radius:999px; padding:14px 22px; font-size:13px; font-weight:700; text-decoration:none; transition:transform .2s; } .button:hover { transform:translateY(-2px); } .button span { font-size:20px; line-height:12px; } .button-dark { background:var(--ink); color:white; } .button-light { background:var(--cream); color:var(--ink); } .hero-date { position:absolute; z-index:3; right:7vw; bottom:36px; margin:0; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .hero-date span { padding:0 8px; color:var(--coral); }.cloud { position:absolute; border-radius:50%; background:rgba(255,255,255,.62); filter:blur(1px); }.cloud:before,.cloud:after { content:""; position:absolute; border-radius:50%; background:inherit; }.cloud-one { width:180px; height:42px; left:-20px; top:105px; }.cloud-one:before { width:86px; height:86px; bottom:0; left:31px; }.cloud-one:after { width:63px; height:63px; bottom:0; right:23px; }.cloud-two { width:210px; height:50px; right:30%; top:75px; }.cloud-two:before { width:105px; height:105px; bottom:0; left:30px; }.cloud-two:after { width:70px; height:70px; bottom:0; right:15px; }.cloud-three { width:160px; height:38px; right:-15px; bottom:80px; }.cloud-three:before { width:82px; height:82px; bottom:0; left:25px; }.cloud-three:after { width:52px; height:52px; bottom:0; right:19px; }.hero-art { position:absolute; right:5%; bottom:0; width:min(44vw,620px); height:92%; }.sun { position:absolute; width:310px; height:310px; border-radius:50%; background:var(--yellow); right:10%; top:17%; }.skyline { position:absolute; bottom:0; right:0; width:100%; height:26%; background:var(--ink); clip-path:polygon(0 100%,0 45%,7% 45%,7% 66%,14% 66%,14% 27%,20% 27%,20% 55%,27% 55%,27% 18%,32% 18%,32% 63%,38% 63%,38% 35%,45% 35%,45% 54%,52% 54%,52% 22%,60% 22%,60% 65%,68% 65%,68% 31%,75% 31%,75% 55%,82% 55%,82% 12%,88% 12%,88% 45%,100% 45%,100% 100%); }.mary { position:absolute; z-index:2; right:30%; bottom:16%; width:128px; height:360px; transform:rotate(7deg); }.body { position:absolute; z-index:3; bottom:0; left:39px; width:54px; height:241px; background:#26364a; border-radius:47% 47% 2px 2px; transform:rotate(-4deg); }.head { position:absolute; z-index:4; top:67px; left:52px; width:31px; height:42px; border-radius:48% 48% 42% 42%; background:#eab080; }.hat { position:absolute; z-index:5; top:53px; left:35px; width:67px; height:23px; background:var(--coral); border-radius:50%; transform:rotate(-6deg); }.hat:after { content:""; position:absolute; left:24px; bottom:11px; width:23px; height:36px; border-radius:50% 50% 0 0; background:var(--coral); }.umbrella { position:absolute; z-index:1; top:0; right:4px; width:4px; height:300px; background:var(--ink); transform:rotate(26deg); transform-origin:bottom; }.umbrella:before { content:""; position:absolute; top:-8px; left:-52px; width:110px; height:42px; border-radius:100% 100% 5px 5px; background:var(--coral); }
.intro { text-align:center; max-width:720px; padding:125px 28px 116px; margin:auto; }.intro h2,.dates h2,.support h2,.archive h2,.qr-section h2 { font-size:clamp(42px,5.3vw,72px); line-height:.97; }.intro > p:not(.eyebrow) { max-width:540px; font-size:17px; line-height:1.7; margin:30px auto 0; }.intro-rule { width:60px; height:2px; background:var(--coral); margin:45px auto 0; }.dates { background:var(--ink); color:var(--cream); padding:105px max(8vw,32px) 75px; }.dates-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:54px; }.date-grid { border-top:1px solid rgba(255,255,255,.3); display:grid; grid-template-columns:repeat(4,1fr); }.date-grid article { min-height:228px; padding:29px 20px; border-right:1px solid rgba(255,255,255,.3); }.date-grid article:first-child { border-left:1px solid rgba(255,255,255,.3); }.date-grid time { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:9px; }.date-grid time b { font-size:11px; text-transform:uppercase; letter-spacing:.13em; }.date-grid time strong { grid-row:span 2; font:700 72px/.72 "Playfair Display"; color:var(--yellow); }.date-grid time span { font-size:13px; }.date-grid article p { margin:38px 0 0; font-size:13px; line-height:1.6; color:#d2dce1; }.note { margin:28px 0 0; color:#d2dce1; font-size:12px; }.support { background:var(--coral); color:var(--cream); padding:100px max(8vw,32px); display:grid; grid-template-columns:1fr 1fr; gap:80px; }.support-copy { max-width:390px; padding-top:43px; }.support-copy > p { font-size:18px; line-height:1.55; margin:0 0 27px; }.support small { display:block; margin-top:17px; font-size:11px; opacity:.8; }.qr-section { padding:110px max(8vw,32px); display:grid; grid-template-columns:1.4fr .7fr .7fr; align-items:center; gap:28px; }.qr-section > div:first-child > p:not(.eyebrow) { max-width:430px; line-height:1.6; }.qr-card { background:white; border:1px solid var(--line); padding:17px; text-align:center; box-shadow:7px 8px 0 #dcece3; }.qr-card img { display:block; width:100%; aspect-ratio:1; }.qr-card p { font-size:13px; font-weight:700; margin:12px 0 0; }.qr-card small { display:block; margin:6px 0 1px; font-size:10px; color:#65717b; }.qr-card.pending { box-shadow:none; background:#f2f2ec; }.qr-placeholder { display:grid; place-items:center; aspect-ratio:1; border:10px solid var(--ink); outline:4px solid white; background:repeating-linear-gradient(45deg,#e5e5dc 0 5px,#f4f4ef 5px 10px); color:var(--ink); font:700 80px "Playfair Display"; }.archive { text-align:center; padding:122px 25px; background:#e4efe8; }.archive-card { max-width:560px; margin:38px auto 0; display:flex; text-align:left; align-items:center; gap:31px; padding:25px 30px; background:var(--cream); border-left:5px solid var(--yellow); }.archive-card span { color:var(--coral); font-size:13px; font-weight:700; letter-spacing:.12em; }.archive-card h3 { margin:0 0 8px; font:700 31px "Playfair Display"; }.archive-card p,.archive-coming { margin:0; font-size:14px; line-height:1.5; }.archive-coming { margin-top:28px; color:#65717b; }footer { position:relative; background:#c8dfd9; padding:54px max(8vw,32px) 45px; display:flex; justify-content:space-between; gap:30px; } footer > div:first-child > p { font-size:12px; margin-top:15px; }.footer-label { margin:0 0 7px; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }.footer-label:not(:first-child) { margin-top:20px; } footer > div:nth-child(2) p:not(.footer-label) { font-size:12px; line-height:1.6; margin:0; } footer a:not(.brand) { color:var(--ink); } .copyright { position:absolute; bottom:16px; right:max(8vw,32px); margin:0; font-size:10px; }
@media (max-width:700px) { .site-header { height:70px; padding:0 20px; } nav { display:none; position:absolute; z-index:9; top:70px; left:0; right:0; padding:22px; background:var(--cream); flex-direction:column; gap:18px; } nav.open { display:flex; }.menu-toggle { display:block; }.hero { min-height:650px; padding:65px 26px 32px; }.hero-art { opacity:.8; right:-29%; width:90vw; height:63%; }.sun { width:230px; height:230px; }.hero-date { left:26px; right:auto; bottom:27px; }.intro { padding:85px 25px; }.dates { padding:77px 25px 50px; }.dates-heading { display:block; }.dates-heading h2 { margin-top:12px; }.date-grid { grid-template-columns:repeat(2,1fr); }.date-grid article { min-height:185px; padding:24px 14px; border-bottom:1px solid rgba(255,255,255,.3); }.date-grid article:nth-child(3) { border-left:1px solid rgba(255,255,255,.3); }.date-grid time strong { font-size:56px; }.date-grid article p { margin-top:25px; font-size:11px; }.support { grid-template-columns:1fr; padding:78px 25px; gap:8px; }.support-copy { padding-top:20px; }.qr-section { grid-template-columns:1fr 1fr; padding:80px 25px; }.qr-section > div:first-child { grid-column:1 / -1; }.archive { padding:84px 25px; }.archive-card { align-items:flex-start; gap:16px; padding:22px; } footer { display:block; padding:45px 25px 60px; } footer > div:nth-child(2) { margin-top:37px; }.copyright { left:25px; right:auto; bottom:22px; } }