/* Charafondue — minimal single-page
   Intentionally simple: Georgia (system serif), brown brand color, one photo, short text. */

:root {
  --brown: #5a2424;
  --brown-deep: #3d1616;
  --cream: #faf4e4;
  --cream-warm: #f2e8d5;
  --ink: #231b15;
  --muted: #7a6d57;
  --rule: #d9cfbe;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
}

main { margin: 0; padding: 0; }

/* ========== HERO ==========
   Full-width cinematic photo with title overlay.
   Photo takes 75vh on desktop, less on mobile.
   Subtle Ken Burns slow zoom for life.
   Bottom gradient for title legibility. */

.hero {
  position: relative;
  width: 100%;
  height: clamp(440px, 78vh, 760px);
  overflow: hidden;
  background: var(--ink);
}

.hero-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  animation: kenburns 28s ease-in-out infinite alternate;
}

@keyframes kenburns {
  0%   { transform: scale(1.03) translate(-0.5%, 0.5%); }
  100% { transform: scale(1.12) translate(1%, -1%); }
}

/* Gradient overlay — transparent top, dark bottom — so title reads clearly */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(35, 27, 21, 0) 0%,
    rgba(35, 27, 21, 0) 40%,
    rgba(35, 27, 21, 0.55) 85%,
    rgba(35, 27, 21, 0.82) 100%);
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 2rem 2.8rem;
  text-align: center;
  color: var(--cream);
  z-index: 2;
}

.hero-overlay h1 {
  font-family: Georgia, serif;
  font-weight: normal;
  font-size: clamp(2.8rem, 9vw, 5.2rem);
  color: var(--cream);
  margin: 0 0 0.7rem;
  letter-spacing: -0.01em;
  line-height: 0.98;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.tagline {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(0.98rem, 2.2vw, 1.2rem);
  color: var(--cream-warm);
  margin: 0;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  opacity: 0.95;
}

/* Intro block — sits below the hero */
.intro {
  max-width: 680px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 0;
}

.lede {
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 42ch;
  margin: 0 auto 2.5rem;
  text-align: center;
  color: var(--ink);
}

/* Contact */
.contact {
  text-align: center;
  margin: 0 auto 2.5rem;
  padding: 1.8rem 1.5rem;
}

.contact-intro {
  font-size: 0.98rem;
  color: var(--muted);
  margin: 0 0 0.9rem;
  font-style: italic;
}

.contact-lines {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.8;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
}

.contact-lines a {
  color: var(--brown);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 0.2s, color 0.2s;
}
.contact-lines a:hover {
  text-decoration-color: var(--brown);
  color: var(--brown-deep);
}

.sep {
  color: var(--rule);
  user-select: none;
}

/* Closing */
.closing {
  text-align: center;
  font-size: 1.15rem;
  color: var(--brown);
  margin: 0;
}
.closing em {
  font-style: italic;
}

/* Footer */
footer {
  text-align: center;
  padding: 2rem 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}
footer p { margin: 0; }

/* Mobile refinements */
@media (max-width: 560px) {
  .hero { height: clamp(380px, 62vh, 520px); }
  .hero-overlay { padding: 2rem 1.2rem 1.8rem; }
  .intro { padding: 2.5rem 1.2rem 0; }
  .contact { padding: 1.3rem 1rem; }
  .contact-lines { flex-direction: column; gap: 0.3rem; }
  .contact-lines .sep { display: none; }
  footer { padding: 1.5rem 1rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-image img { animation: none; }
}