/* base.css — Typography, layout primitives, utility classes */

/* ── Font Import ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Pinyon+Script&display=swap');

/* ── Base ────────────────────────────────────────────────────────────────── */
html { font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  color: var(--color-text-on-paper);
  background-color: var(--color-paper);
}

/* ── Typography classes ──────────────────────────────────────────────────── */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--type-display-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.93;
}

.display-l {
  font-family: var(--font-display);
  font-size: var(--type-display-l);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.display-m {
  font-family: var(--font-display);
  font-size: var(--type-display-m);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-rose-gold);
}

.section-marker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-rose-gold);
  margin-bottom: var(--space-7);
}

.section-marker::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: currentColor;
  opacity: 0.3;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

.container--narrow {
  max-width: 900px;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

@media (max-width: 768px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* ── Section spacing ─────────────────────────────────────────────────────── */
.section {
  padding-block: var(--space-9);
}

.section--xl {
  padding-block: var(--space-11);
}

.section--sm {
  padding-block: var(--space-7);
}

/* ── Color surface classes ───────────────────────────────────────────────── */
.surface-ink {
  background-color: var(--color-ink);
  color: var(--color-text-on-ink);
}

.surface-paper {
  background-color: var(--color-paper);
  color: var(--color-text-on-paper);
}

.surface-pink {
  background-color: var(--color-pink-soft);
  color: var(--color-ink);
}

/* ── Utility classes ─────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-ink       { color: var(--color-ink); }
.text-paper     { color: var(--color-paper); }
.text-pink      { color: var(--color-pink-hot); }
.text-muted     { color: var(--color-text-muted); }
.text-rose-gold { color: var(--color-rose-gold); }
.text-italic    { font-style: italic; }

.relative       { position: relative; }
.overflow-hidden { overflow: hidden; }

/* ── Media frame (image placeholder host) ────────────────────────────────── */
.media-frame {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-paper-warm), var(--color-line));
}

.media-frame--4-5 { aspect-ratio: 4 / 5; }
.media-frame--3-4 { aspect-ratio: 3 / 4; }
.media-frame--1-1 { aspect-ratio: 1 / 1; }
.media-frame--16-9 { aspect-ratio: 16 / 9; }
.media-frame--3-2 { aspect-ratio: 3 / 2; }

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

/* Category-tinted placeholder frames */
.media-frame[data-category="Dresses"] {
  background: linear-gradient(135deg, #FCD3DE 0%, #E8A0B8 60%, #1A1A1A 100%);
}
.media-frame[data-category="Tops"] {
  background: linear-gradient(135deg, #FBF7F2 0%, #E5DDD5 70%, #D4A574 100%);
}
.media-frame[data-category="Bottoms"] {
  background: linear-gradient(135deg, #2A2A2A 0%, #4A4040 100%);
}
.media-frame[data-category="Denim"] {
  background: linear-gradient(135deg, #B8C5D8 0%, #7A8FA8 60%, #4A5A70 100%);
}
.media-frame[data-category="Accessories"] {
  background: linear-gradient(135deg, #D4A574 0%, #E8C89B 60%, #FBF7F2 100%);
}
.media-frame[data-category="Sets"] {
  background: linear-gradient(135deg, #F5E6D0 0%, #FF2D87 60%, #D4A574 100%);
}

/* ── Grain overlay ───────────────────────────────────────────────────────── */
.grain-overlay {
  position: absolute;
  inset: 0;
  background-image: var(--grain-url);
  background-size: 200px 200px;
  pointer-events: none;
  z-index: var(--z-raised);
}

.grain-overlay--ink { opacity: 0.04; }
.grain-overlay--paper { opacity: 0.06; mix-blend-mode: multiply; }

/* ── Drop cap ────────────────────────────────────────────────────────────── */
.drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 800;
  line-height: 0.8;
  float: left;
  margin-right: var(--space-3);
  margin-top: var(--space-2);
  color: var(--color-pink-hot);
}

/* ── Pull quote ──────────────────────────────────────────────────────────── */
.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  position: relative;
  padding-left: var(--space-7);
}

.pull-quote::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -0.1em;
  font-size: 1.5em;
  color: var(--color-pink-hot);
  font-style: normal;
}

/* ── Hairline divider ────────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-line);
  margin-block: var(--space-7);
}

.divider--dark {
  border-top-color: var(--color-line-dark);
}

/* ── Text link ───────────────────────────────────────────────────────────── */
.text-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.text-link:hover {
  color: var(--color-pink-hot);
}