/*
Theme Name: The Mediterranean Film
Description: Custom one-page theme for The Mediterranean Film documentary site. Text and photos are edited via the page editor (requires the free Advanced Custom Fields plugin).
Author: Built for Audrey Boutcher
Version: 1.0
Text Domain: mediterranean-film
*/

:root{
  --bg:#000000;
  --fg:#ffffff;
  --fg-dim:#c9c9c9;
  --gap-xl: clamp(48px, 8vw, 120px);
  --gap-lg: clamp(32px, 5vw, 72px);
  --max: 1400px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body.mediterranean-film{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Azeret Mono', monospace;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.mf-wrap a{ color:inherit; }

.mf-wrap img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.mf-wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 clamp(20px, 4vw, 56px);
}

/* ---------- Heading typography ----------
   first letter of each word = sans-serif
   rest of word = script (Snell Roundhand / Beau Rivage fallback) */
.mf-heading{
  font-weight:400;
  line-height:1;
  margin:0;
}
.mf-heading .cap{
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
.mf-heading .script{
  font-family:'Snell Roundhand','Beau Rivage', cursive;
  font-style:italic;
}

.mf-h-hero{ font-size:clamp(46px, 8vw, 108px); }
.mf-h-section{ font-size:clamp(32px, 4.5vw, 52px); }

.mf-nav{
  position:absolute;
  top:clamp(20px, 3vw, 40px);
  right:clamp(20px, 4vw, 56px);
  font-size:15px;
  letter-spacing:0.02em;
  z-index:5;
}
.mf-nav a{ text-decoration:none; }
.mf-nav a:hover{ text-decoration:underline; }

/* ---------- HERO ---------- */
.mf-hero{
  position:relative;
  padding-top:clamp(70px, 10vw, 110px);
}
.mf-hero-sub{
  margin:14px 0 0;
  font-size:16px;
  color:var(--fg-dim);
}
.mf-hero-copy{
  max-width:760px;
  margin-top:36px;
  font-size:16px;
}
.mf-hero-copy p{ margin:0 0 18px; }
.mf-hero-byline{ font-size:16px; }

.mf-hero-photos{
  display:grid;
  grid-template-columns:5fr 3fr;
  gap:clamp(32px, 6vw, 96px);
  margin-top:clamp(56px, 8vw, 96px);
  align-items:start;
  max-width:1040px;
}
.mf-hero-photos .mf-ph-right{ margin-top:clamp(0px, 4vw, 40px); }
.mf-ph-hero-left{ aspect-ratio:3/2; }
.mf-ph-hero-right{ aspect-ratio:4/5; }

/* ---------- DIET SECTION ---------- */
.mf-diet{
  margin-top:clamp(90px, 12vw, 150px);
}
.mf-diet-heading{
  text-align:right;
  margin-bottom:clamp(32px, 5vw, 56px);
}
.mf-diet-grid{
  display:grid;
  grid-template-columns:0.55fr 0.55fr 1fr;
  gap:clamp(20px, 3vw, 40px);
  align-items:start;
}
.mf-ph-diet{ aspect-ratio:3/4; }
.mf-diet-text{ font-size:16px; padding-top:6px; }
.mf-diet-text p{ margin:0 0 20px; }

/* ---------- ABOUT SECTION ---------- */
.mf-about{
  margin-top:clamp(110px, 14vw, 170px);
}
.mf-about-top{
  display:grid;
  grid-template-columns:5fr 8fr;
  gap:clamp(32px, 6vw, 96px);
  align-items:start;
}
.mf-ph-about-top-left{ aspect-ratio:4/5; }
.mf-ph-about-top-right{ aspect-ratio:3/2; margin-top:clamp(0px,3vw,32px); }

.mf-about-body{
  margin-top:clamp(56px, 8vw, 96px);
  display:grid;
  grid-template-columns:1fr 0.9fr;
  gap:clamp(24px, 4vw, 56px);
  align-items:start;
}
.mf-about-role{
  font-size:15px;
  color:var(--fg-dim);
  margin:18px 0 28px;
  letter-spacing:0.02em;
}
.mf-about-text p{ margin:0 0 20px; font-size:16px; max-width:520px; }

.mf-about-photos-right{
  display:grid;
  grid-template-columns:4fr 5fr;
  gap:18px;
}
.mf-ph-about-bottom-left{ aspect-ratio:212/378; }
.mf-ph-about-bottom-right{ aspect-ratio:266/378; }

/* ---------- JOURNEY SECTION ---------- */
.mf-journey{
  margin-top:clamp(110px, 14vw, 170px);
}
.mf-journey-top{
  display:grid;
  grid-template-columns:5fr 3fr;
  gap:clamp(32px, 6vw, 96px);
  align-items:start;
  max-width:1040px;
}
.mf-ph-journey-top-left{ aspect-ratio:3/2; }
.mf-ph-journey-top-right{ aspect-ratio:4/5; }

.mf-journey-meta{
  display:grid;
  grid-template-columns:0.4fr 1fr;
  gap:clamp(16px, 3vw, 40px);
  margin-top:clamp(40px, 6vw, 64px);
  align-items:start;
}
.mf-journey-meta .mf-heading{ white-space:nowrap; }
.mf-journey-meta-text p{ margin:0 0 4px; font-size:15px; }

.mf-journey-bottom{
  display:grid;
  grid-template-columns:5fr 8fr;
  gap:clamp(32px, 6vw, 96px);
  margin-top:clamp(56px, 8vw, 96px);
  align-items:start;
}
.mf-ph-journey-bottom-left{ aspect-ratio:4/5; }
.mf-ph-journey-bottom-right{ aspect-ratio:3/2; margin-top:clamp(0px, 4vw, 36px); }

/* ---------- CONTACT SECTION ---------- */
.mf-contact{
  margin-top:clamp(110px, 14vw, 170px);
  padding-bottom:clamp(60px, 8vw, 100px);
}
.mf-contact-photos{
  display:grid;
  grid-template-columns:5fr 3fr;
  gap:clamp(32px, 6vw, 96px);
  align-items:start;
  max-width:1040px;
}
.mf-ph-contact-left{ aspect-ratio:3/2; }
.mf-ph-contact-right{ aspect-ratio:331/351; margin-top:clamp(0px,3vw,20px); }

.mf-contact-body{
  margin-top:clamp(56px, 8vw, 90px);
  max-width:640px;
}
.mf-contact-body p{ font-size:16px; margin:0 0 20px; }
.mf-contact-body p.mf-strong{ font-weight:500; }
.mf-contact-email{ font-size:16px; margin-top:8px; }

.mf-site-footer{
  margin-top:clamp(56px, 8vw, 90px);
  padding-top:24px;
  border-top:1px solid #2a2a2a;
  font-size:13px;
  color:var(--fg-dim);
}
.mf-site-footer p{ margin:0 0 4px; }

/* ---------- hover-repel image pairs ---------- */
.mf-repel-pair{
  position:relative;
}
.mf-repel-item{
  will-change:transform;
  transition:transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  overflow:hidden;
}
.mf-repel-item img{
  transition:transform 0.5s ease;
}

/* ---------- empty-field placeholders (only visible while editing content) ---------- */
.mf-ph-empty{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed #444;
  color:#666;
  font-size:13px;
  text-align:center;
  padding:12px;
}

@media (max-width: 760px){
  .mf-hero-photos, .mf-diet-grid, .mf-about-top, .mf-about-body, .mf-about-photos-right,
  .mf-journey-top, .mf-journey-bottom, .mf-journey-meta, .mf-contact-photos{
    grid-template-columns:1fr !important;
    max-width:100% !important;
  }
  .mf-hero-photos .mf-ph-right, .mf-about-top .mf-ph-about-top-right,
  .mf-journey-bottom .mf-ph-journey-bottom-right, .mf-contact-photos .mf-ph-contact-right{
    margin-top:0 !important;
  }
  .mf-diet-heading{ text-align:left; }
}

@media (prefers-reduced-motion: reduce){
  .mf-repel-item{ transition:none; }
}