@font-face { font-family: Inter; src: url('/assets/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Cardo; src: url('/assets/fonts/cardo.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root { --paper: #f9f9f9; --ink: #111; --orange: #e5683a; --rose: #d09c9c; --gold: #e59937; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, sans-serif; font-size: 16.8px; line-height: 1.55; }
a { color: inherit; text-decoration: underline; text-underline-offset: .12em; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; background: #111; color: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.page-shell { width: min(629px, calc(100vw - 40px)); margin: 64px auto 113px; transform: translateX(14.5px); }
.hero { position: relative; width: 100%; height: 540px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding: 15.6px; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-copy { position: relative; z-index: 1; display: flex; width: max-content; max-width: 100%; flex-direction: column; align-items: flex-end; margin-bottom: 35px; text-align: right; }
.hero-copy p { margin: 0; font-family: Inter, sans-serif; }
.hero-first { width: clamp(173px, 28.67vw, 367px); color: var(--orange); font-size: clamp(70.6px, 10.94vw, 140px); font-weight: 700; line-height: .8; }
.hero-last { width: clamp(271px, 38.59vw, 494px); color: var(--rose); font-size: clamp(49.4px, 7.03vw, 90px); font-weight: 700; line-height: 1; text-align: center; }
.hero-tagline { width: clamp(258px, 30.55vw, 391px); color: var(--paper); font-size: clamp(19.8px, 2.34vw, 30px); font-weight: 300; line-height: 1.1; }
.section { font-size: 14.4px; line-height: 1.55; }
.section h2 { margin: 0 0 12px; font-family: Cardo, Georgia, serif; font-size: 29.6px; font-weight: 400; line-height: 1.2; color: #000; }
.section p { margin: 0 0 14px; }
.intro { padding-top: 58px; }
.intro h2 { margin-bottom: 18px; }
.intro > p { line-height: 1.7; }
.intro > p { margin-bottom: 20px; }
.intro > p:last-child { margin-bottom: 14px; }
.occasion-list { width: 232px; }
.occasion-list span { white-space: nowrap; }
.button-wrap { display: flex; justify-content: center; margin: 56px 0 58px; }
.outline-button { display: inline-block; min-width: 157px; padding: 16px 32px; border: 1px solid var(--gold); border-radius: 100px; color: var(--gold); font-size: 16px; font-weight: 500; line-height: 1.55; text-align: center; text-decoration: none; transition: background .2s, color .2s; }
.outline-button:hover, .outline-button:focus-visible { background: var(--gold); color: #fff; }
.contact { padding-top: 6px; }
.contact h2 { margin-bottom: 19px; }
.contact form { margin-top: 19px; padding-bottom: 32px; }
.contact label { display: block; margin: 0 0 10px; }
.contact input, .contact textarea { display: block; width: 100%; border: 1px solid #949494; border-radius: 4px; background: transparent; color: #000; font: 14.7px Arial, sans-serif; padding: 8px; }
.contact input { height: 35px; margin-bottom: 17px; }
.contact textarea { height: 200px; resize: vertical; margin-bottom: 16px; }
.contact button, .password-row button { border: 0; border-radius: 5px; background: #111; color: #f9f9f9; font: 500 14.7px/1.55 Inter, sans-serif; padding: 10px 20px; cursor: pointer; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-status { padding: 10px 12px; border-radius: 4px; }
.form-status.success { background: #e9f3e8; color: #225b26; }
.form-status.error { background: #f5e8e8; color: #7d2424; }
.portrait, .landscape { margin: 66px 0 0; }
.portrait img, .landscape img { width: 100%; border-radius: 15px; object-fit: cover; filter: grayscale(1) opacity(.8); }
.portrait img { aspect-ratio: 683 / 1024; }
.about { padding-top: 115px; }
.about h2 { margin-bottom: 19px; }
.about p { margin-bottom: 19px; }
.button-stack { display: flex; flex-direction: column; align-items: center; gap: 11px; margin: 59px 0 0; }
.button-stack .outline-button { width: 186px; }
.landscape { margin-top: 58px; }
.landscape img { aspect-ratio: 1024 / 674; }

.password-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }
.password-card { width: min(620px, 100%); }
.password-card > p:first-child { margin: 0 0 24px; }
.password-card label { display: block; font-weight: 600; margin-bottom: 8px; }
.password-row { display: flex; gap: 10px; align-items: stretch; }
.password-row input { min-width: 0; flex: 1; border: 1px solid #949494; border-radius: 4px; background: #fff; padding: 9px 10px; font: inherit; }
.password-error { margin: 12px 0 0; color: #a12626; font-size: 14px; }

@media (max-width: 700px) {
  .page-shell { width: calc(100vw - 39px); margin-top: 19.5px; margin-bottom: 88px; transform: none; }
  .hero { width: calc(100% - 16.68px); height: 633px; margin-inline: auto; }
  .hero-copy { margin-bottom: 0; }
  .hero-first { font-size: 70.6px; line-height: .8; }
  .hero-last { font-size: 49.4px; }
  .hero-tagline { font-size: 19.8px; line-height: 1.1; }
  .section h2 { font-size: 22.8px; }
  .intro { padding-top: 30px; }
  .section p { margin-bottom: 14px; }
  .intro h2 { margin-bottom: 20px; }
  .intro > p { margin-bottom: 20px; }
  .intro > p:last-child { margin-bottom: 14px; }
  .button-wrap { margin: 29px 0 31px; }
  .outline-button { min-width: 146px; font-size: 14.15px; }
  .contact { padding-top: 5px; }
  .portrait { margin-top: 47px; }
  .about { padding-top: 45px; }
  .about p { margin-bottom: 19px; }
  .button-stack { margin-top: 32px; gap: 11px; }
  .button-stack .outline-button { width: 172px; }
  .landscape { margin-top: 31px; }
  .password-row { align-items: stretch; }
}

@media (max-width: 360px) {
  .hero-first { font-size: 63px; }
  .hero-last { font-size: 44px; }
  .hero-tagline { font-size: 18px; }
  .password-row { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }