/* Clarity Construction — portfolio index and project pages.
   Loaded after site.css; uses its tokens. Nothing in site.css changes. */

/* ---- Section bar (sticky): section links + city select ---- */
.pf-bar{position:sticky;top:var(--hdr-h);z-index:6;background:rgba(250,246,238,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pf-bar__in{display:flex;align-items:center;gap:.8rem;padding-block:.55rem}
.pf-bar__nav{display:flex;gap:.4rem;flex-wrap:wrap;min-width:0;flex:1}
.pf-chip{appearance:none;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);text-decoration:none;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  padding:.5rem .8rem;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;
  transition:background .25s var(--e-out),color .25s var(--e-out),border-color .25s var(--e-out)}
.pf-chip small{font-family:inherit;font-size:.56rem;color:var(--ink-3);letter-spacing:.08em}
.pf-chip:hover{border-color:var(--ink)}
.pf-chip.is-on,.pf-chip[aria-current="true"]{background:var(--brown-d);color:#F7F2E7;border-color:var(--brown-d)}
.pf-chip.is-on small{color:#D9C7A8}
.pf-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pf-city{flex:none}
.pf-city select{appearance:none;-webkit-appearance:none;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-2);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23241A12' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .7rem center;
  padding:.5rem 2rem .5rem .8rem;border-radius:999px;color:var(--ink);cursor:pointer;max-width:200px}
.pf-city select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:760px){
  .pf-bar{margin:0}
  .pf-bar__in{flex-wrap:wrap;gap:.5rem}
  .pf-bar__nav{flex-wrap:nowrap;overflow-x:auto;flex-basis:100%;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pf-bar__nav::-webkit-scrollbar{display:none}
  .pf-city{width:100%}.pf-city select{width:100%;max-width:none}
}

/* ---- Sections ---- */
.pf-sec{padding-block:clamp(2.6rem,5vw,4.2rem)}
.pf-sec[id]{scroll-margin-top:calc(var(--hdr-h) + 3.6rem)}
.pf-sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem 2rem;flex-wrap:wrap}
.pf-sec__head h2{margin:0;max-width:22ch}
.pf-sec__lede{margin:.4rem 0 0;color:var(--ink-2);max-width:56ch}
.pf-sec__n{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.pf-empty{display:none;margin-top:1.4rem;padding:1.2rem;border:1px dashed var(--line-2);border-radius:var(--rad);color:var(--ink-2)}
.pf-grid:not(:has(.pf-tile:not([hidden]))) + .pf-empty{display:block}

/* ---- Project tiles: all identical 3:2 ---- */
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.3rem);margin-top:clamp(1.2rem,2.4vw,1.8rem)}
@media (max-width:1000px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pf-grid{grid-template-columns:minmax(0,1fr)}}
.pf-tile{position:relative;display:block;border-radius:var(--rad);overflow:hidden;background:var(--stone);box-shadow:var(--shadow-1);
  color:#FBF6EA;text-decoration:none;transition:transform .5s var(--e-out),box-shadow .5s var(--e-out)}
.pf-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.pf-tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pf-tile[aria-expanded="true"]{outline:3px solid var(--gold);outline-offset:3px;transform:none}
.pf-tile[hidden]{display:none}
.pf-tile__img{display:block;aspect-ratio:3/2;overflow:hidden}
.pf-tile__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--e-out)}
.pf-tile:hover .pf-tile__img img{transform:scale(1.05)}
.pf-tile__n{position:absolute;top:.75rem;right:.75rem;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:#FBF6EA;background:rgba(22,16,10,.62);padding:.32rem .55rem;border-radius:999px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pf-tile__cap{position:absolute;left:0;right:0;bottom:0;padding:2rem 1rem .85rem;background:linear-gradient(180deg,transparent,rgba(22,16,10,.78))}
.pf-tile__cap small{display:block;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#FBF6EA;text-shadow:0 1px 6px rgba(0,0,0,.4)}

/* ---- Opened project: panel with a scrollable strip of square photos ---- */
.pf-panel{grid-column:1/-1;min-width:0;max-width:100%;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);
  padding:clamp(1.2rem,2.4vw,2rem) 0 clamp(1rem,2vw,1.4rem);scroll-margin-top:calc(var(--hdr-h) + 4rem);animation:pf-in .45s var(--e-out)}
.bg-2 .pf-panel{background:var(--paper)}
.pf-panel[hidden]{display:none}
.pf-panel::before{content:"";position:absolute;top:-10px;left:var(--pf-arrow,50%);width:18px;height:18px;margin-left:-9px;
  background:var(--paper);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
@keyframes pf-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pf-panel{animation:none}}
.pf-panel__head{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-start;padding:0 clamp(1.2rem,2.4vw,2rem)}
.pf-panel__head h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.4rem,1.1rem+1.2vw,2rem);line-height:1.1;margin:.2rem 0 .55rem}
.pf-panel__head h3:focus{outline:none}
.pf-panel__head p:not(.kicker){margin:0;max-width:64ch;color:var(--ink-2);font-size:.95rem}
.pf-panel__x{appearance:none;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);width:42px;height:42px;border-radius:50%;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;justify-content:center;transition:background .25s var(--e-out),color .25s var(--e-out)}
.pf-panel__x:hover{background:var(--ink);color:var(--paper)}
.pf-panel__x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pf-strip-wrap{position:relative;margin-top:1.1rem;min-width:0}
.pf-strip{display:flex;gap:.7rem;overflow-x:auto;min-width:0;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:.4rem clamp(1.2rem,2.4vw,2rem) .9rem;scroll-padding-inline:clamp(1.2rem,2.4vw,2rem);
  scrollbar-width:thin;scrollbar-color:var(--line-soft) transparent;-webkit-overflow-scrolling:touch}
.pf-strip::-webkit-scrollbar{height:3px}.pf-strip::-webkit-scrollbar-track{background:var(--line)}.pf-strip::-webkit-scrollbar-thumb{background:var(--line-soft)}
.pf-strip:hover::-webkit-scrollbar-thumb{background:var(--gold)}
.pf-strip:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.pf-strip{scroll-behavior:auto}}
.pf-st{flex:none;width:clamp(200px,21vw,280px);aspect-ratio:1/1;scroll-snap-align:start;position:relative;margin:0;border-radius:var(--rad);overflow:hidden;background:var(--stone);box-shadow:var(--shadow-1)}
@media (max-width:600px){.pf-st{width:min(70vw,300px)}}
.pf-st a{display:block;width:100%;height:100%;color:inherit;text-decoration:none}
.pf-st picture{display:block;width:100%;height:100%}
.pf-st img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--e-out)}
.pf-st:hover img{transform:scale(1.04)}
.pf-st a:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.pf-st figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.8rem .75rem .6rem;pointer-events:none;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#FBF6EA;background:linear-gradient(180deg,transparent,rgba(22,16,10,.8))}
.pf-tag{position:absolute;top:.6rem;left:.6rem;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:#241A12;background:#E9D9B3;padding:.28rem .5rem;border-radius:999px}
.pf-strip__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(250,246,238,.92);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1);
  transition:background .25s var(--e-out),color .25s var(--e-out),opacity .25s var(--e-out)}
.pf-strip__btn:hover{background:var(--ink);color:var(--paper)}
.pf-strip__btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pf-strip__btn[disabled]{opacity:0;pointer-events:none}
.pf-strip__btn--prev{left:.4rem}.pf-strip__btn--next{right:.4rem}
@media (max-width:760px){.pf-strip__btn{display:none}}
.pf-panel__foot{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;padding:.2rem clamp(1.2rem,2.4vw,2rem) 0}
.pf-panel__hint{margin-left:auto;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:760px){.pf-panel__hint{margin-left:0;flex-basis:100%}}

/* ---- Facts strip on project pages ---- */
.pf-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem 1.4rem;margin:2rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--line)}
@media (max-width:760px){.pf-facts{grid-template-columns:repeat(2,1fr)}}
.pf-facts div{margin:0}
.pf-facts dt{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.35rem}
.pf-facts dd{margin:0;font-size:.96rem;color:var(--ink);font-weight:500}
.pf-facts dd a{color:inherit}

/* ---- Photo gallery on project pages: identical squares ---- */
.pf-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.4vw,1.1rem);margin-top:clamp(1.6rem,3vw,2.4rem)}
@media (max-width:900px){.pf-gallery{grid-template-columns:repeat(2,1fr)}}
.pf-ph{position:relative;margin:0;border-radius:var(--rad);overflow:hidden;background:var(--stone);box-shadow:var(--shadow-1);aspect-ratio:1/1}
.pf-ph a{display:block;width:100%;height:100%;color:inherit;text-decoration:none}
.pf-ph picture{display:block;width:100%;height:100%}
.pf-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--e-out)}
.pf-ph:hover img{transform:scale(1.04)}
.pf-ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1rem .8rem;pointer-events:none;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:#FBF6EA;
  background:linear-gradient(180deg,transparent,rgba(22,16,10,.82))}
.pf-ph a:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.pf-gallery--progress{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.pf-gallery--progress{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pf-ph figcaption{font-size:.56rem;padding:1.6rem .6rem .5rem}}

/* ---- Lightbox ---- */
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0;color:#FBF6EA}
.lb::backdrop{background:rgba(14,11,8,.94)}
.lb__in{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3.4rem 1rem 3.2rem}
.lb__img{max-width:min(100%,1600px);max-height:calc(100vh - 7rem);object-fit:contain;display:block;border-radius:var(--rad);box-shadow:0 30px 80px rgba(0,0,0,.5);background:#161009}
.lb__cap{position:fixed;left:0;right:0;bottom:0;padding:.9rem 4.5rem;text-align:center;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#E6DCC8}
.lb__btn{position:fixed;appearance:none;border:1px solid rgba(251,246,234,.35);background:rgba(22,16,10,.6);color:#FBF6EA;width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s var(--e-out),border-color .2s var(--e-out)}
.lb__btn:hover{background:rgba(60,44,30,.85);border-color:#FBF6EA}
.lb__btn:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.lb__btn svg{width:18px;height:18px}
.lb__x{top:1rem;right:1rem}
.lb__prev{left:.8rem;top:50%;transform:translateY(-50%)}
.lb__next{right:.8rem;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.lb__prev,.lb__next{top:auto;bottom:.7rem;transform:none}.lb__prev{left:.8rem}.lb__next{right:.8rem}.lb__cap{padding:.9rem 4rem 3.6rem}}
.lb[open]{display:block}
body.lb-open{overflow:hidden}

/* ---- Redirect stub ---- */
.pf-stub{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem}