/* Zigfrak restoration site. Layout only; colours and type come from handfish tokens. */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--hf-bg-base, #0d0e12);
  color: var(--hf-text-normal, #d6d8de);
  font-family: var(--hf-font-family, "Nunito", system-ui, sans-serif);
  font-size: var(--hf-size-base, 16px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--hf-accent, #8ab4ff); }

/* Hero: full-bleed Nautilus, flavor line up top, logo at the bottom */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: var(--hf-space-10, 40px) var(--hf-space-6, 24px);
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.15) 35%,
      rgba(0, 0, 0, 0.65) 80%,
      var(--hf-bg-base, #0d0e12) 100%),
    url("img/nautilus.jpg") center / cover no-repeat;
}

.intro {
  max-width: 48ch;
  margin: 0;
  color: var(--hf-text-muted, #cfd2d8);
}

.hero-mark { margin-bottom: var(--hf-space-4, 16px); }

.hero-logo {
  width: min(400px, 80vw);
  height: auto;
  display: block;
  margin: 0 auto var(--hf-space-3, 12px);
}

.hero-tag { margin: 0; font-size: var(--hf-size-lg, 18px); }

/* About */
.about {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--hf-space-12, 48px) var(--hf-space-6, 24px) var(--hf-space-8, 32px);
  text-align: center;
  line-height: 1.75;
}

.about p { margin: 0 0 var(--hf-space-5, 20px); }
.about p:last-child { margin-bottom: 0; }

/* Carousel */
.carousel {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--hf-space-6, 24px);
}

.slides {
  position: relative;
  height: clamp(380px, 62vh, 540px);
  border: 1px solid var(--hf-border, #2a2d35);
  border-radius: var(--hf-radius, 6px);
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--hf-space-6, 24px);
  background: var(--bg) center / cover no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

.slide.is-active { opacity: 1; visibility: visible; }

.card {
  width: min(46%, 420px);
  max-height: 100%;
  overflow: auto;
  padding: var(--hf-space-5, 20px);
  background: rgba(0, 0, 0, 0.66);
  border: 1px solid var(--hf-border, #666);
  border-radius: var(--hf-radius-sm, 4px);
  font-size: var(--hf-size-sm, 14px);
  line-height: 1.6;
}

.card h2 {
  margin: 0 0 var(--hf-space-3, 12px);
  font-size: var(--hf-size-xl, 20px);
}

.card h3 {
  margin: var(--hf-space-4, 16px) 0 var(--hf-space-2, 8px);
  font-size: var(--hf-size-lg, 18px);
}

.card p { margin: 0 0 var(--hf-space-3, 12px); }
.card p:last-child { margin-bottom: 0; }

.hot { color: #ff9900; }

/* Carousel controls */
.c-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  color: var(--hf-text-normal, #fff);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--hf-border, #2a2d35);
  border-radius: var(--hf-radius-full, 50%);
  cursor: pointer;
}

.c-arrow:hover { background: rgba(0, 0, 0, 0.8); }
.c-prev { left: calc(var(--hf-space-6, 24px) + 10px); }
.c-next { right: calc(var(--hf-space-6, 24px) + 10px); }

.dots {
  display: flex;
  justify-content: center;
  gap: var(--hf-space-2, 8px);
  padding-top: var(--hf-space-4, 16px);
}

.dot {
  width: 10px;
  height: 10px;
  padding: 0;
  background: var(--hf-border, #555);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.dot.is-active { background: var(--hf-accent, #8ab4ff); }

/* Follow */
.follow {
  text-align: center;
  padding: var(--hf-space-10, 40px) var(--hf-space-6, 24px) var(--hf-space-8, 32px);
}

/* Footer */
.foot {
  text-align: center;
  padding-bottom: var(--hf-space-10, 40px);
  color: var(--hf-text-muted, #9aa0ab);
  font-size: var(--hf-size-sm, 14px);
  font-family: var(--hf-font-family-mono, ui-monospace, monospace);
}

.foot p { margin: 0; }

/* Narrow screens: let the card fill the slide */
@media (max-width: 640px) {
  .slide { justify-content: center; }
  .card { width: 100%; }
}