/* The owner's adjustments on the 00е look: the photo frame, the moving line of titles, the hit parade, the album. */

.own-photo { margin: 0; }
.own-photo img, .own-photo video { display: block; width: min(300px, 100%); height: auto; border: 2px dashed #39ff14; }
.own-photo figcaption { max-width: 300px; }

.own-run { margin-bottom: 8px; padding: 4px 0; border-top: 1px solid var(--y2k-blue); border-bottom: 1px solid var(--y2k-blue); font: bold 13px/1.4 var(--y2k-body); }
.own-run b { margin-right: 3em; }

.own-album img, .own-album video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.own-cta { display: inline-block; margin-top: 8px; text-decoration: none; }
.own-policy { margin: 6px 0; font-size: 12px; }
.own-empty { margin: 8px 0; color: var(--y2k-cyan); }
.own-empty[hidden] { display: none; }
.own-contacts { margin: 0; padding: 0; list-style: none; }
.own-contacts li { padding: 4px 0; border-bottom: 1px dotted var(--y2k-blue); }

/* On a phone the columns stack in reading order: the menu, the content, then the sidebars. */
@media (max-width: 760px) {
  .y2k-layout { display: flex; flex-direction: column; }
  .y2k-layout > aside:first-of-type { display: contents; }
  .y2k-layout > aside:first-of-type > .y2k-box:not(nav) { order: 2; }
  .y2k-layout > aside:first-of-type > nav.y2k-box { order: 0; }
  .y2k-layout > main { order: 1; min-width: 0; }
  .y2k-layout > aside:last-of-type { order: 3; min-width: 0; }
  .y2k-album { grid-template-columns: repeat(3, 1fr); }
}

/* The album's covers open the reel in Instagram, each framed like the 00е photo album's button. */
.own-album a { display: block; padding: 3px; border: 3px outset var(--y2k-silver); background: var(--y2k-silver); }
.own-album a:hover, .own-album a:focus-visible { border-color: var(--y2k-pink); box-shadow: 0 0 10px var(--y2k-pink); }

/* The hit parade: rank, cover, title, and the count in big numerals. */
.own-chart-head { margin: 12px 0 6px; color: var(--y2k-cyan); font: bold 13px/1.2 var(--y2k-body); text-transform: uppercase; }
.own-chart { margin: 0 0 12px; padding: 0; list-style: none; }
.own-chart li + li { margin-top: 6px; }
.own-chart-row { display: grid; grid-template-columns: 34px 56px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px; border: 2px ridge var(--y2k-silver); background: rgba(0, 0, 40, .6); color: #fff; text-decoration: none; }
.own-chart-row:hover, .own-chart-row:focus-visible { border-color: var(--y2k-pink); box-shadow: 0 0 10px var(--y2k-pink); }
.own-rank { color: var(--y2k-lime); font: 900 30px/1 var(--y2k-display); text-align: center; text-shadow: 2px 2px 0 #000; }
.own-chart-row img, .own-chart-row video { display: block; width: 56px; height: auto; border: 2px outset var(--y2k-silver); }
.own-chart-name { font: bold 13px/1.25 var(--y2k-body); }
.own-likes { color: var(--y2k-cyan); font: 12px/1.2 var(--y2k-body); text-align: right; white-space: nowrap; }
.own-likes b { display: block; color: var(--y2k-yellow); font: 900 24px/1 var(--y2k-display); text-shadow: 2px 2px 0 var(--y2k-pink); }
video:not([controls])::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }