/* ════════════════════════════════════════════
   HOMEPAGE CSS
══════════════════════════════════════════════ */

/* HERO */
.hero{
  max-width:1080px;margin:0 auto;
  padding:5.5rem 40px 4.5rem;
  border-bottom:1px solid #efefef
}
.hero-greeting{
  font-size:.8125rem;color:#888;margin-bottom:1.75rem
}
.hero-h{
  font-family:'Fraunces',serif;
  font-size:clamp(2.75rem,6vw,5rem);
  line-height:1.02;font-weight:400;
  letter-spacing:-.025em;color:#1c1c1c;
  margin-bottom:1.75rem
}
.hero-h em{font-style:italic;color:#888}
.hero-title-keyword{
  display:inline-block;
  background:linear-gradient(90deg,#ea580c,#CC071E);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-bio{
  font-size:1.125rem;line-height:1.6;
  color:#444;font-weight:300;
  max-width:720px;margin-bottom:1.75rem;
  letter-spacing:-.01em;
}
.hero-bio strong{font-weight:700;color:#CC071E}
.hero-skills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.hsk{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.8125rem;font-weight:500;color:#CC071E;
  background:rgba(234,88,12,0.1);padding:.3rem .8rem;border-radius:999px;
  border:1px solid #f6af91;
}
.hsk-bold{
  background:rgba(234,88,12,0.1);
  color:#CC071E;
  border:1px solid #f6af91;
}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap}

.hero-profile{margin-top:1.25rem}
.hero-profile a{display:inline-block}
.hero-profile img{width:96px;height:96px;border-radius:50%;display:block;border:3px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.08);object-fit:cover}

@media(max-width:580px){
  .hero-profile{margin-top:1rem}
  .hero-profile img{width:76px;height:76px}
}

/* Hero-specific button styles */
.hero .btn-solid{
  background:linear-gradient(90deg,#ea580c,#CC071E);
  color:#fff;border:none;
}
.hero .btn-solid:hover{filter:brightness(.95)}
.hero .btn-outline{
  background:#fff;color:#000;border:1px solid #000;padding:.7rem 1.6rem;
}
.hero .btn-outline:hover{background:#f5f5f5}

.strengths-sec{background:#f8f8f8;border-top:1px solid #efefef;padding:4.5rem 0}
.strengths-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2.5rem}
.str-card{position:relative;overflow:hidden;background:#fff;border:1px solid #efefef;border-radius:8px;padding:1.5rem;transition:box-shadow .2s}
.str-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:6px;background:linear-gradient(90deg,#f97316,#ea580c,#ef4444,#cc071e)}
.str-card:hover{box-shadow:0 4px 24px rgba(0,0,0,.06)}
.str-card-icon{font-size:1.375rem;margin-bottom:.75rem}
.str-card-h{font-family:'Fraunces',serif;font-size:1.0625rem;font-weight:500;color:#1c1c1c;margin-bottom:.5rem;line-height:1.25}
.str-card-p{font-size:.875rem;color:#555;line-height:1.7;font-weight:300}

.proof-sec{padding:4.5rem 0;border-top:1px solid #efefef}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2.5rem;align-items:start}
.proof-block h3{font-family:'Fraunces',serif;font-size:1.375rem;font-weight:500;color:#1c1c1c;margin-bottom:1rem}
.proof-list{list-style:none}
.proof-list li{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 0;border-bottom:1px solid #f5f5f5;font-size:.9375rem;color:#444;line-height:1.6;font-weight:300}
.proof-list li:last-child{border-bottom:none}
.proof-list li::before{content:'→';color:#CC071E;font-weight:700;flex-shrink:0;margin-top:.1rem}
.proof-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
.proof-stat{background:#f8f8f8;border-radius:6px;padding:1.125rem;text-align:center;border:1px solid #efefef}
.proof-stat-n{font-family:'Fraunces',serif;font-size:1.75rem;color:#CC071E;margin-bottom:.2rem}
.proof-stat-l{font-size:.75rem;color:#888;line-height:1.4}

.work-label{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:#a0a0a0;font-weight:600;margin-bottom:1.25rem}

/* WORK GRID */
.work-sec{max-width:1160px;margin:0 auto;padding:5rem 2.5rem 6rem}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 2.25rem}
.pcard{cursor:pointer;display:block;color:inherit}
.pcard:hover .pcard-thumb img,
.pcard:hover .pcard-thumb svg{transform:scale(1.04)}
.pcard:focus-visible{outline:3px solid #1565C0;outline-offset:4px;border-radius:8px}
.pcard-cats{display:flex;flex-wrap:wrap;margin-bottom:.625rem}
.pcat{
  font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:#888;font-weight:500
}
.pcat+.pcat::before{content:' · ';color:#ddd;margin:0 .25rem}
.pcard-thumb{
  width:100%;aspect-ratio:16/10;overflow:hidden;
  border-radius:6px;background:#f8f8f8;
  border:1px solid #efefef;margin-bottom:1rem
}
.pcard-thumb svg{width:100%;height:100%;display:block;transition:transform .5s ease}
.pcard-title{
  font-family:'Fraunces',serif;font-size:1.1875rem;
  font-weight:400;color:#1c1c1c;
  margin-bottom:.4rem;line-height:1.3
}
.pcard-desc{
  font-size:.875rem;color:#666;line-height:1.6;
  margin-bottom:.875rem;font-weight:300
}
.pcard-link{
  font-size:.8125rem;font-weight:500;color:#1c1c1c;
  border-bottom:1px solid #1c1c1c;padding-bottom:1px
}

/* RESPONSIVE */
@media(max-width:900px){
  .proj-grid{grid-template-columns:repeat(2,1fr);gap:2.25rem 1.75rem}
  .hero{padding:4rem 1.25rem 3rem}
  .work-sec{padding:3rem 1.25rem 4rem}
  .strengths-grid{grid-template-columns:repeat(2,1fr)}
  .proof-grid{grid-template-columns:1fr;gap:2.5rem}
  .proof-stat-row{grid-template-columns:1fr}
}
@media(max-width:580px){
  .proj-grid{grid-template-columns:1fr}
  .hero-h{font-size:2.5rem}
  .strengths-grid{grid-template-columns:1fr}
  .proof-stat-row{grid-template-columns:1fr}
}