/* ============================================================
   THE TOOLKIT — PROJECT STUDY TEMPLATE · AFTERGLOW
   Gradients are escaping light, never paint. Sections dovetail.
   ============================================================ */

.project-page{background:
  linear-gradient(180deg,#F6F1E4 0%,#F4EFDF 46%,#F0E7D2 100%)}
/* header rides fixed here too (2026-07-09): hides going down, returns coming up */

/* grain — plaster, not pixels */
.grain{position:relative}
.grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ---------- opener — full bleed, the threshold ---------- */
.pj-open{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#141F19}
.pj-open img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-open .scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,31,25,.38) 0%,rgba(20,31,25,.02) 36%,rgba(20,31,25,.14) 60%,rgba(20,31,25,.74) 100%)}
.pj-open .inner{
  position:absolute;left:var(--mx);right:var(--mx);bottom:clamp(56px,10vh,110px);color:var(--bone)}
.pj-open .idx{font-size:.6875rem;color:var(--bone);opacity:.75}
.pj-open h1{font-family:var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.2em;text-indent:.2em;
  font-size:clamp(1.7rem,5vw,3.4rem);line-height:1.25;margin-top:18px;color:var(--bone)}
.pj-open .stand{margin-top:22px;font-size:clamp(1.15rem,2.6vw,1.7rem);max-width:24em;color:var(--bone);opacity:.94;text-wrap:balance}
.pj-open .scope{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:clamp(26px,4vh,40px);
  padding-top:18px;border-top:1px solid rgba(236,231,220,.28)}
.pj-open .scope span{font-size:.625rem;color:var(--bone);opacity:.8}

/* ---------- shared section chrome ---------- */
.pj-label{font-size:.6875rem;color:var(--stone);display:block}
.pj-title{font-size:clamp(1.25rem,2.9vw,1.8rem);margin-top:12px}
.pj-copy{max-width:34em;margin-top:20px}
.pj-copy p+p{margin-top:1.2em}

/* ---------- intro: story + facts ---------- */
.pj-intro{padding:clamp(72px,10vw,130px) 0}
.pj-intro .wrap{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,90px)}
@media(min-width:980px){.pj-intro .wrap{grid-template-columns:7fr 4fr}}
.pj-facts{border-top:1px solid var(--hairline);align-self:start}
.pj-facts div{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--hairline)}
.pj-facts dt{font-size:.625rem;color:var(--stone);font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.3em;padding-top:3px}
.pj-facts dd{font-size:.9375rem;line-height:1.7}

/* ---------- the bones — deep forest movement, cove seam above ---------- */
.pj-bones{position:relative;background:linear-gradient(180deg,#141F19 0%,#1C2A22 55%,#233729 100%);color:var(--bone);
  padding:clamp(80px,11vw,150px) 0}
.pj-bones::before{ /* light escaping the joint above */
  content:'';position:absolute;inset-inline:0;top:0;height:110px;pointer-events:none;
  background:radial-gradient(60% 110px at 50% 0,rgba(216,168,85,.20),rgba(216,168,85,0) 74%)}
.pj-bones .pj-label{color:rgba(236,231,220,.55)}
.pj-bones .pj-title{color:var(--bone)}
.pj-bones .pj-copy{color:rgba(236,231,220,.88)}
.pj-phases{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,44px);margin-top:clamp(40px,6vw,64px)}
@media(min-width:880px){
  .pj-phases{grid-template-columns:1fr 1fr}
  .pj-phases figure:nth-child(2){transform:translateY(clamp(24px,4vw,56px))}
}
.pj-phases figure{margin:0}
.pj-phases img{width:100%;height:auto;display:block;border:1px solid rgba(236,231,220,.12)}
.pj-phases figcaption{margin-top:12px;font-size:.625rem;color:rgba(236,231,220,.6)}

/* ---------- the rooms — dovetailed weave ---------- */
.pj-rooms{padding:clamp(80px,11vw,150px) 0 clamp(60px,8vw,110px)}
.pj-weave{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);margin-top:clamp(40px,6vw,64px)}
.pj-weave figure{margin:0;position:relative}
.pj-weave img{width:100%;height:100%;object-fit:cover;display:block}
.pj-weave figcaption{margin-top:12px;font-size:.625rem;color:var(--stone)}
.pj-weave .w1{grid-column:1/13}
.pj-weave .w2{grid-column:1/13}
.pj-weave .w3{grid-column:1/13}
@media(min-width:880px){
  .pj-weave .w1{grid-column:1/9}
  .pj-weave .w2{grid-column:8/13;margin-top:clamp(60px,9vw,130px);z-index:2}
  .pj-weave .w2 img{box-shadow:-24px 24px 60px rgba(20,31,25,.18)}
  .pj-weave .w3{grid-column:3/7;margin-top:calc(clamp(60px,9vw,130px)*-.4)}
}

/* ---------- the quiet — full-bleed second movement ---------- */
.pj-quiet{position:relative;min-height:88svh;overflow:hidden;background:#141F19}
.pj-quiet img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-quiet .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,31,25,.05) 30%,rgba(20,31,25,.62) 100%)}
.pj-quiet .inner{position:absolute;left:var(--mx);right:var(--mx);bottom:clamp(48px,9vh,90px);color:var(--bone)}
.pj-quiet .pull{font-size:clamp(1.4rem,3.4vw,2.2rem);max-width:18em;color:var(--bone);text-wrap:balance}
.pj-quiet .cap{display:block;margin-top:16px;font-size:.625rem;color:rgba(236,231,220,.65)}

/* ---------- the hand — detail + close ---------- */
.pj-hand{padding:clamp(80px,11vw,140px) 0}
.pj-hand .wrap{display:grid;grid-template-columns:1fr;gap:clamp(36px,6vw,80px);align-items:center}
@media(min-width:980px){.pj-hand .wrap{grid-template-columns:5fr 6fr}}
.pj-hand figure{margin:0;max-width:440px}
.pj-hand img{width:100%;display:block;border:1px solid var(--hairline)}
.pj-hand figcaption{margin-top:12px;font-size:.625rem;color:var(--stone)}
.pj-honesty{margin-top:clamp(48px,7vw,72px);font-size:.8125rem;color:var(--stone);border-top:1px solid var(--hairline);padding-top:18px;max-width:44em}

/* ---------- next rail ---------- */
.pj-next{border-top:1px solid var(--hairline);padding:clamp(40px,6vw,64px) 0 clamp(64px,9vw,110px)}
.pj-next .wrap{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.pj-next a{font-size:.6875rem}

/* ============================================================
   ROUND 15 — brass keylines on photography · glass caption chrome
   (owner rulings 2026-07-08). Appended; cascade wins.
   ============================================================ */
.pj-phases img{border-color:var(--brass-line-dark)}
.pj-weave img{border:1px solid var(--brass-line)}
.pj-hand img{border-color:var(--brass-line)}
.pj-open .scope{border-top-color:var(--brass-line-dark)}

/* opener caption glass RETIRED (owner, 2026-07-09): the type stands
   free on the scrim and the faces do their own work */

/* ============================================================
   ROUND 28 — the rail joins the project pages (owner, 2026-07-11):
   one faint brass line down the spine, seated BEHIND everything —
   it disappears behind the full-bleed frames and re-emerges in the
   paper, fading at both ends. The folio's thread, properly hung.
   ============================================================ */
.project-page main{position:relative}
/* the straight rail is retired (owner, 2026-07-12: "looks like a
   defect") — replaced by the routed setting-out line below */
/* every section is positioned, so all content paints above the line */
.project-page main > section{position:relative}
.project-page main > .pj-next{position:relative}

/* the setting-out line: js/setting-line.js routes one brass thread
   from the opener to each photograph — hugging frames at a joiner's
   gutter, turning on small radii, pinned at both ends */
/* the line is a desktop detail — below 880px the layout is one column and
   there is no gutter for it to travel in (owner ruling 2026-07-18) */
.setting-line{position:absolute;inset:0;pointer-events:none}
@media(max-width:879px){.setting-line{display:none}}
.setting-line path{fill:none;stroke:rgba(194,160,79,.38);stroke-width:1}
.setting-line circle{fill:rgba(194,160,79,.8);opacity:0;transition:opacity .5s}

/* weave captions become glass chips hung on the frame itself */
.pj-weave figcaption{
  position:absolute;left:14px;bottom:14px;margin:0;z-index:2;
  color:rgba(236,231,220,.92);
  background:rgba(16,26,21,.44);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(226,196,128,.20);
  padding:9px 14px;line-height:1.6;max-width:calc(100% - 28px);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pj-weave figcaption{background:rgba(16,26,21,.78)}
}

/* ---------- the day movement — the café's hour is morning ---------- */
.pj-day{position:relative;background:var(--bone);padding:clamp(80px,11vw,150px) 0}
.pj-day .pj-copy{color:var(--green)}
.pj-day .pj-phases img{border-color:var(--brass-line)}
.pj-day .pj-phases figcaption{color:var(--stone)}

/* ---------- the lightbox — opens like hardware ---------- */
.lbx-can{cursor:zoom-in}
.lbx-can:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.lbx{
  position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(16,26,21,.86);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
}
.lbx.is-on{display:flex}
html.lbx-open{overflow:hidden}
.lbx figure{margin:0;max-width:min(92vw,1500px);max-height:86vh;display:flex;flex-direction:column;gap:12px}
.lbx.is-on figure{animation:lbxin .3s var(--ease)}
@keyframes lbxin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lbx img{max-width:100%;max-height:calc(86vh - 40px);width:auto;height:auto;object-fit:contain;
  border:1px solid rgba(226,196,128,.32);display:block;margin-inline:auto}
.lbx figcaption{color:rgba(236,231,220,.8);font-size:.625rem;text-align:center}
.lbx-x,.lbx-n,.lbx-p,.lbx-f{
  position:absolute;z-index:2;color:rgba(236,231,220,.92);
  background:rgba(16,26,21,.44);border:1px solid rgba(226,196,128,.25);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--sans);
}
.lbx-x{top:18px;right:18px;padding:12px 18px;font-size:.625rem;cursor:pointer}
.lbx-n{top:18px;left:18px;padding:12px 16px;font-size:.6875rem;font-family:var(--mono)}
.lbx-p,.lbx-f{top:50%;transform:translateY(-50%);padding:16px 15px;font-size:1rem;cursor:pointer;line-height:1}
.lbx-p{left:14px}
.lbx-f{right:14px}
.lbx-x:hover,.lbx-p:hover,.lbx-f:hover,
.lbx-x:focus-visible,.lbx-p:focus-visible,.lbx-f:focus-visible{border-color:var(--brass)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lbx{background:rgba(16,26,21,.96)}
}
@media(prefers-reduced-motion:reduce){
  .lbx.is-on figure{animation:none}
}
@media(max-width:640px){
  .lbx-p,.lbx-f{display:none} /* thumbs swipe */
}