/*
 * Portfolio page styles moved out of inline <style> so the browser can cache them
 * while keeping the template markup cleaner.
 */
.page-portfolio {
  margin-top: 0;
  padding-top: var(--page-top-gap, clamp(1.5rem, 3vw, 2.25rem));
  --portfolio-shadow-reach: 28px;
}
.page-portfolio .hero{margin: clamp(-1rem, -0.8vw, -0.5rem) 0 1.5rem}
.page-portfolio .hero-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.75rem;align-items:center;padding:1.5rem 1.2rem;border:1px solid rgba(0,0,0,.04);border-radius:28px;background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(237,237,237,0.8));box-shadow:0 30px 60px rgba(0,0,0,0.08)}
.page-portfolio .hero-copy{display:flex;flex-direction:column;gap:.9rem}
.page-portfolio .hero .title{font-size:clamp(2.8rem,4vw,4.6rem);letter-spacing:-.02em;margin:0;line-height:1.05}
.page-portfolio .hero .eyebrow{font-size:.85rem;letter-spacing:.32em;text-transform:uppercase;color:#616161;margin:0}
.page-portfolio .hero .lede{font-size:1.05rem;line-height:1.6;max-width:40rem;margin:0;color:#2d2d2d}
.page-portfolio .hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.25rem}
.page-portfolio .hero-btn{font-weight:600;border-radius:999px;padding:.7rem 1.4rem;border:1px solid rgba(0,0,0,.18);box-shadow:0 14px 30px rgba(0,0,0,.07);background:rgba(255,255,255,.96);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.page-portfolio .hero-btn.primary{background:#0f1116;color:#fff;border-color:#0f1116}
.page-portfolio .hero-btn.ghost{background:transparent;color:#111;border-style:dashed}
.page-portfolio .hero-btn:hover,.page-portfolio .hero-btn:focus-visible{transform:translateY(-2px);box-shadow:0 18px 38px rgba(0,0,0,.12)}
.page-portfolio .hero-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-top:.5rem}
.page-portfolio .meta-card{padding:1rem 1.1rem;border-radius:18px;background:rgba(255,255,255,0.75);border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 28px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:.15rem}
.page-portfolio .meta-card strong{font-size:1.4rem;letter-spacing:-.01em}
.page-portfolio .meta-card .meta-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.24em;color:#666}
.page-portfolio .meta-card small{color:#555;opacity:.8}
.page-portfolio .hero-visual{display:flex;flex-direction:column;gap:.75rem}
.page-portfolio .hero-visual-note{padding:1rem 1.2rem;border-radius:18px;background:rgba(0,0,0,0.76);color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;line-height:1.5;border:1px solid rgba(255,255,255,.08)}
.page-portfolio .hero-visual .banner-full{overflow:hidden;border-radius:20px;box-shadow:0 26px 55px rgba(0,0,0,.12)}
.page-portfolio .hero-media img{width:100%;height:auto;border-radius:20px;display:block}
.page-portfolio .portfolio-filters{margin:1.3rem auto}
.page-portfolio .filters-inner{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1rem 1.25rem;border-radius:18px;border:1px solid rgba(0,0,0,.05);background:rgba(255,255,255,0.82);box-shadow:0 16px 38px rgba(0,0,0,0.08);width:100%;max-width:min(1200px,100%);box-sizing:border-box}
.page-portfolio .filters-label{font-size:.85rem;letter-spacing:.28em;text-transform:uppercase;color:#5c5c5c;margin:0}
.page-portfolio .filters-pills{display:flex;flex-wrap:wrap;gap:.6rem}
.page-portfolio .filter-pill{padding:.75rem 1.1rem;min-height:44px;border-radius:999px;border:1px solid rgba(0,0,0,.08);background:#f7f7f7;color:#111;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 6px 16px rgba(0,0,0,.06);flex:1 1 auto;white-space:nowrap}
.page-portfolio .filter-pill:hover,.page-portfolio .filter-pill:focus-visible{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.1);background:rgba(0,0,0,0.04);outline:2px solid rgba(0,0,0,0.08);outline-offset:2px}
.page-portfolio .filter-pill.is-active{background:rgba(0,0,0,0.06);color:#111;border-color:rgba(0,0,0,0.18);box-shadow:0 6px 16px rgba(0,0,0,0.10)}
.page-portfolio .portfolio-projects{margin: clamp(2.5rem, 4vw, 3.5rem) 0 2rem}
.page-portfolio .portfolio-projects-head{display:flex;flex-direction:column;gap:.35rem;margin-bottom:clamp(2.5rem, 4vw, 3.5rem);max-width:760px}
.page-portfolio .portfolio-projects-head h2{font-size:clamp(1.8rem,3vw,2.4rem);margin:0;letter-spacing:-.01em}
.page-portfolio .portfolio-projects-head .subtitle{margin:0;opacity:.82;line-height:1.6}
.page-portfolio .portfolio-projects-grid{display:grid;gap:2.5rem;width:100%;max-width:100%;box-sizing:border-box;overflow:visible}
.page-portfolio .portfolio-projects .container{overflow:visible}
.page-portfolio .portfolio-project-pile{display:grid;grid-template-columns:minmax(260px,42vw) minmax(240px,1fr);gap:1.6rem;align-items:center;background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(243,243,243,.9));border-radius:28px;padding:1.85rem 1.75rem 2.1rem;border:1px solid rgba(0,0,0,.05);box-shadow:0 26px 48px rgba(0,0,0,.08);position:relative;z-index:1;overflow:visible;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;max-width:100%;box-sizing:border-box}
.page-portfolio .portfolio-project-pile::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 20%, rgba(255,255,255,.6), transparent 45%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.page-portfolio .portfolio-project-pile:hover{transform:translateY(-6px);box-shadow:0 34px 62px rgba(0,0,0,.12);border-color:rgba(0,0,0,.08)}
.page-portfolio .portfolio-project-pile:hover::after{opacity:1}
.page-portfolio .portfolio-project-pile.is-hidden{display:none}
.page-portfolio .project-stack{--stack-pad:clamp(.5rem,1.2vw,.85rem);position:relative;width:100%;max-width:420px;aspect-ratio:3/4;min-height:clamp(240px,44vw,380px);height:auto;margin:0 auto 1.35rem auto;box-sizing:border-box;overflow:visible;border-radius:20px;padding:var(--stack-pad)}
.page-portfolio .ldm-mobile-clipper{overflow:visible}
@media (max-width: 768px){
  .page-portfolio .ldm-mobile-clipper{overflow-x:hidden;overflow-y:visible}
  @supports not (overflow: clip) {
    .page-portfolio .ldm-mobile-clipper{overflow-x:hidden;overflow-y:visible}
  }
}
.page-portfolio .project-stack::before{content:"";position:absolute;inset:calc(var(--stack-pad) * 0.4) calc(var(--stack-pad) * 0.6);border-radius:18px;background:linear-gradient(135deg, #ffffff, #f6f6f6);border:1px solid rgba(0,0,0,.04);box-shadow:0 14px 30px rgba(0,0,0,.08);transform:translate(12px,-12px) rotate(2.5deg);z-index:0;pointer-events:none}
.page-portfolio .project-stack__item{position:absolute;inset:var(--stack-pad);display:flex;justify-content:center;align-items:center;transform:translate(calc(var(--stack-index)*6px),calc(var(--stack-index)*-6px)) rotate(calc(var(--stack-index)*1.7deg)) scale(1);transition:transform .3s ease,filter .3s ease}
.page-portfolio .project-stack__item:nth-child(odd){transform:translate(calc(var(--stack-index)*6px),calc(var(--stack-index)*-6px)) rotate(calc(var(--stack-index)*-1.7deg)) scale(1)}
.page-portfolio .portfolio-project-pile:hover .project-stack__item{transform:translate(calc(var(--stack-index)*6px),calc(var(--stack-index)*-6px)) rotate(calc(var(--stack-index)*1.7deg)) scale(1.03);filter:drop-shadow(0 16px 32px rgba(0,0,0,.2))}
.page-portfolio .portfolio-projects .container{overflow:visible}
.page-portfolio .project-stack-link .ea-pola,.page-portfolio .project-stack-link .ea-pola *{pointer-events:none}
.page-portfolio .project-stack-info{display:flex;flex-direction:column;gap:.45rem;position:relative;z-index:1}
.page-portfolio .project-stack-theme{font-size:.78rem;text-transform:uppercase;letter-spacing:.32em;color:#777;margin:0}
.page-portfolio .project-stack-info h3{margin:0;font-size:1.4rem;letter-spacing:-.01em}
.page-portfolio .project-stack-meta{margin:0;font-size:.85rem;letter-spacing:.25em;text-transform:uppercase;color:#6d6d6d}
.page-portfolio .project-stack-excerpt{margin:0;opacity:.9;line-height:1.6}
.page-portfolio .project-stack-cta{margin-top:.25rem;font-weight:600;text-decoration:none;color:#000;align-self:flex-start}
.project-highlights-meta p {max-width:32rem;margin-bottom:1rem;line-height:1.6}
.project-highlights-meta .muted {font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.project-highlights-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.btn-link {display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem;border-radius:999px;border:1px solid rgba(0,0,0,0.4);background:rgba(255,255,255,0.9);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.btn-link:hover,.btn-link:focus-visible {transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,0.12)}
.highlight-card {border-radius:22px;overflow:hidden;position:relative;background:#fff;border:1px solid rgba(0,0,0,0.08);display:flex;flex-direction:column;min-height:100%;box-shadow:0 18px 40px rgba(0,0,0,0.1)}
.highlight-card a {color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%}
.highlight-card img {width:100%;height:220px;object-fit:cover;display:block;filter:saturate(1.1)}
.hero-placeholder {width:100%;height:220px;background:linear-gradient(180deg,#ddd,#bfbfbf)}
.highlight-card-body {padding:1rem 1.2rem 1.3rem;flex:1;display:flex;flex-direction:column;gap:.4rem}
.highlight-card-meta .tag {font-size:.75rem;text-transform:uppercase;letter-spacing:.28em;color:#6e6e6e}
.highlight-card h3 {font-size:1.1rem;margin:.3rem 0 .15rem}
.highlight-card p {margin:0;flex:1;opacity:.85;line-height:1.4}
.highlight-card .cta {font-weight:600;margin-top:.5rem;color:#000}
@media (max-width:1000px){
  .project-highlights-inner{grid-template-columns:1fr}
  .highlight-card img,.hero-placeholder{height:200px}
}
@media (max-width:860px){
  .page-portfolio .portfolio-project-pile{grid-template-columns:1fr;gap:1.1rem;padding:1.5rem 1.25rem 1.85rem}
  .page-portfolio .project-stack{width:94%;max-width:360px;aspect-ratio:3/4;min-height:clamp(210px,60vw,340px);margin-bottom:1.1rem}
}
@media (max-width:640px){
  .page-portfolio .hero-inner{padding:1.1rem 1rem}
  .page-portfolio .filters-inner{flex-direction:column;align-items:flex-start;gap:.75rem}
  .page-portfolio .filters-pills{width:100%;gap:.5rem}
  .page-portfolio .filter-pill{flex:1 1 140px;text-align:center}
  .page-portfolio .portfolio-projects-grid{gap:1.75rem}
  .page-portfolio .portfolio-projects .container{padding-inline:0;overflow:visible}
  .page-portfolio .portfolio-projects{padding-inline:max(16px, var(--portfolio-shadow-reach, 28px))}
  .page-portfolio .portfolio-projects .ldm-mobile-clipper{padding-inline:max(12px, calc(var(--portfolio-shadow-reach, 28px) * 0.75));overflow:visible;max-width:100%;box-sizing:border-box}
  .page-portfolio #projects-grid{width:100%}
  .page-portfolio .portfolio-project-pile{padding:1.35rem 1rem 1.75rem}
  .page-portfolio .project-stack{width:96%;max-width:340px;aspect-ratio:3/4;min-height:clamp(190px,68vw,320px);margin-bottom:0.95rem}
}

/* Portfolio-only: simplify stack visuals (no polaroid frame, just photos) */
.page-portfolio .project-stack__item .ea-pola{position:relative;display:block;left:auto;bottom:auto;width:100%;height:100%}
.page-portfolio .ea-pola--stack .ea-pola-card{background:transparent;padding:0;border-radius:0;box-shadow:0 18px 38px rgba(0,0,0,.18)}
.page-portfolio .ea-pola--stack .ea-pola-card::before,
.page-portfolio .ea-pola--stack .ea-pola-card::after{display:none}
.page-portfolio .ea-pola--stack .ea-pola-img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.page-portfolio .ea-pola--stack .ea-pola-cap{display:none}
.page-template-page-portfolio body,
.page-template-page-portfolio{
  overflow-x: visible;
}

/* Extra mobile fixes to avoid hero overflow */
@media (max-width: 640px) {
  .page-portfolio .hero {
    margin: 0 0 1rem;
    overflow: hidden;
  }
  .page-portfolio .hero-inner {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 1rem;
  }
  .page-portfolio .hero-visual,
  .page-portfolio .hero-visual .banner-full {
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
  }
  .page-portfolio .hero-visual-note {
    width: 100%;
    box-sizing: border-box;
  }
  .page-portfolio .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
}