:root { --ink:#28352d; --sage:#899887; --pine:#405548; --cream:#f7f4ed; --paper:#fffdf8; --clay:#b66f55; --line:#d9d8cc; --olive:#1e3102; --plum:#3d0127; --navy:#00283e; --wine:#641322; --teal:#075658; --rust:#ad3c21; --serif:'DM Serif Display', Georgia, serif; --sans:'DM Sans', Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--sans); font-size:16px; line-height:1.6; } a { color:inherit; text-decoration:none; } .hero { position:relative; height:min(790px, 100svh); min-height:640px; color:#fff; overflow:hidden; } .slideshow,.slide,.hero-overlay { position:absolute; inset:0; } .slide { margin:0; opacity:0; transition:opacity 1.2s ease; } .slide.active { opacity:1; } .slide img { width:100%; height:100%; object-fit:cover; object-position:center 44%; } .hero-overlay { background:linear-gradient(180deg,rgba(18,31,22,.45),rgba(23,38,28,.05) 40%,rgba(18,31,22,.5)); z-index:1; } .nav { position:relative; z-index:3; display:flex; justify-content:space-between; align-items:center; max-width:1220px; margin:auto; padding:28px 34px; } .monogram { font-family:var(--serif); font-size:24px; letter-spacing:.06em; } .monogram span { font-family:var(--sans); font-size:13px; vertical-align:3px; padding:0 3px; } .nav-links { display:flex; gap:29px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; } .nav-links a { opacity:.93; } .hero-content { position:relative; z-index:2; height:calc(100% - 86px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; } .eyebrow { margin:0 0 13px; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; } .earth { color:var(--clay); } h1,h2,h3 { font-family:var(--serif); font-weight:400; line-height:1.08; } h1 { margin:0; font-size:clamp(4.4rem,10vw,8.5rem); letter-spacing:-.045em; } h1 i { font-size:.62em; font-weight:400; padding:0 .06em; } .hero-date { margin:18px 0 27px; font-size:15px; letter-spacing:.04em; } .button { display:inline-flex; align-items:center; gap:18px; padding:13px 19px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; transition:transform .2s ease,background .2s ease; } .button:hover { transform:translateY(-2px); } .button-light { background:var(--paper); color:var(--ink); } .slide-controls { position:absolute; z-index:3; bottom:28px; left:50%; transform:translateX(-50%); display:flex; gap:15px; align-items:center; } .arrow { border:0; background:transparent; color:#fff; cursor:pointer; font-size:19px; padding:4px; } .dots { display:flex; gap:7px; } .dot { width:6px; height:6px; border-radius:50%; background:#fff; opacity:.45; border:0; padding:0; cursor:pointer; } .dot.active { opacity:1; transform:scale(1.25); }.section { max-width:1120px; margin:0 auto; padding:110px 34px; }.welcome { text-align:center; max-width:730px; padding-bottom:124px; }.welcome h2,.section-heading h2,.venue h2,.attire h2 { font-size:clamp(2.5rem,5vw,4.25rem); margin:0; letter-spacing:-.035em; }.intro { max-width:590px; margin:25px auto 0; color:#536157; }.countdown { margin:48px auto 0; max-width:610px; padding:29px 32px 27px; border:1px solid var(--line); background:var(--paper); }.countdown-label { margin:0 0 17px; color:var(--clay); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }.countdown-units { display:grid; grid-template-columns:repeat(4,1fr); }.countdown-units span { display:flex; flex-direction:column; position:relative; }.countdown-units span + span::before { content:""; position:absolute; top:8px; bottom:8px; left:0; width:1px; background:var(--line); }.countdown-units strong { font-family:var(--serif); font-size:clamp(2rem,5vw,3.3rem); font-weight:400; line-height:1; font-variant-numeric:tabular-nums; }.countdown-units small { margin-top:8px; color:#667468; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }.venue { max-width:none; padding:0; display:grid; grid-template-columns:1fr 1fr; background:#e8ede3; }.venue-image { min-height:540px; }.venue-image img { width:100%; height:100%; object-fit:cover; }.venue-copy { align-self:center; padding:80px max(7vw,45px); max-width:600px; }.venue-copy p:not(.eyebrow) { max-width:400px; color:#536157; margin:22px 0 27px; }.text-link { display:inline-flex; gap:12px; border-bottom:1px solid var(--ink); padding-bottom:4px; font-size:13px; font-weight:600; letter-spacing:.06em; }.weekend { padding-top:125px; }.section-heading { text-align:center; }.section-heading > p:last-child { color:#536157; margin:16px auto 0; }.timeline { margin-top:58px; border-top:1px solid var(--line); }.day { display:grid; grid-template-columns:190px 1fr; padding:40px 0; border-bottom:1px solid var(--line); }.day.featured { background:#edf0e8; margin:0 -24px; padding:42px 24px; border:0; }.day-date { display:flex; flex-direction:column; line-height:1; color:var(--pine); }.day-date span { font-size:11px; letter-spacing:.18em; font-weight:600; }.day-date strong { font-family:var(--serif); font-size:59px; font-weight:400; letter-spacing:-.05em; }.day-date small { color:#667468; font-size:12px; margin-top:7px; }.day-details h3 { font-size:27px; margin:0 0 21px; }.day-details h3 span { color:var(--clay); font-family:var(--sans); font-size:17px; padding-left:5px; }.day-details ol { list-style:none; padding:0; margin:0; max-width:620px; }.day-details li { display:grid; grid-template-columns:100px 1fr; gap:14px; padding:6px 0; }.day-details time { color:var(--clay); font-size:12px; font-weight:600; letter-spacing:.05em; }.day-details p { margin:0; }.attire { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding-top:125px; padding-bottom:125px; }.attire p:not(.eyebrow) { max-width:430px; color:#536157; margin:20px 0 0; }.palette { display:flex; height:170px; position:relative; align-items:stretch; padding-top:40px; }.palette span { flex:1; }.palette span:nth-child(1) { background:#d8d6bc; }.palette span:nth-child(2) { background:#b7c3ad; }.palette span:nth-child(3) { background:#d59c7f; }.palette span:nth-child(4) { background:#71806e; }.palette em { position:absolute; top:0; left:0; background:var(--cream); padding:0 13px 0 0; font-family:var(--serif); font-size:20px; font-style:italic; line-height:1.1; }.giving { max-width:none; text-align:center; background:var(--pine); color:white; padding:101px 30px; }.giving h2 { max-width:700px; margin:0 auto; font-size:clamp(2.7rem,5vw,4.5rem); letter-spacing:-.04em; }.giving > p:not(.eyebrow) { max-width:510px; margin:20px auto 27px; color:#e3e8df; }.faq { padding-top:125px; max-width:900px; }.faq-list { margin-top:55px; border-top:1px solid var(--line); }.faq details { border-bottom:1px solid var(--line); }.faq summary { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:22px 0; cursor:pointer; list-style:none; font-family:var(--serif); font-size:23px; }.faq summary::-webkit-details-marker { display:none; }.faq summary span { font-family:var(--sans); color:var(--clay); font-size:24px; font-weight:300; transition:transform .2s ease; }.faq details[open] summary span { transform:rotate(45deg); }.faq details p { max-width:690px; color:#536157; margin:0; padding:0 35px 24px 0; } footer { background:#25352b; color:#fff; min-height:150px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:30px max(34px,calc((100vw - 1052px)/2)); font-size:12px; color:#dfe6da; } footer .monogram { color:white; } footer a:last-child { border-bottom:1px solid #aebaae; padding-bottom:3px; }
@media (max-width:700px) { .hero { min-height:610px; }.nav { padding:22px; }.nav-links { gap:15px; font-size:10px; }.slide img { object-position:center; }.section { padding:76px 22px; }.welcome { padding-bottom:83px; }.venue { grid-template-columns:1fr; }.venue-image { min-height:340px; }.venue-copy { padding:58px 22px 65px; }.weekend,.attire,.faq { padding-top:82px; }.timeline { margin-top:38px; }.day { grid-template-columns:76px 1fr; padding:29px 0; }.day.featured { margin:0 -22px; padding:31px 22px; }.day-date strong { font-size:46px; }.day-details h3 { font-size:24px; margin-bottom:15px; }.day-details li { grid-template-columns:80px 1fr; gap:7px; }.day-details p { font-size:14px; }.attire { grid-template-columns:1fr; gap:35px; padding-bottom:85px; }.palette { height:135px; }.giving { padding:78px 22px; }.faq-list { margin-top:38px; }.faq summary { font-size:21px; line-height:1.3; }.faq details p { font-size:14px; } footer { flex-direction:column; text-align:center; padding:37px 22px; }.hero-content { height:calc(100% - 68px); } }
.palette { padding-top:54px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.slide { transition:none; }.button { transition:none; } }
.palette { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; width:100%; height:auto; max-width:360px; min-width:0; margin-left:auto; padding-top:0; }
.palette .palette-color { display:block; width:100%; height:auto; aspect-ratio:1 / 1; border-radius:50%; }
.palette span.palette-olive { background:var(--olive); }.palette span.palette-plum { background:var(--plum); }.palette span.palette-navy { background:var(--navy); }.palette span.palette-wine { background:var(--wine); }.palette span.palette-teal { background:var(--teal); }.palette span.palette-rust { background:var(--rust); }
.contact-note { margin-top:42px; padding:30px 34px; text-align:center; background:var(--paper); border:1px solid var(--line); }
.contact-note .eyebrow { margin-bottom:8px; }.contact-note p:last-child { margin:0; font-family:var(--serif); font-size:clamp(1.35rem,3vw,1.75rem); line-height:1.3; }
.attire .dress-code { color:var(--ink); font-family:var(--serif); font-size:1.35rem; line-height:1.35; }
@media (max-width:700px) { .palette { width:min(100%,360px); height:auto; margin:0 auto; gap:12px; }.contact-note { padding:25px 20px; } }
.attire .palette { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%; max-width:470px; align-items:end; }
.attire .palette .palette-color { position:relative; display:flex; align-items:flex-end; justify-content:center; width:100%; aspect-ratio:3 / 4.25; padding:0 8px 13px; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:999px 999px 5px 5px; box-shadow:0 10px 24px rgba(40,53,45,.12); }
.attire .palette .palette-color:nth-child(2),.attire .palette .palette-color:nth-child(5) { transform:translateY(12px); }
.attire .palette .palette-color small { color:rgba(255,255,255,.9); font-family:var(--sans); font-size:9px; font-weight:600; letter-spacing:.18em; line-height:1; text-transform:uppercase; text-shadow:0 1px 4px rgba(0,0,0,.24); }
@media (max-width:700px) { .attire .palette { width:min(100%,420px); max-width:420px; gap:9px; padding-bottom:12px; }.attire .palette .palette-color { padding-bottom:11px; }.attire .palette .palette-color small { font-size:8px; } }
.attire .palette { grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; width:100%; max-width:520px; padding:0; align-items:stretch; }
.attire .palette .palette-color { aspect-ratio:1 / 3; min-width:0; padding:0 4px 14px; border:0; border-radius:3px; box-shadow:0 8px 22px rgba(40,53,45,.1); transform:none; }
.attire .palette .palette-color:nth-child(2),.attire .palette .palette-color:nth-child(5) { transform:none; }
.attire .palette .palette-color small { font-size:8px; letter-spacing:.12em; writing-mode:vertical-rl; transform:rotate(180deg); text-shadow:none; }
@media (max-width:700px) { .attire .palette { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:min(100%,390px); max-width:390px; padding:0; }.attire .palette .palette-color { aspect-ratio:4 / 3; padding:0 8px 11px; }.attire .palette .palette-color small { writing-mode:horizontal-tb; transform:none; font-size:8px; letter-spacing:.16em; } }
.palette-preview-controls { grid-column:2; grid-row:1; display:flex; justify-content:flex-end; gap:6px; align-self:start; position:relative; z-index:2; }
.attire .palette { grid-column:2; grid-row:1; margin-top:48px; }
.palette-preview-controls button { appearance:none; border:1px solid var(--line); background:transparent; color:#667468; padding:7px 10px; cursor:pointer; font:600 9px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.palette-preview-controls button.active { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.attire .palette.layout-tailored { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; max-width:520px; }
.attire .palette.layout-tailored .palette-color { aspect-ratio:3.25 / 1; align-items:center; justify-content:flex-start; padding:0 18px; border-radius:3px; box-shadow:0 7px 18px rgba(40,53,45,.09); }
.attire .palette.layout-tailored .palette-color small { writing-mode:horizontal-tb; transform:none; font-size:9px; letter-spacing:.18em; }
.attire .palette.layout-mosaic { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,92px); gap:7px; max-width:520px; }
.attire .palette.layout-mosaic .palette-color { aspect-ratio:auto; height:auto; min-height:0; align-items:flex-end; justify-content:flex-start; padding:12px; border-radius:2px; box-shadow:none; }
.attire .palette.layout-mosaic .palette-color small { writing-mode:horizontal-tb; transform:none; font-size:8px; }
.attire .palette.layout-mosaic .palette-color:nth-child(1) { grid-area:1 / 1 / 3 / 3; }.attire .palette.layout-mosaic .palette-color:nth-child(2) { grid-area:1 / 3 / 2 / 5; }.attire .palette.layout-mosaic .palette-color:nth-child(3) { grid-area:2 / 3 / 4 / 4; }.attire .palette.layout-mosaic .palette-color:nth-child(4) { grid-area:2 / 4 / 3 / 5; }.attire .palette.layout-mosaic .palette-color:nth-child(5) { grid-area:3 / 1 / 4 / 3; }.attire .palette.layout-mosaic .palette-color:nth-child(6) { grid-area:3 / 4 / 4 / 5; }
@media (max-width:700px) { .palette-preview-controls { grid-column:1; grid-row:auto; justify-content:flex-start; }.attire .palette { grid-column:1; grid-row:auto; margin-top:0; }.attire .palette.layout-tailored { grid-template-columns:1fr 1fr; }.attire .palette.layout-mosaic { grid-template-rows:repeat(3,75px); } }
.attire .palette.layout-tailored { grid-column:2; grid-row:1; margin-top:0; align-self:center; }
.attire .palette.layout-tailored .palette-color { appearance:none; border:0; cursor:pointer; font:inherit; }
.palette button.palette-olive { background:var(--olive); }.palette button.palette-plum { background:var(--plum); }.palette button.palette-navy { background:var(--navy); }.palette button.palette-wine { background:var(--wine); }.palette button.palette-teal { background:var(--teal); }.palette button.palette-rust { background:var(--rust); }
.attire .palette.layout-tailored .palette-color small { opacity:0; transform:translateX(-8px); transition:opacity .22s ease,transform .22s ease; }
.attire .palette.layout-tailored .palette-color:hover small,.attire .palette.layout-tailored .palette-color:focus-visible small,.attire .palette.layout-tailored .palette-color.revealed small { opacity:1; transform:translateX(0); }
.attire .palette.layout-tailored .palette-color:focus-visible { outline:3px solid var(--paper); outline-offset:-6px; }
@media (max-width:700px) { .attire .palette.layout-tailored { grid-column:1; grid-row:auto; }.attire .palette.layout-tailored .palette-color { aspect-ratio:3.25 / 1; }.attire .palette.layout-tailored .palette-color small { writing-mode:horizontal-tb; } }
.weekend { padding-bottom:52px; }
.attire { padding-top:64px; padding-bottom:88px; }
@media (max-width:700px) { .weekend { padding-bottom:32px; }.attire { padding-top:48px; padding-bottom:68px; } }