:root {
  --paper: #e9e2d4;
  --ink: #241f17;
  --ink-strong: #272319;
  --muted: rgba(45, 41, 32, 0.75);
  --line: rgba(40, 36, 28, 0.16);
  --rule: rgba(40, 36, 28, 0.34);
  --edge: clamp(20px, 2vw + 1.4vh, 64px);
  --inline: clamp(12px, 1.4vw + 1vh, 56px);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Jost", system-ui, sans-serif;
  color: var(--ink-strong);
}

a { color: #4c463a; text-decoration: none; }
a:hover { color: var(--ink); }

.page {
  position: relative;
  display: grid;
  grid-template-rows: auto 1.75fr auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--edge);
  overflow: hidden;
  background: radial-gradient(115% 82% at 50% 10%, #f4efe4 0%, #ebe4d5 46%, #e2dac7 100%);
}

.watermark {
  position: absolute;
  top: -8vh;
  right: -6vw;
  font-family: "Tiro Devanagari Sanskrit", serif;
  font-size: clamp(180px, 34vw, 440px);
  line-height: 1;
  color: var(--ink);
  opacity: 0.042;
  white-space: nowrap;
  pointer-events: none;
  animation: wmark 12s ease-in-out infinite;
}

.frame {
  position: absolute;
  inset: clamp(11px, 1.4vw, 22px);
  border: 1px solid var(--line);
  pointer-events: none;
}

.masthead {
  grid-row: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--inline);
}

.masthead-mark {
  width: clamp(40px, 2.4vw + 2.2vh, 76px);
  height: auto;
  filter: brightness(0.44) saturate(0.3);
  animation: breathe 9s ease-in-out infinite;
}

.masthead-region {
  font-size: clamp(9px, 0.5vw + 0.55vh, 13px);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.hero {
  grid-row: 3;
  position: relative;
  max-width: 46rem;
  padding: 0 var(--inline);
  animation: rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-wordmark {
  display: block;
  width: clamp(160px, 14vw + 11vh, 400px);
  height: auto;
  filter: brightness(0.4) saturate(0.28);
}

.hero-rule {
  height: 1px;
  margin: clamp(16px, 1.6vw + 1.6vh, 46px) 0 clamp(14px, 1.2vw + 1.4vh, 34px);
  background: linear-gradient(90deg, var(--rule), rgba(40, 36, 28, 0.04));
}

h1 {
  margin: 0;
  max-width: 20ch;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(28px, 2.2vw + 2.4vh, 66px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink-strong);
  text-wrap: pretty;
}

.footer {
  grid-row: 5;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--inline) var(--inline) clamp(6px, 1vh, 16px);
  font-size: clamp(9px, 0.5vw + 0.55vh, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

@keyframes breathe {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.022); }
}

@keyframes wmark {
  0%, 100% { opacity: 0.035; }
  50% { opacity: 0.058; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .watermark {
    top: -2vh;
    right: -14vw;
    font-size: clamp(120px, 50vw, 220px);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}