/**
 * pg-style.css — structural layout for every member's public site.
 * Purely structural: every color and font comes from whichever
 * themes/theme-N.css loaded before this file, via CSS custom
 * properties. This file never hardcodes a color.
 */
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);color:var(--tx);font-family:var(--font-body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-heading)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px 80px}

.topbar{
  display:flex;align-items:baseline;gap:20px;padding:26px 0 20px;flex-wrap:wrap;
}
.brand{font-family:var(--font-heading);font-size:19px;font-weight:600;text-decoration:none}
.spacer{flex:1}
.nav{display:flex;gap:20px;font-size:13px;letter-spacing:.03em;text-transform:uppercase}
.nav a{color:var(--dim);text-decoration:none;transition:color .18s}
.nav a:hover{color:var(--tx)}

.tagline{color:var(--dim);font-size:14.5px;margin:-10px 0 24px;max-width:60ch}

/* ---------- homepage hero ---------- */
.hero{position:relative;width:100%;aspect-ratio:16/9;max-height:76vh;overflow:hidden;background:var(--surf);margin-bottom:8px}
.hero.heroStatic img{width:100%;height:100%;object-fit:cover}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hero .slide.on{opacity:1}
.hero .slide img{width:100%;height:100%;object-fit:cover}
.hero .arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;
  border-radius:50%;border:none;background:rgba(0,0,0,.35);color:#fff;font-size:20px;
  cursor:pointer;display:grid;place-items:center;
}
.hero .arrow:hover{background:rgba(0,0,0,.55)}
.hero .aprev{left:14px}.hero .anext{right:14px}
.hero .dots{position:absolute;right:16px;bottom:14px;display:flex;gap:6px}
.hero .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4)}
.hero .dots i.on{background:#fff}
.hero.empty{display:flex;align-items:center;justify-content:center;color:var(--dim);aspect-ratio:21/9}

/* ---------- gallery link cards (home) ---------- */
/* A capped max width, not minmax(240px,1fr) -- 1fr let a card balloon
   to fill the whole row's remaining space with as few as one or two
   galleries, so the same site read completely differently depending
   on gallery count. Capped, a card is close to the same size whichever
   is true; more galleries only ever adds rows, never resizes existing
   cards. */
/* 2 large cards side by side with few galleries, growing to a 4-per-row
   cap as more are added (then wrapping) -- the minmax floor is whichever
   is bigger, a fixed 240px or a quarter of the row (minus 3 gaps), so
   auto-fit can never pack a 5th column no matter how wide the viewport,
   while few items still stretch to fill the row via the 1fr ceiling. */
.galCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(240px,calc((100% - 54px) / 4)),1fr));gap:18px;margin-top:28px}
.galCard{text-decoration:none;color:inherit;display:block}
.galCard .cov{aspect-ratio:4/3;background:var(--surf);overflow:hidden;border-radius:6px}
.galCard .cov img{width:100%;height:100%;object-fit:cover}
.galCard .t{margin-top:10px;font-family:var(--font-heading);font-size:16px}
.galCard .n{color:var(--dim);font-size:12.5px;margin-top:2px}

.empty{color:var(--dim);padding:50px 0;text-align:center}

/* ---------- gallery page: organic (masonry) ---------- */
.gridOrganic{
  display:grid;grid-auto-flow:dense;gap:10px;
  grid-template-columns:repeat(var(--gunits,6),1fr);
  grid-auto-rows:6px;
}
.gridOrganic .tile{border-radius:6px;overflow:hidden;background:var(--surf);cursor:pointer;border:none;padding:0}
.gridOrganic .tile img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- gallery page: square ---------- */
.gridSquare{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.gridSquare .tile{aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--surf);cursor:pointer;border:none;padding:0;position:relative}
.gridSquare .tile img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- about ---------- */
.aboutGrid{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start;margin-top:10px}
.aboutGrid img{border-radius:8px;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--surf)}
.bio{white-space:pre-wrap;line-height:1.8;max-width:60ch}
.mailto{color:var(--accent);text-decoration:underline;text-decoration-style:dashed;cursor:pointer;background:none;border:none;font:inherit;padding:0}
.aboutShow{position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--surf)}
.aboutGrid .aboutShow img{position:absolute;inset:0;height:100%;max-width:none;border-radius:0;opacity:0;transition:opacity 1.1s ease;cursor:pointer}
.aboutGrid .aboutShow img.on{opacity:1}
.aboutShow .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px}
.aboutShow .dots button{width:7px;height:7px;border-radius:50%;border:none;padding:0;background:rgba(255,255,255,.45);cursor:pointer}
.aboutShow .dots button.on{background:#fff}
@media(max-width:640px){.aboutGrid{grid-template-columns:1fr}.aboutGrid img,.aboutShow{max-width:200px}}

footer{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  max-width:1200px;margin:60px auto 0;padding:22px 24px 40px;
  border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;
}
.footerSocial{display:flex;gap:16px}
.footerSocial a{color:var(--dim);text-decoration:none;transition:color .18s}
.footerSocial a:hover{color:var(--tx)}

.aboutSocial{display:flex;gap:16px;margin-top:14px}
.aboutSocial a{color:var(--accent);text-decoration:none;font-size:13.5px}
.aboutSocial a:hover{text-decoration:underline}

/* ---------- lightbox (see pg-lightbox.css for the rest) ---------- */
.lbox{
  position:fixed;inset:0;z-index:9999;display:none;
  background:rgba(0,0,0,.92);align-items:center;justify-content:center;padding:28px;
}
.lbox.on{display:flex}