:root {
  --mobile-viewport-height: 100vh;
  --mobile-viewport-height: 100dvh;
  --window-red: #c32d38;
  --window-red-deep: #8e1e2c;
  --paper: #e5dfd3;
  --ink: #191814;
  --night: #10191a;
  --blue: #16528c;
}

@font-face {
  font-family: "Zeminous";
  src: url("assets/fonts/Zeminous.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

* { box-sizing: border-box; }

.sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; clip: rect(0, 0, 0, 0); }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", Georgia, serif;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--window-red); color: #fffaf4; }

a { color: inherit; text-decoration: none; }

.hero {
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  background: var(--night);
  color: #f7f0e7;
}

.hero__image {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
  filter: saturate(1.1) contrast(1.06);
  transform: scale(1.01);
  z-index: -3;
}

.hero__shade {
  background: linear-gradient(90deg, rgba(7, 12, 13, .82) 0%, rgba(7, 12, 13, .22) 50%, rgba(7, 12, 13, .62) 100%), linear-gradient(0deg, rgba(8, 12, 13, .55), transparent 42%);
  inset: 0;
  position: absolute;
  z-index: -2;
}

.hero__grain { height: 100%; inset: 0; mix-blend-mode: soft-light; opacity: .32; pointer-events: none; position: absolute; width: 100%; z-index: -1; }

.nav {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  left: clamp(22px, 4vw, 64px);
  position: absolute;
  right: clamp(22px, 4vw, 64px);
  top: clamp(21px, 3vw, 48px);
}

.nav__brand, .nav__gallery-link, .invite, footer {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
}

.nav__brand { font-size: clamp(17px, 1.4vw, 22px); line-height: .88; }

.nav__gallery-link {
  border-bottom: 1px solid currentColor;
  font-size: 13px;
  padding-bottom: 4px;
}

h1, h2, p { margin: 0; }

.invite {
  background: var(--window-red);
  color: #fff9f0;
  display: inline-flex;
  font-size: 13px;
  gap: 13px;
  line-height: 1;
  padding: 13px 15px 12px;
  position: relative;
  transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.2, .9, .2, 1);
}

.invite:hover { background: #fff5e9; color: var(--window-red-deep); transform: translateY(-3px) rotate(-4deg); }
.invite:focus-visible, .nav a:focus-visible, footer a:focus-visible { outline: 3px solid #f8ca69; outline-offset: 4px; }
.invite__arrow { fill: none; flex: 0 0 14px; height: 14px; stroke: currentColor; stroke-linecap: square; stroke-width: 1.8; width: 14px; }

.invite--hero { bottom: clamp(26px, 4vw, 58px); position: absolute; right: clamp(22px, 4vw, 64px); }

.sound { bottom: calc(clamp(26px, 4vw, 58px) + 51px); position: absolute; right: clamp(22px, 4vw, 64px); z-index: 1; }
.sound__toggle { align-items: center; appearance: none; background: rgba(12, 20, 21, .76); border: 1px solid rgba(247, 240, 231, .65); color: #f7f0e7; cursor: pointer; display: inline-flex; font-family: "Bricolage Grotesque", sans-serif; font-size: 12px; font-weight: 700; gap: 9px; letter-spacing: -.015em; min-height: 38px; padding: 5px 10px 5px 5px; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.16, 1, .3, 1); }
.sound__toggle:hover { background: #f7f0e7; border-color: #f7f0e7; color: var(--window-red-deep); transform: translateY(-2px); }
.sound__toggle:focus-visible { outline: 3px solid #f8ca69; outline-offset: 4px; }
.sound__mark { align-items: center; background: var(--window-red); display: inline-flex; height: 27px; justify-content: center; width: 27px; }
.sound__wave { fill: none; height: 18px; overflow: visible; stroke: #fff9f0; stroke-linecap: square; stroke-width: 2; width: 18px; }
.sound__wave path { transform-box: fill-box; transform-origin: center; }
.sound[data-sound-state="playing"] .sound__wave path { animation: sound-wave .7s ease-in-out infinite alternate; }
.sound[data-sound-state="playing"] .sound__wave path:nth-child(2) { animation-delay: -.22s; }
.sound[data-sound-state="playing"] .sound__wave path:nth-child(3) { animation-delay: -.45s; }
.sound__embed { bottom: calc(100% + 10px); height: 152px; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; right: 0; visibility: hidden; width: min(340px, calc(100vw - 44px)); }
.sound__embed iframe { border: 0; display: block; height: 152px; width: 100%; }
@keyframes sound-wave { from { transform: scaleY(.5); } to { transform: scaleY(1.2); } }

.hero__scroll {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 12px;
  gap: 9px;
  left: clamp(23px, 3vw, 48px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-transform: uppercase;
}

.hero__scroll span { writing-mode: vertical-rl; }

.hero__scroll-arrow {
  fill: none;
  height: 14px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
  width: 14px;
}

.hero__tagline {
  bottom: clamp(30px, 4vw, 58px);
  color: #f7f0e7;
  font-size: clamp(19px, 1.7vw, 27px);
  left: clamp(70px, 7vw, 128px);
  line-height: .95;
  max-width: 390px;
  position: absolute;
}

.about {
  display: grid;
  gap: clamp(28px, 5vw, 80px);
  grid-template-columns: .7fr 1.55fr .5fr;
  min-height: 70vh;
  overflow: hidden;
  padding: clamp(70px, 11vw, 168px) clamp(22px, 8vw, 132px);
  position: relative;
}

.about__stamp {
  align-self: end;
  color: var(--window-red);
  display: flex;
  flex-direction: column;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(27px, 3vw, 48px);
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .7;
}

.about__stamp i { color: var(--blue); font-family: "Newsreader", serif; font-size: 1.6em; font-weight: 400; margin-left: .24em; }

.about__copy { max-width: 760px; position: relative; z-index: 1; }

.about__lead { font-size: clamp(39px, 5vw, 77px); line-height: 1; letter-spacing: -.04em; }
.about__detail { font-size: clamp(20px, 2vw, 28px); line-height: 1.35; margin-top: 45px; max-width: 395px; }

.about__window {
  align-self: stretch;
  background: var(--window-red);
  margin: clamp(10px, 4vw, 70px) -8vw clamp(10px, 4vw, 70px) 0;
  position: relative;
}

.about__window::before, .about__window::after { content: ""; position: absolute; }
.about__window::before { background: var(--paper); inset: 13% 24% 13% 16%; }
.about__window::after { background: var(--window-red-deep); bottom: 0; left: 0; right: 0; top: 48%; }

.gallery { background: var(--night); color: #f5eee4; display: flex; flex-direction: column; height: 100svh; min-height: 0; padding: clamp(26px, 3.5vw, 48px) clamp(22px, 4vw, 64px); }

.gallery__header { align-items: end; display: flex; flex: 0 0 auto; justify-content: space-between; margin-bottom: clamp(20px, 2.2vw, 32px); }

.gallery h2, .closing h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(34px, 5vw, 76px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .72;
  text-transform: uppercase;
}

.gallery__roll { align-items: center; background: transparent; border: 0; color: #f0c3aa; cursor: pointer; display: inline-flex; font-family: "Bricolage Grotesque", sans-serif; font-size: 12px; font-weight: 700; gap: 10px; padding: 7px 0; }
.gallery__roll:hover { color: #fff8ef; }
.gallery__roll:focus-visible { outline: 2px solid #f8ca69; outline-offset: 5px; }
.dice { background: var(--window-red); display: grid; gap: 2px; grid-template-columns: repeat(2, 5px); grid-template-rows: repeat(3, 5px); height: 26px; padding: 4px; transform: rotate(-9deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1); width: 26px; }
.dice i { background: #fff8ef; border-radius: 50%; height: 5px; width: 5px; }
.dice i:nth-child(3) { grid-column: 2; grid-row: 2; }
.dice i:nth-child(4) { grid-column: 1; grid-row: 3; }
.dice i:nth-child(5) { grid-column: 2; grid-row: 3; }
.gallery__roll:hover .dice, .gallery__roll.is-rolling .dice { transform: rotate(351deg); }

.gallery__grid { display: grid; flex: 1 1 auto; gap: clamp(9px, 1.4vw, 18px); grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); min-height: 0; }

.gallery__item { grid-column: span 4; margin: 0; min-height: 0; overflow: hidden; position: relative; }
.gallery__item--tall { grid-column: span 4; grid-row: span 3; }
.gallery__item--wide { grid-column: span 4; }
.gallery__item--close { grid-column: span 4; }

.gallery__item:nth-child(1) { grid-area: tall; }
.gallery__item:nth-child(2) { grid-area: normal; }
.gallery__item:nth-child(3) { grid-area: wide; }
.gallery__item:nth-child(4) { grid-area: fourth; }
.gallery__item:nth-child(5) { grid-area: close; }
.gallery__item:nth-child(6) { grid-area: sixth; }
.gallery__item:nth-child(7) { grid-area: seventh; }

.gallery__grid--portrait { grid-template-areas: "tall tall tall tall normal normal normal normal wide wide wide wide" "tall tall tall tall fourth fourth fourth fourth close close close close" "tall tall tall tall sixth sixth sixth sixth seventh seventh seventh seventh"; }
.gallery__grid--split { grid-template-areas: "tall tall tall tall normal normal normal normal wide wide wide wide" "tall tall tall tall fourth fourth fourth fourth close close close close" "tall tall tall tall sixth sixth sixth sixth seventh seventh seventh seventh"; }
.gallery__grid--tiles { grid-template-areas: "tall tall tall tall normal normal normal normal wide wide wide wide" "tall tall tall tall fourth fourth fourth fourth close close close close" "tall tall tall tall sixth sixth sixth sixth seventh seventh seventh seventh"; }
.gallery__grid--dominant { grid-template-areas: "tall tall tall tall normal normal normal normal wide wide wide wide" "tall tall tall tall fourth fourth fourth fourth close close close close" "tall tall tall tall sixth sixth sixth sixth seventh seventh seventh seventh"; }

.gallery__item img { filter: saturate(1.07) contrast(1.04); height: 100%; object-fit: cover; object-position: center; transition: transform .6s cubic-bezier(.2, .7, .2, 1); width: 100%; }
.gallery__item.is-changing img { animation: photo-snap .46s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .gallery__item:hover img { transform: scale(1.05); } }
.gallery__item:active img { transform: scale(1.025); }

@keyframes photo-snap { 0% { filter: blur(7px) saturate(.5); opacity: .25; transform: scale(1.08); } 100% { filter: saturate(1.07) contrast(1.04); opacity: 1; transform: scale(1); } }

.closing { --orb-x: 0px; --orb-y: 0px; align-items: flex-start; background: var(--paper); display: flex; flex-direction: column; justify-content: center; min-height: 68svh; overflow: hidden; padding: clamp(72px, 9vw, 132px) clamp(22px, 8vw, 132px); position: relative; }

.closing p { color: var(--window-red-deep); font-size: clamp(26px, 3vw, 43px); line-height: 1; position: relative; z-index: 1; }
.closing h2 { font-size: clamp(59px, 7vw, 118px); line-height: .8; margin-top: clamp(35px, 6vw, 82px); max-width: 760px; position: relative; z-index: 1; }

.closing__paint { background: var(--window-red); border-radius: 50%; height: min(53vw, 680px); position: absolute; right: -12vw; top: 50%; transform: translateY(-50%); width: min(53vw, 680px); }
.closing__paint::after { background: var(--blue); border-radius: 50%; content: ""; height: 29%; left: 22%; position: absolute; top: 44%; transform: translate(var(--orb-x), var(--orb-y)); transition: transform .14s ease-out; width: 29%; }

.invite--closing { align-self: flex-start; margin-top: clamp(45px, 7vw, 100px); z-index: 1; }

footer { align-items: center; background: var(--window-red); color: #fff6ee; display: flex; font-size: 13px; justify-content: space-between; padding: 16px clamp(22px, 4vw, 64px); }
footer a { border-bottom: 1px solid currentColor; }

@media (max-width: 760px) {
  html { scroll-snap-type: y proximity; }
  main > section { scroll-snap-align: start; scroll-snap-stop: normal; }
  .hero { height: var(--mobile-viewport-height); min-height: var(--mobile-viewport-height); }
  .hero__image { object-position: 57% center; }
  .nav { left: max(22px, env(safe-area-inset-left)); right: max(22px, env(safe-area-inset-right)); top: max(21px, env(safe-area-inset-top)); }
  .nav__brand { align-items: center; display: inline-flex; min-height: 44px; }
  .nav__gallery-link { display: none; }
  .hero__scroll { left: max(15px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); }
  .hero__tagline { bottom: max(28px, env(safe-area-inset-bottom)); font-size: 18px; left: max(44px, env(safe-area-inset-left)); line-height: 1; max-width: 142px; }
  .invite { align-items: center; min-height: 44px; }
  .invite--hero { bottom: max(22px, env(safe-area-inset-bottom)); right: max(22px, env(safe-area-inset-right)); }
  .sound { bottom: max(74px, calc(env(safe-area-inset-bottom) + 52px)); right: max(22px, env(safe-area-inset-right)); }
  .sound__toggle { min-height: 38px; }
  .about { gap: 30px; grid-template-columns: 1fr; min-height: 0; padding: 74px 22px 66px; }
  .about__copy { grid-row: 1; }
  .about__window { display: none; }
  .about__stamp { flex-direction: row; font-size: 29px; gap: 4px; grid-row: 2; letter-spacing: -.05em; }
  .about__stamp i { margin: 0; }
  .about__lead { font-size: clamp(38px, 10.5vw, 49px); }
  .about__detail { font-size: 21px; margin-top: 26px; max-width: 30ch; }
  .gallery {
    display: flex;
    height: var(--mobile-viewport-height);
    min-height: var(--mobile-viewport-height);
    overflow: hidden;
    padding: max(24px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  }
  .gallery__header { align-items: start; flex-direction: column; gap: 8px; margin-bottom: 16px; }
  .gallery h2 { font-size: clamp(37px, 10vw, 47px); line-height: .8; }
  .gallery__roll { min-height: 44px; padding: 9px 0; }
  .gallery__grid { flex: 1 1 0; gap: 10px; grid-template-areas: none; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); height: auto; min-height: 0; }
  .gallery__item, .gallery__item--tall, .gallery__item--wide, .gallery__item--close { grid-column: span 1; grid-row: auto; min-height: 0; }
  .gallery__item:nth-child(n) { grid-area: auto; }
  .gallery__item--tall, .gallery__item--wide, .gallery__item--close { grid-column: span 1; min-height: 0; }
  .gallery__item:nth-child(7) { display: none; }
  .closing { display: block; min-height: 0; padding: 64px 22px 78px; }
  .closing p { font-size: 27px; }
  .closing h2 { font-size: clamp(55px, 15vw, 68px); line-height: .82; margin-top: 38px; max-width: 340px; }
  .closing__paint { height: 270px; right: -115px; top: -92px; transform: none; width: 270px; }
  .invite--closing { margin-top: 46px; }
  footer { padding: 12px max(22px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); }
  footer a { align-items: center; display: inline-flex; min-height: 44px; }
  footer span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .closing__paint::after { transition: none; }
  .sound[data-sound-state="playing"] .sound__wave path { animation: none; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__image { animation: hero-settle 1.2s cubic-bezier(.2, .8, .2, 1) both, hero-ken-burns 32s 1.2s ease-in-out infinite alternate; }
  .hero__title-wrap { animation: title-arrive 1s .12s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes hero-settle { from { filter: blur(8px) saturate(1.24); transform: scale(1.05); } to { filter: saturate(1.1) contrast(1.06); transform: scale(1.01); } }
  @keyframes hero-ken-burns { from { transform: scale(1.01) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.6%, -1.4%, 0); } }
  @keyframes title-arrive { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: translateY(0); } }
}

@media (max-width: 760px) {
  .hero__image { filter: saturate(1.08) contrast(1.06); transform: scale(1.005); }
  .hero__grain { opacity: .24; }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .hero__image { animation: hero-settle-mobile .72s cubic-bezier(.2, .8, .2, 1) both, hero-ken-burns-mobile 26s .72s ease-in-out infinite alternate; }
  @keyframes hero-settle-mobile { from { filter: blur(4px) saturate(1.16); transform: scale(1.035); } to { filter: saturate(1.08) contrast(1.06); transform: scale(1.005); } }
  @keyframes hero-ken-burns-mobile { from { transform: scale(1.005) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); } }
}