@import url("https://junkumori.rip/blog/wp-content/themes/junkumori/style.css");

:root{
  --artlog-frill-size:20px;
  --artlog-sidebar-ribbon-width:calc(93% - 20px);
  --artlog-sidebar-ribbon-top:3px;
}

html, body{
  overflow-x:clip;
}

body{
  background:url("https://junkumori.rip/assets/background/bg-grey-02.jpg") center top repeat;
}

.art-log-index .layout{
  box-sizing:border-box;
  width:min(1240px, calc(100% - 64px));
  grid-template-columns:290px minmax(0, 1fr) !important;
  margin:0 auto;
  align-items:start;
  padding:34px 14px 14px;
  border:0;
  outline:0;
  background:transparent;
  overflow-x:clip;
}

.art-log-index #sidebar{
  position:relative;
  margin-top:0 !important;
}

.artlog-frill-frame{
  margin:0;
  width:100%;
}

.artlog-frill-top,
.artlog-frill-bottom{
  height:var(--artlog-frill-size);
  background-repeat:no-repeat,no-repeat;
  background-position:top left, top right;
  background-size:var(--artlog-frill-size) var(--artlog-frill-size), var(--artlog-frill-size) var(--artlog-frill-size);
}

.artlog-frill-top{
  background-image:
    url("https://junkumori.rip/assets/borders/frill-01.gif"),
    url("https://junkumori.rip/assets/borders/frill-02.gif");
}

.artlog-frill-bottom{
  background-image:
    url("https://junkumori.rip/assets/borders/frill-03.gif"),
    url("https://junkumori.rip/assets/borders/frill-04.gif");
}

.artlog-frill-top-edge,
.artlog-frill-bottom-edge{
  height:var(--artlog-frill-size);
  margin:0 var(--artlog-frill-size);
}

.artlog-frill-top-edge{
  background:url("https://junkumori.rip/assets/borders/frill-06.gif") repeat-x;
  background-size:auto 100%;
}

.artlog-frill-bottom-edge{
  background:url("https://junkumori.rip/assets/borders/frill-05.gif") repeat-x;
  background-size:auto 100%;
}

.artlog-frill-center{
  background-image:
    url("https://junkumori.rip/assets/borders/frill-08.gif"),
    url("https://junkumori.rip/assets/borders/frill-07.gif");
  background-position:top right, top left;
  background-repeat:repeat-y, repeat-y;
  background-size:var(--artlog-frill-size) auto, var(--artlog-frill-size) auto;
}

.artlog-frill-inner{
  margin:0 var(--artlog-frill-size);
  background:#171617;
}

.art-log-index #sidebar .artlog-profile-widget{
  --artlog-sidebar-inner-width:calc(100% - 28px);
  --artlog-sidebar-box-width:calc(100% - 28px);
  --artlog-sidebar-stack-gap:10px;
  --artlog-sidebar-tight-gap:0;
  margin:0;
  background:#171617;
  border:1px solid #202020;
  box-shadow:inset 0 0 0 1px #000, inset 0 0 0 2px #1d1d1d;
  position:relative;
}

.art-log-index #sidebar .artlog-profile-widget::before,
.art-log-index #sidebar .artlog-profile-widget::after,
.artlog-tags-widget::before,
.artlog-tags-widget::after{
  content:none;
  display:none;
}

.art-log-index .main{
  position:relative;
}

.artlog-sidebar-ribbon{
  position:absolute;
  top:var(--artlog-sidebar-ribbon-top);
  left:50%;
  z-index:4;
  width:var(--artlog-sidebar-ribbon-width);
  transform:translateX(-50%);
  pointer-events:none;
}

.artlog-sidebar-ribbon img{
  display:block;
  width:100%;
  height:auto;
  border:0;
  box-shadow:none;
  background:transparent;
}

.art-log-index .main > .artlog-frill-frame{
  margin:0;
}

.art-log-index .main > .artlog-frill-frame article.post{
  margin:0;
  background:#171617;
  border:1px solid #202020;
  box-shadow:inset 0 0 0 1px #000, inset 0 0 0 2px #1d1d1d;
}

.art-log-index .main > .artlog-frill-frame article.post::before,
.art-log-index .main > .artlog-frill-frame article.post::after{
  content:none;
  display:none;
}

.art-log-index .artlog-profile-widget > :not(.widget-title){
  padding:14px 12px 12px;
}

.art-log-index .artlog-profile-widget > #tax-boxes,
.art-log-index .artlog-profile-widget > .artlog-home-below-tags{
  padding:0;
}

.artlog-sidebar-actions{
  padding-top:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.artlog-sidebar-intro{
  width:var(--artlog-sidebar-inner-width);
  margin:0 0 12px;
  padding:0 0 12px;
  border-bottom:1px solid #2a2a2a;
}

.artlog-sidebar-intro-text{
  margin:0;
  color:#bdbdbd;
  font-size:15px;
  line-height:1.5;
}

.artlog-search-tools{
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:flex-start;
  width:var(--artlog-sidebar-box-width);
}

.artlog-search-form{
  margin:0;
  width:100%;
}

.artlog-search-label{
  display:block;
  margin:0 0 4px;
  color:#ececec;
  font-size:13px;
}

.artlog-search-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
}

.artlog-search-input{
  min-width:0;
  width:100%;
  padding:1px 10px;
  border:1px solid #4a4a4a;
  background:#161616;
  color:#f2f2f2;
  font:inherit;
}

.artlog-search-input::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
  width:10px;
  height:10px;
  cursor:pointer;
  background:
    linear-gradient(45deg, transparent 46%, #bcbcbc 46%, #bcbcbc 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #bcbcbc 46%, #bcbcbc 54%, transparent 54%);
  opacity:.85;
}

.artlog-search-input::-webkit-search-cancel-button:hover{
  opacity:1;
}

.artlog-search-button{
  padding:1px 12px;
  color:#fff;
  border:1px solid #000;
  background:linear-gradient(to bottom,#3f3f3f 0%,#2b2b2b 45%,#242424 55%,#181818 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.04);
  cursor:pointer;
}

.artlog-search-button:hover{
  background:linear-gradient(to bottom,#4a4a4a 0%,#343434 45%,#2e2e2e 55%,#1b1b1b 100%);
}

.artlog-search-clear{
  display:inline-block;
  margin-top:8px;
  font-size:12px;
}

.artlog-sidebar-widget{
  width:var(--artlog-sidebar-box-width);
  margin:var(--artlog-sidebar-stack-gap) auto 0;
}

.artlog-tags-widget{
  width:var(--artlog-sidebar-box-width);
  box-sizing:border-box;
  position:relative;
  padding:0;
  overflow:hidden;
  background:#222223;
  border:1px solid #202020;
  box-shadow:inset 0 0 0 1px #000, inset 0 0 0 2px #1d1d1d;
}

.artlog-home-below-tags{
  width:var(--artlog-sidebar-box-width);
  margin-top:0;
  margin-bottom:0;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

.artlog-home-below-tags .artlog-side-button{
  width:100%;
  margin:0;
}

.artlog-toggle{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:8px;
  color:#ececec;
  font-size:13px;
}

.artlog-toggle input{
  width:16px;
  height:16px;
  accent-color:#8d8d8d;
}

.artlog-side-button{
  display:block;
  width:100%;
  margin:0 0 8px;
  padding:6px 12px;
  text-align:center;
  color:#fff;
  text-decoration:none;
  border:1px solid #000;
  background:linear-gradient(to bottom,#3f3f3f 0%,#2b2b2b 45%,#242424 55%,#181818 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.04);
}

.artlog-side-button:hover{
  text-decoration:none;
  background:linear-gradient(to bottom,#4a4a4a 0%,#343434 45%,#2e2e2e 55%,#1b1b1b 100%);
}

.artlog-admin-links{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  width:var(--artlog-sidebar-box-width);
  margin:var(--artlog-sidebar-tight-gap) auto 0;
  margin-bottom:-6px;
}

.artlog-admin-links .artlog-side-button{
  margin-bottom:0;
}

#tax-boxes .widget-title{
  margin:0;
}

#tax-boxes .artlog-tags-empty{
  margin:0;
  padding:12px;
}

#tax-boxes .artlog-tag-pill{
  display:inline-flex;
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  padding:4px 10px;
  align-items:center;
  justify-content:center;
  background:#222;
  border:1px solid #555;
  font-size:13px;
  color:#fff;
  line-height:1.5;
  text-decoration:none;
  overflow-wrap:anywhere;
  word-break:break-word;
}

#tax-boxes .tagcloud{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:12px 16px;
  width:100%;
  box-sizing:border-box;
}

#tax-boxes .tagcloud.is-collapsible{
  position:relative;
}

#tax-boxes .tagcloud.is-collapsed .artlog-tag-pill.is-hidden-row{
  display:none;
}

#tax-boxes .artlog-tag-toggle{
  display:block;
  width:calc(100% - 32px);
  margin:0 auto 12px;
  padding:5px 10px;
  border:1px solid #555;
  background:#1b1b1b;
  color:#fff;
  text-align:center;
  cursor:pointer;
}

#tax-boxes .artlog-tag-toggle:hover{
  background:#262626;
  border-color:#666;
}

.artlog-archive-post{
  padding:12px 14px 18px;
}

.artlog-archive-post .entry.entry-content{
  margin:0;
  padding:0;
}

.artlog-pagination{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin:0 0 20px;
}

.artlog-page-link{
  display:inline-block;
  min-width:34px;
  padding:4px 10px;
  text-align:center;
  color:#fff;
  text-decoration:none;
  background:#222;
  border:1px solid #555;
}

.artlog-page-link:hover{
  text-decoration:none;
  background:#333;
  border-color:#777;
}

.artlog-page-link.is-current{
  background:#333;
  border-color:#777;
}

.artlog-page-link.is-disabled{
  opacity:.5;
  pointer-events:none;
}

.artlog-page-link.is-ellipsis{
  border-color:transparent;
  background:transparent;
  min-width:auto;
  padding:4px 3px;
  cursor:pointer;
}

.artlog-page-link.is-ellipsis:hover{
  background:transparent;
  border-color:transparent;
  text-decoration:underline;
}

.artlog-page-link.is-ellipsis:focus-visible{
  outline:1px solid #777;
  outline-offset:2px;
}

.artlog-goto-pop{
  position:fixed;
  z-index:10050;
  display:none;
  width:min(92vw, 320px);
  background:#171515;
  border:1px solid #3a3434;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}

.artlog-goto-pop.is-open{
  display:block;
}

.artlog-goto-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:12px 14px;
  border-bottom:1px solid #2e2b2b;
}

.artlog-goto-title{
  color:#fff;
  font-weight:700;
}

.artlog-goto-close{
  width:28px;
  height:28px;
  border:0;
  background:transparent;
  color:#ddd;
  cursor:pointer;
  font:inherit;
}

.artlog-goto-close:hover{
  color:#fff;
}

.artlog-goto-body{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px;
}

.artlog-goto-btn{
  min-width:38px;
  height:34px;
  padding:0 10px;
  border:1px solid #000;
  background:linear-gradient(to bottom,#3f3f3f 0%,#2b2b2b 45%,#242424 55%,#181818 100%);
  color:#fff;
  cursor:pointer;
}

.artlog-goto-btn:hover{
  background:linear-gradient(to bottom,#4a4a4a 0%,#343434 45%,#2e2e2e 55%,#1b1b1b 100%);
}

.artlog-goto-input{
  width:60px;
  height:34px;
  padding:0 8px;
  border:1px solid #888;
  background:#161616;
  color:#fff;
  text-align:center;
  font:inherit;
}

.artlog-archive-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(185px, 1fr));
  gap:20px;
}

.artlog-thumb-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.artlog-thumb-frame{
  --artlog-thumb-frame-size:25px;
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:1 / 1;
  box-sizing:border-box;
  background:#111;
}

.artlog-thumb-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    url('/assets/borders/frame-01.png') no-repeat left top,
    url('/assets/borders/frame-03.png') no-repeat right top,
    url('/assets/borders/frame-05.png') no-repeat right bottom,
    url('/assets/borders/frame-07.png') no-repeat left bottom,
    url('/assets/borders/frame-02.png') repeat-x left var(--artlog-thumb-frame-size) top,
    url('/assets/borders/frame-06.png') repeat-x left var(--artlog-thumb-frame-size) bottom,
    url('/assets/borders/frame-08.png') repeat-y left top var(--artlog-thumb-frame-size),
    url('/assets/borders/frame-04.png') repeat-y right top var(--artlog-thumb-frame-size);
  background-size:
    var(--artlog-thumb-frame-size) var(--artlog-thumb-frame-size),
    var(--artlog-thumb-frame-size) var(--artlog-thumb-frame-size),
    var(--artlog-thumb-frame-size) var(--artlog-thumb-frame-size),
    var(--artlog-thumb-frame-size) var(--artlog-thumb-frame-size),
    calc(100% - (var(--artlog-thumb-frame-size) * 2)) var(--artlog-thumb-frame-size),
    calc(100% - (var(--artlog-thumb-frame-size) * 2)) var(--artlog-thumb-frame-size),
    var(--artlog-thumb-frame-size) calc(100% - (var(--artlog-thumb-frame-size) * 2)),
    var(--artlog-thumb-frame-size) calc(100% - (var(--artlog-thumb-frame-size) * 2));
}

.artlog-thumb-frame img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none;
  display:block;
  margin:0 !important;
  object-fit:cover !important;
}

.artlog-thumb-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.74) 0%, rgba(0,0,0,.5) 12%, rgba(0,0,0,0) 24%),
    linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.46) 12%, rgba(0,0,0,0) 24%);
  opacity:0;
  transition:opacity .18s ease;
}

.artlog-thumb-frame.is-spoiler img{
  filter:blur(18px);
  transform:scale(1.06);
}

.artlog-thumb-warning{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:rgba(0,0,0,.28);
  text-align:center;
  pointer-events:none;
}

.artlog-thumb-warning-text{
  display:inline-block;
  padding:6px 12px;
  color:#fff;
  background:rgba(0,0,0,.68);
  border:1px solid rgba(255,255,255,.18);
  text-shadow:0 1px 0 #000;
}

.artlog-thumb-fallback{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  padding:12px;
  color:#bdbdbd;
  text-align:center;
  background:#111;
}

.artlog-thumb-meta{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:14px 14px 12px;
  color:#fff;
  pointer-events:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
  text-shadow:0 1px 2px rgba(0,0,0,.95);
}

.artlog-thumb-title,
.artlog-thumb-date{
  display:block;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.artlog-thumb-title{
  align-self:flex-start;
  font-size:15px;
  font-weight:700;
  line-height:1.15;
}

.artlog-thumb-date{
  align-self:flex-end;
  font-size:15px;
  font-weight:700;
  line-height:1.15;
}

.artlog-thumb-link:hover .artlog-thumb-frame::after,
.artlog-thumb-link:focus-visible .artlog-thumb-frame::after{
  opacity:1;
}

.artlog-thumb-link:hover .artlog-thumb-meta,
.artlog-thumb-link:focus-visible .artlog-thumb-meta{
  opacity:1;
  transform:translateY(0);
}

.artlog-thumb-link:focus-visible{
  outline:none;
}

.artlog-thumb-link:focus-visible .artlog-thumb-frame{
  box-shadow:0 0 0 1px #9d9d9d;
}

#tax-boxes .artlog-tag-pill:hover{
  text-decoration:none;
  background:#2b2b2b;
  border-color:#666;
}

.artlog-empty{
  margin:0;
  text-align:center;
  color:#d0d0d0;
}

.artlog-search-results{
  margin:0 0 18px;
  color:#d9d9d9;
}

.artlog-main-toggle-form{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid #2a2a2a;
}

.artlog-pagination-bottom{
  margin-top:20px;
  margin-bottom:0;
}

@media (max-width:900px){
  .art-log-index .layout{
    width:min(100%, calc(100% - 32px));
  }
  .art-log-index .layout{ padding:12px; }
}

@media (max-width:640px){
  .artlog-admin-links{
    grid-template-columns:1fr;
  }

  .artlog-archive-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
}