@font-face {
  font-family: "Invitacion Serif";
  src: url("assets/fonts/texto.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Invitacion Numeros";
  src: url("assets/fonts/numeros.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Invitacion Manuscrita";
  src: url("assets/fonts/manuscrita.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: light;
  --blue: #0a3288;
  --paper: #f6f5f0;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper) url("assets/papel.jpg") center / 1200px auto;
  color: var(--blue);
  font-family: "Invitacion Serif", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 1000px;
  margin-inline: auto;
  box-shadow: 0 0 65px #0a32880a;
}

img { display: block; max-width: 100%; }
figure, h1, h2, p { margin: 0; }
.paper { background: var(--paper) url("assets/papel.jpg") center / cover; }
.script {
  font-family: "Invitacion Manuscrita", cursive;
  font-weight: 400;
  text-transform: none;
}

.cover { overflow: hidden; }
.cover-photo {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center 80%;
}

.invitation {
  padding: 88px 24px 100px;
  text-align: center;
}

.cap {
  width: clamp(110px, 23vw, 200px);
  height: auto;
  margin: 0 auto 55px;
  filter: invert(17%) sepia(82%) saturate(2010%) hue-rotate(211deg) brightness(80%) contrast(100%);
}

.graduation-title {
  position: relative;
  width: min(100%, 540px);
  margin: 0 auto 70px;
  font-weight: 400;
}

.year {
  opacity: .45;
  display: flex;
  flex-direction: column;
  font-family: "Invitacion Numeros", Georgia, serif;
  font-size: clamp(190px, 43vw, 360px);
  line-height: .84;
  letter-spacing: -.055em;
  padding-right: .055em;
}

.graduation-word {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -5%) rotate(-12deg);
  width: 112%;
  font-size: clamp(80px, 18vw, 152px);
  line-height: 1;
  white-space: nowrap;
}

.invitation-copy {
  font-size: clamp(17px, 2.7vw, 24px);
  line-height: 1.5;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.invitation-copy p + p { margin-top: 38px; }
.celebration {
  padding: 48px 38px 80px;
  background: var(--blue);
  color: white;
  text-align: center;
}

.portrait { width: min(100%, 620px); margin: 0 auto; }
.portrait img { width: 100%; height: auto; }
.countdown-wrap { padding-top: 55px; }
.countdown-wrap h2 { font-size: clamp(68px, 13vw, 112px); line-height: 1.25; }
.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, 2.5vw, 24px);
  max-width: 680px;
  margin: 28px auto 0;
}

.countdown-part { flex: 1; min-width: 0; }
.countdown-number {
  display: block;
  font-family: "Invitacion Numeros", Georgia, serif;
  font-size: clamp(38px, 8vw, 76px);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  display: block;
  margin-top: 12px;
  font-size: clamp(10px, 1.7vw, 15px);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.colon { font-size: clamp(24px, 5vw, 46px); line-height: 1.5; opacity: .6; }
.countdown-finished { font-size: 22px; margin-top: 22px; }
.event { padding: 100px 25px 90px; text-align: center; text-transform: uppercase; }
.event-date { display: block; max-width: 610px; margin: 0 auto; }
.month { font-size: clamp(20px, 3vw, 28px); letter-spacing: .08em; }
.date-row { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 12px; }
.date-side {
  flex: 1;
  padding: 8px 0 6px;
  border-block: 2px solid var(--blue);
  font-size: clamp(22px, 4vw, 40px);
  line-height: 1;
}

.date-day {
  font-family: "Invitacion Numeros", Georgia, serif;
  font-size: clamp(82px, 13vw, 118px);
  line-height: 1;
  letter-spacing: -.05em;
}

.venue { font-size: clamp(20px, 3vw, 27px); line-height: 1.5; letter-spacing: .04em; margin-top: 68px; }
.small-divider { width: 55px; height: 1px; background: var(--blue); margin: 42px auto 30px; opacity: .5; }
.location-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 32px;
  padding: 12px 30px;
  border: 2px solid var(--blue);
  color: var(--blue);
  font-size: 18px;
  letter-spacing: .06em;
  text-decoration: none;
}
.location-button:hover { background: var(--blue); color: white; }
.location-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.dress-code { font-size: clamp(15px, 2.4vw, 20px); letter-spacing: .09em; }
.closing { background: var(--blue); color: white; padding: 65px 38px 38px; text-align: center; }
.closing h2 { font-size: clamp(65px, 12vw, 100px); line-height: 1.05; margin-bottom: 50px; }
.confirmation-copy {
  margin-bottom: 45px;
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 1.6;
  letter-spacing: .035em;
}
.confirmation-copy a { color: inherit; text-underline-offset: 4px; white-space: nowrap; }
.confirmation-copy a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.closing-photo { width: 100%; height: auto; }

@media (max-width: 540px) {
  .cover-photo { height: auto; object-fit: initial; }
  .invitation { padding: 58px 22px 65px; }
  .cap { margin-bottom: 45px; }
  .graduation-title { margin-bottom: 50px; max-width: 340px; }
  .graduation-word { width: 108%; }
  .celebration { padding: 24px 18px 48px; }
  .countdown-wrap { padding-top: 32px; }
  .countdown { gap: 7px; margin-top: 20px; }
  .countdown-label { letter-spacing: .03em; }
  .event { padding: 65px 25px 60px; }
  .date-row { gap: 16px; }
  .venue { margin-top: 44px; }
  .closing { padding: 42px 18px 18px; }
  .closing h2 { margin-bottom: 35px; }
}

@media (max-width: 360px) {
  .graduation-word { font-size: 66px; }
  .countdown-label { font-size: 9px; }
  .closing h2 { font-size: 56px; }
}