/* Observatory Farm — minimal hero rotator (no JS, S3 friendly) */
:root {
  --bg: #0f0e0e;
  --ink: #f6f0ea;
  --muted: #856a69;
  --warm: #d96c5a;
  --cool: #4c5f76;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 650px at 70% 0%, color-mix(in oklab, var(--warm) 30%, transparent) 0%, transparent 62%),
    radial-gradient(900px 650px at 10% 20%, color-mix(in oklab, var(--cool) 26%, transparent) 0%, transparent 62%),
    var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.wrap {
  height: 100%;
}

.hero {
  position: relative;
  height: 100%;
  min-height: 78vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slides {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.03);
  filter: saturate(1.06) contrast(1.02);
  animation: fade 90s linear infinite;
  will-change: opacity;
}

.s1 { animation-delay: 0.000s; }
.s2 { animation-delay: 10.000s; }
.s3 { animation-delay: 20.000s; }
.s4 { animation-delay: 30.000s; }
.s5 { animation-delay: 40.000s; }
.s6 { animation-delay: 50.000s; }
.s7 { animation-delay: 60.000s; }
.s8 { animation-delay: 70.000s; }
.s9 { animation-delay: 80.000s; }

@keyframes fade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  22%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

.veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--bg) 86%, transparent) 0%,
      color-mix(in oklab, var(--bg) 50%, transparent) 45%,
      color-mix(in oklab, var(--bg) 72%, transparent) 100%
    ),
    radial-gradient(900px 650px at 70% 25%, color-mix(in oklab, var(--warm) 26%, transparent), transparent 58%);
}

.hero__inner {
  position: relative;
  text-align: center;
  padding: 4rem 1.25rem 3.5rem;
}

h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 3.7rem);
  letter-spacing: -0.6px;
  text-shadow: 0 12px 40px rgba(0,0,0,.45);
}

.rule {
  width: min(320px, 60vw);
  height: 1px;
  margin: 1rem auto .9rem;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--warm) 70%, transparent), transparent);
}

.whisper {
  margin: 0;
  font-size: 1.05rem;
  color: color-mix(in oklab, var(--ink) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .slide { animation: none; opacity: 0; }
  .s1 { opacity: 1; }
}


.socials {
  margin-top: .9rem;
  font-size: .95rem;
  letter-spacing: .2px;
  color: color-mix(in oklab, var(--ink) 65%, transparent);
}

.socials a {
  text-decoration: none;
  color: inherit;
}

.socials a:hover {
  color: color-mix(in oklab, var(--warm) 85%, var(--ink));
}

.socials .dot {
  margin: 0 .4rem;
  opacity: .6;
}