/* Project detail page, layered on top of uto.css */
.project-head{background:var(--paper); color:var(--ink); padding:140px 0 64px; position:relative; overflow:hidden;}
.project-head::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse 80% 70% at 25% 0%, black, transparent 80%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 25% 0%, black, transparent 80%);}
.project-head::after{content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(var(--grid-line) 1.4px, transparent 1.4px); background-size:26px 26px; mask-image:linear-gradient(180deg, transparent 40%, black); -webkit-mask-image:linear-gradient(180deg, transparent 40%, black);}
.project-head .container{position:relative; z-index:2;}
.breadcrumb{display:flex; align-items:center; gap:9px; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; flex-wrap:wrap;}
.breadcrumb a:hover{color:var(--accent-ink);}
.breadcrumb .sep{opacity:.4;}
.project-head h1{font-size:clamp(30px,4.2vw,50px); max-width:900px; text-wrap:pretty;}
.project-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}

.project-body{padding:56px 0 90px; background:var(--white);}
.pp-thumbnail{display:grid; grid-template-columns:1.9fr 1fr; gap:20px; align-items:start; margin-bottom:44px;}
.main-image{position:relative; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; cursor:zoom-in; min-height:420px;}
.main-image img{width:100%; height:100%; max-height:560px; object-fit:cover; object-position:top center; opacity:0; transition:opacity .35s ease;}
.main-image img.loaded{opacity:1;}
.image-loader{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border:3px solid var(--line); border-top-color:var(--accent-ink); border-radius:50%; animation:spin 1s linear infinite;}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.thumbnail-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-height:560px; overflow-y:auto; align-content:start; padding-right:4px;}
.thumbnail-grid::-webkit-scrollbar{width:6px;}
.thumbnail-grid::-webkit-scrollbar-track{background:var(--paper-2); border-radius:10px;}
.thumbnail-grid::-webkit-scrollbar-thumb{background:var(--lime-deep); border-radius:10px;}
.thumbnail-grid a{display:block; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:var(--paper-2);}
.thumbnail-grid img{width:100%; height:120px; object-fit:cover; object-position:top center; cursor:zoom-in; opacity:0; transition:opacity .35s ease, transform .35s ease;}
.thumbnail-grid img.loaded{opacity:1;}
.thumbnail-grid a:hover img{transform:scale(1.05);}
.no-images-message{grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);}

.project-copy{display:grid; grid-template-columns:1.35fr .65fr; gap:44px; align-items:start;}
.pp-body{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 34px 30px; font-size:16px; line-height:1.8; color:var(--body-copy);}
.pp-body h1,.pp-body h2,.pp-body h3,.pp-body h4{margin:26px 0 12px; color:var(--ink);}
.pp-body h2{font-size:24px;} .pp-body h3{font-size:20px;} .pp-body h4{font-size:17px;}
.pp-body > *:first-child{margin-top:0;}
.pp-body p{margin-bottom:1em;}
.pp-body ul,.pp-body ol{margin:0 0 1.1em 0; padding-left:0; display:flex; flex-direction:column; gap:9px;}
.pp-body ul li{position:relative; padding-left:24px;}
.pp-body ul li::before{content:""; position:absolute; left:4px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--lime-deep);}
.pp-body ol{list-style:decimal; padding-left:22px;}
.pp-body a{color:var(--ink); border-bottom:1.5px solid var(--lime);}
.pp-body a:hover{color:var(--accent-ink);}
.pp-body blockquote{border-left:3px solid var(--lime); padding-left:18px; color:var(--muted); margin:0 0 1em;}
.pp-body code,.pp-body pre{font-family:var(--ff-mono); font-size:13.5px; background:var(--white); border-radius:8px;}
.pp-body code{padding:2px 6px;}
.pp-body pre{padding:16px; overflow-x:auto; margin-bottom:1em;}
.pp-body img{border-radius:var(--r-md); margin:14px 0;}

.project-aside{position:sticky; top:100px; display:flex; flex-direction:column; gap:16px;}

.pswp__img{object-fit:contain !important; object-position:top center !important;}
.pswp__container{align-items:flex-start !important;}
.pswp__zoom-wrap{display:flex !important; align-items:flex-start !important; justify-content:center !important;}

@media (max-width:1080px){
  .pp-thumbnail{grid-template-columns:1fr;}
  .thumbnail-grid{grid-template-columns:repeat(4,1fr); max-height:none;}
  .project-copy{grid-template-columns:1fr;}
  .project-aside{position:static;}
}
@media (max-width:920px){ .project-head{padding:118px 0 52px;} }
@media (max-width:680px){
  .thumbnail-grid{grid-template-columns:repeat(2,1fr);}
  .main-image{min-height:240px;}
  .pp-body{padding:24px 22px;}
}

/* hero pattern, stronger (matches .hero) */
.project-head::before{
  background-image:
    linear-gradient(var(--grid-hero) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-hero) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 92% 88% at 24% 0%, black 25%, transparent 92%);
  -webkit-mask-image:radial-gradient(ellipse 92% 88% at 24% 0%, black 25%, transparent 92%);
}