@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  --ivory: #f1eee8;
  --ink: #131210;
  --line: rgba(255,255,255,.3);
  --muted: rgba(255,255,255,.65);
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; color: var(--ivory); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
img { display: block; }
::selection { color: var(--ink); background: var(--ivory); }

.coming-soon { position: relative; min-height: 100svh; overflow: hidden; background: var(--ink); isolation: isolate; }
.coming-soon__image { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; transform: scale(1.015); animation: settle 1.8s cubic-bezier(.2,.75,.3,1) both; }
.coming-soon__veil { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(9,9,8,.9) 0%, rgba(9,9,8,.63) 46%, rgba(9,9,8,.18) 100%), linear-gradient(180deg, rgba(9,9,8,.28), transparent 35%, rgba(9,9,8,.55)); }

.brand-header { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: clamp(1.5rem, 3.5vw, 3.5rem) var(--gutter); border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: baseline; gap: .8rem; text-transform: uppercase; }
.wordmark span { font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 2rem); letter-spacing: .04em; }
.wordmark small, .brand-header > p { margin: 0; font-size: .59rem; letter-spacing: .2em; text-transform: uppercase; }
.brand-header > p { padding-top: .65rem; }

.coming-soon__content { min-height: 100svh; display: grid; grid-template-columns: 1.4fr .6fr; grid-template-rows: auto 1fr auto; gap: 2rem 5vw; align-items: end; padding: clamp(8rem, 15vh, 11rem) var(--gutter) clamp(6rem, 10vh, 8rem); }
.status-line { grid-column: 1 / -1; align-self: start; display: flex; align-items: center; gap: .75rem; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.status-line__dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 .3rem rgba(255,255,255,.14); animation: pulse 2.4s ease-in-out infinite; }
.headline-wrap { grid-column: 1; }
.eyebrow { margin: 0 0 1.35rem; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 0; font-family: var(--serif); font-size: clamp(5rem, 11.5vw, 13.5rem); font-weight: 400; line-height: .72; letter-spacing: -.045em; }
h1 i { font-weight: 400; }
.coming-soon__message { grid-column: 2; align-self: end; max-width: 25rem; padding-bottom: .8rem; }
.coming-soon__message > p { margin: 0 0 2rem; font-family: var(--serif); font-size: clamp(1.2rem, 1.7vw, 1.65rem); line-height: 1.35; }
.coming-soon__message > span { display: inline-block; padding: .85rem 1.15rem; border: 1px solid rgba(255,255,255,.45); border-radius: 99px; font-size: .57rem; letter-spacing: .18em; text-transform: uppercase; }

.site-footer { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 1.35rem var(--gutter); border-top: 1px solid var(--line); color: var(--muted); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }
.site-footer p { margin: 0; }
.site-footer p:nth-child(2) { text-align: center; }
.site-footer p:last-child { text-align: right; }

@keyframes settle { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1.015); } }
@keyframes pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

@media (max-width: 800px) {
  .coming-soon__image { object-position: 64% center; }
  .coming-soon__veil { background: linear-gradient(180deg, rgba(9,9,8,.48), rgba(9,9,8,.18) 28%, rgba(9,9,8,.88) 100%); }
  .coming-soon__content { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 1.5rem; padding-top: 8rem; padding-bottom: 7rem; }
  .headline-wrap { grid-column: 1; align-self: end; }
  h1 { font-size: clamp(4.4rem, 22vw, 7.5rem); }
  .coming-soon__message { grid-column: 1; max-width: 30rem; padding-bottom: 0; }
  .coming-soon__message > p { margin-bottom: 1.25rem; font-size: 1.1rem; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer p:nth-child(2) { display: none; }
  .site-footer p:last-child { text-align: right; }
}

@media (max-width: 480px) {
  .wordmark { display: grid; gap: .25rem; }
  .wordmark small { font-size: .48rem; }
  .brand-header > p { font-size: .5rem; }
  .status-line { max-width: 14rem; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}