/* Anneth Paola Davis — performing-arts portfolio.
   Based on 6SD direction 05 (Premium Dark). Loaded AFTER shared components.css.
   Display: Fraunces. Body: Inter. Accent: refined gold (theatrical / playbill). */

:root {
  /* Blush / baby pink accent (her brand color) */
  --color-accent: #f4b6cd;
  --color-accent-hover: #f9cddc;
  --color-accent-contrast: #2a0f1b;

  /* Dark neutrals */
  --color-bg: #0d1014;
  --color-surface: #161b22;
  --color-border: #2a313b;
  --color-text: #f3f1ea;
  --color-text-muted: #a6adb8;
  --color-text-invert: #0d1014;

  --color-dark-bg: #090b0e;
  --color-dark-text: #f3f1ea;
  --color-dark-muted: #a6adb8;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
  --shadow: 0 8px 24px rgba(0,0,0,0.45), 0 18px 48px rgba(0,0,0,0.4);
}

h1, h2, h3, h4 { letter-spacing: -0.01em; }
.site-header { background: color-mix(in srgb, var(--color-bg) 88%, transparent); }
.nav__brand img { height: 38px; width: 38px; border-radius: 999px; }
.card { background: var(--color-surface); }
.review { background: var(--color-surface); border: 1px solid var(--color-border); }

/* Form fields on dark */
.field input, .field select, .field textarea { background: #0f141a; color: var(--color-text); }
.field input::placeholder, .field textarea::placeholder { color: #6b7480; }
.field select option { background: #0f141a; color: var(--color-text); }
.form__status[data-state="success"] { background: #10261b; color: #6fd99b; }
.form__status[data-state="error"] { background: #2a1414; color: #f08a82; }

.btn--ghost { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }

/* Hero glow */
.hero {
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(244,182,205,0.18), transparent 60%),
    linear-gradient(180deg, #0d1014 0%, #0a0d11 100%);
}

/* Gold rule */
.rule-gold { width: 64px; height: 3px; background: var(--color-accent); border: 0; border-radius: 2px; }
.site-footer a:hover { color: var(--color-accent); }

/* Eyebrow tracking a touch wider for the editorial feel */
.eyebrow { letter-spacing: 0.16em; }

/* ---------- Portfolio-specific ---------- */

/* Hero with portrait */
.hero__inner--portrait { display: grid; gap: var(--space-12); align-items: center; padding-block: var(--space-16); }
@media (min-width: 900px) { .hero__inner--portrait { grid-template-columns: 1.05fr 0.95fr; } }

/* More generous vertical rhythm in the hero copy so it does not feel cramped */
.hero .stack > * + * { margin-top: var(--space-6); }
.hero h1 { margin-bottom: var(--space-2); }
.hero .lead { line-height: 1.6; }

.portrait-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--color-border); box-shadow: var(--shadow);
  background: #11161d;
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.portrait-frame--tall { aspect-ratio: 4 / 5; }
/* Headshots are framed tighter on the face; keep the crown of the head in frame */
.portrait-frame--head img { object-position: 50% 12%; }
.portrait-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 -80px 90px -40px rgba(9,11,14,0.7);
}

/* Discipline pills */
.disciplines { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.disciplines li {
  font-family: var(--font-display); font-size: 1.05rem; color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  border-radius: 999px; padding: var(--space-2) var(--space-4); background: rgba(244,182,205,0.08);
}

/* Quick facts strip */
.facts { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact__label { color: var(--color-text-muted); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; }
.fact__value { font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--color-text); margin-top: var(--space-1); }

/* Gallery */
.gallery { columns: 1; column-gap: var(--space-6); }
@media (min-width: 600px) { .gallery { columns: 2; } }
@media (min-width: 980px) { .gallery { columns: 3; } }
.gallery figure {
  break-inside: avoid; margin: 0 0 var(--space-6); border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--color-border); background: #11161d; position: relative;
}
.gallery img { width: 100%; display: block; transition: transform 400ms ease; }
.gallery figure:hover img { transform: scale(1.03); }
.gallery figcaption {
  font-size: var(--fs-small); color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border);
}
.gallery figcaption strong { color: var(--color-text); font-weight: var(--fw-semibold); }

/* Selected-work cards (home) */
.work-grid { display: grid; gap: var(--space-6); }
@media (min-width: 720px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
.work {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--color-border); background: #11161d; min-height: 460px; display: block;
}
.work img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* The film poster reads top-down (title + faces up top); keep its top edge in frame */
.work--poster img { object-position: 50% 0; }
.work__body {
  position: relative; z-index: 1; margin-top: auto; padding: var(--space-6);
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px;
  background: linear-gradient(180deg, transparent 45%, rgba(9,11,14,0.88) 100%);
}
.work__kicker { color: var(--color-accent); font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; }
.work__title { font-family: var(--font-display); font-size: var(--fs-h3); color: #fff; margin-top: var(--space-1); }

/* Credits table */
.credits { display: grid; gap: var(--space-2); }
.credit {
  display: grid; gap: var(--space-1); padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 720px) {
  .credit { grid-template-columns: 1.4fr 1fr 1.4fr; gap: var(--space-6); align-items: baseline; }
}
.credit__title { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-text); }
.credit__role { color: var(--color-accent); font-size: var(--fs-small); letter-spacing: 0.04em; }
.credit__house { color: var(--color-text-muted); font-size: var(--fs-small); }

/* Definition lists for training/skills */
.deflist { display: grid; gap: var(--space-4); }
.deflist > div { display: grid; gap: var(--space-1); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.deflist dt { font-family: var(--font-display); color: var(--color-accent); font-size: 1.05rem; }
.deflist dd { margin: 0; color: var(--color-text-muted); }

/* Pull quote */
.pullquote {
  font-family: var(--font-display); font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.3; color: var(--color-text); max-width: 24ch;
}
.pullquote span { color: var(--color-accent); }

/* About split */
.about-split { display: grid; gap: var(--space-12); align-items: start; }
@media (min-width: 900px) { .about-split { grid-template-columns: 0.85fr 1.15fr; } }