/* "Now in progress" cards (projects release 2026-10-11). Palette: design-research/RECOMMENDATION.md "Persepolis Noir".
   Text and layout only: no background image, url(), filter or object-* rule (the photo crop reuses .bdf-ba img).
   The section is [hidden] until the owner publishes an in-progress project. */
.pj-sec{--pj-bg:#0B0A08;--pj-surface:#16130E;--pj-raised:#1F1A13;--pj-gold:#E2B867;--pj-ink:#F3EAD6;--pj-soft:#C4B79C;--pj-hair:rgba(226,184,103,.22);
  padding:clamp(2.5rem,6vw,4.5rem) 0;background:var(--pj-bg);position:relative;z-index:1;border-top:1px solid var(--pj-hair)}
.pj-sec[hidden]{display:none!important}
.pj-sec .bdf-eyebrow{color:var(--pj-gold);display:flex;align-items:center;gap:.6rem}
.pj-sec .bdf-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pj-gold);box-shadow:0 0 0 4px rgba(226,184,103,.16);flex:none}
.pj-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;margin-bottom:clamp(18px,3vw,28px)}
.pj-head .bdf-lede{margin:0;max-width:56ch}
.pj-grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,2.2vw,24px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.pj-card{display:flex;flex-direction:column;background:var(--pj-surface);border:1px solid var(--pj-hair);border-radius:14px;overflow:hidden;transition:border-color .2s,transform .2s}
.pj-card:hover{border-color:rgba(226,184,103,.5);transform:translateY(-3px)}
.pj-photo.bdf-ba{aspect-ratio:3/2;background:var(--pj-raised);touch-action:auto;user-select:auto}
.pj-chip{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:.35rem .7rem;border-radius:999px;
  background:rgba(11,10,8,.82);border:1px solid var(--pj-gold);color:var(--pj-gold);font:600 .72rem/1 var(--bdf-ui);letter-spacing:.14em;text-transform:uppercase}
.pj-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pj-gold)}
.pj-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pj-meta{margin:0;font:600 .74rem/1.3 var(--bdf-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--pj-gold)}
.pj-title{margin:0;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);line-height:1.25;color:var(--pj-ink);letter-spacing:0}
.pj-desc{margin:0;color:var(--pj-soft);font-size:1rem;line-height:1.55}
.pj-start{margin:auto 0 0;padding-top:10px;border-top:1px solid var(--pj-hair);color:var(--pj-soft);font-size:.86rem}
.pj-more{margin:clamp(18px,3vw,26px) 0 0}
.pj-more a{color:var(--pj-gold);font-weight:600;text-decoration:none;border-bottom:1px solid var(--pj-hair);padding:10px 0;display:inline-block}
.pj-more a:hover,.pj-more a:focus-visible{border-bottom-color:var(--pj-gold)}
/* home: compact strip (max 3 cards, horizontal scroll on phones) */
.pj-strip .pj-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){
  .pj-strip .pj-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .pj-strip .pj-card{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.pj-card{transition:none}.pj-card:hover{transform:none}}
@media (forced-colors:active){.pj-chip,.pj-card{border:1px solid CanvasText}}

/* ---- Before & After gallery (projects release, owner-approved scope). Same palette; the photo crop still comes from
   the existing .bdf-ba img rule. Hidden until the owner publishes a finished pair. ---- */
[data-bdf-ba-sec][hidden]{display:none!important}
.bdf-gallery-sec{background:#0B0A08;border-top-color:rgba(226,184,103,.22)}
.bdf-gallery-sec .bdf-eyebrow{color:#E2B867}
.bdf-gallery-sec .bdf-g-item{background:#16130E;border:1px solid rgba(226,184,103,.22);border-radius:14px;transition:border-color .2s}
.bdf-gallery-sec .bdf-g-item:hover{border-color:rgba(226,184,103,.5)}
.bdf-gallery-sec .bdf-g-meta .bdf-h3{font-family:"Fraunces",Georgia,serif;font-weight:600;letter-spacing:0;color:#F3EAD6}
.bdf-gallery-sec .bdf-g-meta .bdf-help{color:#C4B79C}
.bdf-gallery-sec .bdf-ba-handle{background:#E2B867}
.bdf-gallery-sec .bdf-ba-tag{color:#E2B867;border:1px solid rgba(226,184,103,.55);background:rgba(11,10,8,.82)}
.bdf-gallery-sec .bdf-ba:focus-within{outline-color:#E2B867}
/* Side-by-side fallback: server-rendered pairs (no JS) and visitors who prefer reduced motion. */
.bdf-ba.bdf-ba-static{display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:auto!important}
.bdf-ba.bdf-ba-static .bdf-ba-before{position:relative;clip-path:none;order:-1}
.bdf-ba.bdf-ba-static img{position:relative;height:auto;aspect-ratio:4/3}
@media (prefers-reduced-motion:reduce){
  .bdf-gallery-sec .bdf-ba{display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:auto!important}
  .bdf-gallery-sec .bdf-ba .bdf-ba-before{position:relative;clip-path:none;order:-1}
  .bdf-gallery-sec .bdf-ba img{position:relative;height:auto;aspect-ratio:4/3}
  .bdf-gallery-sec .bdf-ba-handle,.bdf-gallery-sec .bdf-ba-range{display:none}
  .bdf-gallery-sec .bdf-g-item{transition:none}
}