* { box-sizing: border-box; }
.gallery-page { width: auto; margin: clamp(72px, 9vh, 104px) clamp(278px, 20vw, 372px) 100px clamp(350px, 23vw, 445px); }
.gallery-head { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 5px; border-bottom: 1px dotted currentColor; font-size: 11px; }
.gallery-head nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.gallery-head button { padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; }
.gallery-note { margin: 10px 0 25px; font-size: 9px; opacity: .62; }
.gallery-filter-panel { position: fixed; right: clamp(34px, 4vw, 82px); top: clamp(138px, 17vh, 176px); z-index: 24; width: clamp(185px, 14vw, 228px); max-height: calc(100vh - 220px); padding: 8px 0 24px 16px; overflow-y: auto; overscroll-behavior: contain; color: inherit; font-size: 9px; scrollbar-width: thin; filter: drop-shadow(0 0 10px var(--corp020-nav-bg)); }
html[data-theme="light"] .gallery-filter-panel { color: #222; }
.gallery-search { margin: 0 0 11px; }
.gallery-search label { display: block; margin-bottom: 4px; opacity: .65; }
.gallery-search > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px; }
.gallery-search input,
.gallery-search button,
.gallery-sort select { min-width: 0; padding: 2px 3px; color: inherit; background: color-mix(in srgb, currentColor 5%, transparent); border: 0; border-bottom: 1px dotted currentColor; font: inherit; letter-spacing: inherit; }
.gallery-search button { cursor: pointer; }
.gallery-suggestions { position: absolute; z-index: 5; display: none; width: calc(100% - 22px); padding: 3px 0; color: inherit; background: color-mix(in srgb, var(--corp020-background, #000) 88%, transparent); border-bottom: 1px dotted currentColor; backdrop-filter: blur(8px); }
.gallery-suggestions.open { display: flex; flex-direction: column; }
.gallery-suggestions button { padding: 3px 4px; color: inherit; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; opacity: .72; }
.gallery-suggestions button:hover, .gallery-suggestions button:focus-visible { opacity: 1; }
.gallery-sort { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px; align-items: center; margin-bottom: 13px; opacity: .72; }
.gallery-tags-toggle { display: none; }
.gallery-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; }
.gallery-tags button { padding: 0; color: inherit; background: transparent; border: 0; border-bottom: 1px dotted transparent; cursor: pointer; opacity: .48; }
.gallery-tags button:hover,
.gallery-tags button:focus-visible,
.gallery-tags button.is-active { border-bottom-color: currentColor; opacity: 1; filter: blur(.12px); }
.gallery-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; grid-auto-rows: 70px; gap: 8px; }
.gallery-tile { position: relative; grid-column: span 2; grid-row: span 3; min-width: 0; padding: 0 0 19px; overflow: hidden; color: inherit; background: transparent; border: 1px solid currentColor; cursor: zoom-in; opacity: .82; transition: opacity .25s ease, filter .25s ease; }
.gallery-tile:nth-child(5n + 1) { grid-column: span 3; grid-row: span 4; }
.gallery-tile:nth-child(7n + 2) { grid-column: span 2; grid-row: span 5; }
.gallery-tile:nth-child(9n + 4) { grid-column: span 4; grid-row: span 3; }
.gallery-tile:hover, .gallery-tile:focus-visible { opacity: 1; filter: blur(.2px); }
.gallery-tile img, .gallery-tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-tile.is-video::after { content: "video"; position: absolute; top: 3px; right: 4px; z-index: 2; font-size: 7px; opacity: .7; }
.gallery-tile span { position: absolute; left: 3px; right: 3px; bottom: 2px; overflow: hidden; font-size: 8px; text-align: left; white-space: nowrap; text-overflow: ellipsis; }
.gallery-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 58vh; margin: 0; text-align: center; }
.gallery-empty img { display: block; width: min(260px, 58vw); max-height: 48vh; object-fit: contain; animation: gallery-error-vibrate .18s steps(2,end) infinite; }
.gallery-empty p { margin: 8px 0 0; font: 400 13px/1.25 'Doto', "Helvetica Neue", Helvetica, Arial, sans-serif; }
@keyframes gallery-error-vibrate { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-1px,1px); } 50% { transform: translate(1px,-1px); } 75% { transform: translate(1px,1px); } }
.gallery-view { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: minmax(38px,1fr) minmax(0,calc(100vw - 150px)) minmax(38px,1fr); place-items: center; width: 100%; height: 100%; padding: 24px; visibility: hidden; color: #bdbdbd; background: rgba(0,0,0,.9); opacity: 0; backdrop-filter: blur(0); pointer-events: none; transition: opacity .45s ease, visibility 0s linear .45s, backdrop-filter .45s ease; }
.gallery-view.open { visibility: visible; opacity: 1; backdrop-filter: blur(5px); pointer-events: auto; transition-delay: 0s; }
.gallery-view figure { grid-column: 2; display: grid; grid-template-rows: minmax(0,1fr) auto; place-items: center; gap: 7px; width: 100%; height: 100%; margin: 0; }
.gallery-view-media { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; pointer-events: auto; }
.gallery-view img, .gallery-view video { grid-area: 1/1; display: block; max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; opacity: 0; filter: blur(10px); transform: scale(.9); transition: opacity .45s ease, filter .55s ease, transform .68s cubic-bezier(.16,1,.3,1); }
.gallery-view img[hidden], .gallery-view video[hidden] { display: none; }
.gallery-view.open img, .gallery-view.open video { opacity: 1; filter: blur(0); transform: scale(1); }
.gallery-view.is-switching img, .gallery-view.is-switching video { opacity: .2; filter: blur(7px); transform: scale(.975); transition-duration: .14s; }
.gallery-view figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 9px; }
.gallery-view-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.gallery-view-tags button { padding: 0; color: inherit; background: transparent; border: 0; border-bottom: 1px dotted currentColor; font: inherit; cursor: pointer; opacity: .65; }
.gallery-view-tags button:hover, .gallery-view-tags button:focus-visible { opacity: 1; }
/* Coloured dot before two specific tag chips (rail + full-view). Purely
   presentational, keyed off the tag value; text baseline is unchanged. */
[data-gallery-tag="secret"]::before,
[data-gallery-tag="by:020baby"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; vertical-align: middle; }
[data-gallery-tag="secret"]::before { background: #3fbf6f; }
[data-gallery-tag="by:020baby"]::before { background: #5a9dff; }
.gallery-view-close,
.gallery-view-nav { position: fixed; z-index: 2; padding: 14px; color: inherit; background: transparent; border: 0; font: 300 28px/1 'Doto', "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; opacity: .45; transition: opacity .2s ease, filter .2s ease; }
.gallery-view-close { left: 18px; top: 12px; font-size: 18px; }
.gallery-view-prev { left: 13px; top: 50%; transform: translateY(-50%); }
.gallery-view-next { right: 13px; top: 50%; transform: translateY(-50%); }
.gallery-view-close:hover,
.gallery-view-nav:hover { opacity: 1; filter: blur(.25px); }
html[data-theme="light"] .gallery-page { color: #222; }
.gallery-page ~ .gutter-tools .kettenkrad-helper { left: 146px; top: 84px; width: 164px; }
.gallery-mini-radio { position: fixed; left: 62px; top: min(39vh, 404px); z-index: 88; width: 280px; margin: 0; color: inherit; background: transparent; touch-action: none; }
.gallery-mini-radio .bar-title { display: flex; justify-content: space-between; margin: 0; padding-bottom: 3px; border-bottom: 1px dotted currentColor; font-size: 10px; font-weight: 300; }
.gallery-page ~ .gutter-tools .floating-note { position: fixed; left: 118px; top: auto; bottom: 67px; }
.secret-gate { position: fixed; inset: 0; z-index: 520; display: grid; place-items: center; visibility: hidden; background: rgba(0,0,0,.22); opacity: 0; backdrop-filter: blur(0); pointer-events: none; transition: opacity .32s ease, backdrop-filter .5s ease, visibility 0s linear .5s; }
.secret-gate.open { visibility: visible; opacity: 1; backdrop-filter: blur(13px); pointer-events: auto; transition-delay: 0s; }
.secret-gate form { width: min(280px, calc(100vw - 36px)); padding: 18px; color: #bdbdbd; background: rgba(0,0,0,.88); border: 1px dotted currentColor; transform: scale(.96); transition: opacity .55s ease, filter .55s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.secret-gate.open form { transform: scale(1); }
.secret-gate.vanish form { opacity: 0; filter: blur(18px) brightness(2); transform: scale(1.12); }
.secret-gate h2 { margin: 0 0 15px; font-size: 12px; font-weight: 300; }
.secret-gate label, .secret-gate p { display: block; margin: 5px 0; font-size: 9px; opacity: .7; }
.secret-gate input { width: 100%; padding: 4px; color: inherit; background: transparent; border: 0; border-bottom: 1px dotted currentColor; font: inherit; }
.secret-gate button { margin-top: 10px; padding: 2px 8px; color: inherit; background: transparent; border: 1px dotted currentColor; font: inherit; cursor: pointer; }
.secret-gate form.denied { animation: secret-denied .2s steps(2,end) 2; }
@keyframes secret-denied { 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(5px) } }
.secret-particle { position: fixed; z-index: 530; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 7px #fff, 0 0 18px #9fcaff; pointer-events: none; animation: secret-particle 1s cubic-bezier(.15,.75,.25,1) forwards; }
@keyframes secret-particle { to { opacity: 0; filter: blur(3px); transform: translate(var(--px),var(--py)) scale(.1); } }
@media (max-width: 800px) {
  /* Order: header, then search/tags, then images. `display: contents` promotes
     the header/note/grid out of main so they can be flex-ordered alongside the
     filter panel (which must stay outside main on desktop, where .page-stage's
     transform would otherwise break its fixed positioning). */
  body { display: flex; flex-direction: column; align-items: center; }
  .gallery-page { display: contents; }
  .gallery-head { order: 1; width: calc(100vw - 24px); }
  .gallery-filter-panel { order: 2; position: relative; right: auto; top: auto; width: calc(100vw - 24px); margin: 6px 0 18px; }
  .gallery-note { order: 3; width: calc(100vw - 24px); }
  .gallery-grid { order: 4; width: calc(100vw - 24px); }
  .gallery-tags { flex-flow: row wrap; gap: 6px 12px; }
  .gallery-tags-toggle { display: inline-block; margin-bottom: 8px; padding: 0; color: inherit; background: transparent; border: 0; border-bottom: 1px dotted currentColor; font: inherit; letter-spacing: inherit; cursor: pointer; opacity: .72; }
  .gallery-tags:not(.is-open) { display: none; }
  .gallery-mini-radio { display: none; }
  .gallery-page ~ .gutter-tools .kettenkrad-helper { display: none; }
  .gallery-grid { grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 64px; }
  .gallery-tile:nth-child(n) { grid-column: span 2; }
  .gallery-tile:nth-child(5n + 1) { grid-column: span 3; }
}
@media (max-width: 1150px) and (min-width: 801px) {
  .gallery-page { width: auto; margin-left: 300px; margin-right: 232px; }
  .gallery-filter-panel { right: 18px; width: 178px; }
  .gallery-mini-radio { left: 64px; }
}
@media (max-width: 520px) {
  .gallery-page { margin-top: 50px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
  .gallery-tile:nth-child(n) { grid-column: span 1; grid-row: span 3; }
  .gallery-tile:nth-child(4n + 1) { grid-column: span 2; grid-row: span 4; }
}