:root {
  --cream: #f5f0e6;
  --coral: #e47a56;
  --ink: #192521;
  --mono: "DM Mono", monospace;
  --display: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { margin: 0; background: var(--ink); color: var(--cream); }
a { color: inherit; text-decoration: none; }
.construction-page { display: flex; flex-direction: column; height: 100svh; overflow: hidden; position: relative; }
.background-video { height: 100%; inset: 0; object-fit: cover; position: fixed; width: 100%; z-index: 0; }
.video-overlay { background: rgba(21, 31, 26, .53); inset: 0; position: fixed; z-index: 1; }
.site-header, .site-footer, .message { position: relative; z-index: 2; }
.site-header { align-items: center; display: flex; justify-content: space-between; padding: 28px 5vw; }
.wordmark { font-family: var(--display); font-size: 31px; font-weight: 500; letter-spacing: .04em; }
.wordmark span { color: var(--coral); }
.site-header p, .eyebrow, .status, .site-footer { font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.site-header p { margin: 0; opacity: .85; }
.message { display: flex; flex: 1; flex-direction: column; justify-content: center; min-height: 0; padding: clamp(52px, 8vh, 85px) 14vw clamp(72px, 11vh, 120px); }
.eyebrow { color: #ffad8d; margin: 0 0 27px; }
h1 { font: 500 clamp(64px, 9.4vw, 142px)/.88 var(--display); letter-spacing: -.04em; margin: 0 0 37px; max-width: 850px; }
h1 em { color: var(--coral); font-style: italic; }
.description { font: 17px/1.55 var(--display); margin: 0; max-width: 330px; }
.status { align-items: center; display: flex; gap: 11px; margin: 40px 0 0; }
.status span { background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 5px rgba(228, 122, 86, .2); display: inline-block; height: 8px; width: 8px; }
.site-footer { align-items: center; display: flex; justify-content: space-between; padding: 27px 5vw; }
.site-footer a { border-bottom: 1px solid rgba(245, 240, 230, .55); padding-bottom: 4px; }
.site-footer b { color: var(--coral); font-size: 16px; font-weight: 400; margin-left: 6px; vertical-align: -2px; }

@media (max-width: 600px) {
  .site-header { padding: 22px 7vw; }
  .site-header p { font-size: 9px; }
  .message { padding: clamp(48px, 12vh, 80px) 9vw clamp(48px, 10vh, 80px); }
  h1 { font-size: clamp(48px, 17vw, 88px); }
  .description { font-size: 16px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 16px; padding: 22px 7vw max(22px, env(safe-area-inset-bottom)); }
  .site-footer span:last-child { display: none; }
}