/* ══════════════════════════════════════════
   frame/film — shared.css
   Warm minimalist palette: Milk / Oat / Taupe / Mocha / Charcoal
   ══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Mono:wght@300;400&display=swap');

:root {
  --milk:     #FBF7F4;
  --oat:      #E5DED2;
  --taupe:    #A39382;
  --mocha:    #685D54;
  --charcoal: #232323;

  --color-bg:           var(--milk);
  --color-bg-card:      var(--oat);
  --color-bg-hover:     #DDD5C8;
  --color-surface:      #F3EDE6;
  --color-text-primary: var(--charcoal);
  --color-text-secondary: var(--mocha);
  --color-text-muted:   var(--taupe);
  --color-text-faint:   #9B8D81;
  --color-accent:       var(--mocha);

  --color-nav-bg:     rgba(251, 247, 244, 0.9);
  --color-nav-border: rgba(163, 147, 130, 0.2);

  --color-btn-primary-bg:    var(--charcoal);
  --color-btn-primary-text:  var(--milk);
  --color-btn-primary-hover: var(--mocha);
  --color-btn-outline-border: rgba(104, 93, 84, 0.35);
  --color-btn-outline-text:   var(--mocha);
  --color-btn-outline-hover:  var(--charcoal);

  --color-divider:  rgba(163, 147, 130, 0.22);
  --color-overlay:  rgba(35, 35, 35, 0.7);

  --font-display: 'Cormorant Garamond', serif;
  --font-mono:    'DM Mono', monospace;

  --fw-thin:    300;
  --fw-regular: 400;
  --fw-medium:  500;

  --fs-xxs:  0.52rem;
  --fs-xs:   0.6rem;
  --fs-mono: 0.65rem;
  --fs-sm:   0.72rem;
  --fs-base: 0.88rem;
  --fs-md:   1rem;
  --fs-lg:   1.15rem;
  --fs-xl:   1.4rem;
  --fs-2xl:  1.8rem;
  --fs-hero: clamp(3.2rem, 6vw, 6rem);
  --fs-title: clamp(2.2rem, 4vw, 3.8rem);

  --tracking-tight:  -0.04em;
  --tracking-normal: -0.02em;
  --tracking-mono:    0.06em;
  --tracking-label:   0.1em;
  --tracking-wide:    0.14em;
  --tracking-wider:   0.18em;
  --tracking-widest:  0.22em;

  --leading-tight:   1.0;
  --leading-snug:    1.15;
  --leading-base:    1.6;
  --leading-relaxed: 1.75;
  --leading-loose:   1.9;

  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-nav: 5rem;

  /* Photo placeholder gradients — warm earth */
  --pg1: linear-gradient(145deg, #C8B8A2, #8A7262);
  --pg2: linear-gradient(165deg, #B8A88C, #7A6858);
  --pg3: linear-gradient(130deg, #D0BC9E, #9A8470);
  --pg4: linear-gradient(155deg, #BCA890, #8A7060);
  --pg5: linear-gradient(140deg, #C4B09C, #927060);
  --pg6: linear-gradient(175deg, #CAB89E, #9A8474);
  --pg7: linear-gradient(125deg, #B8A48C, #887060);
  --pg8: linear-gradient(160deg, #D0BA9C, #A08472);
  --pg9: linear-gradient(150deg, #C0AC98, #947868);

  /* Film gradients — dark warm */
  --ff1: linear-gradient(145deg, #3C3028, #1C1410);
  --ff2: linear-gradient(165deg, #342C22, #18120C);
  --ff3: linear-gradient(130deg, #443420, #241810);
  --ff4: linear-gradient(155deg, #3A302A, #1A1008);

  /* Mosaic — light warm */
  --m1: linear-gradient(145deg, #D8C8B0, #A89278);
  --m2: linear-gradient(165deg, #C8B49C, #988070);
  --m3: linear-gradient(130deg, #D4C0A4, #A08874);
  --m4: linear-gradient(155deg, #E0CEBC, #B09880);

  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  0.25s;
  --dur-base:  0.4s;
  --dur-slow:  0.7s;
  --dur-slower: 0.9s;

  --z-nav:      100;
  --z-lightbox: 999;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background:     var(--color-bg);
  color:          var(--color-text-primary);
  font-family:    var(--font-mono);
  font-weight:    var(--fw-thin);
  line-height:    var(--leading-base);
  overflow-x:     hidden;
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
}

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

/* ── NAV ── */
nav {
  position:        fixed;
  top: 0; left: 0; right: 0;
  z-index:         var(--z-nav);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--sp-5) 3.5rem;
  background:      var(--color-nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom:   1px solid var(--color-nav-border);
}

.nav-logo {
  font-family:     var(--font-display);
  font-size:       1.25rem;
  font-weight:     var(--fw-medium);
  font-style:      italic;
  letter-spacing:  0.01em;
  color:           var(--charcoal);
  text-decoration: none;
}

.nav-logo span { color: var(--taupe); font-style: normal; }

.nav-links { display: flex; gap: var(--sp-10); list-style: none; }

.nav-links a {
  font-family:     var(--font-mono);
  font-size:       var(--fs-xs);
  letter-spacing:  var(--tracking-widest);
  text-transform:  uppercase;
  color:           var(--taupe);
  text-decoration: none;
  transition:      color var(--dur-fast) var(--ease);
}

.nav-links a:hover,
.nav-links a.active { color: var(--charcoal); }

/* ── FOOTER ── */
footer {
  padding:         var(--sp-6) 3.5rem;
  border-top:      1px solid var(--color-divider);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  font-family:     var(--font-mono);
  font-size:       var(--fs-xs);
  letter-spacing:  var(--tracking-mono);
  color:           var(--taupe);
  margin-top:      auto;
}

footer a { color: var(--taupe); text-decoration: none; transition: color var(--dur-fast); }
footer a:hover { color: var(--charcoal); }

/* ── BUTTONS ── */
.btn {
  display:         inline-block;
  padding:         0.85rem 2rem;
  font-family:     var(--font-mono);
  font-size:       var(--fs-xs);
  letter-spacing:  var(--tracking-wide);
  text-transform:  uppercase;
  text-decoration: none;
  cursor:          pointer;
  transition:      all var(--dur-fast) var(--ease);
  border:          none;
}

.btn-primary {
  background: var(--color-btn-primary-bg);
  color:      var(--color-btn-primary-text);
}

.btn-primary:hover { background: var(--color-btn-primary-hover); }

.btn-outline {
  background: transparent;
  color:      var(--color-btn-outline-text);
  border:     1px solid var(--color-btn-outline-border);
}

.btn-outline:hover {
  border-color: var(--color-btn-outline-hover);
  color:        var(--color-btn-outline-hover);
}

/* ── PAGE HEADER ── */
.page-header {
  padding:       calc(var(--sp-nav) + var(--sp-12)) 3.5rem var(--sp-12);
  border-bottom: 1px solid var(--color-divider);
  background:    var(--color-surface);
}

.page-header-inner {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--sp-6);
}

.ph-tag {
  font-size:      var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--taupe);
  margin-bottom:  var(--sp-3);
}

.page-header h1 {
  font-family:    var(--font-display);
  font-size:      var(--fs-title);
  font-weight:    var(--fw-thin);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-tight);
  color:          var(--charcoal);
}

.page-header h1 strong {
  font-weight: var(--fw-medium);
  font-style:  italic;
}

.page-header p {
  font-size:   var(--fs-sm);
  color:       var(--color-text-faint);
  max-width:   340px;
  line-height: var(--leading-loose);
}

/* ── ANIMATIONS ── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bobble {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  nav { padding: var(--sp-4) var(--sp-5); }
  .nav-links { gap: var(--sp-5); }
  footer { padding: var(--sp-5); flex-direction: column; gap: var(--sp-2); text-align: center; }
  .page-header { padding: calc(var(--sp-nav) + var(--sp-8)) var(--sp-5) var(--sp-8); }
  .page-header-inner { flex-direction: column; align-items: flex-start; }
}