/* =============================================================================
   main.css
   Single consolidated stylesheet for model/actress portfolio site.
   Sections in order:
     1.  Reset
     2.  Variables (design tokens)
     3.  Typography
     4.  Layout
     5.  Navigation
     6.  Hero
     7.  Gallery
     8.  About
     9.  Contact
     10. Animations
============================================================================= */


/* =============================================================================
   1. RESET
   Based on modern-normalize. Consistent baseline across all browsers.
============================================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  border: none;
  outline: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
}

button { cursor: pointer; }

ul, ol { list-style: none; }

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

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

:focus { outline: none; }

/* Accessible focus ring for keyboard navigation */
:focus-visible {
  outline: 1px solid var(--color-mid, #888);
  outline-offset: 3px;
}


/* =============================================================================
   2. VARIABLES
   All design tokens. Edit here to retheme the entire site.
============================================================================= */

:root {
  /* ── Color Palette ─────────────────────────────────────────────────────── */
  --color-black:    #000000;
  --color-white:    #ffffff;
  --color-grey-1:   #1a1a1a;   /* near-black — nav bg when scrolled         */
  --color-grey-2:   #555555;   /* mid — labels, placeholder text             */
  --color-grey-3:   #aaaaaa;   /* light mid — borders, dividers              */
  --color-grey-4:   #f2f2f2;   /* near-white — alternate section backgrounds */

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* ── Font Sizes (fluid via clamp) ──────────────────────────────────────── */
  --text-hero:   clamp(4rem, 12vw, 11rem);   /* hero name                   */
  --text-h2:     clamp(1.8rem, 4vw, 3rem);   /* section headings            */
  --text-nav:    0.7rem;                      /* nav links                   */
  --text-body:   clamp(0.9rem, 1.5vw, 1rem); /* body copy                   */
  --text-label:  0.65rem;                     /* section labels              */

  /* ── Spacing ───────────────────────────────────────────────────────────── */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   8rem;
  --space-xxl:  12rem;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --max-width:       1400px;
  --nav-height:      64px;
  --section-pad-v:   var(--space-xxl);
  --section-pad-h:   clamp(1.5rem, 6vw, 6rem);

  /* ── Animation ─────────────────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-med:  500ms;
  --duration-slow: 900ms;

  /* ── Gallery ───────────────────────────────────────────────────────────── */
  --gallery-col-min: 280px;
  --gallery-gap:     3px;
}


/* =============================================================================
   3. TYPOGRAPHY
   Base type styles and section label component.
============================================================================= */

body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--color-black);
  background-color: var(--color-white);
  font-size: var(--text-body);
  letter-spacing: 0.01em;
}

/* Section labels — small uppercase chapter markers between sections */
.section__label {
  position: relative;
  margin-bottom: var(--space-lg);
}

.section__label-text {
  font-family:    var(--font-sans);
  font-size:      var(--text-label);
  font-weight:    400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color:          var(--color-grey-2);
}

/* Decorative rule after label */
.section__label-text::after {
  content:          '';
  display:          inline-block;
  width:            40px;
  height:           1px;
  background-color: var(--color-grey-3);
  vertical-align:   middle;
  margin-left:      1rem;
  transform:        translateY(-1px);
}


/* =============================================================================
   4. LAYOUT
   Shared section scaffolding and page-level spacing.
============================================================================= */

.section {
  padding: var(--section-pad-v) var(--section-pad-h);
  position: relative;
}

/* Alternate section backgrounds for subtle rhythm */
.photos-section  { background-color: var(--color-white); }
.about-section   { background-color: var(--color-grey-4); }
.contact-section { background-color: var(--color-white); }

/* Footer */
.footer {
  padding:         var(--space-lg) var(--section-pad-h);
  border-top:      1px solid var(--color-grey-3);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.footer__copy {
  font-family:    var(--font-sans);
  font-size:      0.65rem;
  font-weight:    300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--color-grey-2);
}


/* =============================================================================
   5. NAVIGATION
   Fixed top bar. Transparent over hero, gains solid bg on scroll.
   .nav--scrolled is toggled by scroll.js via IntersectionObserver.
============================================================================= */

.nav {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         100;
  height:          var(--nav-height);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 var(--section-pad-h);
  background-color: transparent;
  border-bottom:    1px solid transparent;
  transition:
    background-color var(--duration-med) var(--ease-out),
    border-color     var(--duration-med) var(--ease-out);
}

/* Scrolled state — added by scroll.js */
.nav--scrolled {
  background-color: rgba(0, 0, 0, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Wordmark */
.nav__wordmark {
  font-family:    var(--font-serif);
  font-size:      0.95rem;
  font-weight:    400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--color-white);
  transition:     opacity var(--duration-fast) var(--ease-out);
}

.nav__wordmark:hover { opacity: 0.65; }

/* Nav links */
.nav__links {
  display:     flex;
  align-items: center;
  gap:         var(--space-lg);
}

.nav__link {
  font-family:    var(--font-sans);
  font-size:      var(--text-nav);
  font-weight:    400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--color-white);
  position:       relative;
  padding-bottom: 2px;
  transition:     opacity var(--duration-fast) var(--ease-out);
}

/* Animated underline via pseudo-element */
.nav__link::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0;
  width:            0%;
  height:           1px;
  background-color: var(--color-white);
  transition:       width var(--duration-med) var(--ease-out);
}

.nav__link:hover::after,
.nav__link--active::after { width: 100%; }

.nav__link:hover   { opacity: 0.7; }
.nav__link--active { opacity: 1; }

@media (max-width: 600px) {
  .nav { padding: 0 1.5rem; }

  .nav__links { gap: var(--space-md); }

  .nav__link {
    font-size:      0.6rem;
    letter-spacing: 0.2em;
  }
}


/* =============================================================================
   6. HERO
   Full-viewport. Background image with parallax.
   Name overlaps image in large, thin-weight type.
============================================================================= */

.hero {
  position:    relative;
  width:       100%;
  height:      100vh;
  min-height:  600px;
  overflow:    hidden;
  display:     flex;
  align-items: flex-end;
}

/* Background image — oversized vertically for parallax room */
.hero__bg {
  position:            absolute;
  inset:               -20% 0;
  background-image:    url('../images/hero.jpg');
  background-size:     cover;
  background-position: center top;
  background-repeat:   no-repeat;
  will-change:         transform; /* GPU layer for smooth parallax */
}

/* Gradient overlay — bottom-heavy for name legibility */
.hero__overlay {
  position: absolute;
  inset:    0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.15) 50%,
    rgba(0, 0, 0, 0.00) 100%
  );
  pointer-events: none;
}

/* Name block — anchored to bottom of hero */
.hero__name {
  position:       relative;
  z-index:        2;
  padding:        0 var(--section-pad-h) var(--space-xl);
  display:        flex;
  flex-direction: column;
  line-height:    0.9;
  user-select:    none;
}

.hero__name-first,
.hero__name-last {
  display:        block;
  font-family:    var(--font-serif);
  font-size:      var(--text-hero);
  font-weight:    300;          /* thin weight — the key editorial move */
  font-style:     italic;       /* Playfair italic is sublime at this size */
  letter-spacing: -0.02em;
  color:          var(--color-white);
  line-height:    1;
  text-shadow:    0 2px 40px rgba(0, 0, 0, 0.25);
}

/* Last name offset right — creates visual tension with the first */
.hero__name-last {
  align-self:   flex-end;
  padding-right: clamp(0px, 3vw, 60px);
  margin-top:   -0.08em;
}

/* Animated scroll indicator */
.hero__scroll-hint {
  position:       absolute;
  bottom:         var(--space-md);
  left:           50%;
  transform:      translateX(-50%);
  z-index:        2;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  opacity:        0.5;
}

.hero__scroll-line {
  display:          block;
  width:            1px;
  height:           60px;
  background-color: var(--color-white);
  animation:        scrollHint 2s var(--ease-in-out) infinite;
  transform-origin: top center;
}

@keyframes scrollHint {
  0%   { transform: scaleY(0); opacity: 1; transform-origin: top center; }
  50%  { transform: scaleY(1); opacity: 1; transform-origin: top center; }
  100% { transform: scaleY(1); opacity: 0; transform-origin: bottom center; }
}

@media (max-width: 768px) {
  .hero__name { padding-bottom: var(--space-lg); }

  /* Stack both names left-aligned on mobile */
  .hero__name-last {
    align-self:    flex-start;
    padding-right: 0;
  }
}


/* =============================================================================
   7. GALLERY
   CSS Grid masonry. Column-based with row-span variants for portrait shots.
   gallery.js handles true masonry row-packing at runtime.
============================================================================= */

.photos-section { padding-top: var(--space-xxl); }

.gallery {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--gallery-col-min), 1fr));
  grid-auto-rows:        280px;
  gap:                   var(--gallery-gap);
}

.gallery__item {
  background-color:    var(--color-grey-3); /* placeholder colour */
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  overflow:            hidden;
  cursor:              pointer;
  transition:
    transform var(--duration-slow) var(--ease-out),
    filter    var(--duration-slow) var(--ease-out);
  will-change: transform;
}

/* Subtle scale on hover — expensive feel, not gimmicky */
.gallery__item:hover {
  transform: scale(1.015);
  z-index:   1;
}

/* Row span variants — mix these freely in index.html */
.gallery__item--tall { grid-row: span 2; }     /* portrait shots */
.gallery__item--wide { grid-column: span 2; }  /* landscape shots */

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows:        200px;
  }

  .gallery__item--wide { grid-column: span 1; }
}

@media (max-width: 400px) {
  .gallery {
    grid-template-columns: 1fr;
    grid-auto-rows:        260px;
  }

  .gallery__item--tall { grid-row: span 1; }
}


/* =============================================================================
   8. ABOUT
   Two-column: image left, text right. Stacks on mobile.
============================================================================= */

.about__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(var(--space-lg), 8vw, var(--space-xxl));
  align-items:           start;
  max-width:             var(--max-width);
  margin:                0 auto;
}

.about__image {
  aspect-ratio:        3 / 4;
  background-color:    var(--color-grey-3);
  background-size:     cover;
  background-position: center 25%;
  background-repeat:   no-repeat;
}

.about__text { padding-top: var(--space-md); }

.about__heading {
  font-family:    var(--font-serif);
  font-size:      var(--text-h2);
  font-weight:    300;
  font-style:     italic;
  letter-spacing: -0.01em;
  line-height:    1.1;
  margin-bottom:  var(--space-md);
  color:          var(--color-black);
}

.about__bio {
  font-family:   var(--font-sans);
  font-size:     var(--text-body);
  font-weight:   300;
  line-height:   1.85;
  color:         var(--color-grey-1);
  margin-bottom: var(--space-sm);
}

.about__bio:last-of-type { margin-bottom: 0; }

.about__agency {
  margin-top:     var(--space-md);
  font-family:    var(--font-sans);
  font-size:      0.7rem;
  font-weight:    400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--color-grey-2);
}

.about__agency-name { color: var(--color-black); }

@media (max-width: 768px) {
  .about__inner {
    grid-template-columns: 1fr;
    gap:                   var(--space-lg);
  }

  .about__image { aspect-ratio: 4 / 3; }
}


/* =============================================================================
   9. CONTACT
   Minimal centered form. Underline-style inputs — editorial and clean.
   Form submits via fetch to /send → Mailgun (handled in scroll.js).
============================================================================= */

.contact__inner {
  max-width: 600px;
  margin:    0 auto;
}

.contact__heading {
  font-family:    var(--font-serif);
  font-size:      var(--text-h2);
  font-weight:    300;
  font-style:     italic;
  letter-spacing: -0.01em;
  color:          var(--color-black);
  margin-bottom:  var(--space-xl);
}

.form__group {
  position:      relative;
  margin-bottom: var(--space-lg);
}

.form__label {
  display:        block;
  font-family:    var(--font-sans);
  font-size:      0.6rem;
  font-weight:    400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--color-grey-2);
  margin-bottom:  var(--space-xs);
  transition:     color var(--duration-fast) var(--ease-out);
}

/* Label darkens when field is focused */
.form__group:focus-within .form__label { color: var(--color-black); }

.form__input,
.form__textarea {
  display:          block;
  width:            100%;
  padding:          var(--space-xs) 0;
  font-family:      var(--font-sans);
  font-size:        var(--text-body);
  font-weight:      300;
  color:            var(--color-black);
  background-color: transparent;
  border-bottom:    1px solid var(--color-grey-3);
  transition:       border-color var(--duration-fast) var(--ease-out);
}

.form__input:focus,
.form__textarea:focus { border-bottom-color: var(--color-black); }

.form__textarea {
  resize:      vertical;
  min-height:  120px;
  line-height: 1.7;
}

.form__input::placeholder,
.form__textarea::placeholder { color: var(--color-grey-3); }

/* Status message (success / error) */
.form__status {
  font-family:    var(--font-sans);
  font-size:      0.75rem;
  font-weight:    300;
  letter-spacing: 0.05em;
  min-height:     1.5em;
  margin-bottom:  var(--space-md);
  transition:     color var(--duration-fast);
}

.form__status--success { color: #2a7a2a; }
.form__status--error   { color: #8b0000; }

/* Submit button — text + animated extending line */
.form__submit {
  position:    relative;
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-sm);
  padding:     0;
  background:  transparent;
  border:      none;
  cursor:      pointer;
  overflow:    hidden;
}

.form__submit-text {
  font-family:    var(--font-sans);
  font-size:      0.65rem;
  font-weight:    400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color:          var(--color-black);
  transition:     opacity var(--duration-fast) var(--ease-out);
}

.form__submit:hover .form__submit-text { opacity: 0.5; }

.form__submit-line {
  display:          block;
  width:            30px;
  height:           1px;
  background-color: var(--color-black);
  transition:       width var(--duration-med) var(--ease-out);
}

.form__submit:hover .form__submit-line { width: 60px; }

.form__submit:disabled .form__submit-text { opacity: 0.35; }
.form__submit:disabled                    { cursor: default; }


/* =============================================================================
   10. ANIMATIONS
   Fade-in driven by IntersectionObserver in scroll.js.
   Elements with .fade-in start invisible, animate in when entering viewport.
============================================================================= */

.fade-in {
  opacity:   0;
  transform: translateY(24px);
  transition:
    opacity   var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.fade-in.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* Optional stagger helpers — add alongside .fade-in */
.fade-in--delay-1 { transition-delay: 100ms; }
.fade-in--delay-2 { transition-delay: 200ms; }
.fade-in--delay-3 { transition-delay: 350ms; }
.fade-in--delay-4 { transition-delay: 500ms; }

/* Respect system reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}