/* =======================================
   Palette (from your selection)
   ======================================= */
:root{
  --bg-dark: #0F0F10;
  --accent-red: #C32B2B;
  --gold: #C47A2A;
  --sand: #E9DFD6;
  --muted-text: #dcd6cf;
  --white: #F5F4F2;
  --glass: rgba(255,255,255,0.04);
  --card-dark: #121212;
}

/* =======================================
   Global resets & basics
   ======================================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--muted-text);
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, transparent 50%), var(--bg-dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Links and buttons */
a { color:var(--accent-red); text-decoration:none; }
a:hover { color:var(--gold); text-decoration:underline; }

/* =======================================
   NAVBAR
   ======================================= */
.navbar{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.navbar-brand{ color:var(--white); font-size:1.05rem; }
.nav-link{ color:var(--muted-text); margin-left:0.25rem; margin-right:0.25rem; }
.nav-link:hover{ color:var(--white); }

/* make toggler visible on dark background */
.navbar-toggler { filter:invert(1); }

/* =======================================
   HERO
   ======================================= */
.hero{
  padding:110px 0 80px;
  min-height:520px;
  display:flex;
  align-items:center;
  position:relative;
}

.display-heading{
  font-weight:700;
  color:var(--white);
  font-size:clamp(2.2rem, 4.6vw, 4rem);
  line-height:1.02;
  margin-bottom:1rem;
  letter-spacing:-0.6px;
}

.display-heading .accent{ color:var(--accent-red); }

.lead.hero-lead{
  color:var(--muted-text);
  max-width:52ch;
  font-size:1.05rem;
}

/* CTA buttons */
.btn-cta{
  background: linear-gradient(90deg,var(--accent-red), var(--gold));
  color:#fff;
  border-radius:40px;
  padding:12px 22px;
  box-shadow: 0 6px 20px rgba(195,43,43,0.12);
  border: none;
}
.btn-ghost{
  color:var(--muted-text);
  border:1px solid rgba(255,255,255,0.06);
  padding:10px 18px;
  border-radius:40px;
  background:transparent;
}

/* hero metadata */
.hero-meta { list-style:none; padding:0; margin:18px 0 0; color: #bdb6ae; font-size:0.95rem; }

/* profile */
.profile-wrap{ display:inline-block; position:relative; }
.profile-photo{
  width:240px; height:240px; object-fit:cover; border-radius:12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.2);
  border: 6px solid rgba(255,255,255,0.02);
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.2,.9,.3,1), box-shadow .45s;
}
.profile-wrap:hover .profile-photo{ transform: translateY(-8px); box-shadow: 0 28px 60px rgba(0,0,0,0.7); }
.profile-badge{
  position:absolute; left:0; right:0; bottom:-18px; margin:auto;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--muted-text); padding:8px 14px; border-radius:999px; font-weight:600; font-size:0.95rem;
  border:1px solid rgba(255,255,255,0.03);
}

/* ===========================
   HERO IMAGE IMPROVEMENTS
=========================== */

/* Increase profile size */
.profile-photo {
  width: 320px;         /* increased size */
  height: 320px;
  border-radius: 14px;
  object-fit: cover;
  border: 6px solid rgba(255,255,255,0.03);
}

/* Bring the image slightly inward and center it better */
.profile-wrap {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-25px);    /* pull inward toward text */
}

/* Keep the name badge aligned under larger image */
.profile-badge {
  bottom: -24px;
  font-size: 1rem;
  padding: 10px 16px;
}

/* Adjust the hero column spacing to avoid overlap & balance */
.hero-left {
  padding-right: 2.8rem;  /* reduced so spacing is more even */
}

/* Fine-tune on large screens */
@media (min-width: 1400px) {
  .profile-photo {
    width: 350px;
    height: 350px;
  }
  .profile-wrap {
    transform: translateX(-40px);
  }
}

/* On medium screens: center image nicely */
@media (max-width: 991px) {
  .profile-wrap {
    transform: none;
    margin-top: 2rem;
  }
  .hero-left {
    padding-right: 1rem;
  }
}

/* On mobile: full width & centered */
@media (max-width: 576px) {
  .profile-photo {
    width: 270px;
    height: 270px;
  }
  .profile-wrap {
    transform: none;
  }
}


/* =======================================
   SECTIONS
   ======================================= */
.section-title{
  color:var(--white);
  font-size:1.6rem;
  margin-bottom:1.2rem;
}
.section-dark{ padding:80px 0; background: linear-gradient(0deg, rgba(255,255,255,0.01), transparent); }
.section-light{ padding:70px 0; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); }

/* ABOUT card */
.about-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border: 1px solid rgba(255,255,255,0.03);
  border-radius:12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.55);
}
.about-copy{
  color:var(--muted-text);
  font-size:1.02rem;
  margin:0;
  letter-spacing:0.1px;
}

/* SKILLS */
.subhead{ color:var(--white); font-weight:600; margin-bottom:.6rem; }
.skill-list{ list-style:none; padding:0; margin:0; color:var(--muted-text); }
.skill-list li{ padding:8px 0; font-size:1rem; display:flex; align-items:center; }
.dot{
  width:8px; height:8px; background:var(--gold); border-radius:2px; display:inline-block; margin-right:10px;
}

/* =======================================
   PROJECT CARDS
   ======================================= */
.project-large {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  transition: transform .36s cubic-bezier(.2,.95,.3,1), box-shadow .36s;
}
.project-large:hover{ transform: translateY(-8px); box-shadow: 0 28px 70px rgba(0,0,0,0.7); }

/* media wrap with overlay */
.media-wrap{ position:relative; overflow:hidden; height:420px; display:block; }
.media-img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s ease; }
.project-large:hover .media-img { transform: scale(1.03); }
.media-overlay{
  position:absolute; left:0; bottom:0; right:0; padding:22px;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.6));
  color:var(--white);
}
.media-overlay h3{ margin:0 0 6px; font-size:1.2rem; }
.media-overlay p.small{ margin:0; color: #d6cfc6; font-size:.95rem; }

/* project body */
.project-body{ padding:18px 22px; color:var(--muted-text); font-size:0.98rem; }

/* spread (two-page) */
.project-spread .spread-wrap {
  display:flex; gap:12px; justify-content:center;
}
.spread-img{ width:48%; border-radius:8px; object-fit:cover; box-shadow: 0 12px 30px rgba(0,0,0,0.6); transform:translateY(0); transition: transform .4s; }
.spread-img.left{ transform-origin:left center; }
.spread-img.right{ transform-origin:right center; }
.spread-img:hover { transform: translateY(-6px) scale(1.01); }

/* packaging layout */
.pack-wrap{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.pack-img{ width:46%; border-radius:8px; box-shadow: 0 12px 30px rgba(0,0,0,0.6); }
.pack-img.second{ transform: rotate(-2deg); }

/* =======================================
   CONTACT
   ======================================= */
.socials { color:var(--muted-text); margin-top:12px; }
.link-social{ color:var(--muted-text); margin:0 8px; }
.sep{ color:#6d6a63; }

/* footer */
.footer{ padding:28px 0; border-top: 1px solid rgba(255,255,255,0.02); color:#8f8b86; background:transparent; }

/* =======================================
   Responsive tweaks
   ======================================= */
@media (max-width:991px){
  .profile-photo{ width:180px; height:180px; }
  .media-wrap{ height:320px; }
  .display-heading{ font-size:2.4rem; }
}
@media (max-width:767px){
  .hero{ padding:80px 0 40px; }
  .profile-wrap{ display:block; margin:30px auto 0; }
  .spread-img{ width:100%; }
  .pack-img{ width:100%; }
  .media-wrap{ height:240px; }
  .project-large{ margin-bottom:18px; }
  .display-heading{ font-size:1.9rem; }
}

/* ===========================
   Fixes: hero overlap + posters + packaging tilt
   =========================== */

/* 1) HERO: keep text out of the profile image */
.hero-left {
  /* give extra right breathing room so long headlines don't run under the image */
  padding-right: 4.5rem;      /* desktop spacing; reduces in media queries below */
  position: relative;         /* local stacking context */
  z-index: 2;
}

/* ensure profile sits visually above content, and doesn't get covered */
.profile-wrap {
  position: relative;
  z-index: 4;
  margin-left: auto;
}

/* make sure nav and hero background remain below profile and text */
.hero { position: relative; z-index: 1; }

/* reduce padding on smaller screens so columns stack nicely */
@media (max-width: 992px) {
  .hero-left { padding-right: 1rem; }
  .profile-wrap { margin-top: 24px; }
}

/* 2) POSTERS / PROJECT IMAGES: show full artwork (no harsh crop)
   Use `object-fit: contain` and allow the image to scale while preserving aspect ratio.
   This makes A4-like posters display correctly inside the card without losing top/bottom content.
*/
.media-wrap {
  /* allow auto height rather than forcing a fixed tall crop */
  height: auto;
  min-height: 340px;           /* sensible minimum so cards remain visually strong */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  overflow: hidden;
}

.media-img {
  width: 100%;
  height: auto;                /* let height follow aspect ratio */
  max-height: 720px;          /* limits extreme height on large displays */
  object-fit: contain;        /* key: show the whole poster */
  object-position: center;
  display: block;
  border-radius: 8px;
  background: #0f0f0f;        /* matches page and avoids white bars on some images */
}

/* keep the overlay readable but avoid covering important imagery —
   reduce overlay height and move text into the project-body for descriptions */
.media-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.45));
  max-height: 42%;
  overflow: hidden;
}

/* move longer summary text to project-body below so overlay stays light */
.project-body { padding-top: 12px; }

/* 3) PACKAGING: remove tilt and equalize image widths */
.pack-wrap {
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
}
.pack-img {
  width: 49%;
  border-radius:8px;
  object-fit: contain;
  height: auto;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  transform: none !important;   /* remove any rotation */
}

/* ensure second image is aligned (remove rotation override) */
.pack-img.second {
  transform: none !important;
  margin-left: 0;
}

/* mobile: stack packaging images */
@media (max-width: 767px) {
  .pack-img { width: 100%; }
}

/* Minor polish: ensure project cards keep consistent padding when media-wrap changes */
.project-large, .project-spread, .project-pack {
  display: block;
  overflow: visible;
}

/* small screens for poster cards: reduce max-height so they fit neatly */
@media (max-width: 480px) {
  .media-img { max-height: 420px; }
}

/* ===========================
   FIX PROFILE NAME BADGE
=========================== */

/* The wrapper */
.profile-wrap {
  position: relative;
  display: inline-block;
}

/* The profile image */
.profile-photo {
  width: 320px;
  height: 320px;
  object-fit: cover;
  border-radius: 14px;
}

/* Name badge */
.profile-badge {
  position: absolute;
  bottom: -32px;                  /* moved DOWN for breathing room */
  left: 50%;
  transform: translateX(-50%);    /* centers the badge perfectly */
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 6px 14px;              /* tighter, minimal size */
  border-radius: 20px;            /* subtle pill, not oversized */
  font-size: 0.9rem;
  font-weight: 500;
  width: auto;                    /* stops full-width stretching */
  white-space: nowrap;            /* keeps name on one line */
  backdrop-filter: blur(8px);     /* premium glass look */
}

/* Slight spacing below the badge so it doesn't collide with hero section */
@media (min-width: 992px) {
  .hero-section {
    padding-bottom: 140px;
  }
}