:root {
  --bg: #FAF9F6;
  --ink: #111111;
  --muted: #6B6B63;
  --accent: #8A7B5C;
  --line: #E7E5DF;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Cormorant', Georgia, serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0px) 24px env(safe-area-inset-bottom, 0px);
}

.watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Italiana', Georgia, serif;
  font-size: clamp(4.5rem, 19vw, 15rem);
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.05;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transition: transform 0.4s ease-out;
  will-change: transform;
}

.mark {
  position: relative;
  z-index: 1;
  width: min(58vw, 720px);
  opacity: 0;
  transform: scale(0.95) translateY(6px);
  animation: reveal 1.1s cubic-bezier(.16,.9,.2,1) 0.15s forwards;
}

.mark img { display: block; width: 100%; height: auto; }

@keyframes reveal {
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.contact {
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding: 10px 4px 6px;
  min-height: 40px;   /* comfortable tap target on phones */
  transition: color 0.2s ease, border-color 0.2s ease;
}

.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin: 0; }

.contact:hover { color: var(--accent); }

.contact:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.copyright {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 560px) {
  .mark { width: 78vw; }
  .foot { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* Short viewports (landscape phones): keep the logo and footer from crowding */
@media (max-height: 420px) {
  .watermark { font-size: clamp(3rem, 14vw, 8rem); }
  .mark { width: min(38vw, 420px); }
  .foot { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .mark { animation: none; opacity: 1; transform: none; }
  .watermark { transition: none; }
}