/* =====================================================
   PROJECTS PAGE — Mainland
   Built on the homepage design system (style.css)
   Minimal, modern, real-estate portfolio.
   ===================================================== */

.menu a.active{opacity:1;color:var(--gold)}

/* ---------- HERO ---------- */
.pj-hero{padding-top:clamp(150px,16vw,210px);padding-bottom:clamp(40px,5vw,72px);position:relative;overflow:hidden}
.pj-hero::before{
  content:"PORTFOLIO";position:absolute;right:-18px;top:118px;
  font-family:"Bebas Neue";font-size:clamp(5.5rem,14vw,15rem);
  color:rgba(22,21,15,.035);white-space:nowrap;line-height:1;pointer-events:none;letter-spacing:.05em;
}
.pj-hero-top{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,90px);
  align-items:flex-end;position:relative;z-index:2;
}
.pj-hero .kicker{margin-bottom:26px}
.pj-hero h1{font-size:clamp(3.2rem,7vw,6.4rem);font-weight:400;letter-spacing:.03em;line-height:.92}
.pj-hero h1 .accent{
  display:block;font-family:"DM Sans",sans-serif;font-style:italic;font-weight:300;
  color:var(--gold);letter-spacing:-.01em;font-size:.46em;line-height:1.1;margin-top:.16em;
}
.pj-hero-lead p{color:var(--muted);font-size:1.1rem;line-height:1.78;max-width:420px;margin:0}

/* ---------- STAT BAND (dark) ---------- */
.pj-stats{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.pj-stats::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(184,147,74,.5),transparent)}
.pj-stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.pj-stat{padding:clamp(34px,4vw,52px) clamp(20px,2.4vw,34px);border-right:1px solid rgba(255,255,255,.1)}
.pj-stat:last-child{border-right:none}
.pj-stat .n{font-family:"Bebas Neue";font-size:clamp(2.6rem,3.8vw,4rem);line-height:1;letter-spacing:.04em;color:var(--gold)}
.pj-stat .l{font-size:.84rem;color:rgba(255,255,255,.55);margin-top:12px;max-width:220px;line-height:1.5}

/* ---------- PORTFOLIO + TABS ---------- */
.pj-portfolio{background:var(--paper)}
.pj-tabs{display:flex;gap:6px;justify-content:center;margin-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.pj-tab{
  background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:16px 26px;margin-bottom:-1px;transition:.35s var(--ease);
}
.pj-tab:hover{color:var(--ink)}
.pj-tab.active{color:var(--ink);border-bottom-color:var(--gold)}
.pj-tab .ct{font-family:"Bebas Neue";font-size:.9rem;color:var(--gold);margin-left:8px;letter-spacing:.06em}
.pj-panel{display:none}
.pj-panel.active{display:block;animation:pjFade .6s var(--ease)}
@keyframes pjFade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- ONGOING CARDS ---------- */
.pj-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,30px)}
.pj-card{
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);
  transition:.5s var(--ease);display:flex;flex-direction:column;
}
.pj-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2)}
.pj-media{position:relative;height:clamp(230px,25vw,310px);overflow:hidden;background:#1a1916}
.pj-media img{width:100%;height:100%;object-fit:cover;transition:1.2s var(--ease)}
.pj-card:hover .pj-media img{transform:scale(1.05)}
.pj-status{
  position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:7px;
  font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);border:1px solid rgba(184,147,74,.35);
  padding:.32rem .8rem;border-radius:100px;
}
.pj-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.pj-body{padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;flex:1}
.pj-body h3{font-size:clamp(1.7rem,2.4vw,2.3rem);letter-spacing:.03em;margin-bottom:14px}
.pj-desc{font-size:.94rem;color:var(--muted);line-height:1.7;margin:0}
.pj-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin-top:26px;padding-top:24px;
  border-top:1px solid var(--line);
}
.pj-meta .ml{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pj-meta .mv{font-weight:600;font-size:.95rem;color:var(--ink);letter-spacing:.01em}
.pj-meta .mv a{color:var(--gold);border-bottom:1px solid transparent;transition:.3s}
.pj-meta .mv a:hover{border-bottom-color:var(--gold)}

/* ---------- COMPLETED CARDS ---------- */
.pjc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.pjc-card{
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);
  transition:.5s var(--ease);display:flex;flex-direction:column;
}
.pjc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2)}
.pjc-media{position:relative;height:160px;overflow:hidden;display:flex;align-items:flex-end;padding:0}
.pjc-media .water{
  position:absolute;right:8px;top:-14px;font-family:"Bebas Neue";font-size:5.6rem;line-height:1;
  color:rgba(255,255,255,.18);letter-spacing:.02em;
}
.pjc-tag{
  position:relative;z-index:2;font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.28);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);
  padding:.3rem .7rem;border-radius:100px;
}
.pjc-body{padding:24px;display:flex;flex-direction:column;flex:1}
.pjc-loc{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.pjc-name{font-family:"Bebas Neue";font-size:1.75rem;letter-spacing:.03em;margin-bottom:11px;line-height:1}
.pjc-desc{font-size:.88rem;color:var(--muted);line-height:1.65;margin:0}
.pjc-with{font-size:.78rem;color:var(--muted);font-style:italic;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* placeholder media tones */
.tone-a{background:linear-gradient(135deg,#caa869,#a07e3f)}
.tone-b{background:linear-gradient(135deg,#8a9a78,#62755a)}
.tone-c{background:linear-gradient(135deg,#bcab9c,#94806f)}
.tone-d{background:linear-gradient(135deg,#3a3729,#16150f)}

/* ---------- ERAS TIMELINE (dark) ---------- */
.pj-eras{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.pj-eras::before{
  content:"1975";position:absolute;left:-16px;bottom:-30px;
  font-family:"Bebas Neue";font-size:clamp(8rem,20vw,24rem);
  color:rgba(255,255,255,.03);line-height:1;pointer-events:none;letter-spacing:.04em;
}
.pj-eras .kicker{color:rgba(255,255,255,.5)}
.pj-eras .kicker .dash{background:rgba(255,255,255,.4)}
.eras-head{margin-bottom:clamp(40px,5vw,64px);position:relative;z-index:2}
.eras-head h2{font-size:clamp(2.4rem,3.6vw,3.6rem);color:var(--paper);margin-top:16px}
.eras-head h2 em{font-style:italic;color:var(--gold)}
.era-track{
  display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid rgba(255,255,255,.14);
  position:relative;z-index:2;
}
.era{padding:30px 22px 8px 0;border-right:1px solid rgba(255,255,255,.1);transition:.4s var(--ease)}
.era:last-child{border-right:none}
.era:hover{background:rgba(255,255,255,.02)}
.era .yr{font-family:"Bebas Neue";font-size:1.5rem;letter-spacing:.05em;color:var(--gold);line-height:1}
.era .ct{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:10px 0 16px}
.era ul{list-style:none;padding:0;margin:0}
.era li{font-size:.84rem;color:rgba(255,255,255,.62);margin-bottom:9px;padding-left:14px;position:relative;line-height:1.5}
.era li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--gold)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:991px){
  .pj-hero-top{grid-template-columns:1fr;gap:28px;align-items:start}
  .pj-hero-lead p{max-width:560px}
  .pj-stats-grid{grid-template-columns:1fr 1fr}
  .pj-stat:nth-child(2){border-right:none}
  .pj-stat:nth-child(1),.pj-stat:nth-child(2){border-bottom:1px solid rgba(255,255,255,.1)}
  .pj-grid{grid-template-columns:1fr}
  .pjc-grid{grid-template-columns:1fr 1fr}
  .era-track{grid-template-columns:1fr 1fr 1fr}
  .era{border-bottom:1px solid rgba(255,255,255,.1)}
  .era:nth-child(3n){border-right:none}
}
@media(max-width:640px){
  .pj-hero::before{display:none}
  .pj-stats-grid{grid-template-columns:1fr}
  .pj-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
  .pj-stat:last-child{border-bottom:none}
  .pjc-grid{grid-template-columns:1fr}
  .pj-meta{grid-template-columns:1fr 1fr}
  .era-track{grid-template-columns:1fr 1fr}
  .era:nth-child(3n){border-right:1px solid rgba(255,255,255,.1)}
  .era:nth-child(2n){border-right:none}
  .pj-tabs{gap:0}
  .pj-tab{padding:14px 16px;font-size:.74rem}
}
/* =====================================================
   REDESIGN V3 — A PROJECT FOR EVERY ERA
   Homepage look & feel: editorial, minimal, white space,
   strong Bebas heading, fine borders, muted gold accents.
   Paste this block at the END of project.css
   ===================================================== */

.pj-eras{
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.9)),
    var(--paper);
  color:var(--ink);
  position:relative;
  overflow:hidden;
  padding:clamp(86px,9vw,132px) 0 clamp(82px,8vw,120px);
  border-top:1px solid rgba(22,21,15,.08);
  border-bottom:1px solid rgba(22,21,15,.08);
}

.pj-eras::before{
  content:"ERAS";
  position:absolute;
  right:-.08em;
  top:clamp(22px,4vw,58px);
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(7rem,18vw,21rem);
  line-height:.75;
  letter-spacing:.04em;
  color:rgba(22,21,15,.035);
  pointer-events:none;
  z-index:0;
}

.pj-eras::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(184,147,74,.45), transparent);
  pointer-events:none;
}

.pj-eras .wrap{position:relative;z-index:1}

.pj-eras .kicker{
  color:rgba(22,21,15,.52);
  margin:0;
}

.pj-eras .kicker .dash{background:var(--gold)}

.eras-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(180px,.72fr) minmax(320px,1.28fr);
  gap:clamp(26px,5vw,84px);
  align-items:end;
  margin:0 0 clamp(34px,4.6vw,62px);
  padding-bottom:clamp(24px,3vw,38px);
  border-bottom:1px solid rgba(22,21,15,.11);
}

.eras-head h2{
  margin:0;
  max-width:760px;
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(2.8rem,5.4vw,6.2rem);
  font-weight:400;
  line-height:.88;
  letter-spacing:.025em;
  color:var(--ink);
  text-transform:uppercase;
}

.eras-head h2::after{
  content:"";
  display:inline-block;
  width:.16em;
  height:.16em;
  margin-left:.12em;
  border-radius:50%;
  background:var(--gold);
  vertical-align:baseline;
}

.era-track{
  counter-reset:era;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,22px);
  border-top:0;
  position:relative;
  z-index:2;
}

.era-track::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:linear-gradient(90deg, rgba(22,21,15,.06), rgba(184,147,74,.36), rgba(22,21,15,.06));
  transform:translateY(-50%);
  pointer-events:none;
  z-index:-1;
}

.era{
  counter-increment:era;
  min-height:clamp(230px,20vw,280px);
  padding:clamp(22px,2.4vw,32px);
  border:1px solid rgba(22,21,15,.11);
  border-radius:0;
  background:rgba(255,255,255,.58);
  box-shadow:none;
  position:relative;
  overflow:hidden;
  transition:transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}

.era:nth-child(1),
.era:nth-child(2),
.era:nth-child(3){grid-column:span 4}

.era:nth-child(4){grid-column:span 5}
.era:nth-child(5){grid-column:span 4}
.era:nth-child(6){grid-column:span 3}

.era::before{
  content:counter(era, decimal-leading-zero);
  position:absolute;
  right:clamp(18px,2vw,28px);
  bottom:clamp(12px,1.4vw,20px);
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(4.6rem,8vw,8.8rem);
  line-height:.8;
  letter-spacing:.03em;
  color:rgba(22,21,15,.04);
  pointer-events:none;
}

.era::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:100%;
  background:var(--gold);
  transform:scaleY(.16);
  transform-origin:top;
  transition:transform .45s var(--ease);
}

.era:hover{
  transform:translateY(-5px);
  border-color:rgba(184,147,74,.38);
  background:rgba(255,255,255,.86);
}

.era:hover::after{transform:scaleY(1)}

.era:nth-child(6){
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

.era:nth-child(6)::before{color:rgba(255,255,255,.055)}
.era:nth-child(6):hover{background:var(--ink);border-color:rgba(184,147,74,.5)}

.era .yr{
  display:block;
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(2.2rem,3.2vw,3.5rem);
  line-height:.9;
  letter-spacing:.035em;
  color:var(--ink);
  margin:0 0 12px;
}

.era:nth-child(6) .yr{color:var(--paper)}

.era .ct{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin:0 0 clamp(22px,2.4vw,32px);
  padding:7px 11px 6px;
  border:1px solid rgba(184,147,74,.38);
  border-radius:999px;
  background:rgba(184,147,74,.06);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.18em;
  line-height:1;
  text-transform:uppercase;
  color:var(--gold);
}

.era ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
  position:relative;
  z-index:1;
}

.era li{
  margin:0;
  padding:0 0 0 18px;
  position:relative;
  font-size:.88rem;
  line-height:1.45;
  color:rgba(22,21,15,.64);
}

.era li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:8px;
  height:1px;
  background:var(--gold);
}

.era:nth-child(6) li{color:rgba(255,255,255,.66)}

@media(max-width:991px){
  .eras-head{
    grid-template-columns:1fr;
    gap:18px;
    align-items:start;
  }

  .era-track{
    grid-template-columns:repeat(2,1fr);
  }

  .era-track::before{display:none}

  .era,
  .era:nth-child(1),
  .era:nth-child(2),
  .era:nth-child(3),
  .era:nth-child(4),
  .era:nth-child(5),
  .era:nth-child(6){
    grid-column:auto;
    min-height:230px;
    border-right:1px solid rgba(22,21,15,.11);
    border-bottom:1px solid rgba(22,21,15,.11);
  }
}

@media(max-width:640px){
  .pj-eras{
    padding:72px 0 76px;
  }

  .pj-eras::before{
    right:-.12em;
    top:28px;
    font-size:6.8rem;
  }

  .era-track{
    grid-template-columns:1fr;
    gap:12px;
  }

  .era,
  .era:nth-child(1),
  .era:nth-child(2),
  .era:nth-child(3),
  .era:nth-child(4),
  .era:nth-child(5),
  .era:nth-child(6){
    min-height:auto;
    padding:24px 22px;
    border-right:1px solid rgba(22,21,15,.11);
  }

  .era .ct{margin-bottom:20px}
}