/* A public preview collage. Source order and keyboard order remain identical. */
.public-collage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;grid-auto-rows:128px;gap:14px;align-items:stretch}
.public-collage>.public-photo-card{position:relative;isolation:isolate;grid-column:span 1;grid-row:span 2;min-width:0;min-height:120px;padding:0;border:1px solid var(--border);border-radius:11px;background:#111b15;box-shadow:0 4px 20px #00000012;overflow:hidden;transform:none;transition:border-color .2s,box-shadow .2s}
.public-collage>.public-photo-card:hover,.public-collage>.public-photo-card:focus-within{border-color:var(--orange);transform:none;box-shadow:0 8px 25px #0000002b}
.public-collage .public-photo-card .photo-image{position:absolute;inset:0;z-index:0;width:100%;height:100%;aspect-ratio:auto;background:#111b15;overflow:hidden}
.public-collage .public-photo-card .photo-open{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.public-collage .public-photo-card .photo-open img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:#111b15;transform:scale(1.001);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.public-collage .public-photo-card:hover .photo-open img,.public-collage .public-photo-card:focus-within .photo-open img{transform:scale(1.04)}
.public-collage .public-photo-card .photo-overlay{top:13px;right:13px;bottom:auto;left:13px;z-index:1;align-items:flex-start;gap:8px;pointer-events:none}
.public-collage .public-photo-card .registration-tag{max-width:calc(100% - 43px);padding:5px 7px;border:1px solid #e0e7d73d;border-radius:4px;background:#152219de;color:#f4f4e9;font:9px/1.55 var(--body);letter-spacing:.1px;backdrop-filter:blur(7px);pointer-events:none}
.public-collage .public-photo-card .registration-tag .icon{flex-shrink:0;width:11px;height:11px}
.public-collage .public-photo-card .photo-year{padding:5px 7px;border:1px solid #e0e7d72b;border-radius:4px;background:#152219d9;color:#f4f4e9;font:9px/1.55 var(--mono);white-space:nowrap}
.public-collage .public-photo-card .photo-body{position:absolute;inset:auto 0 0;z-index:2;padding:65px 20px 16px;background:linear-gradient(180deg,#07100b00 0%,#07100baa 32%,#07100bec 100%);color:#f5f2e9;pointer-events:none}
.public-collage .public-photo-card .photo-type{color:#d2ddc9;font:9px/1.6 var(--mono);letter-spacing:1.25px;margin:0 0 7px;text-shadow:0 1px 8px #0009}
.public-collage .public-photo-card .photo-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;padding:0;background:transparent;color:#fffaf0;font-family:var(--heading);font-size:30px;font-weight:var(--reading-label-weight,500);line-height:1.05;letter-spacing:.1px;text-align:left;overflow-wrap:anywhere;text-shadow:0 2px 12px #0008;pointer-events:auto;cursor:pointer}
.public-collage .public-photo-card .photo-title:hover{color:#ffc18c}
.public-collage .public-photo-card .photo-bottom{position:relative;margin-top:12px;padding-top:9px;border-top:1px solid #e6eedb3b;gap:13px;color:#e0e8d9}
.public-collage .public-photo-card .photo-meta{font-size:11px;line-height:1.65;color:#e0e8d9;text-shadow:0 1px 8px #0009}
.public-collage .public-photo-card .photo-bottom>.icon-button{width:33px;min-width:33px;height:33px;min-height:33px;margin:-4px 0 -3px;padding:8px;border:1px solid #e3ebda59;border-radius:50%;background:#ffffff0d;color:#f6f5eb;pointer-events:auto;cursor:pointer}
.public-collage .public-photo-card .photo-bottom>.icon-button:hover{background:#ffffff21;border-color:#ffc18c;color:#ffc18c}
.public-collage .public-photo-card .photo-open:focus-visible{outline:3px solid #ffc18c;outline-offset:-6px}
.public-collage .public-photo-card :is(.photo-title,.icon-button):focus-visible{outline:2px solid #ffc18c;outline-offset:4px;border-radius:3px}
html[data-theme="light"] .public-collage>.public-photo-card{border-color:#9fab97;box-shadow:0 5px 22px #2b382c1a}
html[data-theme="light"] .public-collage>.public-photo-card:focus-within,html[data-theme="light"] .public-collage>.public-photo-card:hover{border-color:#a54712;box-shadow:0 8px 26px #2b382c30}
@media(min-width:1000px){
  .public-collage{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:140px;gap:16px}
  .public-collage>.public-photo-card:nth-child(7n+1){grid-column:span 2;grid-row:span 3}
  .public-collage>.public-photo-card:nth-child(7n+2){grid-column:span 1;grid-row:span 3}
  .public-collage>.public-photo-card:nth-child(7n+7){grid-column:span 2;grid-row:span 2}
  .public-collage>.public-photo-card:nth-child(7n+1) .photo-title,.public-collage>.public-photo-card:nth-child(7n+7) .photo-title{font-size:37px;max-width:90%}
  .public-collage>.public-photo-card:nth-child(7n+1) .photo-body{padding:85px 25px 22px}
}
@media(min-width:561px) and (max-width:999px){
  .public-collage>.public-photo-card:nth-child(5n+1){grid-column:span 2;grid-row:span 2}
  .public-collage>.public-photo-card:nth-child(5n+1) .photo-title{font-size:34px}
}
@media(max-width:560px){
  .public-collage{grid-template-columns:minmax(0,1fr);grid-auto-rows:128px;gap:13px}
  .public-collage>.public-photo-card{grid-column:span 1;grid-row:span 2;border-radius:9px}
  .public-collage>.public-photo-card:nth-child(4n+1){grid-row:span 3}
  .public-collage .public-photo-card .photo-body{padding:65px 18px 17px}
  .public-collage .public-photo-card .photo-title{font-size:29px}
  .public-collage .public-photo-card .photo-overlay{top:12px;right:12px;left:12px}
}
@media(prefers-reduced-motion:reduce){.public-collage>.public-photo-card,.public-collage .public-photo-card .photo-open img{transition:none}.public-collage .public-photo-card:hover .photo-open img,.public-collage .public-photo-card:focus-within .photo-open img{transform:none}}