/* =========================================================
   Women Who Redefined Fashion — Single Page
   Core: #FFF9F9 (page) + #660C28 (brand)
   Tiny accents only: #E3CBAE (peach), #3B2C2C (deep brown)
   Headings: Playfair Display | Body: Montserrat
   Placeholders are neutral gray (no yellow cast)
   ========================================================= */

:root{
  --page:   #FFF9F9;   /* light blush (background) */
  --brand:  #660C28;   /* dark red (primary) */
  --peach:  #E3CBAE;   /* tiny accent */
  --deep:   #3B2C2C;   /* tiny accent (hairlines/text) */
  --ink:    #2B2829;   /* body text */
  --muted:  #6B6B6B;   /* secondary */
}

html { scroll-behavior: smooth; }

body{
  background: var(--page);
  color: var(--ink);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }


/* ===== Typography ===== */
.title-text,
.section-title,
.brand-text{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  color: var(--brand);
}
.section-title{
  font-weight: 900; letter-spacing: .2px; margin: 0;
  position: relative;
}
/* subtle peach underline under each H2 (tiny accent) */
.section-title::after{
  content:""; display:block; width:72px; height:4px;
  background: var(--peach); border-radius: 2px;
  margin-top:.5rem;
}
h1.title-text{ line-height: 1.06; }

/* ===== Header layout ===== */
.header-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left chips | logo | right chips */
  gap: 1rem;
}



/* Hairline tints using deep brown */
header.border-bottom{ border-bottom: 2px solid rgba(59,44,44,.22) !important; }
footer.border-top   { border-top:    2px solid rgba(59,44,44,.22) !important; }

/* Chips: outlined in brand, with a tiny peach dot accent */
.nav-chip{
  position: relative;
  display: inline-block;
  padding: .5rem 1rem;
  border: 2px solid var(--brand);
  border-radius: .5rem;
  color: var(--brand);
  background: transparent;
  text-decoration: none;
  font-weight: 600;
}
.nav-chip::after{
  /* tiny dot accent on chips */
  content:""; position:absolute; right:.55rem; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background: var(--peach);
  box-shadow: 0 0 0 1px rgba(59,44,44,.15);
}
.nav-chip:hover{ background: var(--brand); color: #FFF9F9; }

/* Center logo placeholder (swap with your SVG/PNG when ready) */
.logo-circle{
  width: 44px; height: 44px; display: inline-block; border-radius: 50%;
  border: 3px solid var(--brand);
  background: radial-gradient(circle at 30% 30%, var(--brand) 0 40%, #ffffff 41%);
}

/* ===== Hero tiles (image = button) ===== */
.tile{ display:block; border-radius:1rem; overflow:hidden; outline:none; }
/* subtle peach glow on hover (tiny accent), brand focus ring */
.tile:hover{ box-shadow: 0 0 0 4px rgba(227,203,174,.28); }
.tile:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; }

/* ===== Neutral placeholders for images/video ===== */
/* UPDATED: responsive sizing via aspect-ratio instead of fixed viewport-based height */
.ph-img{
  /* keeps your neutral gradient when no image is set */
  background:
    linear-gradient(135deg, rgba(255,255,255,.35) 0 49%, rgba(0,0,0,0) 50% 100%),
    linear-gradient(0deg, rgba(255,255,255,.15), rgba(255,255,255,.15)),
    linear-gradient(135deg, #EFEFEF, #DCDCDC);

  /* NEW responsive sizing */
  width: 100%;
  aspect-ratio: 3 / 4;          /* change to 1/1 for squares if you prefer */
  height: auto;
  min-height: 0;
  max-height: none;

  /* image behavior when you set background-image inline */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition: transform .12s ease-out;
}
.ph-img:hover{ transform: translateY(-2px); }

/* Keep tall variant for carousels/placeholders that need fixed height */
.ph-img.tall{ height:360px; max-height:none; }

.ph-vid{ position:relative; background:#E6E6E6; }
.ph-vid::before{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.06), rgba(0,0,0,.06) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 16px);
}
.ph-vid-label{
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:700; color:#4A4A4A; text-transform:uppercase; letter-spacing:.1em;
}

/* ===== Buttons (if used elsewhere) ===== */
.btn-primary{ background-color:var(--brand); border-color:var(--brand); }
.btn-primary:hover{ filter: brightness(.92); }
.btn-outline-dark{ color:var(--brand); border-color:var(--brand); }
.btn-outline-dark:hover{ background:var(--brand); color:#FFF9F9; }

/* Utilities */
.bg-page{ background-color:var(--page) !important; }
.text-secondary{ color: var(--muted) !important; }
.rounded-4{ border-radius: 1rem !important; }

/* Anchor offset so sticky header doesn't cover section titles */
section{ scroll-margin-top: 96px; }



/* legacy helper if you ever switch to <img> tags for tiles */
.hero-img {
  width: 100%;
  aspect-ratio: 3 / 4;   /* keeps portrait shape */
  object-fit: cover;
  display: block;
}

/* Base body size (site-wide) */
html { font-size: 16px; }    /* try 17px or 18px if you want everything larger */

/* HERO titles (desktop) */
@media (min-width: 992px) {
  .title-text.display-3 { font-size: 4rem; }   /* WOMEN WHO / REDEFINED FASHION */
}

/* HERO title (mobile stacked one) */
@media (max-width: 991.98px) {
  #home .title-text.display-4 { font-size: 2.2rem; }
}

/* Section headings */
.section-title { font-size: clamp(2rem, 1.1rem + 1.2vw, 3rem); }



/* Lead paragraph size */
.lead { font-size: 1.125rem; }  /* bump up/down as you like */



/* Balanced gap between hero and first section (even split) */
:root { --hero-coco-gap: clamp(1.25rem, 4vw + 1rem, 6rem); }

#home { margin-bottom: var(--hero-coco-gap); }
#coco { margin-top:    var(--hero-coco-gap); }

/* Bigger paragraph text in designer sections (desktop only) */
@media (min-width: 992px){
  #coco p,
  #ann p,
  #elsa p,
  #vivienne p{
    font-size: clamp(1.125rem, 1rem + 0.7vw, 1.375rem); /* ~18px → ~22px max */
    /* optional: a touch more line-height if you want even more height */
    /* line-height: 1.75; */
  }
}