.sk3g { --sk3g-orange:#E6902F; --sk3g-ink:#1C1814; --sk3g-muted:#6B6055;
        --sk3g-line:#E8E0D4; --sk3g-surface:#fff;
        font-family:inherit; color:var(--sk3g-ink); }
.sk3g *, .sk3g *::before, .sk3g *::after { box-sizing:border-box; }
.sk3g-loading, .sk3g-error { padding:32px 0; color:var(--sk3g-muted); }
.sk3g-loading { min-height:60vh; }
.sk3g-error { color:#B3261E; }

/* year cards */
.sk3g-years { display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.sk3g-year { position:relative; display:block; width:100%; padding:0; border:none;
             border-radius:12px; overflow:hidden; cursor:pointer; background:var(--sk3g-line);
             aspect-ratio:4/3; }
.sk3g-year img { width:100%; height:100%; object-fit:cover; display:block;
                 transition:transform .3s ease; }
.sk3g-year:hover img { transform:scale(1.04); }
.sk3g-year:focus-visible { outline:3px solid var(--sk3g-orange); outline-offset:3px; }
.sk3g-year-label { position:absolute; inset:auto 0 0 0; padding:34px 16px 14px;
                   background:linear-gradient(transparent,rgba(20,16,12,.85));
                   color:#fff; text-align:left; }
.sk3g-year-num { display:block; font-size:1.5rem; font-weight:700; line-height:1.1; }
.sk3g-year-count { display:block; font-size:.875rem; opacity:.85; }


/* photo grid */
.sk3g-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.sk3g-back { background:none; border:none; padding:8px 0; cursor:pointer; font:inherit;
             color:var(--sk3g-orange); text-decoration:underline; text-underline-offset:3px; }
.sk3g-title { font-size:1.4rem; font-weight:700; margin:0; }
.sk3g-shown { color:var(--sk3g-muted); font-size:.9rem; margin-left:auto; }

.sk3g-grid { display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }

/* one uploader at a time - the same buttons as the year pages. Dark text on
   orange when pressed, the pairing "Load more" already uses, for contrast. */
.sk3g-by { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
/* Every state pinned, and scoped by the root's id: the theme gives every
   button's :hover and :focus white text on pink, and a clicked button keeps
   focus, so the pressed one read white on orange - 2.5:1. Dark ink is 7:1. */
#sk3g-root .sk3g-by button, #sk3g-root .sk3g-by button:hover, #sk3g-root .sk3g-by button:focus {
                  min-height:44px; padding:8px 16px; font:inherit; font-size:.9rem; cursor:pointer;
                  border:1px solid var(--sk3g-line); border-radius:999px;
                  background:var(--sk3g-surface); color:var(--sk3g-ink); }
#sk3g-root .sk3g-by button:hover, #sk3g-root .sk3g-by button:focus { border-color:var(--sk3g-orange); }
#sk3g-root .sk3g-by button[aria-pressed="true"], #sk3g-root .sk3g-by button[aria-pressed="true"]:hover,
#sk3g-root .sk3g-by button[aria-pressed="true"]:focus { background:var(--sk3g-orange); border-color:var(--sk3g-orange);
                  color:var(--sk3g-ink); }
.sk3g-by button:focus-visible { outline:3px solid var(--sk3g-orange); outline-offset:2px; }
.sk3g-by .sk3g-n { opacity:.7; margin-left:6px; }
.sk3g-tile { position:relative; aspect-ratio:4/3; background:var(--sk3g-line);
             border:none; padding:0; border-radius:8px; overflow:hidden; cursor:zoom-in; }
.sk3g-tile img { width:100%; height:100%; object-fit:cover; display:block;
                 opacity:0; transition:opacity .25s; }
.sk3g-tile img.sk3g-on { opacity:1; }
.sk3g-tile:focus-visible { outline:3px solid var(--sk3g-orange); outline-offset:2px; }

.sk3g-more { display:block; margin:26px auto 0; padding:13px 30px; min-height:48px;
             font:inherit; font-weight:600; cursor:pointer; border-radius:10px;
             background:var(--sk3g-orange); color:var(--sk3g-ink); border:none; }
.sk3g-more:hover { filter:brightness(.94); }

/* lightbox */
.sk3g-lb { position:fixed; inset:0; z-index:99999; background:rgba(16,13,10,.95);
           display:flex; align-items:center; justify-content:center; padding:32px 12px 72px; }
.sk3g-lb[hidden] { display:none; }
.sk3g-lb img { max-width:100%; max-height:100%; object-fit:contain; }
.sk3g-lbbar { position:absolute; left:0; right:0; bottom:0; padding:10px 14px;
              display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.45);
              color:#fff; font-size:.9rem; }
.sk3g-lbbar button { min-width:46px; min-height:44px; font:inherit; cursor:pointer;
                     border-radius:8px; border:1px solid rgba(255,255,255,.35);
                     background:rgba(255,255,255,.12); color:#fff; }
.sk3g-count { margin-left:auto; opacity:.85; white-space:nowrap; }
/* Beside the counter, before the buttons. The bar is already a flex row, so a
   credit needs no positioning work; it shrinks first on a narrow phone rather
   than pushing Share and Save off the end. */
.sk3g-credit { opacity:.85; min-width:0; overflow:hidden; text-overflow:ellipsis;
               white-space:nowrap; }
.sk3g-credit:empty { display:none; }
.sk3g-dl { min-height:44px; display:inline-flex; align-items:center; padding:0 16px;
           border-radius:8px; background:var(--sk3g-orange); color:var(--sk3g-ink);
           font-weight:600; text-decoration:none; white-space:nowrap; }
.sk3g-dl:hover { filter:brightness(.94); color:var(--sk3g-ink); }
.sk3g-share { min-height:44px; display:inline-flex; align-items:center; padding:0 16px;
              border-radius:8px; white-space:nowrap; }
.sk3g-copy { min-height:44px; flex:1 1 16rem; max-width:24rem; padding:0 10px; font:inherit;
             border-radius:8px; border:1px solid rgba(255,255,255,.35);
             background:#fff; color:var(--sk3g-ink); }
.sk3g-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
           overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width:600px){
  .sk3g-grid { grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:6px; }
  .sk3g-years { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
}
@media (prefers-reduced-motion:reduce){ .sk3g *{ transition:none!important; } }