@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-style: normal;
  src: url('font/Pretendard-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-style: normal;
  src: url('font/Pretendard-Medium.otf') format('opentype');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-style: normal;
  src: url('font/Pretendard-Bold.otf') format('opentype');
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

.wi-page {
  position: relative;
  width: 100vw;
  min-height: 1384vw;
  background: #FDFBF9;
}

/* Override time-area from style.css */
.wi-page .time-area {
  top: calc(56 / 1728 * 100vw);
}

/* Back arrow */
.wi-back {
  position: absolute;
  left: calc(208 / 1728 * 100vw);
  top: calc(189 / 1728 * 100vw);
  width: calc(20 / 1728 * 100vw);
  height: calc(20 / 1728 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.wi-back img {
  width: 100%;
  height: auto;
}

/* Wedd.it logo */
.wi-logo {
  position: absolute;
  left: calc(258 / 1728 * 100vw);
  top: calc(161 / 1728 * 100vw);
  width: calc(212 / 1728 * 100vw);
  height: auto;
}

.wi-hero-meta {
  position: absolute;
  left: calc(492 / 1728 * 100vw);
  top: calc(207 / 1728 * 100vw);
  margin: 0;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(16 / 1728 * 100vw);
  line-height: 1;
  color: #6B4C38;
  white-space: nowrap;
}

.wi-main-image {
  position: absolute;
  left: 50%;
  top: calc(300 / 1728 * 100vw);
  width: 100%;
  max-width: 100vw;
  height: auto;
  display: block;
  object-fit: contain;
  transform: translateX(-50%);
}

/* Hero section */
.wi-hero {
  position: absolute;
  left: 0;
  top: calc(303 / 1728 * 100vw);
  width: 100%;
  background: #D4B8AA;
}

.wi-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* ─── Section navigation ─── */
.wi-section-nav {
  position: absolute;
  left: calc(220 / 1728 * 100vw);
  display: flex;
  align-items: center;
  gap: calc(11 / 1728 * 100vw);
}

.wi-nav-01 { top: calc(1198 / 1728 * 100vw); }

.wi-nav-num {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(33 / 1728 * 100vw);
  text-transform: uppercase;
  color: #C4A898;
  line-height: 1;
}

.wi-nav-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(13 / 1728 * 100vw) calc(26 / 1728 * 100vw);
  height: calc(38 / 1728 * 100vw);
  background: #F0E4DC;
  border: calc(0.5 / 1728 * 100vw) solid #8B5E45;
  border-radius: calc(39 / 1728 * 100vw);
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(20 / 1728 * 100vw);
  line-height: 112%;
  color: #5C3520;
  white-space: nowrap;
}

/* ─── Overview ─── */
.wi-overview {
  position: absolute;
  left: calc(220 / 1728 * 100vw);
  top: calc(1248 / 1728 * 100vw);
  width: calc(904 / 1728 * 100vw);
  display: flex;
  flex-direction: column;
  gap: calc(54 / 1728 * 100vw);
}

.wi-overview-title {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: calc(55 / 1728 * 100vw);
  line-height: 114%;
  color: #2C1F14;
  margin: 0;
  white-space: nowrap;
}

.wi-overview-title strong {
  font-weight: 700;
}

.wi-overview-meta {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(16 / 1728 * 100vw);
  line-height: 145%;
  color: #7A5540;
  margin: 0;
}

/* Horizontal divider */
.wi-divider {
  position: absolute;
  left: calc(220 / 1728 * 100vw);
  top: calc(1634 / 1728 * 100vw);
  width: calc(1284 / 1728 * 100vw);
  height: 0;
  border-top: 0.5px solid #C4A898;
}