@font-face { font-family: "Noticia Text"; font-weight: 400; font-display: swap;
  src: url("../fonts/noticia-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noticia Text"; font-weight: 400; font-display: swap;
  src: url("../fonts/noticia-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Didot"; font-style: italic; font-display: swap;
  src: url("../fonts/didot-w01-italic.woff2") format("woff2"); }
@font-face { font-family: "Brandon Grot"; font-weight: 300; font-display: swap;
  src: url("../fonts/brandon-grot-w01-light.woff2") format("woff2"); }
@font-face { font-family: "DIN Next"; font-weight: 300; font-display: swap;
  src: url("../fonts/din-next-w01-light.woff2") format("woff2"); }

:root {
  --text: #2e2d2a;
  --pink-band: #f7e9e8;
  --pink-btn: #e8d2da;
  --grey-band: #fafafa;
  --muted: #6e635b;
  --max: 840px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-wrap: anywhere; font-family: "Noticia Text", Georgia, serif; font-size: 17px; line-height: 1.7; color: var(--text); background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }

.wide, .label, .spaced { font-family: "DIN Next", "Helvetica Neue", Arial, sans-serif; font-weight: 300; text-transform: uppercase; }
.wide { letter-spacing: .35em; line-height: 1.5; text-align: center; }

/* header */
.top { position: relative; text-align: center; padding: 70px 24px 12px; }
.top h1 { font-size: clamp(20px, 3vw, 30px); max-width: 780px; margin: 0 auto; padding-left: .35em; }
.top .date { max-width: 420px; margin: 10px auto 0; padding-top: 10px; border-top: 1px solid #999; font-size: 18px; letter-spacing: .1em; text-transform: uppercase; }
.menu { position: absolute; left: 88px; top: 110px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.menu a { font-family: "Didot", "Times New Roman", serif; font-style: italic; font-size: 24px; text-decoration: none; line-height: 1.5; }
.menu a:hover { text-decoration: underline; }
@media (max-width: 1100px) {
  .menu { position: static; flex-direction: row; justify-content: center; gap: 24px; margin-bottom: 24px; }
}

.hero { width: 100%; max-height: 803px; object-fit: cover; margin-top: 8px; }

/* intro band + slideshow */
.band { background: linear-gradient(var(--pink-band) calc(100% - 130px), #fff 0); text-align: center; padding: 70px 24px 0; }
.band h2 { font-size: clamp(18px, 2.4vw, 26px); letter-spacing: .3em; margin-bottom: 32px; }
.band p { margin-bottom: 12px; }
.slideshow { position: relative; z-index: 1; width: min(100%, 839px); aspect-ratio: 839 / 581; margin: 56px auto 0; background: #ddd; overflow: hidden; }
.slideshow .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.slideshow .slide.active { opacity: 1; }
.slideshow .nav { position: absolute; top: 0; bottom: 0; width: 56px; border: 0; background: transparent; color: #fff; font-size: 56px; line-height: 1; cursor: pointer; text-shadow: 0 0 8px rgba(0,0,0,.6); }
.slideshow .prev { left: 0; } .slideshow .next { right: 0; }
.slideshow .nav:hover { background: rgba(0,0,0,.15); }
.slideshow .count { position: absolute; right: 10px; bottom: 8px; font: 14px/1 "DIN Next", Arial, sans-serif; color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.7); }

/* program */
.program { max-width: 1000px; margin: 0 auto; padding: 110px 24px 80px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.title { position: relative; }
.title img { position: absolute; left: -10px; top: -36px; width: 165px; opacity: .6; z-index: 0; }
.title h2 { position: relative; z-index: 1; font-size: clamp(18px, 2.2vw, 24px); text-align: left; letter-spacing: .3em; }
.program-body { font-size: 15px; }
.label { font-size: 13px; letter-spacing: .25em; color: #c9a9b3; margin-top: 4px; }
.strong-wide { font-family: "DIN Next", Arial, sans-serif; letter-spacing: .25em; font-size: 14px; text-transform: uppercase; margin-bottom: 18px; }
.hotel-link { display: none; }
.schedule { grid-column: 1 / -1; margin-top: 32px; font-size: 16px; }
.schedule p { margin-bottom: 20px; }

/* info sections */
.info { background: var(--grey-band); padding: 90px 24px 70px; }
.info > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.info .title { margin-bottom: 56px; }
.info .title h2 { text-align: left; }
.info .text h3 { font-size: 17px; margin-top: 18px; }
.info .text p { margin-bottom: 20px; }
.info ul { padding-left: 36px; }
.info ul.plain { list-style: none; padding-left: 0; }
.info.fashion { background: var(--grey-band); padding-top: 60px; }

/* register */
.register { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.register img { width: 100%; height: 100%; max-height: 664px; object-fit: cover; }
.register-text { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 24px; gap: 8px; }
.brandon { font-family: "Brandon Grot", "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-size: 38px; line-height: 1.2; }
.small { font-size: 16px; color: var(--muted); }
.honor { margin: 46px 0 56px; font-size: 20px; line-height: 1.4; }
.button { display: inline-block; font-family: "DIN Next", Arial, sans-serif; font-weight: 300; font-size: 21px; letter-spacing: .15em; text-decoration: none; background: var(--pink-btn); padding: 14px 26px; transition: background .2s; }
.button:hover { background: #dcbcc8; }

/* footer */
footer { text-align: center; padding: 18px 24px 24px; }
footer h2 { font-family: "Noticia Text", Georgia, serif; text-transform: none; font-size: 22px; letter-spacing: .25em; font-weight: 400; margin-bottom: 8px; }
footer .spaced { font-family: "Noticia Text", Georgia, serif; text-transform: none; font-size: 16px; letter-spacing: .25em; line-height: 1.5; margin-bottom: 22px; color: #555; }
footer .copy { font-family: "Didot", serif; font-style: italic; font-size: 14px; color: #555; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .top { padding-top: 40px; }
  .wide { letter-spacing: .2em; }
  .program { grid-template-columns: 1fr; padding-top: 80px; }
  .program-body { margin-top: 24px; }
  .register { grid-template-columns: 1fr; }
  .register img { max-height: 420px; }
  footer .spaced { letter-spacing: .12em; }
}
