:root {
  --bg-primary: #FAF8F4;
  --bg-secondary: #F4EFE6;
  --bg-dark: #1A1714;
  --text-primary: #1A1614;
  --text-secondary: #7A6E66;
  --text-muted: #B0A49A;
  --accent-gold: #C9A76A;
  --accent-blush: #E8C4B4;
  --border: #E5DDD4;
  --border-strong: #C8BCAF;
  --white: #FFFFFF;
}

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

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  body { font-size: 17px; }
}

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

/* ---- Shared type ---- */
.label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.label.gold { color: var(--accent-gold); }
.label.muted { color: var(--text-muted); }

.heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.2;
  margin: 16px 0 0;
}
.heading.italic { font-style: italic; font-weight: 300; }

.tagline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--text-secondary);
  margin-top: 14px;
}

.body-copy {
  font-weight: 300;
  max-width: 62ch;
  color: var(--text-primary);
  margin-bottom: 18px;
}

.gold { color: var(--accent-gold); }

/* ---- Layout ---- */
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(140px, 16vw, 200px) 24px clamp(100px, 12vw, 140px);
}
.page-wide {
  max-width: 1000px;
}

.page-header {
  margin-bottom: 64px;
}

/* ---- Nav ---- */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  background: var(--bg-primary);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease;
}
#nav.scrolled {
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--text-primary);
}
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  transition: color 220ms ease;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--accent-gold); }
.nav-cta {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--border-strong);
  padding: 9px 18px;
  transition: all 220ms ease;
}
.nav-cta:hover { background: var(--text-primary); color: var(--bg-primary); border-color: var(--text-primary); }

@media (max-width: 640px) {
  .nav-right { gap: 16px; }
  .nav-link { display: none; }
  #nav { padding: 18px 20px; }
}

/* ---- Homepage cover ---- */
.cover {
  min-height: calc(100dvh - 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 140px 24px 80px;
}
.cover-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(48px, 8vw, 76px);
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 16px 0 28px;
}
.cover-line {
  font-weight: 300;
  font-size: 18px;
  max-width: 46ch;
}
.cover-line a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
  transition: color 220ms ease, border-color 220ms ease;
}
.cover-line a:hover { color: var(--accent-gold); border-color: var(--accent-gold); }
.cover-fact {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 24px);
  color: var(--text-secondary);
  margin-top: 28px;
  max-width: 42ch;
}
.cover-more {
  margin-top: 40px;
  font-size: 14px;
  color: var(--text-secondary);
}
.cover-more a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
}
.cover-more a:hover { color: var(--accent-gold); border-color: var(--accent-gold); }
.cover-cta {
  margin-top: 40px;
}

.cta-link {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--text-primary);
  padding-bottom: 4px;
  transition: color 220ms ease, border-color 220ms ease;
}
.cta-link:hover { color: var(--accent-gold); border-color: var(--accent-gold); }

/* ---- Timeline (Isla Lune page) ---- */
.timeline {
  list-style: none;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.timeline-entry {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 640px) {
  .timeline-entry { grid-template-columns: 1fr; gap: 6px; }
}
.timeline-date {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold);
  padding-top: 2px;
}
.timeline-text {
  font-weight: 300;
  max-width: 56ch;
}
.timeline-text strong { font-weight: 500; color: var(--text-primary); }

/* BUG THIS FIXED: this box was a fixed 340px-tall letterbox and the photograph was
   stretched across it with object-fit:cover. The product shot is a 1066x1600
   PORTRAIT, so covering a wide short box threw away the top and bottom of it — the
   picture was being cropped by the layout rather than by anyone's choice. The frame
   now takes its height from the photograph instead of the other way round, so the
   whole picture is visible and the border sits exactly on its edge. */
.venture-image {
  position: relative;
  background-color: var(--white);
  border: 1px solid var(--border-strong);
  margin-top: 56px;
  font-size: 0;            /* kills the inline descender gap under the picture */
}
.venture-image img {
  display: block;
  width: 100%;
  height: auto;
}
.placeholder-label {
  position: relative;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: var(--text-muted);
}
.timeline-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.gallery-label {
  display: block;
  margin: 56px 0 16px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
/* Nine of these shots are 933x1400 (a true 2:3), so the portrait cell fits them
   exactly and crops nothing. Two of them — the mirror-lipstick and reading-in-bed
   frames — are 1400x933, i.e. LANDSCAPE. Forcing those into a 2:3 portrait cell with
   cover cut away 55% of the width and sliced the subject in half. A landscape frame
   gets a landscape cell instead: it spans two columns at its own 3:2, which keeps the
   grid lined up AND leaves the photograph whole. */
.gallery-grid img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  background-color: var(--bg-secondary);
}
.gallery-grid img.is-landscape {
  grid-column: span 2;
  aspect-ratio: 3 / 2;
}
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid img.is-landscape { grid-column: span 2; }
}

/* ---- About page ---- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 720px) {
  .about-grid { grid-template-columns: 1fr; }
}
/* same fault as .venture-image: a 380px-tall box with cover, fed a 1600x1200
   LANDSCAPE portrait of Olivia. Covering a narrow tall box from a wide photograph
   discards most of the width — which is how you end up with a face half out of
   frame. The picture keeps its own proportions and the frame follows it. */
.about-image {
  position: relative;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  font-size: 0;
}
.about-image img {
  display: block;
  width: 100%;
  height: auto;
}
.credential-lines {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.about-more {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
}
/* WATCH OUT: these two files were STORED 1600x1200 but carried EXIF orientation 6,
   so a browser rotates them and they are really 1200x1600 PORTRAIT — 3:4, which is
   what this rule asks for. Reading the stored dimensions and "correcting" the ratio
   to 4:3 is a trap; it lops 44% off the height. The rotation has now been baked into
   the pixels and the orientation flag removed, so the files no longer lie about
   their own shape and stored == displayed. 3:4 is correct and crops nothing. */
.about-more img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  .about-more { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; }
}

/* ---- Buttons ---- */
.cta-button {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 32px;
  transition: all 220ms ease;
}
.cta-button.filled {
  background: var(--text-primary);
  color: var(--bg-primary);
}
.cta-button.filled:hover { background: var(--accent-gold); color: var(--text-primary); }
.cta-button.outlined {
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}
.cta-button.outlined:hover { border-color: var(--accent-gold); color: var(--accent-gold); }

/* ---- Press page ---- */
.recognition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
@media (max-width: 640px) {
  .recognition-grid { grid-template-columns: 1fr; gap: 36px; }
}
.sub-label { margin-bottom: 18px; display: block; }
.recognition-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.recognition-list li {
  font-weight: 300;
  font-size: 15px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}
.rec-name { color: var(--text-primary); font-weight: 400; }

/* ---- Contact page ---- */
.contact-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 32px 0 24px;
}
.rate-line { margin: 16px 0 0; }
.availability-line { margin-top: 32px; }

/* ---- Footer ---- */
footer {
  text-align: center;
  padding: 40px 24px;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
}