:root {
  --paper: #ffffff;
  --ink: #050505;
  --muted: #5a5a5a;
  --line: rgba(5, 5, 5, .22);
  --button: #050505;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; }

.page { height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(370px, .92fr); }
.intro { height: 100svh; min-height: 0; padding: clamp(24px, 3.2vh, 42px) clamp(26px, 6.2vw, 100px) clamp(22px, 3vh, 34px); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding-top: clamp(28px, 5vh, 62px); }
.brand-logo { display: block; width: clamp(330px, 29vw, 460px); max-width: 70%; max-height: 20vh; height: auto; object-fit: contain; object-position: left top; mix-blend-mode: multiply; }
.hero-copy { margin: auto 0; padding: clamp(16px, 2.5vh, 34px) 0 clamp(14px, 2.3vh, 30px); max-width: 720px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(18px, 2.8vh, 34px); color: var(--muted); text-transform: uppercase; letter-spacing: .2em; font-size: .66rem; }
.eyebrow span { width: 38px; height: 1px; background: var(--ink); }
h1 { margin: 0; max-width: 740px; font-family: "Italiana", serif; font-size: clamp(3.2rem, min(6.6vw, 9.4vh), 7.4rem); font-weight: 400; line-height: .92; letter-spacing: -.035em; }
h1 em { font-style: italic; color: #3d3d3d; }
.announcement { margin: clamp(20px, 3vh, 34px) 0 clamp(18px, 2.5vh, 28px); padding-left: clamp(20px, 3vw, 45px); border-left: 1px solid var(--line); }
.announcement p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.7; }
.announcement .coming-soon { color: var(--ink); font-family: "Italiana", serif; font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1.15; }
.booking { width: fit-content; min-width: 248px; padding: 18px 20px 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #ffffff; background: var(--button); border: 1px solid var(--button); text-decoration: none; text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; transition: transform .25s ease, color .25s ease, background .25s ease; }
.booking:hover { transform: translateY(-3px); color: var(--ink); background: #ffffff; }
.booking:focus-visible { outline: 3px solid #050505; outline-offset: 4px; }
.booking svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; }
footer { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; }
footer p { margin: 0; }

.visual { position: relative; height: 100svh; min-height: 0; overflow: hidden; }
.visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; filter: none; animation: reveal 1.2s cubic-bezier(.2,.7,.2,1) both; }
.image-wash { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.015), rgba(0,0,0,.025)); }
.vertical-note { position: absolute; right: 22px; bottom: 35px; margin: 0; color: rgba(255,255,255,.82); writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: .18em; font-size: .58rem; }

@keyframes reveal { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .visual img { animation: none; } .booking { transition: none; } }

@media (max-width: 800px) {
  .page { height: auto; min-height: 100svh; overflow: visible; grid-template-columns: 1fr; }
  .intro { height: auto; min-height: 62svh; padding-bottom: 26px; }
  .hero-copy { padding: 11vh 0 8vh; }
  h1 { font-size: clamp(3.2rem, 14vw, 5.4rem); }
  .visual { height: auto; min-height: 38svh; order: 2; }
  .visual img { object-position: center 46%; }
  .brand { padding-top: 12px; }
}

@media (max-width: 480px) {
  .intro { min-height: 64svh; padding: 24px 20px; }
  .brand-logo { width: 230px; max-width: 72%; }
  .hero-copy { padding: 8vh 0 6vh; }
  .eyebrow { margin-bottom: 22px; }
  .announcement { margin: 27px 0 22px; }
  .booking { width: 100%; min-width: 0; }
  footer { display: none; }
  .visual { min-height: 36svh; }
}