:root {
  --ivory: #f6f3ec;
  --bronze: #896449;
  --ink: #28241f;
  --stone: #e7e2d8;
  --sage: #8b907e;
  --display: Baskerville, "Baskerville Old Face", "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ivory); }
body { margin: 0; color: var(--ink); background: var(--ivory); font-family: var(--sans); }
img { max-width: 100%; display: block; }
a { color: inherit; }

.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: .8rem 1rem; background: var(--ink); color: var(--ivory);
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: absolute; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: clamp(1.4rem, 3vw, 3.2rem) clamp(1.4rem, 4vw, 4.8rem);
  color: var(--bronze); pointer-events: none;
}
.wordmark {
  display: inline-flex; flex-direction: column; text-decoration: none;
  font: 400 clamp(.72rem, .95vw, 1rem)/.92 var(--display);
  text-transform: uppercase; letter-spacing: .14em; pointer-events: auto;
}
.wordmark span:nth-child(2) { font-size: 1.55em; letter-spacing: .18em; }
.location-short { margin: .1rem 0 0; font-size: .67rem; letter-spacing: .2em; text-transform: uppercase; }

.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(18rem, 43%) 1fr;
  background: var(--ivory);
}
.hero-copy {
  position: relative; z-index: 2; display: flex; align-items: center;
  padding: 10rem 2rem 7rem clamp(1.5rem, 6vw, 7.2rem);
}
.hero h1 {
  margin: 0; max-width: 9.5ch; color: var(--bronze);
  font: 400 clamp(3.5rem, 6.5vw, 7.8rem)/.95 var(--display);
  letter-spacing: -.035em;
}
.hero-art {
  position: absolute; inset: 0;
  background: var(--ivory) url("assets/narava-skin-study.webp") 64% 50% / cover no-repeat;
  animation: breathe 18s ease-in-out infinite alternate;
}
.hero-art::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ivory) 0%, rgba(246,243,236,.96) 25%, rgba(246,243,236,.25) 51%, transparent 70%);
}
.art-shadow {
  position: absolute; width: 36vw; height: 34vw; right: -15vw; top: -20vw;
  border-radius: 50%; background: rgba(40,36,31,.14); filter: blur(60px);
  animation: shadow-shift 14s ease-in-out infinite alternate;
}
.scroll-line {
  position: absolute; z-index: 3; bottom: 0; left: 50%; width: 1px; height: 4rem;
  background: var(--bronze); transform-origin: bottom; animation: line-pulse 3s ease-in-out infinite;
}

.statement {
  min-height: 88svh; display: grid; grid-template-columns: 58% 42%;
  background: var(--stone); overflow: hidden;
}
.statement-image {
  min-height: 48rem;
  background: url("assets/narava-skin-study.webp") 77% 72% / 145% auto no-repeat;
  clip-path: ellipse(88% 72% at 10% 46%);
}
.statement-copy { display: flex; align-items: center; padding: clamp(3rem, 7vw, 8rem); }
.statement-copy p {
  margin: 0; color: var(--bronze);
  font: 400 clamp(2.1rem, 4.3vw, 5.2rem)/1.08 var(--display);
}
.statement-copy em { font-weight: 400; }

.arrival {
  min-height: 82svh; display: grid; place-items: center; padding: 5rem 1.5rem;
  background:
    radial-gradient(circle at 18% 30%, rgba(137,100,73,.06), transparent 30%),
    linear-gradient(rgba(246,243,236,.82), rgba(246,243,236,.92)),
    url("assets/narava-skin-study.webp") 35% 36% / cover no-repeat;
}
.arrival-inner { width: min(58rem, 100%); text-align: center; color: var(--bronze); }
.hairline { width: min(22rem, 70%); height: 1px; margin: 0 auto 3rem; background: var(--bronze); opacity: .62; }
.hairline:last-child { margin: 3rem auto 0; }
.arrival h2 {
  margin: 0 0 2.2rem; font: 400 clamp(1rem, 1.45vw, 1.35rem)/1 var(--sans);
  text-transform: uppercase; letter-spacing: .45em;
}
.arrival address {
  margin: 0; font: 400 clamp(1.25rem, 2.2vw, 2rem)/1.6 var(--display); font-style: normal;
}

.site-footer {
  display: flex; justify-content: space-between; gap: 2rem; padding: 1.4rem clamp(1.5rem, 4vw, 4.8rem);
  border-top: 1px solid rgba(137,100,73,.35); color: var(--bronze);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.25s ease, transform 1.25s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes breathe { from { transform: scale(1.01) translate3d(0,0,0); } to { transform: scale(1.045) translate3d(-.7%, .5%, 0); } }
@keyframes shadow-shift { to { transform: translate(-7vw, 5vw); opacity: .5; } }
@keyframes line-pulse { 0%,100% { transform: scaleY(.25); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

@media (max-width: 760px) {
  .site-header { position: absolute; }
  .hero { min-height: 100svh; display: block; }
  .hero-art { background-position: 72% 50%; }
  .hero-art::before { background: linear-gradient(180deg, var(--ivory) 0%, rgba(246,243,236,.86) 35%, rgba(246,243,236,.12) 65%); }
  .hero-copy { min-height: 100svh; align-items: flex-start; padding: 11rem 1.5rem 4rem; }
  .hero h1 { max-width: 7.8ch; font-size: clamp(3.2rem, 15vw, 5.4rem); }
  .statement { min-height: auto; grid-template-columns: 1fr; }
  .statement-image { min-height: 64svh; background-size: auto 115%; background-position: 72% 72%; clip-path: ellipse(95% 75% at 28% 38%); }
  .statement-copy { min-height: 46svh; padding: 4rem 1.5rem; }
  .arrival { min-height: 76svh; }
  .arrival address br { display: none; }
  .site-footer { flex-direction: column; gap: .35rem; }
  .site-footer p { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}