:root{ --gap:14px; --card-min:320px; --card-max:1fr; }
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;padding:0;background:#f6f6f6;color:#111}
header.page-header{background:#222;color:#fff;padding:12px;display:flex;flex-direction:column;gap:8px}
header .acct-nav{display:flex;gap:8px;align-items:center}
header .crumbs a{color:#fff}

/* Page container: center the main content */
main, .page-main, .content {
  max-width:1200px;
  margin:0 auto;
  padding:12px;
}

/* Responsive grid: each card at least --card-min, expand to fill available space */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(var(--card-min), var(--card-max)));
  gap:var(--gap);
  padding:12px;
  max-width:1400px;
  margin:0 auto;
}
.card{
  background:#fff;
  padding:12px;
  border-radius:8px;
  box-shadow:0 1px 6px rgba(0,0,0,0.08);
  text-align:left;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.card a{display:block;text-decoration:none;color:inherit}
.card img{width:100%;height:auto;display:block;border-radius:6px;object-fit:cover}
.card figcaption{margin-top:8px;font-size:15px;color:#222}
.pagination{padding:12px;text-align:center}
.noimage-badge{position:absolute;right:8px;top:8px;background:#222;color:#fff;padding:3px 6px;border-radius:4px;font-size:12px;z-index:5;display:none}
.card img.thumb-missing{opacity:0.7;filter:grayscale(60%)}
a.link-disabled{pointer-events:none;opacity:0.7}

/* caption link styling */
.card .yahoo-link{
  color:#0066cc;
  text-decoration:underline;
  font-weight:600;
  font-size:15px;
  display:inline-block;
}

/* clickable thumbnail cue */
.card-thumb{ cursor:zoom-in; }

/* Accounts list (gallery/index.html) - centered, responsive grid */
.accounts {
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:18px;
  padding:18px;
  align-items:start;
  justify-items:center;
}
.accounts .acct {
  width:100%;
  box-sizing:border-box;
  text-align:center;
  background:#fff;
  padding:12px;
  border-radius:8px;
  box-shadow:0 1px 6px rgba(0,0,0,0.06);
}
.accounts .acct img{display:block;margin:0 auto 8px;max-width:100%;height:auto;border-radius:6px}
.accounts .acct h2{margin:6px 0 4px;font-size:16px}
.accounts .acct p{margin:0;color:#666;font-size:14px}

/* small metadata and utilities */
footer{padding:10px;text-align:center;color:#666}

/* Accessibility helpers */
a.yahoo-link, a.yahoo{outline-offset:3px}
a.yahoo-link:focus, a.yahoo:focus{box-shadow:0 0 0 3px rgba(0,102,204,0.18);border-radius:4px}

/* Responsive breakpoints */
@media(max-width:600px){
  .grid{ grid-template-columns:repeat(1,1fr); padding:10px; }
  :root{ --card-min:260px; }
  .accounts{ padding:12px; gap:12px; }
}
@media(min-width:900px){
  :root{ --card-min:260px; }
}
@media(min-width:1200px){
  :root{ --card-min:300px; }
}
footer{padding:10px;text-align:center;color:#666}