:root {
  color-scheme: light;
  --paper: #f4f2ee;
  --ink: #242522;
  --muted: #77766f;
  --line: #d9d6cf;
  --accent: #9b684c;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.page { min-height: 100svh; padding: 0 clamp(24px, 6.2vw, 96px); display: flex; flex-direction: column; }
.topbar { height: 92px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.wordmark { color: var(--ink); font-size: 19px; letter-spacing: .15em; font-weight: 600; text-decoration: none; }
.wordmark span { color: var(--accent); }
.location { color: var(--muted); font-size: 10px; letter-spacing: .16em; }
.location i, .eyebrow span { display: inline-block; width: 4px; height: 4px; margin: 0 9px 2px; border-radius: 50%; background: var(--accent); }
.hero { flex: 1; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(36px, 7vw, 112px); padding: clamp(64px, 10vh, 118px) 0; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 30px; color: var(--muted); font-size: 10px; letter-spacing: .2em; }
.eyebrow span { margin-left: 0; }
h1 { max-width: 680px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(48px, 6.4vw, 92px); font-weight: 400; line-height: .99; letter-spacing: -.055em; }
.period { color: var(--accent); }
.coming { margin: 38px 0 31px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.contact { display: inline-flex; align-items: center; gap: 17px; padding-bottom: 8px; border-bottom: 1px solid #aaa69d; color: var(--ink); font-size: 13px; text-decoration: none; }
.contact span { color: var(--accent); font-size: 16px; transition: transform .2s ease; }
.contact:hover span { transform: translate(2px, -2px); }
.visual { position: relative; min-height: 420px; height: min(59vw, 590px); overflow: hidden; background: linear-gradient(145deg, #d7c6b3 0%, #b59172 52%, #83624c 100%); }
.sun { position: absolute; width: 46%; aspect-ratio: 1; top: 11%; left: 28%; border-radius: 50%; background: #ead8c3; opacity: .82; }
.frame { position: absolute; z-index: 1; background: rgba(247, 237, 221, .72); }
.frame-one { width: 14%; height: 86%; top: 7%; left: 20%; transform: skewY(-24deg); }
.frame-two { width: 14%; height: 86%; top: 7%; right: 20%; transform: skewY(24deg); }
.shadow { position: absolute; z-index: 2; width: 150%; height: 62%; left: -20%; bottom: -14%; transform: rotate(-20deg); background: linear-gradient(90deg, #573f34 0 22%, transparent 22% 34%, #573f34 34% 62%, transparent 62%); opacity: .78; }
.visual-note { position: absolute; z-index: 3; right: 20px; bottom: 18px; color: rgba(255,255,255,.82); font-size: 8px; letter-spacing: .2em; }
.footer { min-height: 66px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; letter-spacing: .13em; }

@media (max-width: 700px) {
  .page { padding: 0 23px; }
  .topbar { height: 72px; }
  .wordmark { font-size: 16px; }
  .location { font-size: 8px; }
  .hero { grid-template-columns: 1fr; gap: 44px; padding: 65px 0 52px; }
  .eyebrow { margin-bottom: 24px; }
  h1 { font-size: clamp(46px, 12vw, 70px); }
  .coming { margin: 27px 0 24px; }
  .visual { min-height: 300px; height: 84vw; max-height: 440px; }
  .footer { min-height: 58px; gap: 10px; font-size: 7px; letter-spacing: .08em; }
}
@media (max-width: 380px) {
  .footer span:nth-child(2) { display: none; }
  .footer { justify-content: space-between; }
}