:root {
  --green: #0D4926;
  --coral: #FD6950;
  --yellow: #F0C16C;
  --cream: #FCF4E9;
  --brown: #908068;
  --text: color-mix(in srgb, var(--brown) 78%, #000);
  color-scheme: light;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--green);
  background: var(--cream);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
.coming-soon { position: relative; min-height: 100svh; isolation: isolate; overflow: hidden; }
.photograph { position: absolute; inset: 0; z-index: -2; }
.photograph img { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.photograph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cream) 0%, rgba(252,244,233,.97) 25%, rgba(252,244,233,.88) 39%, rgba(252,244,233,.25) 58%, transparent 72%);
}
.message {
  width: 57%;
  max-width: 960px;
  min-height: 100svh;
  padding: clamp(32px, 6vh, 72px) 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.brand img { display: block; width: 112px; height: 112px; object-fit: contain; margin: 0 auto 10px; }
.brand p { margin: 0; color: var(--green); font: 1.9rem/1.2 Georgia, "Times New Roman", serif; }
.divider { width: 44px; height: 2px; background: var(--coral); margin: 25px 0 26px; }
h1 { font: 400 clamp(3.3rem, 5.8vw, 6.2rem)/1.04 Georgia, "Times New Roman", serif; letter-spacing: -.025em; margin: 0 0 28px; }
.intro, .contact-intro { color: var(--text); font-size: clamp(1rem, 1.4vw, 1.3rem); line-height: 1.6; margin: 0; }
.contact-intro { margin-top: 10px; }
.email { color: var(--green); font-size: clamp(1rem, 1.55vw, 1.4rem); line-height: 1.6; text-underline-offset: 6px; text-decoration-color: var(--yellow); text-decoration-thickness: 1px; margin-top: 15px; padding: 5px 0; overflow-wrap: anywhere; max-width: 100%; }
.email:hover { color: var(--green); text-decoration-color: var(--coral); }
.email:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; border-radius: 2px; }
.animals { margin: 36px 0 0; color: var(--text); font-size: 1rem; letter-spacing: .2em; }
.animals span { margin: 0 9px; }

@media (max-width: 760px) {
  .coming-soon { display: flex; flex-direction: column; }
  .message { width: 100%; max-width: none; min-height: auto; padding: 32px 22px 22px; }
  .brand img { width: 85px; height: 85px; margin-bottom: 8px; }
  .brand p { font-size: 1.6rem; }
  .divider { margin: 20px 0; }
  h1 { font-size: clamp(2.8rem, 10vw, 4.5rem); margin-bottom: 22px; }
  .desktop-break { display: none; }
  .intro { max-width: 340px; }
  .animals { margin-top: 26px; font-size: .9rem; }
  .photograph { position: relative; inset: auto; order: 2; z-index: -1; height: clamp(260px, 65vw, 440px); }
  .photograph img { object-position: 80% center; }
  .photograph::after { background: linear-gradient(180deg, var(--cream) 0%, rgba(252,244,233,0) 28%); }
}