* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  color: #1a1a1a;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

.serif { font-family: 'EB Garamond', serif; }

a { color: inherit; }

/* Header + logo */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 48px;
  border-bottom: 1px solid #eaeaea;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  color: #1a1a1a;
}

.logo .cakes { font-family: 'EB Garamond', serif; font-size: 20px; letter-spacing: 4px; }

.logo .tiers { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0; }
.logo .tiers span { display: block; height: 1.5px; background: #1a1a1a; border-radius: 2px; }
.logo .tiers .t1 { width: 60px; }
.logo .tiers .t2 { width: 40px; height: 1.2px; }
.logo .tiers .t3 { width: 22px; height: 0.8px; }

.logo .byilu { font-family: 'EB Garamond', serif; font-size: 13px; letter-spacing: 6px; }

nav { display: flex; gap: 36px; font-size: 13px; letter-spacing: 0.5px; }
nav a { text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
nav a:hover, nav a.active { border-color: #1a1a1a; }

/* Page header (used on inner pages) */
.page-header { text-align: center; padding: 64px 24px 16px; max-width: 620px; margin: 0 auto; }
.page-header h1 { font-family: 'EB Garamond', serif; font-style: italic; font-size: 30px; font-weight: 400; margin-bottom: 12px; }
.page-header p { font-size: 14px; color: #666666; }

/* Hero (homepage) */
.hero { text-align: center; padding: 64px 24px 48px; max-width: 620px; margin: 0 auto; }
.hero h1 { font-family: 'EB Garamond', serif; font-style: italic; font-size: 32px; font-weight: 400; line-height: 1.3; margin-bottom: 16px; }
.hero p { font-size: 14px; color: #666666; letter-spacing: 0.3px; }

/* Gallery grid */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: #eaeaea; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; }
.gallery a { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f4f4f4; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease, filter 0.4s ease; filter: grayscale(15%); }
.gallery a:hover img { transform: scale(1.04); filter: grayscale(0%); }

.insta-cta { text-align: center; padding: 56px 24px; }
.insta-cta p.label { font-size: 11px; letter-spacing: 2px; color: #999999; margin-bottom: 10px; }
.insta-cta a.handle { font-family: 'EB Garamond', serif; font-style: italic; font-size: 24px; color: #1a1a1a; text-decoration: none; border-bottom: 1px solid #1a1a1a; padding-bottom: 2px; }

/* About page */
.about-wrap { max-width: 620px; margin: 0 auto; padding: 8px 24px 64px; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.about-photo { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; background: #f4f4f4; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(15%); }
.about-wrap p.bio { font-size: 15px; line-height: 1.8; color: #333333; }
.about-wrap p.placeholder-note { font-size: 12px; color: #bbbbbb; font-style: italic; }

/* Pricing page */
.pricing-wrap { max-width: 620px; margin: 0 auto; padding: 8px 24px 64px; }
.price-tier { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0; border-bottom: 1px solid #eaeaea; }
.price-tier:last-child { border-bottom: none; }
.price-tier .name { font-family: 'EB Garamond', serif; font-size: 19px; }
.price-tier .desc { font-size: 12px; color: #999999; margin-top: 4px; }
.price-tier .amount { font-size: 15px; color: #1a1a1a; white-space: nowrap; margin-left: 24px; }
.pricing-note { text-align: center; font-size: 13px; color: #666666; margin-top: 40px; line-height: 1.7; }

/* Contact page */
.contact-wrap { max-width: 480px; margin: 0 auto; padding: 8px 24px 80px; text-align: center; }
.contact-item { padding: 20px 0; border-bottom: 1px solid #eaeaea; }
.contact-item:last-child { border-bottom: none; }
.contact-item .label { font-size: 11px; letter-spacing: 2px; color: #999999; margin-bottom: 8px; }
.contact-item a, .contact-item span { font-family: 'EB Garamond', serif; font-style: italic; font-size: 19px; color: #1a1a1a; text-decoration: none; }
.contact-item a:hover { border-bottom: 1px solid #1a1a1a; }

footer { border-top: 1px solid #eaeaea; padding: 32px 48px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #999999; }
footer a { text-decoration: none; }
footer a:hover { color: #1a1a1a; }

@media (max-width: 640px) {
  header { flex-direction: column; gap: 20px; padding: 24px; }
  nav { gap: 20px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .hero h1, .page-header h1 { font-size: 24px; }
  footer { flex-direction: column; gap: 12px; text-align: center; }
  .price-tier { flex-direction: column; gap: 6px; }
  .price-tier .amount { margin-left: 0; }
}