/* =========================================================
   EDITORIAL PROJECTS V5 — project essays
   ========================================================= */
.projects-v5 main { background:#090909; }
.projects-intro {
  min-height:74vh;
  padding:128px 7vw 78px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(200,169,110,.07), transparent 24%),
    linear-gradient(180deg,#090909 0%,#0c0c0c 100%);
}
.projects-intro:before {
  content:"";
  position:absolute;
  z-index:0;
  width:36vw;
  height:64%;
  right:14vw;
  top:18%;
  background:url('../images/street/Bangkok-1.jpg') center/cover no-repeat;
  opacity:.10;
  filter:grayscale(.35) contrast(1.05);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.75) 42%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.75) 42%,#000 100%);
}
.projects-intro:after {
  content:"";
  position:absolute;
  width:42vw;height:42vw;
  right:-13vw;bottom:-20vw;
  border:1px solid rgba(241,237,230,.08);
  border-radius:50%;
}
.projects-intro > * { position:relative; z-index:1; }
.projects-intro-kicker {
  position:absolute; top:132px; right:7vw;
  display:flex; align-items:center; gap:12px;
  font-size:9px; letter-spacing:.2em; color:rgba(241,237,230,.55);
}
.projects-intro-kicker i { width:58px; height:1px; background:var(--accent); opacity:.7; }
.projects-intro h1 {
  margin:18px 0 26px;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(68px,10vw,150px);
  line-height:.84; letter-spacing:-.055em;
}
.projects-intro h1 em { color:var(--editorial-cream); }
.projects-intro-copy {
  max-width:470px; margin:0;
  color:rgba(245,242,238,.57);
  font-size:14px; line-height:1.9;
}
.projects-scroll {
  position:absolute; right:7vw; bottom:52px;
  display:flex; align-items:center; gap:14px;
  color:rgba(245,242,238,.6); text-decoration:none;
  font-size:8px; text-transform:uppercase; letter-spacing:.24em;
}
.projects-scroll b { color:var(--accent); font-size:18px; font-weight:300; }
.projects-index {
  position:sticky; top:var(--projects-nav-height, 82px); z-index:8;
  display:flex; justify-content:center; gap:36px;
  padding:16px 30px;
  background:rgba(9,9,9,.94);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(241,237,230,.06);
  border-bottom:1px solid rgba(241,237,230,.08);
}
.projects-index a {
  color:rgba(245,242,238,.46); text-decoration:none;
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  transition:color .3s ease;
}
.projects-index a span { color:var(--accent); margin-right:8px; }
.projects-index a:hover,.projects-index a.active { color:var(--white); }

.project-feature {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);
  grid-template-rows:minmax(0,1fr) 82px;
  min-height:calc(100svh - var(--projects-index-height, 50px));
  position:relative;
  padding:0 5.5vw;
  gap:0 5vw;
}
.project-feature--dark { background:#0b0b0b; }
.project-feature--light { background:#efebe4; color:#111; }
.project-feature-image {
  position:relative;
  align-self:center;
  height:min(68vh,700px); max-height:calc(100svh - 190px);
  overflow:hidden;
}
.project-feature-image img {
  width:100%; height:100%; object-fit:cover;
  display:block;
  filter:brightness(.88) saturate(.9);
  transition:transform 1.6s cubic-bezier(.2,.6,.2,1), filter 1s ease;
}
.project-feature:hover .project-feature-image img {
  transform:scale(1.025); filter:brightness(.96) saturate(.96);
}
.project-feature-counter {
  position:absolute; left:24px; bottom:20px;
  color:rgba(255,255,255,.8);
  font-family:var(--serif); font-size:16px;
}
.project-feature-counter span { color:rgba(255,255,255,.35); margin:0 4px; }
.project-feature-copy {
  align-self:center;
  padding:30px 0;
}
.project-feature-copy .section-label { margin-bottom:22px; }
.project-feature-copy h2 {
  font-family:var(--serif); font-weight:300;
  font-size:clamp(44px,4.35vw,66px);
  line-height:.93; letter-spacing:-.035em;
  margin:0 0 30px;
}
.project-feature-copy h2 em {
  color:var(--editorial-cream); font-style:italic;
  font-size:.78em;
  line-height:1;
  white-space:nowrap;
}
.project-feature--light .project-feature-copy h2 em { color:#8f7449; }
.project-lead {
  font-family:var(--serif);
  font-size:clamp(18px,1.45vw,23px);
  line-height:1.2;
  margin:0 0 25px;
  color:rgba(245,242,238,.82);
}
.project-feature--light .project-lead { color:rgba(15,15,15,.75); }
.project-body {
  max-width:480px;
  font-size:13px; line-height:1.85;
  color:rgba(245,242,238,.52);
  margin:0 0 28px;
}
.project-feature--light .project-body { color:rgba(15,15,15,.58); }
.project-meta {
  display:flex; flex-wrap:wrap; gap:8px 20px;
  padding-top:20px; margin-bottom:28px;
  border-top:1px solid rgba(245,242,238,.12);
  color:rgba(245,242,238,.42);
  font-size:9px; letter-spacing:.13em; text-transform:uppercase;
}
.project-feature--light .project-meta { border-color:rgba(15,15,15,.13); color:rgba(15,15,15,.48); }
.project-open {
  display:inline-flex; align-items:center; gap:16px;
  color:var(--accent); text-decoration:none;
  text-transform:uppercase; letter-spacing:.18em;
  font-size:9px;
  padding-bottom:7px;
  border-bottom:1px solid rgba(200,169,110,.45);
  transition:gap .35s ease,border-color .35s ease;
}
.project-open:hover { gap:24px; border-color:var(--accent); }
.project-open b { font-size:16px; font-weight:300; }

.project-strip {
  grid-column:1 / -1;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:10px; align-self:end; padding-bottom:38px;
}
.project-strip button {
  padding:0; border:0; background:none; cursor:pointer;
  height:70px; overflow:hidden; position:relative;
}
.project-strip img {
  width:100%;height:100%;object-fit:cover;
  opacity:.55; filter:grayscale(.2);
  transition:opacity .35s ease, transform .7s ease;
}
.project-strip button:hover img { opacity:1; transform:scale(1.05); }
.project-strip button:after {
  content:""; position:absolute; inset:0;
  border:1px solid rgba(245,242,238,.08);
  transition:border-color .3s ease;
}
.project-strip button:hover:after { border-color:rgba(200,169,110,.7); }

.project-feature--light .project-strip img { opacity:.62; }
.project-feature--light .project-strip button:after { border-color:rgba(15,15,15,.08); }
.projects-v5 footer { margin-top:0; }

@media(max-width:900px) {
  .projects-intro { min-height:72vh; padding:130px 24px 70px; }
  .projects-intro-kicker { top:120px; right:24px; }
  .projects-scroll { right:24px; bottom:32px; }
  .projects-index { top:var(--projects-nav-height, 60px); justify-content:flex-start; overflow-x:auto; gap:26px; white-space:nowrap; }
  .project-feature {
    display:flex; flex-direction:column;
    min-height:0; padding:70px 24px 50px; gap:0;
  }
  .project-feature-image { height:58vw; min-height:300px; max-height:560px; order:0; }
  .project-feature-copy { order:1; padding:45px 0 35px; }
  .project-strip { order:2; width:100%; padding-bottom:0; }
}
@media(max-width:560px) {
  .projects-intro h1 { font-size:clamp(60px,17vw,92px); }
  .projects-intro-copy { font-size:13px; max-width:330px; }
  .projects-intro-kicker { top:112px; }
  .projects-intro { padding-top:170px; }
  .project-feature-image { min-height:240px; height:70vw; }
  .project-feature-copy h2 { font-size:clamp(42px,11vw,60px); }
  .project-feature-copy h2 em { white-space:normal; }
  .project-lead { font-size:21px; }
  .project-strip { gap:6px; }
  .project-strip button { height:58px; }
}