/* -----------------------------------------
   THEME / GLOBAL
------------------------------------------ */
:root{
  --pink-100:#FED0D8;   /* header bar / footer bg */
  --pink-200:#FBDAE3;   /* home background (solid) */
  --pink-300:#f7b8c2;   /* accents */
  --pink-400:#FE728B;   /* primary text/accent */
  --text:#FE728B;       /* default text color */
  --nav-text:#856FA6;   /* lavender for nav items */
  --shadow: 0 10px 18px rgba(205,100,120,.18);

  /* Work Experience */
  --grad-start:#DEE2FF;
  --grad-end:#9C89B8;
  --purple-1:#856FA6;

  /* Portfolio palette */
  --port-grad-1:#FED0D8;
  --port-grad-2:#F0E4EF;
  --port-grad-3:#F0E6EF;
  --port-title:#FF94A7;
  --accent:#FE728B;
  --tile-shadow:0 10px 22px rgba(0,0,0,.08);

  /* Work Together page */
  --lavender:#F0E4EF;
  --purple:#9C89B8;
}

*{ box-sizing:border-box }
html,body{ height:100% }

/* -------- GLOBAL BODY (HOME + MOST PAGES) -------- */
body{
  margin:0;
  background: var(--pink-200);     
  color: var(--text);             
  font-family:"EB Garamond", serif;
  line-height:1.6;
}

/* -----------------------------------------
   TOP NAV
------------------------------------------ */
.topbar{
  background:var(--pink-100);
  position:sticky; top:0; z-index:10;
  border-bottom:1px solid rgba(0,0,0,.03);
}
.nav{
  display:flex; gap:2.5rem; justify-content:center;
  padding:18px 16px;
  font-size:1.05rem;
}
.nav a{
  color:var(--nav-text);
  text-decoration:none;
  transition:opacity .2s ease;
}
.nav a:hover{ opacity:.75 }

/* -----------------------------------------
   HOME 
------------------------------------------ */
.hero{ padding:56px 20px 24px; }
.hero-inner{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:42px; position:relative;
}

.title{
  grid-column:1 / -1;
  text-align:center;
  font-family:"Playfair Display", serif;
  font-weight:600; letter-spacing:.02em;
  margin:10px 0 12px;
  color:#FF94A7;
  line-height:.95;
  font-size:clamp(2.8rem,6.2vw,6rem);
}
.title span{ display:block }

.bio{
  background:#fbe0e6;
  border:3px solid var(--pink-400);
  border-radius:14px;
  padding:36px 32px;
  box-shadow:var(--shadow);
  max-width:600px;
  font-size:1.25rem;
  line-height:1.7;
  justify-self:center;
  text-align:center;
  color: var(--pink-400);           
}

.polaroid{ justify-self:center; margin:0; position:relative; transform:rotate(-6deg); }
.polaroid::before{
  content:""; position:absolute; inset:-14px -14px -18px -14px;
  border:6px solid var(--pink-400); border-radius:10px; z-index:0;
}
.polaroid img{
  display:block; width:min(460px,86vw); height:auto;
  border-radius:6px; position:relative; z-index:1; box-shadow:var(--shadow);
}

.roles{ text-align:left; max-width:1100px; margin:18px auto 64px; padding:0 20px; }
.roles p{ margin:8px 0 0; letter-spacing:.08em; font-size:1rem; color:var(--pink-400); }

/* -----------------------------------------
   FOOTER (GLOBAL)
------------------------------------------ */
.site-footer{
  background:var(--pink-100);
  text-align:center;
  padding:28px 16px 36px;
  display:flex; flex-direction:column; gap:10px;
  color: var(--pink-400);                    
}
.site-footer a,
.site-footer .contact-link,
.site-footer .credit a{
  color: var(--pink-400);
  text-decoration:none;
}
.site-footer a:hover,
.site-footer .contact-link:hover,
.site-footer .credit a:hover{ text-decoration:underline }

/* -----------------------------------------
   WORK TOGETHER
------------------------------------------ */
.page-cta{ background:var(--lavender); }

.home-btn{
  position:fixed; top:18px; right:18px;
  background:var(--purple); color:#fff;
  font-family:"EB Garamond", serif; font-size:1.05rem;
  padding:10px 18px; border-radius:10px; text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.08); z-index:20;
}
.home-btn:hover{ opacity:.9; }
.home-btn.is-pink{ background:var(--pink-400); } 

.work-hero{ max-width:1100px; margin:90px auto 60px; padding:0 20px; }
.work-stage{ position:relative; display:grid; place-items:center; margin-bottom:40px; }
.work-card{
  margin:0; transform:rotate(-7deg);
  width:min(720px,92vw); aspect-ratio:2/3;
  background:#fbe6d8; overflow:hidden; border-radius:8px;
  box-shadow:0 16px 30px rgba(0,0,0,.12);
}
.work-card img{ width:100%; height:100%; object-fit:contain; display:block; }

.work-title{
  position:absolute; inset:0; display:grid; place-items:center;
  margin:0; text-align:center; pointer-events:none;
  font-family:"Playfair Display", serif; font-weight:600; line-height:.92;
  color:#FF94A7; font-size:clamp(3rem,11vw,9rem);
}

.work-contact{ margin-top:36px; padding-bottom:80px; }
.work-contact-row{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:28px; justify-items:center; text-align:center;
}
.contact-item{ display:flex; flex-direction:column; gap:10px; }
.contact-item .label{ letter-spacing:.06em; color:var(--text); font-size:clamp(1rem,2.6vw,1.35rem); opacity:.9; }
.contact-item a{ color:var(--text); text-decoration:none; font-size:clamp(1.05rem,2.8vw,1.4rem); }
.contact-item a:hover{ text-decoration:underline; }

/* -----------------------------------------
   MODELING STATS
------------------------------------------ */
.page-stats{ background:var(--pink-200); }
.stats-hero{ max-width:1100px; margin:36px auto 60px; padding:0 20px; }
.stats-title{
  margin:24px 0; font-family:"Playfair Display", serif; font-weight:600;
  line-height:.92; color:#FF94A7; font-size:clamp(2.6rem,7vw,6rem);
}
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.stats-photo{ margin:0; border:6px solid #856FA6; border-radius:12px; overflow:hidden; box-shadow:0 14px 28px rgba(0,0,0,.10); }
.stats-photo img{ display:block; width:100%; height:auto; }
.stats-list{
  margin:0; padding:8px 0; display:grid; grid-template-columns:1fr;
  gap:24px; color:#856FA6; font-family:"EB Garamond", serif;
}
.stats-list > div{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.stats-list dt{ font-weight:500; font-size:clamp(1.2rem,2.6vw,2rem); }
.stats-list dd{ margin:0; font-size:clamp(1.2rem,2.6vw,2rem); }

/* -----------------------------------------
   WORK EXPERIENCE
------------------------------------------ */
body.page-workexp{
  background: linear-gradient(180deg, var(--grad-start) 0%, var(--grad-end) 100%);
  background-repeat:no-repeat; background-attachment:fixed; background-size:100% 100%;
}
.workexp-title{
  color:var(--purple-1); font-family:"Playfair Display", serif; font-weight:600;
  line-height:.92; font-size:clamp(2.8rem,7.5vw,6.2rem);
  margin:0 0 22px; text-align:left; padding-left:50px;
}
.exp-panel{
  background:var(--grad-start); border:none; border-radius:12px;
  max-width:980px; margin:10px auto 28px; padding:28px 36px 34px;
  box-shadow:0 14px 32px rgba(0,0,0,.10); text-align:center;
}
.exp-year{ font-size:clamp(1.25rem,2.6vw,1.6rem); margin:6px 0 14px; color:var(--purple-1); }
.exp-month{ font-size:clamp(1.15rem,2.4vw,1.35rem); margin:18px 0 6px; color:var(--purple-1); }
.exp-list{
  list-style:none; margin:0 auto 12px; padding-left:0;
  font-size:clamp(1.05rem,2.2vw,1.2rem); line-height:1.85; color:var(--purple-1);
}
.exp-more{
  text-align:center; color:var(--grad-start); font-family:"EB Garamond", serif;
  font-size:clamp(1.05rem,2.2vw,1.2rem); margin:8px auto 36px;
}
.page-workexp .site-footer{ background:var(--grad-start); }
.page-workexp .site-footer .contact-link,
.page-workexp .site-footer .credit a{ color:var(--purple-1); }

/* -----------------------------------------
   PORTFOLIO 
------------------------------------------ */

body.page-portfolio{
  background: linear-gradient(180deg, var(--port-grad-1) 0%, var(--port-grad-2) 67%, var(--port-grad-3) 100%);
  background-attachment:fixed; background-repeat:no-repeat; background-size:cover;
  color:#7a628f; 
}

#preloader{
  position:fixed; inset:0;
  background: linear-gradient(180deg, var(--port-grad-1) 0%, var(--port-grad-2) 67%, var(--port-grad-3) 100%);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; transition:opacity .4s ease, visibility .4s ease;
}
.spinner{
  width:48px; height:48px; border:5px solid rgba(255,255,255,.4);
  border-top-color:var(--accent); border-radius:50%;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
body.loaded #preloader{ opacity:0; visibility:hidden; }

.wrap{ max-width:1280px; margin:48px auto 24px; padding:0 20px; }
h1{ margin:0 0 24px; color:var(--port-title); font-family:"Playfair Display", serif; font-weight:600; line-height:.92; font-size:clamp(2.6rem,7.5vw,6rem); text-align:left; }

.gallery{
  margin:8px auto 56px; display:grid; gap:22px; padding:0 12px;
  opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s ease;
}
.gallery.visible{ opacity:1; transform:translateY(0); }

.grid-3{ grid-template-columns:repeat(3,1fr); max-width:1000px; justify-content:center; }
.grid-2{ grid-template-columns:repeat(2,1fr); max-width:720px;  justify-content:center; }
.grid-1{ grid-template-columns:1fr;             max-width:720px;  justify-content:center; }

.tile{
  margin:0; aspect-ratio:2/3; border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.45); box-shadow:var(--tile-shadow);
}
.tile.horizontal{ aspect-ratio:4/3 !important; }
.tile img, .tile video{ display:block; width:100%; height:100%; object-fit:cover; }
.tile img{ transition:transform .25s ease; }
.tile:hover img{ transform:scale(1.03); }

.gallery {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s ease, transform .6s ease;
}
.gallery.visible {
  opacity: 1;
  transform: translateY(0);
}
#block27 { opacity: 1 !important; transform: none !important; }
#block27 { content-visibility: visible; contain-intrinsic-size: auto; }

/* -----------------------------------------
   RESPONSIVE
------------------------------------------ */
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; gap:28px; }
  .bio{ justify-self:center; text-align:center; }
  .polaroid{ justify-self:center; transform:rotate(-4deg); }
  .roles{ text-align:center; }

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

@media (prefers-reduced-motion: reduce) {
  .gallery { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  body { background-attachment: scroll;}
}

@supports (-webkit-touch-callout: none) {
  .gallery{
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }
}