/* =====================================================================
   Emily Huang — Portfolio (Sage & Cream)
   Ivory + soft sage, with a leafy vine framing the whole page.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Quicksand:wght@400;500;600;700&display=swap");

:root {
  --ivory: #f7f5ee;
  --sage: #cdd9c3;
  --sage-deep: #7f9b78;
  --sage-ink: #4c5a47;
  --ink: #4a4a42;
  --ink-soft: #7c7c70;
  --vine-pad: 46px;   /* space reserved around the page for the vine */
}

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

body {
  background: var(--ivory);
  font-family: "Quicksand", sans-serif;
  color: var(--ink);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  /* column layout lets the footer rest at the bottom, hero fills the rest */
  display: flex;
  flex-direction: column;
}

/* keep content above any decoration */
.nav, .hero, .page { position: relative; z-index: 2; }

.hero { flex: 1; }

/* ---------- Nav ---------- */
.nav {
  display: flex; align-items: center; justify-content: flex-end;
  max-width: 1100px; margin: 0 auto;
  padding: 1.75rem 3rem;
}
.brand { font-family: "DM Serif Display", serif; font-size: 1.3rem; color: var(--sage-ink); }
.links { display: flex; gap: 1.6rem; }
.links a {
  color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; font-weight: 500;
  transition: color 0.15s;
}
.links a:hover { color: var(--sage-deep); }
.links a.is-active { color: var(--sage-ink); font-weight: 700; }

/* ---------- Hero ---------- */
.hero {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  padding: 3rem 3rem 5rem;
}
.title {
  font-family: "DM Serif Display", serif; font-weight: 400;
  font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1.05; color: var(--sage-ink);
  margin: 0 0 1.5rem;
}
.lead {
  font-size: 1.08rem; font-weight: 400; line-height: 1.8; color: var(--ink-soft);
  max-width: 40ch; margin: 0;
}

/* ---------- Generic page shell ---------- */
.page {
  position: relative; z-index: 2; flex: 1;
  max-width: 1100px; margin: 0 auto; width: 100%;
  padding: 3rem 3rem 5rem;
}
.page__head { margin-bottom: 2.5rem; }
.page__head .title { margin-bottom: 1rem; }
.page__head .lead { max-width: 55ch; }

.back-link {
  display: inline-block; margin-bottom: 1.5rem;
  color: var(--sage-deep); text-decoration: none;
  font-size: 0.9rem; font-weight: 600;
  transition: color 0.15s;
}
.back-link:hover { color: var(--sage-ink); }

/* ---------- Projects index ---------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.6rem;
}
.project-card {
  display: flex; flex-direction: column;
  padding: 1.6rem;
  text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--sage);
  border-radius: 16px;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.project-card:hover {
  transform: translateY(-3px);
  border-color: var(--sage-deep);
  box-shadow: 0 18px 36px -20px rgba(90, 110, 80, 0.55);
}
/* Every logo sits in an identical square box and is scaled to fit (contain),
   so wide wordmarks and square icons all read at a consistent size. */
.project-card__thumb {
  width: 88px; height: 88px; border-radius: 16px;
  margin-bottom: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--sage);
  overflow: hidden;
}
.project-card__thumb img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
/* VS Code: render 15% smaller within the same tile */
.project-card__thumb--sm img { max-width: 85%; max-height: 85%; }
/* Yahoo Finance: expand to nearly fill the tile without cropping */
.project-card__thumb--flush { padding: 4px; }
.project-card__thumb--flush img { max-width: 100%; max-height: 100%; }
/* Seattle Chocolate: fill the tile, leaving a 4px inset */
.project-card__thumb--fill { padding: 4px; }
.project-card__thumb--fill img {
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: cover; border-radius: 12px;
  /* source image isn't centered — nudge right to visually center it */
  object-position: 1px center;
}
.project-card__title {
  font-family: "DM Serif Display", serif; font-weight: 400;
  font-size: 1.5rem; color: var(--sage-ink); margin: 0 0 0.6rem;
}
.project-card__desc {
  font-size: 0.98rem; line-height: 1.65; color: var(--ink-soft);
  margin: 0;
}

/* ---------- Project detail: slides embed ---------- */
.slides-stack {
  display: flex; flex-direction: column; gap: 1.6rem;
}
.slides {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--sage);
  box-shadow: 0 18px 36px -22px rgba(90, 110, 80, 0.5);
  background: #fff;
}
.slides__frame { width: 100%; height: 100%; border: 0; }

/* ---------- Project detail: contributions ---------- */
.section-title {
  font-family: "DM Serif Display", serif; font-weight: 400;
  font-size: 1.8rem; color: var(--sage-ink); margin: 0 0 1rem;
}
.contributions {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--sage);
}
.contributions__body {
  font-size: 1.05rem; line-height: 1.8; color: var(--ink-soft);
  max-width: 65ch; margin: 0;
}

/* ---------- Footer bar ---------- */
.footer {
  position: relative; z-index: 2;
  border-top: 1px solid var(--sage);
  /* faint warm wash so it reads as a distinct band, not pasted on */
  background: linear-gradient(to top, rgba(205, 217, 195, 0.28), transparent);
}
.footer__inner {
  max-width: 1100px; margin: 0 auto;
  padding: 1.4rem 3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.footer__brand {
  font-family: "DM Serif Display", serif;
  font-size: 1.05rem; color: var(--sage-ink);
}
.footer__note {
  font-size: 0.82rem; color: var(--ink-soft); font-weight: 500;
}
.footer__social { display: flex; gap: 0.6rem; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sage-deep);
  border: 1px solid var(--sage);
  background: rgba(255, 255, 255, 0.6);
  transition: transform 0.15s, background 0.15s, color 0.15s;
}
.footer__social a:hover { transform: translateY(-2px); background: var(--sage-deep); color: #fff; }
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }

.photo-col {
  position: relative; justify-self: center;
  width: min(420px, 80vw);
}

/* The decorative arch frame is a near-square graphic (949x980).
   The photo is clipped to the arch opening (upper-left region of the frame)
   and the frame.webp overlays on top so its line-work + floral sprig show. */
.framed {
  position: relative;
  width: 100%;
  aspect-ratio: 949 / 980;
}

/* photo positioned to fill the arch window inside the frame.
   Measured against the 949x980 artwork: opening ~2%..75% wide, ~3%..93% tall,
   with the dome occupying the top ~30%. */
.photo {
  position: absolute;
  /* values dialed in via the aligner tool */
  top: 1.4%;
  left: 1%;
  width: 80.4%;
  height: 92%;
  object-fit: cover;
  border-radius: 50% 50% 0% 0% / 42% 42% 3% 3%;
  /* white border tucked under the frame, following the arch shape */
  border: 7px solid #fff;
  box-shadow: 0 14px 30px -16px rgba(90, 110, 80, 0.55);
  z-index: 1;
}

.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  /* Recolor the frame to EXACTLY match the heading (--sage-ink).
     Use the artwork as an alpha mask and paint it with a solid fill so the
     color is exact, not a filter approximation. */
  background-color: var(--sage-ink);
  -webkit-mask: url("/frame.webp") center / contain no-repeat;
          mask: url("/frame.webp") center / contain no-repeat;
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding: 2rem 1.5rem 4rem; }
  .lead { margin-left: auto; margin-right: auto; }
  .photo-col { order: -1; margin: 4rem auto 1rem; }
  .footer__inner {
    flex-direction: column; gap: 0.9rem; text-align: center;
    padding: 1.6rem 1.5rem;
  }
  .footer__note { order: 3; }
}