/* Shared project content; each saved design keeps its own brand colors. */
.project-catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:24px; margin-top:40px; }
.album-card { min-width:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--white); box-shadow:0 5px 20px #102b2208; scroll-margin-top:110px; }
.album-card[hidden] { display:none; }
.album-cover-link { display:block; overflow:hidden; background:var(--mist); position:relative; }
.album-cover { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; transition:transform .3s; }
.album-cover-link:hover .album-cover { transform:scale(1.025); }
.album-content { padding:20px; }
.album-content h3 { margin:0 0 12px; color:var(--forest); font-size:1.18rem; line-height:1.6; }
.album-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.album-tags span { background:var(--mist); color:var(--forest); border:1px solid var(--line); border-radius:5px; font-size:.74rem; line-height:1.5; padding:4px 8px; }
.album-details { border-top:1px solid var(--line); }
.album-details summary { cursor:pointer; color:var(--forest); padding:14px 0 0; font-size:.94rem; font-weight:700; }
.album-details summary small { font-weight:400; color:var(--muted); margin-inline-start:8px; white-space:nowrap; }
.album-details[open] summary { padding-bottom:14px; }
.album-photos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.album-photo { display:block; position:relative; background:var(--mist); border-radius:5px; overflow:hidden; }
.album-photo img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.album-photo-index { position:absolute; bottom:6px; inset-inline-end:6px; border-radius:4px; padding:1px 6px; background:#0a1712cc; color:white; font-size:.7rem; }
.has-watermark::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40%; aspect-ratio:1; background:url("assets/green-square-logo-hd.png") center/contain no-repeat; opacity:.35; pointer-events:none; }
.album-hint { margin:12px 0 0; color:var(--muted); font-size:.76rem; }
.album-cover-link:focus-visible,.album-details summary:focus-visible,.album-photo:focus-visible,.photo-viewer button:focus-visible { outline:3px solid var(--green); outline-offset:-3px; }
.photo-viewer { width:min(1080px,96vw); max-height:94dvh; padding:18px; border:1px solid #5f7365; border-radius:12px; background:#0a1712; color:#fff; }
.photo-viewer::backdrop { background:#07110deb; }
.photo-viewer-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.photo-viewer-heading h3 { margin:0; font-size:1.05rem; line-height:1.6; }
.photo-viewer button { border:1px solid #627468; border-radius:6px; background:#20382a; color:#fff; cursor:pointer; font:inherit; padding:9px 15px; min-height:44px; }
.photo-viewer-close { font-size:1.5rem !important; }
.photo-viewer-image { display:block; width:100%; height: min(68dvh,720px); object-fit:contain; background:#07110d; }
.photo-viewer-media { position:relative; }
.photo-viewer-watermark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); aspect-ratio:1; background:url("assets/green-square-logo-hd.png") center/contain no-repeat; opacity:.35; pointer-events:none; }
.photo-viewer-watermark[hidden] { display:none; }
.photo-viewer-nav { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:14px; }
.photo-viewer-count { min-width:65px; text-align:center; font-variant-numeric:tabular-nums; }
body.photo-viewer-open { overflow:hidden; }
@media (max-width:1000px) { .project-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } }
@media (max-width:560px) { .project-catalog { grid-template-columns:1fr; gap:20px; margin-top:28px; }.album-content { padding:18px; }.album-cover { aspect-ratio:16/10; }.photo-viewer { padding:12px; }.photo-viewer-image { height:62dvh; }.photo-viewer-nav { gap:12px; } }
@media (prefers-reduced-motion:reduce) { .album-cover { transition:none; } }
/* Varied real project examples at the top; individual albums live below. */
.hero-project-mosaic { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); height:100%; gap:5px; }
.hero-project-tile { position:relative; overflow:hidden; min-height:0; }
.hero-project-tile img { display:block; width:100%; height:100%; object-fit:cover; }
.album-photo-caption { position:absolute; bottom:6px; inset-inline-start:6px; max-width:calc(100% - 42px); padding:3px 6px; border-radius:4px; background:#0a1712dd; color:#fff; font-size:.66rem; line-height:1.5; }
.photo-viewer-caption { margin:10px 0 0; color:#e8f0e4; text-align:center; font-size:.88rem; }
.photo-viewer-caption[hidden] { display:none; }