:root {
  --paper: #f3efe6;
  --ink: #1f1d1a;
  --ink-soft: #57524a;
  --line: #c9bfad;
  --ochre: #a8763e;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Work Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 5vw, 72px);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 300 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .3s, color .3s; }
a:hover { color: var(--ochre); border-color: var(--ochre); }

/* Topography fills the whole page; the veil keeps text legible on the left */
.contours { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.veil {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 70% at 15% 85%, rgba(243, 239, 230, .78), rgba(243, 239, 230, 0) 70%);
}

.page {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(110px, 16vh, 160px) var(--gutter) 8px;
  gap: clamp(28px, 5vh, 56px);
}

/* Small transparent logo pinned top-left, directly on the contours */
.brand { position: absolute; top: clamp(20px, 4vh, 40px); left: var(--gutter); margin: 0; line-height: 0; }
.brand img { width: clamp(68px, 6vw, 96px); height: auto; }

.eyebrow, .label, .foot, .tag {
  font: 400 12px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.soon { font-family: var(--serif); font-size: clamp(34px, 5vw, 64px); line-height: 1.05; margin-top: 12px; }
.soon em { font-style: italic; color: var(--ochre); }

.contact {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 24px clamp(28px, 4vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--ink);
  max-width: max-content;
}
.label { margin-bottom: 8px; }
.item p:not(.label) { font-size: 16px; line-height: 1.7; }
.tag { font-size: 10px; margin-left: 6px; }

.foot {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 16px;
  padding: 20px var(--gutter);
}

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr 1fr; max-width: none; }
}
@media (max-width: 480px) {
  .contact { grid-template-columns: 1fr; }
  .readout { display: none; }
  .veil { background: rgba(243, 239, 230, .55); }
}