/* The full range-split Letter face is declared in fonts/letter-coverage.css.
   This small face also makes standalone exports self-contained. */
@font-face {
  font-family: 'Birthday Playful';
  src: url('fonts/birthday-playful.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Birthday Letter';
  src: url('fonts/birthday-letter.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0020-00FF;
}

:root {
  --font-ui: 'Nunito', 'Birthday Letter', 'Kaiti SC', KaiTi, serif;
  --font-letter: 'Birthday Letter', 'Kaiti SC', KaiTi, serif;
  --font-playful: 'Birthday Playful', var(--font-letter);
  --serif: var(--font-letter);
}

body {
  font-family: var(--font-ui);
  font-synthesis: none;
  line-height: 1.75;
}

.brand, h2, .ticket-title strong, .gift-name, .messages-heading h3,
.letter .letter-last, #guestbook-closed p:first-child {
  font-family: var(--font-letter);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: .025em;
}

.brand { font-size: 24px; letter-spacing: .07em; }

h1 {
  font-family: var(--font-playful);
  font-size: clamp(48px, 5.25vw, 72px);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: .015em;
  line-height: 1.42;
  margin-bottom: 22px;
}

.headline-line { display: block; width: fit-content; }
.headline-line:first-child { transform: rotate(-1.5deg); }
.headline-line + .headline-line { margin-top: .04em; transform: rotate(.6deg); }
.birthday-accent {
  position: relative;
  display: inline-block;
  transform: translateY(-.045em) rotate(-4deg);
  transform-origin: center bottom;
}
.birthday-accent::after {
  content: '';
  position: absolute;
  left: .04em;
  right: .18em;
  bottom: .04em;
  height: .1em;
  border-radius: 50%;
  background: var(--pink);
  transform: rotate(-2deg);
  z-index: -1;
}

.hero-sub {
  font-family: var(--font-letter);
  font-size: 19px;
  line-height: 1.95;
  letter-spacing: .035em;
}
.primary { font-size: 16px; font-weight: 400; letter-spacing: .035em; }
.gift-name > span, .messages-heading h3 span { font-family: var(--font-ui); }
.sound-button { font-size: 14px; }
.nav-date { font-size: 15px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.ticket-title strong { font-size: 28px; }
.ticket-info > span { font-size: 12px; letter-spacing: .06em; }
.ticket-info > strong { font-size: 14px; font-weight: 600; }
.ticket-info:nth-child(3) > strong { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
h2 { font-size: 35px; line-height: 1.55; text-wrap: pretty; }
.gift-name { font-size: 24px; }
.wish-copy h2 { font-size: 45px; line-height: 1.5; }
.wish-status { font-size: 14px; }

.letter h2 { font-size: 32px; margin-bottom: 30px; }
.letter > p {
  font-family: var(--font-letter);
  font-size: 18px;
  line-height: 2.25;
  letter-spacing: .025em;
  color: #705767;
}
.letter .letter-last { font-size: 27px; line-height: 1.8; }
.letter-last span {
  font-family: var(--font-playful);
  font-size: 1.12em;
  transform: rotate(-3deg);
}
.cake-text { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .1em; }
dialog h2 { font-size: 31px; }
dialog p { font-family: var(--font-letter); font-size: 17px; line-height: 1.95; }

/* Dynamic visitor text shares the complete WenKai face with the fixed copy. */
.guest-form-panel label { font-size: 15px; }
.guest-form-panel label span { font-size: 12px; }
.guest-form-panel input, .guest-form-panel textarea {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.9;
}
.guest-form-panel input::placeholder, .guest-form-panel textarea::placeholder {
  font-family: inherit;
  color: var(--muted);
  opacity: 1;
}
.messages-heading h3 { font-size: 25px; }
.message-author { font-size: 17px; font-weight: 400; color: var(--berry); }
.message-text { font-family: var(--font-ui); font-size: 17px; line-height: 2; letter-spacing: .025em; }
.message-date, .message-ticket small { font-size: 11px; }
.form-status, #messages-state { font-size: 13px; }
.messages-heading button, .more-messages { font-size: 12px; }

@media (max-width: 1000px) {
  h1 { font-size: clamp(39px, 5.1vw, 56px); }
  .hero-sub { font-size: 17px; }
  h2 { font-size: 31px; }
  .ticket-title strong { font-size: 24px; }
  .gift-name { font-size: 22px; }
  .wish-copy h2 { font-size: 39px; }
  .messages-heading h3 { font-size: 22px; }
}

@media (max-width: 700px) {
  .brand { font-size: 21px; letter-spacing: .035em; }
  h1 { font-size: clamp(38px, 10.5vw, 64px); line-height: 1.4; letter-spacing: .005em; }
  .hero-sub { font-size: 17px; margin-bottom: 24px; }
  h2 { font-size: clamp(25px, 6.5vw, 30px); line-height: 1.6; }
  .primary { font-size: 15px; }
  .sound-button { font-size: 13px; }
  .ticket-title strong { font-size: 26px; }
  .ticket-info strong { font-size: 13px; }
  .ticket-info span { font-size: 11px; }
  .gift-name { font-size: 23px; }
  .wish-copy h2 { font-size: 37px; }
  .letter h2 { font-size: 27px; }
  .letter > p { font-size: 17px; line-height: 2.15; text-align: left; }
  .letter .letter-last { font-size: 23px; text-align: center; }
  .letter-last span { margin-left: 0; margin-top: 6px; display: block; }
  dialog h2 { font-size: 28px; }
  dialog p { font-size: 16px; }
}

@media (max-width: 360px) {
  .brand { font-size: 19px; }
  .gift-name { font-size: 20px; }
  .nav { gap: 10px; }
  .sound-button { font-size: 11px; padding: 10px; gap: 6px; }
}