/* Maksh Architects — portfolio listing (luxury-portfolio.html) and project pages (projects/*.html).
   Same palette and type as the rest of the site: #000 / #fff, sand #E6D6B8, bronze #A19681, Jost. */

*{box-sizing:border-box}
body{margin:0;background:#000;color:#fff;font-family:"Jost","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#fff;text-decoration:none}
a:hover{color:#fff;opacity:.6}
::selection{background:#E6D6B8;color:#000}
.hv-gold-link:hover{color:#E6D6B8}
@media (max-width:767px){.desktop-nav-links{display:none !important}}
.pj-wrap{max-width:1680px;margin:0 auto;padding:0 clamp(20px,5vw,80px)}
.pj-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#A19681}

/* ---------- Listing ---------- */
.lp-filters{display:flex;flex-wrap:wrap;gap:14px 24px}
.lp-filter{appearance:none;font-family:inherit;cursor:pointer;background:none;border:none;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:0 0 6px;border-bottom:1px solid transparent;color:rgba(255,255,255,.45);transition:color 200ms,border-color 200ms}
.lp-filter:hover{color:#fff}
.lp-filter[aria-pressed="true"]{border-bottom-color:#A19681;color:#fff}
.lp-filter:focus-visible,.lp-card:focus-visible,.pj-gal-item:focus-visible,.pj-nav a:focus-visible,.pj-lb button:focus-visible{outline:1px solid #E6D6B8;outline-offset:4px}
.lp-count{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:18px}
.lp-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px);align-items:start}
.lp-col{display:flex;flex-direction:column;gap:clamp(48px,6vw,72px);min-width:0}
.lp-col:nth-child(2){margin-top:clamp(56px,7vw,88px)}
.lp-col:nth-child(3){margin-top:clamp(24px,3vw,40px)}
.lp-col:empty{display:none}
/* site.js deals the cards into as many columns as are shown here (3 / 2 / 1);
   without it the three columns simply stack, so nothing is ever hidden */
@media (min-width:951px) and (max-width:1200px){.lp-cols{grid-template-columns:1fr 1fr}.lp-col:nth-child(3){margin-top:0}}
@media (max-width:950px){.lp-cols{grid-template-columns:1fr;row-gap:clamp(40px,8vw,56px)}.lp-col{gap:clamp(40px,8vw,56px)}.lp-col:nth-child(n+2){margin-top:0}}
.lp-empty{display:none;color:rgba(255,255,255,.5);font-size:14px;padding:40px 0}
.lp-card{position:relative;display:block;color:#fff}
.lp-card:hover{opacity:1}
/* The label is an overlay INSIDE the image frame, padded in from its edges,
   over a soft top gradient so it reads on bright or busy photographs. Long
   titles wrap within the padding; the frame's overflow:hidden is the hard limit. */
.lp-card-frame{overflow:hidden;position:relative;background:#111}
.lp-card-overlay{position:absolute;top:0;left:0;right:0;z-index:2;pointer-events:none;
  padding:clamp(16px,2vw,26px) clamp(16px,2vw,26px) clamp(40px,4.5vw,64px);
  background:radial-gradient(130% 120% at 0% 0%,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,0) 72%),linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%)}
.lp-card-index{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#E6D6B8;margin-bottom:6px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.lp-card-title{font-size:clamp(14px,1.3vw,17px);font-weight:600;letter-spacing:.01em;text-transform:uppercase;color:#fff;margin-bottom:8px;line-height:1.25;overflow-wrap:break-word;text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.45)}
.lp-card-underline{width:34px;height:1px;background:#A19681;transition:width 300ms}
.lp-card-cats{margin-top:10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.lp-card-img{width:100%;height:auto;display:block;transition:transform 600ms cubic-bezier(.16,1,.3,1)}
.lp-card:hover .lp-card-underline{width:56px}
.lp-card:hover .lp-card-img{transform:scale(1.04)}
/* scroll slide-in: site.js writes transform/opacity; this is only the state before its first frame */
.slide-anim .lp-card-frame,.slide-anim .lp-card-overlay{opacity:0;will-change:transform,opacity}
.slide-clip{overflow-x:hidden;overflow-x:clip}

/* ---------- Project page: hero ---------- */
.pj-hero{position:relative;height:clamp(560px,86vh,860px);min-height:480px;overflow:hidden;display:flex;align-items:flex-end;background:#111}
.pj-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pj-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.85) 100%)}
.pj-hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(40px,7vw,88px)}
.pj-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:28px}
.pj-crumbs a{color:rgba(255,255,255,.7)}
.pj-crumbs [aria-current]{color:#E6D6B8}
.pj-cats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.pj-cat{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#000;background:#E6D6B8;padding:6px 12px}
.pj-title{margin:0;font-weight:200;font-size:clamp(42px,7.4vw,104px);line-height:1;letter-spacing:-.02em;max-width:16ch}
.pj-tagline{margin:22px 0 0;font-weight:300;font-size:clamp(17px,1.7vw,22px);line-height:1.45;color:rgba(255,255,255,.82);max-width:46ch}

/* ---------- Project page: overview ---------- */
.pj-overview{background:#0b0b0b;border-bottom:1px solid rgba(255,255,255,.1)}
.pj-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:0}
.pj-meta div{padding:clamp(24px,3vw,36px) clamp(16px,2vw,28px) clamp(24px,3vw,36px) 0;border-right:1px solid rgba(255,255,255,.1)}
.pj-meta div+div{padding-left:clamp(16px,2vw,28px)}
.pj-meta div:last-child{border-right:none}
.pj-meta dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.pj-meta dd{margin:0;font-size:clamp(17px,1.5vw,20px);font-weight:300;color:#fff}
@media (max-width:640px){
  .pj-meta{grid-template-columns:1fr 1fr}
  .pj-meta div,.pj-meta div+div{padding:20px 12px 20px 0;border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
}

/* ---------- Project page: description ---------- */
.pj-desc{background:#050505;padding:clamp(72px,10vw,140px) 0}
.pj-desc-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,120px);align-items:start}
.pj-statement{margin:0;font-weight:200;font-size:clamp(30px,3.6vw,52px);line-height:1.12;letter-spacing:-.015em;color:#F4EDE1;position:sticky;top:120px}
.pj-body{max-width:640px}
.pj-body h2{margin:0 0 22px;font-weight:300;font-size:clamp(24px,2.4vw,32px);line-height:1.2;color:#fff}
.pj-body * + h2{margin-top:clamp(40px,5vw,56px)}
.pj-body p{margin:0 0 20px;font-size:17px;line-height:1.72;color:rgba(255,255,255,.66)}
.pj-body ul{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:14px}
.pj-body li{position:relative;padding-left:22px;font-size:17px;line-height:1.65;color:rgba(255,255,255,.66)}
.pj-body li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:#A19681}
.pj-body li strong{color:#fff;font-weight:500}
@media (max-width:900px){.pj-desc-grid{grid-template-columns:1fr}.pj-statement{position:static}}

/* ---------- Project page: video ---------- */
.pj-video{background:#050505;padding:0 0 clamp(64px,8vw,110px)}
.pj-video-frame{position:relative;aspect-ratio:16/9;background:#111}
.pj-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Project page: gallery ---------- */
.pj-gallery{background:#050505;padding:0 0 clamp(72px,9vw,120px)}
.pj-gal-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:clamp(40px,5vw,64px);border-top:1px solid rgba(255,255,255,.12);margin-bottom:clamp(28px,4vw,48px)}
.pj-gal-head h2{margin:0;font-weight:200;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.01em}
.pj-gal-count{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.pj-gal{display:flex;flex-direction:column;gap:8px}
.pj-gal-row{display:flex;gap:8px}
.pj-gal-item{display:block;position:relative;overflow:hidden;background:#111;padding:0;border:0;cursor:zoom-in;min-width:0}
.pj-gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 700ms cubic-bezier(.16,1,.3,1)}
.pj-gal-item:hover img{transform:scale(1.03)}
@media (max-width:700px){.pj-gal-row{flex-direction:column}.pj-gal-item{flex:none !important;width:100%}}
/* image reveal: added by site.js, removed once seen */
.reveal-anim .pj-gal-item{opacity:0;transform:translate3d(0,28px,0);transition:opacity 900ms cubic-bezier(.22,1,.36,1),transform 1000ms cubic-bezier(.22,1,.36,1)}
.reveal-anim .pj-gal-item.is-in{opacity:1;transform:none}

/* ---------- Project page: previous / next ---------- */
.pj-nav{background:#000;border-top:1px solid rgba(255,255,255,.12)}
.pj-nav-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}
.pj-nav a{display:flex;align-items:center;gap:20px;padding:clamp(28px,4vw,48px) 0;color:#fff;min-width:0}
.pj-nav a:hover{opacity:1}
.pj-nav a:hover .pj-nav-name{color:#E6D6B8}
.pj-nav-next{justify-content:flex-end;text-align:right}
.pj-nav-thumb{width:clamp(72px,9vw,128px);aspect-ratio:4/3;object-fit:cover;flex:none;display:block}
.pj-nav-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px}
.pj-nav-name{font-size:clamp(17px,1.8vw,24px);font-weight:300;transition:color 200ms;overflow-wrap:anywhere}
.pj-nav-back{justify-content:center;padding:0 clamp(16px,3vw,48px) !important;font-size:11px;letter-spacing:.18em;text-transform:uppercase;border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12);color:#E6D6B8 !important;text-align:center}
@media (max-width:700px){
  .pj-nav-grid{grid-template-columns:1fr 1fr}
  .pj-nav-back{grid-column:1 / -1;grid-row:1;border:0;border-bottom:1px solid rgba(255,255,255,.12);padding:22px 0 !important}
  .pj-nav-thumb{display:none}
  .pj-nav-next{border-left:1px solid rgba(255,255,255,.12);padding-left:16px !important}
}

/* ---------- Project page: lightbox ---------- */
.pj-lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.96);display:none;align-items:center;justify-content:center}
.pj-lb.is-open{display:flex}
.pj-lb img{max-width:calc(100vw - 160px);max-height:calc(100vh - 140px);width:auto;height:auto;display:block;user-select:none}
.pj-lb button{appearance:none;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;width:52px;height:52px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color 200ms}
.pj-lb button:hover{border-color:#E6D6B8}
.pj-lb-close{position:absolute;top:20px;right:20px}
.pj-lb-prev{position:absolute;left:20px;top:50%;transform:translateY(-50%)}
.pj-lb-next{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
.pj-lb-caption{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
@media (max-width:700px){
  .pj-lb img{max-width:100vw;max-height:calc(100vh - 160px)}
  .pj-lb-prev,.pj-lb-next{top:auto;bottom:56px;transform:none}
}