@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Prata&display=swap');

.art-deco {
  --paper: #221e1c;
  --ink: #f5e9d3;
  --gold: #d6b884;
  --line: #887451;
  --frame: min(90vw,1110px);
  --serif: Prata,Georgia,serif;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.art-deco :is(h1,h2,h3,.sign) { font-family: var(--serif); }
.art-deco h2 { font-size: clamp(34px,5.4vw,70px); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.art-deco .occasion-nav { padding: 16px 5vw; color: var(--gold); text-transform: uppercase; }
.art-deco .overline { font-size: 10px; text-transform: uppercase; letter-spacing: .21em; }
.ad-cover { text-align: center; padding: clamp(20px,5vw,78px) 5vw; background: repeating-linear-gradient(90deg,transparent 0 32px,#d6b88410 32px 33px), #211d1b; }
.ad-poster { position: relative; width: min(100%, 1090px); margin: auto; padding: clamp(26px,6vw,86px) clamp(14px,6vw,84px); color: #352820; background: #f3e7d1; border: 1px solid #a48150; outline: 1px solid #94764e; outline-offset: -9px; }
.ad-poster::before, .ad-poster::after { content: ""; position: absolute; inset: 13px; border: 4px double #9f8055; clip-path: polygon(0 0,22% 0,22% 9%,8% 9%,8% 22%,0 22%,0 0,100% 0,100% 22%,92% 22%,92% 9%,78% 9%,78% 0,100% 0,100% 100%,78% 100%,78% 91%,92% 91%,92% 78%,100% 78%,100% 100%,0 100%,0 78%,8% 78%,8% 91%,22% 91%,22% 100%,0 100%); pointer-events: none; }
.ad-poster::after { inset: 20px; opacity: .5; border-width: 1px; }
.ad-fan { display: block; width: clamp(64px,12vw,145px); aspect-ratio: 200/96; margin: 0 auto; background: url('/art/deco-fan.svg') center/contain no-repeat; }
.ad-poster .ad-fan { filter: brightness(.68); }
.ad-poster .overline { margin: 13px 0; }
.ad-poster h1 { margin: 16px auto 19px; font-size: clamp(45px,8.7vw,124px); line-height: 1.01; letter-spacing: -.055em; }
.ad-poster h1 span { display: block; }
.ad-poster h1 i { display: block; font-size: .45em; font-style: normal; color: #7e5c35; margin-block: .22em .27em; }
.ad-poster .cover-date { margin: 0 auto; width: fit-content; padding: 9px 13px; border-block: 1px solid #a18660; letter-spacing: .16em; }
.ad-poster a { display: inline-block; margin: 19px auto 0; padding: 7px; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; text-underline-offset: .35em; }
.ad-poster a:hover { text-decoration: underline; }
.ad-welcome.welcome { max-width: none; background: #f3e7d1; color: #352820; padding: clamp(40px,7vw,92px) 22px; }
.ad-welcome .overline { margin-top: 0; }
.ad-welcome h2 i { color: #795a39; }
.ad-welcome > p:not(.overline), .ad-dress > p:not(.overline) { white-space: pre-line; }
.ad-welcome .sign { font-size: 20px; }
.ad-portrait { border-block: 5px double #a58c65; }
.ad-portrait img { height: clamp(290px,55vw,650px); object-position: center 45%; }
.ad-program { width: var(--frame); display: grid; grid-template-columns: minmax(0,.68fr) minmax(0,1fr); gap: clamp(22px,6vw,80px); margin: clamp(50px,9vw,122px) auto; align-items: start; }
.ad-program .ni-date { border: 4px double var(--line); text-align: center; padding: clamp(15px,3vw,40px) 10px; }
.ad-program .ni-date h2 { font-size: clamp(30px,4.25vw,60px); margin-block: 12px 16px; }
.ad-program .overline { margin-top: 0; color: var(--gold); }
.ad-program .digits { display: grid; grid-template-columns: repeat(4,minmax(0,68px)); gap: 5px; }
.ad-program .digits b { font-family: var(--serif); font-size: clamp(22px,3vw,37px); min-width: 0; }
.ad-program .digits span { letter-spacing: .055em; }
.ad-program .schedule { display: block; padding: 0; width: 100%; }
.ad-program .section-title h2 { margin: 8px 0 23px; }
.ad-program .schedule li { display: grid; grid-template-columns: 18px 57px minmax(0,1fr); align-items: start; gap: 10px; padding-block: 15px; }
.ad-program .schedule li:first-child { border-top: 1px solid var(--line); }
.ad-program .event-number { color: var(--gold); opacity: 1; padding-top: 3px; }
.ad-program .schedule h3 { font-size: clamp(18px,2.25vw,29px); line-height: 1.25; }
.ad-program .schedule time { font: 13px/1.65 Manrope,Arial,sans-serif; font-variant-numeric: tabular-nums; color: var(--gold); }
.ad-program .schedule li p { font-size: 13px; margin-top: 5px; }
.ad-venue { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); color: #352820; background: #f3e7d1; }
.ad-venue .location-copy { padding: clamp(26px,6vw,90px); }
.ad-venue .location-copy h2 { font-size: clamp(33px,5vw,67px); }
.ad-venue img { min-height: 300px; aspect-ratio: 5/4; object-position: center 55%; }
.ad-dress.dress { width: var(--frame); max-width: 730px; margin: clamp(46px,8vw,105px) auto; border: 4px double var(--line); padding: clamp(28px,6vw,80px) 19px; }
.ad-dress .overline { margin-top: 0; color: var(--gold); }
.art-deco .response { width: var(--frame); grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(23px,6vw,70px); border-top: 0; padding: 0 0 clamp(50px,8vw,112px); }
.art-deco .response :is(input,textarea) { color: var(--ink); color-scheme: dark; }
.art-deco .response ::placeholder { color: #cbbca6; }
.art-deco .response button { min-height: 44px; background: #e4c99b; color: #2b211a; }
.ad-footer { background: #191614; border-top: 5px double var(--line); }
.ad-footer .sign { font-size: clamp(37px,7vw,87px); margin-top: 12px; }
.ad-opening[hidden] { display: none; }
.ad-opening { --opening-ready: 1; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: var(--ink); }
.ad-opening[open] { display: grid; }
.ad-opening::backdrop { background: transparent; }
.ad-panels { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; overflow: clip; pointer-events: none; }
.ad-panels > div { position: relative; background: #211d1b; }
.ad-panels > div::before { content: ""; position: absolute; inset: 2%; background: url('/art/deco-panel.svg') center / 100% 100% no-repeat; opacity: .62; }
.ad-panels > div + div { border-left: 1px solid #5b4835; }
.ad-opening-copy { position: relative; margin: auto; max-width: min(640px,88%); width: max-content; text-align: center; padding: clamp(16px,4vw,46px); border-block: 1px solid var(--gold); background: #211d1b; }
.ad-opening-copy h2 { margin-top: 14px; }
.ad-opening-copy p { margin-top: 12px; color: var(--gold); }
.ad-opening-copy button { padding: 8px 17px; min-height: 44px; color: inherit; background: transparent; border: 0; }
.ad-opening-copy [data-open] { background: #e4c99b; color: #2b211a; margin-top: 14px; }
.ad-opening-copy form button { text-decoration: underline; text-underline-offset: .3em; }
.ad-opening.is-opening:not([data-gsap-motion]) .ad-panels > div { animation: ad-slide-left 1.3s .37s cubic-bezier(.5,.05,.24,1) both; }
.ad-opening.is-opening:not([data-gsap-motion]) .ad-panels > div + div { animation-name: ad-slide-right; }
.ad-opening.is-opening .ad-panels > div::before { animation: ad-light .89s ease-out both; }
.ad-opening.is-opening:not([data-gsap-motion]) .ad-opening-copy { animation: ad-copy-away .51s .13s ease-out both; }
@keyframes ad-light { 46% { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 8px #e2bc79); } }
@keyframes ad-slide-left { to { transform: translate(-101%,-4%); } }
@keyframes ad-slide-right { to { transform: translate(101%,-4%); } }
@keyframes ad-copy-away { to { opacity: 0; } }
@media (max-width: 700px) {
  .ad-cover { padding-inline: 14px; }
  .ad-poster { padding: 29px 19px 25px; }
  .ad-poster h1 { font-size: clamp(43px,13vw,73px); }
  .ad-program, .ad-venue, .art-deco .response { grid-template-columns: minmax(0,1fr); }
  .ad-program { gap: 43px; }
  .ad-venue img { min-height: 0; height: auto; aspect-ratio: 5/3; }
}
@media (prefers-reduced-motion: reduce) { .ad-opening * { animation: none !important; } }

@media (max-width: 700px) {
  .ad-program .schedule ol { display: block; min-width: 0; }
  .ad-program .schedule li {
    grid-template-columns: 3.4rem minmax(0, 1fr);
    align-items: start;
    gap: .65rem;
  }
  .ad-program .schedule .event-number { display: none; }
  .ad-program .schedule time { min-width: 0; white-space: nowrap; }
  .ad-program .schedule li > div { min-width: 0; overflow-wrap: anywhere; }
}

@media (min-width: 701px) {
  .ad-portrait {
    width: min(90%, 42rem);
    margin: clamp(2rem, 6vw, 5rem) auto 0;
    padding: .65rem;
    border: 4px double var(--line);
  }
  .ad-portrait img {
    display: block;
    height: auto;
    max-height: 76svh;
    object-fit: contain;
    background: #191614;
  }
}