/* Image Collection — builds on /style.css tokens (--chrome, --chrome-edge, --display, --wide …). */

.collection { padding-top: 34px; }
.c-loading, .c-empty { text-align: center; color: var(--muted); font: 0.7rem/1.8 var(--wide); letter-spacing: 0.2em; text-transform: uppercase; padding: 60px 0; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.c-hero { text-align: center; margin-bottom: 28px; }
.c-hero h1 { margin: 0; font: 900 clamp(2rem, 6vw, 4.2rem)/1 var(--display); text-transform: uppercase; letter-spacing: 0.03em;
  filter: drop-shadow(0 0 22px rgba(210, 220, 235, 0.25)); }
.c-hero p { margin: 14px 0 0; font: 0.66rem/1.8 var(--wide); letter-spacing: 0.24em; text-transform: uppercase; color: var(--silver); }
.c-pending { color: var(--muted); }

/* ------------------------------------------------------------------ toolbar */

.c-toolbar {
  position: sticky; top: 0; z-index: 5; margin: 0 -16px 34px; padding: 14px 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 12px 14px; align-items: center;
  background: linear-gradient(rgba(3, 3, 4, 0.92), rgba(3, 3, 4, 0.82));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(200, 206, 214, 0.14);
}
.c-search {
  display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 46px; border-radius: 999px;
  border: 1.5px solid transparent;
  background: linear-gradient(#0b0c0f, #0b0c0f) padding-box, var(--chrome-edge) border-box;
  color: var(--silver); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
}
.c-search:focus-within { box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 0 3px rgba(220, 228, 240, 0.18), 0 0 24px rgba(220, 228, 240, 0.2); }
.c-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: 16px/1 "Avenir Next", system-ui, sans-serif; }
.c-search input::placeholder { color: #6d747e; }
.c-views { display: flex; border-radius: 999px; padding: 3px; background: #0b0c0f; border: 1px solid #2a2e34; }
.c-views a { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; text-decoration: none;
  font: 0.6rem/1 var(--wide); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.c-views a.on { color: #0a0b0d; background: var(--chrome-button); box-shadow: inset 0 1px 0 #fff; text-shadow: none; }
.c-views a.on svg { stroke: #0a0b0d; }
.c-chips { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.c-chips::-webkit-scrollbar { display: none; }
.c-chips .sep { flex: none; width: 1px; margin: 4px 6px; background: #2f343b; }
.chip {
  flex: none; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: 0.58rem/1 var(--wide); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--silver); background: #0d0e11; border: 1px solid #2c3037; transition: border-color .2s, color .2s, box-shadow .2s;
}
.chip:hover { border-color: #8a929c; color: #fff; }
.chip.on { color: #0a0b0d; background: var(--chrome-button); border-color: #fff; box-shadow: 0 0 16px rgba(230, 236, 245, 0.3); }
@media (max-width: 640px) {
  .c-toolbar { grid-template-columns: 1fr; }
  .c-views { justify-self: center; }
}

/* ------------------------------------------------------------------ sets */

.c-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 48px 34px; }
.setcard { display: flex; flex-direction: column; gap: 18px; text-decoration: none; color: var(--text); }
.setcard:hover { text-shadow: none; }
.stack { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; }
.stack img { position: absolute; width: auto; height: auto; max-width: 78%; max-height: 82%; border: 2px solid; border-image: var(--chrome-edge) 1;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85); transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .5s; background: #111; }
.stack .top { z-index: 3; filter: grayscale(0.35) brightness(0.92); }
.stack .under { filter: grayscale(1) brightness(0.45); }
.stack .u0 { z-index: 2; transform: rotate(-5deg) translate(-8px, 4px); }
.stack .u1 { z-index: 1; transform: rotate(6deg) translate(10px, 2px); }
.setcard:hover .top { transform: translateY(-8px) scale(1.03); filter: none; }
.setcard:hover .u0 { transform: rotate(-12deg) translate(-34px, 6px); filter: grayscale(0.4) brightness(0.7); }
.setcard:hover .u1 { transform: rotate(13deg) translate(36px, 4px); filter: grayscale(0.4) brightness(0.7); }
.stack .count {
  position: absolute; z-index: 4; right: 6%; bottom: 6%; min-width: 38px; padding: 7px 10px; border-radius: 999px; text-align: center;
  font: 800 0.8rem/1 var(--display); color: #0a0b0d; background: var(--chrome-button); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8), inset 0 1px 0 #fff;
}
.stack.single .count { display: none; }
.setcard .meta { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.setcard .kind, .c-sethead .kind { font: 0.58rem/1.4 var(--wide); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.setcard .name { font: 700 0.98rem/1.3 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: #e9ecef; }
.setcard:hover .name { color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, 0.45); }
.setcard .by, .c-sethead .by { font-size: 0.82rem; color: var(--muted); font-style: italic; }

/* ------------------------------------------------------------------ set detail */

.c-crumb { font: 0.6rem/1 var(--wide); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.c-crumb a { text-decoration: none; }
.c-sethead { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 36px; align-items: center; margin-bottom: 34px; }
.c-sethead .cover img { width: 100%; display: block; border: 2px solid; border-image: var(--chrome-edge) 1; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(210, 220, 235, 0.12); }
.c-sethead h1 { margin: 8px 0 10px; font: 900 clamp(1.6rem, 4.4vw, 3rem)/1.05 var(--display); text-transform: uppercase; }
.c-sethead .desc { color: var(--text); max-width: 60ch; }
.c-read {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 13px 22px; border-radius: 999px; text-decoration: none;
  font: 0.64rem/1 var(--wide); letter-spacing: 0.24em; text-transform: uppercase; color: #0a0b0d;
  background: var(--chrome-button); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7), inset 0 1px 0 #fff;
}
.c-read:hover { color: #000; text-shadow: none; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 26px rgba(235, 240, 250, 0.5), inset 0 1px 0 #fff; }
@media (max-width: 640px) { .c-sethead { grid-template-columns: 1fr; text-align: center; } .c-sethead .cover { max-width: 220px; margin: 0 auto; } }

.c-chapters {
  position: sticky; top: 0; z-index: 4; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px 20px; padding: 12px 16px; background: rgba(3, 3, 4, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(200, 206, 214, 0.14);
}
.c-chapters::-webkit-scrollbar { display: none; }
.c-chapters button { flex: none; cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1px solid #2c3037; background: #0d0e11; color: var(--silver);
  font: 0.56rem/1 var(--wide); letter-spacing: 0.14em; text-transform: uppercase; }
.c-chapters button:hover { border-color: #aab1ba; color: #fff; }
.c-chapters small { color: var(--muted); margin-left: 4px; }
.c-chapter { scroll-margin-top: 70px; margin-bottom: 40px; }
.c-chapter h2 { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; font: 700 0.8rem/1.3 var(--wide); letter-spacing: 0.22em; text-transform: uppercase; color: #eef0f3; }
.c-chapter h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #8a929c, transparent); }

/* ------------------------------------------------------------------ justified image grid */

.grid { --row: 190px; display: flex; flex-wrap: wrap; gap: 12px; }
.grid::after { content: ""; flex-grow: 1000000; }
.grid.results { --row: 230px; }
@media (max-width: 640px) { .grid { --row: 120px; gap: 8px; } .grid.results { --row: 150px; } }
.tile {
  position: relative; display: block; overflow: hidden; border-radius: 3px;
  flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row)); max-width: calc(var(--ar) * var(--row) * 1.9);
  background: #0b0c0e; outline: 1px solid rgba(200, 206, 214, 0.16);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7); transition: outline-color .25s, box-shadow .25s, transform .25s;
}
.tile img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; filter: brightness(0.9); transition: filter .3s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.tile:hover, .tile:focus-visible { outline: 2px solid #e6e9ed; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85), 0 0 30px rgba(220, 228, 240, 0.28); z-index: 1; text-shadow: none; }
.tile:hover img { filter: brightness(1.05); transform: scale(1.035); }
.tile .pg {
  position: absolute; top: 8px; left: 8px; padding: 4px 7px; border-radius: 4px;
  font: 800 0.66rem/1 var(--display); color: #0a0b0d; background: var(--chrome-button); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
}
.tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 9px; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.92) 55%); color: #fff;
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.tile:hover .cap, .tile:focus-visible .cap, .grid.results .cap { opacity: 1; transform: none; }
.tile .cap .t { font: 700 0.72rem/1.3 var(--display); letter-spacing: 0.02em; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .cap .s { font-size: 0.74rem; line-height: 1.35; color: #c9ced6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
mark { background: #e8ebef; color: #000; border-radius: 2px; padding: 0 2px; }

/* ------------------------------------------------------------------ viewer */

html.viewer-lock, html.viewer-lock body { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto 1fr auto; background: #020203; color: var(--text); }
.viewer[hidden] { display: none; }
.viewer button { cursor: pointer; }
.v-top { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 10px 14px 10px 20px; border-bottom: 1px solid rgba(200, 206, 214, 0.12); }
.v-crumb { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 0.62rem/1.4 var(--wide); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.v-crumb b { color: #eef0f3; font-weight: 400; }
.v-count { font: 700 0.72rem/1 var(--display); letter-spacing: 0.08em; color: var(--silver); white-space: nowrap; }
.v-actions { display: flex; gap: 4px; }
.v-actions > * { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--silver); }
.v-actions > *:hover { border-color: #5e656e; color: #fff; text-shadow: none; }
.viewer.info-open [data-act="info"] { color: #0a0b0d; background: var(--chrome-button); }
.v-body { position: relative; display: grid; grid-template-columns: 1fr 0; min-height: 0; transition: grid-template-columns .3s cubic-bezier(.2, .8, .2, 1); }
.viewer.info-open .v-body { grid-template-columns: 1fr min(380px, 34vw); }

.v-stage { position: relative; overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.v-stage.zoomed { cursor: grab; }
.v-stage.zoomed:active { cursor: grabbing; }
.v-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; transition: opacity .25s;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(220, 228, 240, 0.25); will-change: transform; }
.v-spin { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px; border-radius: 50%;
  border: 2px solid rgba(220, 228, 240, 0.15); border-top-color: #fff; opacity: 0; animation: spin .8s linear infinite; pointer-events: none; }
.v-stage.loading .v-spin { opacity: 1; transition: opacity .2s .25s; }
@keyframes spin { to { transform: rotate(360deg); } }
.v-nav {
  position: absolute; top: 50%; width: 54px; height: 54px; margin-top: -27px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid transparent; color: #fff;
  background: linear-gradient(rgba(10, 11, 14, 0.75), rgba(10, 11, 14, 0.75)) padding-box, var(--chrome-edge) border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); opacity: 0.75; transition: opacity .2s, transform .2s;
}
.v-nav svg { width: 24px; height: 24px; }
.v-nav:hover { opacity: 1; transform: scale(1.06); }
.v-nav:disabled { opacity: 0; pointer-events: none; }
.v-prev { left: 18px; } .v-next { right: 18px; }
@media (hover: none) { .v-nav { opacity: 0.55; width: 44px; height: 44px; margin-top: -22px; } }

.v-info { overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 40px; border-left: 1px solid rgba(200, 206, 214, 0.12); background: rgba(8, 9, 12, 0.9); visibility: hidden; }
.viewer.info-open .v-info { visibility: visible; }
.v-info h2 { margin: 0 0 12px; font: 800 1.08rem/1.25 var(--display); text-transform: uppercase; letter-spacing: 0.02em; color: #fff; }
.v-info .d { margin: 0 0 16px; }
.v-info .muted, .v-info .note { color: var(--muted); font-size: 0.84rem; }
.v-info .note { margin-top: 22px; font-style: italic; border-top: 1px solid #22262c; padding-top: 14px; }
.v-info .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.v-info .tags button { padding: 6px 10px; border-radius: 999px; border: 1px solid #333840; background: #0e0f12; color: var(--silver); font-size: 0.78rem; }
.v-info .tags button:hover { border-color: #c9ced6; color: #fff; }
.v-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 18px; font-size: 0.86rem; }
.v-info dt { font: 0.56rem/1.9 var(--wide); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.v-info dd { margin: 0; }
.v-info summary { cursor: pointer; font: 0.6rem/1.6 var(--wide); letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver); margin-bottom: 10px; }
.v-info .txt { white-space: pre-line; font-size: 0.86rem; line-height: 1.55; color: #bfc4cc; margin: 0; }

.v-strip { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; border-top: 1px solid rgba(200, 206, 214, 0.12); scrollbar-width: thin; scrollbar-color: #3a3f46 transparent; }
.v-strip button { flex: none; padding: 0; height: 64px; border: 2px solid transparent; border-radius: 3px; background: #111; opacity: 0.5; transition: opacity .2s, border-color .2s; }
.v-strip img { display: block; height: 100%; width: auto; }
.v-strip button:hover { opacity: 0.9; }
.v-strip button.on { opacity: 1; border-color: #fff; box-shadow: 0 0 16px rgba(230, 236, 245, 0.45); }

@media (max-width: 760px) {
  .v-top { grid-template-columns: 1fr auto; padding-left: 14px; }
  .v-crumb { grid-column: 1 / -1; order: 3; }
  .v-actions > * { width: 36px; height: 36px; }
  .v-body, .viewer.info-open .v-body { grid-template-columns: 1fr; }
  .v-info { position: absolute; left: 0; right: 0; bottom: 0; max-height: 58%; border-left: 0; border-top: 1px solid #2a2e34;
    border-radius: 14px 14px 0 0; transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility .3s; box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.8); }
  .viewer.info-open .v-info { transform: none; }
  .v-strip button { height: 48px; }
}

/* Forum placeholder */
.soon .post p { max-width: 60ch; }