@font-face {
  font-family: 'Albert Sans';
  src: url('./fonts/albert-sans.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('./fonts/bodoni-moda-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
}
* { box-sizing: border-box; }
html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #F7F1E6;
  color-scheme: light;
}
body {
  position: fixed;
  inset: 0;
  isolation: isolate;
  margin: 0;
  height: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  display: grid;
  place-items: center;
  padding: max(28px, env(safe-area-inset-top)) max(26px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(26px, env(safe-area-inset-left));
  color: #684627;
  font-family: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('./patisserie-motifs.svg') center center / 900px 560px repeat;
  opacity: .075;
}
main { width: min(640px, 100%); min-height: 0; text-align: center; }
.logo { display: block; width: min(360px, 100%); height: auto; margin: 0 auto; }
.logo-fallback { display: block; width: 100%; height: auto; }
.logo-signature { display: none; width: 100%; height: auto; }
@supports (clip-path: inset(0)) {
  .logo-fallback { display: none; }
  .logo-signature { display: block; }
  .logo-signature-reveal {
    transform-box: view-box;
    transform-origin: 28px 16px;
    animation: logo-signature-write 1350ms cubic-bezier(.45,0,.2,1) 160ms both;
  }
  .logo-flourish-reveal {
    transform-box: view-box;
    transform-origin: 293px 47px;
    animation: logo-signature-write 600ms cubic-bezier(.25,.6,.3,1) 1250ms both;
  }
}
@keyframes logo-signature-write {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-signature-reveal, .logo-flourish-reveal {
    animation: none;
    transform: scaleX(1);
  }
}
.message {
  margin: 26px auto 0;
  font-family: 'Bodoni Moda', 'Bodoni MT', Didot, Georgia, serif;
  font-size: 29px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: #684627;
}
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  font-style: normal;
  font-weight: 400;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 5px; }
a:focus-visible { outline: 2px solid #A67C3D; outline-offset: 6px; }
.phone { font-size: 21px; letter-spacing: .055em; line-height: 1.5; }
.email { font-size: 17px; line-height: 1.6; }
.location { margin-top: 7px; font-size: 15px; line-height: 1.8; }
::selection { background: #E8D5B5; color: #291E18; }
@media (max-width: 480px) {
  body::before { background-size: 620px auto; }
  .logo { width: min(300px, 100%); }
  .message { margin-top: 23px; font-size: 25px; }
  .contact { margin-top: 27px; gap: 14px; }
  .phone { font-size: 20px; }
  .email { font-size: 16px; }
  .location { font-size: 14px; }
}

/* Fit the complete composition inside short mobile viewports. */
@media (max-height: 620px) {
  body { padding-top: max(22px, env(safe-area-inset-top)); padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  .logo { width: min(220px, 100%); }
  .message { margin-top: 14px; font-size: 23px; line-height: 1.3; }
  .contact { margin-top: 18px; gap: 8px; }
  .phone { font-size: 18px; }
  .email { font-size: 15px; }
  .location { margin-top: 4px; font-size: 13px; line-height: 1.6; }
}
@media (max-height: 440px) {
  body { padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .logo { width: min(160px, 100%); }
  .message { margin-top: 10px; font-size: 20px; line-height: 1.25; }
  .contact { margin-top: 12px; gap: 6px; }
  .phone { font-size: 17px; }
  .email { font-size: 14px; }
  .location { font-size: 12px; line-height: 1.5; }
}
@media (min-width: 550px) and (max-height: 500px) {
  main { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'logo contact' 'message contact'; column-gap: 35px; width: min(720px, 100%); align-items: center; }
  .logo { grid-area: logo; }
  .message { grid-area: message; }
  .contact { grid-area: contact; margin-top: 0; }
}

/* A single, gentle entrance for the whole composition. */
@media (prefers-reduced-motion: no-preference) {
  main { animation: cinematic-arrival 1700ms cubic-bezier(.22,.61,.36,1) 100ms backwards; }
  body::before { animation: cinematic-background 1900ms ease-out backwards; }
}
@keyframes cinematic-arrival {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.99); filter: blur(1.5px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes cinematic-background {
  from { opacity: 0; }
  to { opacity: .075; }
}
@media (prefers-reduced-motion: reduce) {
  main, body::before { animation: none; }
}